Рецепта · сайт
Аванти · Далаверите на Варна — стъклени билети
Тенденции: Изтънчено стъкло (наследникът на glassmorphism) + Целенасочени микровзаимодействия. Концепция на Better Mechanics по рецептата — не е официалният сайт на марката.
Доказателството
WEB · AVANTI-STAKLOREV 0.1
- axe serious
- 0
- overflow 360
- 0 px
- weight
- 350 KB
- h1
- 1
- lang
- bg
- date
- 2026-10-19
провереноaxe (WCAG 2.2 AA) в светла и тъмна тема · 360 px · автоматично; ръчният преглед предстои
(а) Многократният промпт (EN, неутрален към марката)
Build a one-page homepage for a LOCAL DEALS LIST (human-moderated offers that come
directly from businesses). The idea: every offer is a frosted-glass TICKET floating over
a warm evening view of the city, drawn entirely in code. The memorable moment: the
visitor TEARS OFF the ticket stub and the ticket flips to show how to use an offer.
TRENDS
1. Refined glass (successor of glassmorphism): translucent surfaces ONLY where they add
depth over the illustrated scene — the floating header, the hero ticket, the filter
bar over the sea. Everything else is solid. Never glass on glass.
2. Purposeful micro-interactions: each one explains a state (tear = "reveal usage",
punch = "this category is selected", shake + message = "this field is wrong",
spinner + label = "sending", stamp = "waiting for human review").
LAYOUT (desktop; on phones everything stacks, the ticket goes under the headline)
+------------------------------------------------------------------+
| (glass pill header) logo · anchors · theme · [+ Share a deal] |
+------------------------------------------------------------------+
| EYEBROW ┌─────────────────────┐ |
| HUGE HEADLINE with one word on a │ GLASS TICKET │ | hero = inline SVG
| yellow price-tag highlight │ specimen fields │ | evening: sky
| promise sentence │ (labels, no values) │ | gradient, stars,
| [Primary] [Ghost] ├ ─ ─ perforation ─ ─ ┤ | skyline + lights,
| (fact pills on dark backing) │ STUB: "Tear off" │ | sun, sea with
| └─────────────────────┘ | shimmering
| ~~~~~~~~~~~ skyline · lights · sea · reflections ~~~~~~~~~~~~~~ | reflections
| ┌ glass filter bar: search · sort · category chips (punch) ─────┐ |
+------------------------------------------------------------------+
| H2 "Today" + snapshot note → dark 'sea' panel with a grid of GLASS |
| offer tickets (12 + 'show more'), honest empty state on no match |
| H2 "The path of one offer" → 4 solid ticket-stub cards |
| H2 "In / Out" → two columns: rules (light) vs excluded (dark) |
| H2 "Share a deal" → real form | live preview ticket that |
| | "prints" as you type + stamp |
| Mission quote (serif) | subscribe links (RSS, partner, agents) |
| footer: operator data + "concept" label |
+------------------------------------------------------------------+
MUST
- Glass = backdrop-filter blur 12–16px + saturate, tint >= 74% opacity, 1px light edge.
Solid fallback for: no backdrop-filter support, prefers-reduced-transparency,
prefers-contrast: more. Measure text contrast against the DARKEST and BRIGHTEST part
of the scene behind each glass panel (AA).
- Ticket notches (perforation) via CSS mask radial-gradients so the scene shows through.
- Tear: pointer drag sideways (touch-action: pan-y so the page still scrolls) with
rubber-band follow and a "tension" glow on the perforation past half the threshold;
release past threshold → stub falls, ticket flips (rotateY out → swap content → in,
no preserve-3d, so backdrop-filter keeps working). Click / Enter / Space do the same.
A "stick it back" button restores it and returns focus.
- Offers render server-side (no-JS) and are re-rendered from embedded JSON for filtering.
Each offer ticket = glass top (amount, title as stretched link to the offer page, place)
+ glass stub (deadline, category, source) over a dark panel with warm light blobs.
- Category chips are buttons with aria-pressed and counts; the selected one gets a
"punched hole" pop and the list scrolls into view. No match = context-aware empty state.
- Form: inline validation with the service's own messages, shake only as a hint
(message always in text, aria-invalid, aria-describedby), live block of known
intermediary domains while typing the URL, loading state with spinner + text,
success = stamp on the live preview ticket. The demo form sends nothing and says so.
- Scene motion (stars, lights, water shimmer) only under prefers-reduced-motion:
no-preference; reduced motion = instant state changes.
- One h1, lang set, self-hosted fonts with local language forms, light + dark tokens,
no horizontal scroll at 360 px, page < 1 MB without fonts.
FORBIDDEN
- Invented or edited offers, discounts, prices, businesses, counts, reviews: render offers only
from the real feed, only the fields that exist, and label a snapshot as a snapshot.
- Photos or stock images; purple gradients; glass on every card; text on an
unpredictable background without a backing; information available only on hover;
"magnetic" primary buttons; animation instead of an error message.
(б) Брифът за Аванти
- Съдържание — само от живото огледало на promo.varnahub.com (виж (в)): заглавието „Далаверите на Варна“, уводът от началната, „Сподели далаверата“ с полетата и техните подсказки, грешките на сървъра, етикетите за източник, правилото „3 × Свършила“, правилата от Общите условия (без посредници, чл. 65 ЗЗП, храна — само здравословна от проверени места, до 120 дни), каузата, RSS / „Варна сега“ / „За AI агенти“, данните на оператора.
- Офертите — истински, моментна снимка.
oferti_snimka_2026-10-19.jsonе снимка на публичното API (https://promo.varnahub.com/api/avanti.php, 19.10.2026, 29 аванти; големите вериги не се показват като аванти — на живия сайт стоят отдолу като брошури). Генераторът (_gen/gen_scena.py) ги подрежда поpublikuvana(най-новите първо), взема само полетатаzaglavie,kade,otstapka,kat_ime,do,bez_srok,ot,urlи не добавя и не променя нищо. На билета: отстъпката (ако я има), заглавието, мястото, срокът („до …“ или „без срок“ приbez_srok), категорията и източникът („от сайта на търговеца“); заглавието води към живата страница на авантата (url,rel="noopener"). Показват се 12, „Покажи още“ дава следващите; категориите (само тези с аванти, с броя) и търсенето работят върху всички 29. Билетът в героя е най-новата аванта, а опакото му (след късането) е „Как се ползва“. Видим ред: „Офертите са моментна снимка от promo.varnahub.com към 19.10.2026 — актуалните са на живия сайт →“. - Цветове — от
assets/css/promo.css: фон#fff8ef, текст#2b2119, доматено#c43c17, жълт етикет#ffd23f; тъмната тема#15100c/#f6ece2/#ff7a4d. Сцената (вечер) е отделна: нощно синьо#1b2340→ бордо → доматено → кехлибар на хоризонта, море#1c2236 → #0b1220. - Шрифтове — Unbounded (заглавия, билетът), Manrope (текст), Piazzolla (цитатът с каузата). Всички от
../_obshto/fonts/, сlocl BGR. Живият сайт ползва Open Sans — тук нарочно не (забранен от CDN; и Unbounded дава характера на „етикет за цена“). - Сцената — генерирана от
_gen/gen_scena.py(семе 1907): небе, звезди, хълмове, блокове с ~230 прозореца-светлини, купол на катедралата, кранове на пристанището, нисък дълъг мост, слънце на хоризонта, отблясък и отражения във водата. Условна Варна, не карта.