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:
parent
2769a29f11
commit
8acf1aca19
1 changed files with 50 additions and 7 deletions
57
login.html
57
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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue