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

tools/website/index.html

@@ -1,136 +1,108 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
 
 <head>
-    <title>Fennix</title>
-    <link rel="stylesheet" href="css/style.css">
-    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css'>
-    <link rel="icon" href="assets/favicon.png">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title data-i18n="home">Fennix</title>
+    <link rel="stylesheet" href="assets/css/style.css">
 </head>
 
-<body ondragstart="return false;" ondrop="return false;">
-    <div class="header background_main" style="font-size: 40px;">
-        <div style="position: relative; top: 40%; transform: translateY(-40%);">
-            <h1 class="on-background-text move-to-middle gradienttext glowtext">Fennix</h1>
-            <h4 class="on-background-text move-to-middle glowtext">Operating System from scratch made in C and C++</h4>
-            <button class="button round-border-med hdrbtn" style="backdrop-filter: blur(10px); cursor: pointer;" onclick="window.location.href='https://github.com/Fennix-Project/Fennix/releases'">Download Stable
-                Version</button>
-            <button class="button round-border-med hdrbtn" style="backdrop-filter: blur(10px); cursor: pointer;" onclick="window.location.href='https://github.com/Fennix-Project/Fennix/actions/workflows/makefile.yml'">Download
-            Unstable Version</button>
+<body>
+    <header>
+        <img src="assets/logo.png" alt="Fennix Logo">
+        <div class="div-warning">
+            <a data-i18n="warning_message"></a>
         </div>
-    </div>
-    <div class="navbar" style="backdrop-filter: blur(10px);">
-        <a class="on-background-text move-to-middle gradienttext">Fennix</a>
-        <a class="hdrbtn" href="https://github.com/Fennix-Project/Fennix"><i class="fa-brands fa-git-alt"></i>
-            Contribute</a>
-        <a class="hdrbtn" href="/fulldoc"><i class="fa-solid fa-book-bookmark"></i> Full Documentation</a>
-        <a class="hdrbtn" href="/kernel"><i class="fa-solid fa-file-code"></i> Kernel</a>
-        <a class="hdrbtn" href="/drivers"><i class="fa-solid fa-file-code"></i> Drivers</a>
-        <a class="hdrbtn" href="/userspace"><i class="fa-solid fa-file-code"></i> Userspace</a>
-        <a class="hdrbtn" style="float:right" href="https://github.com/Fennix-Project/Fennix/releases/latest"><i
-                class="fa-solid fa-download"></i> Download</a>
-    </div>
-    <div class="header" style="padding-bottom: 250px; padding-left: 0px; backdrop-filter: blur(40px);">
-        <div style="padding-top: 25px;">
-            <img alt="GitHub Workflow Status" src="https://img.shields.io/github/workflow/status/Fennix-Project/Fennix/Build%20OS?style=for-the-badge" onclick="window.location.href='https://github.com/Fennix-Project/Fennix/actions/workflows/makefile.yml'">
-            <img alt="GitHub" src="https://img.shields.io/github/license/Fennix-Project/Fennix?style=for-the-badge">
-            <img alt="GitHub repo size" src="https://img.shields.io/github/repo-size/Fennix-Project/Fennix?style=for-the-badge">
-            <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/Fennix-Project/Fennix?label=Repo%20Stars&style=for-the-badge">
-        </div>
-        <div>
-            <h1 class="gradienttext" style="font-size: 50px;">About</h1>
-            <table style="float: right;">
-                <tbody>
-                    <tr>
-                        <th>
-                            <iframe src="https://discord.com/widget?id=887406812612157451&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>
-                        </th>
-                    </tr>
-                </tbody>
-            </table>
-            <div style="padding-top: 100px; font-size: 35px;">
-                Hello!<br> This is my Operating System from scratch, my goal is to make a fully functional Operating System with a GUI and a lot of features.<br> I'm working on this project alone, but I'm open to any kind of help, if you want to help
-                me, you can contribute to the project on GitHub.<br> I have a Discord server too &#8594<br>
+        <div class="div-dropdown">
+            <button class="header-button" onclick="toggleDropdown()">🌐</button>
+            <div class="dropdown-content" id="dropdownMenu">
+                <a href="" onclick="changeLanguage('bg')">Български</a>
+                <a href="" onclick="changeLanguage('de')">Deutsch</a>
+                <a href="" onclick="changeLanguage('en')">English</a>
+                <a href="" onclick="changeLanguage('es')">Español</a>
+                <a href="" onclick="changeLanguage('fr')">Français</a>
+                <a href="" onclick="changeLanguage('hu')">Magyar</a>
+                <a href="" onclick="changeLanguage('it')">Italiano</a>
+                <a href="" onclick="changeLanguage('ja')">日本語</a>
+                <a href="" onclick="changeLanguage('ko')">한국어</a>
+                <a href="" onclick="changeLanguage('pl')">Polski</a>
+                <a href="" onclick="changeLanguage('pt')">Português</a>
+                <a href="" onclick="changeLanguage('ro')">Română</a>
+                <a href="" onclick="changeLanguage('ru')">Русский</a>
+                <a href="" onclick="changeLanguage('tr')">Türkçe</a>
+                <a href="" onclick="changeLanguage('zh-CN')">中文(简体)</a>
+                <a href="" onclick="changeLanguage('zh-TW')">中文(繁體)</a>
             </div>
         </div>
