404 page

faisalnjs · Sep 27, 2024 · 9f0f55e · 9f0f55e
1 parent f016ed1
commit 9f0f55e
Show file tree

Hide file tree

Showing 5 changed files with 248 additions and 8 deletions.
diff --git a/404.html b/404.html
@@ -0,0 +1,225 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" media="(prefers-color-scheme: dark)" />
+  <link rel="shortcut icon" href="favicon-dark.ico" type="image/x-icon" media="(prefers-color-scheme: light)" />
+  <title>404 - Virtual Checker</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,400;0,700;1,400;1,700&display=swap"
+    rel="stylesheet" />
+</head>
+
+<body class="col">
+  <div id="header">
+    <svg xmlns="http://www.w3.org/2000/svg" height="2.5em" viewBox="0 0 1041 732" fill="none"
+      class="virtual-checker-logo">
+      <path
+        d="M1001.56 250.595C983.616 254.368 892.908 369.961 882.983 372.138C873.058 374.314 843.39 317.676 827.439 319.483C811.489 321.291 784.543 340.121 788.414 358.53C792.284 376.94 862.808 450.073 882.983 450.241C903.158 450.409 1037.91 305.154 1040.6 289.631C1043.28 274.109 1019.51 246.823 1001.56 250.595Z"
+        fill="currentColor" />
+      <path
+        d="M189.838 59.888C202.279 55.741 210.44 56.363 217.578 59.931C224.715 63.5 230.493 70.81 235.656 86.298C251.225 133.005 278.027 213.412 299.189 276.896C304.344 292.362 312.472 296.957 322.252 296.957C332.033 296.957 339.718 293.692 345.627 275.965C360.443 231.517 378.763 176.556 396.583 123.097C430.426 21.567 472.963 0 567.37 0C702.785 0 897.037 0 984.213 0C1007.19 0 1013.22 4.649 1018.88 12.496C1024.53 20.342 1025.91 30.927 1020.96 45.757C1003.43 98.372 978.676 172.62 965.135 213.242C958.535 233.041 942.92 244.474 922.051 244.44C867.547 244.351 734.987 244.117 660.22 243.996C626.461 243.941 609.299 256.289 598.623 288.316C585.437 327.874 567.7 381.085 553.255 424.42C547.69 441.115 549.36 457.81 557.708 469.392C566.057 480.975 578.691 487.839 596.163 487.839C665.057 487.839 769.309 487.839 828.841 487.839C841.883 487.839 850.611 492.488 856.266 500.334C861.921 508.18 863.336 518.639 859.639 529.731C842.137 582.235 816.643 658.717 803.139 699.23C797.202 717.039 778.155 731.758 759.383 731.758C688.339 731.758 487.826 731.758 340.593 731.758C241.323 731.758 180.603 692.479 149.211 598.303C101.094 453.954 30.348 241.716 3.64795 161.614C-1.50905 146.144 -0.672047 138.629 2.89595 131.492C6.46495 124.354 10.977 119.509 28.36 113.714C72.841 98.887 145.357 74.715 189.838 59.888Z"
+        fill="currentColor" />
+    </svg>
+    <svg xmlns="http://www.w3.org/2000/svg" height="2.5rem" viewBox="0 0 939.26 845.57" id="atreides-logo">
+      <path fill="currentColor"
+        d="M939.26 0v160.43L540.42 559.27v215.51l-70.79 70.79-70.79-70.79V559.27L0 160.43V0l469.63 470.64L939.26 0z" />
+      <path fill="currentColor"
+        d="M372.56 569.37v179.14l-97.74-97.75v-82.63L58.83 352.14v-96.51l313.73 313.74zM547.49 358.93l-77.28 77.28-77.77-77.77 77.19-77.19h69.24l5.68 5.68v21.9l-7.34-7.34-23.58 23.58 33.86 33.86ZM566.7 569.37v179.14l97.74-97.75v-82.63l215.99-215.99v-96.51L566.7 569.37z" />
+    </svg>
+    <svg xmlns="http://www.w3.org/2000/svg" height="2.5rem" viewBox="0 0 1024 806.99" id="virtual-checker-butterfly">
+      <path fill="currentColor"
+        d="M363.41 378.38s-41.8-226.57-225.55-224.82c-221.29 2.11-134.61 298.78-27.42 425.27 107.19 126.48 302.27 274.41 420.18 214.38 117.91-60.03 87.28-309.52 68.6-452.34-14.67-112.11-29.57-188.01-135.93-182.37-134.65 7.13-99.88 219.89-99.88 219.89Z" />
+      <path fill="currentColor"
+        d="M862.92 0C673.83.59 599.44 155.06 616.9 263.97c19.52 121.75 29.65 162.85 28.07 274.12-1.7 120.31-17.36 201.71 55.47 224.8 81.26 25.76 143.18 1.37 202.14-72.59 58.95-73.96 62.17-119.32 33.23-165.07-28.94-45.75-115.22 2.5-124.34-83.31-8.58-80.69-24.56-154.76 26.8-200.74 47.06-42.14 48.24 57.88 102.9 56.81C1046.28 295.93 1081.58-.68 862.92 0ZM424.16 102.01c0 22.1-16.64 36.8-37.16 36.8s-37.16-14.7-37.16-36.8S366.48 64.49 387 64.49s37.16 15.42 37.16 37.52ZM556.06 70.92c0 24.96-15.06 45.2-40.02 45.2s-40.91-20.24-40.91-45.2 15.5-42.7 40.46-42.7 40.46 17.73 40.46 42.7Z" />
+    </svg>
+    <div class="info">
+      <h1>Virtual Checker</h1>
+    </div>
+  </div>
+  <div id="checker">
+    <h1>404 Not Found</h1>
+  </div>
+  <!-- Controls -->
+  <div id="controls-container" class="pill">
+    <button class="icon" data-modal-view="settings">
+      <i class="bi bi-gear"></i>
+    </button>
+    <button class="pill" data-modal-view="settings/code">
+      <span class="code">000</span>
+    </button>
+    <button class="icon" data-modal-view="history">
+      <i class="bi bi-clock-history"></i>
+    </button>
+    <!-- <button class="icon" data-modal-view="clear-data-fix">
+        <i class="bi bi-exclamation-triangle"></i>
+      </button> -->
+  </div>
+  <!-- Symbols -->
+  <dialog data-modal-page="symbols" data-page-title="Symbols">
+    <div id="symbols-grid"></div>
+  </dialog>
+  <!-- History -->
+  <dialog data-modal-page="history" data-page-title="History">
+    <h2 id="history-date"></h2>
+    <div class="col" id="history-feed"></div>
+    <div id="history-navigation" class="row center">
+      <button class="icon" id="history-first">
+        <i class="bi bi-chevron-double-left"></i>
+      </button>
+      <button class="icon" id="history-backward">
+        <i class="bi bi-chevron-left"></i>
+      </button>
+      <button class="icon" id="history-forward">
+        <i class="bi bi-chevron-right"></i>
+      </button>
+      <button class="icon" id="history-last">
+        <i class="bi bi-chevron-double-right"></i>
+      </button>
+    </div>
+  </dialog>
+  <!-- Settings -->
+  <dialog data-modal-page="settings" data-page-title="Settings">
+    <p id="version-string"><span class="version"></span></p>
+    <button data-modal-view="settings/code">Seat Code</button>
+    <button data-modal-view="settings/theme">Theme</button>
+    <button data-modal-view="settings/keybinds">Keyboard Shortcuts</button>
+    <button data-modal-view="settings/reset">Reset</button>
+    <div class="row center">
+      <a href="https://dangoweb.com/?from=virtual-checker" class="icon"><i class="bi bi-cloud-fill"></i></a>
+      <a href="https://github.com/faisalnjs/virtual-checker" class="icon"><i class="bi bi-github"></i></a>
+    </div>
+    <div data-modal-page="code" data-page-title="Seat Code">
+      <input type="text" inputmode="numeric" placeholder="000" maxlength="3" id="code-input" />
+      <button data-modal-view="settings/code/help">Need help?</button>
+      <div data-modal-actions>
+        <button id="save-code-button">Save</button>
+      </div>
+      <div data-modal-page="help" data-page-title="Seat Code Finder">
+        <label for="period-input">Period</label>
+        <select id="period-input">
+          <option value="1">1</option>
+          <option value="2">2</option>
+          <option value="3">3</option>
+          <option value="4">4</option>
+          <option value="5">5</option>
+          <option value="6">6</option>
+          <option value="7">7</option>
+          <option value="8">8</option>
+          <option value="9">9</option>
+        </select>
+        <p>Where do you sit?</p>
+        <p class="hint">Screen</p>
+        <div id="seat-grid"></div>
+      </div>
+    </div>
+    <div data-modal-page="theme" data-page-title="Theme">
+      <div id="theme-preview">
+        <h1 class="text-placeholder">000</h1>
+        <p class="text-placeholder">Question</p>
+        <div class="control-placeholder"></div>
+        <p class="text-placeholder">Answer</p>
+        <div class="control-placeholder"></div>
+        <div class="control-placeholder pill"></div>
+      </div>
+      <div id="theme-selector">
+        <button data-modal-view="settings/theme/editor">Custom</button>
+      </div>
+      <div data-modal-actions>
+        <button id="theme-reset">Reset</button>
+        <button id="theme-apply">Apply</button>
+      </div>
+      <div data-modal-page="editor" data-page-title="Custom Theme">
+        <div id="editor-preview">
+          <h1 class="text-placeholder">000</h1>
+          <p class="text-placeholder">Question</p>
+          <div class="control-placeholder"></div>
+          <p class="text-placeholder">Answer</p>
+          <div class="control-placeholder"></div>
+          <div class="control-placeholder pill"></div>
+        </div>
+        <div id="theme-editor">
+          <label>
+            Color Scheme
+            <select name="color-scheme">
+              <option value="light">Light</option>
+              <option value="dark">Dark</option>
+            </select>
+          </label>
+          <label>
+            Text
+            <div data-color-input="text-color"></div>
+          </label>
+          <label>
+            Background
+            <div data-color-input="background-color"></div>
+          </label>
+          <label>
+            Surface
+            <div data-color-input="surface-color"></div>
+          </label>
+          <label>
+            Accent
+            <div data-color-input="accent-color"></div>
+          </label>
+          <label>
+            Accent Text
+            <div data-color-input="accent-text-color"></div>
+          </label>
+          <label>
+            Error
+            <div data-color-input="error-color"></div>
+          </label>
+        </div>
+        <label>
+          Theme Code
+          <input type="text" id="theme-code" />
+        </label>
+        <p>
+          <i class="bi bi-exclamation-circle"></i> Use <kbd>Shift</kbd> + <kbd>R</kbd> to reset
+          the theme if you can't get back here
+        </p>
+        <div data-modal-actions>
+          <button id="editor-reset">Reset</button>
+          <button id="editor-apply">Apply</button>
+        </div>
+      </div>
+    </div>
+    <div data-modal-page="keybinds" data-page-title="Keyboard Shortcuts">
+      <p><kbd>Ctrl</kbd> + <kbd>Enter</kbd> Submit click</p>
+      <p><kbd>Alt</kbd> + <kbd>1-9</kbd> Insert nth symbol</p>
+      <p><kbd>Ctrl</kbd> + <kbd>/</kbd> Open Keyboard Shortcuts</p>
+      <p><kbd>Ctrl</kbd> + <kbd>,</kbd> Open Settings</p>
+      <p><kbd>Ctrl</kbd> + <kbd>.</kbd> Open History</p>
+      <p><kbd>Shift</kbd> + <kbd>R</kbd> Reset theme</p>
+    </div>
+    <div data-modal-page="reset" data-page-title="Reset">
+      <button data-reset="history">Clear Responses</button>
+      <button data-reset="all">Reset All Settings</button>
+    </div>
+  </dialog>
+  <dialog data-modal-page="clear-data-fix" data-page-title="Settings May Not Save">
+    <p>
+      VSCHSD administration enforces a setting which clears site settings when you close your
+      browser
+    </p>
+    <p>Fix this by adding an exception for this site:</p>
+    <ol>
+      <li>
+        In a new tab, open
+        <code>edge://settings/clearBrowsingDataOnClose</code>
+      </li>
+      <li>Click "Add" under "Cookies and other site data"</li>
+      <li>
+        Add <code><span class="hostname"></span></code>
+      </li>
+    </ol>
+  </dialog>
+  <script src="src/main.js" type="module"></script>
+</body>
+
+</html>
diff --git a/src/checker/admin.js b/src/checker/admin.js
@@ -61,7 +61,7 @@ async function init() {
   document.querySelector('.course-reorder').style.display = 'none';
   document.querySelectorAll('[data-remove-segment-input]').forEach(a => a.removeEventListener('click', removeSegment));
   document.querySelectorAll('[data-remove-segment-input]').forEach(a => a.addEventListener('click', removeSegment));
-  document.getElementById("period-input").value = courses.find(c => c.id == segments[0].course).id;
+  document.getElementById("period-input").value = courses.find(c => c.id == segments.sort((a, b) => a.course - b.course)[0].course).id;
   updateSegments();
 }
 
