I added a draggable welcome window
This is my operating system, Hilo OS
I started working on the Web OS Mission, and so far I have added:
- A taskbar with the time and a button to open the welcome screen
- A window with a header that has a working close button
- The ability to drag the window around
- A desktop background
It took me a while to get the window to look nice and for all of the parts to line up, but here is what I ended up with:
.window {
display: flex;
flex-direction: column;
align-items: center;
background-color: #f2e6e67f;
backdrop-filter: blur(10px);
color: #190000;
border: solid;
width: 400px;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
filter: drop-shadow(-5px 5px 2px #0000008b);
font-family: "Micro 5", sans-serif;
font-weight: 400; font-style: normal;
}
.windowcontent {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
padding: 10px;
}
.windowheader {
display: flex;
justify-content: space-between;
vertical-align: middle;
width: 98%;
margin: 0px 0px 10px 0px;
padding: 5px;
background-color: #00000091;
backdrop-filter: blur(10px);
color: #190000;
font-family: "Pixelify Sans", sans-serif;
font-weight: 500; font-style: normal;
}
The header’s size isn’t perfect, but I just had to settle on width: 98%; and margin: 0px 0px 10px 0px; padding: 5px; for now.
