website: Rewrite the website

Signed-off-by: EnderIce2 <enderice2@protonmail.com>

tools/website/assets/css/style.css

@@ -0,0 +1,329 @@
+body {
+	font-family: Arial, sans-serif;
+	margin: 0;
+	padding: 0;
+	line-height: 1.6;
+	background-color: #121212;
+	color: #f0f0f0;
+	scroll-behavior: smooth;
+}
+
+.hero {
+	text-align: center;
+	background: linear-gradient(135deg, #1e1e2e, #313450);
+	color: white;
+	padding: 50px 20px;
+}
+
+.hero h1 {
+	font-size: 2.8em;
+	margin-bottom: 10px;
+	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
+}
+
+.hero p {
+	margin-bottom: 20px;
+	font-size: 1.3em;
+}
+
+.hero button {
+	background-color: #282828;
+	color: #ffffff;
+	border: none;
+	padding: 12px 25px;
+	font-size: 1.1em;
+	border-radius: 25px;
+	cursor: pointer;
+	transition: all 0.3s ease;
+	box-shadow: 0 4px 10px rgba(14, 14, 14, 0.5);
+}
+
+.hero button:hover {
+	background-color: #ff6b81;
+	color: black;
+	transform: scale(1.15);
+	box-shadow: 0 6px 15px rgba(255, 71, 87, 0.7);
+}
+
+.buttons-section {
+	text-align: center;
+	margin: 40px 20px;
+}
+
+.buttons-section h2 {
+	font-size: 2em;
+	margin-bottom: 20px;
+	text-transform: uppercase;
+	color: #ff4757;
+}
+
+.buttons-section button {
+	color: white;
+}
+
+.button {
+	background-color: #313450;
+	color: black;
+	border: none;
+	padding: 15px 30px;
+	font-size: 1.1em;
+	margin: 10px;
+	border-radius: 50px;
+	cursor: pointer;
+	transition: all 0.3s ease;
+	box-shadow: none;
+}
+
+.button:hover {
+	background-color: #ff4757;
+	transform: scale(1.1);
+	box-shadow: 0 6px 15px rgba(255, 71, 87, 0.6);
+	color: black;
+}
+
+.button:focus {
+	outline: none;
+}
+
+.screenshot-section {
+	text-align: center;
+	margin: 40px 20px;
+}
+
+.screenshot {
+	max-width: 80%;
+	height: auto;
+	border-radius: 15px;
+	box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.5);
+	transition: transform 0.5s ease, box-shadow 0.5s ease;
+}
+
+.screenshot:hover {
+	transform: scale(1.05);
+	box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.8);
+}
+
+.features-section {
+	background-color: #1e1e2e;
+	padding: 40px 20px;
+}
+
+.features-section h2 {
+	text-align: center;
+	margin-bottom: 20px;
+	text-transform: uppercase;
+	letter-spacing: 2px;
+	font-size: 2em;
+}
+
+.features {
+	display: flex;
+	justify-content: center;
+	gap: 20px;
+	flex-wrap: wrap;
+}
+
+.card {
+	background: linear-gradient(135deg, #313450, #1e1e2e);
+	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
+	padding: 20px;
+	width: 300px;
+	border-radius: 15px;
+	text-align: center;
+	transition: transform 0.4s ease, box-shadow 0.4s ease;
+	border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.card:hover {
+	transform: translateY(-10px) scale(1.05);
+	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
+}
+
+.card h3 {
+	color: #ff4757;
+	margin-bottom: 10px;
+}
+
+.card p {
+	color: #ccc;
+}
+
+.feature-detail {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 40px 20px;
+	gap: 30px;
+	opacity: 0;
+	transform: translateY(50px);
+	transition: opacity 0.6s ease, transform 0.6s ease;
+}
+
+.feature-detail.active {
+	opacity: 1;
+	transform: translateY(0);
+}
+
+.feature-detail:nth-child(even) {
+	flex-direction: row-reverse;
+}
+
+.feature-detail img {
+	max-width: 50%;
+	border-radius: 15px;
+	box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.5);
+	transition: transform 0.8s ease, box-shadow 0.8s ease;
+	margin: 0 40px;
+}
+
+.feature-detail.active img:hover {
+	transform: scale(1.11);
+	box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.8);
+}
+
+.feature-detail img.active {
+	transform: scale(1.1);
+	box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.7);
+}
+
+.feature-detail .text {
+	max-width: 40%;
+	padding: 0 20px;
+}
+
+.feature-detail .text h3 {
+	font-size: 1.8em;
+	margin-bottom: 10px;
+	color: #ff4757;
+}
+
+.feature-detail .text p {
+	color: #ccc;
+	font-size: 1.1em;
+	line-height: 1.6;
+}
+
+.footer {
+	text-align: center;
+	padding: 20px;
+	background-color: #121212;
+	color: #bbb;
+	border-top: 1px solid #2a2a2a;
+}
+
+@media (max-width: 768px) {
+	.features {
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.feature-detail {
+		flex-direction: column;
+		text-align: center;
+	}
+
+	.feature-detail img,
+	.feature-detail .text {
+		max-width: 100%;
+	}
+}
+
+header {
+	position: sticky;
+	top: 0;
+	max-height: 64px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0 20px;
+	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
+	backdrop-filter: blur(10px);
+	background: rgba(0, 0, 0, 0.5);
+	z-index: 999;
+}
+
+header img {
+	width: 64px;
+	height: 64px;
+}
+
+.div-warning {
+	text-decoration: none;
+	color: white;
+	font-size: 1.2em;
+	text-align: center;
+	display: flex;
+	margin-left: auto;
+	text-shadow: 0px 0px 5px rgba(255, 0, 0, 1);
+}
+
+.div-dropdown {
+	position: relative;
+	display: flex;
+	align-items: center;
+	margin-left: auto;
+}
+
+.header-button {
+	background-color: #313450;
+	color: white;
+	border: none;
+	text-decoration: none;
+	display: block;
+	border-radius: 8px;
+	font-size: 1.1em;
+	padding: 8px 12px;
+	margin: 0;
+	cursor: pointer;
+	transition: all 0.3s ease;
+	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
+}
+
+.header-button:hover {
+	transform: scale(1.05);
+}
+
+.dropdown-content {
+	display: none;
+	position: absolute;
+	top: 110%;
+	right: 0;
+	background-color: #313450;
+	z-index: 1;
+	border-radius: 12px;
+	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
+	padding: 10px 0;
+	max-height: 300px;
+	overflow-y: auto;
+	overflow-x: hidden;
+}
+
+.dropdown-content::-webkit-scrollbar {
+	width: 8px;
+}
+
+.dropdown-content::-webkit-scrollbar-thumb {
+	background-color: #ff4757;
+	border-radius: 4px;
+}
+
+.dropdown-content::-webkit-scrollbar-thumb:hover {
+	background-color: #ff6b81;
+}
+
+.dropdown-content a {
+	color: white;
+	white-space: nowrap;
+	text-decoration: none;
+	display: block;
+	padding: 8px 12px;
+	border-radius: 8px;
+	font-size: 1.1em;
+	transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
+}
+
+.dropdown-content a:hover {
+	background-color: #ff4757;
+	color: black;
+	transform: scale(1.05);
+}

tools/website/assets/js/script.js

@@ -0,0 +1,91 @@
+const featureDetails = document.querySelectorAll('.feature-detail');
+
+const observer = new IntersectionObserver((entries) => {
+	entries.forEach(entry => {
+		if (entry.isIntersecting) {
+			entry.target.classList.add('active');
+			const img = entry.target.querySelector('img');
+			img.classList.add('active');
+		}
+		else {
+			entry.target.classList.remove('active');
+			const img = entry.target.querySelector('img');
+			img.classList.remove('active');
+		}
+	});
+}, {
+	threshold: 0.1
+});
+
+featureDetails.forEach(detail => {
+	observer.observe(detail);
+});
+
+function updateContent(langData) {
+	document.querySelectorAll('[data-i18n]').forEach(element => {
+		const key = element.getAttribute('data-i18n');
+
+		if (key in langData) {
+			if (element.tagName === "IMG") {
+				element.src = langData[key];
+			} else {
+				element.innerHTML = langData[key];
+			}
+		} else {
+			console.warn(`Missing translation for key: '${key}'`);
+		}
+	});
+}
+
+function setLanguagePreference(lang) {
+	localStorage.setItem('language', lang);
+	location.reload();
+}
+
+async function fetchLanguageData(lang) {
+	try {
+		const response = await fetch(`assets/lang/${lang}.json`);
+		if (!response.ok) {
+			throw new Error(`Language file for '${lang}' not found`);
+		}
+		return response.json();
+	} catch (error) {
+		console.warn(error.message + `. Falling back to English.`);
+		return fetchLanguageData('en');
+	}
+}
+
+async function detectAndLoadLanguage() {
+	const savedLanguage = localStorage.getItem('language');
+	const browserLanguage = navigator.language || navigator.languages[0];
+	const languageToLoad = savedLanguage || browserLanguage.split('-')[0] || 'en';
+
+	console.log(`Detected language: ${browserLanguage}. Loading: ${languageToLoad}`);
+
+	const langData = await fetchLanguageData(languageToLoad);
+	updateContent(langData);
+}
+
+async function changeLanguage(lang) {
+	setLanguagePreference(lang);
+}
+
+window.addEventListener('DOMContentLoaded', detectAndLoadLanguage);
+
+function toggleDropdown() {
+	const dropdownMenu = document.getElementById('dropdownMenu');
+	dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
+}
+
+window.onclick = function (event) {
+	const dropdownMenu = document.getElementById('dropdownMenu');
+	const dropdownButton = document.querySelector('.header-button');
+	if (!dropdownMenu.contains(event.target) && event.target !== dropdownButton) {
+		dropdownMenu.style.display = 'none';
+	}
+};
+
+function downloadFennix() {
+	// TODO: Here will download the iso file
+	window.location.href = "https://github.com/EnderIce2/Fennix";
+}

tools/website/assets/lang/README.md

@@ -0,0 +1 @@
+# Language Directory

tools/website/assets/lang/en.json

@@ -0,0 +1,38 @@
+{
+    "home": "Fennix - Future of Computing",
+    "warning_message": "⚠️ The operating system is in early development ⚠️<br>This website is a placeholder and does not fully represent the project's current status.",
+
+    "welcome_message": "Welcome to Fennix",
+    "welcome_subtitle": "Unlock seamless and powerful computing.",
+    "download_button": "Download",
+    "screenshot_title": "Explore Fennix",
+    "screenshot_image": "assets/images/screenshot-en.png",
+
+    "get_involved": "Get Involved",
+    "get_involved_btn1": "Contribute",
+    "get_involved_btn2": "Documentation",
+    "get_involved_btn3": "API Reference",
+    "get_involved_btn4": "Developing with Fennix",
+
+    "features_title": "Core Features",
+    "card1_title": "High Performance",
+    "card1_text": "Experience fast speeds for modern computing tasks.",
+    "card2_title": "Security & Privacy",
+    "card2_text": "Your data is secure with advanced encryption and privacy protocols.",
+    "card3_title": "Customizable",
+    "card3_text": "Customize Fennix to enhance your workflow and productivity.",
+
+    "feature1_title": "User Interface",
+    "feature1_text": "Work with a user-friendly, modern interface designed for efficiency.",
+    "feature1_image": "assets/images/feature1-en.png",
+
+    "feature2_title": "Multitasking",
+    "feature2_text": "Run multiple applications and switch between tasks easily.",
+    "feature2_image": "assets/images/feature2-en.png",
+
+    "feature3_title": "Security Features",
+    "feature3_text": "Use built-in security measures to protect your data.",
+    "feature3_image": "assets/images/feature3-en.png",
+
+    "footer_text": "&copy; 2025 EnderIce2"
+}