diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 0000000..ebc762b --- /dev/null +++ b/docs/index.html @@ -0,0 +1,182 @@ + + + + + + FMHY SafeGuard + + + + + + + +
+ +
+

FMHY SafeGuard

+

Protect your browsing with real-time website safety checks powered by the FMHY Filterlist. Stay safe while exploring the web with instant visual feedback.

+
+ Get Started + View on GitHub +
+
+ + +
+
+

Website Safety Status

+

FMHY SafeGuard categorizes websites into different safety levels with clear visual indicators:

+
+
+ Starred + Starred +
+
+ Safe + Safe +
+
+ Unknown + Unknown +
+
+ Potentially Unsafe + Potentially Unsafe +
+
+ Unsafe + Unsafe +
+
+
+
+ + +
+
+

Key Features

+
+
+
🛡️
+

Real-time Protection

+

Instant feedback on website safety with visual toolbar icons that update automatically as you browse.

+
+
+
🔄
+

Updated Filterlists

+

Utilizes frequently updated FMHY filterlist to ensure protection from the latest unsafe domains.

+
+
+
🎨
+

Link Highlighting

+

Seamlessly highlights links on search engines with colors and icons showing safety status.

+
+
+
⚡
+

Pop-up Alerts

+

Easy-to-read pop-ups that inform you about site status and allow further action.

+
+
+
🌙
+

Theme Support

+

Beautiful dark and light themes with system preference detection for comfortable browsing.

+
+
+
⚙️
+

Customizable Settings

+

Adjust warning preferences, update frequency, and customize link highlighting colors.

+
+
+
+
+ + +
+
+

Installation

+

Get FMHY SafeGuard for your browser in just a few clicks:

+
+ + Get FMHY SafeGuard for Firefox + + + Get FMHY SafeGuard for Chrome + +
+

Or download the latest release from our GitHub Releases page.

+
+
+ + +
+
+

How to Use

+
+
+
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.

+
+
+
+
+ + +
+
+

Support & Contributions

+

Need help or want to contribute? We'd love to hear from you!

