Spaces:

z4iXsECHS6ND-heighTSAI-INSEGCSyX6T-SYS-ROD
/

anycoder-6d1c085c

Running

App Files Files Community

z4iXsECHS6ND-heighTSAI-INSEGCSyX6T-SYS-ROD commited on Mar 28

Commit

d45a8f8

verified ·

1 Parent(s): 71d101b

Update index.html

Browse files

Files changed (1) hide show

index.html +800 -2

index.html CHANGED Viewed

@@ -1,7 +1,805 @@
 <!DOCTYPE html>
-<html lang="```html
 <!DOCTYPE html>
-<html lang="en">
 <head>
   <meta charset="UTF-8">

+<!DOCTYPE="```html
 <!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>WEITER - Weiter geht's</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=Space+Grotesk:wght@300;400;500;600;700&family=DM+Sans:wght@400;500;700&display=swap"
+    rel="stylesheet">
+  <style>
+    :root {
+      --primary: #0f172a;
+      --secondary: #1e293b;
+      --accent: #f97316;
+      --accent-glow: #fb923c;
+      --text: #f8fafc;
+      --text-muted: #94a3b8;
+      --success: #22c55e;
+      --card-bg: rgba(30, 41, 59, 0.7);
+      --glass: rgba(255, 255, 255, 0.05);
+      --border: rgba(255, 255, 255, 0.1);
+    }
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      font-family: 'DM Sans', sans-serif;
+      background: var(--primary);
+      color: var(--text);
+      min-height: 100vh;
+      overflow-x: hidden;
+    }
+    /* Animated Background */
+    .bg-pattern {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: -1;
+      background:
+        radial-gradient(ellipse at 20% 20%, rgba(249, 115, 22, 0.15) 0%, transparent 50%),
+        radial-gradient(ellipse at 80% 80%, rgba(251, 146, 60, 0.1) 0%, transparent 50%),
+        linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
+    }
+    .grid-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: -1;
+      background-image:
+        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
+      background-size: 60px 60px;
+      animation: gridMove 20s linear infinite;
+    }
+    @keyframes gridMove {
+      0% {
+        transform: translate(0, 0);
+      }
+      100% {
+        transform: translate(60px, 60px);
+      }
+    }
+    /* Header */
+    header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 1.5rem 2rem;
+      backdrop-filter: blur(20px);
+      border-bottom: 1px solid var(--border);
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+    .logo {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+    }
+    .logo-icon {
+      width: 40px;
+      height: 40px;
+      background: linear-gradient(135deg, var(--accent), var(--accent-glow));
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 1.5rem;
+      box-shadow: 0 4px 20px rgba(249, 115, 22, 0.4);
+    }
+    .logo-text {
+      font-family: 'Space Grotesk', sans-serif;
+      font-size: 1.5rem;
+      font-weight: 700;
+      letter-spacing: -0.02em;
+    }
+    .logo-text span {
+      color: var(--accent);
+    }
+    .header-right {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+    }
+    .built-with {
+      font-size: 0.875rem;
+      color: var(--text-muted);
+      text-decoration: none;
+      padding: 0.5rem 1rem;
+      background: var(--glass);
+      border-radius: 8px;
+      border: 1px solid var(--border);
+      transition: all 0.3s ease;
+    }
+    .built-with:hover {
+      background: rgba(255, 255, 255, 0.1);
+      color: var(--text);
+    }
+    /* Main Content */
+    main {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 3rem 2rem;
+    }
+    /* Hero Section */
+    .hero {
+      text-align: center;
+      margin-bottom: 4rem;
+      position: relative;
+    }
+    .hero h1 {
+      font-family: 'Space Grotesk', sans-serif;
+      font-size: clamp(2.5rem, 6vw, 4.5rem);
+      font-weight: 700;
+      line-height: 1.1;
+      margin-bottom: 1.5rem;
+      letter-spacing: -0.03em;
+    }
+    .hero h1 .highlight {
+      background: linear-gradient(135deg, var(--accent), #fff);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    .hero p {
+      font-size: 1.25rem;
+      color: var(--text-muted);
+      max-width: 600px;
+      margin: 0 auto 2rem;
+      line-height: 1.6;
+    }
+    /* Stats Cards */
+    .stats-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 1.5rem;
+      margin-bottom: 4rem;
+    }
+    .stat-card {
+      background: var(--card-bg);
+      border: 1px solid var(--border);
+      border-radius: 16px;
+      padding: 1.5rem;
+      backdrop-filter: blur(10px);
+      transition: all 0.3s ease;
+      position: relative;
+      overflow: hidden;
+    }
+    .stat-card::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 3px;
+      background: linear-gradient(90deg, var(--accent), var(--accent-glow));
+      opacity: 0;
+      transition: opacity 0.3s ease;
+    }
+    .stat-card:hover {
+      transform: translateY(-4px);
+      border-color: var(--accent);
+    }
+    .stat-card:hover::before {
+      opacity: 1;
+    }
+    .stat-icon {
+      font-size: 2rem;
+      margin-bottom: 1rem;
+    }
+    .stat-value {
+      font-family: 'Space Grotesk', sans-serif;
+      font-size: 2rem;
+      font-weight: 700;
+      color: var(--text);
+    }
+    .stat-label {
+      color: var(--text-muted);
+      font-size: 0.875rem;
+      margin-top: 0.25rem;
+    }
+    /* Goals Section */
+    .section-title {
+      font-family: 'Space Grotesk', sans-serif;
+      font-size: 1.75rem;
+      font-weight: 600;
+      margin-bottom: 1.5rem;
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+    }
+    .goals-container {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+      gap: 1.5rem;
+      margin-bottom: 3rem;
+    }
+    .goal-card {
+      background: var(--card-bg);
+      border: 1px solid var(--border);
+      border-radius: 20px;
+      padding: 1.75rem;
+      backdrop-filter: blur(10px);
+      transition: all 0.3s ease;
+      cursor: pointer;
+    }
+    .goal-card:hover {
+      border-color: var(--accent);
+      transform: scale(1.02);
+      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+    }
+    .goal-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      margin-bottom: 1rem;
+    }
+    .goal-title {
+      font-family: 'Space Grotesk', sans-serif;
+      font-size: 1.25rem;
+      font-weight: 600;
+    }
+    .goal-priority {
+      padding: 0.25rem 0.75rem;
+      border-radius: 20px;
+      font-size: 0.75rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+    .priority-high {
+      background: rgba(239, 68, 68, 0.2);
+      color: #f87171;
+    }
+    .priority-medium {
+      background: rgba(249, 115, 22, 0.2);
+      color: var(--accent);
+    }
+    .priority-low {
+      background: rgba(34, 197, 94, 0.2);
+      color: var(--success);
+    }
+    .goal-description {
+      color: var(--text-muted);
+      font-size: 0.9rem;
+      margin-bottom: 1.25rem;
+      line-height: 1.5;
+    }
+    .progress-bar {
+      height: 8px;
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 10px;
+      overflow: hidden;
+      margin-bottom: 0.75rem;
+    }
+    .progress-fill {
+      height: 100%;
+      background: linear-gradient(90deg, var(--accent), var(--accent-glow));
+      border-radius: 10px;
+      transition: width 0.5s ease;
+    }
+    .progress-text {
+      display: flex;
+      justify-content: space-between;
+      font-size: 0.8rem;
+      color: var(--text-muted);
+    }
+    /* Add Goal Form */
+    .add-goal-section {
+      background: var(--card-bg);
+      border: 1px solid var(--border);
+      border-radius: 20px;
+      padding: 2rem;
+      margin-bottom: 3rem;
+    }
+    .form-title {
+      font-family: 'Space Grotesk', sans-serif;
+      font-size: 1.25rem;
+      font-weight: 600;
+      margin-bottom: 1.5rem;
+    }
+    .goal-form {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: 1rem;
+    }
+    .form-group {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+    .form-group label {
+      font-size: 0.875rem;
+      color: var(--text-muted);
+      font-weight: 500;
+    }
+    .form-group input,
+    .form-group select,
+    .form-group textarea {
+      padding: 0.875rem 1rem;
+      background: rgba(255, 255, 255, 0.05);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      color: var(--text);
+      font-family: inherit;
+      font-size: 0.95rem;
+      transition: all 0.3s ease;
+    }
+    .form-group input:focus,
+    .form-group select:focus,
+    .form-group textarea:focus {
+      outline: none;
+      border-color: var(--accent);
+      box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
+    }
+    .form-group textarea {
+      resize: vertical;
+      min-height: 80px;
+    }
+    .btn {
+      padding: 1rem 2rem;
+      border: none;
+      border-radius: 12px;
+      font-family: 'Space Grotesk', sans-serif;
+      font-size: 1rem;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5rem;
+    }
+    .btn-primary {
+      background: linear-gradient(135deg, var(--accent), var(--accent-glow));
+      color: white;
+      box-shadow: 0 4px 20px rgba(249, 115, 22, 0.4);
+    }
+    .btn-primary:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 8px 30px rgba(249, 115, 22, 0.5);
+    }
+    /* Timeline Section */
+    .timeline-section {
+      margin-bottom: 3rem;
+    }
+    .timeline {
+      position: relative;
+      padding-left: 2rem;
+    }
+    .timeline::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: 2px;
+      background: linear-gradient(180deg, var(--accent), var(--accent-glow));
+    }
+    .timeline-item {
+      position: relative;
+      padding-bottom: 2rem;
+      padding-left: 1.5rem;
+    }
+    .timeline-item::before {
+      content: '';
+      position: absolute;
+      left: -2rem;
+      top: 0.5rem;
+      width: 12px;
+      height: 12px;
+      background: var(--accent);
+      border-radius: 50%;
+      border: 3px solid var(--primary);
+      box-shadow: 0 0 10px rgba(249, 115, 22, 0.5);
+    }
+    .timeline-date {
+      font-size: 0.8rem;
+      color: var(--accent);
+      font-weight: 600;
+      margin-bottom: 0.5rem;
+    }
+    .timeline-content {
+      background: var(--card-bg);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 1.25rem;
+    }
+    .timeline-title {
+      font-family: 'Space Grotesk', sans-serif;
+      font-weight: 600;
+      margin-bottom: 0.5rem;
+    }
+    .timeline-desc {
+      color: var(--text-muted);
+      font-size: 0.9rem;
+    }
+    /* Motivational Quote */
+    .quote-section {
+      background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(251, 146, 60, 0.05));
+      border: 1px solid rgba(249, 115, 22, 0.2);
+      border-radius: 20px;
+      padding: 3rem;
+      text-align: center;
+      position: relative;
+      overflow: hidden;
+    }
+    .quote-section::before {
+      content: '"';
+      position: absolute;
+      top: -20px;
+      left: 20px;
+      font-family: 'Space Grotesk', sans-serif;
+      font-size: 8rem;
+      color: var(--accent);
+      opacity: 0.1;
+    }
+    .quote-text {
+      font-family: 'Space Grotesk', sans-serif;
+      font-size: 1.5rem;
+      font-weight: 500;
+      line-height: 1.6;
+      margin-bottom: 1rem;
+    }
+    .quote-author {
+      color: var(--text-muted);
+      font-size: 0.9rem;
+    }
+    /* Footer */
+    footer {
+      text-align: center;
+      padding: 2rem;
+      border-top: 1px solid var(--border);
+      color: var(--text-muted);
+      font-size: 0.875rem;
+    }
+    /* Animations */
+    @keyframes fadeInUp {
+      from {
+        opacity: 0;
+        transform: translateY(20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    .animate-in {
+      animation: fadeInUp 0.6s ease forwards;
+    }
+    .delay-1 {
+      animation-delay: 0.1s;
+    }
+    .delay-2 {
+      animation-delay: 0.2s;
+    }
+    .delay-3 {
+      animation-delay: 0.3s;
+    }
+    .delay-4 {
+      animation-delay: 0.4s;
+    }
+    /* Responsive */
+    @media (max-width: 768px) {
+      header {
+        padding: 1rem;
+        flex-direction: column;
+        gap: 1rem;
+      }
+      main {
+        padding: 2rem 1rem;
+      }
+      .hero h1 {
+        font-size: 2rem;
+      }
+      .goals-container {
+        grid-template-columns: 1fr;
+      }
+      .goal-form {
+        grid-template-columns: 1fr;
+      }
+    }
+    /* Floating particles */
+    .particle {
+      position: fixed;
+      width: 4px;
+      height: 4px;
+      background: var(--accent);
+      border-radius: 50%;
+      opacity: 0.3;
+      animation: float 15s infinite;
+      pointer-events: none;
+    }
+    @keyframes float {
+      0%,
+      100% {
+        transform: translateY(100vh) rotate(0deg);
+        opacity: 0;
+      }
+      10% {
+        opacity: 0.3;
+      }
+      90% {
+        opacity: 0.3;
+      }
+      100% {
+        transform: translateY(-100vh) rotate(720deg);
+        opacity: 0;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="bg-pattern"></div>
+  <div class="grid-overlay"></div>
+  <!-- Floating Particles -->
+  <div class="particle" style="left: 10%; animation-delay: 0s;"></div>
+  <div class="particle" style="left: 20%; animation-delay: 2s;"></div>
+  <div class="particle" style="left: 35%; animation-delay: 4s;"></div>
+  <div class="particle" style="left: 50%; animation-delay: 1s;"></div>
+  <div class="particle" style="left: 65%; animation-delay: 3s;"></div>
+  <div class="particle" style="left: 80%; animation-delay: 5s;"></div>
+  <div class="particle" style="left: 90%; animation-delay: 2.5s;"></div>
+  <header>
+    <div class="logo">
+      <div class="logo-icon">→</div>
+      <div class="logo-text">WEI<span>TER</span></div>
+    </div>
+    <div class="header-right">
+      <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">
+        Built with anycoder
+      </a>
+    </div>
+  </header>
+  <main>
+    <!-- Hero Section -->
+    <section class="hero animate-in">
+      <h1>Weiter geht's!<br><span class="highlight">Dein Weg nach vorn</span></h1>
+      <p>Setze dir Ziele, verfolge deinen Fortschritt und bleib motiviert. Jeder Schritt zählt auf deiner Reise zum
+        Erfolg.</p>
+    </section>
+    <!-- Stats -->
+    <div class="stats-grid">
+      <div class="stat-card animate-in delay-1">
+        <div class="stat-icon">🎯</div>
+        <div class="stat-value" id="totalGoals">5</div>
+        <div class="stat-label">Aktive Ziele</div>
+      </div>
+      <div class="stat-card animate-in delay-2">
+        <div class="stat-icon">✅</div>
+        <div class="stat-value" id="completedGoals">2</div>
+        <div class="stat-label">Abgeschlossen</div>
+      </div>
+      <div class="stat-card animate-in delay-3">
+        <div class="stat-icon">📈</div>
+        <div class="stat-value">78%</div>
+        <div class="stat-label">Fortschritt</div>
+      </div>
+      <div class="stat-card animate-in delay-4">
+        <div class="stat-icon">🔥</div>
+        <div class="stat-value">12</div>
+        <div class="stat-label">Tage Streak</div>
+      </div>
+    </div>
+    <!-- Add Goal Section -->
+    <section class="add-goal-section animate-in">
+      <h2 class="form-title">✨ Neues Ziel setzen</h2>
+      <form class="goal-form" id="goalForm">
+        <div class="form-group">
+          <label for="goalTitle">Ziel</label>
+          <input type="text" id="goalTitle" placeholder="Was möchtest du erreichen?" required>
+        </div>
+        <div class="form-group">
+          <label for="goalPriority">Priorität</label>
+          <select id="goalPriority">
+                        <option value="low">Niedrig</option>
+                        <option value="medium" selected>Mittel</option>
+                        <option value="high">Hoch</option>
+                    </select>
+        </div>
+        <div class="form-group">
+          <label for="goalProgress">Fortschritt (%)</label>
+          <input type="number" id="goalProgress" min="0" max="100" value="0">
+        </div>
+        <div class="form-group">
+          <label for="goalDescription">Beschreibung</label>
+          <textarea id="goalDescription" placeholder="Beschreibe dein Ziel genauer..."></textarea>
+        </div>
+        <button type="submit" class="btn btn-primary">
+                    <span>+</span> Ziel hinzufügen
+                </button>
+      </form>
+    </section>
+    <!-- Goals Section -->
+    <section class="goals-section">
+      <h2 class="section-title">📋 Deine Ziele</h2>
+      <div class="goals-container" id="goalsContainer">
+        <div class="goal-card">
+          <div class="goal-header">
+            <div class="goal-title">Programmieren lernen</div>
+            <span class="goal-priority priority-high">Hoch</span>
+          </div>
+          <div class="goal-description">Täglich 2 Stunden JavaScript und React üben, um bis Ende des Jahres Full-Stack
+            Developer zu werden.</div>
+          <div class="progress-bar">
+            <div class="progress-fill" style="width: 75%;"></div>
+          </div>
+          <div class="progress-text">
+            <span>Fortschritt</span>
+            <span>75%</span>
+          </div>
+        </div>
+        <div class="goal-card">
+          <div class="goal-header">
+            <div class="goal-title">Fitness-Ziele</div>
+            <span class="goal-priority priority-medium">Mittel</span>
+          </div>
+          <div class="goal-description">3x pro Woche ins Fitnessstudio gehen und bis zum Sommer einen Marathon laufen.
+          </div>
+          <div class="progress-bar">
+            <div class="progress-fill" style="width: 60%;"></div>
+          </div>
+          <div class="progress-text">
+            <span>Fortschritt</span>
+            <span>60%</span>
+          </div>
+        </div>
+        <div class="goal-card">
+          <div class="goal-header">
+            <div class="goal-title">Sprachen lernen</div>
+            <span class="goal-priority priority-low">Niedrig</span>
+          </div>
+          <div class="goal-description">Spanisch auf B1-Niveau bringen durch wöchentliche Konversationsübungen.</div>
+          <div class="progress-bar">
+            <div class="progress-fill" style="width: 40%;"></div>
+          </div>
+          <div class="progress-text">
+            <span>Fortschritt</span>
+            <span>40%</span>
+          </div>
+        </div>
+        <div class="goal-card">
+          <div class="goal-header">
+            <div class="goal-title">Finanziell unabhängig</div>
+            <span class="goal-priority priority-high">Hoch</span>
+          </div>
+          <div class="goal-description">Monatlich 500€ sparen und in ETFs investieren für langfristigen Vermögensaufbau.
+          </div>
+          <div class="progress-bar">
+            <div class="progress-fill" style="width: 85%;"></div>
+          </div>
+          <div class="progress-text">
+            <span>Fortschritt</span>
+            <span>85%</span>
+          </div>
+        </div>
+        <div class="goal-card">
+          <div class="goal-header">
+            <div class="goal-title">Buch lesen</div>
+            <span class="goal-priority priority-low">Niedrig</span>
+          </div>
+          <div class="goal-description">12 Bücher pro Jahr lesen - je ein Buch pro Monat zu verschiedenen Themen.</div>
+          <div class="progress-bar">
+            <div class="progress-fill" style="width: 50%;"></div>
+          </div>
+          <div class="progress-text">
+            <span>Fortschritt</span>
+            <span>50%</span>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- Timelin">
+<html
 <!DOCTYPE html>
+<html>
 <head>
   <meta charset="UTF-8">