obsqrbtz/goose-highlighter
1
0
Fork 0
mirror of https://github.com/obsqrbtz/goose-highlighter.git synced 2026-04-08 20:19:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

style: new year theme

Browse Source
This commit is contained in:
Daniel Dada
2025-12-11 16:56:55 +03:00
parent 3de4190ad7
commit 7a50d24a9d
5 changed files with 152 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
img/logo-outlined-winter.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 406 KiB

BIN
img/logo-winter.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 406 KiB

53
popup/popup.css
View File

@@ -1,14 +1,14 @@
:root { :root {
--bg-color: #0f0f0f; --bg-color: #0d0f13;
--text-color: #e8e8e8; --text-color: #e8e8e8;
--input-bg: #1c1c1c; --input-bg: #171b22;
--input-border: #2d2d2d; --input-border: #2d2d2d;
--button-bg: #252525; --button-bg: #252525;
--button-hover: #333333; --button-hover: #333333;
--button-text: #e8e8e8; --button-text: #e8e8e8;
--accent: #ec9c23; --accent: #7dc7ff;
--accent-hover: #ffb84d; --accent-hover: #a9ddff;
--accent-text: #000; --accent-text: #000000;
--highlight-tag: #222222; --highlight-tag: #222222;
--highlight-tag-border: #3a3a3a; --highlight-tag-border: #3a3a3a;
--danger: #ef4444; --danger: #ef4444;
@@ -16,7 +16,7 @@
--shadow: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
--border-radius: 10px; --border-radius: 10px;
--section-bg: #161616; --section-bg: #13161c;
--switch-bg: #3a3a3a; --switch-bg: #3a3a3a;
--checkbox-accent: #ec9c23; --checkbox-accent: #ec9c23;
--checkbox-border: #4a4a4a; --checkbox-border: #4a4a4a;
@@ -73,22 +73,23 @@ body {
} }
body.light { body.light {
--bg-color: #f8f9fa; --bg-color: #eef6ff;
--text-color: #1a1a1a; --text-color: #1a1a1a;
--input-bg: #ffffff; --input-bg: #f3f8ff;
--input-border: #e0e0e0; --input-border: #d0e4ff;
--button-bg: #f0f0f0; --button-bg: #e0f0ff;
--button-hover: #e5e5e5; --button-hover: #cde8ff;
--button-text: #1a1a1a; --button-text: #1a1a1a;
--accent: #ec9c23; --accent: #5ab6ff;
--accent-text: #000; --accent-text: #000;
--highlight-tag: #f5f5f5; --accent-hover: #8ccfff;
--highlight-tag-border: #e0e0e0; --highlight-tag: #d8edff;
--highlight-tag-border: #c0e0ff;
--danger: #ef4444; --danger: #ef4444;
--success: #10b981; --success: #10b981;
--shadow: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
--section-bg: #ffffff; --section-bg: #f3f8ff;
--switch-bg: #d1d5db; --switch-bg: #d1d5db;
--checkbox-accent: #ec9c23; --checkbox-accent: #ec9c23;
--checkbox-border: #9ca3af; --checkbox-border: #9ca3af;
@@ -872,3 +873,25 @@ body::-webkit-scrollbar-corner,
opacity: 0.5; opacity: 0.5;
font-size: 0.85em; 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;
}

40
popup/popup.html
View File

@@ -11,6 +11,7 @@
</head> </head>
<body class="dark"> <body class="dark">
<div class="snow" id="snowContainer"></div>
<div class="loading-overlay"> <div class="loading-overlay">
<div class="loading-spinner"></div> <div class="loading-spinner"></div>
</div> </div>
@@ -18,7 +19,8 @@
<div class="header-bar"> <div class="header-bar">
<span class="title"> <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> </span>
<div class="icon-toggles"> <div class="icon-toggles">
<label class="icon-toggle" data-i18n-title="toggle_highlighting_title" title="Toggle highlighting"> <label class="icon-toggle" data-i18n-title="toggle_highlighting_title" title="Toggle highlighting">
@@ -33,11 +35,16 @@
</div> </div>
<div class="tabs"> <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 active" data-tab="lists"><i class="fa-solid fa-list"></i> <span
<button class="tab-button" data-tab="words"><i class="fa-solid fa-tags"></i> <span data-i18n="tab_words">Words</span></button> data-i18n="tab_lists">Lists</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="words"><i class="fa-solid fa-tags"></i> <span
<button class="tab-button" data-tab="exceptions"><i class="fa-solid fa-ban"></i> <span data-i18n="tab_exceptions">Exceptions</span></button> data-i18n="tab_words">Words</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" 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>
<div class="tab-content active" data-tab-content="lists"> <div class="tab-content active" data-tab-content="lists">
@@ -68,7 +75,8 @@
<span data-i18n="enable_highlight">Enable Highlighting</span> <span data-i18n="enable_highlight">Enable Highlighting</span>
<input type="checkbox" class="switch" id="listActive" /> <input type="checkbox" class="switch" id="listActive" />
</label> </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>
</div> </div>
@@ -80,7 +88,8 @@
</div> </div>
<div class="section" data-section="wordlist"> <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"> <div class="button-row wrap">
<button id="selectAllBtn"><span data-i18n="select_all">Select All</span></button> <button id="selectAllBtn"><span data-i18n="select_all">Select All</span></button>
<button id="deselectAllBtn"><span data-i18n="deselect_all">Clear</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="tab-content" data-tab-content="page-highlights">
<div class="section" data-section="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"> <div class="page-highlights-info">
<span data-i18n="total_highlights">Total:</span> <strong id="totalHighlightsCount">0</strong> <span data-i18n="total_highlights">Total:</span> <strong id="totalHighlightsCount">0</strong>
</div> </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 id="pageHighlightsList" class="page-highlights-list"></div>
</div> </div>
</div> </div>
@@ -108,11 +119,13 @@
<div class="section" data-section="exceptions"> <div class="section" data-section="exceptions">
<h3><i class="fa-solid fa-ban"></i> <span data-i18n="site_exceptions">Site Exceptions</span></h3> <h3><i class="fa-solid fa-ban"></i> <span data-i18n="site_exceptions">Site Exceptions</span></h3>
<div class="button-row"> <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> </div>
<h3 data-i18n="exceptions_list">Exception Sites:</h3> <h3 data-i18n="exceptions_list">Exception Sites:</h3>
<div id="exceptionsList" class="exceptions-list"></div> <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>
</div> </div>
@@ -126,7 +139,8 @@
<div class="button-row"> <div class="button-row">
<button id="importBtn"><i class="fa-solid fa-upload"></i> <span data-i18n="import_list">Import</span></button> <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 /> <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> </div>
</div> </div>

83
src/popup/PopupController.ts
View File

@@ -25,6 +25,7 @@ export class PopupController {
this.setupEventListeners(); this.setupEventListeners();
this.render(); this.render();
this.hideLoadingOverlay(); this.hideLoadingOverlay();
this.startSnow();
} }
private hideLoadingOverlay(): void { private hideLoadingOverlay(): void {
@@ -721,4 +722,86 @@ export class PopupController {
(document.getElementById('matchCase') as HTMLInputElement).checked = this.matchCaseEnabled; (document.getElementById('matchCase') as HTMLInputElement).checked = this.matchCaseEnabled;
(document.getElementById('matchWhole') as HTMLInputElement).checked = this.matchWholeEnabled; (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);
}
} }