diff options
Diffstat (limited to 'kitchen/templates/kitchen/base.html')
| -rw-r--r-- | kitchen/templates/kitchen/base.html | 409 |
1 files changed, 409 insertions, 0 deletions
diff --git a/kitchen/templates/kitchen/base.html b/kitchen/templates/kitchen/base.html new file mode 100644 index 0000000..0bdc5f3 --- /dev/null +++ b/kitchen/templates/kitchen/base.html @@ -0,0 +1,409 @@ +{% load static %} +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>{% block title %}Kitchen{% endblock %}</title> + <script src="{% static 'kitchen/htmx.min.js' %}"></script> + <style> + :root { + --bg-dark: #15131c; + --navy: #0e0e5b; + --teal-dark: #325664; + --red-dark: #aa1010; + --orange-burnt: #bd6611; + --sage: #658d89; + --red-bright: #f01111; + --yellow: #f9df11; + --orange-warm: #fa9f45; + --teal-light: #87d1d1; + --grey-light: #babcc4; + --peach: #fdceb0; + --cream: #f7fdc7; + } + + * { margin: 0; padding: 0; box-sizing: border-box; } + + body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; + background: var(--bg-dark); + color: var(--grey-light); + min-height: 100vh; + line-height: 1.5; + } + + /* --- NAV --- */ + nav { + background: var(--navy); + padding: 0.75rem 1.5rem; + display: flex; + align-items: center; + gap: 2rem; + border-bottom: 2px solid var(--teal-dark); + position: sticky; + top: 0; + z-index: 100; + } + + nav .logo { + font-size: 1.25rem; + font-weight: 700; + color: var(--yellow); + text-decoration: none; + letter-spacing: 0.5px; + } + + nav .links { + display: flex; + gap: 0.25rem; + } + + nav a { + color: var(--grey-light); + text-decoration: none; + padding: 0.4rem 0.75rem; + border-radius: 4px; + font-size: 0.9rem; + transition: all 0.15s; + } + + nav a:hover, nav a.active { + background: var(--teal-dark); + color: var(--cream); + } + + /* --- LAYOUT --- */ + .container { + max-width: 960px; + margin: 0 auto; + padding: 1.5rem; + } + + h1 { + color: var(--yellow); + font-size: 1.5rem; + margin-bottom: 1rem; + font-weight: 600; + } + + h2 { + color: var(--teal-light); + font-size: 1.15rem; + margin: 1.5rem 0 0.75rem; + font-weight: 600; + } + + /* --- CARDS --- */ + .card { + background: rgba(50, 86, 100, 0.15); + border: 1px solid var(--teal-dark); + border-radius: 6px; + padding: 1rem; + margin-bottom: 0.75rem; + } + + .card-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 0.5rem; + } + + .card-title { + color: var(--cream); + font-weight: 600; + font-size: 1rem; + } + + /* --- TABLES --- */ + table { + width: 100%; + border-collapse: collapse; + margin-bottom: 1rem; + } + + th { + text-align: left; + color: var(--teal-light); + font-weight: 600; + font-size: 0.8rem; + text-transform: uppercase; + letter-spacing: 0.5px; + padding: 0.5rem 0.75rem; + border-bottom: 1px solid var(--teal-dark); + } + + td { + padding: 0.5rem 0.75rem; + border-bottom: 1px solid rgba(50, 86, 100, 0.3); + font-size: 0.9rem; + } + + tr:hover { + background: rgba(50, 86, 100, 0.15); + } + + /* --- BADGES --- */ + .badge { + display: inline-block; + padding: 0.15rem 0.5rem; + border-radius: 3px; + font-size: 0.75rem; + font-weight: 600; + } + + .badge-fridge { background: var(--teal-dark); color: var(--teal-light); } + .badge-freezer { background: var(--navy); color: var(--teal-light); } + .badge-cupboard { background: rgba(189, 102, 17, 0.25); color: var(--orange-warm); } + + .badge-ok { background: rgba(101, 141, 137, 0.25); color: var(--sage); } + .badge-expiring { background: rgba(250, 159, 69, 0.25); color: var(--orange-warm); } + .badge-expired { background: rgba(240, 17, 17, 0.25); color: var(--red-bright); } + + .badge-ready { background: rgba(101, 141, 137, 0.3); color: var(--sage); } + .badge-partial { background: rgba(249, 223, 17, 0.2); color: var(--yellow); } + .badge-missing { background: rgba(170, 16, 16, 0.25); color: var(--red-bright); } + + /* --- RATING --- */ + .stars { color: var(--yellow); letter-spacing: 1px; } + .stars-empty { color: var(--teal-dark); } + + /* --- BUTTONS --- */ + .btn { + display: inline-block; + padding: 0.4rem 0.9rem; + border: none; + border-radius: 4px; + font-size: 0.85rem; + font-weight: 600; + cursor: pointer; + transition: all 0.15s; + text-decoration: none; + } + + .btn-primary { + background: var(--yellow); + color: var(--bg-dark); + } + .btn-primary:hover { background: var(--cream); } + + .btn-secondary { + background: var(--teal-dark); + color: var(--grey-light); + } + .btn-secondary:hover { background: var(--sage); color: var(--cream); } + + .btn-danger { + background: transparent; + color: var(--red-dark); + border: 1px solid var(--red-dark); + } + .btn-danger:hover { background: var(--red-dark); color: var(--cream); } + + .btn-sm { + padding: 0.2rem 0.5rem; + font-size: 0.75rem; + } + + /* --- FORMS --- */ + input, select, textarea { + background: rgba(14, 14, 91, 0.3); + border: 1px solid var(--teal-dark); + color: var(--cream); + padding: 0.4rem 0.6rem; + border-radius: 4px; + font-size: 0.9rem; + font-family: inherit; + } + + input:focus, select:focus, textarea:focus { + outline: none; + border-color: var(--yellow); + box-shadow: 0 0 0 2px rgba(249, 223, 17, 0.15); + } + + input::placeholder { color: var(--sage); } + + label { + display: block; + color: var(--teal-light); + font-size: 0.8rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.5px; + margin-bottom: 0.25rem; + } + + .form-group { margin-bottom: 0.75rem; } + + .form-row { + display: flex; + gap: 0.75rem; + flex-wrap: wrap; + } + + .form-row .form-group { flex: 1; min-width: 120px; } + + /* --- SLOT PICKER --- */ + .slot { + margin-bottom: 1rem; + } + + .slot-name { + color: var(--orange-warm); + font-size: 0.8rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.5px; + margin-bottom: 0.4rem; + } + + .slot-options { + display: flex; + flex-wrap: wrap; + gap: 0.4rem; + } + + .slot-option { + padding: 0.3rem 0.7rem; + border: 1px solid var(--teal-dark); + border-radius: 4px; + font-size: 0.85rem; + cursor: pointer; + transition: all 0.15s; + background: transparent; + color: var(--grey-light); + } + + .slot-option:hover { + border-color: var(--yellow); + color: var(--cream); + } + + .slot-option.selected { + background: rgba(249, 223, 17, 0.15); + border-color: var(--yellow); + color: var(--yellow); + } + + .slot-option.unavailable { + opacity: 0.4; + border-style: dashed; + } + + /* --- SHOPPING LIST --- */ + .shop-item { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.5rem 0; + border-bottom: 1px solid rgba(50, 86, 100, 0.2); + } + + .shop-item input[type="checkbox"] { + accent-color: var(--yellow); + width: 1.1rem; + height: 1.1rem; + } + + .shop-item.checked .shop-name { + text-decoration: line-through; + color: var(--sage); + opacity: 0.6; + } + + .shop-section { + color: var(--orange-warm); + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.5px; + padding: 0.75rem 0 0.25rem; + } + + /* --- COOK LOG --- */ + .log-entry { + display: flex; + gap: 1rem; + align-items: flex-start; + padding: 0.75rem 0; + border-bottom: 1px solid rgba(50, 86, 100, 0.2); + } + + .log-date { + color: var(--sage); + font-size: 0.8rem; + min-width: 5rem; + } + + .log-notes { + color: var(--grey-light); + font-size: 0.85rem; + font-style: italic; + margin-top: 0.25rem; + } + + /* --- EMPTY STATE --- */ + .empty { + text-align: center; + padding: 3rem; + color: var(--sage); + } + + .empty-icon { font-size: 2rem; margin-bottom: 0.5rem; } + + /* --- HTMX LOADING --- */ + .htmx-indicator { + display: none; + color: var(--yellow); + font-size: 0.8rem; + } + .htmx-request .htmx-indicator { display: inline; } + .htmx-request.htmx-indicator { display: inline; } + + /* --- TOAST --- */ + .toast { + position: fixed; + bottom: 1.5rem; + right: 1.5rem; + padding: 0.75rem 1.25rem; + border-radius: 6px; + font-size: 0.9rem; + font-weight: 600; + z-index: 1000; + animation: fadeIn 0.2s, fadeOut 0.3s 2.5s forwards; + } + + .toast-success { background: var(--sage); color: var(--bg-dark); } + .toast-error { background: var(--red-dark); color: var(--cream); } + + @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } + @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } + + /* --- RESPONSIVE --- */ + @media (max-width: 640px) { + nav { padding: 0.5rem 1rem; gap: 1rem; flex-wrap: wrap; } + .container { padding: 1rem; } + .form-row { flex-direction: column; } + .form-row .form-group { min-width: 100%; } + td, th { padding: 0.35rem 0.5rem; font-size: 0.8rem; } + } + </style> +</head> +<body> + <nav> + <a href="{% url 'app-pantry' %}" class="logo">🍳 Kitchen</a> + <div class="links"> + <a href="{% url 'app-pantry' %}" {% if active_tab == 'pantry' %}class="active"{% endif %}>Pantry</a> + <a href="{% url 'app-recipes' %}" {% if active_tab == 'recipes' %}class="active"{% endif %}>Recipes</a> + <a href="{% url 'app-shopping' %}" {% if active_tab == 'shopping' %}class="active"{% endif %}>Shopping</a> + <a href="{% url 'app-log' %}" {% if active_tab == 'log' %}class="active"{% endif %}>Cook Log</a> + </div> + </nav> + + <div class="container"> + {% block content %}{% endblock %} + </div> +</body> +</html> |