diff --git a/contact-form.js b/contact-form.js new file mode 100644 index 0000000..0654058 --- /dev/null +++ b/contact-form.js @@ -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; + }); + } +}); diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..660a180 --- /dev/null +++ b/contact.html @@ -0,0 +1,41 @@ + + + + + + Contact Us + + + + + + + + + + +
+
+ +
+

Contact Us

+
+ + + + + + + + + + +
+
+
+
+ + + + + diff --git a/footer.js b/footer.js new file mode 100644 index 0000000..7e629fa --- /dev/null +++ b/footer.js @@ -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 = ` +
+ +
+ `; + } +} + +customElements.define('footer-component', Footer); + +// @license-end diff --git a/header.js b/header.js new file mode 100644 index 0000000..690e380 --- /dev/null +++ b/header.js @@ -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 = ` +
+
+
Interstellar Development
+ +
+
+ `; + } +} + +customElements.define('header-component', Header); + +// @license-end diff --git a/images/Patrick.png b/images/Patrick.png new file mode 100644 index 0000000..6aa6377 Binary files /dev/null and b/images/Patrick.png differ diff --git a/images/norway.png b/images/norway.png new file mode 100644 index 0000000..85161b6 Binary files /dev/null and b/images/norway.png differ diff --git a/images/sage.png b/images/sage.png new file mode 100644 index 0000000..3bc7bd8 Binary files /dev/null and b/images/sage.png differ diff --git a/images/star.jpg b/images/star.jpg new file mode 100644 index 0000000..2b1475a Binary files /dev/null and b/images/star.jpg differ diff --git a/images/tander.png b/images/tander.png new file mode 100644 index 0000000..a45ba48 Binary files /dev/null and b/images/tander.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..0169772 --- /dev/null +++ b/index.html @@ -0,0 +1,200 @@ + + + + + + + + + Interstellar Development + + + + + +
+
+

Our Projects

+ +

Our Games

+ + +

Our Other Projects

+ +
+ + +
+

About Us

+

This is just a filler text

+

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

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

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

+ +
+ + +
+
+ +
+

This is just a filler text

+

Our vision

+

Our Vision: Crafting a Future of Open Source

+ +

The Beginning: A Need for Change

+

+ 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: What if technology could be different? +

+ +

2023: The Seed of an Idea

+

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

+ +

2024: Building the Foundation

+

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

+ +

2025: Expanding Our Horizons

+

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

+ +

2026 and Beyond: Shaping the Future

+

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

+ +

Our Commitment

+

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

+ +

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

+
+
+ + + + + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..6235fb5 --- /dev/null +++ b/styles.css @@ -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 */ + } +}