Files
cypher-player-assistant/index.html

207 lines
5.7 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale: 1">
<title>Cypher Player Assistant</title>
<link rel="stylesheet" type="text/css" href="static/reset.css">
<style>
/* Themes and theme switcher */
:root {
/* Dark Color Scheme */
--dark-bg: #111111;
--dark-text: #eeeeee;
--dark-box-border: #333333;
/* Light Color Scheme */
--light-bg: #eeeeee;
--light-text: #111111;
--light-box-border: #cccccc;
/* Defaults */
--bg: var(--light-bg);
--text: var(--light-text);
--box-border: var(--light-box-border);
}
#color-scheme {
display: none;
}
#color-scheme:checked ~ .color-scheme-wrapper {
--bg: var(--dark-bg);
--text: var(--dark-text);
--box-border: var(--dark-box-border);
}
#color-scheme:checked ~ .color-scheme-wrapper .dark-mode-hide {
display: none;
}
#color-scheme:checked ~ .color-scheme-wrapper .light-mode-hide {
display: initial;
}
.dark-mode-hide {
display: initial;
}
.light-mode-hide {
display: none;
}
@media(prefers-color-scheme: dark) {
:root {
--bg: var(--dark-bg);
--text: var(--dark-text);
--box-border: var(--dark-box-border);
}
#color-scheme:checked ~ .color-scheme-wrapper {
--bg: var(--light-bg);
--text: var(--light-text);
--box-border: var(--light-box-border);
}
#color-scheme:checked ~ .color-scheme-wrapper .dark-mode-hide {
display: initial;
}
#color-scheme:checked ~ .color-scheme-wrapper .light-mode-hide {
display: none;
}
.dark-mode-hide {
display: none;
}
.light-mode-hide {
display: initial;
}
}
.color-scheme-wrapper {
min-height: 100vh;
background: var(--bg);
color: var(--text);
}
#color-scheme-changer {
position: fixed;
text-align: center;
top: 0;
right: 0;
font-size: 150%;
width: 1.5em;
cursor: pointer;
}
.color-scheme-toggle {
cursor: pointer;
}
.color-scheme-toggle span {
cursor: pointer;
}
.dark-mode-hide, .light-mode-hide {
cursor: pointer;
}
.dark-mode-hide {
background-color: var(--dark-bg);
color: var(--dark-text);
}
.light-mode-hide {
background-color: var(--light-bg);
color: var(--light-text);
}
/* Outline and generic styles */
body {
background-color: var(--bg);
color: var(--text);
font-family: sans-serif;
}
h1 {
width: 100%;
font-family: serif;
text-align: center;
}
#warn-no-local-storage {
display: none;
color: red;
}
.box {
width: 80%;
border-width: 2px;
border-style: solid;
border-color: var(--box-border);
border-radius: 10px;
margin: 0 auto 1em auto;
padding: 1em;
}
/* No character loaded box (AKA the welcome screen) */
#cont-no-loaded {
text-align: center;
}
</style>
</head>
<body>
<input id="color-scheme" type="checkbox">
<div class="color-scheme-wrapper">
<div id="color-scheme-changer">
<label for="color-scheme" id="color-scheme-toggle">
<span class="dark-mode-hide"></span>
<span class="light-mode-hide"></span>
</label>
</div>
<h1>
Cypher Player Assistant
<span id="warn-no-local-storage" title="Local Storage is not available. You can import/export data, but the app wont save it between sessions!">!</span>
</h1>
<div id="cont-no-loaded" class="box">
No character is loaded.
</div>
</div>
<script>
const checkLocalStorage = () => {
let storage;
try {
storage = window.localStorage;
const x = "__storage_test__";
storage.setItem(x, x);
storage.removeItem(x);
return true;
} catch (e) {
return (
e instanceof DOMException &&
e.name === "QuotaExceededError" &&
// acknowledge QuotaExceededError only if there's something already stored
storage &&
storage.length !== 0
);
}
};
document.addEventListener(
"DOMContentLoaded",
() => {
if (!checkLocalStorage()) {
document.getElementById("warn-no-local-storage").style.display = "initial";
alert("Local Storage is not available, saving and loading data will be unavailable.");
}
},
);
</script>
</body>
</html>