Spaces:
Sleeping
Sleeping
| <!-- templates/_layout.html --> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"/> | |
| <title>{% block title %}EcoTry{% endblock %}</title> | |
| <style> | |
| :root{ | |
| --eco-deep: #0b3d2e; /* logo deep green */ | |
| --eco-lime: #7bdc3b; /* logo lime */ | |
| --bg0: #05070b; | |
| --bg1: #07110d; | |
| --panel: rgba(255,255,255,0.06); | |
| --panel2: rgba(255,255,255,0.10); | |
| --text: rgba(255,255,255,0.92); | |
| --muted: rgba(255,255,255,0.68); | |
| --line: rgba(255,255,255,0.12); | |
| --shadow: 0 18px 60px rgba(0,0,0,.35); | |
| --r: 18px; | |
| } | |
| *{ box-sizing: border-box; } | |
| body{ | |
| margin: 0; | |
| font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif; | |
| color: var(--text); | |
| background: | |
| radial-gradient(1200px 600px at 10% 0%, rgba(123,220,59,0.20), transparent 60%), | |
| radial-gradient(900px 500px at 90% 10%, rgba(11,61,46,0.35), transparent 55%), | |
| linear-gradient(180deg, var(--bg1) 0%, var(--bg0) 100%); | |
| min-height: 100vh; | |
| } | |
| a{ color: inherit; text-decoration: none; } | |
| .wrap{ max-width: 1240px; margin: 0 auto; padding: 22px 18px 36px; } | |
| .nav{ | |
| display:flex; align-items:center; justify-content:space-between; gap:12px; | |
| padding: 14px 16px; | |
| border: 1px solid var(--line); | |
| background: rgba(0,0,0,0.25); | |
| border-radius: var(--r); | |
| box-shadow: var(--shadow); | |
| position: sticky; top: 14px; z-index: 10; | |
| backdrop-filter: blur(12px); | |
| } | |
| .brand{ display:flex; align-items:center; gap:12px; } | |
| .brand img{ width: 46px; height: 46px; object-fit: contain; } | |
| .brand h1{ font-size: 16px; margin: 0; letter-spacing: 0.3px; } | |
| .brand p{ margin: 2px 0 0; font-size: 12px; color: var(--muted); } | |
| .nav-actions{ display:flex; gap:10px; align-items:center; } | |
| .chip{ | |
| font-size: 12px; | |
| padding: 9px 11px; | |
| border-radius: 999px; | |
| border: 1px solid var(--line); | |
| background: rgba(255,255,255,0.04); | |
| color: var(--muted); | |
| white-space: nowrap; | |
| display:flex; gap:8px; align-items:center; | |
| } | |
| .chip strong{ color: rgba(255,255,255,0.92); } | |
| .btn{ | |
| border: 1px solid rgba(123,220,59,0.38); | |
| background: rgba(123,220,59,0.14); | |
| color: rgba(255,255,255,0.92); | |
| padding: 10px 12px; | |
| border-radius: 14px; | |
| font-size: 13px; | |
| cursor: pointer; | |
| transition: .15s ease; | |
| } | |
| .btn:hover{ background: rgba(123,220,59,0.20); } | |
| .btn-ghost{ | |
| border: 1px solid var(--line); | |
| background: rgba(255,255,255,0.04); | |
| color: rgba(255,255,255,0.90); | |
| padding: 10px 12px; | |
| border-radius: 14px; | |
| font-size: 13px; | |
| cursor: pointer; | |
| transition: .15s ease; | |
| text-align: center; | |
| } | |
| .btn-ghost:hover{ background: rgba(255,255,255,0.07); } | |
| .panel{ | |
| border: 1px solid var(--line); | |
| background: rgba(0,0,0,0.22); | |
| border-radius: var(--r); | |
| box-shadow: var(--shadow); | |
| backdrop-filter: blur(12px); | |
| overflow: hidden; | |
| } | |
| .flash-wrap{ margin-top: 14px; display:grid; gap: 8px; } | |
| .flash{ | |
| padding: 10px 12px; | |
| border-radius: 14px; | |
| border: 1px solid var(--line); | |
| background: rgba(255,255,255,0.05); | |
| font-size: 13px; | |
| color: rgba(255,255,255,0.86); | |
| } | |
| .flash.success{ border-color: rgba(123,220,59,0.35); background: rgba(123,220,59,0.08); } | |
| .flash.error{ border-color: rgba(255,93,93,0.35); background: rgba(255,93,93,0.08); } | |
| @media (max-width: 720px){ | |
| .brand p{ display:none; } | |
| } | |
| </style> | |
| {% block head %}{% endblock %} | |
| </head> | |
| <body> | |
| <div class="wrap"> | |
| <div class="nav"> | |
| <a class="brand" href="/"> | |
| <img src="{{ brand_logo }}" alt="EcoTry logo" /> | |
| <div> | |
| <h1>EcoTry</h1> | |
| <p>Think. Try. Sustain.</p> | |
| </div> | |
| </a> | |
| <div class="nav-actions"> | |
| <a class="chip" href="{{ url_for('cart_page') }}"> | |
| 🛒 <strong>{{ cart_items_count }}</strong> | |
| <span>Cart</span> | |
| </a> | |
| <a class="btn-ghost" href="/">Shop</a> | |
| </div> | |
| </div> | |
| {% with messages = get_flashed_messages(with_categories=true) %} | |
| {% if messages %} | |
| <div class="flash-wrap"> | |
| {% for category, message in messages %} | |
| <div class="flash {{ category }}">{{ message }}</div> | |
| {% endfor %} | |
| </div> | |
| {% endif %} | |
| {% endwith %} | |
| {% block body %}{% endblock %} | |
| </div> | |
| </body> | |
| </html> |