Handover · Λογότυπα καναλιών (TV)

00Διάβασε πρώτα αυτό

Το component είναι το λογότυπο και το ύψος του. Δεν έχει κάρτα, δεν γράφει το όνομα του καναλιού, δεν βάζει εικονίδιο τηλεόρασης. Ο consumer αποφασίζει πού κάθεται.

⚠ΜΟΝΟ σε φωτεινή επιφάνεια — αυτό είναι το ένα σκληρό όριο. Τα assets είναι σχεδιασμένα για λευκό/ανοιχτό φόντο. Μετρήθηκε στο #1A1A1A (§02): το μαύρο NOVA και το ANT1 εξαφανίζονται, και τα σκούρα μπλε ΕΡΤ γίνονται δυσανάγνωστα. Σε σκούρα επιφάνεια χρειάζονται light variants από design — δεν υπάρχουν ακόμη.

ℹ️Πού χρησιμοποιείται σήμερα. Στη meta γραμμή κάθε αγώνα στο widget «Αναλύσεις ημέρας» (.aw-tv > img, 14px). Το component γενικεύει αυτή τη χρήση ώστε να μπαίνει και σε σελίδα ανάλυσης, κουπόνι, λίστες αγώνων, κάρτες προγνωστικών.

✔Καμία εξάρτηση. 28 SVG + 4 κανόνες CSS. Δεν χρειάζεται JS: το JS στο prototype μόνο διαλέγει κανάλι — στο production το κανάλι έρχεται από το feed.

01Τα assets που χρησιμοποιούνται

Και τα 28, από τον φάκελο Assets/tv/ — κλικ σε οποιοδήποτε για να το κατεβάσεις. Το όνομα του αρχείου ΕΙΝΑΙ το slug στο συμβόλαιο δεδομένων (§03).

02Επιφάνειες — δοκίμασέ το

Άλλαξε φόντο και ύψος. Η σκούρα επιλογή είναι εδώ για να δεις τι σπάει, όχι ως υποστηριζόμενη χρήση.

Φόντο Ύψος

Επιφάνεια	Αποτέλεσμα
Λευκό `#FFFFFF`	✔ Η υποστηριζόμενη χρήση. Και τα 28 διαβάζονται.
Fill `#F2F2F2`	✔ Δουλεύει. Τα λευκά «κενά» μέσα σε κάποια λογότυπα (π.χ. το πλαίσιο του `ΕΡΤ 1`) φαίνονται οριακά, αλλά το σήμα κρατά.
Σκούρο `#1A1A1A`	✗ Σπάει. Μετρημένα: `ant1` (μαύρο σήμα) και το μαύρο wordmark NOVA σε και τα 14 Novasports χάνονται· μένει μόνο το κόκκινο badge. Τα `ert-*` με σκούρο μπλε πέφτουν κάτω από κάθε αναγνωσιμότητα. Δουλεύουν μόνο `alpha`, `skai`, `youtube`, `ert-3` — και αυτό δεν είναι component, είναι σύμπτωση.

⚠Λείπουν σκόπιμα κανάλια: Mega, Star, ΣΚΑΪ Hybrid, Action24, Cosmote Sport 1–9 και τα συνδυαστικά lockups Nova+ΕΡΤ. Στο Figma είναι σχεδιασμένα λευκά για σκούρο φόντο, άρα γίνονται αόρατα πάνω στη λευκή κάρτα. Θέλουν light-background variant από design πριν μπουν στη λίστα — μη τα προσθέσεις ως έχουν.

03Ανατομία & μεγέθη

Ιδιότητα	Τιμή	Γιατί
Ύψος	`14px` (production) · `.is-md` 20px · `.is-lg` 34px	Το ύψος οδηγεί — ποτέ το πλάτος. Τα λογότυπα έχουν διαφορετικές αναλογίες, οπότε σταθερό πλάτος τα παραμορφώνει ή τα κόβει.
Πλάτος	`width:auto` + `max-width:64px` (92 / 120 στα μεγάλα)	Το `max-width` είναι ο φρουρός: ένα μακρύ lockup (`novasports-premier-league`) αλλιώς σπρώχνει τη γραμμή.
Fit	`object-fit:contain`	Όταν χτυπήσει το `max-width`, το λογότυπο σμικρύνεται αντί να κοπεί.
Αναλογία asset	2:1 — `150×75` viewBox, και στα 27 από τα 28	Έτσι βγήκαν από το Figma, με αφαιρεμένο το σκούρο backdrop του frame.
Ευθυγράμμιση	`.is-end` → `margin-left:auto`	Η μόνη θέση που αξίζει όνομα: στο τέλος της meta γραμμής.

