One phase model that drives and the hero of the live analysis page and every live row in the «Αναλύσεις ημέρας» widget. Two editions: football (implemented) and basketball — both approved.
The «phase» is one state that describes a match and appears at two sizes. It is not two components: the same model produces pill + score + time slot, and the consumer decides only the size and the background colour.
foxbet-responsive-live.html → hero (.hw-live) and the «Αναλύσεις ημέρας» widget (.aw-lv / .aw-sc / .aw-mn).
Every live match in the widget follows the phase· the score changes only on the match the phase describes.Three parts, always in this order: pill (phase) · score · time slot. The time slot is the only one that may be empty.
| Part | Class | Rule | Token |
|---|---|---|---|
| Phase pill | .lvpill |
Red while the match is running , grey at every pause/end (.is-rest on the parent). The text is the phase — NEVER a bare «LIVE» while paused. |
--live #D92D20--rest #666666 |
| Pulse | .lvdot |
Only while the match is running — 1.5s ease-out, scale 1→3.2, opacity .85→0. At pauses the dot stays but without animation. Always suppressed under
prefers-reduced-motion. | — |
| Score | .lvsc |
Tight: en-dash, no spaces (1–0). Tabular numerals, otherwise the score jumps on every change. At full time the winner's goals are bold
(.win). | --num |
| Time slot | .lvcl |
Minute / period clock / tally. Empty ⇒ not rendered (:empty), it leaves no gap in the row. At ΤΕΛΙΚΟ it turns grey (.fin). | --num |
Eight phases. The clock counts up in minutes and does not reset at half time. Source: the «Αναλύσεις ημέρας» widget demo (#aw-live-demo) — one source of truth for both pages.
Phase demo · football
| Phase | Pill | Running | Score | Time slot |
|---|---|---|---|---|
| First half | LIVE | yes | 0–0 | current minute, from 23′ |
| Half time | ΗΜΧ | no | 1–0 | empty |
| Second half · default | LIVE | yes | 1–0 | current minute, from 63′ |
| End of normal time | ΛΗΞΗ Κ.Δ. | no | 1–1 | 90′ |
| Extra time, first / second half | LIVE · ΠΑΡ. | yes | 1–1 | from 98′ / 112′ |
| Penalty shootout | LIVE · ΠΕΝ. | yes | 1–1 | tally no prefix: 4–3 |
| Full time | ΤΕΛΙΚΟ | no | 1–1, winner bold | (4–3) grey, in brackets |
4–3 and the winner's bold apply only to the phase's own match. Otherwise a 0–0 shows up with «(4–3)» and a winner — it happened, which is why it is written down here.1–1 reads as an error. On a normal win (2–1) both the winner's name and goals go bold.Seven phases: four quarters, half time, overtime, final. The clock counts down within the period — that is how every basketball scoreboard works, and it is the core difference from football.
0:00.Phase demo · basketball
| Phase | Pill | Running | Score | Time slot |
|---|---|---|---|---|
| First quarter | Α΄ | yes | 18–15 | counting down, from 10:00 |
| Second quarter | Β΄ | yes | 34–30 | counting down |
| Half time | ΗΜΧ | no | 41–38 | empty |
| Third quarter · default | Γ΄ | yes | 55–52 | counting down |
| Fourth quarter | Δ΄ | yes | 78–78 | counting down |
| Overtime | ΠΑΡ. | yes | 85–83 | counting down, from 5:00 |
| Full time | ΤΕΛΙΚΟ | no | 88–85, winner bold | (ΠΑΡ.) grey, if it was decided in overtime |
ΠΑΡ. 2, ΠΑΡ. 3 — that is, the number goes in the pill, NOT in the time slot, which keeps the clock. At ΤΕΛΙΚΟ the marker becomes (2 ΠΑΡ.).| Football | Basketball | |
|---|---|---|
| Clock | Counts up in minutes (63′), continuous — no reset at half time; stoppage time as 90+3′ |
Counts down within the period (7:12) and resets every quarter. Needs mm:ss, so the slot is wider |
| Pill while running | Always LIVE (+ · ΠΑΡ. /
· ΠΕΝ.) |
The period: Α΄ Β΄ Γ΄ Δ΄. «LIVE» adds nothing when the pill already names a period, and the clock already shows it is running |
| Pauses | One: ΗΜΧ (+ ΛΗΞΗ Κ.Δ.) | One: ΗΜΧ. The Α΄→Β΄ and Γ΄→Δ΄ breaks are not phases (§03) — the pill stays on the period, clock at 0:00 |
| Draw | A normal result; a winner only via penalties | Does not exist — always a winner, always bold |
| Score width | 1 digit per team in practice | 2–3 digits (105–98). Tabular numerals + room for 3 digits, otherwise the row shifts on every basket |
| Overtime marker | (4–3) = penalty tally |
(ΠΑΡ.) / (2 ΠΑΡ.) = decided in overtime |
sport in the model, not two.The markup is identical for both sports and both consumers. The parent takes
.is-rest — nothing else changes class.
<!-- 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 = δείκτης που εμφανίζεται σε παρένθεση στο ΤΕΛΙΚΟ */
| Check | Result |
|---|---|
White on #D92D20 | 4.83:1 — AA ✔ (12px bold ⇒ 4.5 required) |
White on #666666 | 5.74:1 — AA ✔ |
#D92D20 on white (time slot, widget) | 4.83:1 — AA ✔ |
| The phase is not colour alone | The pill changes its text and the pulse stops |
| Reduced motion | prefers-reduced-motion kills the pulse in every phase |
| Score change | The score changes with no interaction: it needs
aria-live="polite" on the .lvsc so a goal/basket is announced once. NOT aria-live on the clock — it would speak every second |
| Abbreviations | ΗΜΧ, ΠΑΡ., ΛΗΞΗ Κ.Δ. need a
title/aria-label with the full word |
None. The component is typography + CSS only (pill, dot, en-dash) — it uses no images, icons or logos, so there is no asset list to download. The channel logos and sport icons you see around it belong to the «Αναλύσεις ημέρας» widget and are documented in its own handover.
Foxbet · Analysis page · Φάση αγώνα. Football = implemented in
foxbet-responsive-live.html. Basketball = approved 2026-07-30, to be implemented.