Escape Room Builder - generator de jocuri escape room in 5 stiluri
Builder single-file HTML cu editor + preview live jucabil si export de jocuri standalone. Stiluri: clasic (quiz), terminal retro, arcade pixel, story chat, point-and-click. Fara backend, fara build. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Claude Agent
171
exemplu-chat.html
Normal file
171
exemplu-chat.html
Normal file
@@ -0,0 +1,171 @@
|
||||
<!doctype html>
|
||||
<html lang="ro">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Comoara ascunsa</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
body { margin: 0; background: #0b1220; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #e5e7eb; display: flex; justify-content: center; min-height: 100vh; }
|
||||
#app { width: 100%; max-width: 480px; height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: #0f172a; }
|
||||
header { display: flex; gap: 10px; align-items: center; padding: 10px 14px; background: #1e293b; border-bottom: 1px solid #334155; }
|
||||
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; color: #fff; }
|
||||
.cname { font-weight: 700; }
|
||||
.cstatus { font-size: 12px; color: #34d399; }
|
||||
#msgs { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; }
|
||||
.row { display: flex; }
|
||||
.row.me { justify-content: flex-end; }
|
||||
.bub { max-width: 78%; padding: 9px 13px; border-radius: 16px; line-height: 1.4; font-size: 15px; white-space: pre-line; animation: bin .25s ease; }
|
||||
@keyframes bin { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
|
||||
.row.him .bub { background: #1e293b; border-bottom-left-radius: 5px; }
|
||||
.row.me .bub { background: var(--accent); color: #fff; border-bottom-right-radius: 5px; }
|
||||
.bub.tile { font-size: 24px; font-weight: 800; letter-spacing: 2px; background: #14532d; border: 1px solid #22c55e; }
|
||||
.bub.typing i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; margin: 0 2px; animation: tp 1s infinite; }
|
||||
.bub.typing i:nth-child(2) { animation-delay: .15s; } .bub.typing i:nth-child(3) { animation-delay: .3s; }
|
||||
@keyframes tp { 30% { transform: translateY(-5px); } }
|
||||
#composer { padding: 10px 12px; background: #1e293b; border-top: 1px solid #334155; display: flex; flex-wrap: wrap; gap: 8px; min-height: 58px; }
|
||||
#composer input { flex: 1; min-width: 120px; font: inherit; font-size: 15px; padding: 9px 13px; border-radius: 99px; border: 1px solid #475569; background: #0f172a; color: #fff; }
|
||||
#composer input:focus { outline: none; border-color: var(--accent); }
|
||||
#composer button { font: inherit; cursor: pointer; border: none; border-radius: 99px; padding: 9px 16px; font-weight: 600; background: var(--accent); color: #fff; }
|
||||
#composer button.chip { background: #0f172a; border: 1px solid #475569; color: #cbd5e1; }
|
||||
#composer button.chip:hover { border-color: var(--accent); color: #fff; }
|
||||
|
||||
.confetti { position: fixed; top: -12px; width: 9px; height: 14px; z-index: 99; animation: fall linear forwards; }
|
||||
@keyframes fall { to { transform: translateY(105vh) rotate(720deg); } }
|
||||
.shake { animation: shake .4s ease; }
|
||||
@keyframes shake { 20%,60% { transform: translateX(-8px); } 40%,80% { transform: translateX(8px); } }
|
||||
#fOverlay { display: none; position: fixed; inset: 0; background: rgba(8,4,20,.88); z-index: 30; align-items: center; justify-content: center; padding: 16px; }
|
||||
#fOverlay .fcard { width: 100%; max-width: 480px; text-align: center; background: #221440; border: 1px solid rgba(255,255,255,.18); border-radius: 18px; padding: 28px; color: #fff; font-family: system-ui, sans-serif; }
|
||||
#fOverlay h1 { margin: 0 0 8px; font-size: 26px; }
|
||||
#fOverlay .fstars { font-size: 26px; letter-spacing: 4px; color: #fbbf24; margin: 6px 0; }
|
||||
#fOverlay .fword { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 16px 0; }
|
||||
#fOverlay .fword span { width: 44px; height: 52px; border-radius: 10px; background: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; animation: flipin .6s ease backwards; }
|
||||
@keyframes flipin { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }
|
||||
#fOverlay p { color: rgba(255,255,255,.8); line-height: 1.5; }
|
||||
#fOverlay button { font: inherit; cursor: pointer; border: none; border-radius: 10px; padding: 12px 18px; font-weight: 700; background: var(--accent); color: #fff; width: 100%; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<header><div class="avatar" id="av"></div><div><div class="cname" id="cn"></div><div class="cstatus" id="cs">online</div></div></header>
|
||||
<div id="msgs"></div>
|
||||
<div id="composer"></div>
|
||||
</div>
|
||||
<div id="fOverlay"><div class="fcard">
|
||||
<h1>Evadare reusita!</h1>
|
||||
<div class="fstars" id="fStars"></div>
|
||||
<div class="fword" id="fWord"></div>
|
||||
<p id="fMsg"></p>
|
||||
<button id="fAgain">Joaca din nou</button>
|
||||
</div></div>
|
||||
<script>
|
||||
var CFG = {"title":"Comoara ascunsa","player":"","color":"#6d28d9","style":"chat","charName":"Alex","story":"O comoara a fost ascunsa, iar singurul drum spre ea trece prin cateva incercari. Rezolva fiecare puzzle ca sa aduni literele cuvantului magic.","finalMessage":"Felicitari! Ai gasit comoara!","puzzles":[{"title":"Incalzirea","type":"free","question":"Cat fac 7 x 8?","answer":"56","tfAnswer":"Adevarat","choices":"","hint":"Tabla inmultirii cu 7.","letter":"D"},{"title":"Adevarat sau fals","type":"tf","question":"Romania are iesire la Marea Neagra.","answer":"","tfAnswer":"Adevarat","choices":"","hint":"","letter":"A"},{"title":"Alege raspunsul","type":"choice","question":"Care este capitala Frantei?","answer":"","tfAnswer":"Adevarat","choices":"*Paris\nLyon\nMarsilia","hint":"Turnul Eiffel.","letter":"R"}]};
|
||||
document.documentElement.style.setProperty('--accent', CFG.color || '#6d28d9');
|
||||
var totalStars = 0;
|
||||
function el(id){ return document.getElementById(id); }
|
||||
function norm(s){ return String(s).trim().toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').replace(/\s+/g, ' ').replace(/,/g, '.'); }
|
||||
function starsFor(att, hint){ return (hint || att >= 2) ? 1 : (att === 1 ? 2 : 3); }
|
||||
function finalWord(){ var w = ''; for (var i = 0; i < CFG.puzzles.length; i++){ var L = (CFG.puzzles[i].letter || '').trim(); if (L) w += L.toUpperCase(); } return w; }
|
||||
function choiceOpts(p){ return (p.choices || '').split('\n').map(function(l){ return l.trim(); }).filter(Boolean).map(function(o){ return o.charAt(0) === '*' ? o.slice(1).trim() : o; }); }
|
||||
function choiceCorrect(p){ var ls = (p.choices || '').split('\n'); for (var i = 0; i < ls.length; i++){ var l = ls[i].trim(); if (l.charAt(0) === '*') return l.slice(1).trim(); } return ''; }
|
||||
function checkAnswer(p, given){ var exp = p.type === 'tf' ? p.tfAnswer : (p.type === 'choice' ? choiceCorrect(p) : p.answer); return norm(given) !== '' && norm(given) === norm(exp); }
|
||||
function beep(ok){ try { var ctx = beep.ctx || (beep.ctx = new (window.AudioContext || window.webkitAudioContext)()); var t = ctx.currentTime; var fs = ok ? [523, 784] : [196]; fs.forEach(function(f, k){ var o = ctx.createOscillator(), g = ctx.createGain(); o.frequency.value = f; o.type = 'triangle'; g.gain.setValueAtTime(0.12, t + k * 0.09); g.gain.exponentialRampToValueAtTime(0.001, t + k * 0.09 + 0.25); o.connect(g); g.connect(ctx.destination); o.start(t + k * 0.09); o.stop(t + k * 0.09 + 0.3); }); } catch (e) {} }
|
||||
function confetti(){ var colors = [CFG.color || '#6d28d9', '#fbbf24', '#34d399', '#60a5fa', '#f472b6']; for (var i = 0; i < 90; i++){ var c = document.createElement('div'); c.className = 'confetti'; c.style.left = (i * 137 % 100) + 'vw'; c.style.background = colors[i % colors.length]; c.style.animationDuration = (2.2 + (i * 53 % 18) / 10) + 's'; c.style.animationDelay = ((i * 31 % 14) / 10) + 's'; document.body.appendChild(c); } }
|
||||
var who = (CFG.charName || 'Alex').trim() || 'Alex';
|
||||
el('cn').textContent = who; el('av').textContent = who.charAt(0).toUpperCase();
|
||||
var msgs = el('msgs'), composer = el('composer');
|
||||
var idx = -1, attempts = 0, hintUsed = false;
|
||||
var wrongs = ['Nu... nu a mers. Mai incearca!', 'Hmm, nu e asta. Gandeste-te bine!', 'Tot incuiat. Alta idee?'];
|
||||
|
||||
function scrollEnd(){ msgs.scrollTop = msgs.scrollHeight; }
|
||||
function bubble(side, text, cls){
|
||||
var r = document.createElement('div'); r.className = 'row ' + side;
|
||||
var b = document.createElement('div'); b.className = 'bub' + (cls ? ' ' + cls : '');
|
||||
b.textContent = text;
|
||||
r.appendChild(b); msgs.appendChild(r); scrollEnd();
|
||||
return b;
|
||||
}
|
||||
function charMsg(text, cb){
|
||||
el('cs').textContent = 'scrie...';
|
||||
var b = bubble('him', '', 'typing');
|
||||
b.innerHTML = '<i></i><i></i><i></i>';
|
||||
var d = Math.min(450 + text.length * 14, 1800);
|
||||
setTimeout(function(){
|
||||
b.className = 'bub'; b.textContent = text;
|
||||
el('cs').textContent = 'online'; scrollEnd();
|
||||
if (cb) setTimeout(cb, 280);
|
||||
}, d);
|
||||
}
|
||||
function seq(texts, cb){ var i = 0; (function n(){ if (i >= texts.length) { if (cb) cb(); return; } charMsg(texts[i++], n); })(); }
|
||||
|
||||
function storyChunks(){
|
||||
var parts = (CFG.story || '').match(/[^.!?]+[.!?]*\s*/g) || [];
|
||||
var out = [], cur = '';
|
||||
for (var i = 0; i < parts.length; i++) {
|
||||
if (cur && (cur + parts[i]).length > 110) { out.push(cur.trim()); cur = ''; }
|
||||
cur += parts[i];
|
||||
}
|
||||
if (cur.trim()) out.push(cur.trim());
|
||||
return out.length ? out : [CFG.story || ''];
|
||||
}
|
||||
|
||||
function setComposer(p){
|
||||
composer.innerHTML = '';
|
||||
function chip(label, fn, cls){ var b = document.createElement('button'); if (cls) b.className = cls; b.textContent = label; b.onclick = fn; composer.appendChild(b); return b; }
|
||||
if (p.type === 'free') {
|
||||
var inp = document.createElement('input'); inp.placeholder = 'Scrie raspunsul...'; inp.autocomplete = 'off';
|
||||
composer.appendChild(inp);
|
||||
var send = chip('Trimite', function(){ if (inp.value.trim()) { var v = inp.value.trim(); inp.value = ''; answer(v); } });
|
||||
inp.onkeydown = function(e){ if (e.key === 'Enter') send.click(); };
|
||||
setTimeout(function(){ inp.focus(); }, 100);
|
||||
} else if (p.type === 'tf') {
|
||||
chip('Adevarat', function(){ answer('Adevarat'); }, 'chip');
|
||||
chip('Fals', function(){ answer('Fals'); }, 'chip');
|
||||
} else {
|
||||
choiceOpts(p).forEach(function(o){ chip(o, function(){ answer(o); }, 'chip'); });
|
||||
}
|
||||
if (p.hint) chip('Cere un indiciu', function(){ hintUsed = true; bubble('me', 'Ai vreun indiciu?'); composer.innerHTML = ''; charMsg(p.hint, function(){ setComposer(p); }); }, 'chip');
|
||||
}
|
||||
|
||||
function answer(given){
|
||||
var p = CFG.puzzles[idx];
|
||||
bubble('me', given);
|
||||
composer.innerHTML = '';
|
||||
if (checkAnswer(p, given)) {
|
||||
var s = starsFor(attempts, hintUsed);
|
||||
totalStars += s; beep(true);
|
||||
var L = (p.letter || '').trim();
|
||||
charMsg('Da! Asta era! (+' + s + ' \u2605, total ' + totalStars + ')', function(){
|
||||
if (L) { bubble('him', L.toUpperCase(), 'tile'); charMsg('Am gasit o litera!', next); }
|
||||
else next();
|
||||
});
|
||||
} else {
|
||||
attempts++; beep(false);
|
||||
charMsg(wrongs[(attempts - 1) % wrongs.length], function(){ setComposer(p); });
|
||||
}
|
||||
}
|
||||
|
||||
function next(){
|
||||
idx++; attempts = 0; hintUsed = false;
|
||||
if (idx >= CFG.puzzles.length) {
|
||||
seq(['AM IESIT! Multumesc' + (CFG.player ? ', ' + CFG.player : '') + '!', CFG.finalMessage || ''], function(){ showFinal(); });
|
||||
return;
|
||||
}
|
||||
var p = CFG.puzzles[idx];
|
||||
seq([(p.title ? p.title + '. ' : '') + p.question], function(){ setComposer(p); });
|
||||
}
|
||||
|
||||
seq(['Salut' + (CFG.player ? ', ' + CFG.player : '') + '!'].concat(storyChunks()).concat(['Ma ajuti sa ies de aici?']), next);
|
||||
function showFinal(){
|
||||
el('fStars').textContent = totalStars + ' / ' + (CFG.puzzles.length * 3) + ' \u2605';
|
||||
var w = finalWord(); var bw = el('fWord'); bw.innerHTML = '';
|
||||
for (var j = 0; j < w.length; j++){ var s = document.createElement('span'); s.textContent = w.charAt(j); s.style.animationDelay = (j * 0.18) + 's'; bw.appendChild(s); }
|
||||
var msg = CFG.finalMessage || '';
|
||||
el('fMsg').textContent = CFG.player ? CFG.player + ', ' + msg.charAt(0).toLowerCase() + msg.slice(1) : msg;
|
||||
el('fOverlay').style.display = 'flex';
|
||||
beep(true); confetti();
|
||||
}
|
||||
el('fAgain').onclick = function(){ location.reload(); };
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user