Updated files

This commit is contained in:
Alex
2022-09-29 02:07:21 +03:00
parent b766196550
commit 884b50a351
24 changed files with 4254 additions and 4 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 MiB

293
tools/website/css/style.css Normal file
View File

@ -0,0 +1,293 @@
html {
scroll-behavior: smooth;
}
body {
background-color: #000;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
font-family: 'Open Sans', sans-serif;
z-index: -1;
margin: 0;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: rgb(40, 40, 40);
}
::-webkit-scrollbar-thumb {
background: #888;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
.on-background-text {
color: #f2f2f2;
}
.move-to-middle {
text-align: center;
}
.move-to-left {
text-align: left;
}
.move-to-right {
text-align: right;
}
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(15, 15, 15, 0.8);
position: sticky;
top: 0;
z-index: 101;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background-color: rgb(80, 0, 100, 0.5);
}
.navbar a.active {
background-color: rgb(100, 0, 180, 0.5);
}
.navbar a.active_f {
background-color: rgb(100, 0, 180, 0.5);
}
.navbar .icon {
display: none;
}
.content-buttons {
background-color: rgb(20, 20, 20);
}
.button {
background-color: rgb(100, 0, 180, 0.5);
/* #964caf; */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.button:hover {
background-color: rgb(80, 0, 100, 0.5);
/* #872ea5; */
color: white;
}
.header {
background-color: rgb(15, 15, 15, 0.8);
color: #f2f2f2;
text-align: center;
padding: 5px;
font-size: 35px;
position: sticky;
top: 0;
z-index: 100;
backdrop-filter: blur(5px);
}
footer {
text-align: center;
background-color: rgb(15, 15, 15, 0.8);
color: white;
overflow: hidden;
position: fixed;
bottom: 0;
width: 100%;
z-index: 104;
backdrop-filter: blur(5px);
}
.round-border-low {
border-radius: 2px;
}
.round-border-med {
border-radius: 6px;
}
.round-border-high {
border-radius: 16px;
}
.panel {
background: rgb(40, 40, 40, .8);
box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.80);
overflow: hidden;
backdrop-filter: blur(5px);
}
#backToTopBtn {
backdrop-filter: blur(5px);
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 105;
border: none;
outline: none;
background-color: rgb(100, 0, 180, 0.5);
color: white;
cursor: pointer;
padding: 15px;
border-radius: 10px;
font-size: 18px;
}
#backToTopBtn:hover {
background-color: rgb(80, 0, 100, 0.5);
}
.stroketext {
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.parallax {
min-height: 1000px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.wrapper {
background: rgb(255, 255, 255);
padding: 50px;
text-align: center;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.wrapper .icon {
position: relative;
background-color: #ffffff;
border-radius: 50%;
margin: 40px;
width: 100px;
height: 100px;
line-height: 50px;
font-size: 80px;
display: inline-block;
align-items: center;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
color: #333;
text-decoration: none;
}
.wrapper .tooltip {
position: absolute;
top: 0;
line-height: 1.5;
font-size: 14px;
background-color: #ffffff;
color: #ffffff;
padding: 5px 8px;
border-radius: 5px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
opacity: 0;
pointer-events: none;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .tooltip::before {
position: absolute;
content: "";
height: 8px;
width: 8px;
background-color: #ffffff;
bottom: -3px;
left: 50%;
transform: translate(-50%) rotate(45deg);
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon:hover .tooltip {
top: -45px;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip {
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}
.wrapper .whatsapp:hover,
.wrapper .whatsapp:hover .tooltip,
.wrapper .whatsapp:hover .tooltip::before {
background-color: #25D366;
color: #ffffff;
}
.wrapper .twitter:hover,
.wrapper .twitter:hover .tooltip,
.wrapper .twitter:hover .tooltip::before {
background-color: #46c1f6;
color: #ffffff;
}
.wrapper .instagram:hover,
.wrapper .instagram:hover .tooltip,
.wrapper .instagram:hover .tooltip::before {
background-color: #e1306c;
color: #ffffff;
}
.wrapper .github:hover,
.wrapper .github:hover .tooltip,
.wrapper .github:hover .tooltip::before {
background-color: #333333;
color: #ffffff;
}
.wrapper .youtube:hover,
.wrapper .youtube:hover .tooltip,
.wrapper .youtube:hover .tooltip::before {
background-color: #de463b;
color: #ffffff;
}
.gradienttext {
color: #eee;
text-transform: capitalize;
background: linear-gradient(-45deg, #09f1b8, #00a2ff, #920077, #fed90f);
background-size: 100% 100%;
-webkit-background-clip: text;
-webkit-text-stroke: 10px transparent;
}

150
tools/website/index.html Normal file
View File

@ -0,0 +1,150 @@
<html>
<head>
<title>Fennix Project</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">
</head>
<body ondragstart="return false;" ondrop="return false;">
<div class="navbar round-border-low" style="backdrop-filter: blur(5px);">
<li style="float:left"><a class="active_f blur" href="/">Fennix Project</a></li>
<a href="/full_documentations"><i class="fa-solid fa-book-bookmark"></i> Full Documentation</a>
<a href="/headers_documentations"><i class="fa-solid fa-file-code"></i> Kernel API</a>
<a href="https://github.com/EnderIce2/FennixProject"><i class="fa-brands fa-git-alt"></i> Contribute</a>
<a style="float:right" href="https://github.com/EnderIce2/FennixProject/releases/latest"><i class="fa-solid fa-download"></i> Download</a>
</div>
<div class="header" style="background-image: url(assets/Background.png); background-size: cover; background-position: center center;">
<br><br><br><br><br><br>
<h1 class="on-background-text move-to-middle gradienttext">Fennix Project</h1>
<h4 class="on-background-text move-to-middle">Operating System from scratch made in C and C++</h4>
<button class="button round-border-med" style="backdrop-filter: blur(5px); cursor: pointer;" onclick="window.location.href='https://github.com/EnderIce2/FennixProject/releases'">Download Stable Version</button>
<button class="button round-border-med" style="backdrop-filter: blur(5px); cursor: pointer;" onclick="window.location.href='https://github.com/EnderIce2/FennixProject/actions/workflows/makefile.yml'">Download Unstable Version</button>
<br><br><br><br><br><br><br><br><br>
</div>
<div class="header" style="padding-bottom: 250px;">
<div style="padding-top: 40px;">
<img alt="GitHub Workflow Status" src="https://img.shields.io/github/workflow/status/EnderIce2/FennixProject/Build%20OS?style=for-the-badge" onclick="window.location.href='https://github.com/EnderIce2/FennixProject/actions/workflows/makefile.yml'">
<img alt="GitHub" src="https://img.shields.io/github/license/EnderIce2/FennixProject?style=for-the-badge">
<img alt="GitHub repo size" src="https://img.shields.io/github/repo-size/EnderIce2/FennixProject?style=for-the-badge">
<img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/EnderIce2/FennixProject?label=Repo%20Stars&style=for-the-badge">
</div>
<h1>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>
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>
</div>
<div class="header" style="padding-top: 5px; padding-bottom: 450px;">
<h1>Compiling Instructions</h1>
<div style="text-align: left; margin-left: 10px; margin-right: 10px;">
<h2>Requirements</h2>
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</code><br>
For bootloader:<br>
<code class="panel">sudo apt-get install make gcc-mingw-w64-x86-64 gcc-mingw-w64-i686 mingw-w64</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</code><br>
</div>
<div style="text-align: left; margin-left: 10px; margin-right: 10px;">
<h2>Building The Cross-Compiler</h2>
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>
<div style="text-align: left; margin-left: 10px; margin-right: 10px;">
<h2>Configuring your kernel</h2>
If you want to build different architecture, use other QEMU binary or change kernel name you can find in <code class="panel">Makefile.conf</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">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">i686</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">lynx</code> it's still under development.<br>
<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>
<code class="panel">UNIT_TESTS</code> &#x2022; Enable unit testing.<br>
That's all you can change in this file.<br>
</div>
<div style="text-align: left; margin-left: 10px; margin-right: 10px;">
<h2>Building The Operating System</h2>
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 runs 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>
<h1 style="padding-top: 50px;">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>
<h1 style="padding-top: 50px;">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/EnderIce2/FennixProject/issues/new?assignees=&labels=bug&template=bug_report.md&title=">Issues tab</a>.<br>
</div>
</div>
<button onclick="topScript()" id="backToTopBtn">Up</button>
<footer class="blur round-border-low">
<p>© EnderIce2 <span id="year"></span></p>
<script src="js/script.js"></script>
<script>
document.getElementById("year").innerHTML = new Date().getFullYear();
topButton = document.getElementById("backToTopBtn");
window.onscroll = function () { scrollToTop() };
function scrollToTop() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
topButton.style.display = "block";
} else {
topButton.style.display = "none";
}
}
function topScript() {
window.scroll({
top: 0,
behavior: 'smooth'
});
}
</script>
</footer>
</body>
</html>

View File

@ -0,0 +1,9 @@
if (document.addEventListener) {
document.addEventListener('contextmenu', function (e) {
e.preventDefault();
}, false);
} else {
document.attachEvent('oncontextmenu', function () {
window.event.returnValue = false;
});
}