2026-07-13 14:42:35 +02:00
parent e0bd3930d9
commit 960451ae4a
63 changed files with 2974 additions and 0 deletions
--- a/02_advanced/projekte/js-advanced-dashboard-template/index.html
+++ b/02_advanced/projekte/js-advanced-dashboard-template/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Recipe Explorer Dashboard</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Recipe Explorer Dashboard</h1>
+
+    <div id="search-container">
+      <input
+        type="text"
+        id="search-input"
+        placeholder="Search for recipes by name..."
+      />
+      <button id="search-button">Search</button>
+    </div>
+
+    <div id="loading">Loading...</div>
+    <div id="error-message"></div>
+
+    <table id="recipes-table">
+      <thead>
+        <tr>
+          <th>Recipe Name</th>
+          <th>Cuisine</th>
+          <th>Preparation Time (mins)</th>
+        </tr>
+      </thead>
+      <tbody>
+        <!-- Recipe data will be populated here -->
+      </tbody>
+    </table>
+
+    <!-- Modal for Recipe Details -->
+    <div id="recipe-modal" class="modal">
+      <div class="modal-content">
+        <span class="close">&times;</span>
+        <h2 id="modal-title">Recipe Name</h2>
+        <img
+          id="modal-image"
+          src=""
+          alt="Recipe Image"
+          style="border-radius: 10px; max-height: 200px"
+        />
+        <p><strong>Cuisine:</strong> <span id="modal-category"></span></p>
+        <p>
+          <strong>Preparation Time:</strong> <span id="modal-time"></span> mins
+        </p>
+        <p><strong>Ingredients:</strong></p>
+        <ul id="modal-ingredients">
+          <!-- Ingredients will be populated here -->
+        </ul>
+        <p><strong>Instructions:</strong></p>
+        <p id="modal-instructions"></p>
+      </div>
+    </div>
+
+    <script src="scripts.js"></script>
+  </body>
+</html>