initial commit

Original date of the code: 17 Jul 2023
lower-quality · Aug 30, 2024 · 8f63a63 · 8f63a63
commit 8f63a63
Show file tree

Hide file tree

Showing 10 changed files with 236 additions and 0 deletions.
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
@@ -0,0 +1,8 @@
+{
+   "help": {
+      "message": "GD Colon's Next Video tracker"
+   },
+   "pls": {
+      "message": "Monitor the live progress of GD Colon's new video!!1"
+   }
+}
diff --git a/_locales/pl/messages.json b/_locales/pl/messages.json
@@ -0,0 +1,8 @@
+{
+   "help": {
+      "message": "Postęp nowego filmu GD Colon"
+   },
+   "pls": {
+      "message": "Śledź postępy nowego filmiu GD Colon na żywo!!1 (nie po polsku, przepraszam)"
+   }
+}
diff --git a/bigicon.png b/bigicon.png
diff --git a/icon.png b/icon.png
diff --git a/index.html b/index.html
@@ -0,0 +1,161 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <link href="./static/lato.css" type="text/css" rel="stylesheet">
+    <style>
+        @font-face {font-family: Segoe UI Black; src: url('./static/seguibl.ttf')}
+
+        body {
+            margin: 7px;
+            background-image: url('./static/squares.jpg');
+            background-size: cover;
+            background-attachment: fixed;
+            --colon-orange: #ff8000;
+            --barWidth: 600px;
+            width: 500px;
+        }
+
+        p {
+            color: white;
+            font-family: Lato, Arial;
+            font-size: 22px;
+            margin: 8px 0px 0px 0px;
+        }
+
+        h1, h2 {
+            color: white;
+            font-family: "Segoe UI Black", "Arial Black", "Arial";
+            font-weight: 1000;
+            font-size: 48px;
+            -webkit-text-stroke-width: 0.04em;
+            -webkit-text-stroke-color: black;
+            paint-order: stroke fill;
+            text-shadow: 0.02em 0.03em 0.03em rgba(0, 0, 0, 0.4);
+        }
+
+        h2 {
+            font-size: 32px;
+            margin: 0px 0px;
+        }
+
+        a {
+            color: var(--colon-orange) !important;
+            text-decoration: none;
+            -webkit-text-stroke-color: black;
+        }
+
+        .centerflex {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+        }
+
+        .barBox {
+            width: var(--barWidth);
+            text-align: left;
+            margin-bottom: 42px;
+        }
+
+        .progressBar {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            outline: 3px solid white;
+            border-radius: 8px;
+            filter: drop-shadow(5px 5px 4px rgba(0, 0, 0, 0.4));
+            margin-top: 12px;
+            background-color: rgba(0, 0, 0, 0.5);
+            position: relative;
+            height: 50px;
+        }
+
+        .barProgress {
+            position: absolute;
+            background-color: var(--colon-orange);
+            height: 100%;
+            z-index: -1;
+            left: 0px;
+        }
+
+        .barProgress.inProgress {
+            background-color: red;
+            width: 100%;
+            opacity: 15%;
+        }
+
+        .progressBar h2 {
+            text-align: center;
+        }
+
+        .progressBar h2.inProgress {
+            margin-bottom: 6px;
+        }
+
+        cy { color: yellow }
+        cg { color: lime }
+        ca { color: aqua }
+        cr { color: red }
+
+        @media screen and (max-width: 1000px) {
+            h1 { font-size: 38px; }
+            h2 { font-size: 28px; }
+            .barBox { width: 90%; max-width: var(--barWidth); }
+        }
+    </style>
+</head>
+<body>
+    <div class="centerflex">
+        <div id="main" style="display: none" class="centerflex">
+            <div class="barBox" section="scripting">
+                <h2>Scripting</h2>
+                <div class="progressBar">
+                    <div class="barProgress"></div>
+                    <h2></h2>
+                </div>
+            </div>
+
+            <div class="barBox" section="recording">
+                <h2>Recording</h2>
+                <div class="progressBar">
+                    <div class="barProgress"></div>
+                    <h2></h2>
+                </div>
+            </div>
+
+            <div class="barBox" section="editing">
+                <h2>Editing</h2>
+                <div class="progressBar">
+                    <div class="barProgress"></div>
+                    <h2></h2>
+                </div>
+            </div>
+
+            <div class="barBox" id="infoBox">
+                <h2>Info</h2>
+                <p id="infoText">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat, aliquam maxime? Praesentium non, nesciunt aspernatur natus magni facere molestias modi reprehenderit vitae quo quis libero nihil perspiciatis harum maiores quas.</p>
+            </div>
+
+            <div class="barBox">
+                <h2>Last Updated</h2>
+                <p id="lastUpdated">2023</p>
+            </div>
+        </div>
+
+        <hid id="noVid" style="display: none">
+            <h2>I am not working on a video right now.</h2>
+            <p id="extraInfo">Check back later!</p>
+        </hid>
+
+        <div id="loading">
+            <h2>Loading...</h2>
+        </div>
+
+    </div>
+</body>
+<script src="./script.js"></script>
+</html>
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,17 @@
+{
+   "action": {
+      "default_icon": "icon.png",
+      "default_popup": "index.html"
+   },
+   "author": "KwiatekMiki",
+   "default_locale": "en",
+   "name": "__MSG_help__",
+   "description": "__MSG_pls__",
+   "icons": {
+      "16": "icon.png",
+      "32": "icon.png",
+      "48": "bigicon.png"
+   },
+   "manifest_version": 3,
+   "version": "4.2"
+}
diff --git a/script.js b/script.js
@@ -0,0 +1,40 @@
+fetch("https://gdcolon.com/nextvideo.json").then(res => res.json()).then(data => {
+
+    if (!data.active) { // no video rn
+        document.getElementById("noVid").style.removeProperty("display")
+        if (data.info) document.getElementById("extraInfo").innerHTML = data.info
+     }
+
+    else {
+        document.getElementById("main").style.removeProperty("display")
+        addPercent("scripting", data.scripting)
+        addPercent("recording", data.recording)
+        addPercent("editing", data.editing)
+
+        if (data.info) document.getElementById("infoText").innerHTML = data.info
+        else document.getElementById("infoBox").style.display = "none"
+
+        let dateStr = new Date(data.updated).toLocaleString([], { dateStyle: "full", timeStyle: "short" })
+        let timeZone = new Date().toLocaleDateString(undefined, {day:'2-digit', timeZoneName: 'short' }).substring(4)
+        document.getElementById("lastUpdated").textContent = `${dateStr} (${timeZone})`
+    }
+
+    document.getElementById("loading").style.display = "none"
+})
+
+function addPercent(key, val) {
+    let box = `.barBox[section="${key}"]`
+    if (val == "hidden") return document.querySelector(box).style.display = "none"
+
+    let text = document.querySelector(`${box} .progressBar h2`)
+    let bar = document.querySelector(`${box} .barProgress`)
+
+    if (val == "wip") {
+        text.classList.add("inProgress")
+        bar.classList.add("inProgress")
+        return text.textContent = "In progress"
+    }
+
+    text.textContent = Math.floor(val) + "%"
+    bar.style.width = (val + "%")
+}
diff --git a/static/lato.css b/static/lato.css
@@ -0,0 +1,2 @@
+@import url('/static/lato.ttf');
+/* i don't think this can be done inline?? */
diff --git a/static/lato.ttf b/static/lato.ttf
diff --git a/static/squares.jpg b/static/squares.jpg
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		@import url('/static/lato.ttf');
		/* i don't think this can be done inline?? */