From 15369496ecc4f8bd2b170b9afc2c2c0558ae97ad Mon Sep 17 00:00:00 2001 From: Elizabeth Hunt Date: Sat, 13 Dec 2025 00:33:26 -0800 Subject: Init adelie --- static/css/style.css | 1096 ++++++++++++++++++++++++++++++++++++++++++++++ static/fonts/Maple.woff2 | Bin 0 -> 73444 bytes static/img/bg.png | Bin 0 -> 47672 bytes static/img/coffee.svg | 1 + static/img/favicon.ico | Bin 0 -> 32243 bytes static/js/script.js | 76 ++++ static/oneko/oneko.gif | Bin 0 -> 3316 bytes static/oneko/oneko.js | 284 ++++++++++++ 8 files changed, 1457 insertions(+) create mode 100644 static/css/style.css create mode 100644 static/fonts/Maple.woff2 create mode 100644 static/img/bg.png create mode 100644 static/img/coffee.svg create mode 100644 static/img/favicon.ico create mode 100644 static/js/script.js create mode 100644 static/oneko/oneko.gif create mode 100644 static/oneko/oneko.js (limited to 'static') diff --git a/static/css/style.css b/static/css/style.css new file mode 100644 index 0000000..c51d1e0 --- /dev/null +++ b/static/css/style.css @@ -0,0 +1,1096 @@ +:root { + --bg: #f9f5f0; + --bg-pattern: #f0ebe5; + --fg: #2a1810; + + /* Primary colors */ + --primary: #e8739d; + --primary-light: #f08db5; + --primary-dark: #d85980; + + /* Secondary colors */ + --secondary: #b19cd9; + --secondary-light: #c4b5fd; + --secondary-dark: #9d7eb8; + + /* Accent colors */ + --accent-brown: #8b6f47; + --accent-brown-light: #a8865b; + --accent-brown-dark: #6e5837; + + /* Status colors */ + --success: #4caf50; + --error: #d32f2f; + --warning: #ff9800; + --info: #2196f3; + + /* Neutral colors */ + --border: #2a1810; + --surface: #ffe8f0; + --surface-alt: #fdfcfb; + --muted: #6b5d54; + --border-light: #c0c0c0; + + /* Legacy aliases */ + --accent-pink: #e8739d; + --accent-lavender: #b19cd9; + + --space-xs: 0.5rem; + --space-sm: 1rem; + --space-md: 1.5rem; + --space-lg: 2rem; + --space-xl: 3rem; + + --border-width: 2px; + --border-style: solid; + + --font-mono: "Mono", monospace; + --line-height: 1.4; + + --shadow-sm: 1px 1px 0, 2px 2px 0, 1px 2px 0; + --shadow-md: 1px 1px 0, 2px 2px 0, 3px 3px 0, 2px 1px 0; + --shadow-lg: 1px 1px 0, 2px 2px 0, 3px 3px 0, 4px 4px 0, 2px 1px 0, 1px 2px 0, + 3px 1px 0; + --shadow-color: rgba(42, 24, 16, 0.5); + --shadow-box: 3px 3px 0 rgba(0, 0, 0, 0.2); + --shadow-button: 2px 2px 0 rgba(0, 0, 0, 0.2); + --highlight: rgba(255, 255, 255, 0.4); + --lowlight: rgba(42, 24, 16, 0.6); + + --content-max-width: 1000px; +} + +[data-theme="dark"] { + --bg: #35302a; + --bg-pattern: #2b2620; + --fg: #f5f5f5; + + --primary: #e8739d; + --primary-light: #f08db5; + --primary-dark: #d85980; + + --secondary: #b19cd9; + --secondary-light: #c4b5fd; + --secondary-dark: #9d7eb8; + + --accent-brown: #d4a574; + --accent-brown-light: #e8b896; + --accent-brown-dark: #b8885a; + + --border: #e8e8e8; + --border-light: #8b7d6b; + --surface: #3f3932; + --surface-alt: #47403a; + --muted: #a89f94; + + --accent-pink: #e8739d; + --accent-lavender: #b19cd9; + + --shadow-color: rgba(0, 0, 0, 0.8); + --highlight: rgba(255, 255, 255, 0.3); + --lowlight: rgba(0, 0, 0, 0.8); +} + +@font-face { + font-family: "Mono"; + src: url("/static/fonts/Maple.woff2") format("woff2"); + font-display: swap; + font-weight: normal; +} + +@supports (font-synthesis: none) { + @font-face { + font-family: "Mono"; + src: url("/static/fonts/Maple.woff2") format("woff2"); + font-synthesis: none; + } +} + +/* base */ + +* { + box-sizing: border-box; + margin: 0; + padding: 0; + cursor: + url('data:image/svg+xml;utf8,') + 0 0, + auto !important; +} + +html { + font-size: 16px; + background-color: var(--bg); + position: relative; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + height: 100vh; +} + +html::before { + content: ""; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: linear-gradient( + 45deg, + rgba(0, 0, 0, 0.2) 25%, + transparent 25%, + transparent 75%, + rgba(0, 0, 0, 0.2) 75% + ), + linear-gradient( + 45deg, + rgba(0, 0, 0, 0.2) 25%, + transparent 25%, + transparent 75%, + rgba(0, 0, 0, 0.2) 75% + ), + url("/static/img/bg.png"); + background-size: + 10px 10px, + 10px 10px, + auto; + background-position: + 0 0, + 5px 5px, + 0 0; + background-repeat: repeat; + opacity: 0.15; + z-index: -1; + pointer-events: none; +} + +body { + background: transparent; + color: var(--fg); + line-height: var(--line-height); + padding: var(--space-md); + padding-top: calc(var(--space-md) + 3rem); + max-width: var(--content-max-width); + margin: 0 auto; + font-family: var(--font-mono); + scrollbar-color: var(--accent-lavender) var(--bg); + scrollbar-width: thin; + display: flex; + flex-direction: column; + height: 100vh; +} + +/* webkit scrollbar (chrome, safari, edge) */ +::-webkit-scrollbar { + width: 12px; +} + +::-webkit-scrollbar-track { + background: var(--bg); + border: 2px solid var(--border-light); +} + +::-webkit-scrollbar-thumb { + background: var(--accent-lavender); + border: 2px outset var(--border-light); + box-shadow: + inset 1px 1px 0 var(--highlight), + inset -1px -1px 0 var(--lowlight); +} + +::-webkit-scrollbar-thumb:hover { + background: var(--accent-pink); +} + +.div-centered { + max-width: var(--content-max-width); + margin: auto; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + min-height: calc(100vh - 4.5rem); + text-align: justify; +} + +/* typography */ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: var(--font-mono); + font-weight: bold; + line-height: 1.2; + margin-bottom: var(--space-md); + border: 2px solid var(--border-light); + padding: var(--space-sm); + background-size: 4px 4px; + background-color: var(--accent-pink); + background-position: + 0 0, + 2px 2px; + color: var(--bg); +} + +h1 { + font-size: 2rem; + margin-bottom: var(--space-lg); +} +h2 { + font-size: 1.5rem; + background-size: 4px 4px; + background-position: + 0 0, + 2px 2px; + background-color: var(--accent-lavender); + margin-bottom: var(--space-md); +} +h3 { + font-size: 1.25rem; + background-size: 4px 4px; + background-position: + 0 0, + 2px 2px; + background-color: var(--accent-brown); + box-shadow: var(--shadow-box); +} +h4 { + font-size: 1.1rem; +} +h5 { + font-size: 1rem; +} +h6 { + font-size: 0.9rem; +} + +p { + margin-bottom: var(--space-sm); +} + +a { + color: var(--accent-pink); + text-decoration: none; + border-bottom: 2px solid var(--accent-pink); + font-weight: bold; +} + +a:hover { + background: var(--accent-pink); + color: var(--bg); +} + +small { + color: var(--muted); + font-size: 0.875rem; +} + +blockquote { + border-left: 3px solid var(--accent-brown); + padding-left: var(--space-md); + margin: var(--space-md) 0; + font-style: italic; + color: var(--muted); +} + +/* lists */ + +ul, +ol { + margin: var(--space-sm) 0; + padding-left: var(--space-lg); +} + +li { + margin-bottom: var(--space-xs); +} + +/* tables */ + +table { + width: 100%; + border-collapse: collapse; + margin: var(--space-md) 0; + border: 2px solid var(--border-light); + background: var(--bg); + box-shadow: + inset 1px 1px 0 rgba(255, 255, 255, 0.3), + inset -1px -1px 0 rgba(0, 0, 0, 0.6), + 3px 3px 0 rgba(0, 0, 0, 0.15); +} + +thead { + background: var(--secondary); + color: var(--bg); + font-weight: bold; +} + +th, +td { + padding: var(--space-xs) var(--space-sm); + border: 1px solid var(--border-light); + text-align: left; +} + +tbody tr:nth-child(odd) { + background: var(--surface-alt); +} + +tbody tr:nth-child(even) { + background: var(--bg); +} + +tbody tr:hover { + background: rgba(232, 115, 157, 0.1); +} + +/* code */ + +code { + background: var(--bg); + padding: 0.25rem 0.5rem; + border: 1px solid var(--border-light); + font-size: 0.875rem; + font-family: var(--font-mono); +} + +pre { + background: var(--bg); + border: 2px solid var(--border-light); + padding: var(--space-md); + margin: var(--space-md) 0; + overflow-x: auto; + box-shadow: + inset 1px 1px 0 rgba(255, 255, 255, 0.3), + inset -1px -1px 0 rgba(0, 0, 0, 0.6), + 3px 3px 0 rgba(0, 0, 0, 0.15); +} + +pre code { + background: transparent; + border: none; + padding: 0; + font-size: 0.875rem; +} + +/* dividers */ + +hr { + border: none; + border-top: 2px solid var(--border-light); + margin: var(--space-lg) 0; + height: 0; +} + +/* layout */ + +header { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 1000; + border-bottom: 2px outset var(--border-light); + padding: 0.4rem var(--space-md); + margin-bottom: 0; + background: var(--surface); + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-md); +} + +header h1 { + display: none; +} + +header::before { + content: ""; + display: inline-block; + width: 1.5rem; + height: 1.5rem; + background-image: url("/static/img/coffee.svg"); + background-size: contain; + background-repeat: no-repeat; + margin-right: 0.5rem; +} + +nav { + display: flex; + gap: var(--space-md); + flex-wrap: wrap; + align-items: center; + margin: 0; + flex: 1; +} + +nav a { + font-size: 0.85rem; + padding: 0.2rem 0.4rem; + color: var(--fg); + border-bottom: 2px solid var(--accent-pink); +} + +main { + flex: 1; +} + +article { + border: 2px solid var(--border-light); + padding: var(--space-md); + margin-bottom: var(--space-lg); + background: var(--surface); + box-shadow: + inset 1px 1px 0 rgba(255, 255, 255, 0.3), + inset -1px -1px 0 rgba(0, 0, 0, 0.6), + 4px 4px 0 rgba(0, 0, 0, 0.2), + 5px 5px 0 rgba(0, 0, 0, 0.08); +} + +article > :last-child { + margin-bottom: 0; +} + +article h2 { + margin: calc(var(--space-md) * -1) calc(var(--space-md) * -1) var(--space-md); + border-left: none; + border-right: none; + border-top: none; +} + +footer { + border: 2px solid var(--border-light); + padding: var(--space-md); + text-align: center; + background: var(--surface); + font-size: 0.875rem; + box-shadow: + inset 1px 1px 0 rgba(255, 255, 255, 0.3), + inset -1px -1px 0 rgba(0, 0, 0, 0.6), + 4px 4px 0 rgba(0, 0, 0, 0.2), + 5px 5px 0 rgba(0, 0, 0, 0.08); +} + +footer > :last-child { + margin-bottom: 0; +} + +/* components */ + +/* forms */ + +input, +textarea, +select { + font-family: var(--font-mono); + padding: var(--space-xs) var(--space-sm); + border: 2px outset var(--border-light); + background: var(--bg); + color: var(--fg); + font-size: 0.875rem; + box-shadow: + inset 1px 1px 0 var(--highlight), + inset -1px -1px 0 var(--lowlight), + inset 2px 2px 0 rgba(255, 255, 255, 0.2), + inset -2px -2px 0 rgba(0, 0, 0, 0.4); + transition: border-color 0.2s, box-shadow 0.2s; + width: 100%; + max-width: 100%; +} + +input::placeholder, +textarea::placeholder, +select::placeholder { + color: var(--muted); + opacity: 0.8; +} + +[data-theme="dark"] input::placeholder, +[data-theme="dark"] textarea::placeholder, +[data-theme="dark"] select::placeholder { + color: #b8b0a0; + opacity: 1; +} + +input:focus, +textarea:focus, +select:focus { + outline: none; + border-color: var(--primary); + box-shadow: + inset 1px 1px 0 var(--highlight), + inset -1px -1px 0 var(--lowlight), + 0 0 0 2px var(--primary); +} + +input:invalid, +textarea:invalid { + border-color: var(--error); +} + +input:invalid:focus, +textarea:invalid:focus { + box-shadow: + inset 1px 1px 0 var(--highlight), + inset -1px -1px 0 var(--lowlight), + 0 0 0 2px var(--error); +} + +textarea { + resize: vertical; + min-height: 4rem; + width: 100%; +} + +select { + cursor: pointer; + appearance: none; + background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a1810' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 0.5rem center; + background-size: 1.2em; + padding-right: 2.5rem; +} + +[data-theme="dark"] select { + background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5e6e8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); +} + +option { + background: var(--bg); + color: var(--fg); + padding: var(--space-sm); +} + +option:checked { + background: linear-gradient(var(--primary), var(--primary)); + color: var(--bg); +} + +input[type="checkbox"], +input[type="radio"] { + appearance: none; + width: 1.3rem; + height: 1.3rem; + min-width: 1.3rem; + min-height: 1.3rem; + padding: 0; + cursor: pointer; + margin: 0 0.5rem 0 0; + vertical-align: middle; + border: 2px solid var(--border-light); + box-shadow: inset 1px 1px 0 var(--highlight), inset -1px -1px 0 var(--lowlight); + background: var(--bg); + display: inline-flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + font-weight: normal; +} + +input[type="radio"] { + border-radius: 50%; +} + +input[type="checkbox"]:checked, +input[type="radio"]:checked { + background: var(--primary); +} + +label { + display: block; + margin-bottom: var(--space-xs); + font-weight: bold; + color: var(--fg); +} + +input[type="checkbox"] + label, +input[type="radio"] + label { + display: inline; + margin: 0; + font-weight: normal; +} + +/* toggle switches */ + +input[type="checkbox"].toggle { + appearance: none; + width: 2.8rem; + height: 1.6rem; + padding: 0; + margin: 0 0.5rem 0 0; + border: 2px outset var(--border-light); + background: var(--muted); + cursor: pointer; + position: relative; + vertical-align: middle; + box-shadow: + inset 1px 1px 0 rgba(255, 255, 255, 0.3), + inset -1px -1px 0 rgba(0, 0, 0, 0.6); + transition: background 0.2s; +} + +input[type="checkbox"].toggle:checked { + background: var(--primary); +} + +input[type="checkbox"].toggle::after { + content: ""; + position: absolute; + width: 0.6rem; + height: 0.6rem; + background: var(--surface); + border: 2px outset var(--border-light); + top: 50%; + transform: translateY(-50%); + left: 0.2rem; + transition: left 0.2s; + box-shadow: + inset 1px 1px 0 var(--highlight), + inset -1px -1px 0 var(--lowlight); +} + +input[type="checkbox"].toggle:checked::after { + left: 1.5rem; +} + +[data-theme="dark"] input[type="checkbox"].toggle { + background: var(--secondary); +} + +[data-theme="dark"] input[type="checkbox"].toggle:checked { + background: var(--primary); +} + +[data-theme="dark"] input[type="checkbox"].toggle::after { + background: var(--accent-brown-light); +} + +#theme-toggle::before { + content: "☾"; + position: absolute; + right: 0.4rem; + top: 50%; + transform: translateY(-50%); + font-size: 0.9rem; + line-height: 1; + color: var(--bg); + transition: opacity 0.2s; +} + +#theme-toggle:checked::before { + content: "☀"; + right: auto; + left: 0.4rem; +} + +/* range sliders */ + +input[type="range"] { + width: 100%; + height: 2.2rem; + background: transparent; + cursor: pointer; + appearance: none; + vertical-align: middle; +} + +input[type="range"]::-webkit-slider-thumb { + appearance: none; + width: 1.5rem; + height: 1rem; + margin-top: -0.25rem; + background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 50%, var(--primary-dark) 100%); + border: 2px outset var(--border-light); + cursor: pointer; + box-shadow: + inset 1px 1px 0 var(--highlight), + inset -1px -1px 0 var(--lowlight), + 2px 2px 0 rgba(0, 0, 0, 0.3), + 3px 3px 0 rgba(0, 0, 0, 0.1); +} + +input[type="range"]::-webkit-slider-thumb:active { + box-shadow: + inset 1px 1px 0 var(--lowlight), + inset -1px -1px 0 var(--highlight), + 1px 1px 0 rgba(0, 0, 0, 0.2); +} + +input[type="range"]::-moz-range-thumb { + width: 1.5rem; + height: 0.8rem; + margin-top: -0.15rem; + background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 50%, var(--primary-dark) 100%); + border: 2px outset var(--border-light); + cursor: pointer; + box-shadow: + inset 1px 1px 0 var(--highlight), + inset -1px -1px 0 var(--lowlight), + 2px 2px 0 rgba(0, 0, 0, 0.3), + 3px 3px 0 rgba(0, 0, 0, 0.1); + border-radius: 0.3rem; +} + +input[type="range"]::-moz-range-thumb:active { + box-shadow: + inset 1px 1px 0 var(--lowlight), + inset -1px -1px 0 var(--highlight), + 1px 1px 0 rgba(0, 0, 0, 0.2); +} + +input[type="range"]::-webkit-slider-runnable-track { + background: linear-gradient(180deg, + #c0c0c0 0%, + #e8e8e8 1px, + #dfdfdf 2px, + #d0d0d0 100%); + border: 2px inset var(--border-light); + height: 0.8rem; + box-shadow: + inset 2px 2px 0 rgba(255, 255, 255, 0.8), + inset -2px -2px 0 rgba(0, 0, 0, 0.4), + inset 1px 1px 0 rgba(0, 0, 0, 0.1); +} + +input[type="range"]::-moz-range-track { + background: transparent; + border: none; +} + +input[type="range"]::-moz-range-progress { + background: linear-gradient(180deg, + var(--secondary-light) 0%, + var(--secondary) 50%, + var(--secondary-dark) 100%); + height: 0.8rem; + border: 2px inset var(--border-light); + box-shadow: + inset 2px 2px 0 rgba(255, 255, 255, 0.6), + inset -2px -2px 0 rgba(0, 0, 0, 0.3); +} + +fieldset { + border: 2px solid var(--border-light); + padding: var(--space-md); + margin: var(--space-md) 0; + background: var(--surface); + box-shadow: + inset 1px 1px 0 rgba(255, 255, 255, 0.3), + inset -1px -1px 0 rgba(0, 0, 0, 0.6); +} + +fieldset > :last-child { + margin-bottom: 0; +} + +legend { + padding: 0 var(--space-xs); + margin-left: calc(var(--space-xs) * -1); + font-weight: bold; + color: var(--fg); + background: var(--surface); +} + +/* buttons */ + +button { + font-family: var(--font-mono); + font-weight: bold; + padding: var(--space-xs) var(--space-sm); + border: 2px outset var(--border-light); + background: var(--secondary); + color: var(--bg); + font-size: 0.875rem; + box-shadow: + inset 1px 1px 0 rgba(255, 255, 255, 0.6), + inset -1px -1px 0 rgba(0, 0, 0, 0.8), + 3px 3px 0 rgba(0, 0, 0, 0.3), + 4px 4px 0 rgba(0, 0, 0, 0.1); + transition: + transform 0.05s, + box-shadow 0.05s; + cursor: pointer; +} + +button:hover { + background: var(--secondary-dark); + transform: translate(1px, 1px); + box-shadow: + inset 1px 1px 0 rgba(255, 255, 255, 0.6), + inset -1px -1px 0 rgba(0, 0, 0, 0.8), + 2px 2px 0 rgba(0, 0, 0, 0.3), + 3px 3px 0 rgba(0, 0, 0, 0.1); +} + +button:active { + transform: translate(4px, 4px); + box-shadow: + inset 1px 1px 0 rgba(0, 0, 0, 0.6), + inset -1px -1px 0 rgba(255, 255, 255, 0.3); +} + +/* button variants */ + +button.primary { + background: var(--primary); + color: var(--bg); +} + +button.primary:hover { + background: var(--primary-dark); +} + +button.secondary { + background: var(--secondary); + color: var(--bg); +} + +button.secondary:hover { + background: var(--secondary-dark); +} + +button.success { + background: var(--success); + color: white; +} + +button.success:hover { + background: #45a049; +} + +button.error { + background: var(--error); + color: white; +} + +button.error:hover { + background: #da190b; +} + +button.warning { + background: var(--warning); + color: white; +} + +button.warning:hover { + background: #e68900; +} + +button.info { + background: var(--info); + color: white; +} + +button.info:hover { + background: #0b7dda; +} + +button.contrast { + background: var(--fg); + color: var(--bg); +} + +button.contrast:hover { + background: var(--muted); +} + +button:disabled { + opacity: 0.6; + cursor: not-allowed; + transform: none !important; +} + +/* button groups */ + +.button-group { + display: inline-flex; + border: 2px solid var(--border-light); + box-shadow: + inset 1px 1px 0 rgba(255, 255, 255, 0.3), + inset -1px -1px 0 rgba(0, 0, 0, 0.6), + 3px 3px 0 rgba(0, 0, 0, 0.15); +} + +.button-group button { + border: none; + margin: 0; + border-radius: 0; + box-shadow: none; +} + +.button-group button:not(:last-child) { + border-right: 1px solid var(--border-light); +} + +.button-group button:hover { + box-shadow: none; + transform: none; +} + +.button-group button:active { + box-shadow: none; + transform: none; +} + +/* alerts & messages */ + +.alert { + padding: var(--space-md); + margin: var(--space-md) 0; + border: 2px solid var(--border-light); + border-left: 4px solid var(--info); + background: var(--surface); + box-shadow: + inset 1px 1px 0 rgba(255, 255, 255, 0.3), + inset -1px -1px 0 rgba(0, 0, 0, 0.6), + 3px 3px 0 rgba(0, 0, 0, 0.15); +} + +.alert.success { + border-left-color: var(--success); + background-color: rgba(76, 175, 80, 0.1); +} + +.alert.error { + border-left-color: var(--error); + background-color: rgba(244, 67, 54, 0.1); +} + +.alert.warning { + border-left-color: var(--warning); + background-color: rgba(255, 152, 0, 0.1); +} + +.alert.info { + border-left-color: var(--info); + background-color: rgba(33, 150, 243, 0.1); +} + +/* badges & pills */ + +.badge { + display: inline-block; + padding: 0.25rem 0.5rem; + margin: 0 0.25rem; + background: var(--secondary); + color: var(--bg); + font-size: 0.75rem; + font-weight: bold; + border: 1px solid var(--border-light); +} + +.badge.primary { + background: var(--primary); +} + +.badge.success { + background: var(--success); + color: white; +} + +.badge.error { + background: var(--error); + color: white; +} + +.badge.warning { + background: var(--warning); + color: white; +} + +.badge.info { + background: var(--info); + color: white; +} + +.badge.contrast { + background: var(--fg); + color: var(--bg); +} + +/* helpers */ + +.text-success { + color: var(--success); + font-weight: bold; +} + +.text-error { + color: var(--error); + font-weight: bold; +} + +.text-warning { + color: var(--warning); + font-weight: bold; +} + +.text-info { + color: var(--info); + font-weight: bold; +} + +.text-muted { + color: var(--muted); +} + +.text-contrast { + color: var(--fg); + font-weight: bold; +} + +.text-center { + text-align: center; +} + +.text-right { + text-align: right; +} + +.text-left { + text-align: left; +} + +.mt-xs { margin-top: var(--space-xs); } +.mt-sm { margin-top: var(--space-sm); } +.mt-md { margin-top: var(--space-md); } +.mt-lg { margin-top: var(--space-lg); } +.mt-xl { margin-top: var(--space-xl); } + +.mb-xs { margin-bottom: var(--space-xs); } +.mb-sm { margin-bottom: var(--space-sm); } +.mb-md { margin-bottom: var(--space-md); } +.mb-lg { margin-bottom: var(--space-lg); } +.mb-xl { margin-bottom: var(--space-xl); } + +.mx-auto { + margin-left: auto; + margin-right: auto; +} + +.py-md { + padding-top: var(--space-md); + padding-bottom: var(--space-md); +} + +#theme-toggle { + margin-left: auto; + margin-bottom: 0; +} + +/* fairy dust */ + +@keyframes fairy-float { + 0% { + opacity: 1; + transform: translateY(0) scale(1); + } + 100% { + opacity: 0; + transform: translateY(40px) scale(0.5); + } +} diff --git a/static/fonts/Maple.woff2 b/static/fonts/Maple.woff2 new file mode 100644 index 0000000..d3641fe Binary files /dev/null and b/static/fonts/Maple.woff2 differ diff --git a/static/img/bg.png b/static/img/bg.png new file mode 100644 index 0000000..ea94170 Binary files /dev/null and b/static/img/bg.png differ diff --git a/static/img/coffee.svg b/static/img/coffee.svg new file mode 100644 index 0000000..6af3eb0 --- /dev/null +++ b/static/img/coffee.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/favicon.ico b/static/img/favicon.ico new file mode 100644 index 0000000..e441116 Binary files /dev/null and b/static/img/favicon.ico differ diff --git a/static/js/script.js b/static/js/script.js new file mode 100644 index 0000000..d04c09d --- /dev/null +++ b/static/js/script.js @@ -0,0 +1,76 @@ +(() => { + const toggleButton = document.getElementById("theme-toggle"); + const html = document.documentElement; + + const sessionTheme = sessionStorage.getItem("theme"); + const systemPrefersDark = window.matchMedia( + "(prefers-color-scheme: dark)", + ).matches; + + const initialTheme = sessionTheme || (systemPrefersDark ? "dark" : "light"); + + if (initialTheme === "dark") { + html.setAttribute("data-theme", "dark"); + toggleButton.checked = true; + } + + toggleButton.addEventListener("change", () => { + const theme = html.getAttribute("data-theme"); + + if (theme === "dark") { + html.removeAttribute("data-theme"); + sessionStorage.setItem("theme", "light"); + toggleButton.checked = false; + } else { + html.setAttribute("data-theme", "dark"); + sessionStorage.setItem("theme", "dark"); + toggleButton.checked = true; + } + }); +})(); + +(() => { + const colors = [ + "#ff69b4", + "#b19cd9", + "#8b6f47", + "#ff85c0", + "#c4b5fd", + "#d4a574", + ]; + const shapes = ["❀", "✿", "✽", "✾", "✻", "❊", "❋", "✼"]; + + document.addEventListener("mousemove", (e) => { + createParticle(e.clientX, e.clientY); + }); + + const createParticle = (x, y) => { + const particle = document.createElement("div"); + particle.className = "fairy-dust"; + + const shape = shapes[Math.floor(Math.random() * shapes.length)]; + const size = Math.random() * 8 + 6; + const color = colors[Math.floor(Math.random() * colors.length)]; + const offsetX = (Math.random() - 0.5) * 20; + const offsetY = (Math.random() - 0.5) * 20; + const rotation = Math.random() * 360; + + particle.textContent = shape; + particle.style.cssText = ` + position: fixed; + left: ${x + offsetX}px; + top: ${y + offsetY}px; + font-size: ${size}px; + color: ${color}; + opacity: 0.4; + pointer-events: none; + z-index: 9001; /* it's over 9000 */ + line-height: 1; + transform: rotate(${rotation}deg); + animation: fairy-float 0.8s ease-out forwards; + `; + + document.body.appendChild(particle); + setTimeout(() => particle.remove(), 800); + }; +})(); diff --git a/static/oneko/oneko.gif b/static/oneko/oneko.gif new file mode 100644 index 0000000..a009c2c Binary files /dev/null and b/static/oneko/oneko.gif differ diff --git a/static/oneko/oneko.js b/static/oneko/oneko.js new file mode 100644 index 0000000..058f168 --- /dev/null +++ b/static/oneko/oneko.js @@ -0,0 +1,284 @@ +// oneko.js: https://github.com/adryd325/oneko.js + +(function oneko() { + const isReducedMotion = + window.matchMedia(`(prefers-reduced-motion: reduce)`) === true || + window.matchMedia(`(prefers-reduced-motion: reduce)`).matches === true; + + if (isReducedMotion) return; + + const nekoEl = document.createElement("div"); + let persistPosition = true; + + let nekoPosX = 32; + let nekoPosY = 32; + + let mousePosX = 0; + let mousePosY = 0; + + let frameCount = 0; + let idleTime = 0; + let idleAnimation = null; + let idleAnimationFrame = 0; + + const nekoSpeed = 10; + const spriteSets = { + idle: [[-3, -3]], + alert: [[-7, -3]], + scratchSelf: [ + [-5, 0], + [-6, 0], + [-7, 0], + ], + scratchWallN: [ + [0, 0], + [0, -1], + ], + scratchWallS: [ + [-7, -1], + [-6, -2], + ], + scratchWallE: [ + [-2, -2], + [-2, -3], + ], + scratchWallW: [ + [-4, 0], + [-4, -1], + ], + tired: [[-3, -2]], + sleeping: [ + [-2, 0], + [-2, -1], + ], + N: [ + [-1, -2], + [-1, -3], + ], + NE: [ + [0, -2], + [0, -3], + ], + E: [ + [-3, 0], + [-3, -1], + ], + SE: [ + [-5, -1], + [-5, -2], + ], + S: [ + [-6, -3], + [-7, -2], + ], + SW: [ + [-5, -3], + [-6, -1], + ], + W: [ + [-4, -2], + [-4, -3], + ], + NW: [ + [-1, 0], + [-1, -1], + ], + }; + + function init() { + let nekoFile = "/static/oneko/oneko.gif"; + const curScript = document.currentScript; + if (curScript && curScript.dataset.cat) { + nekoFile = curScript.dataset.cat; + } + if (curScript && curScript.dataset.persistPosition) { + if (curScript.dataset.persistPosition === "") { + persistPosition = true; + } else { + persistPosition = JSON.parse( + curScript.dataset.persistPosition.toLowerCase(), + ); + } + } + + if (persistPosition) { + let storedNeko = JSON.parse(window.localStorage.getItem("oneko")); + if (storedNeko !== null) { + nekoPosX = storedNeko.nekoPosX; + nekoPosY = storedNeko.nekoPosY; + mousePosX = storedNeko.mousePosX; + mousePosY = storedNeko.mousePosY; + frameCount = storedNeko.frameCount; + idleTime = storedNeko.idleTime; + idleAnimation = storedNeko.idleAnimation; + idleAnimationFrame = storedNeko.idleAnimationFrame; + nekoEl.style.backgroundPosition = storedNeko.bgPos; + } + } + + nekoEl.id = "oneko"; + nekoEl.ariaHidden = true; + nekoEl.style.width = "32px"; + nekoEl.style.height = "32px"; + nekoEl.style.position = "fixed"; + nekoEl.style.pointerEvents = "none"; + nekoEl.style.imageRendering = "pixelated"; + nekoEl.style.left = `${nekoPosX - 16}px`; + nekoEl.style.top = `${nekoPosY - 16}px`; + nekoEl.style.zIndex = 2147483647; + + nekoEl.style.backgroundImage = `url(${nekoFile})`; + + document.body.appendChild(nekoEl); + + document.addEventListener("mousemove", function (event) { + mousePosX = event.clientX; + mousePosY = event.clientY; + }); + + if (persistPosition) { + window.addEventListener("beforeunload", function (event) { + window.localStorage.setItem( + "oneko", + JSON.stringify({ + nekoPosX: nekoPosX, + nekoPosY: nekoPosY, + mousePosX: mousePosX, + mousePosY: mousePosY, + frameCount: frameCount, + idleTime: idleTime, + idleAnimation: idleAnimation, + idleAnimationFrame: idleAnimationFrame, + bgPos: nekoEl.style.backgroundPosition, + }), + ); + }); + } + + window.requestAnimationFrame(onAnimationFrame); + } + + let lastFrameTimestamp; + + function onAnimationFrame(timestamp) { + // Stops execution if the neko element is removed from DOM + if (!nekoEl.isConnected) { + return; + } + if (!lastFrameTimestamp) { + lastFrameTimestamp = timestamp; + } + if (timestamp - lastFrameTimestamp > 100) { + lastFrameTimestamp = timestamp; + frame(); + } + window.requestAnimationFrame(onAnimationFrame); + } + + function setSprite(name, frame) { + const sprite = spriteSets[name][frame % spriteSets[name].length]; + nekoEl.style.backgroundPosition = `${sprite[0] * 32}px ${sprite[1] * 32}px`; + } + + function resetIdleAnimation() { + idleAnimation = null; + idleAnimationFrame = 0; + } + + function idle() { + idleTime += 1; + + // every ~ 20 seconds + if ( + idleTime > 10 && + Math.floor(Math.random() * 200) == 0 && + idleAnimation == null + ) { + let avalibleIdleAnimations = ["sleeping", "scratchSelf"]; + if (nekoPosX < 32) { + avalibleIdleAnimations.push("scratchWallW"); + } + if (nekoPosY < 32) { + avalibleIdleAnimations.push("scratchWallN"); + } + if (nekoPosX > window.innerWidth - 32) { + avalibleIdleAnimations.push("scratchWallE"); + } + if (nekoPosY > window.innerHeight - 32) { + avalibleIdleAnimations.push("scratchWallS"); + } + idleAnimation = + avalibleIdleAnimations[ + Math.floor(Math.random() * avalibleIdleAnimations.length) + ]; + } + + switch (idleAnimation) { + case "sleeping": + if (idleAnimationFrame < 8) { + setSprite("tired", 0); + break; + } + setSprite("sleeping", Math.floor(idleAnimationFrame / 4)); + if (idleAnimationFrame > 192) { + resetIdleAnimation(); + } + break; + case "scratchWallN": + case "scratchWallS": + case "scratchWallE": + case "scratchWallW": + case "scratchSelf": + setSprite(idleAnimation, idleAnimationFrame); + if (idleAnimationFrame > 9) { + resetIdleAnimation(); + } + break; + default: + setSprite("idle", 0); + return; + } + idleAnimationFrame += 1; + } + + function frame() { + frameCount += 1; + const diffX = nekoPosX - mousePosX; + const diffY = nekoPosY - mousePosY; + const distance = Math.sqrt(diffX ** 2 + diffY ** 2); + + if (distance < nekoSpeed || distance < 48) { + idle(); + return; + } + + idleAnimation = null; + idleAnimationFrame = 0; + + if (idleTime > 1) { + setSprite("alert", 0); + // count down after being alerted before moving + idleTime = Math.min(idleTime, 7); + idleTime -= 1; + return; + } + + let direction; + direction = diffY / distance > 0.5 ? "N" : ""; + direction += diffY / distance < -0.5 ? "S" : ""; + direction += diffX / distance > 0.5 ? "W" : ""; + direction += diffX / distance < -0.5 ? "E" : ""; + setSprite(direction, frameCount); + + nekoPosX -= (diffX / distance) * nekoSpeed; + nekoPosY -= (diffY / distance) * nekoSpeed; + + nekoPosX = Math.min(Math.max(16, nekoPosX), window.innerWidth - 16); + nekoPosY = Math.min(Math.max(16, nekoPosY), window.innerHeight - 16); + + nekoEl.style.left = `${nekoPosX - 16}px`; + nekoEl.style.top = `${nekoPosY - 16}px`; + } + + init(); +})(); -- cgit v1.2.3-70-g09d2