diff --git a/www/index.html b/www/index.html index 2292c3b..e4912ce 100644 --- a/www/index.html +++ b/www/index.html @@ -96,6 +96,16 @@ padding: 5px; animation: warning-blink 1s infinite; } + .dustin-face { + font-size: 3em; + margin-bottom: 10px; + animation: face-shake 3s infinite; + } + @keyframes face-shake { + 0%, 100% { transform: rotate(0deg); } + 25% { transform: rotate(5deg); } + 75% { transform: rotate(-5deg); } + } @keyframes warning-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } @@ -197,6 +207,60 @@ .stat-value.yellow { color: var(--terminal-yellow); } + .rage-meter { + height: 10px; + background: rgba(255, 0, 0, 0.2); + border-radius: 5px; + margin-top: 10px; + overflow: hidden; + } + .rage-fill { + height: 100%; + background: linear-gradient(90deg, var(--terminal-red), var(--terminal-amber)); + border-radius: 5px; + transition: width 0.5s ease; + } + .shit-list { + margin-top: 20px; + padding-top: 15px; + border-top: 1px solid var(--terminal-green); + } + .shit-list-title { + color: var(--terminal-yellow); + font-weight: bold; + margin-bottom: 10px; + font-size: 1.1em; + } + .shit-item { + padding: 8px 0; + border-bottom: 1px dashed rgba(0, 255, 0, 0.3); + color: var(--terminal-text); + font-size: 0.9em; + } + .shit-item:last-child { + border-bottom: none; + } + .footer { + text-align: center; + margin-top: 30px; + padding-top: 20px; + border-top: 1px solid var(--terminal-green); + color: var(--terminal-cyan); + font-size: 0.9em; + } + .footer p { + margin: 10px 0; + } + .easter-egg { + color: var(--terminal-magenta); + cursor: pointer; + text-decoration: underline; + margin-top: 15px; + display: inline-block; + } + .easter-egg:hover { + color: var(--terminal-red); + } .main-content { display: grid; grid-template-columns: 1fr; @@ -223,6 +287,20 @@ max-height: 600px; } } + .sidebar { + background: rgba(0, 0, 0, 0.8); + border: 2px solid var(--terminal-green); + padding: 20px; + border-radius: 5px; + display: flex; + flex-direction: column; + gap: 20px; + } + @media (min-width: 768px) { + .sidebar { + padding: 25px; + } + } .log-header { display: flex; flex-direction: column; @@ -267,6 +345,122 @@ background: var(--terminal-cyan); color: var(--terminal-bg); } + .control-btn.danger { + border-color: var(--terminal-red); + color: var(--terminal-red); + } + .control-btn.danger:hover { + background: var(--terminal-red); + color: var(--terminal-bg); + } + .form-group { + margin-bottom: 20px; + } + .form-group label { + display: block; + color: var(--terminal-yellow); + margin-bottom: 8px; + font-weight: bold; + } + .form-group select, + .form-group textarea { + width: 100%; + background: rgba(0, 0, 0, 0.7); + border: 1px solid var(--terminal-green); + color: var(--terminal-text); + font-family: 'IBM Plex Mono', monospace; + padding: 10px; + border-radius: 3px; + font-size: 0.9em; + } + .form-group select:focus, + .form-group textarea:focus { + outline: none; + border-color: var(--terminal-cyan); + box-shadow: 0 0 10px var(--terminal-cyan); + } + .form-group textarea { + min-height: 100px; + resize: vertical; + } + .blame-generator, .apology-generator { + background: rgba(0, 0, 0, 0.7); + border: 2px solid var(--terminal-green); + padding: 20px; + border-radius: 5px; + margin-bottom: 20px; + } + .blame-title, .apology-title { + color: var(--terminal-red); + font-weight: bold; + text-align: center; + margin-bottom: 15px; + font-size: 1.2em; + text-transform: uppercase; + letter-spacing: 1px; + border-bottom: 1px solid var(--terminal-green); + padding-bottom: 10px; + } + .apology-title { + color: var(--terminal-magenta); + } + .apology-display { + background: rgba(0, 0, 0, 0.9); + border: 1px solid var(--terminal-magenta); + padding: 15px; + border-radius: 3px; + min-height: 80px; + margin-bottom: 15px; + font-style: italic; + color: var(--terminal-text); + } + .submit-btn, .generate-btn, .nuclear-option { + background: var(--terminal-bg); + border: 2px solid var(--terminal-red); + color: var(--terminal-red); + padding: 12px 20px; + cursor: pointer; + font-family: 'IBM Plex Mono', monospace; + font-weight: bold; + border-radius: 5px; + transition: all 0.3s; + width: 100%; + margin-top: 15px; + text-transform: uppercase; + letter-spacing: 1px; + } + .submit-btn:hover { + background: var(--terminal-red); + color: var(--terminal-bg); + box-shadow: 0 0 15px var(--terminal-red); + } + .generate-btn { + border-color: var(--terminal-magenta); + color: var(--terminal-magenta); + } + .generate-btn:hover { + background: var(--terminal-magenta); + color: var(--terminal-bg); + box-shadow: 0 0 15px var(--terminal-magenta); + } + .nuclear-option { + border-color: var(--terminal-amber); + color: var(--terminal-amber); + font-size: 1.1em; + padding: 15px; + margin-top: 20px; + animation: nuclear-pulse 2s infinite; + } + .nuclear-option:hover { + background: var(--terminal-amber); + color: var(--terminal-bg); + box-shadow: 0 0 20px var(--terminal-amber); + animation: none; + } + @keyframes nuclear-pulse { + 0%, 100% { box-shadow: 0 0 10px var(--terminal-amber); } + 50% { box-shadow: 0 0 25px var(--terminal-amber); } + } .incident { margin-bottom: 15px; padding: 15px; @@ -381,7 +575,267 @@
Click here if you actually like Dustin (you monster)