Add recipe mockup

2026-03-20 21:29:38 +01:00
parent 6e0d650f54
commit c4d2e74703
9 changed files with 1062 additions and 0 deletions
--- a/stacks/recipe/index.html
+++ b/stacks/recipe/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="pl">
+<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>