<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Nitro Fırtınası</title>
  <style>
    body { margin:0; font-family:Arial,sans-serif; background:linear-gradient(to right,#0f0c29,#302b63,#24243e); color:white; }
    header { text-align:center; padding:50px 20px; background:rgba(0,0,0,0.6); position:relative; }
    header h1 { font-size:3em; color:#ffcc00; margin-bottom:10px; }
    header button { position:absolute; top:20px; right:20px; background:#ffcc00; border:none; padding:8px 12px; color:#000; border-radius:5px; cursor:pointer; }
    section { padding:20px; max-width:900px; margin:auto; }
    .feature h2 { color:#ffcc00; border-bottom:1px solid #ffcc00; padding-bottom:5px; margin-top:30px; }
    .gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; margin-top:10px; }
    .gallery img { width:100%; border-radius:8px; border:2px solid #fff; }
    .video-button { display:inline-block; background:#ffcc00; color:#000; padding:12px 20px; border-radius:8px; text-decoration:none; margin:10px 0; }
    .download { text-align:center; margin:30px 0; }
    form input, form textarea { width:100%; padding:10px; margin:8px 0; border:none; border-radius:4px; }
    form button { background:#ffcc00; color:#000; border:none; border-radius:4px; padding:10px; cursor:pointer; }
    .stars span { cursor:pointer; font-size:1.8em; color:#aaa; transition:color .2s; }
    .stars span.selected { color:#ffcc00; }
    #comments { background:rgba(255,204,0,0.1); padding:20px; border-radius:8px; max-width:600px; margin:20px auto; color:#000; }
    .comment { border-bottom:1px solid #ffcc00; padding:10px 0; }
    .comment:last-child { border:none; }
    .comment .name { font-weight:bold; }
    #robotCheck { display:flex; align-items:center; justify-content:center; gap:10px; margin:20px auto; }
    #checkbox { width:24px; height:24px; border:2px solid #ffcc00; background:white; cursor:pointer; position:relative; }
    #checkbox #checkmark { display:none; position:absolute; top:-2px; left:2px; color:green; font-size:18px; }
    #notificationBar { display:none; background:#ffcc00; color:#000; padding:12px; text-align:center; position:fixed; width:100%; top:0; z-index:999; }
    #notificationBar a { margin-left:10px; color:blue; text-decoration:underline; }
    #notificationBar span[onclick] { position:absolute; right:15px; cursor:pointer; }
    .anket-container { max-width:400px; margin:20px auto; background:#222; padding:20px; border-radius:8px; text-align:center; }
    .anket-container button { background:#ffcc00; border:none; padding:10px; margin:6px 0; width:100%; cursor:pointer; }
    /* Auth modal styling */
    #authModal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); justify-content:center; align-items:center; z-index:1000; }
    #authBox { background:#302b63; padding:20px; border-radius:8px; width:320px; position:relative; }
    #authBox h2 { margin-top:0; color:#ffcc00; }
    #authBox input, #authBox button { width:100%; margin:8px 0; padding:10px; border:none; border-radius:4px; }
    #authBox button { background:#ffcc00; color:#000; cursor:pointer; }
    #authBox small { display:block; text-align:right; color:#ccc; cursor:pointer; margin-top:8px; }
    #authBox p.error { color:#f88; font-size:0.9em; margin:6px 0; }
    #authClose { position:absolute; top:8px; right:12px; cursor:pointer; font-size:1.3em; color:#fff; }
  </style>
</head>
<body>

<header>
  <h1>Nitro Fırtınası</h1>
  <button onclick="openAuth()">Hesap Oluştur / Giriş</button>
</header>

<div id="notificationBar">
  🚀 <span id="notificationMessage"></span>
  <a href="#" id="notificationLink" target="_blank">TIKLA VE İNDİR</a>
  <span onclick="dismissNotification()">✖</span>
</div>

<section class="feature">
  <h2>🚗 Yeni Özellikler</h2>
  <ul>
    <li>2 yeni araba: Altın Efsane ve Mini Canavar</li>
    <li>Radyo özelliği eklendi – müzikle sürmenin keyfini çıkarın!</li>
    <li>Grafikler büyük ölçüde geliştirildi ve daha gerçekçi hale geldi</li>
    <li>Yeni öğretici bölümü eklendi</li>
    <li>Yapımcılar bölümü eklendi</li>
  </ul>
</section>

<section class="feature">
  <h2>🖼️ Oyun Görselleri</h2>
  <div class="gallery">
    <img src="nitrofirtinasi1.png" alt="Nitro Fırtınası - Görsel 1">
    <img src="nitrofirtinasi2.png" alt="Nitro Fırtınası - Görsel 2">
    <img src="nitrofirtinasi3.png" alt="Nitro Fırtınası - Görsel 3">
    <img src="nitrofirtinasi4.png" alt="Nitro Fırtınası - Görsel 4">
  </div>
</section>

<section class="feature">
  <h2>🎞️ Tanıtım Videosu</h2>
  <a href="https://www.youtube.com/watch?v=hXyT2m3i7cw" class="video-button" target="_blank">Tanıtım Videosunu İzle</a>
</section>

<section class="feature">
  <h2>🎓 Öğretici</h2>
  <p>Yeni başlayanlar için rehber: kontroller, modifiye, para kazanma yolları...</p>
</section>

<section class="feature">
  <h2>👨‍💻 Yapımcılar</h2>
  <p>Bu oyunu <strong>AtaSoft</strong> ve <strong>AtaSoft Studio</strong> geliştirdi. Unity & Blender kullanıldı.</p>
</section>

<section class="feature">
  <h2>🛠️ Sistem Gereksinimleri</h2>
  <ul>
    <li>İşletim Sistemi: Windows 7 ve üstü</li>
    <li>RAM: Minimum 1.5 GB (Önerilen 2.5 GB)</li>
    <li>Ekran Kartı: AMD Radeon HD 5450 / NVIDIA GT 730 veya üzeri</li>
    <li>Depolama: En az 130 MB boş alan</li>
    <li>İşlemci: Intel i3‑550 veya üzeri</li>
  </ul>
</section>

<section class="feature">
  <h2>📋 Güncelleme Notları</h2>
  <ul>
    <li><strong>Beta 4:</strong> 2 yeni araba, para ile alınan araba sistemi, öğretici ve yapımcılar eklendi.</li>
    <li><strong>Beta 3.1:</strong> Hata düzeltmeleri yapıldı.</li>
    <li><strong>Beta 3:</strong> Yeni harita, iç kamera ve dönen direksiyon eklendi.</li>
    <li><strong>Beta 2:</strong> Dönen tekerler, far sistemi ve hız göstergesi eklendi!</li>
  </ul>
</section>

<section class="feature">
  <h2>🎮 Kontroller</h2>
  <ul>
    <li><strong>W / A / S / D:</strong> Araç hareketi</li>
    <li><strong>F:</strong> Araca bin/çık</li>
    <li><strong>Tab:</strong> Araç değiştirme menüsü</li>
    <li><strong>Space:</strong> El freni</li>
    <li><strong>R:</strong> Aracı yeniden doğur</li>
    <li><strong>Shift (sol):</strong> Nitro kullanımı</li>
    <li><strong>Esc:</strong> Menü</li>
  </ul>
</section>

<section class="feature download">
  <div id="robotCheck">
    <div id="checkbox" onclick="verifyHuman()"><div id="checkmark">✔</div></div>
    <span>Robot olmadığınızı doğrulayın</span>
  </div>
  <div id="downloadLink" style="display:none; margin-top:20px;">
    <a href="https://drive.google.com/drive/folders/1_yTEIMjIg4tdDlqSAZ4HRVBBslN7xw3G?usp=drive_link" download>Oyunu İndir (130MB)</a>
  </div>
</section>

<section class="feature">
  <h2>💬 Yorum ve Puan</h2>
  <div id="girisUyarisi" style="color:orange; text-align:center; display:none;">
    Yorum yapabilmek için giriş yapmanız gerekiyor.
  </div>
  <div id="yorumAlani" style="display:none;">
    <form id="commentForm">
      <input type="text" id="c_isim" readonly />
      <textarea id="c_mesaj" placeholder="Yorumunuzu yazın..." required></textarea>
      <div class="stars">
        <span data-value="1">★</span><span data-value="2">★</span><span data-value="3">★</span><span data-value="4">★</span><span data-value="5">★</span>
      </div>
      <input type="hidden" id="c_puan" required />
      <button type="submit">Gönder</button>
    </form>
  </div>
</section>

<section id="comments"><h3>Yorumlar</h3></section>

<section class="anket-container">
  <h2>En beğendiğiniz özellik nedir?</h2>
  <button onclick="oyVer('sec1')">Grafikler - <span id="oy-sec1">0 oy</span></button>
  <button onclick="oyVer('sec2')">Kontroller - <span id="oy-sec2">0 oy</span></button>
  <button onclick="oyVer('sec3')">Harita & Çevre - <span id="oy-sec3">0 oy</span></button>
</section>

<footer style="text-align:center; padding:20px;">© 2025 Nitro Fırtınası - AtaSoft Studio</footer>

<!-- Auth Modal -->
<div id="authModal">
  <div id="authBox">
    <span id="authClose" onclick="closeAuth()">✖</span>
    <h2 id="authTitle">Giriş Yap</h2>
    <div id="formContent"></div>
    <p class="error" id="authError"></p>
    <small id="toggleAuth" onclick="toggleAuth()">Henüz kaydolmadınız mı? Kayıt Ol</small>
  </div>
</div>

<!-- Firebase SDK -->
<script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-auth-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-database-compat.js"></script>

<script>
const cfg = {
  apiKey: "AIzaSyBTSKxigjFOqYUzASmKQeOq8ZsIqKARovA",
  authDomain: "nitrofirtinasiyorum.firebaseapp.com",
  databaseURL: "https://nitrofirtinasiyorum-default-rtdb.firebaseio.com",
  projectId: "nitrofirtinasiyorum",
  storageBucket: "nitrofirtinasiyorum.firebasestorage.app",
  messagingSenderId: "672708476316",
  appId: "1:672708476316:web:3bc74c761489627bbc1c59"
};
firebase.initializeApp(cfg);
const auth = firebase.auth(), db = firebase.database();
let isSignup = false;

// — Auth modal controls — 
function openAuth(){ document.getElementById("authModal").style.display="flex"; toggleForm(false); }
function closeAuth(){ document.getElementById("authModal").style.display="none"; }
function toggleAuth(){
  isSignup = !isSignup;
  document.getElementById("toggleAuth").innerText = isSignup ? "Zaten hesabınız var? Giriş Yap" : "Henüz kaydolmadınız mı? Kayıt Ol";
  document.getElementById("authTitle").innerText = isSignup ? "Kayıt Ol" : "Giriş Yap";
  renderForm();
}
function renderForm(){
  const fc = document.getElementById("formContent");
  if(isSignup){
    fc.innerHTML = `
      <input id="inName" placeholder="Ad Soyad" /><input id="inEmail" type="email" placeholder="E-posta" />
      <input id="inPass" type="password" placeholder="Şifre" /><input id="inBirth" type="date" />
      <button onclick="submitAuth()">Kayıt Ol</button>`;
  } else {
    fc.innerHTML = `
      <input id="inEmail" type="email" placeholder="E-posta" /><input id="inPass" type="password" placeholder="Şifre" />
      <button onclick="submitAuth()">Giriş Yap</button><small onclick="forgotPass()">Şifremi Unuttum</small>`;
  }
}
function submitAuth(){
  const err = document.getElementById("authError"); err.innerText="";
  const email = document.getElementById("inEmail").value;
  const pass = document.getElementById("inPass").value;
  if(isSignup){
    const name = document.getElementById("inName").value;
    auth.createUserWithEmailAndPassword(email, pass)
      .then(() => auth.currentUser.updateProfile({ displayName: name }))
      .then(closeAuth).catch(e => err.innerText = e.message);
  } else {
    auth.signInWithEmailAndPassword(email, pass).then(closeAuth).catch(e => err.innerText = e.message);
  }
}
function forgotPass(){
  const mail = prompt("Şifrenizi sıfırlamak için e-posta adresinizi girin:");
  if(mail) auth.sendPasswordResetEmail(mail).then(()=>alert("Şifre sıfırlama e-postası gönderildi."));
}
auth.onAuthStateChanged(user => {
  const btn = document.querySelector("header button");
  const yorumDiv = document.getElementById("yorumAlani");
  const uyari = document.getElementById("girisUyarisi");
  if(user){
    btn.textContent = `Çıkış (${user.displayName||user.email})`;
    btn.onclick = ()=>auth.signOut();
    yorumDiv.style.display="block";
    uyari.style.display="none";
    document.getElementById("c_isim").value = user.displayName||user.email;
  } else {
    btn.textContent = "Hesap Oluştur / Giriş";
    btn.onclick = openAuth;
    yorumDiv.style.display="none";
    uyari.style.display="block";
  }
});

// — Yorum & puanlama — 
document.querySelectorAll('.stars span').forEach(s=>{
  s.onclick = ()=>{
    document.getElementById('c_puan').value = s.dataset.value;
    document.querySelectorAll('.stars span').forEach(x=>x.classList.toggle('selected', x.dataset.value <= s.dataset.value));
  }
});
document.getElementById('commentForm').onsubmit = e=>{
  e.preventDefault();
  const user = auth.currentUser;
  if(!user){ alert("Giriş yapmalısınız."); return; }
  const msg = document.getElementById('c_mesaj').value.trim();
  const puan = +document.getElementById('c_puan').value;
  if(!msg||!puan){ alert("Yorum ve puan zorunludur."); return; }
  db.ref('yorumlar').push({ isim: user.displayName||user.email, mesaj: msg, puan, zaman:Date.now() });
  document.getElementById('c_mesaj').value = "";
};

// load comments
db.ref('yorumlar').on('value',snap=>{
  const com = document.getElementById('comments');
  com.innerHTML = '<h3>Yorumlar</h3>';
  snap.forEach(s=>{
    const v = s.val(), stars = Array.from({length:5},(_,i)=>`<span style="color:${i<v.puan?'#ffcc00':'#ccc'}">★</span>`).join('');
    com.innerHTML += `<div class="comment"><div class="name">${v.isim} ${stars}</div><div class="message">${v.mesaj}</div></div>`;
  });
});

// — Anket sistemi — 
function oyVer(sec){ db.ref('oylar/'+sec).transaction(v => (v||0)+1); }
db.ref('oylar').on('value',snap=>{
  const d = snap.val() || {};
  document.getElementById('oy-sec1').innerText = (d.sec1||0) + ' oy';
  document.getElementById('oy-sec2').innerText = (d.sec2||0) + ' oy';
  document.getElementById('oy-sec3').innerText = (d.sec3||0) + ' oy';
});

// — Robot doğrulama — 
function verifyHuman(){
  document.getElementById('checkmark').style.display='block';
  document.getElementById('downloadLink').style.display='block';
}

// — Bildirim çubuğu — 
function showNotification(m,l){
  document.getElementById('notificationMessage').innerText = m;
  document.getElementById('notificationLink').href = l;
  document.getElementById('notificationBar').style.display = 'block';
}
function dismissNotification(){
  document.getElementById('notificationBar').style.display = 'none';
}
db.ref('bildirim').on('value',snap=>{
  const d = snap.val();
  if(d && d.aktif) showNotification(d.mesaj, d.link);
  else dismissNotification();
});
</script>

</body>
</html>