forked from interstellar_development/freettrpg
added new java scripts & styling
This commit is contained in:
Sage The DM
parent
649f201729
commit
1267cd27f1
8 changed files with 259 additions and 160 deletions
2
.vscode/launch.json
vendored
2
.vscode/launch.json
vendored
|
|
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 23 MiB After Width: | Height: | Size: 1.6 MiB |
|
|
@ -5,42 +5,21 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>FreeTTRPG</title>
|
||||
<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>
|
||||
<body>
|
||||
<header>
|
||||
<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>
|
||||
<header-component></header-component>
|
||||
|
||||
<article>
|
||||
<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>
|
||||
<a href="https://codeberg.org/Patrick_Pluto/FreeTTRPG.git">
|
||||
<button type="button">Our source code</button>
|
||||
</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 id="section3">
|
||||
<section id="section2">
|
||||
<h1>git clone</h1>
|
||||
<p class="code-box">
|
||||
$ git clone https://codeberg.org/Patrick_Pluto/FreeTTRPG.git
|
||||
|
|
@ -50,13 +29,13 @@
|
|||
</p>
|
||||
</section>
|
||||
|
||||
<section id="section4">
|
||||
<section id="section3">
|
||||
<h1>move into the repository</h1>
|
||||
<p class="code-box">$ cd FreeTTRPG</p>
|
||||
<p>Display the contents of the license file (`LICENSE`).</p>
|
||||
</section>
|
||||
|
||||
<section id="section5">
|
||||
<section id="section4">
|
||||
<h1>read through our license</h1>
|
||||
<p class="code-box">$ cat LICENSE</p>
|
||||
<p>Move the bash console into the newly created repository</p>
|
||||
|
|
@ -66,11 +45,5 @@
|
|||
<br />
|
||||
<br />
|
||||
</footer>
|
||||
<script>
|
||||
function toggleMenu() {
|
||||
const menu = document.querySelector(".menu");
|
||||
menu.classList.toggle("active");
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
31
header-download.js
Normal file
31
header-download.js
Normal 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
34
header.js
Normal 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 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>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('header-component', Header);
|
||||
// @license-end
|
||||
27
index.html
27
index.html
|
|
@ -5,23 +5,11 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>FreeTTRPG</title>
|
||||
<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>
|
||||
<body>
|
||||
<header>
|
||||
<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>
|
||||
<header-component></header-component>
|
||||
|
||||
<article>
|
||||
<section id="section1">
|
||||
|
|
@ -33,7 +21,7 @@
|
|||
freedom back in the hands of players.
|
||||
</p>
|
||||
<img src="assets/game.png" alt="current game version" />
|
||||
<p>Current game version</p>
|
||||
<p class="no-margin">Current game version</p>
|
||||
</section>
|
||||
|
||||
<section id="section2">
|
||||
|
|
@ -147,12 +135,5 @@
|
|||
<br />
|
||||
<br />
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
function toggleMenu() {
|
||||
const menu = document.querySelector(".menu");
|
||||
menu.classList.toggle("active");
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
21
java.js
Normal file
21
java.js
Normal 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
265
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 */
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue