blob: d6901b398327db0311652e5517e9da4d40259937 (
plain) (
tree)
|
|
<!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>
|