Ένα μοντέλο φάσης που οδηγεί και το hero της live σελίδας ανάλυσης και κάθε live γραμμή στο widget «Αναλύσεις ημέρας». Δύο εκδόσεις: ποδόσφαιρο (υλοποιημένη) και μπάσκετ — και οι δύο εγκεκριμένες.
Η «φάση» είναι μία κατάσταση που περιγράφει έναν αγώνα και εμφανίζεται σε δύο μεγέθη. Δεν είναι δύο components: το ίδιο μοντέλο δίνει pill + σκορ + slot χρόνου, και ο καταναλωτής αποφασίζει μόνο μέγεθος και χρώμα φόντου.
foxbet-responsive-live.html → hero (.hw-live) και το widget
«Αναλύσεις ημέρας» (.aw-lv / .aw-sc / .aw-mn).
Όλοι οι live αγώνες του widget ακολουθούν τη φάση· το σκορ αλλάζει μόνο στον αγώνα που
περιγράφει η φάση.Τρία μέρη, πάντα με αυτή τη σειρά: pill (φάση) · σκορ · slot χρόνου. Το slot χρόνου είναι το μόνο που μπορεί να είναι κενό.
| Μέρος | Κλάση | Κανόνας | Token |
|---|---|---|---|
| Pill φάσης | .lvpill |
Κόκκινο όταν τρέχει ο αγώνας, γκρι σε κάθε παύση/λήξη (.is-rest στον
γονέα). Το κείμενο είναι η φάση, ΠΟΤΕ σκέτο «LIVE» σε παύση. |
--live #D92D20--rest #666666 |
| Παλμός | .lvdot |
Μόνο όσο τρέχει ο αγώνας — 1.5s ease-out, scale 1→3.2, opacity .85→0.
Στις παύσεις το dot μένει αλλά χωρίς animation. Πάντα σβήνει με
prefers-reduced-motion. | — |
| Σκορ | .lvsc |
Συμπαγές: en-dash, χωρίς κενά (1–0). Tabular numerals, αλλιώς το σκορ
«χοροπηδά» σε κάθε αλλαγή. Στη λήξη τα τέρματα του νικητή bold
(.win). | --num |
| Slot χρόνου | .lvcl |
Λεπτό / χρόνος περιόδου / tally. Κενό ⇒ δεν αποδίδεται (:empty), δεν
αφήνει κενό στη σειρά. Στο ΤΕΛΙΚΟ γίνεται γκρι (.fin). | --num |
Οκτώ φάσεις. Ο χρόνος ανεβαίνει σε λεπτά και δεν μηδενίζεται στο ημίχρονο.
Πηγή: το demo του widget «Αναλύσεις ημέρας» (#aw-live-demo) — μία πηγή αλήθειας για
τις δύο σελίδες.
Demo φάση · ποδόσφαιρο
| Φάση | Pill | Τρέχει | Σκορ | Slot χρόνου |
|---|---|---|---|---|
| Α΄ ημίχρονο | LIVE | ναι | 0–0 | τρέχον λεπτό, από 23′ |
| Ημίχρονο | ΗΜΧ | όχι | 1–0 | κενό |
| Β΄ ημίχρονο · default | LIVE | ναι | 1–0 | τρέχον λεπτό, από 63′ |
| Λήξη κανον. διάρκειας | ΛΗΞΗ Κ.Δ. | όχι | 1–1 | 90′ |
| Παράταση Α΄ / Β΄ | LIVE · ΠΑΡ. | ναι | 1–1 | από 98′ / 112′ |
| Πέναλτι | LIVE · ΠΕΝ. | ναι | 1–1 | tally χωρίς πρόθεμα: 4–3 |
| Τελικό | ΤΕΛΙΚΟ | όχι | 1–1, νικητής bold | (4–3) γκρι, σε παρένθεση |
4–3 και το bold του
νικητή μπαίνουν μόνο στον αγώνα της φάσης. Αλλιώς ένα 0–0 εμφανίζεται με
«(4–3)» και νικητή — συνέβη, γι' αυτό γράφεται εδώ.1–1 διαβάζεται ως λάθος. Σε κανονική νίκη
(2–1) bold γίνονται και το όνομα και τα τέρματα του νικητή.Επτά φάσεις: τέσσερα δεκάλεπτα, ημίχρονο, παράταση, τελικό. Ο χρόνος μετρά αντίστροφα μέσα στην περίοδο — έτσι δουλεύει κάθε scoreboard μπάσκετ, και είναι η βασική διαφορά από το ποδόσφαιρο.
0:00.Demo φάση · μπάσκετ
| Φάση | Pill | Τρέχει | Σκορ | Slot χρόνου |
|---|---|---|---|---|
| Α΄ δεκάλεπτο | Α΄ | ναι | 18–15 | αντίστροφα, από 10:00 |
| Β΄ δεκάλεπτο | Β΄ | ναι | 34–30 | αντίστροφα |
| Ημίχρονο | ΗΜΧ | όχι | 41–38 | κενό |
| Γ΄ δεκάλεπτο · default | Γ΄ | ναι | 55–52 | αντίστροφα |
| Δ΄ δεκάλεπτο | Δ΄ | ναι | 78–78 | αντίστροφα |
| Παράταση | ΠΑΡ. | ναι | 85–83 | αντίστροφα, από 5:00 |
| Τελικό | ΤΕΛΙΚΟ | όχι | 88–85, νικητής bold | (ΠΑΡ.) γκρι, αν κρίθηκε στην παράταση |
ΠΑΡ. 2, ΠΑΡ. 3 — δηλαδή ο αριθμός μπαίνει στο pill, ΟΧΙ στο
slot χρόνου, που κρατά το ρολόι. Στο ΤΕΛΙΚΟ ο δείκτης γίνεται (2 ΠΑΡ.).| Ποδόσφαιρο | Μπάσκετ | |
|---|---|---|
| Ρολόι | Ανεβαίνει σε λεπτά (63′), συνεχές — δεν
μηδενίζεται στο ημίχρονο· καθυστερήσεις ως 90+3′ |
Κατεβαίνει μέσα στην περίοδο (7:12) και μηδενίζει σε κάθε
δεκάλεπτο. Θέλει mm:ss, άρα το slot είναι φαρδύτερο |
| Pill όσο τρέχει | Πάντα LIVE (+ · ΠΑΡ. /
· ΠΕΝ.) |
Η περίοδος: Α΄ Β΄ Γ΄ Δ΄. Το «LIVE» δεν προσθέτει πληροφορία όταν το pill
λέει ήδη περίοδο, και το ρολόι δείχνει ότι τρέχει |
| Παύσεις | Μία: ΗΜΧ (+ ΛΗΞΗ Κ.Δ.) | Μία: ΗΜΧ. Τα διαλείμματα Α΄→Β΄ και Γ΄→Δ΄ δεν είναι φάσεις (§03) — το pill μένει στην
περίοδο με ρολόι 0:00 |
| Ισοπαλία | Κανονικό αποτέλεσμα· νικητής μόνο με πέναλτι | Δεν υπάρχει — πάντα νικητής, πάντα bold |
| Πλάτος σκορ | 1 ψηφίο ανά ομάδα στην πράξη | 2–3 ψηφία (105–98). Tabular numerals + χώρος για 3 ψηφία, αλλιώς η
γραμμή μετακινείται σε κάθε καλάθι |
| Δείκτης παράτασης | (4–3) = tally πέναλτι |
(ΠΑΡ.) / (2 ΠΑΡ.) = κρίθηκε στην παράταση |
sport στο μοντέλο, όχι δύο.Το markup είναι ίδιο για τα δύο σπορ και τους δύο καταναλωτές. Ο γονέας παίρνει
.is-rest — τίποτα άλλο δεν αλλάζει κλάση.
<!-- hero (live σελίδα ανάλυσης) — .is-rest όταν ο αγώνας δεν τρέχει --> <div class="lvhero is-rest"> <span class="lvpill"><span class="lvdot"></span>ΗΜΧ</span> <span class="lvsc">1<span class="d">–</span>0</span> <span class="lvcl"></span> <!-- κενό ⇒ δεν αποδίδεται --> </div> /* το μοντέλο — μία εγγραφή ανά φάση */ { key:'q3', pill:'Γ΄', live:true, run:true, base:600, score:'55–52' } /* live = τρέχει ο αγώνας → κόκκινο pill + παλμός run = υπάρχει ρολόι που κινείται base = ποδόσφαιρο: δευτερόλεπτα που ΑΝΕΒΑΙΝΟΥΝ · μπάσκετ: δευτερόλεπτα που ΚΑΤΕΒΑΙΝΟΥΝ pens / ot = δείκτης που εμφανίζεται σε παρένθεση στο ΤΕΛΙΚΟ */
| Έλεγχος | Αποτέλεσμα |
|---|---|
Λευκό στο #D92D20 | 4.83:1 — AA ✔ (12px bold = 4.5 απαιτούμενο) |
Λευκό στο #666666 | 5.74:1 — AA ✔ |
#D92D20 σε λευκό (slot χρόνου, widget) | 4.83:1 — AA ✔ |
| Η φάση δεν είναι μόνο χρώμα | Το pill αλλάζει κείμενο και ο παλμός σταματά |
| Reduced motion | prefers-reduced-motion σβήνει τον παλμό σε κάθε φάση |
| Αλλαγή σκορ | Το σκορ αλλάζει χωρίς αλληλεπίδραση: θέλει
aria-live="polite" στο .lvsc ώστε ένα goal/καλάθι να ανακοινώνεται
μία φορά. ΟΧΙ aria-live στο ρολόι — θα μιλάει κάθε δευτερόλεπτο |
| Συντομογραφίες | ΗΜΧ, ΠΑΡ., ΛΗΞΗ Κ.Δ. θέλουν
title/aria-label με ολόκληρη τη λέξη |
Κανένα. Το component είναι μόνο τυπογραφία + CSS (pill, dot, en-dash) — δεν χρησιμοποιεί εικόνες, εικονίδια ή λογότυπα, άρα δεν υπάρχει λίστα assets να κατεβάσετε. Τα λογότυπα καναλιών και τα εικονίδια σπορ που βλέπετε γύρω του ανήκουν στο widget «Αναλύσεις ημέρας» και τεκμηριώνονται στο δικό του handover.
Foxbet · Analysis page · Φάση αγώνα. Ποδόσφαιρο = υλοποιημένο στο
foxbet-responsive-live.html. Μπάσκετ = εγκεκριμένο 2026-07-30, προς υλοποίηση.