BetterMech PUBLIC · REV 0.1
Рецепта · сайт

Аванти · Далаверите на Варна — стъклени билети

Тенденции: Изтънчено стъкло (наследникът на 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 прозореца-светлини, купол на катедралата, кранове на пристанището, нисък дълъг мост, слънце на хоризонта, отблясък и отражения във водата. Условна Варна, не карта.