Design

12 months ago · efdbdb8121
parent 3dfb9396b6
commit efdbdb8121
1 changed files with 80 additions and 0 deletions
--- a/OS/01/app/bootloader.html
+++ 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>