-
🌙
-
Theme Support
-
Beautiful dark and light themes with system preference detection for comfortable browsing.
+
+
Unsafe Site Reasons
+
See exactly why a site is flagged as unsafe with detailed reasons and clickable evidence links.
-
1️⃣
+
Install Extension
Download and install FMHY SafeGuard from your browser's extension store or GitHub releases.
-
2️⃣
+
Browse Securely
Visit any website and the toolbar icon will automatically update to reflect the site's safety status.
-
3️⃣
+
View Details
Click the extension icon to open a popup with detailed site status information and options.
-
⚙️
+
Customize Settings
Access settings to customize themes, update frequency, and link highlighting preferences.
diff --git a/docs/script.js b/docs/script.js
index c268fad..805ad12 100644
--- a/docs/script.js
+++ b/docs/script.js
@@ -20,6 +20,16 @@ themeToggle.addEventListener('click', () => {
localStorage.setItem('theme', newTheme);
});
+// Mobile menu toggle
+const menuToggle = document.getElementById('menuToggle');
+const mobileMenu = document.getElementById('mobileMenu');
+
+if (menuToggle && mobileMenu) {
+ menuToggle.addEventListener('click', () => {
+ mobileMenu.classList.toggle('active');
+ });
+}
+
// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
@@ -30,6 +40,10 @@ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
behavior: 'smooth',
block: 'start'
});
+ // Close mobile menu after clicking a link
+ if (mobileMenu) {
+ mobileMenu.classList.remove('active');
+ }
}
});
});
diff --git a/docs/styles.css b/docs/styles.css
index 56adbe5..5e02b1a 100644
--- a/docs/styles.css
+++ b/docs/styles.css
@@ -131,7 +131,15 @@ body {
border-radius: 50%;
}
-.theme-toggle {
+.nav-right {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ justify-self: end;
+}
+
+.theme-toggle,
+.menu-toggle {
background: none;
border: none;
color: var(--text-secondary);
@@ -142,19 +150,59 @@ body {
display: flex;
align-items: center;
justify-content: center;
- justify-self: end;
}
-.theme-toggle:hover {
+.theme-toggle:hover,
+.menu-toggle:hover {
color: var(--text-primary);
background: var(--hover-bg);
}
-.theme-toggle svg {
+.theme-toggle svg,
+.menu-toggle svg {
width: 18px;
height: 18px;
}
+.menu-toggle {
+ display: none;
+}
+
+/* Mobile Menu */
+.mobile-menu {
+ display: none;
+ position: fixed;
+ top: 70px;
+ left: 10px;
+ right: 10px;
+ flex-direction: column;
+ gap: 8px;
+ padding: 16px;
+ background: var(--background);
+ border: 1px solid var(--section-border);
+ border-radius: 16px;
+ z-index: 999;
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+}
+
+.mobile-menu.active {
+ display: flex;
+}
+
+.mobile-menu a {
+ color: var(--text-secondary);
+ text-decoration: none;
+ padding: 12px 16px;
+ border-radius: 12px;
+ font-weight: 500;
+ transition: all 0.3s ease;
+}
+
+.mobile-menu a:hover {
+ color: var(--text-primary);
+ background: var(--hover-bg);
+}
+
.navbar:hover {
transform: translateX(-50%) translateY(-2px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
@@ -321,6 +369,12 @@ body {
font-size: 1.5rem;
}
+.feature-icon svg {
+ width: 24px;
+ height: 24px;
+ stroke: white;
+}
+
.feature-card h3 {
font-size: 1.25rem;
font-weight: 600;
@@ -476,12 +530,77 @@ body {
display: none;
}
+ .menu-toggle {
+ display: flex;
+ }
+
+ .navbar {
+ padding: 10px 16px;
+ backdrop-filter: none;
+ -webkit-backdrop-filter: none;
+ background: var(--background);
+ }
+
+ .nav-logo span {
+ display: none;
+ }
+
+ .nav-logo img {
+ width: 28px;
+ height: 28px;
+ }
+
.hero h1 {
- font-size: 2rem;
+ font-size: 1.75rem;
+ }
+
+ .hero p {
+ font-size: 1rem;
+ }
+
+ .section-card {
+ padding: 1.25rem;
+ border-radius: 16px;
+ }
+
+ .section h2 {
+ font-size: 1.5rem;
+ }
+
+ .feature-card {
+ padding: 1.25rem;
+ }
+
+ .feature-icon {
+ width: 40px;
+ height: 40px;
+ }
+
+ .feature-icon svg {
+ width: 20px;
+ height: 20px;
+ }
+
+ .feature-card h3 {
+ font-size: 1.1rem;
}
.status-icons {
flex-direction: column;
align-items: center;
}
+
+ .status-icon img {
+ width: 48px;
+ height: 48px;
+ }
+
+ .btn {
+ width: 100%;
+ justify-content: center;
+ }
+
+ .download-btn img {
+ height: 50px;
+ }
}