Handover · Predictions (Tips)

01Οι παραλλαγές

Τρεις άξονες: data-variant (επιφάνεια) × data-bet (τύπος στοιχήματος) × data-cta (ποιο CTA μπαίνει στην υποδοχή). Η δηλωμένη παραλλαγή αποφασίζει — ΟΧΙ το πλάτος του viewport, όπως και στο Form Bubbles.

02Επαληθευμένα ύψη

Κάθε παραλλαγή αποδίδεται στο ακριβές ύψος του frame της στο Figma. Μέτρηση σε Chromium στο πλάτος του frame, μόνο ορατό περιεχόμενο.

03Συμβόλαιο δεδομένων — οι υποδοχές

Το component.html είναι template με {{key}}. Ο renderer είναι σκόπιμα χωρίς λογική: ό,τι τελειώνει σε _html είναι έτοιμο κομμάτι markup. Κενή τιμή = η ενότητα δεν εμφανίζεται.

3CΔώρο, δείκτης, links & κίνηση 1.3.0

Τρία πράγματα μπήκαν εδώ, και το κρίσιμο είναι πού ζει το καθένα: το pill δώρου αλλάζει θέση και μέγεθος ανά παραλλαγή, ο δείκτης ποντάρισμα → Πιθανή επιστροφή έμεινε μόνο στις desktop κάρτες, και οι ομάδες και η διοργάνωση είναι πλέον links.

1. Το pill δώρου — τρεις θέσεις, τρία μεγέθη

Η θέση είναι απόφαση δεδομένων, όχι CSS: βάλε το markup στο slot που θέλεις. Το μέγεθος δεν είναι θέμα γούστου — το ορίζει η αριθμητική του container.

Το UI του pill είναι Figma 6174:37488 («Buttons», Tertiary Light): radius 1000, 1px #B3B3B3, fill #FFFFFF0D, Roboto 12/500 #1A1A1A, το δικό του glyph δώρου + ένας αριθμός. Δεν είναι κουμπί — ανακοινώνει, δεν πατιέται· το control μένει το μόνο πατήσιμο στοιχείο της κάρτας.

2. Ο δείκτης ποντάρισμα → Πιθανή επιστροφή

Ζει μόνο στις δύο desktop cols κάρτες. Το mobile και το sidebar δεν τον έχουν καθόλου· τα bb / outright δεν τον είχαν ποτέ, γιατί τυπώνουν ήδη «Ποντάρισμα / Πιθανό Κέρδος» από κάτω ({{stake_html}}) — οι ίδιοι αριθμοί δεν εμφανίζονται δύο φορές.

• Στη δική του στήλη στοιβάζεται: «Ποντάρισμα 10.00» πάνω από «Πιθανή επιστροφή 21.20», και το βέλος φεύγει — περιττό όταν η μία τιμή κάθεται πάνω από την άλλη. Σε μία γραμμή μετρήθηκε 254px και μηδένιζε τη στήλη του αγώνα.
• Οι δύο τιμές στοιχίζονται σε μία κολόνα (η στήλη των labels είναι auto), ώστε το 10.00 να κάθεται ακριβώς πάνω από το 21.20.
• 12/400 --mut για τις λέξεις, 12/700 --ink για τους αριθμούς. Η επιστροφή δεν είναι hero — ίδιο βάρος με το ποντάρισμα.

3. Links: οι ομάδες και η διοργάνωση

Κάθε .prd-team είναι <a> προς τη σελίδα ανάλυσης του αγώνα· το chip είναι <a class="prd-lg" href="{{leagueHref}}"> προς τη διοργάνωση. Τα hrefs των examples είναι placeholders — τα δίνει η σελίδα.

4. Κίνηση — δύο ρολόγια, ένα διακόπτης

3D1.3.1 — η ώρα δίπλα στις ομάδες, ένα link για τον αγώνα 1.3.0

Το κελί ώρας/σκορ επέστρεψε δίπλα στις ομάδες

1.3.1: το κελί κάθεται ακριβώς δίπλα στα ονόματα (12px), όχι στο δεξί άκρο της στήλης — το .prd-teams γίνεται flex:0 1 auto και «αγκαλιάζει» το περιεχόμενό του. Στο mobile μένει το flex:1 0 0 του Figma, που σπρώχνει το κελί δεξιά.

