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

feat: add murica mode #10

Merged
random-anon333 merged 3 commits into from
Mar 11, 2026
Merged

feat: add murica mode #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2efb78d
feat: add storybook and astro-prediction links to footnote (#9)
random-anon333 Mar 9, 2026
ec51769
Update donation page (index, scripts, styles)
random-anon333 Mar 11, 2026
6cad57c
Merge branch 'main' into update-donation-changes
random-anon333 Mar 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 18 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,26 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles/main.css">
<script>
(function () {
var hash = (location.hash || '').slice(1).toLowerCase();
var q = (new URLSearchParams(location.search)).get('theme');
if (hash === 'murica' || q === 'murica') {
document.documentElement.setAttribute('data-theme', 'murica');
} else {
var t = localStorage.getItem('donation-theme');
if (t === 'murica') document.documentElement.setAttribute('data-theme', 'murica');
}
})();
</script>
</head>
<body>
<div class="page">
<header class="header">
<nav class="theme-switcher" aria-label="Theme">
<button type="button" class="theme-btn" data-theme="cypher" aria-pressed="true">cypher</button>
<button type="button" class="theme-btn" data-theme="murica" aria-pressed="false">murica</button>
</nav>
<h1 data-text="header.title"></h1>
<p class="tagline" data-text="header.tagline"></p>
</header>
Expand All @@ -27,7 +43,8 @@ <h1 data-text="header.title"></h1>
</main>

<footer class="footnote">
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>.
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>.

</footer>
</div>

Expand Down
60 changes: 60 additions & 0 deletions scripts/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,66 @@
(function () {
'use strict';

var THEME_KEY = 'donation-theme';
var themes = ['cypher', 'murica'];

function themeFromUrl() {
var hash = (location.hash || '').slice(1).toLowerCase();
var q = (new URLSearchParams(location.search)).get('theme');
if (hash === 'murica' || q === 'murica') return 'murica';
return null;
}

function getStoredTheme() {
try {
var t = localStorage.getItem(THEME_KEY);
return themes.indexOf(t) >= 0 ? t : 'cypher';
} catch (e) {

Check warning on line 18 in scripts/main.js

View workflow job for this annotation

GitHub Actions / check 

'e' is defined but never used
return 'cypher';
}
}

function getInitialTheme() {
return themeFromUrl() || getStoredTheme();
}

function setTheme(theme) {
if (theme === 'cypher') {
document.documentElement.removeAttribute('data-theme');
} else {
document.documentElement.setAttribute('data-theme', theme);
}
try {
localStorage.setItem(THEME_KEY, theme);
} catch (e) {}

Check warning on line 35 in scripts/main.js

View workflow job for this annotation

GitHub Actions / check 

'e' is defined but never used
if (theme === 'murica') {
if (location.hash !== '#murica') history.replaceState(null, '', location.pathname + location.search + '#murica');
} else {
if (location.hash === '#murica') history.replaceState(null, '', location.pathname + location.search);
}
document.querySelectorAll('.theme-btn').forEach(function (btn) {
btn.setAttribute('aria-pressed', btn.getAttribute('data-theme') === theme ? 'true' : 'false');
});
}

var initial = getInitialTheme();
if (initial === 'cypher') {
document.documentElement.removeAttribute('data-theme');
} else {
document.documentElement.setAttribute('data-theme', initial);
}
document.querySelectorAll('.theme-btn').forEach(function (btn) {
btn.setAttribute('aria-pressed', btn.getAttribute('data-theme') === initial ? 'true' : 'false');
btn.addEventListener('click', function () {
var theme = this.getAttribute('data-theme');
if (themes.indexOf(theme) >= 0) setTheme(theme);
});
});
window.addEventListener('hashchange', function () {
var fromUrl = themeFromUrl();
if (fromUrl) setTheme(fromUrl);
});

var text = typeof window.APP_TEXT !== 'undefined' ? window.APP_TEXT : {};
var config = typeof window.APP_CONFIG !== 'undefined' ? window.APP_CONFIG : {};
var get = window.Donation && window.Donation.get;
Expand Down
201 changes: 201 additions & 0 deletions styles/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,41 @@ body::before {
gap: clamp(0.5rem, 1.5vw, 0.85rem);
}

/* Theme switcher — top of header */
.theme-switcher {
display: flex;
justify-content: center;
gap: 0.35rem;
margin-bottom: 1rem;
}

.theme-btn {
font-family: var(--font);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.04em;
padding: 0.4rem 0.75rem;
border-radius: 8px;
border: 1px solid var(--neon-border);
background: rgba(192, 132, 255, 0.08);
color: var(--text-muted);
cursor: pointer;
transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.theme-btn:hover {
color: var(--text);
border-color: var(--neon);
background: rgba(192, 132, 255, 0.15);
}

.theme-btn[aria-pressed="true"] {
color: var(--neon-bright);
border-color: var(--neon);
background: rgba(192, 132, 255, 0.2);
box-shadow: 0 0 15px var(--neon-glow);
}

/* Header — title at top */
.header {
text-align: center;
Expand Down Expand Up @@ -458,3 +493,169 @@ body::before {
color: var(--neon);
}

/* ========== Murica — America flag neon (red, white, blue) ========== */
html[data-theme="murica"] {
--bg: #0c1222;
--surface: #0f1729;
--surface-hover: #142038;
--text: #f8fafc;
--text-muted: #cbd5e1;
--neon: #ef4444;
--neon-bright: #f87171;
--neon-glow: rgba(239, 68, 68, 0.5);
--neon-glow-strong: rgba(239, 68, 68, 0.7);
--neon-border: rgba(59, 130, 246, 0.5);
--crypto: #22c55e;
}

html[data-theme="murica"] body::before {
background:
radial-gradient(
ellipse 70% 50% at 15% 30%,
rgba(239, 68, 68, 0.28) 0%,
rgba(239, 68, 68, 0.08) 40%,
transparent 60%
),
radial-gradient(
ellipse 65% 45% at 85% 70%,
rgba(239, 68, 68, 0.18) 0%,
transparent 50%
),
radial-gradient(
ellipse 70% 50% at 80% 20%,
rgba(59, 130, 246, 0.2) 0%,
transparent 50%
),
radial-gradient(
ellipse 85% 45% at 50% -5%,
rgba(255, 255, 255, 0.1) 0%,
transparent 55%
);
}

/* Murica: more red — title with strong red glow */
html[data-theme="murica"] .header h1 {
color: #ffffff;
text-shadow:
0 0 15px rgba(255, 255, 255, 0.4),
0 0 35px rgba(239, 68, 68, 0.7),
0 0 55px rgba(239, 68, 68, 0.4),
0 0 45px rgba(59, 130, 246, 0.35);
}

html[data-theme="murica"] .tagline {
color: #fca5a5;
text-shadow: 0 0 12px rgba(239, 68, 68, 0.25);
}

html[data-theme="murica"] .card {
border: 1px solid rgba(239, 68, 68, 0.35);
box-shadow:
0 0 25px rgba(239, 68, 68, 0.2),
0 0 20px rgba(59, 130, 246, 0.1),
0 0 40px rgba(255, 255, 255, 0.03),
inset 0 0 35px rgba(239, 68, 68, 0.06);
}

html[data-theme="murica"] .card:hover {
border-color: rgba(239, 68, 68, 0.6);
box-shadow:
0 0 40px rgba(239, 68, 68, 0.4),
0 0 35px rgba(59, 130, 246, 0.2),
0 0 55px rgba(255, 255, 255, 0.06),
inset 0 0 45px rgba(239, 68, 68, 0.1);
}

html[data-theme="murica"] .card h2,
html[data-theme="murica"] .preferred-item-label {
color: #fca5a5;
text-shadow:
0 0 12px rgba(255, 255, 255, 0.3),
0 0 25px rgba(239, 68, 68, 0.65),
0 0 35px rgba(239, 68, 68, 0.35);
}

html[data-theme="murica"] .card-icon,
html[data-theme="murica"] .card-fiat .card-icon,
html[data-theme="murica"] .card-crypto .card-icon,
html[data-theme="murica"] .card-preferred .card-icon {
color: #fca5a5;
border-color: rgba(239, 68, 68, 0.55);
box-shadow:
0 0 18px rgba(239, 68, 68, 0.5),
0 0 25px rgba(255, 255, 255, 0.12);
}

html[data-theme="murica"] .card p {
color: var(--text-muted);
}

html[data-theme="murica"] .fiat-option {
border-top-color: rgba(239, 68, 68, 0.25);
}

html[data-theme="murica"] .btn {
border-color: rgba(239, 68, 68, 0.5);
background: rgba(239, 68, 68, 0.08);
box-shadow: 0 0 18px rgba(239, 68, 68, 0.3);
}

html[data-theme="murica"] .btn:hover {
border-color: #ef4444;
background: rgba(239, 68, 68, 0.18);
box-shadow:
0 0 30px rgba(239, 68, 68, 0.55),
0 0 45px rgba(239, 68, 68, 0.25),
0 0 35px rgba(59, 130, 246, 0.15);
}

html[data-theme="murica"] .theme-btn[aria-pressed="true"] {
color: #ffffff;
border-color: #ef4444;
background: rgba(239, 68, 68, 0.25);
box-shadow: 0 0 15px rgba(239, 68, 68, 0.5), 0 0 20px rgba(255, 255, 255, 0.1);
}

html[data-theme="murica"] .theme-btn:hover {
border-color: rgba(239, 68, 68, 0.6);
background: rgba(239, 68, 68, 0.12);
}

html[data-theme="murica"] .theme-btn[aria-pressed="false"] {
color: #fca5a5;
border-color: rgba(239, 68, 68, 0.3);
}

html[data-theme="murica"] .copy-btn {
color: #f87171;
background: rgba(239, 68, 68, 0.1);
border-color: rgba(239, 68, 68, 0.45);
box-shadow: 0 0 10px rgba(239, 68, 68, 0.2);
}

html[data-theme="murica"] .copy-btn:hover {
color: #fca5a5;
background: rgba(239, 68, 68, 0.2);
box-shadow: 0 0 18px rgba(239, 68, 68, 0.45);
}

html[data-theme="murica"] .footnote a {
color: #cbd5e1;
}

html[data-theme="murica"] .footnote a:hover {
color: #f87171;
text-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
}

html[data-theme="murica"] .crypto-address {
color: var(--text);
border-color: rgba(239, 68, 68, 0.25);
box-shadow: 0 0 8px rgba(239, 68, 68, 0.06);
}

html[data-theme="murica"] .fiat-option-title {
color: #fca5a5;
text-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
}

Loading