From 02a8d891bcc2ddab24eaa7088b943e337e0fa54f Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Tue, 17 Dec 2024 10:43:57 +0100 Subject: [PATCH] Updated the website --- dropdown.js | 56 ++++++++++++++++++ header.js | 26 +++++---- index.html | 123 ++++++++++++++------------------------- styles.css | 162 +++++++++++++++++++++++++++++++++++----------------- 4 files changed, 223 insertions(+), 144 deletions(-) create mode 100644 dropdown.js diff --git a/dropdown.js b/dropdown.js new file mode 100644 index 0000000..5d28b26 --- /dev/null +++ b/dropdown.js @@ -0,0 +1,56 @@ +// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0 + +/* + * InterstellarDevelopment website + * Copyright (C) 2024 interstellar_development + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + */ +document.addEventListener("DOMContentLoaded", () => { + const menu = document.querySelector(".menu"); + const burgerMenu = document.querySelector(".burger-menu"); + + if (!menu || !burgerMenu) { + console.warn("Menu or burger menu element not found. Ensure they exist in the DOM."); + return; + } + + // Toggle the menu visibility + function toggleMenu() { + menu.classList.toggle("active"); + + if (menu.classList.contains("active")) { + // Add click listener to close menu when clicking outside + document.addEventListener("click", closeMenu); + } else { + // Remove the click listener when menu is closed + document.removeEventListener("click", closeMenu); + } + } + + // Close the menu if clicking outside of it + function closeMenu(event) { + if (!menu.contains(event.target) && !event.target.classList.contains("burger-menu")) { + menu.classList.remove("active"); + document.removeEventListener("click", closeMenu); + } + } + + // Attach click event to the burger menu button + burgerMenu.addEventListener("click", (event) => { + event.stopPropagation(); // Prevent click from immediately triggering closeMenu + toggleMenu(); + }); +}); +// @license-end \ No newline at end of file diff --git a/header.js b/header.js index 6e16e53..3bd9f3c 100644 --- a/header.js +++ b/header.js @@ -17,7 +17,6 @@ * You should have received a copy of the GNU Affero General Public License * along with this program. If not, see . */ - class Header extends HTMLElement { constructor() { super(); @@ -25,20 +24,23 @@ class Header extends HTMLElement { connectedCallback() { this.innerHTML = ` -
-
- - -
-
+
+
+ + +
+
+
+ +
`; } } customElements.define('header-component', Header); - // @license-end diff --git a/index.html b/index.html index 04f3d9f..2c2d3b7 100644 --- a/index.html +++ b/index.html @@ -19,6 +19,7 @@ + @@ -43,24 +44,51 @@

Our Other Projects

+ +

Our Team

+
+
+ + Patrick +

Patrick_Pluto

+

+ The system administrator and our lead coder. He is the one you + will need to blame for bugs in the games +

+ +
+ +
+ + Sage +

sageTheDM

+

+ Our mostly competent web developer and secondary coder, if you + experience any bugs on the website or spelling mistake he is to + blame +

+ +
+
+ + Patrick +

St. Nicolaus

+

+ Our game level and asset designer. He is resposible for all assets in our FreeFTF game. + So if a assets looks ugly be mad at him. Also we are not sure if he is human or just a drunk + wizard cat but one thing is very clear he is still a novice at his job. +

+ +
+
@@ -80,69 +108,6 @@

Join us as we strive to create a vibrant community around free software and gaming. Together, we can make a difference and pave the way for a free future!

- - -
-
- - Patrick -

Patrick_Pluto

-

- The system administrator and our lead coder. He is the one you - will need to blame for bugs in the games -

- -
- -
- - Yasin -

Yasin

-

- Yasin is a proficient programmer with expertise in Java, where he has even developed games, - as well as Bash, HTML, CSS, SQL, and NoSQL. His skills span from backend development and - automation to web design and database management, making him a versatile asset in any tech project. -

- -
- -
- - Sage -

sageTheDM

-

- Our mostly competent web developer and secondary coder, if you - experience any bugs on the website or spelling mistake he is to - blame -

- -
- -
- - Norway -

NorwayLC

-

- Our Development assistant, he is responsible to help our coders - don't lose their mind. He does quality of life improvements for - the endusers and help to keep the project running. -

- -
- -
- - Patrick -

St. Nicolaus

-

- Our game level and asset designer. He is resposible for all assets in our FreeFTF game. - So if a assets looks ugly be mad at him. Also we are not sure if he is human or just a drunk - wizard cat but one thing is very clear he is still a novice at his job. -

- -
- -
diff --git a/styles.css b/styles.css index be76986..2849708 100644 --- a/styles.css +++ b/styles.css @@ -51,50 +51,109 @@ body { background-size: cover; } -/* Header styling */ +/* Header Styling */ +/* Header Styling */ header { background-color: var(--dark-blue); + height: 5em; position: fixed; width: 100%; - padding: 15px 20px; top: 0; left: 0; - margin-bottom: 10em; + padding: 15px 20px; box-shadow: var(--box-shadow); backdrop-filter: blur(5px); z-index: 100; + margin-bottom: 0px; } +/* Burger Menu Styling */ +.burger-menu { + background: none; + border: none; + color: #ffffff; + font-size: 1.8em; + cursor: pointer; + display: block; + padding: 0; + z-index: 110; +} + +/* Dropdown Menu (Hidden by Default) */ +.div-menu { + z-index: 1; + background-color: var(--light-blue); + width: 100%; + position: fixed; + top: 0; + left: 0; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); + padding: 0; + margin-top: 0px; + height: auto; +} + +.div-menu li { + margin: 0; + padding: 1em; + z-index: 1; +} + +.div-menu a { + width: 100%; + padding: 8px 0; + text-align: center; + color: #ffffff; + text-decoration: none; + border-radius: 5px; + transition: background-color 0.3s ease; + display: block; +} + +.div-menu a:hover { + background-color: #34495e; +} + +/* Menu Animation and Styling */ +.menu { + display: flex; + flex-direction: column; + background-color: var(--light-blue); + position: absolute; + top: -50vh; + left: 0; + width: 100%; + z-index: 5; + padding: 0; + margin: 0; + list-style: none; + justify-content: center; + text-align: center; + font-weight: bolder; + font-size: large; + transition: top 0.5s ease-in-out; +} + +.menu.active { + display: flex; + top: 4em; + z-index: 5; +} + +/* Header Content Container */ .header-content { display: flex; justify-content: space-between; align-items: center; + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; + z-index: 10; } -header ul { - list-style: none; - display: flex; - gap: 20px; -} - -header ul li a { - text-decoration: none; - color: var(--accent-color); - font-weight: bold; - padding: 5px 10px; - border-radius: var(--border-radius); - transition: background-color var(--transition-speed), color var(--transition-speed); -} - -header ul li a:hover { - background-color: rgba(255, 221, 85, 0.3); - color: #fff; - box-shadow: 0 0 10px var(--accent-color); -} - -/* Old project name styling */ +/* Project Name Styling */ .project-name { - font-size: 1.5em; + font-size: 2em; color: var(--accent-color); text-decoration: none; transition: color var(--transition-speed), text-shadow var(--transition-speed); @@ -142,7 +201,7 @@ article ul { padding: 0; } -article ul li { +article ul a li { background-color: var(--light-blue); margin-bottom: 10px; border-radius: var(--border-radius); @@ -150,12 +209,12 @@ article ul li { transition: background-color var(--transition-speed), box-shadow var(--transition-speed); } -article ul li:hover { +article ul a li:hover { background-color: rgba(68, 80, 124, 0.9); box-shadow: 0 0 10px var(--accent-color); } -article ul li a { +article ul a li{ text-decoration: none; color: var(--accent-color); font-weight: bold; @@ -180,9 +239,9 @@ footer { } /* Card container styles */ -section .cards { +.cards { display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + grid-template-columns: repeat(3, 1fr); /* Display 3 cards per line */ gap: 20px; margin-top: 50px; } @@ -200,13 +259,11 @@ section .card a { padding: 20px; } - /* Card styles */ section .card { text-align: center; list-style: none; background: linear-gradient(180deg, rgba(0, 0, 50, 0.9), rgba(10, 10, 100, 0.9), rgba(30, 30, 150, 0.9)); - border-radius: 12px; box-shadow: 0 5px 20px rgba(0, 0, 50, 0.8), 0 0 10px rgba(255, 255, 255, 0.1); border: 1px solid #2e3a60; @@ -218,6 +275,7 @@ section .card { transition: background 0.5s ease, transform 0.4s ease, box-shadow 0.5s ease; } +/* Hover effect */ section .card:hover { transform: translateY(-8px); background: linear-gradient(180deg, rgba(30, 30, 150, 0.9), rgba(40, 0, 100, 0.9), rgba(100, 0, 150, 0.9)); @@ -275,7 +333,6 @@ section .card:hover .suit-icon { opacity: 1; } - /* Keyframes for spinning element */ @keyframes spin { 0% { @@ -302,40 +359,39 @@ form input, form textarea { color: var(--text-color); background-color: var(--light-blue); - border: 1px solid #3a4971; - border-radius: 4px; -} - -form input, -form textarea { - width: 100%; + border: 1px solid #3a4b7f; + border-radius: var(--border-radius); padding: 10px; - margin-bottom: 15px; + margin: 10px 0; + width: 100%; } -form button { +form input[type="submit"] { background-color: var(--accent-color); - color: var(--background-color); + color: #fff; border: none; - padding: 10px 20px; - border-radius: 4px; cursor: pointer; transition: background-color var(--transition-speed); } -form button:hover { +form input[type="submit"]:hover { background-color: var(--accent-hover-color); } -li a.listElement{ - display: block; - width: 100%; - height: 100%; - text-decoration: none; +/* Footer Styling */ +footer { + background-color: var(--dark-blue); + padding: 10px 20px; + color: var(--text-color); + text-align: center; + font-size: 0.9em; } -/* Responsive design */ @media (max-width: 768px) { + .cards { + grid-template-columns: 1fr; /* 1 card per line on smaller screens */ + } + header ul { flex-direction: column; gap: 10px;