diff options
Diffstat (limited to 'client/fragments/settings.html')
| -rw-r--r-- | client/fragments/settings.html | 151 |
1 files changed, 151 insertions, 0 deletions
diff --git a/client/fragments/settings.html b/client/fragments/settings.html new file mode 100644 index 0000000..897e0f7 --- /dev/null +++ b/client/fragments/settings.html @@ -0,0 +1,151 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>Settings</title> + <link rel="icon" href="../assets/icons2/settings.svg"> + <style> + .settings-item { + display: grid; + grid-template-columns: 32px 1fr; + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + padding: 5px 10px; + } + + .settings-item:hover { + background-color: rgba(0, 0, 0, .05); + } + + .settings-item:active, .settings-item.active { + background-color: rgba(0, 0, 0, .1); + } + + .settings-item.active { + pointer-events: none; + } + + * { + font-family: system-ui, -apple-system, sans-serif; + user-select: none; + -webkit-user-drag: none; + } + + .settings-item-text-inner { + white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis; + } + + .settings-item-text { + align-items: center; display: flex; + } + + .settings-item-icon { + width: 24px; height: 24px; + } + + .settings-item-inner { + width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; + } + </style> +</head> +<body style="background-color: #fff;"> + <main style="background-color: #fff; position: fixed; inset: 20px; overflow: hidden;"> + <div style="width: 100%; height: 100%; overflow: hidden; display: grid; grid-template-columns: 1fr 3fr;"> + <div style="border-right: 1px solid rgba(0, 0, 0, .25); overflow: auto;"> + <div class="settings-item active" id="settings-item-search" onclick="openPage('search');"> + <div class="settings-item-inner"> + <img class="settings-item-icon" alt="" src="../assets/icons2/search.svg"> + </div> + <div class="settings-item-text"> + <span class="settings-item-text-inner">Search and predictions</span> + </div> + </div> + <div class="settings-item" id="settings-item-security" onclick="openPage('security');"> + <div class="settings-item-inner"> + <img class="settings-item-icon" alt="" src="../assets/icons2/security.svg"> + </div> + <div class="settings-item-text"> + <span class="settings-item-text-inner">Security</span> + </div> + </div> + <div class="settings-item" id="settings-item-blocking" onclick="openPage('blocking');"> + <div class="settings-item-inner"> + <img class="settings-item-icon" alt="" src="../assets/icons2/blocker.svg"> + </div> + <div class="settings-item-text"> + <span class="settings-item-text-inner">Content blocking</span> + </div> + </div> + <div class="settings-item" id="settings-item-appearance" onclick="openPage('appearance');"> + <div class="settings-item-inner"> + <img class="settings-item-icon" alt="" src="../assets/icons2/appearance.svg"> + </div> + <div class="settings-item-text"> + <span class="settings-item-text-inner">Appearance</span> + </div> + </div> + <div class="settings-item" id="settings-item-platform" onclick="openPage('platform');"> + <div class="settings-item-inner"> + <img class="settings-item-icon" alt="" src="../assets/icons2/platform.svg"> + </div> + <div class="settings-item-text"> + <span class="settings-item-text-inner">Chatroom Platform</span> + </div> + </div> + <div class="settings-item" id="settings-item-spyglass" onclick="openPage('spyglass');"> + <div class="settings-item-inner"> + <img class="settings-item-icon" alt="" src="../assets/icons2/spyglass.svg"> + </div> + <div class="settings-item-text"> + <span class="settings-item-text-inner">Spyglass</span> + </div> + </div> + <div class="settings-item" id="settings-item-system" onclick="openPage('system');"> + <div class="settings-item-inner"> + <img class="settings-item-icon" alt="" src="../assets/icons2/system.svg"> + </div> + <div class="settings-item-text"> + <span class="settings-item-text-inner">System</span> + </div> + </div> + <div class="settings-item" id="settings-item-experiments" style="display: none;" onclick="openPage('experiments');"> + <div class="settings-item-inner"> + <img class="settings-item-icon" alt="" src="../assets/icons2/experiments.svg"> + </div> + <div class="settings-item-text"> + <span class="settings-item-text-inner">Developer</span> + </div> + </div> + <div class="settings-item" id="settings-item-about" onclick="openPage('about');"> + <div class="settings-item-inner"> + <img class="settings-item-icon" alt="" src="../assets/icons2/about.svg"> + </div> + <div class="settings-item-text"> + <span class="settings-item-text-inner">About Chatroom</span> + </div> + </div> + </div> + <iframe id="frame" style="border: none; width: 100%; height: 100%;"></iframe> + </div> + </main> + + <script> + if (localStorage.getItem("cr3-trial-experiments") === "true") { + document.getElementById("settings-item-experiments").style.display = ""; + } + + function openPage(id) { + Array.from(document.getElementsByClassName('active')).map(i => i.classList.remove("active")); + document.getElementById("settings-item-" + id).classList.add("active"); + document.getElementById("frame").src = "./settings/" + id + ".html"; + location.hash = id; + } + + window.onhashchange = () => { + openPage(location.hash.substring(1)); + } + + openPage("search"); + </script> +</body> +</html> |