Fix login page: real images from R2, working login flow, anonymous option
- Upload 23 person images to R2 memes bucket (all from Wikimedia Commons) - Replace all imgur/old-worker URLs with theradicalparty.com/memes/*.jpg - Fix login redirect: stores session in localStorage, redirects to / after 2.5s - Add 'Continue anonymously' option explaining anon vs AEC-linked login - Tighten success screen: shows emoji key, enemy, target then redirects Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
King Omar
parent
05e5604b09
commit
2769a29f11
1 changed files with 90 additions and 64 deletions
154
login.html
154
login.html
|
|
@ -516,6 +516,36 @@
|
|||
font-size: 12px;
|
||||
color: var(--gray);
|
||||
}
|
||||
|
||||
.anon-option {
|
||||
margin-top: 16px;
|
||||
padding: 14px 20px;
|
||||
border: 1px solid #222;
|
||||
background: #050505;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
color: var(--gray);
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
}
|
||||
|
||||
.anon-option span { display: block; }
|
||||
|
||||
.anon-link {
|
||||
display: inline-block;
|
||||
margin: 8px 0 6px;
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.anon-link:hover { text-decoration: underline; }
|
||||
|
||||
.anon-note {
|
||||
font-size: 11px;
|
||||
color: #444;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -574,7 +604,13 @@
|
|||
</div>
|
||||
|
||||
<div class="create-account">
|
||||
Your 5-emoji combination works as both login and signup. <a href="#" title="Learn more about RADICAL security">How it works</a>
|
||||
Your 5-emoji combination is your private key — it's both your login and your account. No email, no password, no tracking. <a href="#how" title="Learn more about RADICAL security">How it works</a>
|
||||
</div>
|
||||
|
||||
<div class="anon-option">
|
||||
<span>Don't want to log in?</span>
|
||||
<a href="/" class="anon-link">Continue anonymously →</a>
|
||||
<span class="anon-note">Anonymous users can still vote and post petitions. Login ties your activity to your AEC membership for verified petition signatures.</span>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
|
|
@ -607,21 +643,21 @@
|
|||
|
||||
// Dictator options
|
||||
const dictators = [
|
||||
{ id: 'stalin', name: 'Joseph Stalin', image: 'https://theradicalparty.com/memes/stalin.avif' },
|
||||
{ id: 'stalin', name: 'Joseph Stalin', image: 'https://theradicalparty.com/memes/stalin.jpg' },
|
||||
{ id: 'hitler', name: 'Adolf Hitler', image: 'https://theradicalparty.com/memes/hitler.jpg' },
|
||||
{ id: 'kim', name: 'Kim Jong-un', image: 'https://theradicalparty.com/memes/kim.png' },
|
||||
{ id: 'kim', name: 'Kim Jong-un', image: 'https://theradicalparty.com/memes/kim.jpg' },
|
||||
{ id: 'mao', name: 'Mao Zedong', image: 'https://theradicalparty.com/memes/mao.jpg' },
|
||||
{ id: 'castro', name: 'Fidel Castro', image: 'https://theradicalparty.com/memes/fidel.jpg' },
|
||||
{ id: 'putin', name: 'Vladimir Putin', image: 'https://theradicalparty.com/memes/putin.jpg' },
|
||||
{ id: 'mussolini', name: 'Benito Mussolini', image: 'https://theradicalparty.com/memes/benito.jpg' },
|
||||
{ id: 'pol', name: 'Pol Pot', image: 'https://i.imgur.com/AZRJW2n.jpg' },
|
||||
{ id: 'kanye', name: 'Kanye West', image: 'https://theradicalparty.com/memes/ye.png' },
|
||||
{ id: 'khomeini', name: 'Ayatollah Khomeini', image: 'https://i.imgur.com/M7OPgQd.jpg' },
|
||||
{ id: 'netanyahu', name: 'Benjamin Netanyahu', image: 'https://i.imgur.com/9ZKJFy8.jpg' },
|
||||
{ id: 'zelensky', name: 'Volodymyr Zelensky', image: 'https://i.imgur.com/jANrPvB.jpg' },
|
||||
{ id: 'gaddafi', name: 'Muammar Gaddafi', image: 'https://i.imgur.com/UHrA5zc.jpg' },
|
||||
{ id: 'shapiro', name: 'Ben Shapiro', image: 'https://i.imgur.com/hbhMVsF.jpg' },
|
||||
{ id: 'musk', name: 'Elon Musk', image: 'https://i.imgur.com/1MFoUlY.jpg' }
|
||||
{ id: 'pol', name: 'Pol Pot', image: 'https://theradicalparty.com/memes/pol.jpg' },
|
||||
{ id: 'kanye', name: 'Kanye West', image: 'https://theradicalparty.com/memes/ye.jpg' },
|
||||
{ id: 'khomeini', name: 'Ayatollah Khomeini', image: 'https://theradicalparty.com/memes/khomeini.jpg' },
|
||||
{ id: 'netanyahu', name: 'Benjamin Netanyahu', image: 'https://theradicalparty.com/memes/netanyahu.jpg' },
|
||||
{ id: 'zelensky', name: 'Volodymyr Zelensky', image: 'https://theradicalparty.com/memes/zelensky.jpg' },
|
||||
{ id: 'gaddafi', name: 'Muammar Gaddafi', image: 'https://theradicalparty.com/memes/gaddafi.jpg' },
|
||||
{ id: 'shapiro', name: 'Ben Shapiro', image: 'https://theradicalparty.com/memes/shapiro.jpg' },
|
||||
{ id: 'musk', name: 'Elon Musk', image: 'https://theradicalparty.com/memes/musk.jpg' }
|
||||
];
|
||||
|
||||
// Global variables
|
||||
|
|
@ -634,14 +670,14 @@
|
|||
|
||||
// Time travel targets
|
||||
const timeTargets = [
|
||||
{ id: 'mlk', name: 'Martin Luther King Jr.', desc: 'Civil rights leader who advocated for nonviolent protest', image: 'https://i.imgur.com/tYGZIel.jpg' },
|
||||
{ id: 'gandhi', name: 'Mahatma Gandhi', desc: 'Led India to independence through nonviolent civil disobedience', image: 'https://i.imgur.com/5TvW7rZ.jpg' },
|
||||
{ id: 'mandela', name: 'Nelson Mandela', desc: 'Anti-apartheid revolutionary and first Black president of South Africa', image: 'https://i.imgur.com/QN8Q44F.jpg' },
|
||||
{ id: 'jesus', name: 'Jesus Christ', desc: 'Religious leader who preached equality, compassion, and rebellion against systems of power', image: 'https://i.imgur.com/SsQhQmj.jpg' },
|
||||
{ id: 'xmen', name: 'Malcolm X', desc: 'African American Muslim minister and human rights activist', image: 'https://i.imgur.com/XOdV6KN.jpg' },
|
||||
{ id: 'chavez', name: 'Cesar Chavez', desc: 'Labor leader and civil rights activist for farm workers', image: 'https://i.imgur.com/KNtBwSF.jpg' },
|
||||
{ id: 'milk', name: 'Harvey Milk', desc: 'One of the first openly gay elected officials in the US', image: 'https://i.imgur.com/kF3bXq5.jpg' },
|
||||
{ id: 'tubman', name: 'Harriet Tubman', desc: 'Abolitionist who rescued enslaved people via the Underground Railroad', image: 'https://i.imgur.com/iE0xg58.jpg' }
|
||||
{ id: 'mlk', name: 'Martin Luther King Jr.', desc: 'Civil rights leader who advocated for nonviolent protest', image: 'https://theradicalparty.com/memes/mlk.jpg' },
|
||||
{ id: 'gandhi', name: 'Mahatma Gandhi', desc: 'Led India to independence through nonviolent civil disobedience', image: 'https://theradicalparty.com/memes/gandhi.jpg' },
|
||||
{ id: 'mandela', name: 'Nelson Mandela', desc: 'Anti-apartheid revolutionary and first Black president of South Africa', image: 'https://theradicalparty.com/memes/mandela.jpg' },
|
||||
{ id: 'jesus', name: 'Jesus Christ', desc: 'Religious leader who preached equality, compassion, and rebellion against systems of power', image: 'https://theradicalparty.com/memes/jesus.jpg' },
|
||||
{ id: 'xmen', name: 'Malcolm X', desc: 'African American Muslim minister and human rights activist', image: 'https://theradicalparty.com/memes/malcolm.jpg' },
|
||||
{ id: 'chavez', name: 'Cesar Chavez', desc: 'Labor leader and civil rights activist for farm workers', image: 'https://theradicalparty.com/memes/chavez.jpg' },
|
||||
{ id: 'milk', name: 'Harvey Milk', desc: 'One of the first openly gay elected officials in the US', image: 'https://theradicalparty.com/memes/harvey.jpg' },
|
||||
{ id: 'tubman', name: 'Harriet Tubman', desc: 'Abolitionist who rescued enslaved people via the Underground Railroad', image: 'https://theradicalparty.com/memes/tubman.jpg' }
|
||||
];
|
||||
|
||||
// Document ready
|
||||
|
|
@ -1122,24 +1158,22 @@ function attemptLogin() {
|
|||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
showSuccess(data.isNewUser ?
|
||||
`New key registered! Welcome to RADICAL, ${data.username}!` :
|
||||
`Welcome back, ${data.username}!`);
|
||||
|
||||
// Get dictator name
|
||||
const dictator = dictators.find(d => d.id === selectedDictator);
|
||||
const dictatorName = dictator ? dictator.name : 'Unknown Dictator';
|
||||
|
||||
// Get time target name
|
||||
const timeTarget = timeTargets.find(t => t.id === selectedTimeTarget);
|
||||
const timeTargetName = timeTarget ? timeTarget.name : 'Unknown Target';
|
||||
|
||||
// Show success animation/redirect
|
||||
animateLoginSuccess(data.isNewUser, data.username, dictatorName, timeTargetName);
|
||||
|
||||
// Store user session (you may want to implement this)
|
||||
// Store session in localStorage so main site recognises the logged-in user
|
||||
localStorage.setItem('radical_user_id', data.userId);
|
||||
localStorage.setItem('radical_username', data.username);
|
||||
// Overwrite the anonymous user so their activity syncs
|
||||
localStorage.setItem('radical_user', JSON.stringify({ id: data.userId, name: data.username }));
|
||||
|
||||
showSuccess(data.isNewUser ?
|
||||
`Key registered! Welcome to RADICAL, ${data.username}!` :
|
||||
`Welcome back, ${data.username}!`);
|
||||
|
||||
const dictator = dictators.find(d => d.id === selectedDictator);
|
||||
const dictatorName = dictator ? dictator.name : 'Unknown';
|
||||
const timeTarget = timeTargets.find(t => t.id === selectedTimeTarget);
|
||||
const timeTargetName = timeTarget ? timeTarget.name : 'Unknown';
|
||||
|
||||
animateLoginSuccess(data.isNewUser, data.username, dictatorName, timeTargetName);
|
||||
} else {
|
||||
showError(data.message || 'Login failed. Please try again.');
|
||||
loginBtn.disabled = false;
|
||||
|
|
@ -1232,52 +1266,44 @@ function attemptLogin() {
|
|||
const timeTarget = timeTargets.find(t => t.id === selectedTimeTarget);
|
||||
const timeTargetImage = timeTarget ? timeTarget.image : '';
|
||||
|
||||
// Simulate redirect after animation
|
||||
setTimeout(() => {
|
||||
// Show a message instead of reloading
|
||||
document.querySelector('.login-container').innerHTML = `
|
||||
<div style="text-align: center; padding: 40px 20px;">
|
||||
<h2 style="color: var(--primary); margin-bottom: 20px;">🚀 Welcome to RADICAL, ${username}!</h2>
|
||||
<p style="margin-bottom: 20px;">
|
||||
${isNewUser ?
|
||||
'Your profile has been registered. Welcome to the underground parliament!' :
|
||||
'You have successfully accessed the underground parliament.'}
|
||||
<p style="margin-bottom: 20px; color: #aaa;">
|
||||
${isNewUser ?
|
||||
'Your private key is registered. Welcome to the underground parliament!' :
|
||||
'Access granted. Redirecting you now...'}
|
||||
</p>
|
||||
|
||||
|
||||
<div style="margin: 30px 0;">
|
||||
<div style="text-align: center; margin-bottom: 20px;">
|
||||
<p style="margin-bottom: 10px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px;">YOUR PRIVATE KEY</p>
|
||||
<div style="font-size: 36px; line-height: 1.2;">${emojiDisplay}</div>
|
||||
<p style="margin-bottom: 10px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #666;">YOUR PRIVATE KEY</p>
|
||||
<div style="font-size: 36px; line-height: 1.2; border: 1px solid #333; padding: 12px; display: inline-block;">${emojiDisplay}</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div style="display: flex; justify-content: center; align-items: center; gap: 30px; margin-top: 30px;">
|
||||
<div style="text-align: center;">
|
||||
<p style="margin-bottom: 10px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px;">YOUR ENEMY</p>
|
||||
<img src="${dictatorImage}" style="width: 80px; height: 80px; object-fit: cover; border: 1px solid var(--primary);">
|
||||
<p style="margin-top: 5px; font-size: 12px;">${dictatorName}</p>
|
||||
<p style="margin-bottom: 10px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #666;">YOUR ENEMY</p>
|
||||
<img src="${dictatorImage}" style="width: 80px; height: 80px; object-fit: cover; border: 2px solid var(--primary);" onerror="this.style.display='none'">
|
||||
<p style="margin-top: 5px; font-size: 12px; color: #aaa;">${dictatorName}</p>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center;">
|
||||
<p style="margin-bottom: 10px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px;">YOUR TARGET</p>
|
||||
<img src="${timeTargetImage}" style="width: 80px; height: 80px; object-fit: cover; border: 1px solid var(--primary); border-radius: 50%;">
|
||||
<p style="margin-top: 5px; font-size: 12px;">${timeTargetName}</p>
|
||||
<p style="margin-bottom: 10px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #666;">YOUR TARGET</p>
|
||||
<img src="${timeTargetImage}" style="width: 80px; height: 80px; object-fit: cover; border: 2px solid var(--primary); border-radius: 50%;" onerror="this.style.display='none'">
|
||||
<p style="margin-top: 5px; font-size: 12px; color: #aaa;">${timeTargetName}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p style="color: var(--primary); font-size: 12px; margin-top: 10px; margin-bottom: 25px;">Remember your emoji combination - it's the only way to access your account!</p>
|
||||
|
||||
<div style="margin-top: 30px;">
|
||||
<p>Establishing secure connection...</p>
|
||||
<div class="loader" style="display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(255,0,153,.3); border-radius: 50%; border-top-color: var(--primary); animation: spin 1s ease-in-out infinite; margin-top: 10px;"></div>
|
||||
</div>
|
||||
|
||||
<p style="color: #555; font-size: 11px; margin: 16px 0;">Remember your emoji combination — it's the only way back in.</p>
|
||||
<p style="color: var(--primary); font-size: 13px;">Entering the underground parliament...</p>
|
||||
<div style="display:inline-block;width:20px;height:20px;border:3px solid rgba(255,0,153,.3);border-radius:50%;border-top-color:var(--primary);animation:spin 1s ease-in-out infinite;margin-top:10px;"></div>
|
||||
</div>
|
||||
<style>
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
<style>@keyframes spin { to { transform: rotate(360deg); } }</style>
|
||||
`;
|
||||
// Redirect to main site after 2.5 seconds
|
||||
setTimeout(() => { window.location.href = '/'; }, 2500);
|
||||
}, 1000);
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue