Design → Dev Handover

01Δύο μορφές, ένα markup measured 2026-08-02

Το DOM είναι το ίδιο στα δύο breakpoints — ουδεμία αλλαγή markup, μόνο CSS. Η κάρτα αλλάζει από μία σειρά (desktop: pick αριστερά, CTA δεξιά) σε στήλη (mobile: pick κεντραρισμένο, CTA κάτω).

02Desktop ≥1200px

Μία σειρά: pick + αριθμοί αριστερά, CTA + ΕΕΕΠ δεξιά. Το pick είναι ο hero της κάρτας (24px), οι αριθμοί σε Roboto Mono με tabular figures, και μια 3px μπάρα Primary→Secondary σημαδεύει την επιλογή.

Desktop · open · tip card 808×126

Το προγνωστικό

1 & Over 2.5

Ποντάρισμα: 10.00Πιθανή επιστροφή: 31.00

3.10

ΕΕΕΠ | 21+ | ΠΑΙΞΕ ΥΠΕΥΘΥΝΑ

.vp-bet · 808 × 126 · padding 20/22 · DS colour shadow

03Mobile ≤1199px

Στήλη: label + pick κεντραρισμένα, μετά η σειρά πονταρίσματος χωρισμένη αριστερά/δεξιά, μετά το CTA και τέλος η γραμμή ΕΕΕΠ. Το pick μένει 16px — σε οθόνη 390px ένα 24px τίτλος σπάει σε δύο σειρές.

Mobile · open · tip card 324×187

Το προγνωστικό

1 & Over 2.5

Ποντάρισμα: 10.00Πιθανή επιστροφή: 31.00

3.10

ΕΕΕΠ | 21+ | ΠΑΙΞΕ ΥΠΕΥΘΥΝΑ

.vp-bet · 324 × 187 · padding 17 · χωρίς accent bar

04Τα τρία states Και τα δύο

Κάθε state αλλάζει τρία πράγματα και τίποτα άλλο: class στην κάρτα, σήμα μέσα στον τίτλο, και το label+χρώμα του δεύτερου αριθμού. Κάθε label συμφωνεί με το νούμερό του — γι' αυτό το lost λέει «Κουβάς» και όχι «Πιθανή επιστροφή» δίπλα σε −10.00.

Desktop · won

Το προγνωστικό

1 & Over 2.5

Ποντάρισμα: 10.00Επιστροφή: 31.00

3.10

ΕΕΕΠ | 21+ | ΠΑΙΞΕ ΥΠΕΥΘΥΝΑ

Desktop · lost

Το προγνωστικό

1 & Over 2.5

Ποντάρισμα: 10.00Κουβάς: −10.00

3.10

ΕΕΕΠ | 21+ | ΠΑΙΞΕ ΥΠΕΥΘΥΝΑ

Mobile · won

Το προγνωστικό

1 & Over 2.5

Ποντάρισμα: 10.00Επιστροφή: 31.00

3.10

ΕΕΕΠ | 21+ | ΠΑΙΞΕ ΥΠΕΥΘΥΝΑ

Mobile · lost

Το προγνωστικό

1 & Over 2.5

Ποντάρισμα: 10.00Κουβάς: −10.00

3.10

ΕΕΕΠ | 21+ | ΠΑΙΞΕ ΥΠΕΥΘΥΝΑ

05Το block γύρω από το tip

Το tip δεν ζει μόνο του: κάθεται μέσα στο .vpred, με header αναλυτών και το κείμενο εκτίμησης πάνω από αυτό. Η σειρά ορίζεται με order, ώστε το DOM (και η σειρά για screen readers) να μείνει header → tip → κείμενο.

• Header: δύο φωτογραφίες (56/44px, radius 12/10) χωρίς overlap, χωρισμένες με 1px --line · eyebrow «ΕΚΤΙΜΗΣΗ ΕΙΔΙΚΩΝ» 12/700 uppercase σε --accent · ονόματα 18/700 (links) · «Αναλυτές Foxbet» 14/400 --mut.
• Κείμενο: 14/400, line-height 22.68px, clamp σε 3 σειρές με «Δες περισσότερα». Ευθυγραμμισμένο με τις φωτογραφίες (--tipinset:0, 2026-08-02) — το παλιό 12px inset δεν ευθυγραμμιζόταν πλέον με τίποτα.
• Φλόγα: ένα conic-gradient spark τρέχει στο περίγραμμα όσο η κάρτα είναι στο viewport (.is-lit από IntersectionObserver) και σταματά μόλις ανοίξει το κείμενο (.is-reading) · prefers-reduced-motion τη σβήνει.

Όλο το block · desktop · 842×345

Εκτίμηση ειδικών

Κώστας Φίλιος & Γιάννης Μάρκουλας

Αναλυτές Foxbet

Η Ολλανδία μπαίνει φαβορί με δεδομένη την ποιότητα στην επίθεση και τη συνεχή πίεση ψηλά στο γήπεδο. Η Ιαπωνία ωστόσο δείχνει συνέπεια στο σκοράρισμα εκτός έδρας, στοιχείο που ανεβάζει αισθητά την πιθανότητα για γκολ και στις δύο εστίες. Με βάση τα xG και των δύο ομάδων τις τελευταίες πέντε εμφανίσεις, το μοντέλο μας δίνει σαφές προβάδισμα στο σενάριο νίκης των «οράνιε» με παραπάνω από δύο γκολ συνολικά στο ματς.

