AriaDashboard: introduce Steam Spring Sale 2024 variant

Accessible at https://leewp14.github.io/AriaDashboard/alt/steam-springsale2024/
leewp14 · Mar 16, 2024 · 698704c · 698704c
1 parent c974077
commit 698704c
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 0 deletions.
diff --git a/alt/steam-springsale2024/index.html b/alt/steam-springsale2024/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="max-width max-height">
+
+    <head>
+        <title>AriaDashboard</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta charset="UTF-8">
+
+        <link rel="stylesheet" href="./../../src/css/base.css">
+        <link rel="stylesheet" href="./../../src/css/fonts/font.css">
+        <link rel="stylesheet" href="./src/css/index.css">
+
+        <script src="./src/js/index.js"></script>
+        <script src="./../../src/js/components/clock.js"></script>
+        <script src="./../../src/js/components/fullscreen.js"></script>
+
+    </head>
+
+    <body id="hero-parent" onload="earlyInit()">
+        <video id="bg-loop" src="./src/media/webm_page_bg_english.webm" autoplay muted loop class="no-cursor"></video>
+        <div id="clock-parent" class="clock no-cursor">
+            <div id="clock-time-full">
+                Tue, 16 Mar 2023 19:52:45 GMT
+            </div>
+            <div id="clock-time">
+                10:45
+            </div>
+        </div>
+        <footer class="no-cursor">
+            neko.casa, 2024
+            <!-- <a href="https://github.com/leewp14/AriaDashboard">neko.casa</a>, 2024 -->
+        </footer>
+    </body>
+
+</html>
diff --git a/alt/steam-springsale2024/src/css/index.css b/alt/steam-springsale2024/src/css/index.css
@@ -0,0 +1,54 @@
+
+:root {
+    --var-bg-shadow: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.2));
+    --var-bg-url: url('./../media/natsuki-nakagawa.webp');
+}
+
+body {
+    /* background: url('./../media/sale_spring2024_tiled_bg.png'); */
+    background-image: var(--var-bg-shadow), var(--var-bg-url);
+    background-size: cover;
+    background-position: center bottom;
+}
+
+video#bg-loop {
+    width: 90%;
+    margin: auto;
+    z-index: -1;
+    display: block;
+    opacity: .9;
+}
+
+div#clock-parent {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: wheat;
+    text-shadow: 0 0 5rem #9fd5cd;
+    opacity: .8;
+
+    padding-top: 3rem;
+}
+
+.clock #clock-time-full{
+    font-size: 1rem;
+    font-family: 'IBM Plex Mono Thin', 'IBM Plex Mono';
+    font-weight: 100;
+}
+
+.clock #clock-time{
+    font-size: 5rem;
+    font-family: 'IBM Plex Sans Thin', 'IBM Plex Sans';
+    font-weight: 100;
+}
+
+footer {
+    position: fixed;
+    bottom: 0;
+    text-align: center;
+    left: 0;
+    right: 0;
+    padding: .8rem 0;
+    opacity: .6;
+}
diff --git a/alt/steam-springsale2024/src/js/index.js b/alt/steam-springsale2024/src/js/index.js
@@ -0,0 +1,5 @@
+
+function earlyInit(){
+    clockService();
+    fullScreenService();
+}
diff --git a/alt/steam-springsale2024/src/media/natsuki-nakagawa.webp b/alt/steam-springsale2024/src/media/natsuki-nakagawa.webp
diff --git a/alt/steam-springsale2024/src/media/sale_spring2024_tiled_bg.png b/alt/steam-springsale2024/src/media/sale_spring2024_tiled_bg.png
diff --git a/alt/steam-springsale2024/src/media/webm_page_bg_english.webm b/alt/steam-springsale2024/src/media/webm_page_bg_english.webm