36 lines
1.5 KiB
HTML
36 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Recipe App - Modular</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<style>
|
|
/* Slider styling */
|
|
input[type=range]::-webkit-slider-thumb {
|
|
-webkit-appearance: none; height: 20px; width: 20px; border-radius: 50%;
|
|
background: #111827; cursor: pointer; margin-top: -8px;
|
|
}
|
|
input[type=range]::-webkit-slider-runnable-track {
|
|
width: 100%; height: 4px; cursor: pointer; background: #e5e7eb; border-radius: 2px;
|
|
}
|
|
|
|
/* Ingredient Active States */
|
|
.ingredient-active .check-box { background-color: #111827; border-color: #111827; }
|
|
.ingredient-active .check-icon { display: block; }
|
|
.ingredient-active .ingredient-text { text-decoration: line-through; color: #9ca3af; }
|
|
|
|
/* Utilities */
|
|
.no-scrollbar::-webkit-scrollbar { display: none; }
|
|
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-100 flex justify-center p-4 font-sans text-gray-800">
|
|
|
|
<div id="app-container" class="w-full max-w-[400px] h-[800px] bg-white border border-gray-300 rounded-3xl overflow-hidden relative flex flex-col shadow-xl">
|
|
</div>
|
|
|
|
<script type="module" src="js/app.js"></script>
|
|
</body>
|
|
</html> |