style: new year theme

2026-04-08 20:19:06 +03:00 · 2025-12-11 16:56:55 +03:00
parent 3de4190ad7
commit 7a50d24a9d
5 changed files with 152 additions and 32 deletions
--- a/img/logo-outlined-winter.png
+++ b/img/logo-outlined-winter.png
--- a/img/logo-winter.png
+++ b/img/logo-winter.png
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -1,14 +1,14 @@
 :root {
-  --bg-color: #0f0f0f;
+  --bg-color: #0d0f13;
  --text-color: #e8e8e8;
-  --input-bg: #1c1c1c;
+  --input-bg: #171b22;
  --input-border: #2d2d2d;
  --button-bg: #252525;
  --button-hover: #333333;
  --button-text: #e8e8e8;
-  --accent: #ec9c23;
-  --accent-hover: #ffb84d;
-  --accent-text: #000;
+  --accent: #7dc7ff;
+  --accent-hover: #a9ddff;
+  --accent-text: #000000;
  --highlight-tag: #222222;
  --highlight-tag-border: #3a3a3a;
  --danger: #ef4444;
@@ -16,7 +16,7 @@
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --border-radius: 10px;
-  --section-bg: #161616;
+  --section-bg: #13161c;
  --switch-bg: #3a3a3a;
  --checkbox-accent: #ec9c23;
  --checkbox-border: #4a4a4a;
@@ -73,22 +73,23 @@ body {
 }

 body.light {
-  --bg-color: #f8f9fa;
+  --bg-color: #eef6ff;
  --text-color: #1a1a1a;
-  --input-bg: #ffffff;
-  --input-border: #e0e0e0;
-  --button-bg: #f0f0f0;
-  --button-hover: #e5e5e5;
+  --input-bg: #f3f8ff;
+  --input-border: #d0e4ff;
+  --button-bg: #e0f0ff;
+  --button-hover: #cde8ff;
  --button-text: #1a1a1a;
-  --accent: #ec9c23;
+  --accent: #5ab6ff;
  --accent-text: #000;
-  --highlight-tag: #f5f5f5;
-  --highlight-tag-border: #e0e0e0;
+  --accent-hover: #8ccfff;
+  --highlight-tag: #d8edff;
+  --highlight-tag-border: #c0e0ff;
  --danger: #ef4444;
  --success: #10b981;
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
-  --section-bg: #ffffff;
+  --section-bg: #f3f8ff;
  --switch-bg: #d1d5db;
  --checkbox-accent: #ec9c23;
  --checkbox-border: #9ca3af;
@@ -872,3 +873,25 @@ body::-webkit-scrollbar-corner,
  opacity: 0.5;
  font-size: 0.85em;
 }
+
+.snow {
+  pointer-events: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  z-index: 1000;
+}
+
+.snowflake {
+  position: absolute;
+  top: -10px;
+  color: #d0e7ff;
+  font-size: 6px;
+  opacity: 0.5;
+  user-select: none;
+  pointer-events: none;
+  will-change: transform;
+}
--- a/popup/popup.html
+++ b/popup/popup.html
@@ -11,6 +11,7 @@
 </head>

 <body class="dark">
+  <div class="snow" id="snowContainer"></div>
  <div class="loading-overlay">
    <div class="loading-spinner"></div>
  </div>
@@ -18,7 +19,8 @@

    <div class="header-bar">
      <span class="title">
-        <img src="../img/logo-outlined.png" alt="Goose Highlighter" style="height: 28px; vertical-align: middle; margin-right: 8px;"> Goose Highlighter
+        <img src="../img/logo-outlined-winter.png" alt="Goose Highlighter"
+          style="height: 28px; vertical-align: middle; margin-right: 8px;"> Goose Highlighter
      </span>
      <div class="icon-toggles">
        <label class="icon-toggle" data-i18n-title="toggle_highlighting_title" title="Toggle highlighting">
@@ -33,11 +35,16 @@
    </div>

    <div class="tabs">
-      <button class="tab-button active" data-tab="lists"><i class="fa-solid fa-list"></i> <span data-i18n="tab_lists">Lists</span></button>
-      <button class="tab-button" data-tab="words"><i class="fa-solid fa-tags"></i> <span data-i18n="tab_words">Words</span></button>
-      <button class="tab-button" data-tab="page-highlights"><i class="fa-solid fa-location-dot"></i> <span data-i18n="tab_page_highlights">On Page</span></button>
-      <button class="tab-button" data-tab="exceptions"><i class="fa-solid fa-ban"></i> <span data-i18n="tab_exceptions">Exceptions</span></button>
-      <button class="tab-button" data-tab="options"><i class="fa-solid fa-sliders"></i> <span data-i18n="options">Options</span></button>
+      <button class="tab-button active" data-tab="lists"><i class="fa-solid fa-list"></i> <span
+          data-i18n="tab_lists">Lists</span></button>
+      <button class="tab-button" data-tab="words"><i class="fa-solid fa-tags"></i> <span
+          data-i18n="tab_words">Words</span></button>
+      <button class="tab-button" data-tab="page-highlights"><i class="fa-solid fa-location-dot"></i> <span
+          data-i18n="tab_page_highlights">On Page</span></button>
+      <button class="tab-button" data-tab="exceptions"><i class="fa-solid fa-ban"></i> <span
+          data-i18n="tab_exceptions">Exceptions</span></button>
+      <button class="tab-button" data-tab="options"><i class="fa-solid fa-sliders"></i> <span
+          data-i18n="options">Options</span></button>
    </div>

    <div class="tab-content active" data-tab-content="lists">
@@ -68,7 +75,8 @@
          <span data-i18n="enable_highlight">Enable Highlighting</span>
          <input type="checkbox" class="switch" id="listActive" />
        </label>
-        <button id="applyListSettingsBtn"><i class="fa-solid fa-check"></i> <span data-i18n="apply">Apply</span></button>
+        <button id="applyListSettingsBtn"><i class="fa-solid fa-check"></i> <span
+            data-i18n="apply">Apply</span></button>
      </div>
    </div>

@@ -80,7 +88,8 @@
      </div>

      <div class="section" data-section="wordlist">
-        <h3><i class="fa-solid fa-tags"></i> <span data-i18n="word_list">Word List</span> (<span id="wordCount">0</span>)</h3>
+        <h3><i class="fa-solid fa-tags"></i> <span data-i18n="word_list">Word List</span> (<span
+            id="wordCount">0</span>)</h3>
        <div class="button-row wrap">
          <button id="selectAllBtn"><span data-i18n="select_all">Select All</span></button>
          <button id="deselectAllBtn"><span data-i18n="deselect_all">Clear</span></button>
@@ -95,11 +104,13 @@

    <div class="tab-content" data-tab-content="page-highlights">
      <div class="section" data-section="page-highlights">
-        <h3><i class="fa-solid fa-location-dot"></i> <span data-i18n="highlights_on_page">Highlights on This Page</span></h3>
+        <h3><i class="fa-solid fa-location-dot"></i> <span data-i18n="highlights_on_page">Highlights on This Page</span>
+        </h3>
        <div class="page-highlights-info">
          <span data-i18n="total_highlights">Total:</span> <strong id="totalHighlightsCount">0</strong>
        </div>
-        <button id="refreshHighlightsBtn"><i class="fa-solid fa-rotate"></i> <span data-i18n="refresh">Refresh</span></button>
+        <button id="refreshHighlightsBtn"><i class="fa-solid fa-rotate"></i> <span
+            data-i18n="refresh">Refresh</span></button>
        <div id="pageHighlightsList" class="page-highlights-list"></div>
      </div>
    </div>
@@ -108,11 +119,13 @@
      <div class="section" data-section="exceptions">
        <h3><i class="fa-solid fa-ban"></i> <span data-i18n="site_exceptions">Site Exceptions</span></h3>
        <div class="button-row">
-          <button id="toggleExceptionBtn"><i class="fa-solid fa-plus"></i> <span id="exceptionBtnText" data-i18n="add_exception">Add to Exceptions</span></button>
+          <button id="toggleExceptionBtn"><i class="fa-solid fa-plus"></i> <span id="exceptionBtnText"
+              data-i18n="add_exception">Add to Exceptions</span></button>
        </div>
        <h3 data-i18n="exceptions_list">Exception Sites:</h3>
        <div id="exceptionsList" class="exceptions-list"></div>
-        <button id="clearExceptionsBtn" class="danger"><i class="fa-solid fa-trash"></i> <span data-i18n="clear_all">Clear All</span></button>
+        <button id="clearExceptionsBtn" class="danger"><i class="fa-solid fa-trash"></i> <span
+            data-i18n="clear_all">Clear All</span></button>
      </div>
    </div>

@@ -126,7 +139,8 @@
        <div class="button-row">
          <button id="importBtn"><i class="fa-solid fa-upload"></i> <span data-i18n="import_list">Import</span></button>
          <input type="file" id="importInput" accept="application/json" hidden />
-          <button id="exportBtn"><i class="fa-solid fa-download"></i> <span data-i18n="export_list">Export</span></button>
+          <button id="exportBtn"><i class="fa-solid fa-download"></i> <span
+              data-i18n="export_list">Export</span></button>
        </div>
      </div>
    </div>
--- a/src/popup/PopupController.ts
+++ b/src/popup/PopupController.ts
@@ -25,6 +25,7 @@ export class PopupController {
    this.setupEventListeners();
    this.render();
    this.hideLoadingOverlay();
+    this.startSnow();
  }

  private hideLoadingOverlay(): void {
@@ -721,4 +722,86 @@ export class PopupController {
    (document.getElementById('matchCase') as HTMLInputElement).checked = this.matchCaseEnabled;
    (document.getElementById('matchWhole') as HTMLInputElement).checked = this.matchWholeEnabled;
  }
+
+  // Ney year stuff
+
+  private snowflakes: HTMLSpanElement[] = [];
+
+private startSnow(): void {
+  const maxFlakes = 20; 
+  const spawnInterval = 500; 
+
+  const spawnFlake = () => {
+    if (this.snowflakes.length >= maxFlakes) return;
+
+    const flake = document.createElement('div');
+    flake.className = 'snowflake';
+    flake.style.position = 'fixed';
+    flake.style.pointerEvents = 'none';
+    flake.style.zIndex = '9999';
+    flake.style.fontSize = `${8 + Math.random() * 8}px`;
+    flake.textContent = '❄';
+
+    const isLightTheme = document.body.classList.contains('light');
+    flake.style.color = isLightTheme ? 'rgba(90, 181, 255, 0.78)' : 'rgba(255, 255, 255, 0.8)';
+
+    flake.dataset.x = `${Math.random() * window.innerWidth}`;
+    flake.dataset.y = `${-10}`;
+    flake.dataset.speed = `${0.1 + Math.random() * 0.2}`;
+    flake.dataset.wind = `${Math.random() * 0.2 - 0.1}`;
+    flake.dataset.amplitude = `${1 + Math.random() * 1}`;
+    flake.dataset.angle = `${Math.random() * Math.PI * 2}`;
+    flake.dataset.angleSpeed = `${(Math.random() * 0.02 - 0.01)}`;
+    flake.dataset.opacity = `${0.2 + Math.random() * 0.3}`;
+    flake.style.opacity = flake.dataset.opacity!;
+    flake.dataset.fadeSpeed = `${0.002 + Math.random() * 0.003}`;
+
+    document.body.appendChild(flake);
+    this.snowflakes.push(flake);
+  };
+
+  setInterval(spawnFlake, spawnInterval);
+  this.animateSnow();
+}
+
+private animateSnow(): void {
+  const animate = () => {
+    this.snowflakes.forEach((flake) => {
+      let x = parseFloat(flake.dataset.x!);
+      let y = parseFloat(flake.dataset.y!);
+      const speed = parseFloat(flake.dataset.speed!);
+      let wind = parseFloat(flake.dataset.wind!);
+      const amp = parseFloat(flake.dataset.amplitude!);
+      let angle = parseFloat(flake.dataset.angle!);
+      const angleSpeed = parseFloat(flake.dataset.angleSpeed!);
+
+      y += speed;
+      angle += angleSpeed;
+      wind += (Math.random() * 0.002 - 0.001);
+      wind = Math.max(-0.1, Math.min(0.1, wind));
+      x += Math.sin(angle) * amp + wind;
+
+      if (y > window.innerHeight) {
+        y = -10;
+        x = Math.random() * window.innerWidth;
+
+        if (Math.random() < 0.2) {
+          flake.remove();
+          this.snowflakes = this.snowflakes.filter(f => f !== flake);
+          return;
+        }
+      }
+
+      flake.dataset.x = `${x}`;
+      flake.dataset.y = `${y}`;
+      flake.dataset.angle = `${angle}`;
+      flake.dataset.wind = `${wind}`;
+      flake.style.transform = `translate(${x}px, ${y}px)`;
+    });
+
+    requestAnimationFrame(animate);
+  };
+
+  requestAnimationFrame(animate);
+}
 }