Files
onepager/sites/julietensity.de/index.html
m 84b28d64f5 feat: AI/KI disclosure footer — shared/ai-disclosure.js + all 54 sites
Self-injecting script following impressum.js pattern:
- data-tone attribute: playful | serious | minimal | none
- Reads document.documentElement.lang for KI (de) vs AI (en)
- MutationObserver on lang attr for i18n toggle compat
- All tones link to msbls.de/ki
- Injected into all 54 custom sites with data-tone="playful"
- Template infra: base.html includes script, render.sh reads disclosure.tone
- disclosure.tone added to 3 example site.yaml files

Implements m/onepager#2
2026-04-01 13:26:04 +02:00

596 lines
21 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JULIETENSITY</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎮</text></svg>">
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500&display=swap');
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--bg: #0a0510;
--bg-card: #130d1e;
--border: #2a1a3e;
--text: #f0e8f8;
--text-dim: #8a7a9e;
--text-muted: #4a3d5e;
--pink: #ff2d78;
--pink-glow: rgba(255, 45, 120, 0.25);
--pink-soft: rgba(255, 45, 120, 0.08);
--cyan: #00f0ff;
--cyan-glow: rgba(0, 240, 255, 0.15);
--purple: #b44dff;
--purple-glow: rgba(180, 77, 255, 0.15);
}
html { scroll-behavior: smooth; }
body {
font-family: 'Inter', sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/* Scanline overlay */
body::before {
content: '';
position: fixed;
inset: 0;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0, 0, 0, 0.03) 2px,
rgba(0, 0, 0, 0.03) 4px
);
pointer-events: none;
z-index: 9998;
}
/* Noise */
body::after {
content: '';
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 9999;
}
.container { max-width: 900px; margin: 0 auto; padding: 0 24px; }
/* Hero */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 20%;
left: 50%;
transform: translateX(-50%);
width: 800px;
height: 600px;
background:
radial-gradient(ellipse at 30% 50%, var(--pink-glow) 0%, transparent 60%),
radial-gradient(ellipse at 70% 50%, var(--cyan-glow) 0%, transparent 60%),
radial-gradient(ellipse at 50% 30%, var(--purple-glow) 0%, transparent 60%);
pointer-events: none;
animation: auroraShift 8s ease-in-out infinite;
}
@keyframes auroraShift {
0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
50% { opacity: 1; transform: translateX(-50%) scale(1.05); }
}
/* Grid bg */
.hero::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 40%;
background:
linear-gradient(to top, rgba(10, 5, 16, 0.9), transparent),
repeating-linear-gradient(
90deg,
rgba(255, 45, 120, 0.03) 0px,
rgba(255, 45, 120, 0.03) 1px,
transparent 1px,
transparent 60px
),
repeating-linear-gradient(
0deg,
rgba(255, 45, 120, 0.03) 0px,
rgba(255, 45, 120, 0.03) 1px,
transparent 1px,
transparent 60px
);
transform: perspective(500px) rotateX(45deg);
transform-origin: bottom;
pointer-events: none;
}
.hero-content { position: relative; z-index: 1; }
.gamertag {
font-family: 'Orbitron', monospace;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--pink);
margin-bottom: 24px;
text-shadow: 0 0 20px var(--pink-glow);
}
h1 {
font-family: 'Orbitron', monospace;
font-size: clamp(3rem, 8vw, 6rem);
font-weight: 900;
letter-spacing: -0.02em;
line-height: 1;
margin-bottom: 8px;
background: linear-gradient(135deg, var(--pink) 0%, var(--purple) 40%, var(--cyan) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 0 30px var(--pink-glow));
}
.subtitle {
font-family: 'Orbitron', monospace;
font-size: 0.75rem;
font-weight: 400;
letter-spacing: 0.3em;
color: var(--text-dim);
margin-bottom: 48px;
text-transform: uppercase;
}
.stats-bar {
display: flex;
gap: 32px;
justify-content: center;
margin-bottom: 48px;
flex-wrap: wrap;
}
.stat {
text-align: center;
}
.stat-value {
font-family: 'Orbitron', monospace;
font-size: 1.6rem;
font-weight: 700;
color: var(--cyan);
text-shadow: 0 0 15px var(--cyan-glow);
line-height: 1;
margin-bottom: 4px;
}
.stat-label {
font-size: 0.6rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 500;
}
.game-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 24px;
border: 1px solid var(--border);
border-radius: 100px;
background: var(--bg-card);
font-size: 0.8rem;
color: var(--text-dim);
letter-spacing: 0.05em;
}
.game-badge .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--pink);
box-shadow: 0 0 10px var(--pink-glow);
animation: blink 2s ease-in-out infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
/* Sections */
section { padding: 100px 0; }
.divider {
height: 1px;
max-width: 900px;
margin: 0 auto;
background: linear-gradient(90deg, transparent, var(--border), var(--pink), var(--border), transparent);
}
.section-label {
font-family: 'Orbitron', monospace;
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--pink);
margin-bottom: 16px;
text-shadow: 0 0 10px var(--pink-glow);
}
h2 {
font-family: 'Orbitron', monospace;
font-size: 1.6rem;
font-weight: 700;
letter-spacing: -0.01em;
margin-bottom: 16px;
}
.section-desc {
color: var(--text-dim);
font-size: 0.95rem;
max-width: 520px;
margin-bottom: 48px;
font-weight: 300;
line-height: 1.7;
}
/* Cards */
.card-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 28px;
transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
position: relative;
overflow: hidden;
}
.card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, var(--pink), var(--purple), var(--cyan));
opacity: 0;
transition: opacity 0.3s;
}
.card:hover {
border-color: var(--pink);
box-shadow: 0 0 30px rgba(255, 45, 120, 0.1);
transform: translateY(-2px);
}
.card:hover::before { opacity: 1; }
.card-icon {
font-size: 1.5rem;
margin-bottom: 16px;
}
.card h3 {
font-family: 'Orbitron', monospace;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 8px;
letter-spacing: 0.02em;
}
.card p {
color: var(--text-dim);
font-size: 0.84rem;
line-height: 1.6;
font-weight: 300;
}
/* About */
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start;
}
.about-text p {
color: var(--text-dim);
font-size: 0.95rem;
line-height: 1.8;
font-weight: 300;
margin-bottom: 16px;
}
.about-text .highlight {
color: var(--pink);
font-weight: 500;
}
.detail-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.detail-item {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 10px;
padding: 16px 20px;
}
.detail-item-label {
font-family: 'Orbitron', monospace;
font-size: 0.55rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--pink);
margin-bottom: 4px;
}
.detail-item-value {
font-size: 0.88rem;
color: var(--text-dim);
font-weight: 300;
}
/* CTA */
.cta-section {
text-align: center;
padding: 80px 0 120px;
}
.cta-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 36px;
border-radius: 100px;
font-family: 'Orbitron', monospace;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
color: #fff;
background: linear-gradient(135deg, var(--pink), var(--purple));
box-shadow: 0 0 40px var(--pink-glow);
transition: all 0.3s;
border: none;
cursor: pointer;
}
.cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 0 60px var(--pink-glow);
filter: brightness(1.15);
}
/* Footer */
footer {
padding: 32px 0;
text-align: center;
border-top: 1px solid var(--border);
}
footer p {
font-family: 'Orbitron', monospace;
font-size: 0.6rem;
color: var(--text-muted);
letter-spacing: 0.2em;
text-transform: uppercase;
}
/* Responsive */
@media (max-width: 640px) {
.card-grid, .about-content { grid-template-columns: 1fr; }
.stats-bar { gap: 20px; }
section { padding: 64px 0; }
}
/* Entrance animations */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.hero-content > * {
animation: fadeUp 0.8s ease forwards;
opacity: 0;
}
.hero-content > *:nth-child(1) { animation-delay: 0.1s; }
.hero-content > *:nth-child(2) { animation-delay: 0.3s; }
.hero-content > *:nth-child(3) { animation-delay: 0.5s; }
.hero-content > *:nth-child(4) { animation-delay: 0.7s; }
.hero-content > *:nth-child(5) { animation-delay: 0.9s; }
.hero-content > *:nth-child(6) { animation-delay: 1.1s; }
</style>
</head>
<body>
<section class="hero">
<div class="hero-content">
<div class="gamertag" data-de="// Spielerprofil" data-en="// player profile">// player profile</div>
<h1>JULIETENSITY</h1>
<div class="subtitle" data-de="Beyond All Reason" data-en="Beyond All Reason">Beyond All Reason</div>
<div class="stats-bar">
<div class="stat">
<div class="stat-value">BAR</div>
<div class="stat-label" data-de="Hauptspiel" data-en="Main Game">Main Game</div>
</div>
<div class="stat">
<div class="stat-value">RTS</div>
<div class="stat-label" data-de="Genre" data-en="Genre">Genre</div>
</div>
<div class="stat">
<div class="stat-value">DE</div>
<div class="stat-label" data-de="Region" data-en="Region">Region</div>
</div>
</div>
<div class="game-badge">
<span class="dot"></span>
<span data-de="Online" data-en="Online">Online</span>
</div>
</div>
</section>
<div class="divider"></div>
<section>
<div class="container">
<div class="section-label" data-de="// Ausrüstung" data-en="// loadout">// loadout</div>
<h2 data-de="Spielstil" data-en="Play Style">Play Style</h2>
<div class="section-desc" data-de="Beyond All Reason ist kein Spiel für Ungeduldige. Es belohnt die, die vorausdenken, sich schnell anpassen und nie aufhören sich zu bewegen." data-en="Beyond All Reason is not a game for the impatient. It rewards those who think ahead, adapt fast, and never stop moving.">
Beyond All Reason is not a game for the impatient.
It rewards those who think ahead, adapt fast, and never stop moving.
</div>
<div class="card-grid">
<div class="card">
<div class="card-icon"></div>
<h3 data-de="Rush &amp; Panic" data-en="Rush &amp; Panic">Rush &amp; Panic</h3>
<p data-de="Map control? Eher Map confusion. Erst expandieren, dann vergessen wo die eigene Base war. Klassiker." data-en="Map control? More like map confusion. First expand, then forget where your own base was. Classic.">Map control? Eher Map confusion. Erst expandieren, dann vergessen wo die eigene Base war. Klassiker.</p>
</div>
<div class="card">
<div class="card-icon">🔧</div>
<h3 data-de="&quot;Eco Engine&quot;" data-en="&quot;Eco Engine&quot;">"Eco Engine"</h3>
<p data-de="Metal und Energy sind alles. Leider ist beides meistens bei Null. Aber die Absicht zaehlt." data-en="Metal and energy are everything. Unfortunately both are usually at zero. But the intention counts.">Metal und Energy sind alles. Leider ist beides meistens bei Null. Aber die Absicht zaehlt.</p>
</div>
<div class="card">
<div class="card-icon">🎯</div>
<h3 data-de="Micro... naja" data-en="Micro... well">Micro... naja</h3>
<p data-de="Unit Control trennt gut von grossartig. Julietensity trennt Units voneinander. Versehentlich. Im eigenen Gebiet." data-en="Unit control separates good from great. Julietensity separates units from each other. Accidentally. In friendly territory.">Unit Control trennt gut von grossartig. Julietensity trennt Units voneinander. Versehentlich. Im eigenen Gebiet.</p>
</div>
<div class="card">
<div class="card-icon">💥</div>
<h3 data-de="Commander Yolo" data-en="Commander Yolo">Commander Yolo</h3>
<p data-de="Warum den Commander schuetzen wenn man ihn auch direkt in die feindliche Armee laufen lassen kann? Intimidation-Taktik. Oder Unfall." data-en="Why protect the commander when you can just walk him straight into the enemy army? Intimidation tactic. Or accident.">Warum den Commander schuetzen wenn man ihn auch direkt in die feindliche Armee laufen lassen kann? Intimidation-Taktik. Oder Unfall.</p>
</div>
<div class="card" style="grid-column: 1 / -1; border-color: var(--pink); background: linear-gradient(135deg, var(--bg-card), rgba(255,45,120,0.03));">
<div class="card-icon">🔫</div>
<h3 data-de="D-Gun Status: FEHLER" data-en="D-Gun Status: ERROR">D-Gun Status: ERROR</h3>
<p data-de="Die D-Gun — die maechtigste Waffe im Spiel. Ein Schuss, alles weg. Theoretisch. Bei Julietensity ist die D-Gun eher ein Mythos. Sie existiert, sie ist da, aber sie geht einfach nicht. Falsche Taste? Falscher Moment? Falsche Dimension? Niemand weiss es. Gegner stehen direkt vor dem Commander und die D-Gun macht... nichts. Manche sagen es ist ein Bug. Julie sagt es ist ein Feature." data-en="The D-Gun — the most powerful weapon in the game. One shot, everything gone. Theoretically. For Julietensity the D-Gun is more of a myth. It exists, it's there, but it just doesn't fire. Wrong key? Wrong moment? Wrong dimension? Nobody knows. Enemies stand right in front of the commander and the D-Gun does... nothing. Some say it's a bug. Julie says it's a feature.">Die D-Gun — die maechtigste Waffe im Spiel. Ein Schuss, alles weg. Theoretisch. Bei Julietensity ist die D-Gun eher ein Mythos. Sie existiert, sie ist da, aber sie geht einfach nicht. Falsche Taste? Falscher Moment? Falsche Dimension? Niemand weiss es. Gegner stehen direkt vor dem Commander und die D-Gun macht... nichts. Manche sagen es ist ein Bug. Julie sagt es ist ein Feature.</p>
</div>
</div>
</div>
</section>
<div class="divider"></div>
<section>
<div class="container">
<div class="section-label" data-de="// über" data-en="// about">// about</div>
<h2 data-de="Die Spielerin" data-en="The Player">The Player</h2>
<div class="about-content">
<div class="about-text">
<p data-de="&lt;span class=&quot;highlight&quot;&gt;Julietensity&lt;/span&gt; — wenn Juliane zockt, dann... naja, sagen wir mal: mit Leidenschaft. Beyond All Reason ist kein Casual Game. Es ist Echtzeit-Strategie in Reinform: hunderte Units, riesige Maps, permanenter Druck." data-en="&lt;span class=&quot;highlight&quot;&gt;Julietensity&lt;/span&gt; — when Juliane plays, then... well, let's say: with passion. Beyond All Reason is not a casual game. It is real-time strategy in its purest form: hundreds of units, huge maps, constant pressure.">
<span class="highlight">Julietensity</span> — wenn Juliane zockt,
dann... naja, sagen wir mal: mit Leidenschaft.
Beyond All Reason ist kein Casual Game.
Es ist Echtzeit-Strategie in Reinform: hunderte Units,
riesige Maps, permanenter Druck.
</p>
<p data-de="Der Commander? Eher ein Vorschlag als ein Werkzeug. Manchmal steht er vorne. Manchmal ganz weit vorne. Direkt im gegnerischen Feuer. Absichtlich? Natuerlich. &quot;Strategie&quot; nennt man das." data-en="The commander? More of a suggestion than a tool. Sometimes up front. Sometimes way up front. Right in enemy fire. Intentional? Of course. That's called 'strategy'.">
Der Commander? Eher ein Vorschlag als ein Werkzeug.
Manchmal steht er vorne. Manchmal ganz weit vorne.
Direkt im gegnerischen Feuer. Absichtlich? Natuerlich.
"Strategie" nennt man das.
</p>
<p data-de="Abends auf dem Schlachtfeld — mit dem festen Willen, irgendwann auch mal zu gewinnen. Die perfekte Balance zwischen Ehrgeiz und kreativem Scheitern." data-en="Evenings on the battlefield — with the firm intention of winning at some point. The perfect balance between ambition and creative failure.">
Abends auf dem Schlachtfeld — mit dem festen Willen,
irgendwann auch mal zu gewinnen. Die perfekte Balance
zwischen Ehrgeiz und kreativem Scheitern.
</p>
</div>
<div class="detail-list">
<div class="detail-item">
<div class="detail-item-label" data-de="Spiel" data-en="Game">Game</div>
<div class="detail-item-value">Beyond All Reason (BAR)</div>
</div>
<div class="detail-item">
<div class="detail-item-label" data-de="Genre" data-en="Genre">Genre</div>
<div class="detail-item-value">Real-Time Strategy (RTS)</div>
</div>
<div class="detail-item">
<div class="detail-item-label" data-de="Engine" data-en="Engine">Engine</div>
<div class="detail-item-value">Recoil (Spring Engine Fork)</div>
</div>
<div class="detail-item">
<div class="detail-item-label" data-de="Inspiration" data-en="Inspiration">Inspiration</div>
<div class="detail-item-value">Total Annihilation / Supreme Commander</div>
</div>
<div class="detail-item">
<div class="detail-item-label" data-de="Preis" data-en="Price">Price</div>
<div class="detail-item-value" data-de="Kostenlos &amp; Open Source" data-en="Free &amp; Open Source">Free &amp; Open Source</div>
</div>
</div>
</div>
</div>
</section>
<div class="divider"></div>
<section class="cta-section">
<div class="container">
<div class="section-label" data-de="// in den Kampf" data-en="// join the fight">// join the fight</div>
<h2>GG?</h2>
<div class="section-desc" style="margin: 0 auto 40px;" data-de="Beyond All Reason ist kostenlos. Keine Ausreden." data-en="Beyond All Reason is free. No excuses.">
Beyond All Reason is free. No excuses.
</div>
<a href="https://www.beyondallreason.info/" target="_blank" class="cta-btn" data-de="BAR herunterladen" data-en="Download BAR">
Download BAR
</a>
</div>
</section>
<footer>
<div class="container">
<p>julietensity.de</p>
<div style="text-align:center;margin-top:16px;">
<button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">DE</button>
<br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
</div>
</div>
</footer>
<script src="/shared/ai-disclosure.js" data-tone="playful"></script>
<script src="/shared/i18n.js"></script>
</body>
</html>