diff --git a/contact-form.js b/contact-form.js deleted file mode 100644 index e90a42e..0000000 --- a/contact-form.js +++ /dev/null @@ -1,49 +0,0 @@ -// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0 - -/* - * interstellar_development 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 . - */ - -// contact-form.js - -document.addEventListener('DOMContentLoaded', function() { - const contactForm = document.getElementById('contactForm'); - - if (contactForm) { - contactForm.addEventListener('submit', function(event) { - event.preventDefault(); // Prevent the form from submitting the traditional way - - // Generate a random ticket number - const ticketNumber = Math.floor(Math.random() * 1000000); // Generates a random number between 0 and 999999 - - // Retrieve form values - const name = encodeURIComponent(document.getElementById('name').value); - const email = encodeURIComponent(document.getElementById('email').value); - const message = encodeURIComponent(document.getElementById('message').value); - - // Construct the mailto link - const subject = `Support Ticket #${ticketNumber}`; - const body = `Name: ${name}%0AEmail: ${email}%0AMessage:%0A${message}`; - const mailtoLink = `mailto:example@example.com?subject=${subject}&body=${body}`; - - // Open the default mail client - window.location.href = mailtoLink; - }); - } -}); - -// @license-end \ No newline at end of file diff --git a/contact.html b/contact.html deleted file mode 100644 index 05b3700..0000000 --- a/contact.html +++ /dev/null @@ -1,59 +0,0 @@ - - - - - - - Contact Us - - - - - - - - - - -
-
- -
-

Contact Us

-

This contact form has an invalid mail until our mailserver is configured

-
- - - - - - - - - - -
-
-
-
- - - - - 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/footer.js b/footer.js index 3c47f3f..9e24f21 100644 --- a/footer.js +++ b/footer.js @@ -28,7 +28,7 @@ class Footer extends HTMLElement {
-

2024 Interstellar Development | Designed by Squadi the Viking

+

2024 Interstellar Development

diff --git a/header.js b/header.js index 69321c0..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,21 +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 0f3f5f7..2c2d3b7 100644 --- a/index.html +++ b/index.html @@ -19,6 +19,7 @@ + @@ -35,51 +36,59 @@

Our Games

  • - - FreeTTRPG -
    • -
  • - FreeFTF +

    Previously we had unfinished Games listed here.

    +

    We decided against displaying them and giving people the impression we are working on them currently.

    +

    In the Future we will display the released games here

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. +

+ +
+
@@ -99,122 +108,39 @@

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

- -
- -

Our Vision

-

Interstellar Development: Free Software is Our Passion

+

Interstellar Development: Free Software is Our Passion

-

- At Interstellar Development, we embarked on this journey to create a more organized and efficient approach to developing free and open-source software, with a particular focus on gaming. We recognized a significant gap in the availability and quality of free software games, which often fail to meet the expectations of users or simply do not exist. Our mission is to fill this void and elevate the standards of free gaming experiences. -

+

+ At Interstellar Development, we embarked on this journey to create a more organized and efficient approach to developing free and open-source software, with a particular focus on gaming. We recognized a significant gap in the availability and quality of free software games, which often fail to meet the expectations of users or simply do not exist. Our mission is to fill this void and elevate the standards of free gaming experiences. +

-

- Our primary goal is to target games that are currently unplayable on GNU/Linux and FreeBSD systems. We aim to develop high-quality alternatives that not only provide enjoyable gameplay but also adhere to the principles of free software. Additionally, we are committed to identifying and addressing other areas within the software ecosystem that lack free alternatives, ensuring that users have access to a diverse range of tools and applications that respect their freedom. -

+

+ Our primary goal is to target games that are currently unplayable on GNU/Linux and FreeBSD systems. We aim to develop high-quality alternatives that not only provide enjoyable gameplay but also adhere to the principles of free software. Additionally, we are committed to identifying and addressing other areas within the software ecosystem that lack free alternatives, ensuring that users have access to a diverse range of tools and applications that respect their freedom. +

-

- At Interstellar Development, we firmly believe that the path to true freedom for computer users lies in the adoption and promotion of free software. To this end, we are dedicated to licensing all of our projects under copyleft free and open-source software licenses. This commitment ensures that our games and software remain free for everyone to play, modify, and share, fostering a culture of collaboration and innovation within the community. -

+

+ At Interstellar Development, we firmly believe that the path to true freedom for computer users lies in the adoption and promotion of free software. To this end, we are dedicated to licensing all of our projects under copyleft free and open-source software licenses. This commitment ensures that our games and software remain free for everyone to play, modify, and share, fostering a culture of collaboration and innovation within the community. +

-

- We understand that community involvement is crucial to our success. While we are not currently accepting donations, we invite you to support us by providing feedback, reporting issues, and suggesting improvements. Your insights are invaluable in helping us refine our projects and enhance the user experience. -

+

+ We understand that community involvement is crucial to our success. While we are not currently accepting donations, we invite you to support us by providing feedback, reporting issues, and suggesting improvements. Your insights are invaluable in helping us refine our projects and enhance the user experience. +

-

- If you feel compelled to contribute financially, we encourage you to consider donating to the Free Software Foundation. Their unwavering support and advocacy for free software principles have been instrumental in our journey, and your contributions to them help sustain the broader movement that enables us to create these games. -

- -

- Together, we can build a vibrant community around free software and gaming, paving the way for a future where everyone has access to high-quality, open-source alternatives. Join us in our mission to make a difference and champion the cause of free software for all! -

+

+ If you feel compelled to contribute financially, we encourage you to consider donating to the Free Software Foundation. Their unwavering support and advocacy for free software principles have been instrumental in our journey, and your contributions to them help sustain the broader movement that enables us to create these games. +

+

+ Together, we can build a vibrant community around free software and gaming, paving the way for a future where everyone has access to high-quality, open-source alternatives. Join us in our mission to make a difference and champion the cause of free software for all! +

- - - - - \ No newline at end of file + \ No newline at end of file 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;