6f5de542ab
Scaffold complete repo structure: - 28 static sites extracted from running containers on mlake - 2 dynamic sites (dasbes.de, dumusst.com) marked for separate handling - Template system with 6 templates (person-dark/light, product-dark, editorial, fun, minimal) - Shared CSS (variables, responsive, animations, noise overlay) - nginx config generator with multi-domain alias support - Build script with Docker-based nginx validation - add-site.sh helper for scaffolding new domains - Dockerfile for single nginx:alpine container Sites: clemensplassmann.de, danosi.de, deinesei.de, derkaiseristnackt.de, elefantenhor.de, fragina.de, frenchkis.de, ichbinaufbali.de, ichbinaufbarley.de, insain.de, julietensity.de, kainco.de (+keinco.de), kainstress.de, keinefreun.de, knzlmgmt.de, kopffrai.de, legalais.de, machesdocheinfach.de, mai-otto.de (+otto.flexsiebels.de, ottomatisch.de, ichbinotto.de), martinsiebels.de, matthiasbreier.de, osterai.de, paragraphenraiter.de, schulfrai.de, smartin3.de, sorgenfrai.de, vonschraitter.de, wartebitte.de Refs: otto#341
590 lines
16 KiB
HTML
590 lines
16 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">// player profile</div>
|
|
<h1>JULIETENSITY</h1>
|
|
<div class="subtitle">Beyond All Reason</div>
|
|
|
|
<div class="stats-bar">
|
|
<div class="stat">
|
|
<div class="stat-value">BAR</div>
|
|
<div class="stat-label">Main Game</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-value">RTS</div>
|
|
<div class="stat-label">Genre</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-value">DE</div>
|
|
<div class="stat-label">Region</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="game-badge">
|
|
<span class="dot"></span>
|
|
Online
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<section>
|
|
<div class="container">
|
|
<div class="section-label">// loadout</div>
|
|
<h2>Play Style</h2>
|
|
<div class="section-desc">
|
|
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>Rush & Panic</h3>
|
|
<p>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>"Eco Engine"</h3>
|
|
<p>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>Micro... naja</h3>
|
|
<p>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>Commander Yolo</h3>
|
|
<p>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>D-Gun Status: ERROR</h3>
|
|
<p>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">// about</div>
|
|
<h2>The Player</h2>
|
|
|
|
<div class="about-content">
|
|
<div class="about-text">
|
|
<p>
|
|
<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>
|
|
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>
|
|
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">Game</div>
|
|
<div class="detail-item-value">Beyond All Reason (BAR)</div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="detail-item-label">Genre</div>
|
|
<div class="detail-item-value">Real-Time Strategy (RTS)</div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="detail-item-label">Engine</div>
|
|
<div class="detail-item-value">Recoil (Spring Engine Fork)</div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="detail-item-label">Inspiration</div>
|
|
<div class="detail-item-value">Total Annihilation / Supreme Commander</div>
|
|
</div>
|
|
<div class="detail-item">
|
|
<div class="detail-item-label">Price</div>
|
|
<div class="detail-item-value">Free & Open Source</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<section class="cta-section">
|
|
<div class="container">
|
|
<div class="section-label">// join the fight</div>
|
|
<h2>GG?</h2>
|
|
<div class="section-desc" style="margin: 0 auto 40px;">
|
|
Beyond All Reason is free. No excuses.
|
|
</div>
|
|
<a href="https://www.beyondallreason.info/" target="_blank" class="cta-btn">
|
|
Download BAR
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<p>julietensity.de</p>
|
|
</div>
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|