+    </header>
 
-        <div style="font-size: 20px;">
-            <hr color="#292929" style="margin-top: 250px;">
-            <h1 class="gradienttext" style="padding-top: 100px; font-size: 50px;">Compiling Instructions</h1>
-            <div style="text-align: left; margin-left: 10px; margin-right: 10px;">
-                <h4>Requirements</h4>
-                First of all, you need to install the required packages to build the cross-compiler, bootloader, OS, etc.
-                <br>
-                <hr color="#292929">
-                <b>&#x2022; Ubuntu 22.04</b><br> For cross-compiler:<br>
-                <code class="panel">sudo apt install build-essential bison flex libgmp3-dev libmpc-dev libmpfr-dev texinfo libzstd-dev libisl-dev autoconf m4 automake gettext gperf dejagnu guile-3.0 guile-3.0-dev expect tcl autogen tex-common sphinx-common git ssh diffutils patch
-                    <i class="fa-solid fa-clipboard" style="cursor: pointer;" title="Copy to clipboard" onclick="CopyToClipboard('sudo apt install build-essential bison flex libgmp3-dev libmpc-dev libmpfr-dev texinfo libzstd-dev libisl-dev autoconf m4 automake gettext gperf dejagnu guile-3.0 guile-3.0-dev expect tcl autogen tex-common sphinx-common git ssh diffutils patch');return false;"></i></code><br>                For bootloader:<br>
-                <code class="panel">sudo apt-get install make gcc-mingw-w64-x86-64 gcc-mingw-w64-i686 mingw-w64
-                    <i class="fa-solid fa-clipboard" style="cursor: pointer;" title="Copy to clipboard" onclick="CopyToClipboard('sudo apt-get install make gcc-mingw-w64-x86-64 gcc-mingw-w64-i686 mingw-w64');return false;"></i></code><br>                For QEMU you'll have to follow this page <a href="https://wiki.qemu.org/Hosts/Linux" target="_blank">here</a><br> For OS:<br>
-                <code class="panel">sudo apt-get install xorriso mtools genisoimage ovmf nasm doxygen
-                    <i class="fa-solid fa-clipboard" style="cursor: pointer;" title="Copy to clipboard" onclick="CopyToClipboard('sudo apt-get install xorriso mtools genisoimage ovmf nasm doxygen');return false;"></i>
-                </code><br>
+    <section class="hero">
+        <h1 data-i18n="welcome_message"></h1>
+        <p data-i18n="welcome_subtitle"></p>
+        <button id="downloadBtn" data-i18n="download_button" onclick="downloadFennix()"></button>
+    </section>
+
+    <section class="screenshot-section">
+        <h2 data-i18n="screenshot_title"></h2>
+        <img data-i18n="screenshot_image" src="assets/images/screenshot-default.png" alt="Fennix Screenshot" class="screenshot">
+    </section>
+
+    <section class="buttons-section">
+        <h2 data-i18n="get_involved"></h2>
+        <button data-i18n="get_involved_btn1" class="button" onclick="window.location.href='https://github.com/EnderIce2/Fennix'"></button>
+        <button data-i18n="get_involved_btn2" class="button" onclick="window.location.href='./docs/index.html'"></button>
+        <button data-i18n="get_involved_btn3" class="button" onclick="window.location.href='./docs/df/d03/md_tools_doxygen_api.html'"></button>
+        <button data-i18n="get_involved_btn4" class="button" onclick="window.location.href='./docs/d9/d7f/md_tools_doxygen_develop.html'"></button>
+    </section>
+
+    <section class="features-section">
+        <h2 data-i18n="features_title"></h2>
+        <div class="features">
+            <div class="card">
+                <h3 data-i18n="card1_title"></h3>
+                <p data-i18n="card1_text"></p>
             </div>
