├── scripts └── dragWindow.js ├── main.js ├── index.html ├── styles.css.map ├── styles.scss └── styles.css /scripts/dragWindow.js: -------------------------------------------------------------------------------- 1 | export default function dragElement(windowId, headerId) { 2 | 3 | var windowElement = document.getElementById(windowId) 4 | 5 | var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; 6 | if (document.getElementById(windowElement.id + headerId)) { 7 | // if present, the header is where you move the DIV from: 8 | document.getElementById(windowElement.id + headerId).onmousedown = dragMouseDown; 9 | } else { 10 | // otherwise, move the DIV from anywhere inside the DIV: 11 | windowElement.onmousedown = dragMouseDown; 12 | } 13 | 14 | function dragMouseDown(e) { 15 | e = e || window.event; 16 | e.preventDefault(); 17 | // get the mouse cursor position at startup: 18 | pos3 = e.clientX; 19 | pos4 = e.clientY; 20 | document.onmouseup = closeDragElement; 21 | // call a function whenever the cursor moves: 22 | document.onmousemove = elementDrag; 23 | } 24 | 25 | function elementDrag(e) { 26 | e = e || window.event; 27 | e.preventDefault(); 28 | // calculate the new cursor position: 29 | pos1 = pos3 - e.clientX; 30 | pos2 = pos4 - e.clientY; 31 | pos3 = e.clientX; 32 | pos4 = e.clientY; 33 | // set the element's new position: 34 | windowElement.style.top = (windowElement.offsetTop - pos2) + "px"; 35 | windowElement.style.left = (windowElement.offsetLeft - pos1) + "px"; 36 | } 37 | 38 | function closeDragElement() { 39 | // stop moving when mouse button is released: 40 | document.onmouseup = null; 41 | document.onmousemove = null; 42 | } 43 | 44 | } -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | function dragElement(windowId, headerId) { 2 | 3 | var windowElement = document.getElementById(windowId) 4 | 5 | var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; 6 | if (document.getElementById(windowElement.id + headerId)) { 7 | // if present, the header is where you move the DIV from: 8 | document.getElementById(windowElement.id + headerId).onmousedown = dragMouseDown; 9 | } else { 10 | // otherwise, move the DIV from anywhere inside the DIV: 11 | windowElement.onmousedown = dragMouseDown; 12 | } 13 | 14 | function dragMouseDown(e) { 15 | e = e || window.event; 16 | e.preventDefault(); 17 | // get the mouse cursor position at startup: 18 | pos3 = e.clientX; 19 | pos4 = e.clientY; 20 | document.onmouseup = closeDragElement; 21 | // call a function whenever the cursor moves: 22 | document.onmousemove = elementDrag; 23 | } 24 | 25 | function elementDrag(e) { 26 | e = e || window.event; 27 | e.preventDefault(); 28 | // calculate the new cursor position: 29 | pos1 = pos3 - e.clientX; 30 | pos2 = pos4 - e.clientY; 31 | pos3 = e.clientX; 32 | pos4 = e.clientY; 33 | // set the element's new position: 34 | windowElement.style.top = (windowElement.offsetTop - pos2) + "px"; 35 | windowElement.style.left = (windowElement.offsetLeft - pos1) + "px"; 36 | } 37 | 38 | function closeDragElement() { 39 | // stop moving when mouse button is released: 40 | document.onmouseup = null; 41 | document.onmousemove = null; 42 | } 43 | 44 | } 45 | 46 | function windowHandler(windowId) { 47 | 48 | let windowElementClassList = document.getElementById(windowId).classList 49 | 50 | if(windowElementClassList.contains('opened')) { 51 | 52 | windowElementClassList.remove('opened') 53 | windowElementClassList.remove('maximized') 54 | 55 | setTimeout(() => windowElementClassList.add('hidded'), 600) 56 | 57 | } else { 58 | 59 | windowElementClassList.add('opened') 60 | windowElementClassList.remove('hidded') 61 | dragElement(windowId, `${windowId}Header`) 62 | document.getElementById(windowId).src = 'https://www.bing.com/?cc=br' 63 | 64 | } 65 | 66 | } 67 | 68 | function maximizeHandler(windowId) { 69 | 70 | let windowElementClassList = document.getElementById(windowId).classList 71 | 72 | windowElementClassList.contains('maximized') ? windowElementClassList.remove('maximized') : windowElementClassList.add('maximized') 73 | 74 | } 75 | 76 | function bootingScreen() { 77 | 78 | setTimeout( () => document.getElementById('bootSection').classList.add('booting-finish'), 5000 ) 79 | 80 | } 81 | 82 | function setDate() { 83 | 84 | let currentDate = new Date() 85 | let currentHour = currentDate.getHours() 86 | let currentMinute = currentDate.getMinutes() 87 | let currentDay = currentDate.getDate() 88 | let currentMonth = currentDate.getMonth() + 1 89 | 90 | document.getElementById('currentHour').innerHTML = currentHour.toString().length === 1 ? `0${currentHour}` : currentHour 91 | document.getElementById('currentMinute').innerHTML = currentMinute.toString().length === 1 ? `0${currentMinute}` : currentMinute 92 | 93 | document.getElementById('currentDay').innerHTML = currentDay.toString().length === 1 ? `0${currentDay}` : currentDay 94 | document.getElementById('currentMonth').innerHTML = currentMonth.toString().length === 1 ? `0${currentMonth}` : currentMonth 95 | document.getElementById('currentYear').innerHTML = currentDate.getFullYear() 96 | 97 | setTimeout( () => setDate(), 1000 ) 98 | 99 | } 100 | 101 | setDate() 102 | 103 | bootingScreen() -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Javascript OS - The Web OS 9 | 10 | 11 | 12 |
13 |

Booting Javascript Web OS, please wait a few seconds

14 |
15 | 16 |
17 | 18 |
19 | 20 |
21 |
22 | 23 | 24 | 25 |
26 | folder 27 |
28 | 29 |
30 | 31 | 34 | 35 |
36 | 37 |

Work in progress...

38 | 39 |
40 | 41 |
42 | 43 |
44 | 45 |
46 | 47 |
48 |
49 | 50 | 51 | 52 |
53 | Browser 54 |
55 | 56 | 57 |
58 | 59 |
60 | 61 |
62 |
63 | 64 | 65 | 66 |
67 | Map 68 |
69 | 70 | 71 |
72 | 73 |
74 | 75 |
76 |
77 | 78 | 79 | 80 |
81 | Code 82 |
83 | 84 | 85 |
86 | 87 |
88 | 89 | : 90 | 91 | 92 | // 93 | 94 |
95 | 96 | 120 | 121 |
122 | 123 | 132 | 133 | 134 | 135 | 136 | -------------------------------------------------------------------------------- /styles.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": [ 5 | "styles.scss" 6 | ], 7 | "names": [], 8 | "file": "styles.css" 9 | } -------------------------------------------------------------------------------- /styles.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); 2 | 3 | * { 4 | 5 | margin: 0; 6 | padding: 0; 7 | box-sizing: border-box; 8 | font-family: 'Roboto', sans-serif; 9 | 10 | } 11 | 12 | html { 13 | 14 | overflow: hidden; 15 | 16 | } 17 | 18 | .booting-finish { 19 | 20 | z-index: -2 !important; 21 | 22 | } 23 | 24 | @keyframes booting { 25 | 0% { 26 | 27 | transform: scale(20); 28 | filter: blur(4px); 29 | 30 | } 31 | 20% { 32 | 33 | transform: scale(1); 34 | filter: blur(0); 35 | opacity: 1; 36 | 37 | } 38 | 80% { 39 | 40 | transform: scale(1); 41 | filter: blur(0); 42 | opacity: 1; 43 | 44 | } 45 | 100% { 46 | 47 | transform: scale(2); 48 | filter: blur(4px); 49 | opacity: 0; 50 | 51 | } 52 | } 53 | 54 | .booting { 55 | 56 | position: absolute; 57 | width: 100%; 58 | height: 100vh; 59 | z-index: 11; 60 | background: linear-gradient(26deg, #00b4dd, #3edbce, #436cec); 61 | background-size: 600% 600%; 62 | -webkit-animation: AnimationName 30s ease infinite; 63 | -moz-animation: AnimationName 30s ease infinite; 64 | -o-animation: AnimationName 30s ease infinite; 65 | animation: AnimationName 30s ease infinite; 66 | animation: booting 5s forwards; 67 | 68 | @-webkit-keyframes AnimationName { 69 | 0%{background-position:76% 0%} 70 | 50%{background-position:25% 100%} 71 | 100%{background-position:76% 0%} 72 | } 73 | @-moz-keyframes AnimationName { 74 | 0%{background-position:76% 0%} 75 | 50%{background-position:25% 100%} 76 | 100%{background-position:76% 0%} 77 | } 78 | @-o-keyframes AnimationName { 79 | 0%{background-position:76% 0%} 80 | 50%{background-position:25% 100%} 81 | 100%{background-position:76% 0%} 82 | } 83 | @keyframes AnimationName { 84 | 0%{background-position:76% 0%} 85 | 50%{background-position:25% 100%} 86 | 100%{background-position:76% 0%} 87 | } 88 | 89 | h1 { 90 | 91 | color: white; 92 | text-align: center; 93 | line-height: 100vh; 94 | font-weight: 100; 95 | 96 | } 97 | 98 | } 99 | 100 | .desktop { 101 | 102 | width: 100%; 103 | height: 100vh; 104 | background-color: rgb(90, 90, 90); 105 | background-image: url('https://i.pinimg.com/originals/04/9a/62/049a62222e1ad2ffe721f69159ed3cfd.jpg'); 106 | background-position: center; 107 | background-repeat: no-repeat; 108 | background-size: cover; 109 | background-blend-mode: overlay; 110 | padding: 12px; 111 | overflow: hidden; 112 | 113 | .window.opened.maximized { 114 | 115 | top: 0 !important; 116 | left: 0 !important; 117 | width: 100%; 118 | height: 100vh; 119 | 120 | } 121 | 122 | .window.opened { 123 | 124 | width: 80%; 125 | height: 80vh; 126 | top: 10vh; 127 | left: 10%; 128 | opacity: 1; 129 | z-index: 5 !important; 130 | transform: scale(1); 131 | filter: blur(0px); 132 | 133 | } 134 | 135 | .hidded { 136 | 137 | z-index: -1; 138 | 139 | } 140 | 141 | .window { 142 | 143 | width: 80%; 144 | height: 80vh; 145 | position: absolute; 146 | border-radius: 12px; 147 | overflow: hidden; 148 | top: 10vh; 149 | left: 10%; 150 | // z-index: -5; 151 | transform: scale(2); 152 | opacity: 0; 153 | filter: blur(32px); 154 | transition: transform .6s ease-in-out, opacity .6s, filter .6s; 155 | 156 | .window-header { 157 | 158 | width: 100%; 159 | height: 42px; 160 | background-color: #171717a4; 161 | backdrop-filter: blur(12px); 162 | display: flex; 163 | padding-inline: 12px; 164 | justify-content: space-between; 165 | align-items: center; 166 | position: relative; 167 | 168 | .window-name { 169 | 170 | color: white; 171 | font-weight: 300; 172 | letter-spacing: 2px; 173 | text-align: center; 174 | width: 60%; 175 | position: absolute; 176 | left: 20%; 177 | 178 | } 179 | 180 | .buttons { 181 | 182 | display: flex; 183 | gap: 12px; 184 | 185 | span { 186 | 187 | display: block; 188 | width: 18px; 189 | height: 18px; 190 | border-radius: 50%; 191 | transition: .2s ease-in-out; 192 | opacity: .8; 193 | 194 | &:hover { 195 | 196 | opacity: 1; 197 | cursor: pointer; 198 | 199 | } 200 | 201 | } 202 | 203 | .close { 204 | 205 | background-color: #fe5d55; 206 | 207 | } 208 | 209 | .minimize { 210 | 211 | background-color: #febc2f; 212 | 213 | } 214 | 215 | .maximize { 216 | 217 | background-color: #25c03c; 218 | 219 | } 220 | 221 | } 222 | 223 | } 224 | 225 | iframe { 226 | 227 | width: 100%; 228 | height: 100%; 229 | border: 0; 230 | 231 | } 232 | 233 | .window-content { 234 | 235 | width: 100%; 236 | height: 100%; 237 | display: flex; 238 | backdrop-filter: blur(4px); 239 | 240 | aside { 241 | 242 | width: 400px; 243 | height: 100%; 244 | background-color: #171717ab; 245 | backdrop-filter: blur(4px); 246 | 247 | } 248 | 249 | main { 250 | 251 | width: 100%; 252 | height: 100%; 253 | background-color: #171717; 254 | padding: 32px; 255 | display: flex; 256 | justify-content: center; 257 | align-items: center; 258 | 259 | h1 { 260 | 261 | color: white; 262 | font-weight: 100; 263 | text-align: center; 264 | opacity: .6; 265 | font-size: 32px; 266 | 267 | } 268 | 269 | } 270 | 271 | } 272 | 273 | } 274 | 275 | .current-date { 276 | 277 | color: white; 278 | position: absolute; 279 | right: 32px; 280 | display: flex; 281 | flex-direction: column; 282 | justify-content: center; 283 | align-items: center; 284 | 285 | * { 286 | 287 | transition: .2s ease-in-out; 288 | 289 | } 290 | 291 | &:hover { 292 | 293 | cursor: default; 294 | 295 | .time, .date { 296 | 297 | opacity: 1; 298 | 299 | } 300 | 301 | } 302 | 303 | .time { 304 | 305 | font-weight: 500; 306 | font-size: 32px; 307 | letter-spacing: 1px; 308 | opacity: .6; 309 | 310 | } 311 | 312 | .date { 313 | 314 | font-weight: 100; 315 | font-size: 14px; 316 | letter-spacing: 1px; 317 | opacity: .4; 318 | 319 | } 320 | 321 | } 322 | 323 | .icons { 324 | 325 | display: flex; 326 | gap: 12px; 327 | flex-direction: column; 328 | 329 | .icon { 330 | 331 | width: 90px; 332 | height: fit-content; 333 | display: flex; 334 | padding-block: 12px; 335 | flex-direction: column; 336 | justify-content: center; 337 | align-items: center; 338 | gap: 8px; 339 | border-radius: 12px; 340 | border: 1px solid transparent; 341 | transition: .2s ease-in-out; 342 | backdrop-filter: blur(0px); 343 | 344 | &:hover { 345 | 346 | background-color: #ffffff2c; 347 | // border-color: #ffffff2c; 348 | cursor: pointer; 349 | transform: scale(1.05); 350 | backdrop-filter: blur(12px); 351 | 352 | * { 353 | 354 | opacity: 1; 355 | 356 | } 357 | 358 | } 359 | 360 | * { 361 | 362 | transition: .2s ease-in-out; 363 | opacity: .6; 364 | 365 | } 366 | 367 | img { 368 | 369 | width: 50px; 370 | 371 | } 372 | 373 | h1 { 374 | 375 | color: white; 376 | font-size: 14px; 377 | font-weight: 300; 378 | 379 | } 380 | 381 | } 382 | 383 | } 384 | 385 | } 386 | 387 | footer { 388 | 389 | width: 100%; 390 | position: absolute; 391 | left: 0; 392 | bottom: 32px; 393 | z-index: 10; 394 | 395 | .icon-wrapper { 396 | 397 | width: fit-content; 398 | height: 60px; 399 | border-radius: 12px; 400 | display: flex; 401 | justify-content: center; 402 | align-items: center; 403 | background-color: #ffffff3d; 404 | transition: .2s ease-in-out; 405 | padding-inline: 24px; 406 | margin: 0 auto; 407 | 408 | &:hover { 409 | 410 | background-color: #ffffff2c; 411 | backdrop-filter: blur(12px); 412 | 413 | } 414 | 415 | img { 416 | 417 | height: 50px; 418 | transition: .2s ease-in-out; 419 | opacity: .6; 420 | 421 | &:hover { 422 | 423 | height: 100px; 424 | transform: translateY(-20px); 425 | cursor: pointer; 426 | opacity: 1; 427 | 428 | } 429 | 430 | } 431 | 432 | 433 | } 434 | 435 | } -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"); 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | -webkit-box-sizing: border-box; 6 | box-sizing: border-box; 7 | font-family: 'Roboto', sans-serif; 8 | } 9 | 10 | html { 11 | overflow: hidden; 12 | } 13 | 14 | .booting-finish { 15 | z-index: -2 !important; 16 | } 17 | 18 | @-webkit-keyframes booting { 19 | 0% { 20 | -webkit-transform: scale(20); 21 | transform: scale(20); 22 | -webkit-filter: blur(4px); 23 | filter: blur(4px); 24 | } 25 | 20% { 26 | -webkit-transform: scale(1); 27 | transform: scale(1); 28 | -webkit-filter: blur(0); 29 | filter: blur(0); 30 | opacity: 1; 31 | } 32 | 80% { 33 | -webkit-transform: scale(1); 34 | transform: scale(1); 35 | -webkit-filter: blur(0); 36 | filter: blur(0); 37 | opacity: 1; 38 | } 39 | 100% { 40 | -webkit-transform: scale(2); 41 | transform: scale(2); 42 | -webkit-filter: blur(4px); 43 | filter: blur(4px); 44 | opacity: 0; 45 | } 46 | } 47 | 48 | @keyframes booting { 49 | 0% { 50 | -webkit-transform: scale(20); 51 | transform: scale(20); 52 | -webkit-filter: blur(4px); 53 | filter: blur(4px); 54 | } 55 | 20% { 56 | -webkit-transform: scale(1); 57 | transform: scale(1); 58 | -webkit-filter: blur(0); 59 | filter: blur(0); 60 | opacity: 1; 61 | } 62 | 80% { 63 | -webkit-transform: scale(1); 64 | transform: scale(1); 65 | -webkit-filter: blur(0); 66 | filter: blur(0); 67 | opacity: 1; 68 | } 69 | 100% { 70 | -webkit-transform: scale(2); 71 | transform: scale(2); 72 | -webkit-filter: blur(4px); 73 | filter: blur(4px); 74 | opacity: 0; 75 | } 76 | } 77 | 78 | .booting { 79 | position: absolute; 80 | width: 100%; 81 | height: 100vh; 82 | z-index: 11; 83 | background: linear-gradient(26deg, #00b4dd, #3edbce, #436cec); 84 | background-size: 600% 600%; 85 | -webkit-animation: AnimationName 30s ease infinite; 86 | animation: AnimationName 30s ease infinite; 87 | -webkit-animation: booting 5s forwards; 88 | animation: booting 5s forwards; 89 | } 90 | 91 | @-webkit-keyframes AnimationName { 92 | 0% { 93 | background-position: 76% 0%; 94 | } 95 | 50% { 96 | background-position: 25% 100%; 97 | } 98 | 100% { 99 | background-position: 76% 0%; 100 | } 101 | } 102 | 103 | @keyframes AnimationName { 104 | 0% { 105 | background-position: 76% 0%; 106 | } 107 | 50% { 108 | background-position: 25% 100%; 109 | } 110 | 100% { 111 | background-position: 76% 0%; 112 | } 113 | } 114 | 115 | .booting h1 { 116 | color: white; 117 | text-align: center; 118 | line-height: 100vh; 119 | font-weight: 100; 120 | } 121 | 122 | .desktop { 123 | width: 100%; 124 | height: 100vh; 125 | background-color: #5a5a5a; 126 | background-image: url("https://i.pinimg.com/originals/04/9a/62/049a62222e1ad2ffe721f69159ed3cfd.jpg"); 127 | background-position: center; 128 | background-repeat: no-repeat; 129 | background-size: cover; 130 | background-blend-mode: overlay; 131 | padding: 12px; 132 | overflow: hidden; 133 | } 134 | 135 | .desktop .window.opened.maximized { 136 | top: 0 !important; 137 | left: 0 !important; 138 | width: 100%; 139 | height: 100vh; 140 | } 141 | 142 | .desktop .window.opened { 143 | width: 80%; 144 | height: 80vh; 145 | top: 10vh; 146 | left: 10%; 147 | opacity: 1; 148 | z-index: 5 !important; 149 | -webkit-transform: scale(1); 150 | transform: scale(1); 151 | -webkit-filter: blur(0px); 152 | filter: blur(0px); 153 | } 154 | 155 | .desktop .hidded { 156 | z-index: -1; 157 | } 158 | 159 | .desktop .window { 160 | width: 80%; 161 | height: 80vh; 162 | position: absolute; 163 | border-radius: 12px; 164 | overflow: hidden; 165 | top: 10vh; 166 | left: 10%; 167 | -webkit-transform: scale(2); 168 | transform: scale(2); 169 | opacity: 0; 170 | -webkit-filter: blur(32px); 171 | filter: blur(32px); 172 | -webkit-transition: opacity .6s, -webkit-transform .6s ease-in-out, -webkit-filter .6s; 173 | transition: opacity .6s, -webkit-transform .6s ease-in-out, -webkit-filter .6s; 174 | transition: transform .6s ease-in-out, opacity .6s, filter .6s; 175 | transition: transform .6s ease-in-out, opacity .6s, filter .6s, -webkit-transform .6s ease-in-out, -webkit-filter .6s; 176 | } 177 | 178 | .desktop .window .window-header { 179 | width: 100%; 180 | height: 42px; 181 | background-color: #171717a4; 182 | -webkit-backdrop-filter: blur(12px); 183 | backdrop-filter: blur(12px); 184 | display: -webkit-box; 185 | display: -ms-flexbox; 186 | display: flex; 187 | padding-inline: 12px; 188 | -webkit-box-pack: justify; 189 | -ms-flex-pack: justify; 190 | justify-content: space-between; 191 | -webkit-box-align: center; 192 | -ms-flex-align: center; 193 | align-items: center; 194 | position: relative; 195 | } 196 | 197 | .desktop .window .window-header .window-name { 198 | color: white; 199 | font-weight: 300; 200 | letter-spacing: 2px; 201 | text-align: center; 202 | width: 60%; 203 | position: absolute; 204 | left: 20%; 205 | } 206 | 207 | .desktop .window .window-header .buttons { 208 | display: -webkit-box; 209 | display: -ms-flexbox; 210 | display: flex; 211 | gap: 12px; 212 | } 213 | 214 | .desktop .window .window-header .buttons span { 215 | display: block; 216 | width: 18px; 217 | height: 18px; 218 | border-radius: 50%; 219 | -webkit-transition: .2s ease-in-out; 220 | transition: .2s ease-in-out; 221 | opacity: .8; 222 | } 223 | 224 | .desktop .window .window-header .buttons span:hover { 225 | opacity: 1; 226 | cursor: pointer; 227 | } 228 | 229 | .desktop .window .window-header .buttons .close { 230 | background-color: #fe5d55; 231 | } 232 | 233 | .desktop .window .window-header .buttons .minimize { 234 | background-color: #febc2f; 235 | } 236 | 237 | .desktop .window .window-header .buttons .maximize { 238 | background-color: #25c03c; 239 | } 240 | 241 | .desktop .window iframe { 242 | width: 100%; 243 | height: 100%; 244 | border: 0; 245 | } 246 | 247 | .desktop .window .window-content { 248 | width: 100%; 249 | height: 100%; 250 | display: -webkit-box; 251 | display: -ms-flexbox; 252 | display: flex; 253 | -webkit-backdrop-filter: blur(4px); 254 | backdrop-filter: blur(4px); 255 | } 256 | 257 | .desktop .window .window-content aside { 258 | width: 400px; 259 | height: 100%; 260 | background-color: #171717ab; 261 | -webkit-backdrop-filter: blur(4px); 262 | backdrop-filter: blur(4px); 263 | } 264 | 265 | .desktop .window .window-content main { 266 | width: 100%; 267 | height: 100%; 268 | background-color: #171717; 269 | padding: 32px; 270 | display: -webkit-box; 271 | display: -ms-flexbox; 272 | display: flex; 273 | -webkit-box-pack: center; 274 | -ms-flex-pack: center; 275 | justify-content: center; 276 | -webkit-box-align: center; 277 | -ms-flex-align: center; 278 | align-items: center; 279 | } 280 | 281 | .desktop .window .window-content main h1 { 282 | color: white; 283 | font-weight: 100; 284 | text-align: center; 285 | opacity: .6; 286 | font-size: 32px; 287 | } 288 | 289 | .desktop .current-date { 290 | color: white; 291 | position: absolute; 292 | right: 32px; 293 | display: -webkit-box; 294 | display: -ms-flexbox; 295 | display: flex; 296 | -webkit-box-orient: vertical; 297 | -webkit-box-direction: normal; 298 | -ms-flex-direction: column; 299 | flex-direction: column; 300 | -webkit-box-pack: center; 301 | -ms-flex-pack: center; 302 | justify-content: center; 303 | -webkit-box-align: center; 304 | -ms-flex-align: center; 305 | align-items: center; 306 | } 307 | 308 | .desktop .current-date * { 309 | -webkit-transition: .2s ease-in-out; 310 | transition: .2s ease-in-out; 311 | } 312 | 313 | .desktop .current-date:hover { 314 | cursor: default; 315 | } 316 | 317 | .desktop .current-date:hover .time, .desktop .current-date:hover .date { 318 | opacity: 1; 319 | } 320 | 321 | .desktop .current-date .time { 322 | font-weight: 500; 323 | font-size: 32px; 324 | letter-spacing: 1px; 325 | opacity: .6; 326 | } 327 | 328 | .desktop .current-date .date { 329 | font-weight: 100; 330 | font-size: 14px; 331 | letter-spacing: 1px; 332 | opacity: .4; 333 | } 334 | 335 | .desktop .icons { 336 | display: -webkit-box; 337 | display: -ms-flexbox; 338 | display: flex; 339 | gap: 12px; 340 | -webkit-box-orient: vertical; 341 | -webkit-box-direction: normal; 342 | -ms-flex-direction: column; 343 | flex-direction: column; 344 | } 345 | 346 | .desktop .icons .icon { 347 | width: 90px; 348 | height: -webkit-fit-content; 349 | height: -moz-fit-content; 350 | height: fit-content; 351 | display: -webkit-box; 352 | display: -ms-flexbox; 353 | display: flex; 354 | padding-block: 12px; 355 | -webkit-box-orient: vertical; 356 | -webkit-box-direction: normal; 357 | -ms-flex-direction: column; 358 | flex-direction: column; 359 | -webkit-box-pack: center; 360 | -ms-flex-pack: center; 361 | justify-content: center; 362 | -webkit-box-align: center; 363 | -ms-flex-align: center; 364 | align-items: center; 365 | gap: 8px; 366 | border-radius: 12px; 367 | border: 1px solid transparent; 368 | -webkit-transition: .2s ease-in-out; 369 | transition: .2s ease-in-out; 370 | -webkit-backdrop-filter: blur(0px); 371 | backdrop-filter: blur(0px); 372 | } 373 | 374 | .desktop .icons .icon:hover { 375 | background-color: #ffffff2c; 376 | cursor: pointer; 377 | -webkit-transform: scale(1.05); 378 | transform: scale(1.05); 379 | -webkit-backdrop-filter: blur(12px); 380 | backdrop-filter: blur(12px); 381 | } 382 | 383 | .desktop .icons .icon:hover * { 384 | opacity: 1; 385 | } 386 | 387 | .desktop .icons .icon * { 388 | -webkit-transition: .2s ease-in-out; 389 | transition: .2s ease-in-out; 390 | opacity: .6; 391 | } 392 | 393 | .desktop .icons .icon img { 394 | width: 50px; 395 | } 396 | 397 | .desktop .icons .icon h1 { 398 | color: white; 399 | font-size: 14px; 400 | font-weight: 300; 401 | } 402 | 403 | footer { 404 | width: 100%; 405 | position: absolute; 406 | left: 0; 407 | bottom: 32px; 408 | z-index: 10; 409 | } 410 | 411 | footer .icon-wrapper { 412 | width: -webkit-fit-content; 413 | width: -moz-fit-content; 414 | width: fit-content; 415 | height: 60px; 416 | border-radius: 12px; 417 | display: -webkit-box; 418 | display: -ms-flexbox; 419 | display: flex; 420 | -webkit-box-pack: center; 421 | -ms-flex-pack: center; 422 | justify-content: center; 423 | -webkit-box-align: center; 424 | -ms-flex-align: center; 425 | align-items: center; 426 | background-color: #ffffff3d; 427 | -webkit-transition: .2s ease-in-out; 428 | transition: .2s ease-in-out; 429 | padding-inline: 24px; 430 | margin: 0 auto; 431 | } 432 | 433 | footer .icon-wrapper:hover { 434 | background-color: #ffffff2c; 435 | -webkit-backdrop-filter: blur(12px); 436 | backdrop-filter: blur(12px); 437 | } 438 | 439 | footer .icon-wrapper img { 440 | height: 50px; 441 | -webkit-transition: .2s ease-in-out; 442 | transition: .2s ease-in-out; 443 | opacity: .6; 444 | } 445 | 446 | footer .icon-wrapper img:hover { 447 | height: 100px; 448 | -webkit-transform: translateY(-20px); 449 | transform: translateY(-20px); 450 | cursor: pointer; 451 | opacity: 1; 452 | } 453 | /*# sourceMappingURL=styles.css.map */ --------------------------------------------------------------------------------