diff options
Diffstat (limited to 'js')
| -rw-r--r-- | js/pixel-art/pixel/index.html | 42 | ||||
| -rw-r--r-- | js/quest-log/index.html | 73 | ||||
| -rw-r--r-- | js/quest-log/quest.js | 16 |
3 files changed, 113 insertions, 18 deletions
diff --git a/js/pixel-art/pixel/index.html b/js/pixel-art/pixel/index.html index 3d48f5e..7e3df56 100644 --- a/js/pixel-art/pixel/index.html +++ b/js/pixel-art/pixel/index.html @@ -12,15 +12,31 @@ overflow: hidden; background-color: teal; } + button { padding: 0.5rem 0.75rem; font-size: 1rem; cursor: pointer; min-height: 2.75rem; } + + button.reset-btn { + cursor: pointer; + margin: 0; + padding: 0.25rem 0.5rem; + border: none; + background-color: tomato; + color: #fafafa; + min-height: 2rem; + font-size: 0.875rem; + border-radius: 0.25rem; + margin-top: 0.5rem; + } + #canvas { display: block; } + #palette { position: fixed; top: 0.625rem; @@ -91,13 +107,20 @@ display: flex; gap: 0.3125rem; margin-top: 0.625rem; + justify-content: space-between; + width: 100%; } .zoom-controls button { flex: 1; - padding: 0.5rem; - min-height: 2.75rem; - font-size: 1.125rem; + padding: 0.25rem; + height: 2rem; + display: flex; + align-items: center; + justify-content: center; + font-size: 1rem; + min-height: unset; + width: unset; } .pan-controls { @@ -115,20 +138,21 @@ } .pan-controls button { - padding: 0.5rem; - width: 2.75rem; - height: 2.75rem; + padding: 0.25rem; + width: 2rem; + height: 2rem; display: flex; align-items: center; justify-content: center; - font-size: 1.125rem; + font-size: 1rem; + min-height: unset; } #centerViewBtn { margin-top: 0.625rem; } - @media (max-width: 48rem) { /* 768px */ + @media (max-width: 48rem) { #palette { width: 12.5rem; top: auto; @@ -182,7 +206,7 @@ <button id="exportBtn">Export as PNG</button> <button id="saveProjectBtn">Save Project</button> <button id="loadProjectBtn">Load Project</button> - <button id="resetBtn">Reset</button> + <button id="resetBtn" class="reset-btn">Reset</button> </div> <script src="app.js"></script> </body> 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" /> diff --git a/js/quest-log/quest.js b/js/quest-log/quest.js index 0ba5a9d..8acd391 100644 --- a/js/quest-log/quest.js +++ b/js/quest-log/quest.js @@ -1,5 +1,6 @@ document.addEventListener("DOMContentLoaded", () => { loadQuests(); + loadTheme(); document.getElementById("new-quest").addEventListener("keypress", handleEnterKey(addQuest)); }); @@ -149,3 +150,18 @@ const getShowCompletedState = () => const toggleCompletedButtonText = showCompleted => document.querySelector("button[onclick='toggleCompleted()']").innerText = showCompleted ? "Hide Completed Quests" : "View Completed Quests"; + +const loadTheme = () => { + const savedTheme = localStorage.getItem('theme') || 'light'; + applyTheme(savedTheme); + document.getElementById('theme-selector').value = savedTheme; +}; + +const changeTheme = (theme) => { + applyTheme(theme); + localStorage.setItem('theme', theme); +}; + +const applyTheme = (theme) => { + document.documentElement.setAttribute('data-theme', theme); +}; |