interstellar_development/freettrpg
3
1
Fork 1
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request 'Javascript & index.html' (#8) from sageTheDm/FreeTTRPG:pages into pages

Browse source 
Reviewed-on: https://codeberg.org/Patrick_Pluto/FreeTTRPG/pulls/8
This commit is contained in:
Patrick 2024-06-30 15:58:44 +00:00
commit 9ab4f2a11f
8 changed files with 273 additions and 176 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.vscode/launch.json vendored
View file

@ -8,7 +8,7 @@
"type": "firefox", "type": "firefox",
"request": "launch", "request": "launch",
"name": "Open index.html", "name": "Open index.html",
"file": "c:\\Users\\lucab\\Desktop\\opendnd\\Website-draft\\index.html" "file": "c:\\Users\\lucab\\Desktop\\freettrpg\\pages\\index.html"
} }
] ]
} }

BIN
assets/background.jpg
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 23 MiB

After

Width:  |  Height:  |  Size: 1.6 MiB

39
download.html
View file

@ -5,42 +5,21 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>FreeTTRPG</title> <title>FreeTTRPG</title>
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
<script src="header-download.js" type="text/javascript" defer></script>
<script src="java.js" type="text/javascript" defer></script>
</head> </head>
<body> <body>
<header> <header-component></header-component>
<div class="header-content">
<div class="project-name"><a href="index.html">FreeTTRPG</a></div>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="#section1">open a git console</a></li>
<li><a href="#section2">Go to our codeberg website</a></li>
<li><a href="#section3">git clone</a></li>
<li><a href="#section4">read through our license</a></li>
</ul>
</div>
</header>
<article> <article>
<section id="section1"> <section id="section1">
<h1>open a git console</h1>
<p class="code-box">$ git init</p>
<p>Initialize an empty Git repository in the current directory.</p>
</section>
<section id="section2">
<h1>Go to our codeberg website</h1> <h1>Go to our codeberg website</h1>
<a href="https://codeberg.org/Patrick_Pluto/FreeTTRPG.git"> <a href="https://codeberg.org/Patrick_Pluto/FreeTTRPG.git">
<button type="button">Our source code</button> <button type="button">Our source code</button>
</a> </a>
<p class="code-box">
$ git clone https://codeberg.org/Patrick_Pluto/FreeTTRPG.git
</p>
<p>
Clone the FreeTTRPG repository from Codeberg to your local machine.
</p>
</section> </section>
<section id="section3"> <section id="section2">
<h1>git clone</h1> <h1>git clone</h1>
<p class="code-box"> <p class="code-box">
$ git clone https://codeberg.org/Patrick_Pluto/FreeTTRPG.git $ git clone https://codeberg.org/Patrick_Pluto/FreeTTRPG.git
@ -50,13 +29,13 @@
</p> </p>
</section> </section>
<section id="section4"> <section id="section3">
<h1>move into the repository</h1> <h1>move into the repository</h1>
<p class="code-box">$ cd FreeTTRPG</p> <p class="code-box">$ cd FreeTTRPG</p>
<p>Display the contents of the license file (`LICENSE`).</p> <p>Display the contents of the license file (`LICENSE`).</p>
</section> </section>
<section id="section5"> <section id="section4">
<h1>read through our license</h1> <h1>read through our license</h1>
<p class="code-box">$ cat LICENSE</p> <p class="code-box">$ cat LICENSE</p>
<p>Move the bash console into the newly created repository</p> <p>Move the bash console into the newly created repository</p>
@ -66,11 +45,5 @@
<br /> <br />
<br /> <br />
</footer> </footer>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body> </body>
</html> </html>

31
header-download.js Normal file
View file

@ -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 = `
<style>
</style>
<header>
<div class="header-content">
<div><a href="index.html" class="project-name">FreeTTRPG</a></div>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
</div>
</header>
<div class="div-menu">
<ul class="menu">
<li><a href="#section1">Our Website</a></li>
<li><a href="#section2">Cloning</a></li>
<li><a href="#section3">Move into the folder</a></li>
<li><a href="#section4">Read the license</a></li>
</ul>
</div>
`;
}
}
customElements.define('header-component', Header);
// @license-end

34
header.js Normal file
View file

