mirror of
https://github.com/fmhy/FMHY-SafeGuard.git
synced 2026-03-11 08:55:40 +00:00
343 lines
No EOL
18 KiB
HTML
343 lines
No EOL
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="darkreader-lock" />
|
|
<title>FMHY SafeGuard</title>
|
|
<link rel="icon" type="image/x-icon"
|
|
href="https://raw.githubusercontent.com/fmhy/FMHY-SafeGuard/refs/heads/main/assets/logo.png" />
|
|
<link rel="stylesheet" href="styles.css" />
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Floating Navigation -->
|
|
<nav class="navbar">
|
|
<div class="nav-content">
|
|
<a href="#" class="nav-logo">
|
|
<img src="https://raw.githubusercontent.com/fmhy/FMHY-SafeGuard/refs/heads/main/assets/logo.png"
|
|
alt="FMHY SafeGuard" />
|
|
<span>FMHY SafeGuard</span>
|
|
</a>
|
|
<div class="nav-center">
|
|
<ul class="nav-links">
|
|
<li><a href="#features" class="active">Features</a></li>
|
|
<li><a href="#installation">Installation</a></li>
|
|
<li><a href="#usage">Usage</a></li>
|
|
<li><a href="#support">Support</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="nav-right">
|
|
<button class="theme-toggle" id="themeToggle" title="Toggle Theme">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
|
<path
|
|
d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z" />
|
|
</svg>
|
|
</button>
|
|
<button class="menu-toggle" id="menuToggle" title="Menu">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<line x1="4" x2="20" y1="12" y2="12" />
|
|
<line x1="4" x2="20" y1="6" y2="6" />
|
|
<line x1="4" x2="20" y1="18" y2="18" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="mobile-menu" id="mobileMenu">
|
|
<a href="#features">Features</a>
|
|
<a href="#installation">Installation</a>
|
|
<a href="#usage">Usage</a>
|
|
<a href="#support">Support</a>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<!-- Hero Section -->
|
|
<section class="hero">
|
|
<h1>FMHY SafeGuard</h1>
|
|
<p>Protect your browsing with real-time website safety checks powered by the FMHY Filterlist. Stay safe while
|
|
exploring the web with instant visual feedback.</p>
|
|
<div class="hero-buttons">
|
|
<a href="#installation" class="btn btn-primary">Get Started</a>
|
|
<a href="https://github.com/fmhy/FMHY-SafeGuard" class="btn btn-secondary" target="_blank">View on GitHub</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Status Icons Section -->
|
|
<section class="section">
|
|
<div class="section-card">
|
|
<h2>Website Safety Status</h2>
|
|
<p>FMHY SafeGuard categorizes websites into different safety levels with clear visual indicators:</p>
|
|
<div class="status-icons">
|
|
<div class="status-icon">
|
|
<img src="https://raw.githubusercontent.com/fmhy/FMHY-SafeGuard/refs/heads/main/assets/icons/starred.png"
|
|
alt="Starred" />
|
|
<span>Starred</span>
|
|
</div>
|
|
<div class="status-icon">
|
|
<img src="https://raw.githubusercontent.com/fmhy/FMHY-SafeGuard/refs/heads/main/assets/icons/safe.png"
|
|
alt="Safe" />
|
|
<span>Safe</span>
|
|
</div>
|
|
<div class="status-icon">
|
|
<img src="https://raw.githubusercontent.com/fmhy/FMHY-SafeGuard/refs/heads/main/assets/icons/default.png"
|
|
alt="Unknown" />
|
|
<span>Unknown</span>
|
|
</div>
|
|
<div class="status-icon">
|
|
<img
|
|
src="https://raw.githubusercontent.com/fmhy/FMHY-SafeGuard/refs/heads/main/assets/icons/potentially_unsafe.png"
|
|
alt="Potentially Unsafe" />
|
|
<span>Potentially Unsafe</span>
|
|
</div>
|
|
<div class="status-icon">
|
|
<img src="https://raw.githubusercontent.com/fmhy/FMHY-SafeGuard/refs/heads/main/assets/icons/unsafe.png"
|
|
alt="Unsafe" />
|
|
<span>Unsafe</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features Section -->
|
|
<section id="features" class="section">
|
|
<div class="section-card">
|
|
<h2>Key Features</h2>
|
|
<div class="features-grid">
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path
|
|
d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" />
|
|
<path d="m9 12 2 2 4-4" />
|
|
</svg>
|
|
</div>
|
|
<h3>Real-time Protection</h3>
|
|
<p>Instant feedback on website safety with visual toolbar icons that update automatically as you browse.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
|
|
<path d="M3 3v5h5" />
|
|
<path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" />
|
|
<path d="M16 16h5v5" />
|
|
</svg>
|
|
</div>
|
|
<h3>Updated Filterlists</h3>
|
|
<p>Utilizes frequently updated FMHY filterlist to ensure protection from the latest unsafe domains.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="m9.06 11.9 8.07-8.06a2.85 2.85 0 1 1 4.03 4.03l-8.06 8.08" />
|
|
<path
|
|
d="M7.07 14.94c-1.66 0-3 1.35-3 3.02 0 1.33-2.5 1.52-2 2.02 1.08 1.1 2.49 2.02 4 2.02 2.2 0 4-1.8 4-4.04a3.01 3.01 0 0 0-3-3.02z" />
|
|
</svg>
|
|
</div>
|
|
<h3>Link Highlighting</h3>
|
|
<p>Seamlessly highlights links on search engines with colors and icons showing safety status.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
|
|
<path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
|
|
</svg>
|
|
</div>
|
|
<h3>Pop-up Alerts</h3>
|
|
<p>Easy-to-read pop-ups that inform you about site status and allow further action.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" />
|
|
<path d="M12 9v4" />
|
|
<path d="M12 17h.01" />
|
|
</svg>
|
|
</div>
|
|
<h3>Unsafe Site Reasons</h3>
|
|
<p>See exactly why a site is flagged as unsafe with detailed reasons and clickable evidence links.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M16 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8Z" />
|
|
<path d="M15 3v4a2 2 0 0 0 2 2h4" />
|
|
<path d="M10 13h4" />
|
|
<path d="M10 17h4" />
|
|
</svg>
|
|
</div>
|
|
<h3>FMHY Notes</h3>
|
|
<p>View relevant notes from the FMHY wiki when visiting mapped websites with live fetching.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="7.5" cy="15.5" r="5.5" />
|
|
<path d="m21 2-9.6 9.6" />
|
|
<path d="m15.5 7.5 3 3L22 7l-3-3" />
|
|
</svg>
|
|
</div>
|
|
<h3>Site Credentials</h3>
|
|
<p>Automatically displays passwords and invite codes for sites that require them, with easy click-to-copy.
|
|
</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
|
|
</svg>
|
|
</div>
|
|
<h3>Theme Support</h3>
|
|
<p>Beautiful dark, light, and AMOLED themes with system preference detection for comfortable browsing.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path
|
|
d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
|
|
<circle cx="12" cy="12" r="3" />
|
|
</svg>
|
|
</div>
|
|
<h3>Customizable Settings</h3>
|
|
<p>Adjust warning preferences, update frequency, and customize link highlighting colors.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="10" />
|
|
<path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
|
|
<path d="M2 12h20" />
|
|
</svg>
|
|
</div>
|
|
<h3>Multi-Language Support</h3>
|
|
<p>Available in 7 languages: English, Spanish, Russian, German, Portuguese, French, and Japanese.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Installation Section -->
|
|
<section id="installation" class="section">
|
|
<div class="section-card">
|
|
<h2>Installation</h2>
|
|
<p>Get FMHY SafeGuard for your browser in just a few clicks:</p>
|
|
<div class="download-buttons">
|
|
<a href="https://addons.mozilla.org/en-US/firefox/addon/fmhy-safeguard/" class="download-btn" target="_blank">
|
|
<img
|
|
src="https://raw.githubusercontent.com/fmhy/FMHY-SafeGuard/refs/heads/main/assets/firefox_addon_image.png"
|
|
alt="Get FMHY SafeGuard for Firefox" />
|
|
</a>
|
|
<a href="https://chromewebstore.google.com/detail/fmhy-safeguard/ihcppnlmkfeclmehgdhjkglkbmiemnmp"
|
|
class="download-btn" target="_blank">
|
|
<img
|
|
src="https://raw.githubusercontent.com/fmhy/FMHY-SafeGuard/refs/heads/main/assets/chrome_addon_image.png"
|
|
alt="Get FMHY SafeGuard for Chrome" />
|
|
</a>
|
|
</div>
|
|
<p>Or download the latest release from our <a href="https://github.com/fmhy/FMHY-SafeGuard/releases"
|
|
target="_blank">GitHub Releases page</a>.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Usage Section -->
|
|
<section id="usage" class="section">
|
|
<div class="section-card">
|
|
<h2>How to Use</h2>
|
|
<div class="features-grid">
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
|
|
<polyline points="7 10 12 15 17 10" />
|
|
<line x1="12" x2="12" y1="15" y2="3" />
|
|
</svg>
|
|
</div>
|
|
<h3>Install Extension</h3>
|
|
<p>Download and install FMHY SafeGuard from your browser's extension store or GitHub releases.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="10" />
|
|
<path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
|
|
<path d="M2 12h20" />
|
|
</svg>
|
|
</div>
|
|
<h3>Browse Securely</h3>
|
|
<p>Visit any website and the toolbar icon will automatically update to reflect the site's safety status.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="11" cy="11" r="8" />
|
|
<path d="m21 21-4.3-4.3" />
|
|
<path d="M11 8v6" />
|
|
<path d="M8 11h6" />
|
|
</svg>
|
|
</div>
|
|
<h3>View Details</h3>
|
|
<p>Click the extension icon to open a popup with detailed site status information and options.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path
|
|
d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
|
|
<circle cx="12" cy="12" r="3" />
|
|
</svg>
|
|
</div>
|
|
<h3>Customize Settings</h3>
|
|
<p>Access settings to customize themes, update frequency, and link highlighting preferences.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Support Section -->
|
|
<section id="support" class="section">
|
|
<div class="section-card">
|
|
<h2>Support & Contributions</h2>
|
|
<p>Need help or want to contribute? We'd love to hear from you!</p>
|
|
<div class="hero-buttons">
|
|
<a href="https://github.com/fmhy/FMHY-SafeGuard/issues" class="btn btn-primary" target="_blank">Report
|
|
Issues</a>
|
|
<a href="https://github.com/fmhy/FMHY-SafeGuard/pulls" class="btn btn-secondary"
|
|
target="_blank">Contribute</a>
|
|
<a href="https://github.com/fmhy/FMHY/wiki/FMHY-Discord" class="btn btn-secondary" target="_blank">Join
|
|
Discord</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<p>FMHY SafeGuard - Powered by <a href="https://github.com/fmhy/FMHYFilterlist" target="_blank">FMHY Filterlist</a>
|
|
</p>
|
|
<p>Created by <a href="https://fmhy.net" target="_blank">FMHY</a> • <a href="https://github.com/fmhy/FMHY-SafeGuard"
|
|
target="_blank">Open Source</a></p>
|
|
</footer>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
|
|
</html> |