From efdbdb812102ef1f7776d2eaab9fc4573d4069d5 Mon Sep 17 00:00:00 2001
From: killian <63927363+KillianLucas@users.noreply.github.com>
Date: Tue, 30 Jan 2024 00:53:30 -0800
Subject: [PATCH] Design

---
 OS/01/app/bootloader.html | 80 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 80 insertions(+)
 create mode 100644 OS/01/app/bootloader.html
diff --git a/OS/01/app/bootloader.html b/OS/01/app/bootloader.html
new file mode 100644
index 0000000..e85823e
--- /dev/null
+++ b/OS/01/app/bootloader.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Rotating Glowing Circle</title>
+    <style>
+        body,
+        html {
+            height: 100%;
+            margin: 0;
+            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 */
+        }
+
+        .center-circle {
+            position: absolute;
+            width: 200px;
+            height: 200px;
+            border: 1px solid white;
+            border-radius: 50%;
+            background-color: transparent;
+        }
+
+        .center-circle-2 {
+            position: absolute;
+            width: 190px;
+            height: 190px;
+            opacity: 0.2;
+            border: 1px solid white;
+            border-radius: 50%;
+            background-color: transparent;
+        }
+
+        .glow-circle {
+            position: absolute;
+            width: 250px;
+            height: 250px;
+            border-radius: 50%;
+            background-color: transparent;
+            box-shadow: 0 0 60px 30px black;
+            /* Initial position of the glow circle, offset from the center */
+            top: 50%;
+            left: 50%;
+            margin-top: -150px;
+            /* Half the height of the circle */
+            margin-left: -150px;
+            /* 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);
+            }
+
+            100% {
+                transform: rotate(0deg) translateX(-240px) translateY(-240px);
+            }
+        }
+    </style>
+</head>
+
+<body>
+
+    <div class="center-circle"></div>
+    <div class="glow-circle"></div>
+    <div class="center-circle-2"></div>
+
+</body>
+
+</html>
\ No newline at end of file