-
-            <div style="text-align: left; margin-left: 10px; margin-right: 10px;">
-                <h4 style="padding-top: 50px;">Building The Cross-Compiler</h4>
-                The cross-compiler is used to compile the OS, the bootloader and the kernel.<br>
-                <hr color="#292929"> All you have to do is to write this command in the terminal:<br>
-                <code class="panel">make tools</code><br> You'll have to wait a while, but when it's done, you can jump to the next step.<br>
+            <div class="card">
+                <h3 data-i18n="card2_title"></h3>
+                <p data-i18n="card2_text"></p>
             </div>
-
-            <div style="text-align: left; margin-left: 10px; margin-right: 10px;">
-                <h4 style="padding-top: 50px;">Configuring your kernel</h4>
-                If you want to build different architecture, use other QEMU binary or change kernel name you can find in
-                <code class="panel">config.mk</code> file.<br>
-                <hr color="#292929">
-                <code class="panel">DEBUG</code> &#x2022; If it's set to <code class="panel">1</code>, the kernel will be compiled in debug mode.<br>
-                <code class="panel">TESTING</code> &#x2022; Enable unit testing.<br>
-                <code class="panel">OSNAME</code> &#x2022; The name of the kernel. This can be anything.<br>
-                <code class="panel">OSARCH</code> &#x2022; The architecture of the kernel. Supported values are: <code class="panel">amd64</code> <code class="panel">i386</code> <code class="panel">aarch64</code>.<br>
-                <code class="panel">KERNEL_VERSION</code> &#x2022; The version of the kernel. This can be anything.<br>
-                <code class="panel">BOOTLOADER</code> &#x2022; The bootloader to be used. If set to <code class="panel">other</code>, the bootloader will be <a href="https://github.com/limine-bootloader/limine" target="_blank">Limine</a> for 64-bit, or
-                with <a href="https://www.gnu.org/software/grub/" target="_blank">GRUB</a> if 32-bit.
-                <code class="panel">COMPILER_PATH</code> &#x2022; The path of the cross compiler. If you want to use your own cross compiler, change it to the path of the compiler.<br>
-                <code class="panel">LIMINE_FOLDER</code> &#x2022; The path of the Limine bootloader.<br>
-                <code class="panel">QEMU_PATH</code> &#x2022; Qemu path. If you want to use the one you have installed in your system, change it to /usr/bin/qemu-system- (do not include x86_64 or i386, it will be added automatically)
-                <br> That's all you can change in this file.<br>
-            </div>
-
-            <div style="text-align: left; margin-left: 10px; margin-right: 10px;">
-                <h4 style="padding-top: 50px;">Building The Operating System</h4>
-                The fun part!<br>
-                <hr color="#292929"> Now that you have the cross-compiler, you can build the OS.<br> There are a few commands that you can use to compile the OS:<br>
-                <code class="panel">make build</code> &#x2022; Builds the entire OS and creates an ISO image.<br>
-                <code class="panel">make run</code> &#x2022; Same as <code class="panel">make build</code> but starts the QEMU too.<br>
-                <code class="panel">make clean</code> &#x2022; Clean all files (object files, ISO, etc...).<br>
-                <code class="panel">make doxygen</code> &#x2022; Generate the documentation in directory <code class="panel">doxygen-doc</code>.<br>
+            <div class="card">
+                <h3 data-i18n="card3_title"></h3>
+                <p data-i18n="card3_text"></p>
             </div>
         </div>