@ -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 = `
<style>
</style>
<header>
<div class="header-content">
<div><a href="index.html" class="project-name">FreeTTRPG</a></div>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
</div>
</header>
<div class="div-menu">
<ul class="menu">
<li><a href="#section1">The Game</a></li>
<li><a href="#section2">Our Goal</a></li>
<li><a href="#section3">Community-Driven Platform<</a></li>
<li><a href="#section4">Join Us</a></li>
<li><a href="#section5">Our Code</a></li>
<li><a href="#section6">Copyright Note</a></li>
<li><a href="#section7">Game Assets</a></li>
</ul>
</div>
`;
}
}
customElements.define('header-component', Header);
// @license-end

57
index.html
View file

@ -5,23 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>FreeTTRPG</title> <title>FreeTTRPG</title>
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
<script src="header.js" type="text/javascript" defer></script>
<script src="java.js" type="text/javascript" defer></script>
</head> </head>
<body> <body>
<header> <header-component></header-component>
<div class="header-content">
<div class="project-name"><a href="index.html">FreeTTRPG</a></div>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
<ul class="menu">
<li><a href="#section1">The Game</a></li>
<li><a href="#section2">Our Vision</a></li>
<li><a href="#section3">Copyright</a></li>
<li><a href="#section4">Platform</a></li>
<li><a href="#section5">Join Us</a></li>
<li><a href="#section6">Source Code</a></li>
<li><a href="#section7">Game Assets</a></li>
</ul>
</div>
</header>
<article> <article>
<section id="section1"> <section id="section1">
@ -33,11 +21,11 @@
freedom back in the hands of players. freedom back in the hands of players.
</p> </p>
<img src="assets/game.png" alt="current game version" /> <img src="assets/game.png" alt="current game version" />
<p>Current game version</p> <p class="no-margin">Current game version</p>
</section> </section>
<section id="section2"> <section id="section2">
<h1>Our Vision</h1> <h1>Our Goal</h1>
<p> <p>
Our project offers a game engine with a solid foundation of basic 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 content and story packs to get you started. But that's just the
@ -49,16 +37,6 @@
</section> </section>
<section id="section3"> <section id="section3">
<h1>Copyright</h1>
<p>
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.
</p>
</section>
<section id="section4">
<h1>Community-Driven Platform</h1> <h1>Community-Driven Platform</h1>
<p> <p>
We're building a platform where users can share their content packs We're building a platform where users can share their content packs
@ -68,7 +46,7 @@
</p> </p>
</section> </section>
<section id="section5"> <section id="section4">
<h1>Join Us</h1> <h1>Join Us</h1>
<p> <p>
We're excited to share FreeTTRPG with the world and hope you'll join We're excited to share FreeTTRPG with the world and hope you'll join
@ -77,7 +55,7 @@
</p> </p>
</section> </section>
<section id="section6"> <section id="section5">
<h1>Our Code</h1> <h1>Our Code</h1>
<p> <p>
The entire code for FreeTTRPG is publicly saved and available. To download out project please follow the instructions from the download page. 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 @@
<button type="button">Download</button> <button type="button">Download</button>
</a> </a>
</section> </section>
<section id="section6">
<h2>
Copyright Note
</h2>
<p>
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.
</p>
</section>
<section id="section7"> <section id="section7">
<h1>Our Game Assets</h1> <h1>Our Game Assets</h1>
@ -119,17 +105,17 @@
</div> </div>
<h2>Our textures</h2> <h2>Our textures</h2>
<div class="cards"> <div class="cards">
<a href="index.html" class="card"> <a href="#section7" class="card">
<img src="assets/water.png" alt="Water Texture" /> <img src="assets/water.png" alt="Water Texture" />
<h3>Water</h3> <h3>Water</h3>
<p>Our water texture that is incomplete</p> <p>Our water texture that is incomplete</p>
</a> </a>
<a href="index.html" class="card"> <a href="#section7" class="card">
<img src="assets/grass.png" alt="Grass Texture" /> <img src="assets/grass.png" alt="Grass Texture" />
<h3>Grass</h3> <h3>Grass</h3>
<p>Our grass texture that is incomplete</p> <p>Our grass texture that is incomplete</p>
</a> </a>
<a href="index.htmlm" class="card"> <a href="#section7" class="card">
<img src="assets/sand.png" alt="Blank Card" /> <img src="assets/sand.png" alt="Blank Card" />
<h3>sand</h3> <h3>sand</h3>
<p>Our sand texture that is incomplete</p> <p>Our sand texture that is incomplete</p>
@ -147,12 +133,5 @@
<br /> <br />
<br /> <br />
</footer> </footer>
<script>
function toggleMenu() {
const menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body> </body>
</html> </html>

21
java.js Normal file
View file

@ -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

265
style.css
View file

@ -1,126 +1,224 @@
/* Reset and global styles */ /* Reset and global styles */
body { * {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-family: "Roboto", Arial, sans-serif;
transition: 0.5s; transition: 0.5s; /* Smooth transitions */
} }
/* Body styles */ /* Body styles */
body { body {
background-color: #f9f9f9;
background: #f5f5f5 url("assets/background.jpg") no-repeat center fixed; background: #f5f5f5 url("assets/background.jpg") no-repeat center fixed;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
min-height: 100vh; min-height: 100vh;
margin: 0;
padding: 0;
} }
/* Header styles */ .div-menu{
header { z-index: 1;
background-color: rgba(0, 0, 0, 0.7); background-color: #211c1c;
padding: 10px;
width: 100%; width: 100%;
position: fixed; position: fixed;
top: 0; top: 0;
left: 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 { .header-content {
max-width: 1200px;
margin: 0 auto;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; 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 { .project-name {
color: white; text-decoration: none;
font-size: 1.5em; 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 { .burger-menu {
background: none; background: none;
border: none; border: none;
color: white; color: #ffffff;
font-size: 1.5em; font-size: 1.5em; /* Updated font size */
cursor: pointer; cursor: pointer;
display: none; display: block;
padding: 0;
z-index: 12; /* Higher z-index to ensure it is above the menu */
} }
.menu { .menu {
list-style: none;
display: flex; display: flex;
justify-content: space-around; flex-direction: column;
flex-grow: 1; 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 { .menu.active {
margin: 0 10px; display: flex;
} top: 10vh;
z-index: 5; /* Lower z-index than header, header content, and project name */
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);
} }
/* Article styles */ /* Article styles */
article { article {
margin-top: 140px; margin-bottom: 50px;
padding: 30px; padding: 20px;
width: 90%; width: 90%;
max-width: 800px; max-width: 800px;
background: rgba(255, 255, 255, 0.9); background-color: #ffffff;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
text-align: center; text-align: left;
} margin-top: 140px; /* Increase margin-top for better readability */
padding-top: 20px;
h1, p {
margin-bottom: 20px;
} }
h1 { h1 {
color: #333; color: #333333;
font-size: 1.8em; margin: 20px 0;
font-size: 2.5em;
} }
h2{ p.text {
margin-bottom: -1em; color: #555555;
}
p {
color: #666;
line-height: 1.6; 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 { img {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
margin-bottom: 20px; margin-bottom: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
} }
button { button {
padding: 12px 24px; padding: 12px 24px;
margin: 0; margin: 1em 0;
border: none; border: none;
background-color: #333; background-color: #3498db;
color: white; color: #ffffff;
border-radius: 5px; border-radius: 5px;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
} }
button:hover { 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 */ /* Cards section styles */
@ -129,6 +227,7 @@ section .cards {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px; gap: 20px;
margin-top: 50px; margin-top: 50px;
z-index: 0; /* Ensure cards are behind the dropdown menu */
} }
section .card { section .card {
@ -161,6 +260,11 @@ section .card img {
margin: 0 auto 10px; margin: 0 auto 10px;
} }
h2{
margin-bottom: 1em;
margin-top: 1em;
}
section .card h3 { section .card h3 {
margin: 10px 0; margin: 10px 0;
} }
@ -169,58 +273,13 @@ section .card p {
flex-grow: 1; flex-grow: 1;
} }
.no-margin{
margin: -20px 0;
margin-bottom: 20px;
}
/* Mobile Styles */ /* Mobile Styles */
@media (max-width: 768px) { @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 { section .card {
padding: 12px; /* Adjusted padding */ padding: 12px; /* Adjusted padding */
} }