<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Şaşırtmaca — Beni Seviyor musun?</title>
<style>
:root{
--bg:#071022; --card:#0b1220;
}
*{box-sizing:border-box;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;}
html,body{height:100%;margin:0;background:linear-gradient(180deg,#071025 0%, #0f1724 100%); color:#eef6ff}
.wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.card{width:100%;max-width:460px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:16px;padding:20px;box-shadow:0 10px 40px rgba(0,0,0,0.6);text-align:center}
h1{margin:6px 0 12px;font-size:20px}
.lead{color:#c6d7f0;margin-bottom:14px}
.question{font-size:28px;margin-bottom:18px;font-weight:700}
.btn-row{display:flex;gap:12px;justify-content:center;margin-bottom:14px}
button.btn{flex:1;padding:12px 14px;border-radius:12px;border:0;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 8px 18px rgba(2,6,23,0.6);transition:transform .12s}
button.btn:active{transform:translateY(2px)}
.btn-yes{background:linear-gradient(90deg,#ff9b8a,#ff6b6b);color:white}
.btn-no{background:linear-gradient(90deg,#7aa2ff,#4a6cff);color:white}
.photo{width:100%;height:320px;border-radius:12px;overflow:hidden;background:rgba(255,255,255,0.03);display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.03)}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.result-text{margin-top:12px;font-weight:700}
.small{font-size:13px;color:#9fb7db;margin-top:10px}
.hidden{display:none}
.actions{display:flex;gap:10px;justify-content:center;margin-top:14px}
.link-btn{padding:10px 12px;border-radius:10px;border:0;background:rgba(255,255,255,0.04);color:#dfeeff;font-weight:600}
@media (max-width:360px){ .photo{height:220px} .question{font-size:24px} }
/* tiny confetti pieces */
.confetti-piece{position:fixed;z-index:9999;pointer-events:none}
</style>
</head>
<body>
<div class="wrap">
<div class="card" role="main" aria-live="polite">
<h1>Şaşırmaya hazır mısın? 🎁</h1>
<p class="lead">Sadece doğru butona bas — sonra sonucu göreceksin.</p>
<div id="step-question">
<div class="question">Beni seviyor musun?</div>
<div class="btn-row">
<button id="yesBtn" class="btn btn-yes" aria-label="Evet">Evet ❤️</button>
<button id="noBtn" class="btn btn-no" aria-label="Hayır">Hayır 😢</button>
</div>
<div class="small">(Telefon için optimize edildi — ekranın ortasını kullan)</div>
</div>
<div id="result" class="hidden" aria-hidden="true">
<div id="photoBox" class="photo" role="img" aria-label="Sonuç fotoğrafı"></div>
<div id="resultText" class="result-text"></div>
<div class="actions">
<button id="replay" class="link-btn">Yeniden Başla</button>
<button id="shareInstructions" class="link-btn">Nasıl Paylaşırım?</button>
</div>
</div>
<div class="small" style="margin-top:12px">Bu sürprizi yapan: Sen 💌</div>
</div>
</div>
<script>
/***** FOTOĞRAF URL'LERİN (Drive direct-link şeklinde) *****
* Aşağıda senin verdiğin Drive linklerinin "direct view" hali kullanıldı.
* Eğer resimler gözükmezse Drive'da "Herkes linke sahip olan görüntüleyebilir" seçeneğini aç.
******************************************************/
const happyImage = "https://drive.google.com/uc?export=view&id=1VOLBxroCEU3nr0EUs_0n0PVOO3TIt4kI";
const sadImage = "https://drive.google.com/uc?export=view&id=1JJNbMyJJFhcvuOyP6tZV2hSaoCIZdy9l";
const yesBtn = document.getElementById('yesBtn');
const noBtn = document.getElementById('noBtn');
const stepQuestion = document.getElementById('step-question');
const result = document.getElementById('result');
const photoBox = document.getElementById('photoBox');
const resultText = document.getElementById('resultText');
const replay = document.getElementById('replay');
const shareInstructions = document.getElementById('shareInstructions');
function showImage(url, text){
photoBox.innerHTML = '';
const img = document.createElement('img');
img.src = url;
img.alt = text;
img.onload = ()=>{};
img.onerror = ()=>{
// fallback küçük SVG
photoBox.innerHTML = text.toLowerCase().includes('mutlu') ? happySVG() : sadSVG();
};
photoBox.appendChild(img);
}
function happySVG(){
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="100%" height="100%"><rect width="100%" height="100%" fill="#fff5ea"/><g transform="translate(100,100)"><circle r="80" fill="#ffefc8"/><circle cx="-28" cy="-12" r="10" fill="#222"/><circle cx="28" cy="-12" r="10" fill="#222"/><path d="M-38 18 Q0 60 38 18" stroke="#222" stroke-width="6" fill="none" stroke-linecap="round"/></g></svg>`;
}
function sadSVG(){
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="100%" height="100%"><rect width="100%" height="100%" fill="#eef6ff"/><g transform="translate(100,100)"><circle r="80" fill="#dfefff"/><circle cx="-28" cy="-12" r="10" fill="#222"/><circle cx="28" cy="-12" r="10" fill="#222"/><path d="M-30 34 Q0 8 30 34" stroke="#222" stroke-width="6" fill="none" stroke-linecap="round"/></g></svg>`;
}
function confettiBurst(){
const colors = ['#ff6b6b','#ffd166','#6bf178','#6bd8ff','#b58bff','#ff9bd1'];
for(let i=0;i<20;i++){
const el = document.createElement('div');
el.className = 'confetti-piece';
el.style.left = (20 + Math.random()*60) + 'vw';
el.style.top = (-5 + Math.random()*5) + 'vh';
el.style.width = (6 + Math.random()*12) + 'px';
el.style.height = el.style.width;
el.style.background = colors[Math.floor(Math.random()*colors.length)];
el.style.borderRadius = '2px';
el.style.opacity = '0.95';
el.style.transform = `rotate(${Math.random()*360}deg)`;
document.body.appendChild(el);
const fall = el.animate([
{ transform: `translateY(0) rotate(0deg)`, opacity:1 },
{ transform: `translateY(${100+Math.random()*100}vh) rotate(${360+Math.random()*360}deg)`, opacity:0.15 }
], { duration: 1200 + Math.random()*1600, easing:'cubic-bezier(.2,.7,.2,1)'});
setTimeout(()=> el.remove(), 3000);
}
}
yesBtn.addEventListener('click', ()=>{
stepQuestion.classList.add('hidden');
result.classList.remove('hidden');
result.setAttribute('aria-hidden','false');
resultText.textContent = "Evet dedi! 💖";
showImage(happyImage, 'mutlu fotoğraf');
confettiBurst();
// Focus yönetimi
setTimeout(()=> replay.focus(), 300);
});
noBtn.addEventListener('click', ()=>{
stepQuestion.classList.add('hidden');
result.classList.remove('hidden');
result.setAttribute('aria-hidden','false');
resultText.textContent = "Hayır dedi... 😢";
showImage(sadImage, 'üzgün fotoğraf');
setTimeout(()=> replay.focus(), 300);
});
replay.addEventListener('click', ()=>{
result.classList.add('hidden');
stepQuestion.classList.remove('hidden');
result.setAttribute('aria-hidden','true');
photoBox.innerHTML = '';
});
shareInstructions.addEventListener('click', ()=>{
alert(
`Linki paylaşmak için:
1) Bu dosyayı Netlify Drop (https://drop.netlify.com) veya Vercel dev (https://vercel.com/new) ile yükle.
2) Netlify Drop: sayfaya sürükle bırak → anında paylaşılabilir link alırsın.
Eğer istersen adım adım GitHub Pages yönergelerini yazarım.`
);
});
// Hızlı erişim: 1 => Evet, 2 => Hayır
document.addEventListener('keydown', (e)=>{
if(!stepQuestion.classList.contains('hidden')){
if(e.key === '1') yesBtn.click();
if(e.key === '2') noBtn.click();
}
});
</script>
</body>
</html>