Στο cols layout η ώρα ήταν δική της σειρά στο τέλος της στήλης του αγώνα. Για το «Σάβ 23:00» δούλευε· για settled κάρτα όχι: το ίδιο κελί κρατά τότε δύο score chips, ένα ανά ομάδα, και μόνο του σε γραμμή δεν κάθονταν πια απέναντι από τις ομάδες τους. Τώρα το .prd-mid είναι κανονικό grid cell (όχι display:contents) και κρατά ομάδες + κελί ώρας μαζί, όπως στο mobile.

Ένα link για τον αγώνα, όχι ένα ανά ομάδα

Το anchor είναι το .prd-teams — το στοιχείο που υπήρχε ήδη — άρα δεν προστέθηκε wrapper και δεν άλλαξε κανένα box. Και τα δύο ονόματα υπογραμμίζονται μαζί στο hover, ώστε να διαβάζεται ως ένας στόχος.

04Εξάρτηση από το odds-cta

Το CTA δεν υλοποιείται εδώ. Έρχεται από το odds-cta μέσα στην υποδοχή .prd-cta. Απαιτείται odds-cta >= 4.0.0. Μοναδική πηγή αλήθειας: foxbet-odds-cta.pages.dev.

• Το cta_html κουβαλά το δικό του class="bo" wrapper, γιατί η οικογένεια V4/V5 είναι scoped κάτω από .bo — και το predictions δεν επιτρέπεται να δηλώσει κλάση bo (κανόνας prefix).
• Το V1 είναι σκέτο .modd — καμία επιπλέον κλάση — και η απόδοση μπαίνει σε .od, όχι .modd-od. Έτσι το δημοσιεύει το handover: κάρτα 41px που μεγαλώνει από 88.67px. Ένα V1 χωρίς label (bet builder) δεν θέλει τίποτα άλλο: το .modd-card κεντράρει από μόνο του και χωρίς .modd-sel δεν υπάρχει hairline να χωρίσει τίποτα.
• Στο desktop η υποδοχή τεντώνει το V4 στα 48px· το φυσικό του ύψος είναι 40 (4+4+24+4+4) και έτσι το δείχνει το sidebar.
• Στο bet builder μπαίνει V1. Το Figma εκεί ζωγραφίζει ένα δικό του block γεμάτο #1C1F56, χρώμα που δεν αντιστοιχεί σε καμία στοιχηματική και δεν είναι μία από τις 5 παραλλαγές — αντικαταστάθηκε με V1 ώστε το tip να χρησιμοποιεί μόνο πραγματικές παραλλαγές του component.

05Καταστάσεις

Η κατάσταση διεκπεραίωσης μπαίνει ως κλάση στην κάρτα και βάφει την αριστερή γραμμή.

06Tokens & αποκλίσεις

Χρησιμοποιούμενα tokens: --ink --mut --line --fill --body --win --err · instance var --prd-disp (Roboto Condensed — δεν υπάρχει token στο tokens.css).

• Figma uses text-primary #000000; mapped to --ink #1A1A1A
• Figma uses text-secondary #4A4A4A; mapped to --mut #666666
• Figma league chip uses greys/gray-200 #E0E0E0 and gray-100 #F2F2F2; mapped to --line #E6E6E6 and --fill #F2F2F2
• Figma league label uses blacks/black-300 #2E2E2E; mapped to --ink
• Roboto Condensed has no token in tokens/tokens.css - carried as instance var --prd-disp pending a token decision
• left-stroke colours measured in Figma are open #444444, won #4CAF50, lost #EF5350; mapped onto --ink, --win #027A48 and --err #D92D20. The won/lost mappings are noticeably darker than Figma - confirm before shipping
• sidebar surface #F9F9FE and its white league chip have no tokens; carried as literals
• V1 hugs its content at every breakpoint (odds-cta 3.0.0 replaced the fixed 100px card on 2026-07-30); on desktop it is centred in the 240px slot rather than stretched to fill it.
• the outright CTA fill is #202735 in Figma, which is neither novibet #303540 nor any other operator colour; rendered with bo-novibet
• League chip icons REVERSED from Figma on request (2026-07-30): the league mark leads and is the larger of the two (20px cell / 18px art, carrying the -4px overlap and z-index above the sport), the sport is a small indicator behind it (14px cell / 10px art). Figma had them equal at 16px with the sport first and larger.
• Bet-builder title is «Bet Builder» on BOTH devices (Vasilis, 2026-07-30). The mobile rendition 8329:310752 shows «Τελικο αποτέλεσμα - Κόμο» there, but the desktop master 4036:171714 has «Bet Builder» — the desktop one is right; a bet builder is not a single market.
• Figma's bet-builder CTA is a bespoke block filled #1C1F56, a colour matching no operator and not one of the five handover variants — replaced with V1 so the tip only uses real CTA variants.

