diff --git a/.vscode/launch.json b/.vscode/launch.json index f1a48af..e22abfb 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -8,7 +8,7 @@ "type": "firefox", "request": "launch", "name": "Open index.html", - "file": "c:\\Users\\lucab\\Desktop\\opendnd\\Website-draft\\index.html" + "file": "c:\\Users\\lucab\\Desktop\\freettrpg\\pages\\index.html" } ] } \ No newline at end of file diff --git a/assets/background.jpg b/assets/background.jpg index a0cdc9f..0cc1b5a 100644 Binary files a/assets/background.jpg and b/assets/background.jpg differ diff --git a/download.html b/download.html index 7dba409..f709747 100644 --- a/download.html +++ b/download.html @@ -5,42 +5,21 @@ FreeTTRPG + + -
-
-
FreeTTRPG
- - -
-
+
-

open a git console

-

$ git init

-

Initialize an empty Git repository in the current directory.

-
- -

Go to our codeberg website

-

- $ git clone https://codeberg.org/Patrick_Pluto/FreeTTRPG.git -

-

- Clone the FreeTTRPG repository from Codeberg to your local machine. -

-
+

git clone

$ git clone https://codeberg.org/Patrick_Pluto/FreeTTRPG.git @@ -50,13 +29,13 @@

-
+

move into the repository

$ cd FreeTTRPG

Display the contents of the license file (`LICENSE`).

-
+

read through our license

$ cat LICENSE

Move the bash console into the newly created repository

@@ -66,11 +45,5 @@

