From b1142cf776b38b516bb4f06e21ecd598d5ff42ad Mon Sep 17 00:00:00 2001 From: Jakob Scheid Date: Wed, 24 Jun 2026 18:05:45 +0200 Subject: [PATCH] Initial retro 2010 website --- .gitignore | 4 + README.md | 17 +++ index.html | 150 +++++++++++++++++++++ script.js | 22 ++++ styles.css | 374 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 567 insertions(+) create mode 100644 .gitignore create mode 100644 README.md create mode 100644 index.html create mode 100644 script.js create mode 100644 styles.css diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..45eb535 --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +.DS_Store +Thumbs.db +.agents/ +.codex/ diff --git a/README.md b/README.md new file mode 100644 index 0000000..6ff01ee --- /dev/null +++ b/README.md @@ -0,0 +1,17 @@ +# RetroWave Studio 2010 + +Eine bewusst nostalgische Website im Stil klassischer 2010er-Webseiten. + +## Starten + +Einfach `index.html` im Browser öffnen oder einen lokalen Static Server nutzen. + +## Enthalten + +- `index.html` +- `styles.css` +- `script.js` + +## Stilrichtung + +Glossy Panels, blaue Verläufe, Seitenleisten und ein zentriertes Portal-Layout. diff --git a/index.html b/index.html new file mode 100644 index 0000000..264490f --- /dev/null +++ b/index.html @@ -0,0 +1,150 @@ + + + + + + RetroWave Studio 2010 + + + + +
+
+
+
RW
+
+

Webdesign aus 2010

+

RetroWave Studio

+
+
+
+

Online seit 2010

+

Letztes Update: 24.06.2010

+
+
+ + + +
+
+
+

Willkommen

+

Die digitale Visitenkarte mit Glanz, Schatten und Tabellen-Energie.

+

+ Diese Seite ist absichtlich so gestaltet, als hätte sie ein Webdesigner + im Jahr 2010 mit viel Liebe zu Verläufen, abgerundeten Ecken und + kleinen Statusboxen gebaut. +

+
+ Mehr erfahren + Kontakt aufnehmen +
+
+ + +
+ +
+
+
+

Highlights

+

Typische Merkmale einer 2010er-Website

+
+
+

Glänzende Panels

+

Hell-dunkle Verläufe, kräftige Rahmen und große Schatten für mehr Tiefe.

+
+
+

Sidebar-Widgets

+

Nachrichten, Links, Status und kleine Boxen, die wie aus einem CMS-Theme wirken.

+
+
+

Große Call-to-Actions

+

Buttons mit Farbverlauf, damit jeder Klick wichtig aussieht.

+
+
+

Retro-Komposition

+

Ein zentriertes Layout mit klarer Hierarchie und etwas „Portal“-Charakter.

+
+
+
+ +
+

News

+

Aktuelle Meldungen

+
+
+ +

Das neue Startlayout ist online

+

Die Seite wurde mit kräftigen Farben, Schatten und klassischer Seitenleiste umgesetzt.

+
+
+ +

Kontaktbereich und Buttons ergänzt

+

Jetzt gibt es direkte Absprünge zu den wichtigsten Bereichen der Seite.

+
+
+ +

Retro-Designrichtung festgelegt

+

Die visuelle Sprache folgt dem typischen Web-2.0-Look der damaligen Zeit.

+
+
+
+
+ + +
+
+ +
+

© 2010 RetroWave Studio. Alle Rechte vorbehalten.

+

Optimiert für ein Gefühl von 2010, nicht für Browser mit zu viel Minimalismus.

