diff --git a/contact-form.js b/contact-form.js new file mode 100644 index 0000000..4a790a3 --- /dev/null +++ b/contact-form.js @@ -0,0 +1,49 @@ +// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0 + +/* + * freeftf website + * Copyright (C) 2024 sageTheDM + * + * 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:info@photofuel.tech?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 new file mode 100644 index 0000000..5e61502 --- /dev/null +++ b/contact.html @@ -0,0 +1,58 @@ + + + + + + + Contact Us + + + + + + + + + + +
+
+ +
+

Contact Us

+
+ + + + + + + + + + +
+
+
+
+ + + + + diff --git a/footer.js b/footer.js new file mode 100644 index 0000000..15c3e5e --- /dev/null +++ b/footer.js @@ -0,0 +1,41 @@ +// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0 + +/* + * freeftf website + * Copyright (C) 2024 sageTheDM + * + * 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 . + */ + +class Footer extends HTMLElement { + constructor() { + super(); + } + + connectedCallback() { + this.innerHTML = ` +
+
+
+

2024 Interstellar Development | Designed by Squadi the Viking

+
+
+
+ `; + } +} + +customElements.define('footer-component', Footer); + +// @license-end diff --git a/header.js b/header.js new file mode 100644 index 0000000..0710c45 --- /dev/null +++ b/header.js @@ -0,0 +1,45 @@ +// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0 + +/* + * freeftf website + * Copyright (C) 2024 sageTheDM + * + * 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 . + */ + +class Header extends HTMLElement { + constructor() { + super(); + } + + connectedCallback() { + this.innerHTML = ` +
+
+ + +
+
+ `; + } +} + +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..7643c93 --- /dev/null +++ b/index.html @@ -0,0 +1,164 @@ + + + + + + + + + + Interstellar Development + + + + + +
+
+

Our Projects

+ +

Our Games

+ + +

Our Other Projects

+ +
+ + +
+

About Us

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ipsum commodi labore facere, dolore ullam expedita quam magni voluptas mollitia enim natus voluptates rerum, optio iure incidunt voluptatem provident placeat! Lorem ipsum dolor sit amet consectetur adipisicing elit. A minima neque nostrum libero excepturi ut dolor quas, temporibus, aspernatur itaque optio voluptatibus eligendi ipsa aperiam voluptas assumenda quaerat hic eum! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum nam iste, necessitatibus esse, praesentium tenetur dolorum vel id delectus mollitia quo commodi omnis nulla hic debitis pariatur reiciendis enim possimus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam quaerat veniam porro voluptatem aperiam accusamus asperiores voluptate esse, delectus impedit quo perspiciatis doloremque nemo ipsam, autem illum magni facilis maiores. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam ex in magni vitae praesentium itaque odit dignissimos. Nam perferendis consequuntur, ex dicta laudantium eveniet debitis reiciendis qui commodi ad molestiae. +

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

+ +
+ + +
+
+ +
+

Our vision

+

Our Vision: Crafting a Future of Open Source

+ +

Lorem Ipsum

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil autem eligendi optio! Id doloremque itaque dignissimos sit minima veniam libero ex. Possimus repudiandae unde sapiente et, a ipsam dicta nobis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab optio adipisci voluptatibus, veniam laborum facere ducimus eius? Minus expedita repellat facere animi numquam voluptas sequi consequuntur commodi iure, maiores fugit. +

+ +

Lorem Ipsum

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil autem eligendi optio! Id doloremque itaque dignissimos sit minima veniam libero ex. Possimus repudiandae unde sapiente et, a ipsam dicta nobis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab optio adipisci voluptatibus, veniam laborum facere ducimus eius? Minus expedita repellat facere animi numquam voluptas sequi consequuntur commodi iure, maiores fugit. +

+ +

Lorem Ipsum

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil autem eligendi optio! Id doloremque itaque dignissimos sit minima veniam libero ex. Possimus repudiandae unde sapiente et, a ipsam dicta nobis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab optio adipisci voluptatibus, veniam laborum facere ducimus eius? Minus expedita repellat facere animi numquam voluptas sequi consequuntur commodi iure, maiores fugit. +

+ +

Lorem Ipsum

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil autem eligendi optio! Id doloremque itaque dignissimos sit minima veniam libero ex. Possimus repudiandae unde sapiente et, a ipsam dicta nobis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab optio adipisci voluptatibus, veniam laborum facere ducimus eius? Minus expedita repellat facere animi numquam voluptas sequi consequuntur commodi iure, maiores fugit. +

+ +

Lorem Ipsum

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil autem eligendi optio! Id doloremque itaque dignissimos sit minima veniam libero ex. Possimus repudiandae unde sapiente et, a ipsam dicta nobis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab optio adipisci voluptatibus, veniam laborum facere ducimus eius? Minus expedita repellat facere animi numquam voluptas sequi consequuntur commodi iure, maiores fugit. +

+ +

Lorem Ipsum

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil autem eligendi optio! Id doloremque itaque dignissimos sit minima veniam libero ex. Possimus repudiandae unde sapiente et, a ipsam dicta nobis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab optio adipisci voluptatibus, veniam laborum facere ducimus eius? Minus expedita repellat facere animi numquam voluptas sequi consequuntur commodi iure, maiores fugit. +

+ +

Lorem Ipsum

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil autem eligendi optio! Id doloremque itaque dignissimos sit minima veniam libero ex. Possimus repudiandae unde sapiente et, a ipsam dicta nobis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab optio adipisci voluptatibus, veniam laborum facere ducimus eius? Minus expedita repellat facere animi numquam voluptas sequi consequuntur commodi iure, maiores fugit. +

+
+
+ + + + + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..b70eb8b --- /dev/null +++ b/styles.css @@ -0,0 +1,370 @@ +/* + freeftf website + Copyright (C) 2024 sageTheDM + + 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 . +*/ +* { + 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 */ + } +}