Spaces:

bek-cs
/

anycoder-c95c9894

Running

App Files Files Community

bek-cs commited on Dec 21, 2025

Commit

429a3b8

verified ·

1 Parent(s): 85ba840

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +151 -77

index.html CHANGED Viewed

@@ -4,7 +4,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Cloud Computing Lernplan - Dein persönlicher Lernassistent</title>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
   <style>
     :root {
@@ -70,7 +70,7 @@
       left: 0;
       z-index: -1;
       opacity: 0.3;
-      background-image:
         radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.3) 0%, transparent 50%),
         radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.2) 0%, transparent 40%),
         radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.25) 0%, transparent 45%);
@@ -78,9 +78,19 @@
     }
     @keyframes floatClouds {
-      0%, 100% { transform: translateY(0) translateX(0); }
-      33% { transform: translateY(-20px) translateX(10px); }
-      66% { transform: translateY(10px) translateX(-10px); }
     }
     .animated-bg {
@@ -97,8 +107,13 @@
     }
     @keyframes rotateBG {
-      0% { transform: rotate(0deg); }
-      100% { transform: rotate(360deg); }
     }
     .container {
@@ -137,32 +152,13 @@
         opacity: 0;
         transform: translateY(-30px);
       }
       to {
         opacity: 1;
         transform: translateY(0);
       }
     }
-    .personal-badge {
-      position: absolute;
-      top: -10px;
-      right: -10px;
-      background: var(--cloud-gradient);
-      color: white;
-      padding: 8px 20px;
-      border-radius: 0 0 0 var(--radius-md);
-      font-weight: 700;
-      font-size: 0.85rem;
-      transform: rotate(5deg);
-      box-shadow: 0 5px 15px rgba(79, 172, 254, 0.4);
-      animation: badgeGlow 2s ease-in-out infinite;
-    }
-    @keyframes badgeGlow {
-      0%, 100% { box-shadow: 0 5px 15px rgba(79, 172, 254, 0.4); }
-      50% { box-shadow: 0 5px 25px rgba(79, 172, 254, 0.6); }
-    }
     h1 {
       font-size: 3rem;
       font-weight: 800;
@@ -178,8 +174,15 @@
     }
     @keyframes glow {
-      0%, 100% { filter: brightness(1); }
-      50% { filter: brightness(1.2); }
     }
     .header-icon {
@@ -197,8 +200,15 @@
     }
     @keyframes pulse {
-      0%, 100% { transform: scale(1); }
-      50% { transform: scale(1.05); }
     }
     .description {
@@ -230,8 +240,15 @@
     }
     @keyframes cloudFloat {
-      0%, 100% { transform: translateY(-50%) translateX(0); }
-      50% { transform: translateY(-50%) translateX(10px); }
     }
     .personal-info h3 {
@@ -248,6 +265,7 @@
       -webkit-text-fill-color: transparent;
       background-clip: text;
       margin-bottom: var(--spacing-xs);
       display: inline-block;
       position: relative;
     }
@@ -261,25 +279,17 @@
     }
     @keyframes sparkle {
-      0%, 100% { opacity: 0; transform: scale(0); }
-      50% { opacity: 1; transform: scale(1); }
-    }
-    .module-badge {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--spacing-xs);
-      background: white;
-      padding: 8px 16px;
-      border-radius: 20px;
-      font-weight: 600;
-      color: #667eea;
-      box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
-      margin-top: var(--spacing-sm);
-    }
-    .module-badge i {
-      font-size: 1.2rem;
     }
     .attribution {
@@ -328,6 +338,7 @@
         opacity: 0;
         transform: translateY(30px);
       }
       to {
         opacity: 1;
         transform: translateY(0);
@@ -523,7 +534,9 @@
     }
     @keyframes spin {
-      to { transform: rotate(360deg); }
     }
     .kpi-grid {
@@ -555,8 +568,13 @@
     }
     @keyframes rotate {
-      0% { transform: rotate(0deg); }
-      100% { transform: rotate(360deg); }
     }
     .kpi-card:hover {
@@ -640,8 +658,15 @@
     }
     @keyframes float {
-      0%, 100% { transform: translateY(0); }
-      50% { transform: translateY(-10px); }
     }
     .toast {
@@ -666,6 +691,7 @@
         opacity: 0;
         transform: translateX(100%);
       }
       to {
         opacity: 1;
         transform: translateX(0);
@@ -689,8 +715,13 @@
     }
     @keyframes fadeIn {
-      from { opacity: 0; }
-      to { opacity: 1; }
     }
     #calendar {
@@ -860,30 +891,25 @@
   <div class="container">
     <header>
-      <div class="personal-badge">Cloud Computing Projekt</div>
       <h1>
         <div class="header-icon">
           <i class="fas fa-cloud"></i>
         </div>
-        Cloud Computing Lernplan
       </h1>
       <div class="personal-info">
         <h3>👋 Willkommen bei deinem persönlichen Lernassistenten!</h3>
         <div class="name">Max Mustermann</div>
