Spaces:
Running
Running
| <style> | |
| :root { --bg:#F0F4F8;--surface:#FFFFFF;--border:#DDE3EC; --text:#1E293B;--text-soft:#64748B; --accent:#F59E0B;--accent-d:#D97706;--accent-fg:#0F172A; --hdr-bg:linear-gradient(135deg,#1E3A5F 0%,#0F2744 100%); --shadow:0 4px 20px rgba(0,0,0,.09); --shadow-btn:0 6px 16px rgba(245,158,11,.35); --r:14px;--r-sm:8px; } | |
| @media(prefers-color-scheme:dark){ :root{ --bg:#0B1220;--surface:#1A2438;--border:#2D3F58; --text:#E8EFF7;--text-soft:#7A96B8; --accent:#FBBF24;--accent-d:#F59E0B;--accent-fg:#0B1220; --hdr-bg:linear-gradient(135deg,#091A30 0%,#040D1A 100%); --shadow:0 4px 24px rgba(0,0,0,.45); --shadow-btn:0 6px 18px rgba(251,191,36,.3); } } | |
| .ur*{box-sizing:border-box;margin:0;padding:0}.ur{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);padding:12px;width:100%;overflow-x:hidden;} | |
| /* --- CSS ЛОГИКА ВКЛАДОК БЕЗ JS --- */ | |
| .ur-radio-tab | |
| { | |
| display: none !important; | |
| position: absolute !important; | |
| opacity: 0 !important; | |
| width: 0 !important; | |
| height: 0 !important; | |
| pointer-events: none !important; | |
| } | |
| .ur-tabs { display:flex; gap:10px; margin-bottom:14px; overflow-x:auto; padding-bottom:4px; } | |
| .ur-tabs::-webkit-scrollbar { height:6px; } | |
| .ur-tabs::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; } | |
| .ur-tab-label { background:var(--surface); border:1px solid var(--border); color:var(--text-soft); padding:10px 18px; border-radius:var(--r-sm); cursor:pointer; font-weight:600; white-space:nowrap; transition:all .2s; font-size:.95rem; box-shadow:0 2px 5px rgba(0,0,0,.02); user-select:none; } | |
| .ur-tab-label:hover { border-color:var(--accent); color:var(--text); } | |
| .ur-panel { display: none; animation:fadeIn .3s ease; } | |
| @keyframes fadeIn { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } } | |
| /* Динамическая связь радио-кнопок с панелями через Jinja2 */ | |
| {% for m in models %} | |
| #tab-{{ m.id }}:checked ~ .ur-panels #panel-{{ m.id }} { display: block; } | |
| #tab-{{ m.id }}:checked ~ .ur-tabs label[for="tab-{{ m.id }}"] { background:var(--accent); color:var(--accent-fg); border-color:var(--accent); box-shadow:var(--shadow-btn); } | |
| {% endfor %} | |
| /* --------------------------------- */ | |
| .ur-hdr{background:var(--hdr-bg);border-radius:var(--r);padding:26px 32px;margin-bottom:14px;box-shadow:var(--shadow)}.ur-hdr h1{color:var(--accent)!important;font-size:clamp(1.5rem,5vw,2.2rem);font-weight:800;line-height:1.2;margin-bottom:6px}.ur-hdr .sub{color:#fff!important;font-size:clamp(.85rem,3vw,1rem);opacity:.88;line-height:1.5;display:block}.ur-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px;box-shadow:var(--shadow)}.ur-row1{display:grid;grid-template-columns:3fr 2fr;gap:14px;margin-bottom:14px;align-items:stretch}.ur-gallery-frame{width:100%;height:100%;min-height:450px;flex-grow:1;border:none;border-radius:8px;display:block;background:var(--surface);} | |
| @media(max-width:700px){ .ur-row1{grid-template-columns:1fr} .ur-gallery-frame{height:350px;} } | |
| @media(max-width:480px){ .ur{padding:0;} .ur-hdr{padding:16px;border-radius:0;margin-bottom:8px;} .ur-card{padding:14px;border-radius:0;border-left:none;border-right:none;margin-bottom:8px;} .ur-btn{padding:14px;font-size:1rem} .ur-phone{font-size:1.1rem} .ur-map{height:140px} .ur-gallery-frame{border-radius:0;} } | |
| .ur-contacts{display:flex;flex-direction:column}.ur-contacts h3{color:var(--accent);font-size:.88rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}.ur-addr{color:var(--text);font-size:.95rem;line-height:1.65;margin-bottom:10px}.ur-phone{display:block;color:var(--accent)!important;text-decoration:none;font-size:1.25rem;font-weight:800;margin-bottom:12px}.ur-phone:hover{color:var(--accent-d)!important}.ur-map{width:100%;min-height:160px;flex-grow:1;border:0;border-radius:var(--r-sm);display:block;margin-bottom:12px}.ur-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px;margin-bottom:9px;border-radius:var(--r-sm);font-weight:700;font-size:.96rem;text-decoration:none!important;transition:transform .18s,box-shadow .18s,background .18s;-webkit-tap-highlight-color:transparent}.ur-btn:last-child{margin-bottom:0}.ur-btn-tg{border:2px solid var(--accent);background:transparent;color:var(--text)!important}.ur-btn-tg:hover,.ur-btn-tg:active{background:var(--accent)!important;color:var(--accent-fg)!important;transform:translateY(-2px);box-shadow:var(--shadow-btn)}.ur-btn-tel{background:var(--accent);color:var(--accent-fg)!important;border:none}.ur-btn-tel:hover,.ur-btn-tel:active{background:var(--accent-d)!important;transform:translateY(-2px);box-shadow:var(--shadow-btn)}.ur-row2{margin-bottom:14px}.ur-desc h2{color:var(--accent)!important;font-size:1.1rem;margin-bottom:10px}.ur-desc h3{color:var(--accent)!important;font-size:.97rem;margin:12px 0 5px}.ur-desc p{color:var(--text);font-size:.93rem;line-height:1.65;margin-bottom:7px}.ur-desc ul{padding-left:18px;margin-bottom:9px}.ur-desc li{color:var(--text);font-size:.93rem;line-height:1.7}.ur-desc hr{border:none;border-top:1px solid var(--border);margin:10px 0}.ur-desc table{width:auto;max-width:100%;border-collapse:collapse;font-size:.9rem;margin-bottom:10px;table-layout:auto}.ur-desc th,.ur-desc td{border:1px solid var(--border);padding:7px 12px;color:var(--text);text-align:left;white-space:nowrap}.ur-desc td:last-child{white-space:normal}.ur-desc th{background:rgba(245,158,11,.12);font-weight:700}.ur-desc blockquote{border-left:3px solid var(--accent);padding:6px 12px;color:var(--text-soft);font-style:italic;font-size:.92rem;margin:10px 0;background:rgba(245,158,11,.05);border-radius:0 var(--r-sm) var(--r-sm) 0}.ur-footer{text-align:center;padding:8px 0 4px;color:var(--text-soft);font-size:.82rem;line-height:1.8;border-top:1px solid var(--border)}.ur-footer a{color:var(--accent);text-decoration:none;font-weight:600} | |
| </style> | |
| <div class="ur"> | |
| {% for m in models %} | |
| <input type="radio" name="ur-model-tabs" id="tab-{{ m.id }}" class="ur-radio-tab" {% if loop.first %}checked{% endif %}> | |
| {% endfor %} | |
| {% if models|length > 1 %} | |
| <div class="ur-tabs"> | |
| {% for m in models %} | |
| <label for="tab-{{ m.id }}" class="ur-tab-label">{{ m.name }}</label> | |
| {% endfor %} | |
| </div> | |
| {% endif %} | |
| <div class="ur-panels"> | |
| {% for m in models %} | |
| <div class="ur-panel" id="panel-{{ m.id }}"> | |
| <div class="ur-hdr"> | |
| <h1>⚡ {{ m.title }}</h1> | |
| <span class="sub">{{ m.subtitle }}</span> | |
| </div> | |
| <div class="ur-row1"> | |
| <div class="ur-card" style="padding:10px; display:flex; flex-direction:column;"> | |
| {{ m.gallery_html | safe }} | |
| </div> | |
| <div class="ur-card ur-contacts"> | |
| <div style="background:rgba(245,158,11,.1);border:2px solid var(--accent);border-radius:var(--r-sm);padding:12px 16px;margin-bottom:14px;text-align:center;"> | |
| <div style="font-size:.8rem;color:var(--text-soft);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;">💵 Ціна</div> | |
| <div style="font-size:1.9rem;font-weight:900;color:var(--accent);line-height:1;">{{ m.price }}</div> | |
| </div> | |
| <h3>📍 Де нас знайти</h3> | |
| <div class="ur-addr">🏛 {{ contacts.address | safe }}</div> | |
| <a href="tel:{{ contacts.phone }}" class="ur-phone">📞 {{ contacts.phone_display }}</a> | |
| <h3>🗺 Карта</h3> | |
| <iframe class="ur-map" src="{{ contacts.map_iframe }}" allowfullscreen loading="lazy"></iframe> | |
| <a href="{{ contacts.tg_link }}" target="_blank" class="ur-btn ur-btn-tg">✈️ {{ contacts.tg_display }}</a> | |
| <a href="tel:{{ contacts.phone }}" class="ur-btn ur-btn-tel">📞 Зателефонувати</a> | |
| </div> | |
| </div> | |
| <div class="ur-row2"> | |
| <div class="ur-card ur-desc">{{ m.desc_html | safe }}</div> | |
| </div> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| <div class="ur-footer"> | |
| © 2026 Unstop Retail — {{ contacts.address }} • <a href="tel:{{ contacts.phone }}">{{ contacts.phone_display }}</a> | |
| </div> | |
| </div> |