diff options
Diffstat (limited to 'data-viewer/data-viewer.html')
| -rw-r--r-- | data-viewer/data-viewer.html | 116 |
1 files changed, 91 insertions, 25 deletions
diff --git a/data-viewer/data-viewer.html b/data-viewer/data-viewer.html index b0d4a5f..0f4ba9b 100644 --- a/data-viewer/data-viewer.html +++ b/data-viewer/data-viewer.html @@ -16,7 +16,7 @@ <header class="app-header"> <div id="header-container"> <div class="logo-container"> - <img src="../assets/images/logo_48.png" alt="ZenInternet Logo" class="logo-img"> + <img src="../assets/images/logo.png" alt="ZenInternet Logo" class="logo-img"> <h1 class="app-title">Zen Internet Settings</h1> </div> <div class="miniheader"> @@ -27,22 +27,61 @@ </header> <main class="app-content"> - <div class="actions"> - <button id="back-button" class="action-button secondary"> - <i class="fas fa-arrow-left"></i> Back to Extension - </button> + <!-- Backup & Restore section moved to top --> + <div class="data-section"> + <h2 class="section-title">Backup & Restore ✨</h2> + <div class="backup-restore-container"> + <p class="backup-description"> + Export your settings to a JSON file or import settings from a previously exported file. + <br><strong>Note:</strong> This includes global settings, website lists, and website-specific + feature toggles, but not the actual style data which will be re-fetched. + </p> + <div class="backup-actions"> + <button id="export-settings" class="action-button primary"> + <i class="fas fa-upload"></i> Export Settings + </button> + <div class="import-container"> + <label for="import-file" class="action-button secondary import-label"> + <i class="fas fa-download"></i> Import Settings + </label> + <input type="file" id="import-file" accept=".json" hidden> + </div> + </div> + <div id="import-status" class="import-status"></div> + </div> </div> - <div class="toggle-setting-container"> - <div class="toggle-container"> - <label class="toggle-switch"> - <input type="checkbox" id="disable-transparency"> - <span class="slider round"></span> - </label> - <span class="toggle-label">Disable Transparency Globally</span> - </div> - <div class="setting-description"> - This will disable all transparency features while keeping other styling effects active + <!-- Global toggles grouped into a single section with a heading --> + <div class="data-section"> + <h2 class="section-title">Global Feature Controls ✨</h2> + <div class="global-toggles-container"> + <div class="toggle-row"> + <div class="toggle-container"> + <label class="toggle-switch"> + <input type="checkbox" id="disable-transparency"> + <span class="slider round"></span> + </label> + <span class="toggle-label">Disable Transparency</span> + </div> + <div class="toggle-container"> + <label class="toggle-switch"> + <input type="checkbox" id="disable-hover"> + <span class="slider round"></span> + </label> + <span class="toggle-label">Disable Hover Effects</span> + </div> + <div class="toggle-container"> + <label class="toggle-switch"> + <input type="checkbox" id="disable-footer"> + <span class="slider round"></span> + </label> + <span class="toggle-label">Keep Footers</span> + </div> + </div> + <div class="setting-description"> + These settings control specific feature types across all websites. + Changes apply only to newly opened or reloaded tabs. + </div> </div> </div> @@ -56,6 +95,32 @@ <div id="skip-list-data" class="data-container"></div> </div> + <!-- Repository URL section moved above danger zone --> + <div class="data-section"> + <h2 class="section-title">Custom Styles Repository ✨</h2> + <div class="repository-url-container"> + <p class="setting-description"> + Change the URL where styles are fetched from. Use this if you want to use a different styles + repository. + <br><strong>Note:</strong> After changing the URL, you should clear existing styles data for + best results. + </p> + <div class="repository-url-controls"> + <input type="text" id="repository-url" class="repository-url-input" + placeholder="Enter repository URL..."> + <div class="repository-url-buttons"> + <button id="set-repository-url" class="action-button primary"> + <i class="fas fa-save"></i> Set URL + </button> + <button id="reset-repository-url" class="action-button secondary"> + <i class="fas fa-undo"></i> Reset to Default + </button> + </div> + </div> + <div id="repository-url-status" class="repository-url-status"></div> + </div> + </div> + <div class="danger-zone"> <h3 class="danger-title">Danger Zone</h3> <div class="danger-actions"> @@ -69,17 +134,18 @@ <h2 class="section-title">Websites and CSS</h2> <div id="combined-websites-data" class="data-container"></div> </div> - </main> - <footer class="app-footer"> - <a href="https://sameerasw.github.io/my-internet/" class="footer-link" target="_blank"> - <i class="fas fa-book"></i> Styles Repository - </a> - <div class="footer-divider"></div> - <a href="https://github.com/sameerasw/zeninternet" class="footer-link" target="_blank"> - <i class="fa-brands fa-github"></i> Project Repository - </a> - </footer> + + <footer class="app-footer"> + <a href="https://sameerasw.github.io/my-internet/" class="footer-link" target="_blank"> + <i class="fas fa-book"></i> Styles Repository + </a> + <div class="footer-divider"></div> + <a href="https://github.com/sameerasw/zeninternet" class="footer-link" target="_blank"> + <i class="fa-brands fa-github"></i> Project Repository + </a> + </footer> + </main> </div> <script src="data-viewer.js"></script> </body> |