63 lines
1.6 KiB
HTML
63 lines
1.6 KiB
HTML
<!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">×</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>
|