@@ -273,7 +273,7 @@ document.getElementById("save-button").addEventListener("click", (e) => {
     e.target.disabled = false;
   }, 3000);
 });
-    
+
 function handleDragStart(e) {
   draggedItem = this.parentNode;
   e.dataTransfer.effectAllowed = 'move';

diff --git a/src/checker/checker.js b/src/checker/checker.js
@@ -27,7 +27,7 @@ let multipleChoice = null;
 let historyIndex = 0;
 
 // Initialization
-// Initialization
+  if (document.getElementById("course-input")) {
 {
   // Get URL parameters
   const params = new URLSearchParams(window.location.search);
@@ -52,7 +52,7 @@ let historyIndex = 0;
   //   storage.set("created", Date.now());
   // }
   // Focus segment input
-  segmentInput.focus();
+  if (segmentInput) segmentInput.focus();
   // Set default answer mode
   answerMode("input");
   // Populate seat code finder grid
@@ -181,6 +181,7 @@ mf.addEventListener("keydown", (e) => {
     e.preventDefault();
   }
 });
+  }
 
 // Reset inputs to default state
 function resetInputs() {
@@ -295,7 +296,7 @@ async function updateCode() {
       element.innerHTML = code;
     });
     document.title = `Virtual Checker (${code})`;
-    document.getElementById("course-input").value = getCourse(code) || "Unknown Course";
+    if (document.getElementById("course-input")) document.getElementById("course-input").value = getCourse(code) || "Unknown Course";
     try {
       const segmentsResponse = await fetch(`${domain}/segments?course=${Number(code.slice(0, 1)) - 1}`, {
         method: "GET",
@@ -318,7 +319,7 @@ async function updateCode() {
         headers: { "Content-Type": "application/json" },
       });
       questionsArray = await questionsResponse.json();
-      await updateQuestion();
+      if (document.querySelector('#checker .images').innerHTML === '') await updateQuestion();
     } catch (error) {
       console.error("Failed to fetch data:", error);
     }
@@ -414,10 +415,12 @@ document.querySelectorAll("[data-multiple-choice]").forEach((button) => {
 });
 
 // Hide multiple choice card
-document.getElementById("remove-choice-button").addEventListener("click", () => {
+if (document.getElementById("remove-choice-button")) {
+  document.getElementById("remove-choice-button").addEventListener("click", () => {
   answerMode(ui.getButtonSelectValue(document.getElementById("answer-mode-selector")));
   multipleChoice = null;
 });
+}
 
 // Set answer mode
 function answerMode(mode) {
@@ -644,6 +647,7 @@ if (storage.get("developer")) {
 const answerLabel = document.querySelector(`label[for="answer-input"]`);
 
 // Select answer mode
+if (document.getElementById("answer-mode-selector")) {
 document.getElementById("answer-mode-selector").addEventListener("input", (e) => {
   const mode = e.detail;
   answerMode(mode);
@@ -655,10 +659,12 @@ document.getElementById("answer-mode-selector").addEventListener("input", (e) =>
     answerLabel.setAttribute("for", "set-input");
   }
 });
+}
 
 setInputs = document.querySelectorAll('[data-set-input]');
 
 // Add set input
+if (document.querySelector("[data-add-set-input]")) {
 document.querySelector("[data-add-set-input]").addEventListener("click", () => {
   setInputs = document.querySelectorAll('[data-set-input]');
   let highestDataElement = null;
@@ -685,8 +691,10 @@ document.querySelector("[data-add-set-input]").addEventListener("click", () => {
     document.querySelector("[data-remove-set-input]").disabled = false;
   }
 });
+}
 
 // Remove set input
+if (document.querySelector("[data-remove-set-input]")) {
 document.querySelector("[data-remove-set-input]").addEventListener("click", (e) => {
   setInputs = document.querySelectorAll('[data-set-input]');
   if (setInputs.length > 1) {
@@ -699,3 +707,4 @@ document.querySelector("[data-remove-set-input]").addEventListener("click", (e)
   if (setInputs.length === 2) e.target.disabled = true;
   document.querySelector('[data-answer-mode="set"] .button-grid').style.flexWrap = (setInputs.length < 12) ? 'nowrap' : 'wrap';
 });
+}
diff --git a/src/design.css b/src/design.css
@@ -128,6 +128,7 @@ select {
 input:disabled,
 select:disabled {
   opacity: 0.5;
+  cursor: not-allowed;
 }
 
 .drag {
@@ -375,7 +376,7 @@ div.ML__keyboard {
   gap: 5px;
 }
 
-img {
+.checker img {
   border-radius: 5px;
   border: 5px solid var(--surface-color);
   background: url(<path-to-image>) lightgray 50% / cover no-repeat;
@@ -441,4 +442,8 @@ button[square] {
 
 .fit {
   width: fit-content;
+}
+
+#checker:not(:has(input)) {
+  align-items: center;
 }
diff --git a/vite.config.js b/vite.config.js
@@ -2,6 +2,7 @@ import webfontDownload from "vite-plugin-webfont-dl";
 import version from "vite-plugin-package-version";
 
 export default {
+  appType: 'mpa',
   plugins: [webfontDownload(), version()],
   build: {
     rollupOptions: {