Spaces:

Grets
/

AVIP

Running

App Files Files Community

Grets commited on Aug 27, 2025

Commit

29ccfa6

verified ·

1 Parent(s): 60ce794

Update index.html

Browse files

Files changed (1) hide show

index.html +174 -17

index.html CHANGED Viewed

@@ -1,19 +1,176 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

 <!doctype html>
+<html lang="de">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Physics IQ – Minimal-Template</title>
+  <meta name="description" content="Schlankes, schnelles Template für eine kleine Projektseite – ideal für GitHub Pages oder Hugging Face Spaces." />
+  <!-- Social Cards (optional, ohne Bild) -->
+  <meta property="og:title" content="Physics IQ – Minimal-Template" />
+  <meta property="og:description" content="Schnelles Static-Site-Template (HTML/CSS/JS)." />
+  <meta property="og:type" content="website" />
+  <meta name="twitter:card" content="summary_large_image" />
+  <style>
+    :root{
+      --bg:#0b0b0c;--surface:#111216;--text:#e9e9ee;--muted:#9aa0a6;--accent:#6ee7ff;--ring:rgba(110,231,255,.35)
+    }
+    @media (prefers-color-scheme: light){
+      :root{--bg:#fafafa;--surface:#fff;--text:#101114;--muted:#5f6368;--accent:#0078ff;--ring:rgba(0,120,255,.2)}
+    }
+    *{box-sizing:border-box}
+    html,body{height:100%}
+    body{
+      margin:0;
+      font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
+      color:var(--text);
+      background:
+        radial-gradient(1200px 800px at 10% -5%, rgba(110,231,255,.08), transparent 40%),
+        radial-gradient(900px 700px at 110% 10%, rgba(110,231,255,.06), transparent 40%),
+        var(--bg);
+    }
+    .site-header{
+      position:sticky;top:0;z-index:10;
+      display:flex;align-items:center;gap:1rem;justify-content:space-between;
+      padding:.8rem 1rem;border-bottom:1px solid rgba(255,255,255,.06);
+      background:color-mix(in oklab, var(--surface), transparent 35%);
+      backdrop-filter:saturate(1.2) blur(8px);
+    }
+    .logo{font-weight:700;letter-spacing:.2px;text-decoration:none;color:var(--text)}
+    .logo span{color:var(--accent)}
+    .site-nav{display:flex;gap:.75rem}
+    .site-nav a{color:var(--text);text-decoration:none;padding:.4rem .6rem;border-radius:.5rem}
+    .site-nav a:hover{outline:2px solid var(--ring);outline-offset:2px}
+    .nav-toggle{display:none;background:transparent;border:1px solid rgba(255,255,255,.2);color:var(--text);border-radius:.5rem;padding:.4rem .6rem}
+    @media (max-width: 720px){
+      .nav-toggle{display:inline-block}
+      .site-nav{position:absolute;right:1rem;top:3.4rem;flex-direction:column;padding:.6rem;background:var(--surface);border:1px solid rgba(255,255,255,.1);border-radius:.6rem;display:none}
+      .site-nav.open{display:flex}
+    }
+    .hero{text-align:center;padding:6rem 1rem 4rem;max-width:920px;margin:0 auto}
+    .hero h1{font-size:clamp(2rem,3.8vw,3rem);margin:0 0 .5rem}
+    .hero p{margin:0 0 1.5rem;color:var(--muted)}
+    .btn{display:inline-block;padding:.7rem 1rem;border-radius:.6rem;background:var(--accent);color:#06141b;text-decoration:none;font-weight:600}
+    .section{padding:3rem 1rem;max-width:1000px;margin:0 auto}
+    .features{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
+    .features li{background:color-mix(in oklab, var(--surface), transparent 10%);border:1px solid rgba(255,255,255,.08);border-radius:.8rem;padding:.9rem}
+    .table-wrap{overflow-x:auto;background:color-mix(in oklab, var(--surface), transparent 10%);border-radius:.8rem;border:1px solid rgba(255,255,255,.08)}
+    .table-wrap table{width:100%;border-collapse:collapse}
+    .table-wrap th,.table-wrap td{padding:.7rem .8rem;border-bottom:1px solid rgba(255,255,255,.06);text-align:left}
+    .table-wrap th{font-weight:600}
+    .muted{color:var(--muted)}
+    .site-footer{padding:2rem 1rem 4rem;text-align:center;color:var(--muted)}
+    code{background:rgba(127,127,127,.15);padding:.1rem .3rem;border-radius:.3rem}
+  </style>
+</head>
+<body>
+  <header class="site-header">
+    <a href="#" class="logo">Physics<span>IQ</span></a>
+    <button class="nav-toggle" aria-expanded="false" aria-controls="site-nav">☰</button>
+    <nav id="site-nav" class="site-nav" aria-label="Hauptnavigation">
+      <a href="#home">Home</a>
+      <a href="#features">Features</a>
+      <a href="#leaderboard">Leaderboard</a>
+      <a href="#podcast">Podcast</a>
+      <a href="#kontakt">Kontakt</a>
+    </nav>
+  </header>
+  <main>
+    <section id="home" class="hero">
+      <h1>Einfaches Static-Site-Template</h1>
+      <p>Ideal für GitHub Pages oder Hugging Face Spaces. Keine Abhängigkeiten, nur HTML/CSS/JS.</p>
+      <a class="btn" href="#features">Los geht's</a>
+    </section>
+    <section id="features" class="section">
+      <h2>Was ist drin?</h2>
+      <ul class="features">
+        <li>Sauberes Grund-Layout (Header, Navigation, Footer)</li>
+        <li>Responsives Design &amp; Dark/Light via <code>prefers-color-scheme</code></li>
+        <li>Beispiel-Leaderboard (ohne Backend)</li>
+        <li>Podcast-Einbettung (HTML5-Audio)</li>
+        <li>Ohne Build-Schritt – einfach hochladen</li>
+      </ul>
+    </section>
+    <section id="leaderboard" class="section">
+      <h2>Leaderboard</h2>
+      <p class="muted">Diese Tabelle wird clientseitig aus eingebetteten JSON-Daten gerendert.</p>
+      <div class="table-wrap">
+        <table>
+          <thead>
+            <tr><th>Platz</th><th>Name</th><th>Punkte</th><th>Letztes Update</th></tr>
+          </thead>
+          <tbody id="leaderboard-body"><!-- JS rendert hier --></tbody>
+        </table>
+      </div>
+      <!-- Eingebettete Beispiel-Daten (funktioniert auch lokal ohne Server) -->
+      <script id="leaderboard-data" type="application/json">{
+        "rows": [
+          {"rank": 1, "name": "Alice", "score": 98, "updated": "2025-08-01"},
+          {"rank": 2, "name": "Bob",   "score": 92, "updated": "2025-07-28"},
+          {"rank": 3, "name": "Carol", "score": 89, "updated": "2025-07-20"}
+        ]
+      }</script>
+    </section>
+    <section id="podcast" class="section">
+      <h2>Podcast</h2>
+      <p class="muted">Datei einfügen: <code>assets/podcast.mp3</code> oder diesen Block löschen.</p>
+      <audio controls preload="none">
+        <source src="assets/podcast.mp3" type="audio/mpeg" />
+        Dein Browser unterstützt das Audio-Element nicht.
+      </audio>
+    </section>
+    <section id="kontakt" class="section">
+      <h2>Kontakt</h2>
+      <p>Fragen? <a href="mailto:you@example.com">you@example.com</a></p>
+      <p class="muted">Optional: Links zu GitHub, Hugging Face, Twitter …</p>
+    </section>
+  </main>
+  <footer class="site-footer">
+    <small>&copy; <span id="year"></span> Dein Name. Bereitgestellt über GitHub Pages oder Hugging Face Spaces.</small>
+  </footer>
+  <script>
+    // Mobile-Navi
+    const navToggle = document.querySelector('.nav-toggle');
+    const nav = document.getElementById('site-nav');
+    if (navToggle && nav) {
+      navToggle.addEventListener('click', () => {
+        const open = nav.classList.toggle('open');
+        navToggle.setAttribute('aria-expanded', String(open));
+      });
+    }
+    // Jahr im Footer
+    const y = document.getElementById('year');
+    if (y) y.textContent = new Date().getFullYear();
+    // Leaderboard-Rendering
+    (function renderLeaderboard(){
+      const el = document.getElementById('leaderboard-body');
+      const dataEl = document.getElementById('leaderboard-data');
+      if (!el || !dataEl) return;
+      try {
+        const data = JSON.parse(dataEl.textContent.trim());
+        const rows = Array.isArray(data.rows) ? data.rows : [];
+        rows.sort((a,b) => a.rank - b.rank);
+        el.innerHTML = rows.map(r => `
+          <tr>
+            <td>${r.rank}</td>
+            <td>${r.name}</td>
+            <td>${r.score}</td>
+            <td>${r.updated}</td>
+          </tr>`).join('');
+      } catch (e) {
+        el.innerHTML = '<tr><td colspan="4">Fehler beim Laden der Daten.</td></tr>';
+      }
+    })();
+  </script>
+</body>
 </html>