+
+ Report Issues + Contribute + Join Discord +
+
+
+
+ + + + + + + diff --git a/docs/script.js b/docs/script.js new file mode 100644 index 0000000..c268fad --- /dev/null +++ b/docs/script.js @@ -0,0 +1,56 @@ +// Theme toggle functionality +const themeToggle = document.getElementById('themeToggle'); +const body = document.body; + +// Check for saved theme preference or default to system preference +const savedTheme = localStorage.getItem('theme'); +const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + +if (savedTheme) { + body.setAttribute('data-theme', savedTheme); +} else if (!systemPrefersDark) { + body.setAttribute('data-theme', 'light'); +} + +themeToggle.addEventListener('click', () => { + const currentTheme = body.getAttribute('data-theme'); + const newTheme = currentTheme === 'light' ? 'dark' : 'light'; + + body.setAttribute('data-theme', newTheme); + localStorage.setItem('theme', newTheme); +}); + +// Smooth scrolling for navigation links +document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + const target = document.querySelector(this.getAttribute('href')); + if (target) { + target.scrollIntoView({ + behavior: 'smooth', + block: 'start' + }); + } + }); +}); + +// Update active navigation link on scroll +window.addEventListener('scroll', () => { + const sections = document.querySelectorAll('section[id]'); + const navLinks = document.querySelectorAll('.nav-links a'); + + let current = ''; + sections.forEach(section => { + const sectionTop = section.offsetTop - 100; + if (window.pageYOffset >= sectionTop) { + current = section.getAttribute('id'); + } + }); + + navLinks.forEach(link => { + link.classList.remove('active'); + if (link.getAttribute('href') === `#${current}`) { + link.classList.add('active'); + } + }); +}); diff --git a/docs/styles.css b/docs/styles.css new file mode 100644 index 0000000..56adbe5 --- /dev/null +++ b/docs/styles.css @@ -0,0 +1,487 @@ +@font-face { + font-family: "Inter"; + src: url("../src/res/fonts/inter.woff2") format("woff2"); +} + +:root { + --background: rgb(26, 26, 26); + --card-bg: rgba(255, 255, 255, 0.05); + --text-primary: #e8e8e8; + --text-secondary: #848a94; + --accent-purple: #c4b5fd; + --accent-blue: #7bc5e4; + --link-color: #78b3e2; + --section-border: rgba(255, 255, 255, 0.1); + --hover-bg: rgba(255, 255, 255, 0.1); + --nav-bg: rgba(26, 26, 26, 0.8); +} + +[data-theme="light"] { + --background: #f5f5f5; + --card-bg: rgba(255, 255, 255, 0.9); + --text-primary: #1a1a1a; + --text-secondary: #4b5563; + --accent-purple: #6c63ff; + --accent-blue: #0366d6; + --link-color: #0366d6; + --section-border: rgba(0, 0, 0, 0.1); + --hover-bg: rgba(0, 0, 0, 0.1); + --nav-bg: rgba(245, 245, 245, 0.8); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background-color: var(--background); + font-family: "Inter", sans-serif; + color: var(--text-primary); + line-height: 1.6; + transition: background-color 0.3s, color 0.3s; + padding-top: 80px; +} + +/* Floating Navigation Bar */ +.navbar { + position: fixed; + top: 20px; + left: 50%; + transform: translateX(-50%); + background: var(--nav-bg); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border: 1px solid var(--section-border); + border-radius: 50px; + padding: 12px 24px; + z-index: 1000; + transition: all 0.3s ease; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + justify-content: space-between; +} + +.nav-content { + display: grid; + grid-template-columns: 1fr auto 1fr; + align-items: center; + width: 100%; + gap: 1rem; +} + +.nav-center { + display: flex; + align-items: center; + gap: 32px; + justify-content: center; +} + +.nav-logo { + display: flex; + align-items: center; + gap: 8px; + text-decoration: none; + color: var(--text-primary); + font-weight: 600; + font-size: 1.1rem; + flex-shrink: 0; +} + +.nav-logo img { + width: 24px; + height: 24px; + border-radius: 4px; +} + +.nav-links { + display: flex; + gap: 24px; + list-style: none; +} + +.nav-links a { + color: var(--text-secondary); + text-decoration: none; + font-weight: 500; + font-size: 0.9rem; + padding: 8px 16px; + border-radius: 20px; + transition: all 0.3s ease; + position: relative; +} + +.nav-links a:hover, +.nav-links a.active { + color: var(--text-primary); + background: var(--hover-bg); +} + +.nav-links a.active::before { + content: ""; + position: absolute; + bottom: -2px; + left: 50%; + transform: translateX(-50%); + width: 4px; + height: 4px; + background: linear-gradient(120deg, var(--accent-purple), var(--accent-blue)); + border-radius: 50%; +} + +.theme-toggle { + background: none; + border: none; + color: var(--text-secondary); + cursor: pointer; + padding: 8px; + border-radius: 50%; + transition: all 0.3s ease; + display: flex; + align-items: center; + justify-content: center; + justify-self: end; +} + +.theme-toggle:hover { + color: var(--text-primary); + background: var(--hover-bg); +} + +.theme-toggle svg { + width: 18px; + height: 18px; +} + +.navbar:hover { + transform: translateX(-50%) translateY(-2px); + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); +} + +@media (max-width: 900px) { + .nav-content { + display: flex; + justify-content: space-between; + padding: 0 1rem; + gap: 0; + } + + .nav-center { + flex: 1; + justify-content: center; + margin: 0 1rem; + } + + .theme-toggle { + justify-self: auto; + } +} + +/* Main Content */ +.container { + max-width: 1200px; + margin: 0 auto; + padding: 2rem; +} + +.hero { + text-align: center; + margin-bottom: 4rem; + padding: 3rem 0; +} + +.hero h1 { + font-size: 3.5rem; + font-weight: 700; + margin-bottom: 1rem; + background: linear-gradient(120deg, var(--accent-purple) 30%, var(--accent-blue)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.hero p { + font-size: 1.25rem; + color: var(--text-secondary); + max-width: 600px; + margin: 0 auto 2rem; +} + +.hero-buttons { + display: flex; + gap: 1rem; + justify-content: center; + flex-wrap: wrap; +} + +.btn { + padding: 0.75rem 2rem; + border-radius: 50px; + border: none; + font-family: inherit; + font-weight: 600; + font-size: 0.9rem; + cursor: pointer; + transition: all 0.3s ease; + text-decoration: none; + display: inline-flex; + align-items: center; + gap: 0.5rem; +} + +.btn-primary { + background: linear-gradient(120deg, var(--accent-purple), var(--accent-blue)); + color: white; + box-shadow: 0 4px 20px rgba(196, 181, 253, 0.3); +} + +.btn-secondary { + background: var(--card-bg); + color: var(--text-primary); + border: 1px solid var(--section-border); + backdrop-filter: blur(10px); +} + +.btn:hover { + transform: translateY(-2px); +} + +.btn-primary:hover { + box-shadow: 0 8px 30px rgba(196, 181, 253, 0.4); +} + +.btn-secondary:hover { + background: var(--hover-bg); +} + +/* Content Sections */ +.section { + margin-bottom: 4rem; +} + +.section-card { + background: var(--card-bg); + border-radius: 20px; + padding: 2rem; + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border: 1px solid var(--section-border); + transition: all 0.3s ease; +} + +.section-card:hover { + transform: translateY(-4px); + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1); +} + +.section h2 { + font-size: 2rem; + font-weight: 600; + margin-bottom: 1rem; + color: var(--text-primary); +} + +.section p { + color: var(--text-secondary); + margin-bottom: 1.5rem; +} + +.features-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; + margin-top: 2rem; +} + +.feature-card { + background: var(--card-bg); + border-radius: 16px; + padding: 1.5rem; + backdrop-filter: blur(10px); + border: 1px solid var(--section-border); + transition: all 0.3s ease; +} + +.feature-card:hover { + transform: translateY(-2px); + background: rgba(255, 255, 255, 0.08); +} + +.feature-icon { + width: 48px; + height: 48px; + background: linear-gradient(120deg, var(--accent-purple), var(--accent-blue)); + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 1rem; + font-size: 1.5rem; +} + +.feature-card h3 { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 0.5rem; + color: var(--text-primary); +} + +.feature-card p { + color: var(--text-secondary); + font-size: 0.9rem; +} + +.status-icons { + display: flex; + justify-content: center; + gap: 2rem; + margin: 2rem 0; + flex-wrap: wrap; +} + +.status-icon { + text-align: center; + padding: 1rem; +} + +.status-icon img { + width: 64px; + height: 64px; + margin-bottom: 0.5rem; + transition: transform 0.3s ease; +} + +.status-icon:hover img { + transform: scale(1.1); +} + +.status-icon span { + display: block; + font-size: 0.9rem; + color: var(--text-secondary); + font-weight: 500; +} + +.download-buttons { + display: flex; + gap: 1rem; + justify-content: center; + margin: 2rem 0; + flex-wrap: wrap; +} + +.download-btn { + display: inline-block; + transition: transform 0.3s ease; +} + +.download-btn:hover { + transform: scale(1.05); +} + +.download-btn img { + height: 60px; + border-radius: 8px; +} + +/* Footer */ +.footer { + text-align: center; + padding: 3rem 0; + border-top: 1px solid var(--section-border); + margin-top: 4rem; +} + +.footer p { + color: var(--text-secondary); + font-size: 0.9rem; +} + +.footer a { + color: var(--link-color); + text-decoration: none; +} + +.footer a:hover { + text-decoration: underline; +} + +/* Mobile Responsiveness */ +@media (max-width: 768px) { + .navbar { + top: 10px; + left: 10px; + right: 10px; + transform: none; + border-radius: 20px; + padding: 12px 16px; + } + + .navbar:hover { + transform: translateY(-2px); + } + + .nav-logo { + gap: 16px; + } + + .nav-links { + gap: 8px; + } + + .nav-links a { + padding: 6px 12px; + font-size: 0.8rem; + } + + body { + padding-top: 100px; + } + + .container { + padding: 1rem; + } + + .hero h1 { + font-size: 2.5rem; + } + + .hero p { + font-size: 1.1rem; + } + + .hero-buttons { + flex-direction: column; + align-items: center; + } + + .features-grid { + grid-template-columns: 1fr; + } + + .status-icons { + gap: 1rem; + } + + .download-buttons { + flex-direction: column; + align-items: center; + } +} + +@media (max-width: 480px) { + .nav-links { + display: none; + } + + .hero h1 { + font-size: 2rem; + } + + .status-icons { + flex-direction: column; + align-items: center; + } +}