Add Dark Theme, Random Problem Button, and UI Improvements

.github/workflows/jekyll-gh-pages.yml

@@ -0,0 +1,50 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: ["main"]
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build-and-deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "22.9.0"
+
+      - name: Install and Build
+        run: |
+          npm install --no-audit
+          npm run build --verbose
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+
+      - name: Upload Artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # This uploads the generated build output folder
+          path: ./dist
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.github/workflows/main.yml

@@ -8,22 +8,22 @@ jobs:
   main:
     runs-on: ubuntu-latest
     steps:
-    - name: Checkout
-      uses: actions/checkout@v4
+      - name: Checkout
+        uses: actions/checkout@v4
 
-    - name: Setup Node.js
-      uses: actions/setup-node@v4
-      with:
-        node-version: "22.9.0"
-
-    - name: Install and Build
-      run: |
-        npm install --no-audit
-        npm run build --verbose
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "22.9.0"
 
-    - name: Deploy
-      uses: JamesIves/github-pages-deploy-action@v4
-      with:
-        folder: dist
-        token: ${{ secrets.GITHUB_TOKEN }}
-        branch: gh-pages
+      - name: Install and Build
+        run: |
+          npm install --no-audit
+          npm run build --verbose
+
+      - name: Deploy
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          folder: dist
+          token: ${{ secrets.GITHUB_TOKEN }}
+          branch: gh-pages

src/App.vue

@@ -7,4 +7,14 @@ export default {
   name: "app",
 };
 </script>
-<style></style>
+<style>
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  background-color: var(--el-bg-color);
+  color: var(--el-text-color-primary);
+  transition: background-color 0.3s, color 0.3s;
+}
+</style>

src/main.ts

@@ -4,6 +4,7 @@ import router from "./router";
 import store from "./store";
 import elementPlus from "element-plus";
 import "element-plus/dist/index.css";
+import "element-plus/theme-chalk/dark/css-vars.css";
 import { createI18n } from "vue-i18n";
 import messages from "./locale";
 import * as ElementPlusIconsVue from "@element-plus/icons-vue";

src/views/ProblemRating.vue

@@ -2,6 +2,10 @@
   <div>
     <div class="head">
       <div class="language">
+        <el-button @click="toggleDark" circle style="margin-right: 20px">
+          <el-icon v-if="isDark"><Moon /></el-icon>
+          <el-icon v-else><Sunny /></el-icon>
+        </el-button>
         <el-dropdown style="margin-right: 5%" @command="switchLocale">
           <span class="el-dropdown-link">
             {{ $t("lang") }}
@@ -57,6 +61,9 @@
               @keyup.enter="query"
             />
           </el-form-item>
+          <el-form-item>
+            <el-button type="success" @click="goRandom">Random</el-button>
+          </el-form-item>
           <el-form-item>
             <el-button type="danger" @click="reset"
               >{{ $t("reset") }}
@@ -105,7 +112,14 @@
         <el-table-column prop="ProblemIndex" label="#" />
         <el-table-column :label="$t('rating')" prop="Rating" sortable="custom">
           <template #default="scope">
-            {{ formatNumber(scope.row.Rating) }}
+            <span
+              :style="{
+                color: getRatingColor(scope.row.Rating),
+                fontWeight: 'bold',
+              }"
+            >
+              {{ formatNumber(scope.row.Rating) }}
+            </span>
           </template>
         </el-table-column>
       </el-table>
@@ -154,6 +168,21 @@ interface SortInfo {
 
 let i18n = useI18n();
 let locale = i18n.locale;
+
+const isDark = ref(localStorage.getItem("isDark") === "true");
+function toggleDark() {
+  isDark.value = !isDark.value;
+  localStorage.setItem("isDark", String(isDark.value));
+  if (isDark.value) {
+    document.documentElement.classList.add("dark");
+  } else {
+    document.documentElement.classList.remove("dark");
+  }
+}
+if (isDark.value) {
+  document.documentElement.classList.add("dark");
+}
+
 let left = ref(null);
 let right = ref(null);
 let sortInfo = reactive({
@@ -273,6 +302,30 @@ function reset() {
   sortInfo.prop = "ID";
   query();
 }
+
+function goRandom() {
+  if (filterProblemSet.length === 0) {
+    ElMessage.warning("No problems available");
+    return;
+  }
+  const randomIndex = Math.floor(Math.random() * filterProblemSet.length);
+  const problem = filterProblemSet[randomIndex];
+  const targetUrl =
+    locale.value === "zh" ? problem.ProblemHrefZH : problem.ProblemHrefEN;
+  if (targetUrl) {
+    window.open(targetUrl, "_blank");
+  }
+}
+
+function getRatingColor(rating: number) {
+  if (rating < 1200) return "#a0a0a0";
+  if (rating < 1400) return "#43a047";
+  if (rating < 1600) return "#26c6da";
+  if (rating < 1900) return "#5c6bc0";
+  if (rating < 2100) return "#ab47bc";
+  if (rating < 2400) return "#ffb300";
+  return "#e53935";
+}
 </script>
 
 <style scoped>