-        <div class="module-badge">
-          <i class="fas fa-cloud"></i>
-          <span>Cloud Computing Modul</span>
-        </div>
       </div>
       <p class="description">
-        Erstelle automatisch einen personalisierten Lernplan für deine Cloud Computing Prüfungsvorbereitung.
         Gib einfach dein Fachthema, das Prüfungsdatum und deine tägliche Lernzeit ein.
       </p>
       <p class="attribution">
-        <span>📚 Optimiert für Cloud Computing Studenten</span>
         <span>Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder">anycoder</a></span>
       </p>
     </header>
@@ -891,12 +917,12 @@
     <main class="main-content">
       <section class="card">
         <h2 class="card-title">
-          <i class="fas fa-cloud-upload-alt"></i> Cloud Computing Lernplandetails
         </h2>
         <form id="planForm">
           <div class="form-group">
-            <label for="subject">Cloud Computing Fachthema</label>
             <input type="text" id="subject" name="subject" required placeholder="z.B. AWS Services, Docker, Kubernetes">
           </div>
@@ -909,7 +935,7 @@
             <label for="hoursPerDay">Stunden pro Tag</label>
             <input type="number" id="hoursPerDay" name="hoursPerDay"
                                min="0.5" max="24" step="0.5" required placeholder="z.B. 2">
-            <div class="help-text">Gib an, wie viele Stunden du täglich für Cloud Computing lernen möchtest.</div>
           </div>
           <div class="form-group">
@@ -932,21 +958,21 @@
           <button type="submit" class="btn btn-primary" id="submitBtn">
             <i class="fas fa-cloud-upload-alt"></i>
-            <span>Cloud Lernplan erstellen</span>
           </button>
         </form>
       </section>
       <section class="card">
         <h2 class="card-title">
-          <i class="fas fa-server"></i> Gespeicherte Cloud Lernpläne
         </h2>
         <ul id="plansList"></ul>
       </section>
       <section class="card">
         <h2 class="card-title">
-          <i class="fas fa-calendar-alt"></i> Cloud Learning Kalender
         </h2>
         <div id="calendarHeader">
@@ -964,7 +990,7 @@
       <section id="resultsSection" class="card hidden">
         <h2 class="card-title">
-          <i class="fas fa-chart-line"></i> Dein Cloud Computing Lernplan
         </h2>
         <div class="kpi-grid">
@@ -992,7 +1018,7 @@
               <thead>
                 <tr>
                   <th>Datum</th>
-                  <th>Cloud Thema</th>
                   <th>Stunden</th>
                 </tr>
               </thead>
@@ -1006,7 +1032,7 @@
           <div class="empty-icon">
             <i class="fas fa-cloud-slash"></i>
           </div>
-          <h3>Keine Cloud Lernplaneinträge</h3>
           <p>Alle ausgewählten Daten sind blockiert. Bitte passe deine Einstellungen an.</p>
         </div>
       </section>
@@ -1057,4 +1083,52 @@
     function formatDate(dateString) {
       const date = new Date(dateString);
-      const options = { day: '2-digit', month: '2-digit

 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Lernplan - Dein persönlicher Lernassistent</title>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
   <style>
     :root {
       left: 0;
       z-index: -1;
       opacity: 0.3;
+      background-image:
         radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.3) 0%, transparent 50%),
         radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.2) 0%, transparent 40%),
         radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.25) 0%, transparent 45%);
     }
     @keyframes floatClouds {
+      0%,
+      100% {
+        transform: translateY(0) translateX(0);
+      }
+      33% {
+        transform: translateY(-20px) translateX(10px);
+      }
+      66% {
+        transform: translateY(10px) translateX(-10px);
+      }
     }
     .animated-bg {
     }
     @keyframes rotateBG {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
     }
     .container {
         opacity: 0;
         transform: translateY(-30px);
       }
       to {
         opacity: 1;
         transform: translateY(0);
       }
     }
     h1 {
       font-size: 3rem;
       font-weight: 800;
     }
     @keyframes glow {
+      0%,
+      100% {
+        filter: brightness(1);
+      }
+      50% {
+        filter: brightness(1.2);
+      }
     }
     .header-icon {
     }
     @keyframes pulse {
+      0%,
+      100% {
+        transform: scale(1);
+      }
+      50% {
+        transform: scale(1.05);
+      }
     }
     .description {
     }
     @keyframes cloudFloat {
+      0%,
+      100% {
+        transform: translateY(-50%) translateX(0);
+      }
+      50% {
+        transform: translateY(-50%) translateX(10px);
+      }
     }
     .personal-info h3 {
       -webkit-text-fill-color: transparent;
       background-clip: text;
       margin-bottom: var(--spacing-xs);
+      margin-top: var(--spacing-sm);
       display: inline-block;
       position: relative;
     }
     }
     @keyframes sparkle {
+      0%,
+      100% {
+        opacity: 0;
+        transform: scale(0);
+      }
+      50% {
+        opacity: 1;
+        transform: scale(1);
+      }
     }
     .attribution {
         opacity: 0;
         transform: translateY(30px);
       }
       to {
         opacity: 1;
         transform: translateY(0);
     }
     @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
     }
     .kpi-grid {
     }
     @keyframes rotate {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
     }
     .kpi-card:hover {
     }
     @keyframes float {
+      0%,
+      100% {
+        transform: translateY(0);
+      }
+      50% {
+        transform: translateY(-10px);
+      }
     }
     .toast {
         opacity: 0;
         transform: translateX(100%);
       }
       to {
         opacity: 1;
         transform: translateX(0);
     }
     @keyframes fadeIn {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
     }
     #calendar {
   <div class="container">
     <header>
       <h1>
         <div class="header-icon">
           <i class="fas fa-cloud"></i>
         </div>
