MirrorMirror
/
01
mirror of https://github.com/OpenInterpreter/01.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Bootloader

This commit is contained in:
killian 2024-01-30 17:12:50 -08:00
parent efdbdb8121
commit 7cfc436c3d
1 changed files with 35 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
OS/01/app/bootloader.html → OS/01/app/animation.html
View File

@ -13,10 +13,18 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: #000; background-color: black;
/* Set the background of the body to black */ }
overflow: hidden;
/* Hide overflow to prevent scrollbars if the circles are too big */ .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 { .center-circle {
@ -48,22 +56,35 @@
/* Initial position of the glow circle, offset from the center */ /* Initial position of the glow circle, offset from the center */
top: 50%; top: 50%;
left: 50%; left: 50%;
margin-top: -150px; margin-top: -125px;
/* Half the height of the circle */ /* Half the height of the circle */
margin-left: -150px; margin-left: -125px;
/* Half the width of the circle */ /* Half the width of the circle */
/* Animation properties */ /* Animation properties */
animation: rotateAround 6s linear infinite; animation: rotateAround 6s linear infinite;
} }
/* Define the keyframes for the rotation animation */
@keyframes rotateAround { @keyframes rotateAround {
0% { 0% {
transform: rotate(0deg) translateX(240px) translateY(240px); transform: translateX(240px) translateY(240px);
}
50% {
transform: translateX(0px) translateY(0px);
} }
100% { 100% {
transform: rotate(0deg) translateX(-240px) translateY(-240px); transform: translateX(-240px) translateY(-240px);
}
}
@keyframes rotator {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
} }
} }
</style> </style>
@ -71,9 +92,11 @@
<body> <body>
<div class="center-circle"></div> <div class="circles">
<div class="glow-circle"></div> <div class="center-circle"></div>
<div class="center-circle-2"></div> <div class="glow-circle"></div>
<div class="center-circle-2"></div>
</div>
</body> </body>