index.html - master - dimooon/rep_dimooon

index.html
169 строк7 KB
dimooon
create index.html
16 дек 2025, 19:21
16 дек 2025, 19:21f5d8711
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>xGolub 🕊️ — Турнир 3x3</title>

  <script src="https://www.gstatic.com/firebasejs/9.22.2/firebase-app-compat.js"></script>
  <script src="https://www.gstatic.com/firebasejs/9.22.2/firebase-database-compat.js"></script>

  <style>
    body { font-family: Arial, sans-serif; background:#f4f6f7; margin:0; padding:0 12px 40px; }
    header { background:#fff9; padding:8px 12px; font-style:italic; color:#333; display:flex; justify-content:space-between; align-items:center; }
    header .brand { font-weight:600; }
    main { max-width:1000px; margin:12px auto; }
    .controls { text-align:center; margin:12px 0; }
    button { margin:6px; padding:8px 14px; border:none; border-radius:6px; color:#fff; cursor:pointer; font-weight:600; }
    .btn-primary { background:#4CAF50; } .btn-blue { background:#2196F3; } .btn-gray { background:#6c757d; } .btn-red { background:#e53935; } .btn-yellow { background:#ff9800; color:#fff; }
    .panel { background:white; padding:12px; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.06); margin-bottom:12px; }
    table { width:100%; border-collapse:collapse; margin-top:8px; }
    th, td { padding:8px 6px; text-align:center; border:1px solid #e6e9eb; font-size:14px; }
    th { background:#f0f2f3; }
    input[type="number"] { width:56px; padding:4px; text-align:center; }
    input[type="text"] { width:180px; padding:6px; }
    .row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
    .hidden { display:none; }
    .small { font-size:12px; color:#666; }
    footer { text-align:center; font-size:12px; color:#666; margin-top:14px; }
  </style>
</head>
<body>
  <header>
    <div class="brand">xGolub 🕊️</div>
    <div class="small">Онлайн — в реальном времени</div>
  </header>

  <main>
    <div class="controls">
      <button id="showOddsBtn" class="btn-primary">Кэфы</button>
      <button id="showTableBtn" class="btn-blue">Турнир</button>
      <button id="randomTeamsBtn" class="btn-yellow">Рандомайзер</button>
    </div>

    <!-- === Odds === -->
    <section id="oddsSection" class="panel">
      <h3>Коэффициенты</h3>
      <table id="oddsTable">
        <thead><tr><th>Матч</th><th>П1</th><th>Н</th><th>П2</th></tr></thead>
        <tbody></tbody>
      </table>
      <div style="text-align:center;margin-top:8px;">
        <button id="calcOddsBtn" class="btn-primary">Рассчитать кэф</button>
        <button id="randomOddsBtn" class="btn-blue">Рандомные кэфы</button>
      </div>
    </section>

    <!-- === Tournament === -->
    <section id="tournamentSection" class="panel hidden">
      <h3>Турнир</h3>

      <div class="row">
        <div><div class="small">Саня</div><input id="team_sanya" type="text" placeholder="Команда Сани" value="Саня"></div>
        <div><div class="small">Олег</div><input id="team_oleg" type="text" placeholder="Команда Олега" value="Олег"></div>
        <div><div class="small">Дима</div><input id="team_dima" type="text" placeholder="Команда Димы" value="Дима"></div>
        <div style="margin-left:auto;">
          <button id="showTournamentDataBtn" class="btn-gray">Показать турнир</button>
          <button id="resetTournamentBtn" class="btn-red">Сбросить турнир</button>
        </div>
      </div>

      <div id="tournamentData" class="hidden">
        <h4>Матчи</h4>
        <table id="matchesTable">
          <thead><tr><th>Матч</th><th>Голы хозяев</th><th>Голы гостей</th></tr></thead>
          <tbody></tbody>
        </table>

        <h4>Таблица</h4>
        <table id="standingsTable">
          <thead><tr><th>Команда</th><th>И</th><th>В</th><th>Н</th><th>П</th><th>ГЗ</th><th>ГП</th><th>Разн</th><th>Очки</th></tr></thead>
          <tbody></tbody>
        </table>
      </div>
    </section>

    <footer>© xGolub 2025</footer>
  </main>

<script>
let firebaseConnected = false;

try {
  const firebaseConfig = {
    apiKey: "ВАШ_API_KEY",
    authDomain: "ВАШ_PROJECT.firebaseapp.com",
    databaseURL: "https:/_PROJECT-default-rtdb.firebaseio.com",
    projectId: "ВАШ_PROJECT",
    storageBucket: "ВАШ_PROJECT.appspot.com",
    messagingSenderId: "ВАШ_SENDER_ID",
    appId: "ВАШ_APP_ID"
  };
  firebase.initializeApp(firebaseConfig);
  firebaseConnected = true;
} catch(e) {
  console.warn("Firebase не подключён, работаем в оффлайн-режиме");
}

const players = ["sanya","oleg","dima"];
const defaults = { sanya:"Саня", oleg:"Олег", dima:"Дима" };
const matches = [
  {id:"dima_sanya",home:"dima",away:"sanya"},
  {id:"dima_oleg",home:"dima",away:"oleg"},
  {id:"sanya_oleg",home:"sanya",away:"oleg"}
];

const clubs = ["Реал Мадрид","Барселона","Атлетико Мадрид","Манчестер Сити","Арсенал","Ливерпуль","Бавария","Байер","ПСЖ","Марсель","Ювентус","Милан"];

const oddsTableBody=document.querySelector("#oddsTable tbody");
const matchesTbody=document.querySelector("#matchesTable tbody");
const standingsTbody=document.querySelector("#standingsTable tbody");

const teamInputs={
  sanya:document.getElementById("team_sanya"),
  oleg:document.getElementById("team_oleg"),
  dima:document.getElementById("team_dima")
};

function show(id){document.getElementById(id).classList.remove("hidden");}
function hide(id){document.getElementById(id).classList.add("hidden");}
function toggle(id){document.getElementById(id).classList.toggle("hidden");}

document.getElementById("showOddsBtn").onclick=()=>{show("oddsSection");hide("tournamentSection");};
document.getElementById("showTableBtn").onclick=()=>{show("tournamentSection");hide("oddsSection");};
document.getElementById("showTournamentDataBtn").onclick=()=>toggle("tournamentData");

document.getElementById("randomTeamsBtn").onclick=()=>{
  const shuffled=clubs.sort(()=>Math.random()-0.5);
  const picks={ sanya:shuffled[0], oleg:shuffled[1], dima:shuffled[2] };
  for(let p in picks) teamInputs[p].value=picks[p];
  alert(`Случайные команды выбраны:\n\nСаня — ${picks.sanya}\nОлег — ${picks.oleg}\nДима — ${picks.dima}`);
};

document.getElementById("calcOddsBtn").onclick=()=>{
  oddsTableBody.innerHTML="";
  for(let m of matches){
    const tr=document.createElement("tr");
    tr.innerHTML=`<td>${m.home} — ${m.away}</td><td>${(Math.random()*2+2).toFixed(2)}</td><td>${(Math.random()*3).toFixed(2)}</td><td>${(Math.random()*2+1).toFixed(2)}</td>`;
    oddsTableBody.appendChild(tr);
  }
};

document.getElementById("randomOddsBtn").onclick=()=>{
  oddsTableBody.innerHTML="";
  for(let m of matches){
    const tr=document.createElement("tr");
    tr.innerHTML=`<td>${m.home} — ${m.away}</td><td>${(Math.random()*8+1).toFixed(2)}</td><td>${(Math.random()*8+1).toFixed(2)}</td><td>${(Math.random()*8+1).toFixed(2)}</td>`;
    oddsTableBody.appendChild(tr);
  }
};

document.getElementById("resetTournamentBtn").onclick=()=>{
  matchesTbody.innerHTML="";
  standingsTbody.innerHTML="";
  hide("tournamentData");
};

</script>
</body>
</html>/ВАШ