yippie

noyamirai · Aug 11, 2024 · a01a0e2 · a01a0e2
1 parent 3bdb2bf
commit a01a0e2
Show file tree

Hide file tree

Showing 10 changed files with 461 additions and 0 deletions.
diff --git a/backdrop.jpg b/backdrop.jpg
diff --git a/background-image.jpg b/background-image.jpg
diff --git a/favicon.ico b/favicon.ico
diff --git a/glass-bottom-desktop.png b/glass-bottom-desktop.png
diff --git a/glass-bottom-mobile.png b/glass-bottom-mobile.png
diff --git a/glass-top-desktop.png b/glass-top-desktop.png
diff --git a/glass-top-mobile.png b/glass-top-mobile.png
diff --git a/index.html b/index.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
+
+    <link rel="stylesheet" href="reset.css">
+    <link rel="stylesheet" href="style.css">
+
+    <title>Arcane S2 Countdown</title>
+
+    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
+</head>
+<body>
+
+    <div class="glasses">
+        <div class="glass__item glass__item--top">
+            <div class="image-container">
+            </div>
+
+            <div class="blurred-background"></div>
+        </div>
+
+        <div class="glass__item glass__item--bottom">
+            <div class="image-container">
+            </div>
+
+            <div class="blurred-background"></div>
+        </div>
+    </div>
+
+    <main>
+        <div class="content">
+
+            <pre>
+ █████╗ ██████╗  ██████╗ █████╗ ███╗   ██╗███████╗    ███████╗██████╗ 
+██╔══██╗██╔══██╗██╔════╝██╔══██╗████╗  ██║██╔════╝    ██╔════╝╚════██╗
+███████║██████╔╝██║     ███████║██╔██╗ ██║█████╗      ███████╗ █████╔╝
+██╔══██║██╔══██╗██║     ██╔══██║██║╚██╗██║██╔══╝      ╚════██║██╔═══╝ 
+██║  ██║██║  ██║╚██████╗██║  ██║██║ ╚████║███████╗    ███████║███████╗
+╚═╝  ╚═╝╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝╚═╝  ╚═══╝╚══════╝    ╚══════╝╚══════╝
+            </pre>
+
+            <div class="container">
+                <p id="progressBar" class="progress-bar"></p>
+                <p id="progressText" class="progress-text"></p>
+            </div>
+        </div>
+
+    </main>
+
+    <!-- SOURCE: https:www.https://www.arcane.com/en-us/ -->
+    <svg>
+        <clipPath id="hero-glass-path-top" clipPathUnits="objectBoundingBox">
+            <path
+                d="M0,1 l0.02,-0.108 L0.044,0.759 l-0.007,-0.018,0,-0.055 L0.044,0.598 v-0.037 l-0.013,-0.013 L0.034,0.536 l0.037,-0.139,0.02,0.049,0.014,0.023,0.003,-0.058,0.002,-0.073,-0.005,-0.019,0.061,-0.11,0.043,0.119,0.036,-0.048,0.006,-0.029,0.017,-0.006,0.016,-0.014 s0.1,0.007,0.11,0.007 s0.074,0.022,0.074,0.022 l0.016,0.067,0.056,-0.02,0.044,-0.021,0.005,-0.028,0.017,-0.01,0.008,-0.054,0.018,0.003,-0.002,0.064,0.049,0.001,0.02,-0.003,0.041,0.105,0.039,0.067 s0.014,-0.038,0.02,-0.051 c0.005,-0.013,0.016,-0.03,0.016,-0.03 h0.004 l0.013,-0.04,0.004,0.001,0.013,-0.052 s0.006,-0.009,0.009,-0.009 c0.003,0,0.025,-0.005,0.025,-0.005 l0.031,-0.017 s0.002,-0.011,0.003,-0.014 c0.001,-0.002,0.004,-0.006,0.004,-0.006 l0.024,0.078,0.012,-0.017,0.001,0.011,-0.006,0.017,0.005,0.053 s0.012,0.011,0.023,0.034 c0.011,0.023,0.018,0.037,0.018,0.037 L1,0 H0 v1">
+            </path>
+        </clipPath>
+
+        <clipPath id="hero-glass-path-bottom" clipPathUnits="objectBoundingBox">
+            <path
+                d="M0,0.55 l0.031,-0.07,0.03,-0.057,0.022,-0.008,0.029,-0.028,0.019,-0.03,-0.012,0.058,-0.013,0.051,0.004,0.001,0.035,0.11,0.003,-0.061 h0.004 l0.003,0.014,0.011,-0.011,0.014,0.05,0.029,0.02,0.039,0.038,0.004,-0.006,0.009,0.021,0.05,-0.087 v-0.014 l0.017,0.024,0.017,-0.093,0.009,0.068,0.012,0.061,0.031,0.014,0.067,0.012,0.006,-0.027,0.015,0.006,0.022,-0.058,0.015,0.022 s0.019,0.009,0.027,0.006 c0.008,-0.003,0.025,-0.024,0.025,-0.024 l0.012,0.118,0.032,-0.027,0.006,-0.001,0.012,-0.072 s0.077,-0.013,0.1,-0.022 s0.125,-0.039,0.125,-0.039 l0.025,0.089,0.021,-0.015,0.002,0.004 v-0.03 l-0.005,-0.061,0.034,0.113 v-0.036 l0.028,-0.119,-0.006,-0.085,0.006,-0.015,-0.021,-0.079 s0.007,-0.007,0.012,-0.034 S1,0,1,0 v1 H0 V0.55">
+            </path>
+        </clipPath>
+    </svg>
+
+</body>
+
+<script>
+    // Define the target date as November 1st of the current year
+    const targetDate = new Date(new Date().getFullYear(), 10, 1); // November is month 10
+
+    // Define the start date as January 1st of the current year
+    const startDate = new Date(new Date().getFullYear(), 0, 1); // January is month 0
+
+    // Get the current date
+    const currentDate = new Date();
+
+    // Calculate the total time difference and the elapsed time
+    const totalTime = targetDate - startDate;
+    const elapsedTime = currentDate - startDate;
+
+    // Calculate progress as a percentage
+    const progressPercentage = Math.min(100, (elapsedTime / totalTime) * 100);
+
+    // ASCII progress bar
+    const totalBlocks = 35; // Length of the progress bar
+    const filledBlocks = Math.round((progressPercentage / 100) * totalBlocks);
+    const emptyBlocks = totalBlocks - filledBlocks;
+
+    // Create the progress bar with spans
+    let progressBarHTML = '';
+
+    // Add filled blocks
+    for (let i = 0; i < filledBlocks; i++) {
+        progressBarHTML += `<span class="filled">▓</span>`;
+    }
+
+    // Add empty blocks
+    for (let i = 0; i < emptyBlocks; i++) {
+        // progressBarHTML += `<span class="empty">▓</span>`;
+        progressBarHTML += `<span class="empty">░</span>`;
+    }
+
+    // remaining percentage no decimals
+    document.getElementById('progressText').textContent = `Remaining: ${100 - progressPercentage.toFixed(0)}%`;
+    document.getElementById('progressBar').innerHTML = progressBarHTML;
+</script>
+
+</html>
diff --git a/reset.css b/reset.css
@@ -0,0 +1,160 @@
+/* =============================================================================
+  #RESET
+============================================================================= */
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+a,
+abbr,
+acronym,
+address,
+applet,
+article,
+aside,
+audio,
+b,
+big,
+blockquote,
+body,
+canvas,
+caption,
+center,
+cite,
+code,
+dd,
+del,
+details,
+dfn,
+div,
+dl,
+dt,
+em,
+embed,
+fieldset,
+figcaption,
+figure,
+footer,
+form,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+header,
+hgroup,
+html,
+i,
+iframe,
+img,
+ins,
+kbd,
+label,
+legend,
+li,
+mark,
+menu,
+nav,
+object,
+ol,
+output,
+p,
+pre,
+q,
+ruby,
+s,
+samp,
+section,
+small,
+span,
+strike,
+strong,
+sub,
+summary,
+sup,
+table,
+tbody,
+td,
+tfoot,
+th,
+thead,
+time,
+tr,
+tt,
+u,
+ul,
+var,
+video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+    display: block;
+}
+
+body {
+    line-height: 1;
+}
+
+ol,
+ul {
+    list-style: none;
+}
+
+blockquote,
+q {
+    quotes: none;
+}
+
+blockquote:after,
+blockquote:before,
+q:after,
+q:before {
+    content: "";
+    content: none;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+    margin: 0 0 1em;
+}
+
+/* =============================================================================
+  #TOOLS
+============================================================================= */
+html {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+    -webkit-box-sizing: inherit;
+    -moz-box-sizing: inherit;
+    box-sizing: inherit;
+}
+
+/* =============================================================================
+  #GENERAL
+============================================================================= */
+* {
+    font-family: inherit;
+    line-height: inherit;
+    color: inherit;
+}