<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Etap 1 – Ezber & Quiz</title>
<style>
:root { --bg:#0f1216; --card:#151a21; --text:#e9eef5; --muted:#9aa7b2; --accent:#20c997; --danger:#ff6b6b; }
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:-apple-system,system-ui;background:var(--bg);color:var(--text);}
header{position:sticky;top:0;background:#0f1216cc;backdrop-filter:blur(6px);padding:12px;border-bottom:1px solid #1c232c;}
.tabs{display:flex;gap:8px;}
.tab{flex:1;text-align:center;padding:10px;border-radius:10px;background:#1a2028;color:var(--muted);border:1px solid #222a34;font-weight:600;}
.tab.active{background:#202834;color:var(--text);}
.container{padding:16px;max-width:700px;margin:0 auto;}
.card{background:var(--card);padding:24px;border-radius:16px;border:1px solid #1f2730;box-shadow:0 8px 24px rgba(0,0,0,.3);}
.big{font-size:28px;font-weight:800;text-align:center;margin:20px 0;}
.small{text-align:center;color:var(--muted);font-size:13px;}
.btn{padding:12px 16px;width:100%;border:none;border-radius:12px;font-weight:700;margin:6px 0;}
.btn-accent{background:var(--accent);color:#04110c;}
.btn-ghost{background:#222933;color:var(--text);}
.btn-danger{background:var(--danger);color:#fff;}
hr{border:0;height:1px;background:#232a33;margin:20px 0;}
</style>
</head>
<body>
<header>
<div class="tabs">
<div class="tab active" id="tab-flash" onclick="showTab('flash')">Ezber</div>
<div class="tab" id="tab-quiz" onclick="showTab('quiz')">Quiz</div>
<div class="tab" id="tab-hard" onclick="showTab('hard')">Zor ⭐</div>
</div>
</header>
<div class="container">
<!-- FLASHCARD -->
<div id="view-flash">
<div class="card">
<div class="small">Etap 1 – Flashcard</div>
<div id="flashWord" class="big">Yükleniyor…</div>
<div id="hint" class="small">Dokun: çevir</div>
<hr>
<button class="btn btn-ghost" onclick="markHard()">⭐ Zordu</button>
<button class="btn btn-ghost" onclick="markLearned()">✅ Öğrendim</button>
<button class="btn btn-accent" onclick="nextWord()">Sonraki →</button>
<div class="small" id="counter"></div>
</div>
</div>
<!-- QUIZ -->
<div id="view-quiz" style="display:none;">
<div class="card">
<div class="small">Quiz (4 seçenek)</div>
<div id="qText" class="big">Soru yükleniyor…</div>
<div id="qOpts"></div>
<hr>
<button class="btn btn-accent" onclick="nextQ()">Sonraki</button>
<div class="small" id="qProg"></div>
</div>
</div>
<!-- HARD ⭐ -->
<div id="view-hard" style="display:none;">
<div class="card">
<div class="small">Zor Kelimeler</div>
<div id="hardEmpty" class="small" style="display:none;margin-top:10px;">Şimdilik zor kelime yok.</div>
<div id="hardList"></div>
</div>
</div>
</div>
<script>
const WORDS = [
["Obstacle","Engel"],["Official","Resmî"],["Offspring","Evlat"],["Old","Yaşlı"],
["Online","Çevrimiçi"],["Operation","Operasyon"],["Opposition","Muhalefet"],
["Organization","Organizasyon"],["Owner","Sahip"],["Panic","Panik"],
["Paradise","Cennet"],["Parent","Ebeveyn"],["Parliament","Parlamento"],
["People","İnsanlar"],["Permission","İzin"],["Person","Kişi"],
["Personal","Kişisel"],["Petition","Dilekçe"],["Pharmacy","Eczane"],
["Phone","Telefon"],["Physical","Fiziksel"],["Plane","Uçak"],
["Planet","Gezegen"],["Plant","Bitki"],["Play","Oynamak"],
["Pocket","Cep"],["Poem","Şiir"],["Police Station","Karakol"],
["Policeman","Polis"],["Politician","Politikacı"],["Practice","Egzersiz"],
["Pregnant","Hamile"],["Presenter","Sunucu"],["President","Başkan"],
["Pressure","Baskı"],["Prize","Ödül"],["Produce","Üretmek"],
["Product","Ürün"],["Progress","Gelişme"],["Project","Proje"],
["Proper","Düzgün"],["Provide","Sağlamak"],["Punish","Cezalandırmak"],
["Purse","Cüzdan"],["Put","Koymak"],["Race","Yarış"],
["Raid","Baskın"],["Rain","Yağmur"],["Rapid","Hızlı"],
["Ready","Hazır"],["Real","Gerçek"],["Really","Gerçekten"],
["Reason","Neden"],["Recent","Son"],["Referee","Hakem"],
["Regularly","Düzenli olarak"],["Rehearsal","Prova"],["Reject","Geri çevirmek"],
["Repairman","Tamirci"],["Report","Rapor"],["Request","İstemek"],
["Room","Oda"],["Roommate","Oda arkadaşı"],["Rose","Gül"],
["Safety","Güvenlik"],["Stage","Sahne"],["Same","Aynı"],
["Saturday","Cumartesi"],["Say","Söylemek"],["Scare","Korkutmak"],
["School","Okul"],["Stubborn","İnatçı"],["Scientist","Bilim insanı"],
["Sea","Deniz"],["Season","Mevsim"],["Seat","Yer"],
["Secret","Sır"],["See","Görmek"],["Send","Göndermek"],
["Sensitive","Duyarlı"],["Servant","Hizmetçi"],["Session","Oturum"],
["Severe","Şiddetli"],["Shape","Şekil"],["Shepherd","Çoban"],
["Shoes","Ayakkabı"],["Short","Kısa"],["Show","Göstermek"]
];
let hard=new Set(JSON.parse(localStorage.getItem("hard")||"[]"));
let learned=new Set(JSON.parse(localStorage.getItem("learned")||"[]"));
function save(){ localStorage.setItem("hard",JSON.stringify([...hard])); localStorage.setItem("learned",JSON.stringify([...learned])); }
function shuffle(a){ for(let i=a.length-1;i>0;i--){ const j=Math.floor(Math.random()*(i+1)); [a[i],a[j]]=[a[j],a[i]];} return a; }
function studyPool(){ const h=WORDS.filter(w=>hard.has(w[0])&&!learned.has(w[0])); const r=WORDS.filter(w=>!hard.has(w[0])&&!learned.has(w[0])); return h.length?h.concat(r):r; }
let idx=0,flip=false,enFirst=true,pool=studyPool();
function loadFlash(){
pool=studyPool();
if(pool.length===0){
flashWord.innerText="Tebrikler! Hepsi bitti 🎉";
hint.innerText="Quiz yanlışları ⭐ burada toplanır.";
counter.innerText="";
return;
}
const [en,tr]=pool[idx%pool.length];
flashWord.innerText = flip? (enFirst?tr:en) : (enFirst?en:tr);
hint.innerText = flip? (enFirst?en:tr) : "Dokun: çevir";
counter.innerText = (idx%pool.length+1)+"/"+pool.length;
}
flashWord?.addEventListener("click", ()=>{ flip=!flip; loadFlash(); });
function nextWord(){ idx=(idx+1)%Math.max(pool.length,1); flip=false; enFirst=Math.random()<0.5; loadFlash(); }
function markHard(){ const [en]=pool[idx%pool.length]; hard.add(en); save(); loadHard(); loadFlash(); }
function markLearned(){ const [en]=pool[idx%pool.length]; learned.add(en); save(); loadHard(); loadFlash(); }
let quiz=[],qi=0,answered=false;
function newQuiz(){
const base=studyPool();
const pick=shuffle(base.slice()).slice(0,12);
quiz = pick.map(([en,tr])=>{
const d=shuffle(WORDS.filter(w=>w[0]!=en).map(w=>w[1])).slice(0,3);
const opts=shuffle([tr,...d]);
return {en,tr,opts,ans:opts.indexOf(tr)};
});
qi=0; answered=false; renderQ();
}
function renderQ(){
if(quiz.length===0){ qText.innerText="Quiz için kelime yok."; qOpts.innerHTML=""; return; }
const q=quiz[qi];
qText.innerText=q.en;
qOpts.innerHTML="";
q.opts.forEach((opt,i)=>{
const b=document.createElement("button");
b.className="btn btn-ghost";
b.innerText=opt;
b.onclick=()=>{
if(answered) return;
answered=true;
if(i!=q.ans){ hard.add(q.en); save(); loadHard(); }
b.style.background = i==q.ans? "rgba(46,204,113,.25)" : "rgba(255,107,107,.25)";
};
qOpts.appendChild(b);
});
qProg.innerText=(qi+1)+"/"+quiz.length;
}
function nextQ(){ answered=false; qi=(qi+1)%quiz.length; renderQ(); }
function loadHard(){
const arr=WORDS.filter(([en])=>hard.has(en));
hardList.innerHTML="";
if(arr.length===0){ hardEmpty.style.display="block"; return; }
hardEmpty.style.display="none";
arr.forEach(([en,tr])=>{
hardList.innerHTML+=`
<div style="display:flex;justify-content:space-between;align-items:center;background:#161c24;border:1px solid #222933;padding:12px;border-radius:12px;margin:8px 0;">
<div><div class="big" style="font-size:20px">${en}</div><div class="small">${tr}</div></div>
<button class="btn btn-danger" onclick="hard.delete('${en}');save();loadHard();">Kaldır</button>
</div>`;
});
}
function showTab(n){
document.getElementById("view-flash").style.display=n=="flash"?"block":"none";
document.getElementById("view-quiz").style.display =n=="quiz" ?"block":"none";
document.getElementById("view-hard").style.display =n=="hard" ?"block":"none";
document.getElementById("tab-flash").classList.toggle("active",n=="flash");
document.getElementById("tab-quiz").classList.toggle("active",n=="quiz");
document.getElementById("tab-hard").classList.toggle("active",n=="hard");
if(n=="quiz") newQuiz();
}
loadFlash();
loadHard();
</script>
</body>
</html>