enderice2/Fennix
enderice2/Fennix
1
0
Fork 0
mirror of https://github.com/EnderIce2/Fennix.git synced 2025-05-27 15:04:31 +00:00
Code Issues Actions Releases Wiki Activity

Update website

Browse Source
This commit is contained in:
Alex 2022-10-17 08:09:49 +03:00
parent 728c682465
commit a1eba6bd72
Signed by untrusted user who does not match committer: enderice2
GPG Key ID: EACC3AD603BAB4DD
4 changed files with 245 additions and 253 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
tools/website/assets/Background.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.9 MiB

143
tools/website/css/style.css
View File

@ -13,6 +13,23 @@ body {
margin: 0;
}
.background_main {
background-image: linear-gradient(121deg, rgb(0, 0, 0) 40%, rgb(72, 0, 140) 40%, rgb(0, 16, 80) 76%, rgb(72, 0, 0) 100%);
background-size: 400% 400%;
height: 100vh;
animation: gradient 4s ease-out;
animation-fill-mode: forwards;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
100% {
background-position: 100% 50%;
}
}
::-webkit-scrollbar {
width: 10px;
@ -88,7 +105,7 @@ body {
}
.button {
background-color: rgb(100, 0, 180, 0.5);
background-color: rgb(15, 15, 15, 0.1);
/* #964caf; */
border: none;
color: white;
@ -110,11 +127,10 @@ body {
color: #f2f2f2;
text-align: center;
padding: 5px;
font-size: 35px;
position: sticky;
top: 0;
z-index: 100;
backdrop-filter: blur(5px);
backdrop-filter: blur(10px);
}
footer {
@ -126,7 +142,7 @@ footer {
bottom: 0;
width: 100%;
z-index: 104;
backdrop-filter: blur(5px);
backdrop-filter: blur(10px);
}
.round-border-low {
@ -142,14 +158,16 @@ footer {
}
.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);
background: rgba(177, 177, 177, 0.2);
backdrop-filter: blur(40px);
box-shadow: 1px 1px 2px rgb(255, 255, 255), 0 0 0.2em rgb(0, 42, 167), 0 0 0.5em rgb(81, 0, 144);
border-radius: 4px;
padding-left: 4px;
padding-right: 4px;
}
#backToTopBtn {
backdrop-filter: blur(5px);
backdrop-filter: blur(10px);
display: none;
position: fixed;
bottom: 20px;
@ -181,113 +199,16 @@ footer {
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%;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-stroke: 10px transparent;
}
.glowtext {
text-shadow: 1px 1px 2px red, 0 0 2em rgb(0, 42, 167), 0 0 1.2em rgb(50, 0, 88);
}

295
tools/website/index.html
View File

@ -1,150 +1,175 @@
<html>
<head>
<title>Fennix Project</title>
<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">
</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 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>
</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="/lynx"><i class="fa-solid fa-file-code"></i> Lynx Bootloader</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>
<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>
<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>
</div>
<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>
</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>
<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">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">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">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>
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>
</div>
<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>
</div>
<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>
</div>
<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>
<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">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">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>
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>
</html>

60
tools/website/js/script.js
View File

@ -1,9 +1,55 @@
if (document.addEventListener) {
document.addEventListener('contextmenu', function (e) {
e.preventDefault();
}, false);
} else {
document.attachEvent('oncontextmenu', function () {
window.event.returnValue = false;
document.querySelectorAll(".hdrbtn").forEach((b) => {
b.onmouseleave = (e) => {
e.target.style.background = "rgb(15, 15, 15, 0.1)";
e.target.style.borderImage = null;
};
b.addEventListener("mousemove", (e) => {
const rect = e.target.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
e.target.style.background = `radial-gradient(circle at ${x}px ${y}px , rgba(100, 0, 180, 0.5),rgba(15, 15, 15, 0.1) )`;
e.target.style.borderImage = `radial-gradient(20% 75% at ${x}px ${y}px ,rgba(255, 255, 255, 0.7),rgba(255, 255, 255, 0.1) ) 1 / 1px / 0px stretch `;
});
});
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'
});
}
function CopyToClipboard(text) {
if (window.clipboardData && window.clipboardData.setData) {
return window.clipboardData.setData("Text", text);
}
else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
var textarea = document.createElement("textarea");
textarea.textContent = text;
textarea.style.position = "fixed";
document.body.appendChild(textarea);
textarea.select();
try {
return document.execCommand("copy");
}
catch (ex) {
console.warn("Copy to clipboard failed.", ex);
return prompt("Copy to clipboard: Ctrl+C, Enter", text);
}
finally {
document.body.removeChild(textarea);
}
}
}