-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
e74dbf4
commit ead81a3
Showing
1 changed file
with
199 additions
and
106 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,124 +1,217 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>FMHY SafeGuard</title> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com"> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
| <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet"> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | ||
| <link | ||
| href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" | ||
| rel="stylesheet" | ||
| /> | ||
|
|
||
| <style> | ||
| body { | ||
| text-align: center; | ||
| background-color: rgb(26, 26, 26); | ||
| font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif; | ||
| color: #848a94; | ||
| margin: 0; | ||
| padding: 10px; | ||
| max-width: 320px; /* Limit the width to make it more compact */ | ||
| } | ||
|
|
||
| .title h1 { | ||
| font-size: 24px; | ||
| background: -webkit-linear-gradient(120deg, #c4b5fd 30%, #7bc5e4); | ||
| -webkit-background-clip: text; | ||
| -webkit-text-fill-color: transparent; | ||
| margin: 0; | ||
| padding: 10px; | ||
| } | ||
|
|
||
| #status-container { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| justify-content: center; | ||
| margin-top: 10px; | ||
| } | ||
|
|
||
| .status-image { | ||
| width: 60px; /* Reduced icon size */ | ||
| height: 60px; | ||
| transition: transform 0.3s ease; | ||
| } | ||
|
|
||
| #status-message { | ||
| font-size: 14px; /* Smaller text for compact design */ | ||
| margin-top: 10px; | ||
| color: #E8E8E8; | ||
| line-height: 1.3; | ||
| padding: 0 10px; | ||
| } | ||
|
|
||
| #status-message strong { | ||
| color: #c4b5fd; | ||
| } | ||
|
|
||
| #error-message { | ||
| color: red; | ||
| margin-top: 10px; | ||
| } | ||
|
|
||
| #footer { | ||
| font-size: 11px; /* Smaller footer text */ | ||
| margin-top: 10px; | ||
| color: #848a94; | ||
| } | ||
|
|
||
| #footer a { | ||
| color: #78b3e2; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| #footer a:hover { | ||
| text-decoration: underline; | ||
| } | ||
|
|
||
| #feedback { | ||
| font-size: 12px; | ||
| margin-top: 10px; | ||
| color: #848a94; | ||
| } | ||
|
|
||
| #feedback a { | ||
| color: #78b3e2; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| #feedback a:hover { | ||
| text-decoration: underline; | ||
| } | ||
|
|
||
| /* Animation for status change */ | ||
| .status-image.active { | ||
| transform: scale(1.1); | ||
| } | ||
| :root { | ||
| --background-color: rgb(26, 26, 26); | ||
| --text-color: #848a94; | ||
| --text-color-light: #e8e8e8; | ||
| --accent-color: #c4b5fd; | ||
| --link-color: #78b3e2; | ||
| --hover-bg: rgba(255, 255, 255, 0.1); | ||
| } | ||
|
|
||
| [data-theme="light"] { | ||
| --background-color: #f5f5f5; | ||
| --text-color: #4b5563; | ||
| --text-color-light: #1a1a1a; | ||
| --accent-color: #6c63ff; | ||
| --link-color: #0366d6; | ||
| --hover-bg: rgba(0, 0, 0, 0.1); | ||
| } | ||
|
|
||
| body { | ||
| text-align: center; | ||
| background-color: var(--background-color); | ||
| font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif; | ||
| color: var(--text-color); | ||
| margin: 0; | ||
| padding: 10px; | ||
| max-width: 320px; /* Limit the width to make it more compact */ | ||
| position: relative; /* For absolute positioning of settings button */ | ||
| } | ||
|
|
||
| .header { | ||
| position: relative; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| padding: 10px; | ||
| padding-right: 25px; | ||
| } | ||
|
|
||
| .title h1 { | ||
| font-size: 24px; | ||
| background: -webkit-linear-gradient( | ||
| 120deg, | ||
| var(--accent-color) 30%, | ||
| var(--link-color) | ||
| ); | ||
| -webkit-background-clip: text; | ||
| -webkit-text-fill-color: transparent; | ||
| margin: 0; | ||
| padding: 10px; | ||
| } | ||
|
|
||
| /* Settings Button */ | ||
| .settings-button { | ||
| position: absolute; | ||
| right: 0; | ||
| top: 50%; | ||
| transform: translateY(-50%); | ||
| background: none; | ||
| border: none; | ||
| cursor: pointer; | ||
| padding: 8px; | ||
| border-radius: 8px; | ||
| transition: all 0.3s ease; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .settings-button:hover { | ||
| background: var(--hover-bg); | ||
| } | ||
|
|
||
| .settings-button svg { | ||
| width: 20px; | ||
| height: 20px; | ||
| transition: transform 0.3s ease; | ||
| } | ||
|
|
||
| .settings-button:hover svg { | ||
| transform: rotate(45deg); | ||
| } | ||
|
|
||
| .settings-button path { | ||
| fill: var(--text-color); | ||
| transition: fill 0.3s ease; | ||
| } | ||
|
|
||
| .settings-button:hover path { | ||
| fill: var(--accent-color); | ||
| } | ||
|
|
||
| #status-container { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| justify-content: center; | ||
| margin-top: 10px; | ||
| } | ||
|
|
||
| .status-image { | ||
| width: 60px; /* Reduced icon size */ | ||
| height: 60px; | ||
| transition: transform 0.3s ease; | ||
| } | ||
|
|
||
| #status-message { | ||
| font-size: 14px; /* Smaller text for compact design */ | ||
| margin-top: 10px; | ||
| color: var(--text-color-light); | ||
| line-height: 1.3; | ||
| padding: 0 10px; | ||
| } | ||
|
|
||
| #status-message strong { | ||
| color: var(--accent-color); | ||
| } | ||
|
|
||
| #error-message { | ||
| color: red; | ||
| margin-top: 10px; | ||
| } | ||
|
|
||
| #footer { | ||
| font-size: 11px; /* Smaller footer text */ | ||
| margin-top: 10px; | ||
| color: var(--text-color); | ||
| } | ||
|
|
||
| #footer a { | ||
| color: var(--link-color); | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| #footer a:hover { | ||
| text-decoration: underline; | ||
| } | ||
|
|
||
| #feedback { | ||
| font-size: 12px; | ||
| margin-top: 10px; | ||
| color: var(--text-color); | ||
| } | ||
|
|
||
| #feedback a { | ||
| color: var(--link-color); | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| #feedback a:hover { | ||
| text-decoration: underline; | ||
| } | ||
|
|
||
| /* Animation for status change */ | ||
| .status-image.active { | ||
| transform: scale(1.1); | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div class="title"> | ||
| </head> | ||
| <body> | ||
| <div class="header"> | ||
| <div class="title"> | ||
| <h1>FMHY SafeGuard</h1> | ||
| </div> | ||
| <button class="settings-button" id="settingsButton" title="Open Settings"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | ||
| <path | ||
| d="M12 15.5A3.5 3.5 0 0 1 8.5 12 3.5 3.5 0 0 1 12 8.5a3.5 3.5 0 0 1 3.5 3.5 3.5 3.5 0 0 1-3.5 3.5m7.43-2.53c.04-.32.07-.65.07-.97 0-.32-.03-.65-.07-.97l2.11-1.63c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.31-.61-.22l-2.49 1c-.52-.39-1.06-.73-1.69-.98l-.37-2.65c-.04-.24-.25-.42-.5-.42h-4c-.25 0-.46.18-.5.42l-.37 2.65c-.63.25-1.17.59-1.69.98l-2.49-1c-.22-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64L4.57 12c-.04.32-.07.65-.07.97 0 .32.03.65.07.97l-2.11 1.63c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.31.61.22l2.49-1c.52.39 1.06.73 1.69.98l.37 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.37-2.65c.63-.25 1.17-.59 1.69-.98l2.49 1c.22-.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.63Z" | ||
| /> | ||
| </svg> | ||
| </button> | ||
| </div> | ||
|
|
||
| <div id="status-container"> | ||
| <!-- The status icon will be dynamically updated by the JS --> | ||
| <img id="status-icon" class="status-image" src="safe.png" alt="Status Icon"> | ||
| <!-- The status message will also be updated --> | ||
| <p id="status-message">Checking site status...</p> | ||
| <img | ||
| id="status-icon" | ||
| class="status-image" | ||
| src="safe.png" | ||
| alt="Status Icon" | ||
| /> | ||
| <p id="status-message">Checking site status...</p> | ||
| </div> | ||
|
|
||
| <!-- An area for error messages, if necessary --> | ||
| <p id="error-message"></p> | ||
|
|
||
| <!-- Feedback link for users to report mistakes --> | ||
| <div id="feedback"> | ||
| <p>Think this is a mistake? <a href="https://github.com/kenhendricks00/FMHY-SafeGuard/issues" target="_blank">Let us know</a>.</p> | ||
| <p> | ||
| Think this is a mistake? | ||
| <a | ||
| href="https://github.com/kenhendricks00/FMHY-SafeGuard/issues" | ||
| target="_blank" | ||
| >Let us know</a | ||
| >. | ||
| </p> | ||
| </div> | ||
|
|
||
| <div id="footer"> | ||
| <p>Powered by <a href="https://github.com/fmhy/FMHYFilterlist" target="_blank">FMHY Filterlist</a></p> | ||
| <p> | ||
| Powered by | ||
| <a href="https://github.com/fmhy/FMHYFilterlist" target="_blank" | ||
| >FMHY Filterlist</a | ||
| > | ||
| </p> | ||
| </div> | ||
|
|
||
| <script src="index.js"></script> | ||
| </body> | ||
| </body> | ||
| </html> |