live-score – kyotv

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Live Score</title>
  <style>
    body {
      background: transparent;
      margin: 0;
      font-family: 'Arial', sans-serif;
      color: white;
      overflow: hidden;
    }
    .container {
      position: absolute;
      width: 1920px;
      height: 1080px;
    }
    .team1-name, .team2-name {
      position: absolute;
      font-size: 60px;
      font-weight: bold;
      text-align: center;
    }
    .team1-name { top: 200px; left: 200px; width: 500px; }
    .team2-name { top: 200px; right: 200px; width: 500px; }

    .player1-sq1, .player2-sq1 {
      position: absolute;
      font-size: 40px;
      text-align: center;
    }
    .player1-sq1 { top: 300px; left: 200px; width: 240px; }
    .player2-sq1 { top: 350px; left: 200px; width: 240px; }

    .player1-sq2, .player2-sq2 {
      position: absolute;
      font-size: 40px;
      text-align: center;
    }
    .player1-sq2 { top: 300px; right: 200px; width: 240px; }
    .player2-sq2 { top: 350px; right: 200px; width: 240px; }

    .score {
      position: absolute;
      font-size: 100px;
      font-weight: bold;
      text-align: center;
    }
    .score { top: 500px; left: 50%; transform: translateX(-50%); }

    .jersey1, .jersey2 {
      position: absolute;
      width: 120px;
      height: 120px;
      object-fit: contain;
    }
    .jersey1 { top: 180px; left: 720px; }
    .jersey2 { top: 180px; right: 720px; }
  </style>
</head>
<body>
  <div class="container">
    <!-- Squadre -->
    <div class="team1-name" id="team1">-</div>
    <div class="team2-name" id="team2">-</div>

    <!-- Giocatori SQ1 -->
    <div class="player1-sq1" id="p1sq1">-</div>
    <div class="player2-sq1" id="p2sq1">-</div>

    <!-- Giocatori SQ2 -->
    <div class="player1-sq2" id="p1sq2">-</div>
    <div class="player2-sq2" id="p2sq2">-</div>

    <!-- Punteggio -->
    <div class="score" id="score">0 - 0</div>

    <!-- Canottiere -->
    <img class="jersey1" id="jersey1" src="" alt="Canottiera SQ1" />
    <img class="jersey2" id="jersey2" src="" alt="Canottiera SQ2" />
  </div>

  <script>
    const SHEET_ID = 1w8ERTKYDBshNN_cdG8GYL-cDXQje4tGApocbPgOF0as'; // <-- Sostituisci
    const API_KEY = AIzaSyCebc8ENQo7KBKQS3GJeH-UpAok8I0svjg; // <-- Sostituisci

    const rangeNames = [
      'NOMI_PER_PARTITA!D1',  // Squadra 1
      'NOMI_PER_PARTITA!I1',  // Squadra 2
      'NOMI_PER_PARTITA!E1',  // Player 1 SQ1
      'NOMI_PER_PARTITA!F1',  // Player 2 SQ1
      'NOMI_PER_PARTITA!J1',  // Player 1 SQ2
      'NOMI_PER_PARTITA!K1',  // Player 2 SQ2
      'Punteggio_3SET!B3',    // Score SQ1
      'Punteggio_3SET!B4',    // Score SQ2
      'NOMI_PER_PARTITA!G1',  // Link canottiera SQ1
      'NOMI_PER_PARTITA!L1'   // Link canottiera SQ2
    ];

    const ids = [
      'team1', 'team2', 'p1sq1', 'p2sq1', 'p1sq2', 'p2sq2', 
      'score-sq1', 'score-sq2', 'jersey1-src', 'jersey2-src'
    ];

    function updateScore() {
      const url = `https://sheets.googleapis.com/v4/spreadsheets/$1w8ERTKYDBshNN_cdG8GYL-cDXQje4tGApocbPgOF0as/values:batchGet?ranges=${rangeNames.join('&ranges=')}&key=$AIzaSyCebc8ENQo7KBKQS3GJeH-UpAok8I0svjg;

      fetch(url)
        .then(r => r.json())
        .then(data => {
          const values = data.valueRanges.map(r => r.values ? r.values[0][0] : "-");

          // Aggiorna testi
          document.getElementById('team1').innerText = values[0];
          document.getElementById('team2').innerText = values[1];
          document.getElementById('p1sq1').innerText = values[2];
          document.getElementById('p2sq1').innerText = values[3];
          document.getElementById('p1sq2').innerText = values[4];
          document.getElementById('p2sq2').innerText = values[5];
          document.getElementById('score').innerText = `${values[6]} - ${values[7]}`;

          // Aggiorna canottiere
          document.getElementById('jersey1').src = values[8] || '';
          document.getElementById('jersey2').src = values[9] || '';
        })
        .catch(err => console.error('Errore:', err));
    }

    // Aggiorna ogni 2 secondi
    setInterval(updateScore, 2000);
    // Primo aggiornamento
    updateScore();
  </script>
</body>
</html>