ferdi2goandClaude Opus 4.7
e4ae866375
- Move inline style.cssText to semantic classes (cal-legend, cal-header-cell, cal-day-tag-label, cal-btn-row) in calendar.js - Buttons "FT"/"BU" → "Feiertag"/"Betriebsurl." for clarity - Decorative turntable/mixer SVG header art in index.html - style.css build-out for the new classes - Initial README content - Dev port 3000 → 3001 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
137 lines
6.4 KiB
HTML
137 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Morning Meeting Planner</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="style.css">
|
|
<script src="https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>Meeting Mixer</h1>
|
|
<div class="header-graphic" aria-hidden="true">
|
|
<svg viewBox="0 0 200 160" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- ── Platter shadow glow ── -->
|
|
<circle cx="80" cy="84" r="68" fill="rgba(200,169,81,0.04)"/>
|
|
|
|
<!-- ── Turntable platter body ── -->
|
|
<circle cx="80" cy="84" r="62" fill="#111111" stroke="#1e1e1e" stroke-width="1"/>
|
|
|
|
<!-- ── Vinyl grooves (concentric rings) ── -->
|
|
<circle cx="80" cy="84" r="56" fill="none" stroke="#1c1c1c" stroke-width="0.8"/>
|
|
<circle cx="80" cy="84" r="50" fill="none" stroke="#1c1c1c" stroke-width="0.8"/>
|
|
<circle cx="80" cy="84" r="44" fill="none" stroke="#1d1d1d" stroke-width="0.7"/>
|
|
<circle cx="80" cy="84" r="38" fill="none" stroke="#1d1d1d" stroke-width="0.7"/>
|
|
<circle cx="80" cy="84" r="32" fill="none" stroke="#1e1e1e" stroke-width="0.7"/>
|
|
<circle cx="80" cy="84" r="26" fill="none" stroke="#1e1e1e" stroke-width="0.7"/>
|
|
|
|
<!-- ── Label area border (gold ring) ── -->
|
|
<circle cx="80" cy="84" r="21" fill="#161616" stroke="rgba(200,169,81,0.45)" stroke-width="1.2"/>
|
|
|
|
<!-- ── Label inner ── -->
|
|
<circle cx="80" cy="84" r="19" fill="#1a1a1a"/>
|
|
|
|
<!-- ── Label text ── -->
|
|
<text x="80" y="88" text-anchor="middle"
|
|
font-family="'Bebas Neue', sans-serif"
|
|
font-size="13" fill="rgba(200,169,81,0.65)"
|
|
letter-spacing="3">MM</text>
|
|
|
|
<!-- ── Spindle ── -->
|
|
<circle cx="80" cy="84" r="3.5" fill="none" stroke="#c8a951" stroke-width="1.5"/>
|
|
<circle cx="80" cy="84" r="1.5" fill="#c8a951" opacity="0.9"/>
|
|
|
|
<!-- ── Outer platter rim ── -->
|
|
<circle cx="80" cy="84" r="62" fill="none" stroke="rgba(200,169,81,0.18)" stroke-width="1.5"/>
|
|
|
|
<!-- ── Tonearm pivot base ── -->
|
|
<circle cx="158" cy="24" r="7" fill="#161616" stroke="#c8a951" stroke-width="1.5"/>
|
|
<circle cx="158" cy="24" r="2.5" fill="#c8a951" opacity="0.8"/>
|
|
|
|
<!-- ── Tonearm tube (two lines = tube shape) ── -->
|
|
<line x1="158" y1="24" x2="115" y2="70"
|
|
stroke="#c8a951" stroke-width="2.5"
|
|
stroke-linecap="round" opacity="0.9"/>
|
|
<line x1="157" y1="27" x2="114" y2="73"
|
|
stroke="#8c7435" stroke-width="1"
|
|
stroke-linecap="round" opacity="0.5"/>
|
|
|
|
<!-- ── Headshell (cartridge) ── -->
|
|
<polygon points="111,66 118,73 113,78 106,71"
|
|
fill="#c8a951" opacity="0.85"/>
|
|
|
|
<!-- ── Needle contact indicator ── -->
|
|
<line x1="108" y1="74" x2="100" y2="79"
|
|
stroke="rgba(200,169,81,0.5)" stroke-width="1"
|
|
stroke-dasharray="2,2"/>
|
|
<circle cx="99" cy="80" r="2" fill="#c8a951" opacity="0.6"/>
|
|
|
|
<!-- ── Mixer panel (right side, abstract) ── -->
|
|
<!-- Panel background -->
|
|
<rect x="148" y="58" width="44" height="90" rx="2"
|
|
fill="#161616" stroke="#2a2a2a" stroke-width="1"/>
|
|
|
|
<!-- Fader track 1 -->
|
|
<rect x="157" y="66" width="3" height="48" rx="1.5"
|
|
fill="#0d0d0d" stroke="#2a2a2a" stroke-width="0.5"/>
|
|
<rect x="154" y="88" width="9" height="8" rx="1"
|
|
fill="#c8a951" opacity="0.85"/>
|
|
|
|
<!-- Fader track 2 -->
|
|
<rect x="170" y="66" width="3" height="48" rx="1.5"
|
|
fill="#0d0d0d" stroke="#2a2a2a" stroke-width="0.5"/>
|
|
<rect x="167" y="80" width="9" height="8" rx="1"
|
|
fill="#c8a951" opacity="0.6"/>
|
|
|
|
<!-- Fader track 3 -->
|
|
<rect x="183" y="66" width="3" height="48" rx="1.5"
|
|
fill="#0d0d0d" stroke="#2a2a2a" stroke-width="0.5"/>
|
|
<rect x="180" y="100" width="9" height="8" rx="1"
|
|
fill="#c8a951" opacity="0.45"/>
|
|
|
|
<!-- Knob row (top of mixer panel) -->
|
|
<circle cx="158" cy="62" r="3.5" fill="#1e1e1e" stroke="rgba(200,169,81,0.4)" stroke-width="1"/>
|
|
<line x1="158" y1="59.5" x2="158" y2="62" stroke="#c8a951" stroke-width="1" opacity="0.7"/>
|
|
|
|
<circle cx="171" cy="62" r="3.5" fill="#1e1e1e" stroke="rgba(200,169,81,0.4)" stroke-width="1"/>
|
|
<line x1="170" y1="59.8" x2="171" y2="62" stroke="#c8a951" stroke-width="1" opacity="0.7"/>
|
|
|
|
<circle cx="184" cy="62" r="3.5" fill="#1e1e1e" stroke="rgba(200,169,81,0.4)" stroke-width="1"/>
|
|
<line x1="183" y1="59.7" x2="184" y2="62" stroke="#c8a951" stroke-width="1" opacity="0.7"/>
|
|
|
|
<!-- Panel label bar -->
|
|
<rect x="148" y="120" width="44" height="14" rx="0"
|
|
fill="#111" stroke="#2a2a2a" stroke-width="0.5"/>
|
|
<rect x="152" y="123" width="4" height="2" rx="0.5" fill="rgba(200,169,81,0.3)"/>
|
|
<rect x="158" y="123" width="4" height="2" rx="0.5" fill="rgba(200,169,81,0.3)"/>
|
|
<rect x="164" y="123" width="12" height="2" rx="0.5" fill="rgba(200,169,81,0.15)"/>
|
|
|
|
<!-- EQ line (abstract waveform under mixer) -->
|
|
<polyline
|
|
points="148,140 152,136 156,142 160,133 164,138 168,130 172,137 176,134 180,139 184,132 188,137 192,135"
|
|
fill="none" stroke="rgba(200,169,81,0.3)" stroke-width="1.2"
|
|
stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</div>
|
|
</header>
|
|
|
|
<nav class="tabs">
|
|
<button type="button" class="tab-btn active" data-tab="employees">Mitarbeiter</button>
|
|
<button type="button" class="tab-btn" data-tab="planning">Monatsplanung</button>
|
|
<button type="button" class="tab-btn" data-tab="data">Daten</button>
|
|
</nav>
|
|
|
|
<main>
|
|
<section id="tab-employees" class="tab-content"></section>
|
|
<section id="tab-planning" class="tab-content hidden"></section>
|
|
<section id="tab-data" class="tab-content hidden"></section>
|
|
</main>
|
|
|
|
<script type="module" src="js/app.js"></script>
|
|
</body>
|
|
</html>
|