<![CDATA[
<!DOCTYPE html>
<html lang="hu">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<style>
:root{
--bg:#0f0f11;--panel:#18181b;--panel-2:#1f1f23;
--border:#2a2a2e;--text:#e5e5e5;--muted:#9ca3af;
--accent:#7c3aed;--danger:#ef4444;
}
*{box-sizing:border-box}
body{
margin:0;height:100vh;display:flex;
font-family:Inter,system-ui;
background:var(--bg);color:var(--text);
}
.sidebar{width:260px;background:#111113;border-right:1px solid var(--border);padding:16px;display:flex;flex-direction:column;gap:12px}
.brand{display:flex;gap:10px;align-items:center;font-weight:600}
.logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#7c3aed,#22d3ee);display:grid;place-items:center;font-weight:700}
.new-chat{padding:10px;border-radius:10px;background:var(--panel-2);border:1px solid var(--border);cursor:pointer}
.chat-list{flex:1;overflow-y:auto}
.chat-item{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:8px;cursor:pointer;color:var(--muted)}
.chat-item.active{background:var(--panel-2);color:var(--text)}
.chat-item button{background:none;border:none;color:var(--danger);cursor:pointer}
.main{flex:1;display:flex;flex-direction:column}
.topbar{height:56px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 16px}
select{background:var(--panel);border:1px solid var(--border);color:var(--text);padding:6px;border-radius:8px}
.chat{flex:1;padding:24px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}
.msg{max-width:70%;padding:14px 16px;border-radius:16px;line-height:1.4}
.user{align-self:flex-end;background:var(--accent)}
.ai{align-self:flex-start;background:var(--panel-2);border:1px solid var(--border)}
.thinking{font-style:italic;color:var(--muted)}
.input-area{border-top:1px solid var(--border);padding:16px}
.input-wrap{display:flex;gap:10px;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:10px}
textarea{flex:1;background:transparent;border:none;color:var(--text);resize:none;outline:none;height:24px}
button{background:var(--accent);border:none;color:#fff;border-radius:10px;padding:0 16px;cursor:pointer}
@media(max-width:800px){.sidebar{display:none}}
</style>
<body>
<div class="sidebar">
<div class="brand"><div class="logo">A</div> Albert AI</div>
<div class="new-chat" onclick="newChat()">➕ Új beszélgetés</div>
<div id="chatList" class="chat-list"></div>
</div>
<div class="main">
<div class="topbar">
<div id="chatTitle">Új beszélgetés</div>
<select id="model">
<option value="5-fast">Albert 5.0 fast – gyorsabb</option>
<option value="5">Albert 5.0 – okosabb</option>
<option value="4.5-fast">Albert 4.5 fast</option>
<option value="4.5">Albert 4.5</option>
<option value="3">Albert 3.0 – régebbi</option>
<option value="2">Albert 2.0 – lassabb</option>
<option value="1">Albert 1.0 – butább</option>
</select>
</div>
<div id="chat" class="chat"></div>
<div class="input-area">
<div class="input-wrap">
<textarea id="input" placeholder="Kérdezz bármit…"></textarea>
<button id="sendBtn" onclick="sendMsg()">Küldés</button>
</div>
</div>
</div>
<script>
let chats = JSON.parse(localStorage.albert_chats || "{}");
let currentId = null, typing = false, stop = false;
const chatElem = document.getElementById("chat");
const inputElem = document.getElementById("input");
const sendBtn = document.getElementById("sendBtn");
// ENTER / SHIFT+ENTER
inputElem.addEventListener("keydown", e=>{
if(e.key==="Enter"&&!e.shiftKey){ e.preventDefault(); sendMsg(); }
});
// SAVE / TITLE
function save(){ localStorage.albert_chats = JSON.stringify(chats); }
function genTitle(text){ return text.split(" ").slice(0,5).join(" "); }
// RENDER CHAT LIST
function renderList(){
const chatList = document.getElementById("chatList");
chatList.innerHTML="";
Object.entries(chats).forEach(([id,c])=>{
const d = document.createElement("div");
d.className = "chat-item" + (id===currentId?" active":"");
d.innerHTML = `<span>${c.title}</span><button onclick="delChat('${id}');event.stopPropagation();">✕</button>`;
d.onclick=()=>loadChat(id);
chatList.appendChild(d);
});
}
// DELETE CHAT
function delChat(id){
if(!confirm("Biztos törlöd?")) return;
delete chats[id];
save();
const keys = Object.keys(chats);
if(keys.length) loadChat(keys[0]);
else newChat();
}
// NEW CHAT
function newChat(){
currentId="c"+Date.now();
chats[currentId]={title:"Új beszélgetés", messages:[]};
save();
loadChat(currentId);
}
// LOAD CHAT
function loadChat(id){
currentId=id;
chatElem.innerHTML="";
chats[id].messages.forEach(m=>addMessage(m.text, m.type, false));
document.getElementById("chatTitle").textContent=chats[id].title;
renderList();
}
// ADD MESSAGE
function addMessage(text,type="user",store=true){
const d=document.createElement("div");
d.className="msg "+type;
d.textContent=text;
chatElem.appendChild(d);
chatElem.scrollTop = chatElem.scrollHeight;
if(store && currentId){
chats[currentId].messages.push({text,type});
if(chats[currentId].messages.length===1 && type==="user"){
chats[currentId].title = genTitle(text);
}
save(); renderList();
}
return d;
}
// SEND + STREAM
async function sendMsg(){
if(typing){ stop=true; return; }
const text = inputElem.value.trim();
if(!text) return;
inputElem.value = "";
addMessage(text,"user");
typing=true; stop=false;
sendBtn.textContent="⏹ STOP";
const thinking = addMessage("Albert gondolkodik…","ai",false);
setTimeout(async()=>{
try{
const res = await fetch(
"https://backend.buildpicoapps.com/aero/run/llm-api?pk=v1-Z0FBQUFBQm5HUEtMSjJkakVjcF9IQ0M0VFhRQ0FmSnNDSHNYTlJSblE0UXo1Q3RBcjFPcl9YYy1OZUhteDZWekxHdWRLM1M1alNZTkJMWEhNOWd4S1NPSDBTWC12M0U2UGc9PQ==",
{method:"POST", headers:{"Content-Type":"application/json"}, body:JSON.stringify({prompt:text})}
);
const data = await res.json();
chatElem.removeChild(thinking);
let out = data.text||"Nem tudom pontosan…";
let box = addMessage("", "ai", false);
let i=0;
const interval = setInterval(()=>{
if(stop || i>=out.length){
clearInterval(interval); typing=false; sendBtn.textContent="Küldés"; box.textContent=out; save(); return;
}
box.textContent += out[i++]; chatElem.scrollTop = chatElem.scrollHeight;
},20);
}catch{
chatElem.removeChild(thinking);
addMessage("⚠️ Kapcsolati hiba","ai");
typing=false; sendBtn.textContent="Küldés";
}
},400);
}
// INIT
if(Object.keys(chats).length){
loadChat(Object.keys(chats)[0]);
} else {
newChat();
}
</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>
]]>