Skip to content
This repository was archived by the owner on Jun 19, 2026. It is now read-only.

Commit 5ed7bb5

Browse files
random-anon333random-anon333
authored
feat: add murica mode (#10)
1 parent 27b4338 commit 5ed7bb5

3 files changed

Lines changed: 279 additions & 1 deletion

File tree

‎index.html‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,26 @@
99
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1010
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800&display=swap" rel="stylesheet">
1111
<link rel="stylesheet" href="styles/main.css">
12+
<script>
13+
(function () {
14+
var hash = (location.hash || '').slice(1).toLowerCase();
15+
var q = (new URLSearchParams(location.search)).get('theme');
16+
if (hash === 'murica' || q === 'murica') {
17+
document.documentElement.setAttribute('data-theme', 'murica');
18+
} else {
19+
var t = localStorage.getItem('donation-theme');
20+
if (t === 'murica') document.documentElement.setAttribute('data-theme', 'murica');
21+
}
22+
})();
23+
</script>
1224
</head>
1325
<body>
1426
<div class="page">
1527
<header class="header">
28+
<nav class="theme-switcher" aria-label="Theme">
29+
<button type="button" class="theme-btn" data-theme="cypher" aria-pressed="true">cypher</button>
30+
<button type="button" class="theme-btn" data-theme="murica" aria-pressed="false">murica</button>
31+
</nav>
1632
<h1 data-text="header.title"></h1>
1733
<p class="tagline" data-text="header.tagline"></p>
1834
</header>
@@ -27,7 +43,8 @@ <h1 data-text="header.title"></h1>
2743
</main>
2844

2945
<footer class="footnote">
30-
you can also show your support by <a href="https://github.com/sponsors/von-steinkirch" target="_blank" rel="noopener noreferrer">sponsoring me</a>, by using my <a href="https://sundaychats.vercel.app/" target="_blank" rel="noopener noreferrer">counseling services</a>, or by subscribing to my <a href="https://logic-13.vercel.app/" target="_blank" rel="noopener noreferrer">sci-fi "choose-your-adventure" storybook</a> or my <a href="https://future-ai-app.vercel.app/" target="_blank" rel="noopener noreferrer">astro-prediciton app</a>.
46+
you can also show your support by <a href="https://github.com/sponsors/von-steinkirch" target="_blank" rel="noopener noreferrer">sponsoring me</a>, by using my <a href="https://sundaychats.vercel.app/" target="_blank" rel="noopener noreferrer">counseling services</a>, or by subscribing to my <a href="https://logic-13.vercel.app/" target="_blank" rel="noopener noreferrer">sci-fi "choose-your-adventure" storybook</a> or my <a href="https://future-ai-app.vercel.app/" target="_blank" rel="noopener noreferrer">astro-prediction app</a>.
47+
3148
</footer>
3249
</div>
3350

‎scripts/main.js‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,66 @@
11
(function () {
22
'use strict';
33

4+
var THEME_KEY = 'donation-theme';
5+
var themes = ['cypher', 'murica'];
6+
7+
function themeFromUrl() {
8+
var hash = (location.hash || '').slice(1).toLowerCase();
9+
var q = (new URLSearchParams(location.search)).get('theme');
10+
if (hash === 'murica' || q === 'murica') return 'murica';
11+
return null;
12+
}
13+
14+
function getStoredTheme() {
15+
try {
16+
var t = localStorage.getItem(THEME_KEY);
17+
return themes.indexOf(t) >= 0 ? t : 'cypher';
18+
} catch (e) {
19+
return 'cypher';
20+
}
21+
}
22+
23+
function getInitialTheme() {
24+
return themeFromUrl() || getStoredTheme();
25+
}
26+
27+
function setTheme(theme) {
28+
if (theme === 'cypher') {
29+
document.documentElement.removeAttribute('data-theme');
30+
} else {
31+
document.documentElement.setAttribute('data-theme', theme);
32+
}
33+
try {
34+
localStorage.setItem(THEME_KEY, theme);
35+
} catch (e) {}
36+
if (theme === 'murica') {
37+
if (location.hash !== '#murica') history.replaceState(null, '', location.pathname + location.search + '#murica');
38+
} else {
39+
if (location.hash === '#murica') history.replaceState(null, '', location.pathname + location.search);
40+
}
41+
document.querySelectorAll('.theme-btn').forEach(function (btn) {
42+
btn.setAttribute('aria-pressed', btn.getAttribute('data-theme') === theme ? 'true' : 'false');
43+
});
44+
}
45+
46+
var initial = getInitialTheme();
47+
if (initial === 'cypher') {
48+
document.documentElement.removeAttribute('data-theme');
49+
} else {
50+
document.documentElement.setAttribute('data-theme', initial);
51+
}
52+
document.querySelectorAll('.theme-btn').forEach(function (btn) {
53+
btn.setAttribute('aria-pressed', btn.getAttribute('data-theme') === initial ? 'true' : 'false');
54+
btn.addEventListener('click', function () {
55+
var theme = this.getAttribute('data-theme');
56+
if (themes.indexOf(theme) >= 0) setTheme(theme);
57+
});
58+
});
59+
window.addEventListener('hashchange', function () {
60+
var fromUrl = themeFromUrl();
61+
if (fromUrl) setTheme(fromUrl);
62+
});
63+
464
var text = typeof window.APP_TEXT !== 'undefined' ? window.APP_TEXT : {};
565
var config = typeof window.APP_CONFIG !== 'undefined' ? window.APP_CONFIG : {};
666
var get = window.Donation && window.Donation.get;

‎styles/main.css‎

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,41 @@ body::before {
6666
gap: clamp(0.5rem, 1.5vw, 0.85rem);
6767
}
6868

69+
/* Theme switcher — top of header */
70+
.theme-switcher {
71+
display: flex;
72+
justify-content: center;
73+
gap: 0.35rem;
74+
margin-bottom: 1rem;
75+
}
76+
77+
.theme-btn {
78+
font-family: var(--font);
79+
font-size: 0.7rem;
80+
font-weight: 600;
81+
letter-spacing: 0.04em;
82+
padding: 0.4rem 0.75rem;
83+
border-radius: 8px;
84+
border: 1px solid var(--neon-border);
85+
background: rgba(192, 132, 255, 0.08);
86+
color: var(--text-muted);
87+
cursor: pointer;
88+
transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
89+
}
90+
91+
.theme-btn:hover {
92+
color: var(--text);
93+
border-color: var(--neon);
94+
background: rgba(192, 132, 255, 0.15);
95+
}
96+
97+
.theme-btn[aria-pressed="true"] {
98+
color: var(--neon-bright);
99+
border-color: var(--neon);
100+
background: rgba(192, 132, 255, 0.2);
101+
box-shadow: 0 0 15px var(--neon-glow);
102+
}
103+
69104
/* Header — title at top */
70105
.header {
71106
text-align: center;
@@ -458,3 +493,169 @@ body::before {
458493
color: var(--neon);
459494
}
460495

496+
/* ========== Murica — America flag neon (red, white, blue) ========== */
497+
html[data-theme="murica"] {
498+
--bg: #0c1222;
499+
--surface: #0f1729;
500+
--surface-hover: #142038;
501+
--text: #f8fafc;
502+
--text-muted: #cbd5e1;
503+
--neon: #ef4444;
504+
--neon-bright: #f87171;
505+
--neon-glow: rgba(239, 68, 68, 0.5);
506+
--neon-glow-strong: rgba(239, 68, 68, 0.7);
507+
--neon-border: rgba(59, 130, 246, 0.5);
508+
--crypto: #22c55e;
509+
}
510+
511+
html[data-theme="murica"] body::before {
512+
background:
513+
radial-gradient(
514+
ellipse 70% 50% at 15% 30%,
515+
rgba(239, 68, 68, 0.28) 0%,
516+
rgba(239, 68, 68, 0.08) 40%,
517+
transparent 60%
518+
),
519+
radial-gradient(
520+
ellipse 65% 45% at 85% 70%,
521+
rgba(239, 68, 68, 0.18) 0%,
522+
transparent 50%
523+
),
524+
radial-gradient(
525+
ellipse 70% 50% at 80% 20%,
526+
rgba(59, 130, 246, 0.2) 0%,
527+
transparent 50%
528+
),
529+
radial-gradient(
530+
ellipse 85% 45% at 50% -5%,
531+
rgba(255, 255, 255, 0.1) 0%,
532+
transparent 55%
533+
);
534+
}
535+
536+
/* Murica: more red — title with strong red glow */
537+
html[data-theme="murica"] .header h1 {
538+
color: #ffffff;
539+
text-shadow:
540+
0 0 15px rgba(255, 255, 255, 0.4),
541+
0 0 35px rgba(239, 68, 68, 0.7),
542+
0 0 55px rgba(239, 68, 68, 0.4),
543+
0 0 45px rgba(59, 130, 246, 0.35);
544+
}
545+
546+
html[data-theme="murica"] .tagline {
547+
color: #fca5a5;
548+
text-shadow: 0 0 12px rgba(239, 68, 68, 0.25);
549+
}
550+
551+
html[data-theme="murica"] .card {
552+
border: 1px solid rgba(239, 68, 68, 0.35);
553+
box-shadow:
554+
0 0 25px rgba(239, 68, 68, 0.2),
555+
0 0 20px rgba(59, 130, 246, 0.1),
556+
0 0 40px rgba(255, 255, 255, 0.03),
557+
inset 0 0 35px rgba(239, 68, 68, 0.06);
558+
}
559+
560+
html[data-theme="murica"] .card:hover {
561+
border-color: rgba(239, 68, 68, 0.6);
562+
box-shadow:
563+
0 0 40px rgba(239, 68, 68, 0.4),
564+
0 0 35px rgba(59, 130, 246, 0.2),
565+
0 0 55px rgba(255, 255, 255, 0.06),
566+
inset 0 0 45px rgba(239, 68, 68, 0.1);
567+
}
568+
569+
html[data-theme="murica"] .card h2,
570+
html[data-theme="murica"] .preferred-item-label {
571+
color: #fca5a5;
572+
text-shadow:
573+
0 0 12px rgba(255, 255, 255, 0.3),
574+
0 0 25px rgba(239, 68, 68, 0.65),
575+
0 0 35px rgba(239, 68, 68, 0.35);
576+
}
577+
578+
html[data-theme="murica"] .card-icon,
579+
html[data-theme="murica"] .card-fiat .card-icon,
580+
html[data-theme="murica"] .card-crypto .card-icon,
581+
html[data-theme="murica"] .card-preferred .card-icon {
582+
color: #fca5a5;
583+
border-color: rgba(239, 68, 68, 0.55);
584+
box-shadow:
585+
0 0 18px rgba(239, 68, 68, 0.5),
586+
0 0 25px rgba(255, 255, 255, 0.12);
587+
}
588+
589+
html[data-theme="murica"] .card p {
590+
color: var(--text-muted);
591+
}
592+
593+
html[data-theme="murica"] .fiat-option {
594+
border-top-color: rgba(239, 68, 68, 0.25);
595+
}
596+
597+
html[data-theme="murica"] .btn {
598+
border-color: rgba(239, 68, 68, 0.5);
599+
background: rgba(239, 68, 68, 0.08);
600+
box-shadow: 0 0 18px rgba(239, 68, 68, 0.3);
601+
}
602+
603+
html[data-theme="murica"] .btn:hover {
604+
border-color: #ef4444;
605+
background: rgba(239, 68, 68, 0.18);
606+
box-shadow:
607+
0 0 30px rgba(239, 68, 68, 0.55),
608+
0 0 45px rgba(239, 68, 68, 0.25),
609+
0 0 35px rgba(59, 130, 246, 0.15);
610+
}
611+
612+
html[data-theme="murica"] .theme-btn[aria-pressed="true"] {
613+
color: #ffffff;
614+
border-color: #ef4444;
615+
background: rgba(239, 68, 68, 0.25);
616+
box-shadow: 0 0 15px rgba(239, 68, 68, 0.5), 0 0 20px rgba(255, 255, 255, 0.1);
617+
}
618+
619+
html[data-theme="murica"] .theme-btn:hover {
620+
border-color: rgba(239, 68, 68, 0.6);
621+
background: rgba(239, 68, 68, 0.12);
622+
}
623+
624+
html[data-theme="murica"] .theme-btn[aria-pressed="false"] {
625+
color: #fca5a5;
626+
border-color: rgba(239, 68, 68, 0.3);
627+
}
628+
629+
html[data-theme="murica"] .copy-btn {
630+
color: #f87171;
631+
background: rgba(239, 68, 68, 0.1);
632+
border-color: rgba(239, 68, 68, 0.45);
633+
box-shadow: 0 0 10px rgba(239, 68, 68, 0.2);
634+
}
635+
636+
html[data-theme="murica"] .copy-btn:hover {
637+
color: #fca5a5;
638+
background: rgba(239, 68, 68, 0.2);
639+
box-shadow: 0 0 18px rgba(239, 68, 68, 0.45);
640+
}
641+
642+
html[data-theme="murica"] .footnote a {
643+
color: #cbd5e1;
644+
}
645+
646+
html[data-theme="murica"] .footnote a:hover {
647+
color: #f87171;
648+
text-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
649+
}
650+
651+
html[data-theme="murica"] .crypto-address {
652+
color: var(--text);
653+
border-color: rgba(239, 68, 68, 0.25);
654+
box-shadow: 0 0 8px rgba(239, 68, 68, 0.06);
655+
}
656+
657+
html[data-theme="murica"] .fiat-option-title {
658+
color: #fca5a5;
659+
text-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
660+
}
661+

0 commit comments

Comments
 (0)