this works now, ironed out shit and made stuff work

run.bash

@@ -1,4 +1,4 @@
-#!/bin/bash
+u!/bin/bash
 
 set -e  # exit if any command fails
 

run.bat

@@ -0,0 +1 @@
+python -m flask --app .\src\app.py run --host=0.0.0.0 --port=5000

src/static/index.css

@@ -82,10 +82,10 @@ header p {
     transform: scale(1.05);
 }
 html.dark .dark-mode-icon::before {
-    content: "☀️";
+    content: "☀︎️";
 }
 html:not(.dark) .dark-mode-icon::before {
-    content: "🌙";
+    content: "⏾";
 }
 .dark-mode-icon {
     display: inline-block;

src/static/problem.css

@@ -129,11 +129,11 @@ body {
 }
 
 html.dark .dark-mode-icon::before {
-    content: "☀️";
+    content: "☀";
 }
 
 html:not(.dark) .dark-mode-icon::before {
-    content: "🌙";
+    content: "⏾";
 }
 
 .dark-mode-icon {

src/static/script.js

@@ -8,6 +8,7 @@ document.addEventListener("DOMContentLoaded", () => {
   if (
     savedDarkMode === "true" ||
     (savedDarkMode === null &&
+      // detect if the user already has a dark mode enabled in the system settings ( works for all systems )
       window.matchMedia("(prefers-color-scheme: dark)").matches)
   ) {
     html.classList.add("dark");
@@ -31,7 +32,7 @@ document.addEventListener("DOMContentLoaded", () => {
   let allProblemItems = [];
   let filteredProblemItems = [];
   let currentPage = 1;
-  const itemsPerPage = 10;
+  const itemsPerPage = 5;
 
   // Initialize problem items
   function initializeProblemItems() {

src/templates/index.html

@@ -26,8 +26,7 @@
 #rankInfoBtn.active { transform: rotate(90deg); }
 
 /* Highlight top rank */
-.rank-1 { background-color: #f0fff0; }
-.rank-1 td:first-child { font-weight: bold; color: #2e7d32; }
+.rank-1 td:first-child { font-weight: bold; }
 .sort-asc::after { content: " ↑"; }
 .sort-desc::after { content: " ↓"; }
 </style>