Λυμένα

• ART-378 records V4 at 40px and the Tip appeared to render it at 48px. V4 is 40px by construction; the desktop Tip slot stretches it. The sidebar renders it at its natural 40px, which confirms this.
• the 2px white stroke must be an inset ring, not a CSS border - Figma draws it inside the frame, so a real border put every card 3-4px over its frame height.
• read Figma children with a visibility filter. The sidebar's Description and outright's Description + Icon Container are present but toggled OFF; rendering them put those two cards 36px over and 20px under.
• the divider must take zero layout space - as a real border-top it put both divider-bearing cards 1px over. Same rule as the V4/V5 hairline.

07Προσβασιμότητα

• Ο τίτλος είναι <h3> — η κάρτα ζει μέσα σε λίστα/ενότητα, οπότε το επίπεδο προσαρμόζεται στη σελίδα υποδοχής.
• Η αριστερή γραμμή και ο connector rail των σκελών είναι διακοσμητικά: aria-hidden="true".
• Τα V4/V5 δεν έχουν label μέσα στο control, άρα title + aria-label στο <a> είναι υποχρεωτικά.
• Τα εικονίδια αποτελέσματος κουβαλούν κείμενο («Κέρδισε» / «Έχασε») στο alt — η κατάσταση δεν επικοινωνείται μόνο με χρώμα.
• Τα εμβλήματα ομάδων είναι alt="": το όνομα της ομάδας υπάρχει ήδη ως κείμενο δίπλα.

08Τι ΔΕΝ περιλαμβάνεται

• «_Tip header», «betting facts», «offers» — είναι instances εξωτερικής library στο Figma, σβηστά σε κάθε rendition, και τα παιδιά τους δεν εκτίθενται. Δεν μετρήθηκαν, δεν υλοποιήθηκαν. Χρειάζεται να ανοίξουν στο Figma ή spec.
• «Buttons» — η γεωμετρία διαβάζεται (336×36, δύο 164×36, radius 8, padding 6/16, περίγραμμα 1px #4A4A4A) αλλά τα labels είναι instances, άρα άγνωστα.
• Το V2/V3 ως CTA μέσα σε tip — υπάρχει στο odds-cta, δεν χρησιμοποιείται εδώ.
• JavaScript. Το component είναι καθαρό CSS + markup· δεν έχει συμπεριφορά.

09Build checklist

• Φόρτωσε tokens/tokens.css, μετά odds-cta/component.css, μετά odds-cta/component-brand.css (για V4/V5), μετά predictions/component.css. Η σειρά έχει σημασία.
• Όρισε το --prd-disp σε Roboto Condensed στη σελίδα υποδοχής μέχρι να μπει token.
• Δήλωσε data-variant, data-bet, data-cta στο .prd — μη βασίζεσαι στο viewport.
• Στο V1: σκέτο .modd + .od. Στα V4/V5: βάλε το class="bo" wrapper.
• Μέτρα το ύψος της κάρτας στο πλάτος του frame και σύγκρινε με τον πίνακα 02 — delta 0, με μία εξαίρεση: οι δύο desktop cols κάρτες είναι σκόπιμα 122 (δες 3D).
• Έλεγξε ότι δεν υπάρχει σπασμένη εικόνα: [...document.images].filter(i => !i.complete || !i.naturalWidth).