diff --git a/src/pub/index.html b/src/pub/index.html index 77d2b77..1551669 100644 --- a/src/pub/index.html +++ b/src/pub/index.html @@ -29,6 +29,15 @@ --hover-bg: rgba(0, 0, 0, 0.1); } + [data-theme="amoled"] { + --background-color: #000000; + --text-color: #848a94; + --text-color-light: #e8e8e8; + --accent-color: #c4b5fd; + --link-color: #78b3e2; + --hover-bg: rgba(255, 255, 255, 0.08); + } + body { text-align: center; background-color: var(--background-color); diff --git a/src/pub/index.js b/src/pub/index.js index 083323f..1f5d106 100644 --- a/src/pub/index.js +++ b/src/pub/index.js @@ -29,14 +29,17 @@ document.addEventListener("DOMContentLoaded", async () => { async function applyTheme() { try { - const { theme } = await browserAPI.storage.sync.get("theme"); - const prefersDark = window.matchMedia( - "(prefers-color-scheme: dark)" - ).matches; - document.body.setAttribute( - "data-theme", - theme || (prefersDark ? "dark" : "light") - ); + const { theme } = await browserAPI.storage.local.get("theme"); + if (theme && theme !== "system") { + // Apply specific theme (dark, light, or amoled) + document.body.setAttribute("data-theme", theme); + } else { + // System default - detect preference + const prefersDark = window.matchMedia( + "(prefers-color-scheme: dark)" + ).matches; + document.body.setAttribute("data-theme", prefersDark ? "dark" : "light"); + } } catch (error) { console.error("Error applying theme:", error); } diff --git a/src/pub/settings-page.html b/src/pub/settings-page.html index bda5e1f..d1a3394 100644 --- a/src/pub/settings-page.html +++ b/src/pub/settings-page.html @@ -1,700 +1,700 @@ - - - - FMHY SafeGuard - Settings - - + - .btn:active { - transform: translateY(0); - } + +
+

FMHY SafeGuard Settings

- .footer { - margin-top: 2rem; - text-align: center; - color: var(--text-secondary); - font-size: 0.875rem; - } - - .footer a { - color: var(--accent-blue); - text-decoration: none; - } - - .footer a:hover { - text-decoration: underline; - } - - .notification { - position: fixed; - bottom: 20px; - right: 20px; - padding: 1rem 1.5rem; - background: linear-gradient( - 120deg, - var(--accent-purple), - var(--accent-blue) - ); - color: white; - border-radius: 8px; - transform: translateY(150%); - transition: transform 0.3s ease-out; - z-index: 1000; - font-weight: 600; - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); - } - - .notification.show { - transform: translateY(0); - } - - /* Error state */ - .notification.error { - background: linear-gradient(120deg, #ff6b6b, #ff8787); - } - - @media (max-width: 640px) { - .container { - padding: 1rem; - } - - .settings-grid { - grid-template-columns: 1fr; - gap: 0.5rem; - } - - select { - width: 100%; - } - - .stats-container { - flex-direction: column; - } - } - - - -
-

FMHY SafeGuard Settings

- -
- -
-
-
Filterlist Statistics
-
- Last Updated: Today at 2:56:48 PM -
-
- -
-
-
Unsafe Sites
-
266
-
-
-
Potentially Unsafe Sites
-
46
-
-
-
Safe Sites
-
21901
-
-
- -
- - - - Next update scheduled for: Checking... +
+ +
+
+
Filterlist Statistics
+
+ Last Updated: Today at 2:56:48 PM
- -
-
-
-

Theme

-

- Choose your preferred appearance mode -

-
-
- -
+
+
+
Unsafe Sites
+
266
+
+
+
Potentially Unsafe Sites
+
46
+
+
+
Safe Sites
+
21901
- -
-
-
-

Warning Page

-

- Show warning page for unsafe sites -

-
- -
+
+ + + + Next update scheduled for: Checking...
+
- -
-

Link Highlighting

-

- Visually highlight safe and unsafe links in web pages -

- -
-
-

- Highlight safe links (green) -

-
- + +
+
+
+

Theme

+

+ Choose your preferred appearance mode +

- -
-
-

- Highlight unsafe links (red) -

-
- -
- -
-
-

- Show warning banners next to unsafe links -

-
- -
- -
-
-

- Safe link color -

-
- -
- -
-
-

- Unsafe link color -

-
- -
-
- - -
-
-
-

Auto-Update Filterlist

-

- Automatically update security filters -

-
-
- -
-
-
- - -
-

Domain Management

-

- Manually add domains to safe or unsafe lists -

- -
-
-

- Safe Domains (one per line) -

- -
- -
-

- Unsafe Domains (one per line) -

- -
+
+
- -
- + +
+
+
+

Warning Page

+

+ Show warning page for unsafe sites +

+
+ +
- - -
-

FMHY SafeGuard

-

- Powered by - FMHY Filterlist + +

+

Link Highlighting

+

+ Visually highlight safe and unsafe links in web pages

+ +
+
+

+ Highlight safe links (green) +

+
+ +
+ +
+
+

+ Highlight unsafe links (red) +

+
+ +
+ +
+
+

+ Show warning banners next to unsafe links +

+
+ +
+ +
+
+

+ Safe link color +

+
+ +
+ +
+
+

+ Unsafe link color +

+
+ +
+
+ + +
+
+
+

Auto-Update Filterlist

+

+ Automatically update security filters +

+
+
+ +
+
+
+ + +
+

Domain Management

+

+ Manually add domains to safe or unsafe lists +

+ +
+
+

+ Safe Domains (one per line) +

+ +
+ +
+

+ Unsafe Domains (one per line) +

+ +
+
- - - + +
+ +
+ + + +
+

FMHY SafeGuard

+

+ Powered by + FMHY Filterlist +

+
+
+ + + + + \ No newline at end of file diff --git a/src/pub/welcome-page.html b/src/pub/welcome-page.html index 19c42ed..9dc8204 100644 --- a/src/pub/welcome-page.html +++ b/src/pub/welcome-page.html @@ -1,355 +1,331 @@ - - - - Welcome to FMHY SafeGuard - - - - -
-
-

Welcome to FMHY SafeGuard

-

Let's get you set up to browse safely

+ + .step-number { + margin-bottom: 1rem; + } + } + + + + +
+
+

Welcome to FMHY SafeGuard

+

Let's get you set up to browse safely

+
+ +
+
+
1
+
+

Pin Extension to Toolbar

+

+ For quick access, pin FMHY SafeGuard to your browser toolbar: +

+
    +
  1. + Click the extensions menu (puzzle piece icon) in your toolbar +
    2. +
  2. Find "FMHY SafeGuard" in the list
    3. +
  3. + Click the pin icon next to it or right-click it and select "Pin + to Toolbar" +
    4. +
+
-
-
-
1
-
-

Pin Extension to Toolbar

-

- For quick access, pin FMHY SafeGuard to your browser toolbar: -

-
    -
  1. - Click the extensions menu (puzzle piece icon) in your toolbar -
    2. -
  2. Find "FMHY SafeGuard" in the list
    3. -
  3. - Click the pin icon next to it or right-click it and select "Pin - to Toolbar" -
    4. -
-
-
- -
-
2
-
-

How It Works

-

- FMHY SafeGuard automatically checks websites against our security - database: -

-
    -
  • 🛡️ Blocks access to known unsafe sites
    • -
  • ⚠️ Shows warnings for potentially unsafe sites
    • -
  • ✅ Identifies trusted safe sites
    • -
-

- The extension icon color indicates the current site's status: -

-
-
- Not in Wiki - Not in Wiki -
-
- Starred - Starred -
-
- Safe - Safe -
-
- Potentially Unsafe - Potentially Unsafe -
-
- Unsafe - Unsafe -
+
+
2
+
+

How It Works

+

+ FMHY SafeGuard automatically checks websites against our security + database: +

+
    +
  • 🛡️ Blocks access to known unsafe sites
    • +
  • ⚠️ Shows warnings for potentially unsafe sites
    • +
  • ✅ Identifies trusted safe sites
    • +
+

+ The extension icon color indicates the current site's status: +

+
+
+ Not in Wiki + Not in Wiki +
+
+ Starred + Starred +
+
+ Safe + Safe +
+
+ Potentially Unsafe + Potentially Unsafe +
+
+ Unsafe + Unsafe
+
-
-
3
-
-

Customize Your Settings

-

- Configure the extension to work best for you: -

-
    -
  • Choose light or dark theme
    • -
  • Enable/disable warning pages
    • -
  • Set automatic update frequency
    • -
-
+
+
3
+
+

Customize Your Settings

+

+ Configure the extension to work best for you: +

+
    +
  • Choose light, dark, or AMOLED theme
    • +
  • Enable/disable warning pages
    • +
  • Set automatic update frequency
    • +
- -
- Open Settings -
- -
-

FMHY SafeGuard

-

- Powered by - FMHY Filterlist -

-
- - + +
+ Open Settings +
+ +
+

FMHY SafeGuard

+

+ Powered by + FMHY Filterlist +

+
+
+ + + \ No newline at end of file