⚠Το youtube.svg είναι η εξαίρεση. viewBox -0.5 20.8 47.9 33.4 — αναλογία ~1.43:1, όχι 2:1, και με μετατοπισμένη αρχή. Αποδίδεται σωστά επειδή το ύψος οδηγεί και το contain το προστατεύει· αν κάπου υποθέσεις 2:1 για να «κρατήσεις χώρο», αυτό θα βγει στενότερο. Μη κανονικοποιήσεις το viewBox χωρίς re-export.

⚠Στα 14px τα σύνθετα σήματα είναι στο όριο. Στα NOVA SPORTS 1–6 και ΕΡΤ Sports N ο αριθμός του καναλιού πέφτει ~4px. Είναι αποδεκτό στη meta γραμμή, όπου το λογότυπο είναι δευτερεύουσα πληροφορία. Αν το κανάλι είναι η κύρια πληροφορία (π.χ. «δες τον αγώνα στο …»), χρησιμοποίησε .is-md ή .is-lg.

04Συμβόλαιο δεδομένων

Το backend δίνει slug. Το slug είναι το όνομα του αρχείου, χωρίς .svg. Το εμφανιζόμενο όνομα δεν αποδίδεται πουθενά — πάει στο alt/title.

/* ένα record ανά κανάλι — ίδιο σχήμα με το TV_CHANNELS του widget */
{ f: 'novasports-premier-league', n: 'Novasports Premier League' }

<!-- και το markup που το αποδίδει -->
<span class="tvlogo is-end">
  <img src="Assets/tv/novasports-premier-league.svg"
       alt="Novasports Premier League" title="Novasports Premier League">
</span>

Slug (= αρχείο)	Όνομα	Slug (= αρχείο)	Όνομα

ℹ️Στο prototype το κανάλι είναι τυχαίο. Το widget διαλέγει ένα από τη λίστα μία φορά στο init και το κρατά στο m.tvc, ώστε να μην αλλάζει σε κάθε render. Στο production μπαίνει ο πραγματικός broadcaster από το feed — και αν δεν υπάρχει, δεν αποδίδεται τίποτα (η γραμμή δουλεύει κανονικά χωρίς λογότυπο).

05Στο πλαίσιο χρήσης

Η αρχική χρήση: meta γραμμή αγώνα στο widget «Αναλύσεις ημέρας». Το λογότυπο κάθεται στο τέλος της γραμμής, μετά την ώρα ή το live σκορ.

21:45

Ολυμπιακός – Παναθηναϊκός

19:15

Ελλάδα – Ιταλία

✔Δεν γράφεται το όνομα και δεν μπαίνει εικονίδιο TV. Το λογότυπο είναι αναγνωρίσιμο· το όνομα δίπλα του είναι θόρυβος και το εικονίδιο διπλή κωδικοποίηση. Αυτό ήταν απόφαση στο widget και κρατά και εδώ.

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

Έλεγχος	Κανόνας
`alt`	Υποχρεωτικό, με το όνομα του καναλιού. Το όνομα δεν υπάρχει ως κείμενο πουθενά αλλού, άρα `alt=""` θα έκρυβε πληροφορία — αυτό ΔΕΝ είναι διακοσμητική εικόνα.
`title`	Ίδιο κείμενο, για hover σε desktop.
Contrast	Τα λογότυπα εξαιρούνται από τα όρια contrast κειμένου (brand marks). Ισχύει όμως ο κανόνας επιφάνειας της §02: εξαφανισμένο σήμα δεν είναι θέμα contrast, είναι απώλεια περιεχομένου.
Μέγεθος	Δεν είναι στόχος πατήματος — το λογότυπο δεν είναι clickable. Αν κάπου γίνει, θέλει δικό του tap target ≥24px, όχι μεγαλύτερο λογότυπο.

07Build checklist

Αντίγραψε τον φάκελο Assets/tv/ και τους 4 κανόνες .tvlogo. Καμία άλλη εξάρτηση.
Το ύψος οδηγεί — height + width:auto + object-fit:contain. Ποτέ σταθερό πλάτος.
Μόνο σε φωτεινή επιφάνεια. Αν το design ζητήσει σκούρα, ζήτα light variants πρώτα (§02).
Πάντα alt + title με το όνομα του καναλιού.
Το slug έρχεται από το feed και είναι το όνομα του αρχείου. Χωρίς κανάλι → δεν αποδίδεται τίποτα.
Αν χρειαστεί νέο κανάλι: export 2:1 από το Figma frame «Broadcasters Logos» (node 2703-12566), αφαίρεσε το σκούρο backdrop, και βεβαιώσου ότι διαβάζεται σε λευκό.
Μη κανονικοποιήσεις το viewBox του youtube.svg χωρίς re-export (§03).

Foxbet · Component: Λογότυπα καναλιών (TV) · 28 assets · πηγή Figma «Broadcasters Logos» (1_Foxbet Design System, node 2703-12566).