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

Compare commits

base: interstellar_development:37833611dc85da76adc9bfebdf4d4c93315b0cba
Branches Tags
interstellar_development:main
..
compare: interstellar_development:74bec5795f80ca398ec61ca3a5e531a47b6811ab
Branches Tags
interstellar_development:main

No commits in common. "37833611dc85da76adc9bfebdf4d4c93315b0cba" and "74bec5795f80ca398ec61ca3a5e531a47b6811ab" have entirely different histories.
37833611dc ... 74bec5795f

7 changed files with 317 additions and 248 deletions
Show stats Expand all files Collapse all files

49
contact-form.js Normal file
View file

@ -0,0 +1,49 @@
// @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 <https://www.gnu.org/licenses/>.
*/
// 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

59
contact.html Normal file
View file

@ -0,0 +1,59 @@
<!--
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 <https://www.gnu.org/licenses/>.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact Us</title>
<script src="header.js" type="text/javascript" defer></script>
<script src="footer.js" type="text/javascript" defer></script>
<script src="contact-form.js" type="text/javascript" defer></script>
<!-- Added new script -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header-component></header-component>
<!-- Main Content -->
<article>
<main>
<!-- Contact Form -->
<section id="contact">
<h2>Contact Us</h2>
<p>This contact form has an invalid mail until our mailserver is configured</p>
<form id="contactForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required />
<label for="email">Email:</label>
<input type="email" id="email" name="email" required />
<label for="message">Message:</label>
<textarea id="message" name="message" rows="5" required></textarea>
<button type="submit">Send Message</button>
</form>
</section>
</main>
</article>
<!-- Footer -->
<footer-component></footer-component>
</body>
</html>

56
dropdown.js
View file

@ -1,56 +0,0 @@
// @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 <https://www.gnu.org/licenses/>.
*/
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

2
footer.js
View file

