From 8acf1aca198aeb111315658199b7d6d1a9249609 Mon Sep 17 00:00:00 2001
From: King Omar <omar@bored.investments>
Date: Sat, 27 Jun 2026 02:49:33 +1000
Subject: [PATCH] Fix login images (remote R2 upload) and clarify signup UX
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Upload all 23 images to remote Cloudflare R2 (previous upload was local-only)
- Add 'How it works' panel at top of login page explaining 3-step flow
- Rename button to 'Login / Sign Up →' to make dual purpose obvious
- Label emoji/dictator/target sections as Step 1/2/3 of the key
- New users automatically get an account on first use of any unique combination

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 login.html | 57 +++++++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 50 insertions(+), 7 deletions(-)

diff --git a/login.html b/login.html
index 76fec24..946abaa 100644
--- a/login.html
+++ b/login.html
@@ -517,6 +517,43 @@
             color: var(--gray);
         }
 
+        .how-it-works {
+            background: #050505;
+            border: 1px solid #222;
+            border-bottom: 2px solid var(--primary);
+            padding: 16px 20px;
+            margin-bottom: 20px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+
+        .hiw-step {
+            display: flex;
+            align-items: flex-start;
+            gap: 12px;
+            font-family: 'Roboto Mono', monospace;
+            font-size: 12px;
+            color: #aaa;
+            line-height: 1.5;
+        }
+
+        .hiw-num {
+            background: var(--primary);
+            color: #000;
+            font-weight: 700;
+            font-size: 11px;
+            width: 20px;
+            height: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+            margin-top: 1px;
+        }
+
+        .hiw-step strong { color: #fff; }
+
         .anon-option {
             margin-top: 16px;
             padding: 14px 20px;
@@ -553,11 +590,17 @@
         <header>
             <h1>RADICAL</h1>
             <div class="tagline">THE UNDERGROUND PARLIAMENT</div>
-            <p>Enter your emoji private key to join the rebellion</p>
+            <p>Login or sign up — no email, no password, just your private key</p>
         </header>
 
+        <div class="how-it-works">
+            <div class="hiw-step"><span class="hiw-num">1</span><span><strong>New here?</strong> Pick any 5 emojis + your enemy + your target → your account is created on the spot.</span></div>
+            <div class="hiw-step"><span class="hiw-num">2</span><span><strong>Already have a key?</strong> Pick the same combination → you're logged back in.</span></div>
+            <div class="hiw-step"><span class="hiw-num">3</span><span><strong>Your combo IS your password.</strong> Nobody else can log in as you unless they know your exact 7 choices.</span></div>
+        </div>
+
         <div class="login-container">
-            <h2 class="login-title">Select 5 Emojis for Your Private Key</h2>
+            <h2 class="login-title">Step 1 — Pick 5 Emojis (your secret key)</h2>
             
             <div class="search-container">
                 <input type="text" id="emoji-search" class="search-input" placeholder="Search emojis...">
@@ -580,15 +623,15 @@
                 <!-- Emojis will be loaded here via JavaScript -->
             </div>
             
-            <h3 class="section-title">Choose Your Favorite Dictator</h3>
-            <p class="section-desc">Every revolutionary needs an enemy. Select yours:</p>
+            <h3 class="section-title">Step 2 — Choose Your Enemy</h3>
+            <p class="section-desc">Every revolutionary needs an enemy. Pick yours (part of your private key):</p>
             
             <div class="dictator-selection" id="dictator-selection">
                 <!-- Dictators will be loaded here via JavaScript -->
             </div>
             
-            <h3 class="section-title">Who Would You Kill?</h3>
-            <p class="section-desc">If you had one bullet in history's timeline, which freedom fighter deserves it?</p>
+            <h3 class="section-title">Step 3 — One Bullet in History</h3>
+            <p class="section-desc">If you could go back in time with one bullet, which freedom fighter would you take out? (also part of your key):</p>
             
             <div class="time-travel-targets" id="time-travel-targets">
                 <!-- Time travel targets will be loaded here via JavaScript -->
@@ -596,7 +639,7 @@
             
             <div class="action-buttons">
                 <button class="clear-btn" id="clear-btn">Clear</button>
-                <button class="login-btn" id="login-btn" disabled>Enter RADICAL</button>
+                <button class="login-btn" id="login-btn" disabled>Login / Sign Up →</button>
             </div>
             
             <div class="error-message" id="error-message"></div>