+
+
+ + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..c2bbeec --- /dev/null +++ b/script.js @@ -0,0 +1,22 @@ +(function () { + var activeLink = document.querySelector('.nav a.active'); + if (!activeLink) { + return; + } + + var links = Array.prototype.slice.call(document.querySelectorAll('.nav a')); + + function setActiveFromHash() { + var hash = window.location.hash || '#start'; + links.forEach(function (link) { + if (link.getAttribute('href') === hash) { + link.classList.add('active'); + } else { + link.classList.remove('active'); + } + }); + } + + window.addEventListener('hashchange', setActiveFromHash); + setActiveFromHash(); +})(); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..4508cee --- /dev/null +++ b/styles.css @@ -0,0 +1,374 @@ +:root { + --bg: #c9d6e6; + --bg-deep: #9fb0c8; + --panel: #f7fbff; + --panel-soft: #edf3f9; + --ink: #1d2a3a; + --muted: #5a6a7d; + --accent: #2f78d0; + --accent-dark: #1757a5; + --accent-light: #7eb5ff; + --border: #88a1be; + --shadow: rgba(16, 36, 66, 0.22); + --glow: rgba(255, 255, 255, 0.7); +} + +* { + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + margin: 0; + color: var(--ink); + font-family: Arial, Helvetica, sans-serif; + background: + radial-gradient(circle at top, rgba(255, 255, 255, 0.88), transparent 38%), + linear-gradient(180deg, var(--bg), var(--bg-deep)); + min-height: 100vh; +} + +body::before { + content: ""; + position: fixed; + inset: 0; + pointer-events: none; + background-image: + linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px), + linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px); + background-size: 24px 24px; + mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent 80%); +} + +a { + color: var(--accent-dark); + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +.page-shell { + width: min(1080px, calc(100% - 32px)); + margin: 24px auto 40px; +} + +.topbar, +.nav, +.panel, +.footer { + box-shadow: 0 16px 32px var(--shadow); +} + +.topbar { + display: flex; + justify-content: space-between; + gap: 20px; + align-items: center; + padding: 20px 24px; + border: 1px solid rgba(255, 255, 255, 0.75); + border-radius: 18px 18px 0 0; + background: linear-gradient(180deg, #ffffff, #dae6f3); +} + +.brand { + display: flex; + gap: 16px; + align-items: center; +} + +.brand-mark { + width: 62px; + height: 62px; + border-radius: 16px; + display: grid; + place-items: center; + font-weight: 700; + letter-spacing: 0.08em; + color: white; + background: linear-gradient(180deg, var(--accent-light), var(--accent-dark)); + border: 1px solid #1851a0; + text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45); +} + +.eyebrow, +.section-label { + margin: 0 0 4px; + text-transform: uppercase; + letter-spacing: 0.16em; + font-size: 0.72rem; + color: var(--accent-dark); + font-weight: 700; +} + +.brand h1, +.hero h2, +.panel h3, +.feature-card h4, +.news-item h4 { + margin: 0; +} + +.brand h1 { + font-family: Georgia, "Times New Roman", serif; + font-size: clamp(1.6rem, 3vw, 2.5rem); + color: #18304f; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); +} + +.topbar-meta { + text-align: right; + color: var(--muted); + font-size: 0.92rem; +} + +.status-pill { + display: inline-block; + margin: 0 0 6px; + padding: 6px 12px; + border-radius: 999px; + color: white; + background: linear-gradient(180deg, #55b65d, #2a8c32); + border: 1px solid #1d6a24; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); +} + +.nav { + display: flex; + gap: 6px; + padding: 10px 12px; + border-left: 1px solid rgba(255, 255, 255, 0.55); + border-right: 1px solid rgba(255, 255, 255, 0.55); + background: linear-gradient(180deg, #6f8eb4, #43638d); +} + +.nav a { + padding: 10px 16px; + border-radius: 8px 8px 0 0; + color: white; + font-weight: 700; + text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); + background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.04)); + border: 1px solid rgba(255, 255, 255, 0.18); +} + +.nav a.active, +.nav a:hover { + background: linear-gradient(180deg, #eff7ff, #d7e5f4); + color: var(--accent-dark); + text-decoration: none; +} + +.layout { + padding: 18px; + border: 1px solid rgba(255, 255, 255, 0.55); + border-top: 0; + border-radius: 0 0 18px 18px; + background: linear-gradient(180deg, rgba(250, 253, 255, 0.92), rgba(235, 242, 250, 0.96)); +} + +.panel { + border: 1px solid rgba(90, 118, 152, 0.4); + border-radius: 16px; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(236, 243, 250, 0.96)); + padding: 22px; +} + +.hero { + display: grid; + grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr); + gap: 18px; + align-items: stretch; + margin-bottom: 18px; +} + +.hero h2 { + font-family: Georgia, "Times New Roman", serif; + font-size: clamp(2rem, 4vw, 3.4rem); + line-height: 1.05; + color: #17304d; + margin-bottom: 12px; +} + +.hero p { + color: var(--muted); + line-height: 1.65; +} + +.cta-row { + display: flex; + flex-wrap: wrap; + gap: 10px; + margin-top: 18px; +} + +.button { + display: inline-block; + padding: 11px 18px; + border-radius: 10px; + border: 1px solid transparent; + font-weight: 700; + text-decoration: none; +} + +.button.primary { + color: white; + background: linear-gradient(180deg, var(--accent-light), var(--accent-dark)); + border-color: #14508c; +} + +.button.secondary { + color: var(--accent-dark); + background: linear-gradient(180deg, #ffffff, #dbe7f4); + border-color: var(--border); +} + +.hero-widget, +.mini-panel { + background: linear-gradient(180deg, #f4f8fc, #e2ebf5); + border: 1px solid rgba(85, 111, 143, 0.35); + border-radius: 14px; + padding: 18px; +} + +.widget-title { + margin-bottom: 14px; + font-size: 1rem; + font-weight: 700; + color: var(--accent-dark); +} + +.status-list, +.link-list { + list-style: none; + margin: 0; + padding: 0; +} + +.status-list li, +.link-list li { + padding: 10px 0; + border-bottom: 1px solid rgba(104, 127, 157, 0.18); +} + +.status-list li:last-child, +.link-list li:last-child { + border-bottom: 0; +} + +.status-list span { + color: var(--ink); + font-weight: 700; +} + +.content-grid { + display: grid; + grid-template-columns: minmax(0, 1.6fr) minmax(270px, 0.8fr); + gap: 18px; +} + +.main-column, +.side-column { + display: grid; + gap: 18px; +} + +.feature-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 14px; + margin-top: 18px; +} + +.feature-card, +.news-item { + padding: 16px; + border-radius: 12px; + background: linear-gradient(180deg, #ffffff, #edf3f9); + border: 1px solid rgba(104, 127, 157, 0.25); +} + +.feature-card p, +.news-item p, +.mini-panel p, +.footer p { + color: var(--muted); + line-height: 1.6; +} + +.news-list { + display: grid; + gap: 12px; + margin-top: 18px; +} + +.news-item time { + display: inline-block; + margin-bottom: 8px; + font-size: 0.83rem; + color: var(--accent-dark); + font-weight: 700; +} + +.small-note, +.footer-note { + font-size: 0.92rem; +} + +.footer { + display: flex; + justify-content: space-between; + gap: 16px; + padding: 18px 22px; + margin-top: 0; + border-radius: 0 0 18px 18px; + border: 1px solid rgba(255, 255, 255, 0.55); + border-top: 0; + background: linear-gradient(180deg, #d7e3f0, #bccdde); +} + +@media (max-width: 860px) { + .topbar, + .footer, + .hero, + .content-grid, + .feature-grid { + grid-template-columns: 1fr; + display: grid; + } + + .topbar, + .footer { + text-align: left; + } + + .topbar-meta { + text-align: left; + } +} + +@media (max-width: 640px) { + .page-shell { + width: min(100% - 16px, 1080px); + margin-top: 8px; + } + + .layout, + .topbar { + padding: 16px; + } + + .nav { + overflow-x: auto; + } + + .nav a { + white-space: nowrap; + } +}