+        Lernplan
       </h1>
       <div class="personal-info">
         <h3>👋 Willkommen bei deinem persönlichen Lernassistenten!</h3>
         <div class="name">Max Mustermann</div>
       </div>
       <p class="description">
+        Erstelle automatisch einen personalisierten Lernplan für deine Prüfungsvorbereitung.
         Gib einfach dein Fachthema, das Prüfungsdatum und deine tägliche Lernzeit ein.
       </p>
       <p class="attribution">
+        <span>📚 Optimiert für Studenten</span>
         <span>Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder">anycoder</a></span>
       </p>
     </header>
     <main class="main-content">
       <section class="card">
         <h2 class="card-title">
+          <i class="fas fa-cloud-upload-alt"></i> Lernplandetails
         </h2>
         <form id="planForm">
           <div class="form-group">
+            <label for="subject">Fachthema</label>
             <input type="text" id="subject" name="subject" required placeholder="z.B. AWS Services, Docker, Kubernetes">
           </div>
             <label for="hoursPerDay">Stunden pro Tag</label>
             <input type="number" id="hoursPerDay" name="hoursPerDay"
                                min="0.5" max="24" step="0.5" required placeholder="z.B. 2">
+            <div class="help-text">Gib an, wie viele Stunden du täglich lernen möchtest.</div>
           </div>
           <div class="form-group">
           <button type="submit" class="btn btn-primary" id="submitBtn">
             <i class="fas fa-cloud-upload-alt"></i>
+            <span>Lernplan erstellen</span>
           </button>
         </form>
       </section>
       <section class="card">
         <h2 class="card-title">
+          <i class="fas fa-server"></i> Gespeicherte Lernpläne
         </h2>
         <ul id="plansList"></ul>
       </section>
       <section class="card">
         <h2 class="card-title">
+          <i class="fas fa-calendar-alt"></i> Learning Kalender
         </h2>
         <div id="calendarHeader">
       <section id="resultsSection" class="card hidden">
         <h2 class="card-title">
+          <i class="fas fa-chart-line"></i> Dein Lernplan
         </h2>
         <div class="kpi-grid">
               <thead>
                 <tr>
                   <th>Datum</th>
+                  <th>Thema</th>
                   <th>Stunden</th>
                 </tr>
               </thead>
           <div class="empty-icon">
             <i class="fas fa-cloud-slash"></i>
           </div>
+          <h3>Keine Lernplaneinträge</h3>
           <p>Alle ausgewählten Daten sind blockiert. Bitte passe deine Einstellungen an.</p>
         </div>
       </section>
     function formatDate(dateString) {
       const date = new Date(dateString);
+      const options = { day: '2-digit', month: '2-digit', year: 'numeric' };
+      return date.toLocaleDateString('de-DE', options);
+    }
+    // Kalender Funktionen
+    function renderCalendar() {
+      const firstDay = new Date(currentYear, currentMonth, 1);
+      const lastDay = new Date(currentYear, currentMonth + 1, 0);
+      const prevLastDay = new Date(currentYear, currentMonth, 0);
+      const firstDayIndex = firstDay.getDay();
+      const lastDayIndex = lastDay.getDay();
+      const nextDays = 7 - lastDayIndex - 1;
+      document.getElementById('calendarTitle').textContent =
+        new Date(currentYear, currentMonth).toLocaleDateString('de-DE', { month: 'long', year: 'numeric' });
+      let days = '';
+      let dayNum = 1;
+      // Wochentage Header
+      const weekDays = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'];
+      weekDays.forEach(day => {
+        days += `<div class="calendar-day-header">${day}</div>`;
+      });
+      // Leere Tage am Anfang
+      for (let x = firstDayIndex; x > 0; x--) {
+        days += `<div class="calendar-day">${prevLastDay.getDate() - x + 1}</div>`;
+      }
+      // Tage des Monats
+      for (let i = 1; i <= lastDay.getDate(); i++) {
+        const currentDate = new Date(currentYear, currentMonth, i);
+        const dateKey = toDateKey(currentDate);
+        let classes = 'calendar-day';
+        if (currentDate.toDateString() === new Date().toDateString()) {
+          classes += ' calendar-today';
+        }
+        if (cachedLearningDays.includes(dateKey)) {
+          classes += ' calendar-learning';
+        }
+        days += `<div class="${classes}">${i}</div>`;
+      }
+      // Leere Tage am Ende
+      for (let j