Στον άξονα του κέντρου, η ολλανδική ομάδα έχει το πλεονέκτημα τόσο στην κατοχή όσο και στη δημιουργία φάσεων, με τους ακραίους μέσους να τροφοδοτούν συνεχώς την επίθεση. Η Ιαπωνία θα προσπαθήσει να απαντήσει με γρήγορες μεταβάσεις και πρεσάρισμα, κάτι που ιστορικά την έχει βοηθήσει απέναντι σε τεχνικά ανώτερους αντιπάλους. Παρ' όλα αυτά, η αμυντική γραμμή των Ασιατών δείχνει ευάλωτη στις στατικές φάσεις, σημείο στο οποίο οι Ολλανδοί υπερτερούν χάρη στο ύψος και την τοποθέτησή τους. Συνολικά, το σενάριο μιας νίκης της Ολλανδίας με τουλάχιστον τρία γκολ στο παιχνίδι παραμένει το πιθανότερο, με την αξία να εντοπίζεται στον συνδυασμό «1 & Over 2.5».

Δες περισσότερα

Το προγνωστικό

1 & Over 2.5

Ποντάρισμα: 10.00Πιθανή επιστροφή: 31.00

3.10

ΕΕΕΠ | 21+ | ΠΑΙΞΕ ΥΠΕΥΘΥΝΑ

06Markup — copy/paste

Ένα markup για τα δύο breakpoints. Το state μπαίνει με class στο .vp-bet και οι δύο αριθμοί είναι ζευγάρια label+value σε .vp-kv — χωρίς αυτό, στο desktop flex row κάθε λέξη γίνεται ξεχωριστό flex item και το gap πέφτει ανάμεσα στο label και τον αριθμό του.

<!-- ΤΟ TIP. Το state είναι is-open | is-won | is-lost. -->
<div class="vp-bet is-open">
  <div class="vp-bet-in">
    <div class="vp-bet-l">
      <div class="vp-sel">
        <p class="vp-kicker">Το προγνωστικό</p>
        <!-- settled: το σήμα μπαίνει ΜΕΣΑ στο h3, πριν το κείμενο -->
        <h3 class="vp-ttl">1 &amp; Over 2.5</h3>
      </div>
      <p class="vp-stake">
        <span class="vp-kv">Ποντάρισμα: <b>10.00</b></span>
        <span class="vp-kv">Πιθανή επιστροφή: <b>31.00</b></span>
      </p>
    </div>
    <div class="vp-odds">
      <!-- odds-cta V6: .bodd.bodd--pill.bo-<operator> — 197×48 -->
    </div>
  </div>
  <p class="vp-reg">ΕΕΕΠ | 21+ | ΠΑΙΞΕ ΥΠΕΥΘΥΝΑ</p>
</div>

<!-- SETTLED — τι αλλάζει στο won: -->
<h3 class="vp-ttl"><span class="vp-ic"><img src="assets/won.svg" alt="Κέρδισε"
     width="14" height="14"></span>1 &amp; Over 2.5</h3>
<span class="vp-kv">Επιστροφή: <b class="vp-v--win">31.00</b></span>
<!-- και στο lost: «Κουβάς» + <b class="vp-v--loss">−10.00</b> -->

07Accessibility & regulatory

• ΕΕΕΠ | 21+ | ΠΑΙΞΕ ΥΠΕΥΘΥΝΑ υποχρεωτικό — το tip ονομάζει operator στο CTA. Η γραμμή είναι Verdana 12.27px / line-height 19 — αυτό είναι το Figma αυτούσιο και δεν το ομογενοποιούμε: είναι regulatory copy και υπογράφεται όπως ρεντάρει.
• Το σήμα αποτελέσματος έχει πραγματικό alt («Κέρδισε» / «Έχασε»): το χρώμα δεν είναι ο μόνος φορέας του αποτελέσματος (SC 1.4.1).
• Τα ονόματα των αναλυτών είναι links στο ίδιο weight με τον τίτλο — underline μόνο στο hover.
• Το «Δες περισσότερα» είναι <button>, όχι link, και στο κλείσιμο επαναφέρει το scroll στην κορυφή της κάρτας με scroll-margin-top.
• Οι αριθμοί στο desktop είναι font-variant-numeric: tabular-nums — χωρίς αυτό το «10.00» και το «31.00» δεν έχουν ίδιο οπτικό πλάτος.

08Τι αφαιρέθηκε

Το προηγούμενο handover (v1.4.0) περιέγραφε το .prd card σε 10 renditions — mobile/desktop × open/lost × single/bet-builder/outright + sidebar. Κανένα από αυτά δεν ρεντάρει στη σελίδα ανάλυσης.

09Build checklist

• Ένα markup, δύο μορφές με CSS. Μην διπλασιάσετε το DOM ανά breakpoint.
• Desktop: pick 24px, αριθμοί Roboto Mono 16 tabular, 3px accent bar, DS colour shadow. Mobile: pick 16px κεντραρισμένο, χωρίς bar, αριθμοί Roboto 12.
• Τα ζευγάρια πονταρίσματος σε .vp-kv — όχι γυμνά text nodes.
• State = class στο .vp-bet + σήμα μέσα στο .vp-ttl + label/χρώμα στον 2ο αριθμό. Το ύψος δεν αλλάζει.
• CTA = odds-cta V6 (197×48) μέσα στο .vp-odds. ΕΕΕΠ γραμμή πάντα.
• Κείμενο και φωτογραφίες στην ίδια κάθετη γραμμή (inset 0).
• Και οι δύο σελίδες (pregame + live) — byte-identical.
• Μην σβήσετε το κρυμμένο #tipCard — βλ. §08.