diff options
Diffstat (limited to 'js/quest-log/index.html')
| -rw-r--r-- | js/quest-log/index.html | 73 |
1 files changed, 64 insertions, 9 deletions
diff --git a/js/quest-log/index.html b/js/quest-log/index.html index 7858df8..d6901b3 100644 --- a/js/quest-log/index.html +++ b/js/quest-log/index.html @@ -6,7 +6,6 @@ <meta name="description" content="Tracking quests...different from a todo list in some secret and special way, I'm sure."> <title>Quest Log</title> <style> - /* Basic styling for the application */ @font-face { font-family: 'Shantell Sans'; src: url('./ShantellSans.woff2') format('woff2'); @@ -25,6 +24,8 @@ body { margin: 20px; font-size: 16px; + background-color: var(--background-color); + color: var(--text-color); } h1, h2, button { font-family: 'ChicagoFLF', sans-serif; @@ -38,40 +39,43 @@ flex: 1; padding: 10px; font-size: 16px; - border: 1px solid #ccc; + border: 1px solid var(--border-color); border-radius: 4px; box-sizing: border-box; + background-color: var(--quest-new-bg); + color: var(--text-color); } button { padding: 10px; font-size: 16px; - border: 1px solid #ccc; + border: 1px solid var(--border-color); border-radius: 4px; cursor: pointer; } #add-quest-button { - background-color: rgb(0, 128, 128);; - color: white; + background-color: var(--button-bg); + color: var(--button-text); margin-left: 10px; flex-shrink: 0; } #add-quest-button:hover { - background-color: rgba(0, 128, 128, 0.75);; + background-color: var(--button-hover); } .quest { padding: 10px; - border: 1px solid #ccc; + border: 1px solid var(--border-color); margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; + background-color: var(--quest-new-bg); } .quest.in-progress { - background-color: #ffffcc; + background-color: var(--quest-progress-bg); } .quest.complete { - background-color: #ccffcc; + background-color: var(--quest-complete-bg); } .hidden { display: none; @@ -79,9 +83,60 @@ button { margin-left: 10px; } + #theme-selector { + position: absolute; + top: 20px; + right: 20px; + padding: 5px; + border-radius: 4px; + border: 1px solid var(--border-color); + background-color: var(--quest-new-bg); + color: var(--text-color); + } + :root { + /* Light theme (default) */ + --background-color: #ffffff; + --text-color: #000000; + --border-color: #ccc; + --button-bg: rgb(0, 128, 128); + --button-hover: rgba(0, 128, 128, 0.75); + --quest-new-bg: #ffffff; + --quest-progress-bg: #ffffcc; + --quest-complete-bg: #ccffcc; + --button-text: white; + } + + [data-theme="dark"] { + --background-color: #240750; + --text-color: #ffffff; + --border-color: #344C64; + --button-bg: #57A6A1; + --button-hover: #577B8D; + --quest-new-bg: #344C64; + --quest-progress-bg: #577B8D; + --quest-complete-bg: #57A6A1; + --button-text: white; + } + + [data-theme="bubblegum"] { + --background-color: #FFC1CC; + --text-color: #4a4a4a; + --border-color: #FFC1CC; + --button-bg: #EBFFC1; + --button-hover: #C1FFF4; + --quest-new-bg: #ffffff; + --quest-progress-bg: #C1FFF4; + --quest-complete-bg: #D5C1FF; + --button-text: #4a4a4a; + } </style> </head> <body> + <select id="theme-selector" onchange="changeTheme(this.value)"> + <option value="light">Light</option> + <option value="dark">Dark</option> + <option value="bubblegum">Bubblegum</option> + </select> <h1>Quest Log</h1> <div id="quest-input"> <input type="text" id="new-quest" placeholder="Enter new quest" /> |