diff options
| author | elioat <elioat@tilde.institute> | 2024-08-21 22:47:15 -0400 |
|---|---|---|
| committer | elioat <elioat@tilde.institute> | 2024-08-21 22:47:15 -0400 |
| commit | 8ff754e4de53a227b0d02ac0e9b00e40d5cd49cc (patch) | |
| tree | bc4cb2e5d53d7fc63c17fa915e7e7d4903fd5a96 /js/quest-log/index.html | |
| parent | e34a8c351bdb1e4681b68f0bbe57d3628d48a381 (diff) | |
| download | tour-8ff754e4de53a227b0d02ac0e9b00e40d5cd49cc.tar.gz | |
*
Diffstat (limited to 'js/quest-log/index.html')
| -rw-r--r-- | js/quest-log/index.html | 94 |
1 files changed, 94 insertions, 0 deletions
diff --git a/js/quest-log/index.html b/js/quest-log/index.html new file mode 100644 index 0000000..7858df8 --- /dev/null +++ b/js/quest-log/index.html @@ -0,0 +1,94 @@ +<!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> + /* Basic styling for the application */ + @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; + } + 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 #ccc; + border-radius: 4px; + box-sizing: border-box; + } + button { + padding: 10px; + font-size: 16px; + border: 1px solid #ccc; + border-radius: 4px; + cursor: pointer; + } + #add-quest-button { + background-color: rgb(0, 128, 128);; + color: white; + margin-left: 10px; + flex-shrink: 0; + } + #add-quest-button:hover { + background-color: rgba(0, 128, 128, 0.75);; + } + .quest { + padding: 10px; + border: 1px solid #ccc; + margin-bottom: 10px; + display: flex; + justify-content: space-between; + align-items: center; + box-sizing: border-box; + } + .quest.in-progress { + background-color: #ffffcc; + } + .quest.complete { + background-color: #ccffcc; + } + .hidden { + display: none; + } + button { + margin-left: 10px; + } + </style> +</head> +<body> + <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> |