diff --git a/templates/base.html b/templates/base.html index 12e7efe..5ca9b53 100644 --- a/templates/base.html +++ b/templates/base.html @@ -121,13 +121,23 @@ .pin-display { font-family: 'Courier New', monospace; - color: #ff9900; - font-size: 2rem; - letter-spacing: 0.3rem; + font-size: 3rem; + font-weight: bold; + letter-spacing: 0.75rem; background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; + display: inline-block; + line-height: 1; + } + + .pin-container { + background: rgba(0, 0, 0, 0.3); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 0.75rem; + padding: 1.5rem 2rem; + display: inline-block; } .alert-message { diff --git a/templates/generate.html b/templates/generate.html index 87b7cf9..ad2222a 100644 --- a/templates/generate.html +++ b/templates/generate.html @@ -88,8 +88,12 @@
YOUR STATIC PIN
-
{{ pin }}
- Use this {{ pin_length }}-digit PIN every day +
+
{{ pin }}
+
+
+ Use this {{ pin_length }}-digit PIN every day +

@@ -215,7 +219,7 @@ document.getElementById('pinSelect').addEventListener('change', updateEntropy); // Loading state for generate button document.querySelector('form').addEventListener('submit', function() { const btn = document.getElementById('generateBtn'); - const storiesChecked = document.getElementById('generateStories').checked; + const storiesChecked = document.getElementById('generateStories')?.checked; btn.disabled = true; if (storiesChecked) { btn.innerHTML = 'Generating stories...';