Fix login images (remote R2 upload) and clarify signup UX

- 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>
This commit is contained in:
King Omar 2026-06-27 02:49:33 +10:00
parent 2769a29f11
commit 8acf1aca19

View file

@ -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>