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

Interstellar commit

Browse source
This commit is contained in:
Sage The DM 2024-08-20 10:40:56 +02:00
parent f34cd19677
commit 0fa4dc78dd
11 changed files with 669 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
contact-form.js Normal file
View file

@ -0,0 +1,27 @@
// 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:info@photofuel.tech?subject=${subject}&body=${body}`;
// Open the default mail client
window.location.href = mailtoLink;
});
}
});

41
contact.html Normal file
View file

@ -0,0 +1,41 @@
<!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>
<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>

22
footer.js Normal file
View file

@ -0,0 +1,22 @@
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0
class Footer extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.innerHTML = `
<center>
<footer>
<div class="footer-content">
<p>2024 Interstellar Development | Designed by Squadi the Viking</p>
</div>
</footer>
</center>
`;
}
}
customElements.define('footer-component', Footer);
// @license-end

26
header.js Normal file
View file

@ -0,0 +1,26 @@
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0
class Header extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.innerHTML = `
<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

BIN
images/Patrick.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 173 KiB

BIN
images/norway.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 310 KiB

BIN
images/sage.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 385 KiB

BIN
images/star.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 545 KiB

BIN
images/tander.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 505 KiB

200
index.html Normal file
View file

@ -0,0 +1,200 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="header.js" type="text/javascript" defer></script>
<script src="footer.js" type="text/javascript" defer></script>
<link rel="stylesheet" href="styles.css" />
<title>Interstellar Development</title>
</head>
<body>
<!-- Custom header component -->
<header-component></header-component>
<article>
<section id="project">
<h1>Our Projects</h1>
<h2>Our Games</h2>
<ul>
<li>
<a href="https://www.freettrpg.org/" target="_blank">FreeTTRPG</a>
</li>
<li>
<a
href="https://patrick_pluto.codeberg.page/freeftf/"
target="_blank"
>FreeFTF</a
>
</li>
</ul>
<h2>Our Other Projects</h2>
<ul>
<li>
<a
href="https://patrick_pluto.codeberg.page/foss_alternatives/"
target="_blank"
>FOSS Alternatives</a
>
</li>
</ul>
</section>
<!-- About Us section -->
<section id="about">
<h2>About Us</h2>
<h1>This is just a filler text</h1>
<p>
Have you ever felt that a new game you bought lacks soul, as if it was
made without love or passion? Or maybe you've noticed that the tools
you use seem to watch your every move, leaving you feeling monitored
and uneasy. Even after paying for a subscription, do you feel like you
don’t truly own the software you rely on? We’ve felt the same way, and
we’re here to change that. We are an international group of
programmers, united by a common goal: to reshape the world of
technology. With team members from Switzerland, Norway, and beyond,
we're a diverse collective of students and developers who believe in
the power of open-source software. Open source isn’t just a
development model for us; it’s a commitment to transparency,
community, and user freedom. Inspired by the Free Software Foundation
(FSF) and the Free Software Supporters Europe (FSSE), we strive to
create software that empowers users, respects their privacy, and
fosters collaboration. In a world where much of the software feels
corporate and detached, we’re dedicated to creating tools and games
with passion and care—products you can trust and truly own. Join us in
reshaping the digital landscape, where technology serves you, not the
other way around.
</p>
<!-- Cards section with team members -->
<section class="cards">
<div class="card">
<a href="https://patrick_pluto.codeberg.page/" class="card-link">
<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://jane_doe.example.com" class="card-link">
<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://john_smith.example.com" class="card-link">
<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>
<!-- Keep this as a comment unti5l further notice -->
<!--
<div class="card">
<a href="https://emily_jones.example.com" class="card-link">
<img src="images/tander.png" alt="Tanderson" />
<h3>Tanderson</h3>
<p>
Our Wildcard he just randomly commit code improvements gives us
tips and vanishes again. No one can truly understand him, but
without him the project would not be running
</p>
</a>
</div> -->
</section>
</section>
<section id="vision">
<h1>This is just a filler text</h1>
<h2>Our vision</h2>
<h2>Our Vision: Crafting a Future of Open Source</h2>
<h3>The Beginning: A Need for Change</h3>
<p>
In a world dominated by soulless, profit-driven software, we felt a
deep dissatisfaction with the state of the tech industry. Many of us
have experienced the frustration of using tools that feel invasive,
with constant surveillance and restrictions. We've all been
there—buying a game that lacks passion, subscribing to software that
we never truly own, or feeling trapped in ecosystems designed to
profit off our data. These experiences led us to a simple, yet
profound question: <em>What if technology could be different?</em>
</p>
<h3>2023: The Seed of an Idea</h3>
<p>
In 2023, a group of fresh-faced students from Switzerland, Norway, and
beyond came together with a shared dream. United by our love for
coding and our belief in the power of open-source software, we set out
to challenge the status quo. We were inspired by the pioneers of the
Free Software Movement (FSM) and the values they championed:
transparency, freedom, and community.
</p>
<h3>2024: Building the Foundation</h3>
<p>
By 2024, our team had grown, and so had our ambitions. We began
working on our first projects, focusing on creating games and tools
that were not just free to use, but free to modify, share, and
improve. Our mission was clear: to bring open-source alternatives to
the mainstream, offering users a genuine choice in a market saturated
with proprietary solutions.
</p>
<h3>2025: Expanding Our Horizons</h3>
<p>
As our community grew, so did our impact. In 2025, we launched several
successful projects, each embodying our core values of openness and
collaboration. We forged partnerships with like-minded organizations
and began to make waves in the tech world. Our tools and games started
gaining recognition for their quality, security, and the freedom they
offered users.
</p>
<h3>2026 and Beyond: Shaping the Future</h3>
<p>
Looking ahead, we see a future where open-source software is the norm,
not the exception. We envision a world where users are empowered to
take control of their digital lives, where technology serves the needs
of people, not corporations. Our goal is to continue expanding our
portfolio of open-source projects, making them accessible to everyone,
regardless of their background or technical expertise.
</p>
<h3>Our Commitment</h3>
<p>
Our vision is not just about the products we create; it's about the
culture we want to build. We are committed to fostering a global
community of developers, gamers, and tech enthusiasts who share our
passion for open source. Together, we believe we can create a more
just, equitable, and innovative digital world.
</p>
<p>
Join us on this journey as we work to bring open-source tools and
games to the market for everyone to enjoy. Let's reshape the future of
technology, one line of code at a time.
</p>
</section>
</article>
<!-- Custom footer component -->
<footer-component></footer-component>
</body>
</html>

353
styles.css Normal file
View file

@ -0,0 +1,353 @@
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Body styling */
body {
background-color: #0b0c1d; /* Deep space blue */
color: #c7d5e0; /* Light gray-blue text for contrast */
font-family: "Arial", sans-serif;
line-height: 1.6;
padding: 0 20px;
background-image: url("images/star.jpg"); /* Starry, mystical background */
background-size: cover;
background-attachment: fixed;
}
/* Header styling */
header {
background-color: rgba(31, 42, 64, 1); /* Semi-transparent dark blue-gray */
position: fixed;
width: 100%;
padding: 15px 20px;
top: 0;
left: 0;
margin-bottom: 10em;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.7); /* Deeper shadow for a mystic effect */
backdrop-filter: blur(5px); /* Blur effect for a mystical aura */
z-index: 100;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
}
header ul {
list-style: none;
display: flex;
gap: 20px;
}
header ul li {
display: inline;
}
header ul li a {
text-decoration: none;
color: #ffdd55; /* Warm star-like yellow */
font-weight: bold;
padding: 5px 10px;
transition: background-color 0.3s ease, color 0.3s ease;
}
header ul li a:hover {
background-color: rgba(255, 221, 85, 0.3); /* Glowing yellow hover effect */
color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px #ffdd55; /* Subtle glow on hover */
}
.project-name {
font-size: 1.5em;
color: #ffdd55; /* Star yellow */
text-decoration: none;
}
.project-name:hover {
color: #ffd700; /* Bright golden-yellow for hover effect */
text-shadow: 0 0 10px #ffd700; /* Glowing text effect */
}
/* Article styling */
article {
max-width: 800px;
margin: 6.25em auto;
padding: 20px;
background-color: rgba(31, 42, 64, 0.9); /* Semi-transparent dark blue */
border-radius: 10px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.8); /* Stronger shadow for depth */
backdrop-filter: blur(5px); /* Blur effect for mystical atmosphere */
}
article h1 {
font-size: 2.5em;
margin-bottom: 20px;
color: #ffdd55; /* Star yellow */
text-shadow: 0 0 15px #ffdd55; /* Glowing text effect */
}
article p {
hyphens: auto;
color: #c7d5e0; /* Light gray-blue text for better readability */
margin-bottom: 20px;
}
/* Download list styling */
article h2 {
font-size: 1.8em;
color: #ffdd55; /* Star yellow */
margin-top: 20px;
margin-bottom: 10px;
text-shadow: 0 0 10px #ffdd55; /* Subtle glow for headings */
}
article ul {
list-style-type: none; /* Remove bullet points */
padding-left: 0;
}
article ul li {
background-color: rgba(46, 58, 95, 0.8); /* Dark blue with transparency */
margin-bottom: 10px;
border-radius: 5px;
padding: 10px;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
article ul li a {
text-decoration: none;
color: #ffdd55; /* Warm yellow for links */
font-weight: bold;
font-size: 1.1em;
display: block;
}
article ul li:hover {
background-color: rgba(68, 80, 124, 0.9); /* Lighter blue on hover */
box-shadow: 0 0 10px #ffdd55; /* Soft glow effect on hover */
}
/* Footer styling */
footer {
background-color: rgba(31, 42, 64, 1); /* Semi-transparent dark blue-gray */
padding: 10px 20px;
color: #c7d5e0; /* Light gray-blue text */
width: 100%;
position: fixed;
bottom: 0;
left: 0;
box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.7); /* Shadow for depth */
backdrop-filter: blur(5px); /* Mystical blur effect */
}
.footer-content {
text-align: center;
font-size: 0.9em;
}
footer p {
margin: 0;
}
/* Card styles */
section .cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-top: 50px;
}
section .card {
text-align: center;
list-style: none;
background-color: rgba(46, 58, 95, 0.9); /* Dark blue with transparency */
padding: 20px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8); /* Stronger shadow for depth */
border: 1px solid #3a4971; /* Slightly lighter border for card edges */
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
section .card:hover {
transform: translateY(-5px); /* Slight lift effect */
box-shadow: 0 10px 30px rgba(255, 221, 85, 0.5); /* Yellow glow on hover */
}
section .card img {
height: 80px; /* Image size */
width: 80px;
object-fit: cover;
border-radius: 50%; /* Circular image */
margin: 0 auto 15px;
box-shadow: 0 0 10px rgba(255, 221, 85, 0.5); /* Glow around the image */
}
section .card h3 {
margin: 10px 0;
font-size: 1.2em;
font-weight: bold;
color: #ffdd55; /* Star yellow for card titles */
text-shadow: 0 0 10px #ffdd55; /* Glow effect */
}
section .card p {
flex-grow: 1;
color: #c7d5e0; /* Light gray-blue for card content */
margin-bottom: 10px;
}
section .card::before {
content: "";
position: absolute;
top: 10px;
right: 10px;
width: 24px;
height: 24px;
background: url("path-to-cosmic-icon.svg") no-repeat center; /* Space-themed icon */
background-size: contain;
}
section .card .suit-icon {
position: absolute;
bottom: 10px;
right: 10px;
width: 24px;
height: 24px;
background: url("path-to-suit-icon.svg") no-repeat center;
background-size: contain;
}
/* Contact form styles */
form {
max-width: 600px;
margin: 0 auto;
background: rgba(31, 42, 64, 0.9); /* Semi-transparent dark blue */
padding: 20px;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8); /* Shadow for depth */
backdrop-filter: blur(5px); /* Mystical blur effect */
}
form label {
display: block;
margin-bottom: 8px;
color: #ffdd55; /* Star yellow */
}
form input,
form textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #3a4971; /* Slightly lighter border for input fields */
border-radius: 4px;
background: rgba(
46,
58,
95,
0.7
); /* Slightly lighter background for inputs */
color: #c7d5e0; /* Light gray-blue text for inputs */
}
form button {
background-color: #ffdd55; /* Star yellow */
color: #0b0c1d; /* Deep space blue for text */
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
form button:hover {
background-color: #ffd700; /* Bright golden-yellow on hover */
}
/* Responsive design */
@media (max-width: 768px) {
/* Header */
.header-content {
flex-direction: column;
align-items: flex-start;
}
header ul {
flex-direction: column;
gap: 10px;
margin-top: 10px;
padding-left: 0;
}
header ul li {
display: block; /* Ensure list items stack vertically */
}
header ul li a {
padding: 10px;
}
/* Article */
article {
margin: 12em 10px;
padding: 15px;
}
article h1 {
font-size: 1.8em; /* Adjust font size for smaller screens */
}
article h2 {
font-size: 1.5em;
margin-bottom: 15px;
}
article ul {
padding-left: 0;
margin-left: 0;
}
article ul li {
font-size: 1em;
padding: 8px;
margin-bottom: 10px;
}
article ul li a {
font-size: 1em; /* Ensure links are readable */
}
/* Footer */
footer {
padding: 10px 15px; /* Adjust padding for smaller screens */
}
.footer-content {
font-size: 0.9em; /* Ensure footer text is readable but not oversized */
}
/* Project Name */
.project-name {
font-size: 1.2em; /* Slightly smaller project name font size for smaller screens */
margin-bottom: 10px; /* Adjust spacing below project name */
}
section .card {
padding: 12px; /* Adjusted padding */
}
section .card img {
height: 60px; /* Adjusted height */
width: 60px; /* Adjusted width */
border-radius: 8px; /* Adjusted border-radius */
}
}