Feature: Football Match Ticket Sales Website Using Ali-OSS for Asset Management

[alielzibair]

Integration Request: Build Football Ticket Sales Website with Ali-OSS Asset Storage

Context:
This issue requests the design and implementation of a comprehensive football match ticket sales website that leverages Ali-OSS (Aliyun Object Storage Service) for storing and serving static assets, including club logos, match data, and multilingual content.

---

Project Overview

Create a responsive website for booking football match tickets across the top five European leagues with the following capabilities:

Technology Stack:

• Frontend: HTML5, CSS3, Vanilla JavaScript (no frameworks)
• Asset Storage: Ali-OSS for club logos, images, and static files
• Data: JSON-based configuration for leagues, clubs, matches, and translations

Supported Languages (10 total):

• Arabic (العربية) - with RTL support
• English
• French (Français)
• Spanish (Español)
• German (Deutsch)
• Italian (Italiano)
• Portuguese (Português)
• Turkish (Türkçe)
• Russian (Русский)
• Chinese Simplified (简体中文)

Core Leagues:

• Premier League (England)
• La Liga (Spain)
• Serie A (Italy)
• Bundesliga (Germany)
• Ligue 1 (France)

---

Feature Requirements

1. User Interface Flow

• Home Page: League selection with visual cards
• League Details: Display all participating clubs with original logos (served via Ali-OSS)
• Club Page: Show upcoming matches for selected club
• Booking Page: Ticket type selection (Regular, Premium, VIP) and quantity
• Confirmation: Purchase confirmation message in user's selected language

2. Ticket Management

• Three Ticket Types:
  • Regular:

[alielzibair]

<title>KickOff Tickets</title> <style> *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --green: #1a7a3c; --green-dark: #0f5228; --green-light: #e8f5ed; --gold: #f0b429; --gold-dark: #b8880e; --text: #1a1a1a; --text-muted: #6b7280; --surface: #fff; --bg: #f5f7f2; --border: rgba(0,0,0,0.1); --radius: 12px; --shadow: 0 2px 16px rgba(0,0,0,0.08); } body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; } header { background: var(--green-dark); color: #fff; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; height: 64px; position: sticky; top: 0; z-index: 100; } .logo { font-family: 'Bebas Neue', sans-serif; font-size: 28px; letter-spacing: 2px; color: var(--gold); } .logo span { color: #fff; } .lang-select { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); color: #fff; padding: 6px 12px; border-radius: 8px; font-size: 13px; cursor: pointer; font-family: 'DM Sans', sans-serif; } .lang-select option { color: #000; background: #fff; }

.hero {
background: linear-gradient(135deg, var(--green-dark) 0%, var(--green) 100%);
color: #fff;
text-align: center;
padding: 48px 24px 40px;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
inset: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Crect x='1' y='1' width='58' height='58' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='1'/%3E%3C/svg%3E") repeat;
}
.hero h1 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(32px, 6vw, 52px); letter-spacing: 3px; position: relative; }
.hero p { font-size: 15px; opacity: 0.8; margin-top: 8px; position: relative; }

