<![CDATA[
<!DOCTYPE html>
<style>
body {
font-family: 'Segoe UI', Arial, sans-serif;
text-align: center;
margin: 60px auto;
max-width: 500px;
background: linear-gradient(to bottom, #fff3e0, #ffe0b2);
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
h1 { color: #d32f2f; margin-bottom: 30px; }
input[type="text"] {
padding: 12px;
width: 250px;
font-size: 16px;
border: 2px solid #ccc;
border-radius: 25px;
text-align: center;
}
button {
padding: 12px 24px;
background: #d32f2f;
color: white;
border: none;
border-radius: 25px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
margin-left: 10px;
}
button:hover { background: #b71c1c; }
#result {
margin-top: 30px;
font-size: 18px;
min-height: 60px;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.done { color: #2e7d32; }
.error { color: #c62828; }
.loading { color: #666; font-style: italic; }
small { color: #666; font-size: 14px; }
</style>
<body>
<h1>🎄 Karácsonyi Titkos Ajándékozás 🎁</h1>
<p>Írd be a neved, és húzd meg, kinek kell ajándékot vinned!</p>
<input type="text" id="yourName" placeholder="Pl. Zsuzsa" autofocus />
<button onclick="drawName()">Húzz nevet!</button>
<div id="result" class="loading">Készen áll a húzás...</div>
<script>
function drawName() {
const name = document.getElementById('yourName').value.trim();
if (!name) {
alert('Kérlek, add meg a neved!');
return;
}
const resultDiv = document.getElementById('result');
resultDiv.innerHTML = 'Húzás folyamatban...';
resultDiv.className = 'loading';
google.script.run
.withSuccessHandler(showResult)
.withFailureHandler(showError)
.drawSecretSanta(name);
}
function showResult(result) {
const resultDiv = document.getElementById('result');
if (result.alreadyDrawn) {
resultDiv.innerHTML = `
<p class="done">✅ ${result.name}, te már húztál!</p>
<p><strong>Ajándékozottad: <span style="color:#d32f2f;">${result.target}</span></strong></p>
<p><small>Ez titok – csak te tudod! 🎅</small></p>`;
document.getElementById('yourName').disabled = true;
document.querySelector('button').disabled = true;
} else if (result.success) {
resultDiv.innerHTML = `
<p class="done">✅ ${result.name}, sikeres húzás!</p>
<p><strong>Ajándékozottad: <span style="color:#d32f2f;">${result.target}</span></strong></p>
<p><small>Ez titok – csak te tudod! 🎅</small></p>`;
document.getElementById('yourName').disabled = true;
document.querySelector('button').disabled = true;
} else {
resultDiv.innerHTML = `<p class="error">❌ ${result.error}</p>`;
}
}
function showError(error) {
document.getElementById('result').innerHTML = `<p class="error">❌ Hiba: ${error.message || error}</p>`;
}
// Enter billentyű támogatás
document.getElementById('yourName').addEventListener('keypress', function(e) {
if (e.key === 'Enter') drawName();
});
</script>
</body>
<br>Partneroldalak: <br>
<a href="https://domain.domainshop.hu/domain.html" alt="trhely domainregisztrci">Domain regisztrci tr s szerverszolgltatsok: domain domainnv trhely e-mail, imap, pop3</a><br>
<a href="https://webtar.hu" alt="trhely donainregisztrci">webtar.hu</a><br>
<a href="https://ingyenweb.hu" alt="ingyenweb">ingyenweb.hu</a><br>
<a href="https://videok.hu" alt="Videk">videok.hu</a><br>
<a href="https://xn--fotk-sqa.hu" alt="fotk">fotk.hu</a><br>
<a href="https://randi.hu" alt="Randi">randi.hu</a><br>
<a href="https://licit.hu" alt="Licit">licit.hu</a><br>
<a href="https://napivicc.hu" alt="vicc">napivicc.hu</a><br>
<a href="https://gyertyalang.hu" alt="gyertyagyjts">gyertyalang.hu</a><br>
<a href="https://xn--helyesrs-fza2j.hu" alt="helyesrs.hu">helyesrs.hu</a><br>
<a href="https://domain.webtar.hu/domain.html" alt="Domain regiszrci s trhely">Domain regisztrci</a><br>
]]>