<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <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> @font-face { font-family: 'Shantell Sans'; src: url('./ShantellSans.woff2') format('woff2'); font-weight: normal; font-style: normal; } @font-face { font-family: 'ChicagoFLF'; src: url('./ChicagoFLF.ttf') format('truetype'); font-weight: normal; font-style: normal; } body, input[type="text"] { font-family: 'Shantell Sans', sans-serif; } body { margin: 20px; font-size: 16px; background-color: var(--background-color); color: var(--text-color); } h1, h2, button { font-family: 'ChicagoFLF', sans-serif; } #quest-input { margin-bottom: 20px; display: flex; justify-content: space-between; } #new-quest { flex: 1; padding: 10px; font-size: 16px; 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 var(--border-color); border-radius: 4px; cursor: pointer; } #add-quest-button { background-color: var(--button-bg); color: var(--button-text); margin-left: 10px; flex-shrink: 0; } #add-quest-button:hover { background-color: var(--button-hover); } .quest { padding: 10px; 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: var(--quest-progress-bg); } .quest.complete { background-color: var(--quest-complete-bg); } .hidden { display: none; } 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" /> <button id="add-quest-button" onclick="addQuest()">Add Quest</button> </div> <div id="quest-list"></div> <button onclick="toggleCompleted()">View Completed Quests</button> <script src="quest.js"></script> </body> </html>