- diff --git a/header-download.js b/header-download.js new file mode 100644 index 0000000..526e208 --- /dev/null +++ b/header-download.js @@ -0,0 +1,31 @@ +// @license https://creativecommons.org/licenses/by-sa/4.0/ CC-BY-SA-4.0 +class Header extends HTMLElement { + constructor() { + super(); + } + + connectedCallback() { + this.innerHTML = ` + +
+
+ + +
+
+
+ +
+ `; + } +} + +customElements.define('header-component', Header); +// @license-end \ No newline at end of file diff --git a/header.js b/header.js new file mode 100644 index 0000000..1f5d344 --- /dev/null +++ b/header.js @@ -0,0 +1,34 @@ +// @license https://creativecommons.org/licenses/by-sa/4.0/ CC-BY-SA-4.0 +class Header extends HTMLElement { + constructor() { + super(); + } + + connectedCallback() { + this.innerHTML = ` + +
+
+ + +
+
+
+ +
+ `; + } +} + +customElements.define('header-component', Header); +// @license-end \ No newline at end of file diff --git a/index.html b/index.html index b866f8b..e201ed5 100644 --- a/index.html +++ b/index.html @@ -5,23 +5,11 @@ FreeTTRPG + + -
-
-
FreeTTRPG
- - -
-
+
@@ -33,11 +21,11 @@ freedom back in the hands of players.

current game version -

Current game version

+

Current game version

-

Our Vision

+

Our Goal

Our project offers a game engine with a solid foundation of basic content and story packs to get you started. But that's just the @@ -49,16 +37,6 @@

-

Copyright

-

- The best part? Everything you create with our tool is yours to own and - control. We won't claim any copyright or ownership over your - creations. You're free to share, modify, or use your content as you - see fit. -

-
- -

Community-Driven Platform

We're building a platform where users can share their content packs @@ -68,7 +46,7 @@

-
+

Join Us

We're excited to share FreeTTRPG with the world and hope you'll join @@ -77,7 +55,7 @@

-
+

Our Code

The entire code for FreeTTRPG is publicly saved and available. To download out project please follow the instructions from the download page. @@ -86,6 +64,14 @@

+
+

+ Copyright Note +

+

+ The main game must be distributed as stated in the LICENSE file. Any content made for it can however be freely distributed under any license. Once we make the content creator for this game, any content made there will also have no restrictions on the content you make with it. +

+

Our Game Assets

@@ -119,17 +105,17 @@

Our textures

- + Water Texture

Water

Our water texture that is incomplete

 - + Grass Texture

Grass

Our grass texture that is incomplete

 - + Blank Card

sand

Our sand texture that is incomplete

@@ -147,12 +133,5 @@

- - diff --git a/java.js b/java.js new file mode 100644 index 0000000..04c6225 --- /dev/null +++ b/java.js @@ -0,0 +1,21 @@ +// @license https://creativecommons.org/licenses/by-sa/4.0/ CC-BY-SA-4.0 +function toggleMenu() { + const menu = document.querySelector(".menu"); + menu.classList.toggle("active"); + + // Add event listener to close menu when clicking anywhere on the document + if (menu.classList.contains("active")) { + document.addEventListener("click", closeMenu); + } else { + document.removeEventListener("click", closeMenu); + } +} + +function closeMenu(event) { + const menu = document.querySelector(".menu"); + if (!menu.contains(event.target) && !event.target.classList.contains("burger-menu")) { + menu.classList.remove("active"); + document.removeEventListener("click", closeMenu); + } +} +// @license-end \ No newline at end of file diff --git a/style.css b/style.css index 710b327..71e56e0 100644 --- a/style.css +++ b/style.css @@ -1,126 +1,224 @@ /* Reset and global styles */ -body { +* { box-sizing: border-box; margin: 0; padding: 0; - font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; - transition: 0.5s; + font-family: "Roboto", Arial, sans-serif; + transition: 0.5s; /* Smooth transitions */ } /* Body styles */ body { + background-color: #f9f9f9; background: #f5f5f5 url("assets/background.jpg") no-repeat center fixed; display: flex; flex-direction: column; align-items: center; min-height: 100vh; + margin: 0; + padding: 0; } -/* Header styles */ -header { - background-color: rgba(0, 0, 0, 0.7); - padding: 10px; +.div-menu{ + z-index: 1; + background-color: #211c1c; width: 100%; position: fixed; top: 0; left: 0; - z-index: 1000; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); + padding: 0; + height: auto; +} + +/* Header styles */ +header { + background-color: #211c1c; + width: 100%; + position: fixed; + top: 0; + left: 0; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); + padding: 0; /* Further reduce the padding */ + height: auto; + z-index: 10; /* Higher z-index to ensure it is above other elements */ } .header-content { - max-width: 1200px; - margin: 0 auto; display: flex; justify-content: space-between; align-items: center; + max-width: 1200px; + margin: 0 auto; + flex-direction: row; + padding: 0 20px; /* Original padding */ + z-index: 10; +} + +.div-menu li { + margin: 1; + z-index: 1; + padding: 1em; +} + +.div-menu a { + width: 100%; + padding: 12px 0; + text-align: center; /* Center align the menu items */ + color: #ffffff; + text-decoration: none; + padding: 8px; /* Smaller padding */ + border-radius: 5px; + transition: background-color 0.3s ease; + justify-content: center; + z-index: 1; +} + +.div-menu a:hover { + background-color: #34495e; } .project-name { - color: white; - font-size: 1.5em; + text-decoration: none; + color: #ffffff; + font-size: 1.5em; /* Updated font size */ + font-weight: bold; + z-index: 11; /* Higher z-index to ensure it is above the menu */ } .burger-menu { background: none; border: none; - color: white; - font-size: 1.5em; + color: #ffffff; + font-size: 1.5em; /* Updated font size */ cursor: pointer; - display: none; + display: block; + padding: 0; + z-index: 12; /* Higher z-index to ensure it is above the menu */ } .menu { - list-style: none; display: flex; - justify-content: space-around; - flex-grow: 1; + flex-direction: column; + background-color: #211c1c; + position: absolute; + top: -50vh; + left: 0; + width: 100%; /* Full width of the header */ + z-index: 5; /* Lower z-index than header, header content, and project name */ + padding: 0; + list-style: none; + justify-content: center; /* Center items vertically */ + text-align: center; /* Center items horizontally */ + animation: top 1s ease-in-out; /* Initial animation state */ } -header li { - margin: 0 10px; -} - -header a { - color: white; - text-decoration: none; - padding: 10px; - border-radius: 5px; - transition: background-color 0.3s ease; -} - -header a:hover { - background-color: rgba(255, 255, 255, 0.2); +.menu.active { + display: flex; + top: 10vh; + z-index: 5; /* Lower z-index than header, header content, and project name */ } /* Article styles */ article { - margin-top: 140px; - padding: 30px; + margin-bottom: 50px; + padding: 20px; width: 90%; max-width: 800px; - background: rgba(255, 255, 255, 0.9); + background-color: #ffffff; border-radius: 10px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); - text-align: center; -} - -h1, p { - margin-bottom: 20px; + box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); + text-align: left; + margin-top: 140px; /* Increase margin-top for better readability */ + padding-top: 20px; } h1 { - color: #333; - font-size: 1.8em; + color: #333333; + margin: 20px 0; + font-size: 2.5em; } -h2{ - margin-bottom: -1em; -} - -p { - color: #666; +p.text { + color: #555555; line-height: 1.6; + margin: 20px 0; + font-size: 1.1em; } +.code-box { + background-color: #f7f7f7; + border: 1px solid #ddd; + font-family: monospace; + padding: 15px; + margin: 1em 0; +} + + img { max-width: 100%; height: auto; margin-bottom: 20px; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } button { padding: 12px 24px; - margin: 0; + margin: 1em 0; border: none; - background-color: #333; - color: white; + background-color: #3498db; + color: #ffffff; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; } button:hover { - background-color: #555; + background-color: #2980b9; +} + +.flex { + display: flex; + align-items: center; +} + +nav { + margin: 20px; +} + +.folder-list { + justify-content: center; + list-style-type: none; + padding: 0; +} + +.folder-list-item { + margin-bottom: 10px; + justify-content: center; +} + +.folder-link { + text-decoration: none; + color: #ffffff; + font-weight: bold; + display: block; + padding: 10px; + border-radius: 5px; + background-color: #2c3e50; + transition: background-color 0.3s ease; +} + +.folder-link:hover { + background-color: #34495e; +} + +.folder-link:active { + transform: scale(0.98); /* Slight scale down on click */ +} + +article img{ + margin-top: 1em; } /* Cards section styles */ @@ -129,6 +227,7 @@ section .cards { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 50px; + z-index: 0; /* Ensure cards are behind the dropdown menu */ } section .card { @@ -161,6 +260,11 @@ section .card img { margin: 0 auto 10px; } +h2{ + margin-bottom: 1em; + margin-top: 1em; +} + section .card h3 { margin: 10px 0; } @@ -169,58 +273,13 @@ section .card p { flex-grow: 1; } +.no-margin{ + margin: -20px 0; + margin-bottom: 20px; +} + /* Mobile Styles */ @media (max-width: 768px) { - .burger-menu { - display: block; - } - - .menu { - display: none; - flex-direction: column; - background-color: rgba(0, 0, 0, 0.7); - position: absolute; - top: 100%; - left: 0; - width: 100%; - z-index: 999; - } - - .menu.active { - display: flex; - } - - header { - padding: 8px; /* Adjusted padding */ - height: auto; - } - - .header-content { - flex-direction: row; - justify-content: space-between; - align-items: center; - } - - .project-name { - font-size: 1.2em; - } - - header li { - margin: 0; - width: 100%; - } - - header a { - padding: 10px; - width: 100%; - display: block; - } - - article { - margin-top: 180px; /* Adjusted margin-top */ - padding: 20px; /* Adjusted padding */ - } - section .card { padding: 12px; /* Adjusted padding */ }