.filters {
display: flex;
gap: 8px;
padding: 20px 24px;
overflow-x: auto;
background: var(--surface);
border-bottom: 1px solid var(--border);
flex-wrap: wrap;
}
.filter-btn {
padding: 8px 16px;
border-radius: 999px;
border: 1.5px solid var(--border);
background: var(--surface);
font-size: 13px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: all 0.15s;
font-family: 'DM Sans', sans-serif;
color: var(--text);
}
.filter-btn.active, .filter-btn:hover { background: var(--green); color: #fff; border-color: var(--green); }

main { max-width: 1200px; margin: 0 auto; padding: 24px; }
.section-title { font-family: 'Bebas Neue', sans-serif; font-size: 24px; letter-spacing: 1px; margin-bottom: 16px; color: var(--green-dark); display: flex; align-items: center; gap: 10px; }
.league-badge { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; font-family: 'DM Sans', sans-serif; letter-spacing: 0; }

.matches-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-bottom: 40px; }
.match-card {
background: var(--surface);
border-radius: var(--radius);
border: 1px solid var(--border);
overflow: hidden;
cursor: pointer;
transition: transform 0.15s, box-shadow 0.15s;
}
.match-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.match-header { padding: 12px 16px 10px; background: var(--green-dark); color: #fff; font-size: 12px; display: flex; justify-content: space-between; align-items: center; }
.match-header .league-name { font-weight: 600; font-size: 11px; opacity: 0.9; letter-spacing: 0.5px; }
.match-header .match-date { opacity: 0.75; font-size: 11px; }
.match-body { padding: 16px; }
.teams { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.team { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; }
.team-logo { width: 52px; height: 52px; object-fit: contain; }
.team-name { font-size: 13px; font-weight: 600; text-align: center; line-height: 1.3; }
.vs { font-family: 'Bebas Neue', sans-serif; font-size: 22px; color: var(--text-muted); flex-shrink: 0; }
.match-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.price-tag { font-size: 11px; color: var(--text-muted); }
.price-tag strong { font-size: 15px; color: var(--green-dark); display: block; font-weight: 600; }
.buy-btn {
background: var(--green);
color: #fff;
border: none;
padding: 8px 16px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
font-family: 'DM Sans', sans-serif;
transition: background 0.15s;
}
.buy-btn:hover { background: var(--green-dark); }

/* Modal */
.modal-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.55);
display: flex; align-items: flex-start; justify-content: center;
z-index: 1000; padding: 20px;
overflow-y: auto;
}
.modal-overlay.hidden { display: none; }
.modal {
background: var(--surface);
border-radius: 16px;
width: 100%;
max-width: 520px;
margin: auto;
overflow: hidden;
animation: slideUp 0.25s ease;
}
@Keyframes slideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-header {
background: var(--green-dark);
color: #fff;
padding: 18px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-header h2 { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 1px; }
.close-btn { background: none; border: none; color: rgba(255,255,255,0.7); font-size: 22px; cursor: pointer; line-height: 1; }
.modal-match { padding: 16px 20px; border-bottom: 1px solid var(--border); background: var(--green-light); }
.modal-teams { display: flex; align-items: center; justify-content: center; gap: 16px; }
.modal-team { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.modal-team img { width: 36px; height: 36px; object-fit: contain; }
.modal-vs { font-family: 'Bebas Neue', sans-serif; font-size: 18px; color: var(--text-muted); }
.modal-info { display: flex; gap: 16px; margin-top: 8px; font-size: 12px; color: var(--text-muted); justify-content: center; }

.modal-body { padding: 20px; }
.section-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); margin-bottom: 10px; }
.ticket-types { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.ticket-type {
border: 1.5px solid var(--border);
border-radius: 10px;
padding: 14px 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
transition: all 0.15s;
}
.ticket-type.selected { border-color: var(--green); background: var(--green-light); }
.ticket-type-left { display: flex; align-items: center; gap: 12px; }
.ticket-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.ticket-std .ticket-icon { background: #e8edf3; }
.ticket-prem .ticket-icon { background: #fdf4e0; }
.ticket-vip .ticket-icon { background: #fce8f0; }
.ticket-name { font-weight: 600; font-size: 14px; }
.ticket-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.ticket-price { font-weight: 700; font-size: 15px; color: var(--green-dark); }

.qty-section { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.qty-label { flex: 1; }
.qty-ctrl { display: flex; align-items: center; gap: 8px; }
.qty-btn { width: 32px; height: 32px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--surface); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: 'DM Sans', sans-serif; }
.qty-btn:hover { background: var(--bg); }
.qty-val { font-weight: 600; font-size: 16px; min-width: 24px; text-align: center; }

.total-bar { background: var(--green-light); border-radius: 10px; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.total-label { font-size: 14px; font-weight: 500; }
.total-amount { font-size: 22px; font-weight: 700; color: var(--green-dark); font-family: 'Bebas Neue', sans-serif; letter-spacing: 1px; }

.buy-confirm-btn {
width: 100%;
background: var(--green);
color: #fff;
border: none;
padding: 14px;
border-radius: 10px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
font-family: 'DM Sans', sans-serif;
transition: background 0.15s;
}
.buy-confirm-btn:hover { background: var(--green-dark); }

/* Confirmation */
.confirm-modal { padding: 40px 28px; text-align: center; }
.confirm-icon { font-size: 56px; margin-bottom: 16px; }
.confirm-title { font-family: 'Bebas Neue', sans-serif; font-size: 28px; letter-spacing: 2px; color: var(--green-dark); margin-bottom: 8px; }
.confirm-subtitle { font-size: 14px; color: var(--text-muted); margin-bottom: 20px; }
.confirm-ticket {
background: var(--green-light);
border-radius: 10px;
padding: 16px;
text-align: left;
font-size: 13px;
margin-bottom: 20px;
}
.confirm-row { display: flex; justify-content: space-between; padding: 4px 0; }
.confirm-row span:first-child { color: var(--text-muted); }
.confirm-row span:last-child { font-weight: 600; }
.confirm-btn { background: var(--green); color: #fff; border: none; padding: 12px 32px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: 'DM Sans', sans-serif; }

footer { text-align: center; padding: 24px; color: var(--text-muted); font-size: 12px; border-top: 1px solid var(--border); margin-top: 20px; }
</style>

KickOff Tickets

🌐 English 🇪🇸 Español 🇫🇷 Français 🇩🇪 Deutsch 🇮🇹 Italiano 🇵🇹 Português 🇸🇦 العربية 🇨🇳 中文 🇯🇵 日本語 🇰🇷 한국어

GET YOUR MATCH TICKETS

Choose from thousands of matches across the top 5 European leagues

All Leagues 🏴󠁧󠁢󠁥󠁮󠁧󠁿 Premier League 🇪🇸 La Liga 🇩🇪 Bundesliga 🇮🇹 Serie A 🇫🇷 Ligue 1

⚽ Upcoming Matches

Select Tickets

✕

VS

📅 🏟️ 🏆

Ticket Type

  <div class="qty-section">
    <div class="qty-label">
      <div class="section-label" id="qtyLabel">Quantity</div>
    </div>
    <div class="qty-ctrl">
      <button class="qty-btn" onclick="changeQty(-1)">−</button>
      <span class="qty-val" id="qtyVal">1</span>
      <button class="qty-btn" onclick="changeQty(1)">+</button>
    </div>
  </div>

  <div class="total-bar">
    <span class="total-label" id="totalLabel">Total</span>
    <span class="total-amount" id="totalAmount">€45</span>
  </div>
  <button class="buy-confirm-btn" id="confirmBtn" onclick="purchaseTickets()">Purchase Tickets</button>
</div>

Booking Confirmed

✕

🎉

YOU'RE GOING TO THE MATCH!

Your tickets have been booked successfully. Check your email for details.

Match

Date

Type

Tickets

Total Paid

Back to Matches

© 2025 KickOff Tickets. All rights reserved. Prices include all fees. <script> const langs = { en: { heroTitle: "GET YOUR MATCH TICKETS", heroSub: "Choose from thousands of matches across the top 5 European leagues", sectionTitle: "⚽ Upcoming Matches", modalTitle: "Select Tickets", ticketTypeLabel: "Ticket Type", qtyLabel: "Quantity", totalLabel: "Total", confirmBtn: "Purchase Tickets", confHeader: "Booking Confirmed", confTitle: "YOU'RE GOING TO THE MATCH!", confSub: "Your tickets have been booked successfully. Check your email for details.", confMatchLabel: "Match", confDateLabel: "Date", confTypeLabel: "Type", confQtyLabel: "Tickets", confTotalLabel: "Total Paid", confBackBtn: "Back to Matches", filterAll: "All Leagues", footer: "© 2025 KickOff Tickets. All rights reserved. Prices include all fees.", std: "Standard", prem: "Premium", vip: "VIP", stdDesc: "General admission seating", premDesc: "Reserved seats, better view", vipDesc: "Hospitality lounge & exclusive access" }, es: { heroTitle: "COMPRA TUS ENTRADAS", heroSub: "Elige entre miles de partidos en las 5 mejores ligas europeas", sectionTitle: "⚽ Próximos Partidos", modalTitle: "Seleccionar Entradas", ticketTypeLabel: "Tipo de Entrada", qtyLabel: "Cantidad", totalLabel: "Total", confirmBtn: "Comprar Entradas", confHeader: "Reserva Confirmada", confTitle: "¡VAS AL PARTIDO!", confSub: "Tus entradas han sido reservadas. Comprueba tu correo para más detalles.", confMatchLabel: "Partido", confDateLabel: "Fecha", confTypeLabel: "Tipo", confQtyLabel: "Entradas", confTotalLabel: "Total Pagado", confBackBtn: "Volver", filterAll: "Todas las Ligas", footer: "© 2025 KickOff Tickets. Todos los derechos reservados.", std: "Estándar", prem: "Premium", vip: "VIP", stdDesc: "Asiento de entrada general", premDesc: "Asientos reservados, mejor vista", vipDesc: "Salón hospitalidad y acceso exclusivo" }, fr: { heroTitle: "ACHETEZ VOS BILLETS", heroSub: "Choisissez parmi des milliers de matchs dans les 5 meilleures ligues", sectionTitle: "⚽ Matchs à Venir", modalTitle: "Sélectionner les Billets", ticketTypeLabel: "Type de Billet", qtyLabel: "Quantité", totalLabel: "Total", confirmBtn: "Acheter les Billets", confHeader: "Réservation Confirmée", confTitle: "VOUS ALLEZ AU MATCH !", confSub: "Vos billets ont été réservés. Vérifiez votre email pour les détails.", confMatchLabel: "Match", confDateLabel: "Date", confTypeLabel: "Type", confQtyLabel: "Billets", confTotalLabel: "Total Payé", confBackBtn: "Retour", filterAll: "Toutes les Ligues", footer: "© 2025 KickOff Tickets. Tous droits réservés.", std: "Standard", prem: "Premium", vip: "VIP", stdDesc: "Siège en tribune générale", premDesc: "Siège réservé, meilleure vue", vipDesc: "Salon hospitalité & accès exclusif" }, de: { heroTitle: "HOLEN SIE SICH IHRE TICKETS", heroSub: "Wählen Sie aus Tausenden von Spielen in den Top 5 Ligen", sectionTitle: "⚽ Kommende Spiele", modalTitle: "Tickets Auswählen", ticketTypeLabel: "Tickettyp", qtyLabel: "Anzahl", totalLabel: "Gesamt", confirmBtn: "Tickets Kaufen", confHeader: "Buchung Bestätigt", confTitle: "SIE GEHEN ZUM SPIEL!", confSub: "Ihre Tickets wurden erfolgreich gebucht. Details per E-Mail.", confMatchLabel: "Spiel", confDateLabel: "Datum", confTypeLabel: "Typ", confQtyLabel: "Tickets", confTotalLabel: "Gezahlter Betrag", confBackBtn: "Zurück", filterAll: "Alle Ligen", footer: "© 2025 KickOff Tickets. Alle Rechte vorbehalten.", std: "Standard", prem: "Premium", vip: "VIP", stdDesc: "Allgemeine Platzkarte", premDesc: "Reservierter Sitz, bessere Sicht", vipDesc: "VIP-Lounge & exklusiver Zugang" }, it: { heroTitle: "ACQUISTA I TUOI BIGLIETTI", heroSub: "Scegli tra migliaia di partite nei migliori 5 campionati", sectionTitle: "⚽ Partite in Programma", modalTitle: "Seleziona Biglietti", ticketTypeLabel: "Tipo di Biglietto", qtyLabel: "Quantità", totalLabel: "Totale", confirmBtn: "Acquista Biglietti", confHeader: "Prenotazione Confermata", confTitle: "VAI ALLA PARTITA!", confSub: "I tuoi biglietti sono stati prenotati. Controlla la tua email.", confMatchLabel: "Partita", confDateLabel: "Data", confTypeLabel: "Tipo", confQtyLabel: "Biglietti", confTotalLabel: "Totale Pagato", confBackBtn: "Torna alle Partite", filterAll: "Tutti i Campionati", footer: "© 2025 KickOff Tickets. Tutti i diritti riservati.", std: "Standard", prem: "Premium", vip: "VIP", stdDesc: "Posto in tribuna generale", premDesc: "Posto riservato, vista migliore", vipDesc: "Lounge hospitality e accesso esclusivo" }, pt: { heroTitle: "COMPRE OS SEUS BILHETES", heroSub: "Escolha entre milhares de jogos nas 5 melhores ligas europeias", sectionTitle: "⚽ Próximos Jogos", modalTitle: "Selecionar Bilhetes", ticketTypeLabel: "Tipo de Bilhete", qtyLabel: "Quantidade", totalLabel: "Total", confirmBtn: "Comprar Bilhetes", confHeader: "Reserva Confirmada", confTitle: "VOU AO JOGO!", confSub: "Os seus bilhetes foram reservados. Verifique o seu email.", confMatchLabel: "Jogo", confDateLabel: "Data", confTypeLabel: "Tipo", confQtyLabel: "Bilhetes", confTotalLabel: "Total Pago", confBackBtn: "Voltar", filterAll: "Todas as Ligas", footer: "© 2025 KickOff Tickets. Todos os direitos reservados.", std: "Standard", prem: "Premium", vip: "VIP", stdDesc: "Assento geral", premDesc: "Assento reservado, melhor vista", vipDesc: "Camarote VIP e acesso exclusivo" }, ar: { heroTitle: "احصل على تذاكرك", heroSub: "اختر من آلاف المباريات في أفضل 5 دوريات أوروبية", sectionTitle: "⚽ المباريات القادمة", modalTitle: "اختر التذاكر", ticketTypeLabel: "نوع التذكرة", qtyLabel: "الكمية", totalLabel: "الإجمالي", confirmBtn: "شراء التذاكر", confHeader: "تم تأكيد الحجز", confTitle: "أنت ذاهب للمباراة!", confSub: "تم حجز تذاكرك بنجاح. تحقق من بريدك الإلكتروني.", confMatchLabel: "المباراة", confDateLabel: "التاريخ", confTypeLabel: "النوع", confQtyLabel: "التذاكر", confTotalLabel: "الإجمالي المدفوع", confBackBtn: "العودة", filterAll: "جميع الدوريات", footer: "© 2025 KickOff Tickets. جميع الحقوق محفوظة.", std: "عادي", prem: "مميز", vip: "VIP", stdDesc: "مقعد عام", premDesc: "مقعد محجوز، إطلالة أفضل", vipDesc: "صالة ضيافة وصول حصري" }, zh: { heroTitle: "购买比赛门票", heroSub: "从欧洲五大联赛数千场比赛中选择", sectionTitle: "⚽ 即将进行的比赛", modalTitle: "选择门票", ticketTypeLabel: "门票类型", qtyLabel: "数量", totalLabel: "总计", confirmBtn: "购买门票", confHeader: "预订已确认", confTitle: "您将前往比赛现场！", confSub: "您的门票已成功预订。请查看您的邮件获取详情。", confMatchLabel: "比赛", confDateLabel: "日期", confTypeLabel: "类型", confQtyLabel: "张数", confTotalLabel: "实付金额", confBackBtn: "返回", filterAll: "所有联赛", footer: "© 2025 KickOff Tickets. 保留所有权利。", std: "标准", prem: "高级", vip: "VIP", stdDesc: "普通座位", premDesc: "指定座位，更好视角", vipDesc: "贵宾休息室及专属通道" }, ja: { heroTitle: "試合チケットを購入", heroSub: "ヨーロッパ5大リーグの数千の試合から選択", sectionTitle: "⚽ 近日開催の試合", modalTitle: "チケットを選択", ticketTypeLabel: "チケットタイプ", qtyLabel: "枚数", totalLabel: "合計", confirmBtn: "チケットを購入", confHeader: "予約完了", confTitle: "試合に行きましょう！", confSub: "チケットが正常に予約されました。メールをご確認ください。", confMatchLabel: "試合", confDateLabel: "日付", confTypeLabel: "タイプ", confQtyLabel: "枚数", confTotalLabel: "支払い合計", confBackBtn: "試合一覧へ戻る", filterAll: "全リーグ", footer: "© 2025 KickOff Tickets. 全著作権所有。", std: "スタンダード", prem: "プレミアム", vip: "VIP", stdDesc: "一般席", premDesc: "指定席・より良い眺め", vipDesc: "ホスピタリティラウンジ・特別入場" }, ko: { heroTitle: "경기 티켓 구매", heroSub: "유럽 5대 리그 수천 경기 중 선택하세요", sectionTitle: "⚽ 다가오는 경기", modalTitle: "티켓 선택", ticketTypeLabel: "티켓 유형", qtyLabel: "수량", totalLabel: "합계", confirmBtn: "티켓 구매", confHeader: "예매 완료", confTitle: "경기장으로 떠나세요!", confSub: "티켓이 성공적으로 예매되었습니다. 이메일을 확인하세요.", confMatchLabel: "경기", confDateLabel: "날짜", confTypeLabel: "유형", confQtyLabel: "매수", confTotalLabel: "결제 금액", confBackBtn: "경기 목록으로", filterAll: "전체 리그", footer: "© 2025 KickOff Tickets. All rights reserved.", std: "스탠다드", prem: "프리미엄", vip: "VIP", stdDesc: "일반석", premDesc: "지정석, 더 좋은 시야", vipDesc: "VIP 라운지 & 전용 입장" } }; let currentLang = 'en'; function t(key) { return langs[currentLang][key] || langs['en'][key]; } // Real SVG-based club logos using official colors const clubLogos = { 'Man City': `MANCITY`, 'Arsenal': `ARSENAL`, 'Liverpool': `LFCLIVERPOOL`, 'Chelsea': `CFC`, 'Man Utd': `MUFC`, 'Real Madrid': `REALMADRID`, 'Barcelona': ``, 'Atletico': `ATM`, 'Sevilla': `SFC`, 'Valencia': `VCF`, 'Bayern': `FCB`, 'Dortmund': `BVB`, 'Leverkusen': `B04`, 'RB Leipzig': `RBLLEIPZIG`, 'Frankfurt': `SGE`, 'Juventus': `JUVENT`, 'Inter': `INTER`, 'AC Milan': `ACM`, 'Napoli': `SSCNAPOLI`, 'Roma': `ASR`, 'PSG': `PSG`, 'Monaco': `ASMMONACO`, 'Lyon': `OL`, 'Marseille': `OMMARSEILLE`, 'Lille': `LOSC` }; function getLogo(name) { return clubLogos[name] || `${name.slice(0,3)}`; } function getSVGUrl(svgStr) { return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svgStr); } const matches = [ // Premier League { id:1, league:'PL', leagueName:'Premier League', home:'Arsenal', away:'Man City', date:'Sat 15 Mar 2025', time:'17:30', venue:'Emirates Stadium', basePrice:45, currency:'£' }, { id:2, league:'PL', leagueName:'Premier League', home:'Liverpool', away:'Chelsea', date:'Sun 16 Mar 2025', time:'16:00', venue:'Anfield', basePrice:55, currency:'£' }, { id:3, league:'PL', leagueName:'Premier League', home:'Man Utd', away:'Liverpool', date:'Sun 23 Mar 2025', time:'14:00', venue:'Old Trafford', basePrice:60, currency:'£' }, // La Liga { id:4, league:'LL', leagueName:'La Liga', home:'Real Madrid', away:'Barcelona', date:'Sun 16 Mar 2025', time:'21:00', venue:'Bernabéu', basePrice:70, currency:'€' }, { id:5, league:'LL', leagueName:'La Liga', home:'Atletico', away:'Sevilla', date:'Sat 15 Mar 2025', time:'18:30', venue:'Metropolitano', basePrice:40, currency:'€' }, { id:6, league:'LL', leagueName:'La Liga', home:'Valencia', away:'Barcelona', date:'Sat 22 Mar 2025', time:'16:00', venue:'Mestalla', basePrice:38, currency:'€' }, // Bundesliga { id:7, league:'BL', leagueName:'Bundesliga', home:'Bayern', away:'Dortmund', date:'Sat 15 Mar 2025', time:'18:30', venue:'Allianz Arena', basePrice:50, currency:'€' }, { id:8, league:'BL', leagueName:'Bundesliga', home:'Leverkusen', away:'RB Leipzig', date:'Fri 14 Mar 2025', time:'20:30', venue:'BayArena', basePrice:35, currency:'€' }, { id:9, league:'BL', leagueName:'Bundesliga', home:'Frankfurt', away:'Bayern', date:'Sat 22 Mar 2025', time:'15:30', venue:'Deutsche Bank Park', basePrice:38, currency:'€' }, // Serie A { id:10, league:'SA', leagueName:'Serie A', home:'Juventus', away:'Inter', date:'Sun 16 Mar 2025', time:'20:45', venue:'Allianz Stadium', basePrice:55, currency:'€' }, { id:11, league:'SA', leagueName:'Serie A', home:'AC Milan', away:'Napoli', date:'Sat 15 Mar 2025', time:'20:45', venue:'San Siro', basePrice:60, currency:'€' }, { id:12, league:'SA', leagueName:'Serie A', home:'Roma', away:'Juventus', date:'Sun 23 Mar 2025', time:'18:00', venue:'Olimpico', basePrice:45, currency:'€' }, // Ligue 1 { id:13, league:'L1', leagueName:'Ligue 1', home:'PSG', away:'Marseille', date:'Sun 16 Mar 2025', time:'21:00', venue:'Parc des Princes', basePrice:65, currency:'€' }, { id:14, league:'L1', leagueName:'Ligue 1', home:'Monaco', away:'PSG', date:'Sat 22 Mar 2025', time:'17:05', venue:'Stade Louis II', basePrice:50, currency:'€' }, { id:15, league:'L1', leagueName:'Ligue 1', home:'Lyon', away:'Lille', date:'Sun 16 Mar 2025', time:'15:00', venue:'Groupama Stadium', basePrice:35, currency:'€' } ]; const leagueColors = { PL: '#38003c', LL: '#ff4b44', BL: '#d20515', SA: '#024494', L1: '#091C3E' }; let currentFilter = 'all'; let selectedMatch = null; let selectedTicketType = 'std'; let quantity = 1; const ticketMultipliers = { std: 1, prem: 1.8, vip: 3.5 }; function filterLeague(league, btn) { currentFilter = league; document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active')); btn.classList.add('active'); renderMatches(); } function renderMatches() { const grid = document.getElementById('matchesGrid'); const filtered = currentFilter === 'all' ? matches : matches.filter(m => m.league === currentFilter); grid.innerHTML = filtered.map(m => { const price = Math.round(m.basePrice); return `

🏆 ${m.leagueName} ${m.date} · ${m.time}

${getLogo(m.home)}

${m.home}

VS

${getLogo(m.away)}

${m.away}

${t('std')} from ${m.currency}${price}

${t('confirmBtn')}

`; }).join(''); } function openModal(matchId) { selectedMatch = matches.find(m => m.id === matchId); selectedTicketType = 'std'; quantity = 1; document.getElementById('qtyVal').textContent = 1; document.getElementById('mTeamA').textContent = selectedMatch.home; document.getElementById('mTeamB').textContent = selectedMatch.away; document.getElementById('mLogoA').src = getSVGUrl(getLogo(selectedMatch.home)); document.getElementById('mLogoB').src = getSVGUrl(getLogo(selectedMatch.away)); document.getElementById('mDate').textContent = '📅 ' + selectedMatch.date + ' ' + selectedMatch.time; document.getElementById('mVenue').textContent = '🏟️ ' + selectedMatch.venue; document.getElementById('mLeague').textContent = '🏆 ' + selectedMatch.leagueName; renderTicketTypes(); updateTotal(); updateModalLang(); document.getElementById('ticketModal').classList.remove('hidden'); } function renderTicketTypes() { const types = [ { key:'std', icon:'🎫', cls:'ticket-std' }, { key:'prem', icon:'⭐', cls:'ticket-prem' }, { key:'vip', icon:'👑', cls:'ticket-vip' } ]; const c = selectedMatch.currency; document.getElementById('ticketTypesContainer').innerHTML = types.map(tp => { const price = Math.round(selectedMatch.basePrice * ticketMultipliers[tp.key]); return `

${tp.icon}

${t(tp.key)}

${t(tp.key + 'Desc')}

${c}${price}

`; }).join(''); } function selectType(type) { selectedTicketType = type; renderTicketTypes(); updateTotal(); } function changeQty(delta) { quantity = Math.max(1, Math.min(10, quantity + delta)); document.getElementById('qtyVal').textContent = quantity; updateTotal(); } function updateTotal() { if (!selectedMatch) return; const price = Math.round(selectedMatch.basePrice * ticketMultipliers[selectedTicketType] * quantity); document.getElementById('totalAmount').textContent = selectedMatch.currency + price; } function closeModal() { document.getElementById('ticketModal').classList.add('hidden'); } function purchaseTickets() { const price = Math.round(selectedMatch.basePrice * ticketMultipliers[selectedTicketType] * quantity); document.getElementById('confMatch').textContent = selectedMatch.home + ' vs ' + selectedMatch.away; document.getElementById('confDate').textContent = selectedMatch.date + ', ' + selectedMatch.time; document.getElementById('confType').textContent = t(selectedTicketType); document.getElementById('confQty').textContent = quantity; document.getElementById('confTotal').textContent = selectedMatch.currency + price; updateConfirmLang(); closeModal(); document.getElementById('confirmModal').classList.remove('hidden'); } function closeConfirm() { document.getElementById('confirmModal').classList.add('hidden'); } function setLang(lang) { currentLang = lang; document.getElementById('heroTitle').textContent = t('heroTitle'); document.getElementById('heroSub').textContent = t('heroSub'); document.getElementById('sectionTitle').textContent = t('sectionTitle'); document.getElementById('footerText').textContent = t('footer'); document.querySelector('#f-all').textContent = t('filterAll'); renderMatches(); if (!document.getElementById('ticketModal').classList.contains('hidden')) updateModalLang(); } function updateModalLang() { document.getElementById('modalTitle').textContent = t('modalTitle'); document.getElementById('ticketTypeLabel').textContent = t('ticketTypeLabel'); document.getElementById('qtyLabel').textContent = t('qtyLabel'); document.getElementById('totalLabel').textContent = t('totalLabel'); document.getElementById('confirmBtn').textContent = t('confirmBtn'); renderTicketTypes(); } function updateConfirmLang() { document.getElementById('confHeader').textContent = t('confHeader'); document.getElementById('confTitle').textContent = t('confTitle'); document.getElementById('confSub').textContent = t('confSub'); document.getElementById('confMatchLabel').textContent = t('confMatchLabel'); document.getElementById('confDateLabel').textContent = t('confDateLabel'); document.getElementById('confTypeLabel').textContent = t('confTypeLabel'); document.getElementById('confQtyLabel').textContent = t('confQtyLabel'); document.getElementById('confTotalLabel').textContent = t('confTotalLabel'); document.getElementById('confBackBtn').textContent = t('confBackBtn'); } renderMatches(); </script>