@ -28,7 +28,7 @@ class Footer extends HTMLElement {
<center>
<footer>
<div class="footer-content">
<p>2024 Interstellar Development</p>
<p>2024 Interstellar Development | Designed by Squadi the Viking</p>
</div>
</footer>
</center>

27
header.js
View file

@ -17,6 +17,7 @@
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
class Header extends HTMLElement {
constructor() {
super();
@ -24,23 +25,21 @@ class Header extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<header>
<div class="header-content">
<div><a href="index.html" class="project-name">Interstellar Development</a></div>
<button class="burger-menu" onclick="toggleMenu()">☰</button>
</div>
</header>
<div class="div-menu">
<ul class="menu">
<li><a href="index.html#project">Our Projects</a></li>
<li><a href="index.html#cards">Our Team</a></li>
<li><a href="index.html#about">About us</a></li>
<li><a href="index.html#vision">Our Vision</a></li>
</ul>
</div>
<header>
<div class="header-content">
<div><a href="index.html" class="project-name">Interstellar Development</a></div>
<ul>
<li><a href="index.html#project">Our Projects</a></li>
<li><a href="index.html#about">Our Team</a></li>
<li><a href="index.html#vision">Our Vision</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
</header>
`;
}
}
customElements.define('header-component', Header);
// @license-end

206
index.html
View file

@ -19,7 +19,6 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="dropdown.js" type="text/javascript" defer></script>
<script src="header.js" type="text/javascript" defer></script>
<script src="footer.js" type="text/javascript" defer></script>
<link rel="stylesheet" href="styles.css" />
@ -36,59 +35,51 @@
<h2>Our Games</h2>
<ul>
<li>
<p>Previously we had unfinished Games listed here.</p>
<p>We decided against displaying them and giving people the impression we are working on them currently.</p>
<p>In the Future we will display the released games here</p>
<a
href="freettrpg/"
target="_blank"
class="listElement">
FreeTTRPG</a
>
</li>
<li>
<a
href="freeftf/"
target="_blank"
class="listElement"
>FreeFTF</a
>
</li>
</ul>
<h2>Our Other Projects</h2>
<ul>
<a href="foss_alternatives/" target="_blank" class="listElement">
<li>FOSS Alternatives</li>
</a>
<a href="react/" target="_blank" class="listElement">
<li>React</li>
</a>
<li>
<a
href="foss_alternatives/"
target="_blank"
class="listElement"
>FOSS Alternatives</a
>
</li>
<li>
<a
href="react/"
target="_blank"
class="listElement"
>React</a
>
</li>
<li>
<a
href="InterstellarAI-DL/"
target="_blank"
class="listElement"
>Interstellar AI</a
>
</li>
</ul>
</section>
<!-- Cards section with team members -->
<h1>Our Team</h1>
<section class="cards" id="cards">
<div class="card">
<a href="https://interstellardevelopment.org/code/Patrick_Pluto" class="card-link" target="_blank">
<img src="images/Patrick.png" alt="Patrick" />
<h3>Patrick_Pluto</h3>
<p>
The system administrator and our lead coder. He is the one you
will need to blame for bugs in the games
</p>
</a>
</div>
<div class="card">
<a href="https://interstellardevelopment.org/code/sageTheDm" class="card-link" target="_blank">
<img src="images/sage.png" alt="Sage" />
<h3>sageTheDM</h3>
<p>
Our mostly competent web developer and secondary coder, if you
experience any bugs on the website or spelling mistake he is to
blame
</p>
</a>
</div>
<div class="card">
<a href="https://interstellardevelopment.org/code/Patrick_Pluto" class="card-link" target="_blank">
<img src="images/nicolas.png" alt="Patrick" />
<h3>St. Nicolaus</h3>
<p>
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.
</p>
</a>
</div>
</section>
<!-- About Us section -->
<section id="about">
@ -108,35 +99,99 @@
<p>
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!
</p>
<!-- Cards section with team members -->
<section class="cards">
<div class="card">
<a href="https://interstellardevelopment.org/code/Patrick_Pluto" class="card-link" target="_blank">
<img src="images/Patrick.png" alt="Patrick" />
<h3>Patrick_Pluto</h3>
<p>
The system administrator and our lead coder. He is the one you
will need to blame for bugs in the games
</p>
</a>
</div>
<div class="card">
<a href="https://interstellardevelopment.org/code/YasinOnm08" class="card-link" target="_blank">
<img src="images/yasin.png" alt="Yasin" />
<h3>Yasin</h3>
<p>
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.
</p>
</a>
</div>
<div class="card">
<a href="https://interstellardevelopment.org/code/sageTheDm" class="card-link" target="_blank">
<img src="images/sage.png" alt="Sage" />
<h3>sageTheDM</h3>
<p>
Our mostly competent web developer and secondary coder, if you
experience any bugs on the website or spelling mistake he is to
blame
</p>
</a>
</div>
<div class="card">
<a href="https://interstellardevelopment.org/code/NorwayLCAndTrains" class="card-link" target="_blank">
<img src="images/norway.png" alt="Norway" />
<h3>NorwayLC</h3>
<p>
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.
</p>
</a>
</div>
<div class="card">
<a href="https://interstellardevelopment.org/code/Patrick_Pluto" class="card-link" target="_blank">
<img src="images/nicolas.png" alt="Patrick" />
<h3>St. Nicolaus</h3>
<p>
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.
</p>
</a>
</div>
</section>
</section>
<section id="vision">
<h2>Our Vision</h2>
<h2>Interstellar Development: Free Software is Our Passion</h2>
<h2>Interstellar Development: Free Software is Our Passion</h2>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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!
</p>
<p>
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!
</p>
</section>
</article>
@ -144,3 +199,22 @@
<footer-component></footer-component>
</body>
</html>
<!-- This Gravestone simbolices that a certain someone will not let me have fun on this website -->
<!--
_____________________
| |
| R.I.P |
|_____________________|
| |
| HERE LIES |
| MY HOPES WHO |
| LIVED AND DIED |
| WITH HONOR |
| AND |
| DIGNITY |
| |
|_____________________|
-->

164
styles.css
View file

@ -51,109 +51,50 @@ 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;
padding: 15px 20px;
margin-bottom: 10em;
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;
}
/* Project Name Styling */
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 {
font-size: 2em;
font-size: 1.5em;
color: var(--accent-color);
text-decoration: none;
transition: color var(--transition-speed), text-shadow var(--transition-speed);
@ -201,7 +142,7 @@ article ul {
padding: 0;
}
article ul a li {
article ul li {
background-color: var(--light-blue);
margin-bottom: 10px;
border-radius: var(--border-radius);
@ -209,12 +150,12 @@ article ul a li {
transition: background-color var(--transition-speed), box-shadow var(--transition-speed);
}
article ul a li:hover {
article ul li:hover {
background-color: rgba(68, 80, 124, 0.9);
box-shadow: 0 0 10px var(--accent-color);
}
article ul a li{
article ul li a {
text-decoration: none;
color: var(--accent-color);
font-weight: bold;
@ -239,9 +180,9 @@ footer {
}
/* Card container styles */
.cards {
section .cards {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Display 3 cards per line */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-top: 50px;
}
@ -259,11 +200,13 @@ 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;
@ -275,7 +218,6 @@ 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));
@ -333,6 +275,7 @@ section .card:hover .suit-icon {
opacity: 1;
}
/* Keyframes for spinning element */
@keyframes spin {
0% {
@ -359,39 +302,40 @@ form input,
form textarea {
color: var(--text-color);
background-color: var(--light-blue);
border: 1px solid #3a4b7f;
border-radius: var(--border-radius);
padding: 10px;
margin: 10px 0;
width: 100%;
border: 1px solid #3a4971;
border-radius: 4px;
}
form input[type="submit"] {
form input,
form textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
}
form button {
background-color: var(--accent-color);
color: #fff;
color: var(--background-color);
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
transition: background-color var(--transition-speed);
}
form input[type="submit"]:hover {
form button:hover {
background-color: var(--accent-hover-color);
}
/* Footer Styling */
footer {
background-color: var(--dark-blue);
padding: 10px 20px;
color: var(--text-color);
text-align: center;
font-size: 0.9em;
li a.listElement{
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}
/* 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;