From 7cfc436c3d8d4ccce5fbab2e7573adf9401d0ad9 Mon Sep 17 00:00:00 2001
From: killian <63927363+KillianLucas@users.noreply.github.com>
Date: Tue, 30 Jan 2024 17:12:50 -0800
Subject: [PATCH] Bootloader
---
OS/01/app/{bootloader.html => animation.html} | 47 ++++++++++++++-----
1 file changed, 35 insertions(+), 12 deletions(-)
rename OS/01/app/{bootloader.html => animation.html} (61%)
diff --git a/OS/01/app/bootloader.html b/OS/01/app/animation.html
similarity index 61%
rename from OS/01/app/bootloader.html
rename to OS/01/app/animation.html
index e85823e..a2a977d 100644
--- a/OS/01/app/bootloader.html
+++ b/OS/01/app/animation.html
@@ -13,10 +13,18 @@
display: flex;
justify-content: center;
align-items: center;
- background-color: #000;
- /* Set the background of the body to black */
- overflow: hidden;
- /* Hide overflow to prevent scrollbars if the circles are too big */
+ background-color: black;
+ }
+
+ .circles {
+ margin: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 200px;
+ height: 200px;
+ border-radius: 50%;
+ animation: rotator 48s linear infinite;
}
.center-circle {
@@ -48,22 +56,35 @@
/* Initial position of the glow circle, offset from the center */
top: 50%;
left: 50%;
- margin-top: -150px;
+ margin-top: -125px;
/* Half the height of the circle */
- margin-left: -150px;
+ margin-left: -125px;
/* Half the width of the circle */
/* Animation properties */
animation: rotateAround 6s linear infinite;
}
- /* Define the keyframes for the rotation animation */
@keyframes rotateAround {
0% {
- transform: rotate(0deg) translateX(240px) translateY(240px);
+ transform: translateX(240px) translateY(240px);
+ }
+
+ 50% {
+ transform: translateX(0px) translateY(0px);
+ }
+
+ 100% {
+ transform: translateX(-240px) translateY(-240px);
+ }
+ }
+
+ @keyframes rotator {
+ 0% {
+ transform: rotate(0deg);
}
100% {
- transform: rotate(0deg) translateX(-240px) translateY(-240px);
+ transform: rotate(360deg);
}
}
@@ -71,9 +92,11 @@
-
-
-
+