Files
recipe-mockup/index.html
ulfrxdev 7944ad2dbf
All checks were successful
Build and Deploy / build-and-push (push) Successful in 27s
Add more example recipes
2026-03-27 22:52:14 +01:00

52 lines
2.4 KiB
HTML

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#111827">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Recipe">
<title>Recipe App - Modular</title>
<link rel="manifest" href="./manifest.webmanifest">
<link rel="icon" type="image/png" sizes="192x192" href="./icons/icon-192.png">
<link rel="apple-touch-icon" href="./icons/apple-touch-icon.png">
<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,
.ingredient-active .rd-check-box { background-color: #111827; border-color: #111827; }
.ingredient-active .check-icon,
.ingredient-active .rd-check-icon { display: block; }
.ingredient-active .ingredient-text,
.ingredient-active .rd-ing-text { text-decoration: line-through; color: #9ca3af; }
/* Utilities */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }
</style>
</head>
<body class="m-0 min-h-dvh bg-white font-sans text-gray-800">
<div id="app-container" class="relative flex h-dvh min-h-0 w-full flex-col overflow-hidden bg-white">
</div>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('./sw.js', { scope: './' }).catch(() => {});
}
</script>
<script type="module" src="js/app.js?v=2"></script>
</body>
</html>