+    </section>
 
-        <div style="font-size: 20px; padding-top: 100px;">
-            <h1 style="font-size: 50px;" class="gradienttext">Running With Other Virtual Machines</h1>
-            <hr color="#292929">
-            <div style="text-align: left; margin-left: 10px; margin-right: 10px;">
-                &#x2022; On VirtualBox and VMware, you can use the ISO image to run the OS.<br> &#x2022; HDD/SSD are not required.<br> &#x2022; The minimum RAM required is 4G. You can run with lower memory, but sometimes can cause issues (I don't know
-                why).<br> &#x2022; UEFI required. BIOS sometimes doesn't work properly.<br> &#x2022; Serial Port (COM1) is recommended.<br>
-            </div>
+    <section class="feature-detail">
+        <img data-i18n="feature1_image" src="assets/images/feature-default.png" alt="Feature 1 Screenshot">
+        <div class="text">
+            <h3 data-i18n="feature1_title"></h3>
+            <p data-i18n="feature1_text"></p>
         </div>
+    </section>
 
-        <div style="font-size: 20px; padding-top: 100px;">
-            <h1 style="font-size: 50px;" class="gradienttext">Reporting Issues</h1>
-            <hr color="#292929">
-            <div style="text-align: left; margin-left: 10px; margin-right: 10px;">
-                You can report bugs or crash issues to <a href="https://github.com/Fennix-Project/Fennix/issues/new?assignees=&labels=bug&template=bug_report.md&title=">Issues
-                    tab</a>.<br>
-            </div>
+    <section class="feature-detail">
+        <img data-i18n="feature2_image" src="assets/images/feature-default.png" alt="Feature 2 Screenshot">
+        <div class="text">
+            <h3 data-i18n="feature2_title"></h3>
+            <p data-i18n="feature2_text"></p>
         </div>
+    </section>
 
-        <button style="z-index: 105; position: absolute;" onclick="topScript()" id="backToTopBtn">Up</button>
-        <footer class="blur">
-            <p>© EnderIce2 <span id="year"></span></p>
-            <script src="js/script.js"></script>
-        </footer>
-    </div>
+    <section class="feature-detail">
+        <img data-i18n="feature3_image" src="assets/images/feature-default.png" alt="Feature 3 Screenshot">
+        <div class="text">
+            <h3 data-i18n="feature3_title"></h3>
+            <p data-i18n="feature3_text"></p>
+        </div>
+    </section>
+
+    <footer class="footer">
+        <p data-i18n="footer_text"></p>
+    </footer>
+
+    <script src="assets/js/script.js"></script>
 </body>
 
-</html>
+</html>

tools/website/robots.txt

@@ -1,5 +1,5 @@
 User-agent: *
-Disallow: /userspace/
-Disallow: /drivers/
-Disallow: /kernel/
-Disallow: /fulldoc/
+Disallow: /lang/
+Disallow: /js/
+Disallow: /css/
+Disallow: /images/