RAME KING Ai #24
Description
`<!doctype html>
<title>RAME KING — AI App</title> <script> // Inject CSS dynamically const style = document.createElement('style'); style.textContent = ` :root{--bg:#0f1724; --card:#0b1220; --accent:#ff6b6b; --muted:#94a3b8; --glass: rgba(255,255,255,0.03); font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;} *{box-sizing:border-box;} body{margin:0;min-height:100vh;background:linear-gradient(180deg,#071023 0%, #071a2b 60%);color:#e6eef8;display:flex;align-items:center;justify-content:center;padding:24px;} .app{width:100%;max-width:980px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:16px;padding:20px;box-shadow:0 8px 30px rgba(2,6,23,0.7);} header{display:flex;gap:16px;align-items:center;margin-bottom:12px;} .logo{width:64px;height:64px;border-radius:12px;background:linear-gradient(45deg,var(--accent),#ffd66b);display:flex;align-items:center;justify-content:center;font-weight:800;color:#071023;font-size:18px;} h1{margin:0;font-size:20px;} p.lead{margin:0;color:var(--muted);font-size:13px;} .main{display:grid;grid-template-columns:320px 1fr;gap:16px;} .sidebar{background:var(--card);padding:12px;border-radius:10px;min-height:420px;} .controls{display:flex;flex-direction:column;gap:8px;} .btn{background:var(--glass);border:1px solid rgba(255,255,255,0.03);padding:8px 10px;border-radius:8px;cursor:pointer;color:inherit;} .chat{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));padding:18px;border-radius:10px;min-height:420px;display:flex;flex-direction:column;} .messages{flex:1;overflow:auto;padding-right:8px;display:flex;flex-direction:column;gap:10px;} .msg{max-width:85%;padding:12px;border-radius:12px;line-height:1.35;} .user{align-self:flex-end;background:linear-gradient(180deg,#163a58,#0b2a40);border:1px solid rgba(255,255,255,0.03);} .ai{align-self:flex-start;background:linear-gradient(180deg,#062b1f,#08372a);border:1px solid rgba(255,255,255,0.03);} .meta{font-size:11px;color:var(--muted);margin-bottom:6px;} .composer{display:flex;gap:8px;padding-top:12px;} textarea{flex:1;min-height:48px;border-radius:10px;padding:10px;background:transparent;border:1px solid rgba(255,255,255,0.03);color:inherit;resize:vertical;} .send{background:linear-gradient(90deg,var(--accent),#ffd66b);border:none;padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:700;} footer{margin-top:12px;text-align:center;color:var(--muted);font-size:12px;} @media (max-width:860px){.main{grid-template-columns:1fr;}.sidebar{order:2;}} `; document.head.appendChild(style);// Build HTML dynamically
const app = document.getElementById('app');
app.innerHTML = `
<div class='app'>
<header>
<div class='logo'>RAME<br>KING</div>
<div>
<h1>RAME KING — AI Assistant</h1>
<p class='lead'>A lightweight, JS-driven assistant demo.</p>
</div>
</header>
<div class='main'>
<aside class='sidebar'>
<div class='controls'>
<button class='btn' id='clearBtn'>Clear chat</button>
<button class='btn' id='presetBtn'>Preset Example</button>
<label style='font-size:12px;color:#94a3b8;margin-top:8px;'>Mode</label>
<select id='mode' class='btn'>
<option value='assistant'>Assistant</option>
<option value='creative'>Creative</option>
<option value='concise'>Concise</option>
</select>
</div>
</aside>
<main class='chat'>
<div class='messages' id='messages'></div>
<div class='composer'>
<textarea id='prompt' placeholder='Ask RAME KING something...'></textarea><button class='send' id='sendBtn'>Send</button>
</div>
</main>
</div>
<footer>Made with ❤️ for RAME KING</footer>
const messagesEl = document.getElementById('messages');
const promptEl = document.getElementById('prompt');
const sendBtn = document.getElementById('sendBtn');
const clearBtn = document.getElementById('clearBtn');
const presetBtn = document.getElementById('presetBtn');
const modeEl = document.getElementById('mode');
function addMessage(role, text){
const container = document.createElement('div');
container.className = 'msg ' + (role==='user'?'user':'ai');
const meta = document.createElement('div');
meta.className='meta';
meta.textContent = role==='user'?'You':'RAME KING';
container.appendChild(meta);
const body = document.createElement('div');
body.innerHTML = text.replace(/\n/g,'
');
container.appendChild(body);
messagesEl.appendChild(container);
messagesEl.scrollTop = messagesEl.scrollHeight;
}
function simulateAI(input, mode){
const cleaned = input.trim();
if(!cleaned) return 'Ask me anything!';
if(mode==='creative') return ✨ RAME KING: Imagine this — ${cleaned}. A creative response!;
if(mode==='concise') return Short answer: ${cleaned.split(' ').slice(0,10).join(' ')}${cleaned.split(' ').length>10?'...':''};
return RAME KING: You said "${cleaned}". Here's a summary and tips.;
}
async function handleSend(){
const text = promptEl.value;
if(!text.trim()) return;
addMessage('user', text);
promptEl.value='';
const typing = document.createElement('div');
typing.className='msg ai';
typing.innerHTML='
messagesEl.appendChild(typing);
messagesEl.scrollTop = messagesEl.scrollHeight;
let dots=0; const dotI=setInterval(()=>{dots=(dots+1)%4; typing.querySelector('#dots').textContent='.'.repeat(dots);},300);
await new Promise(r=>setTimeout(r,700+Math.random()*900));
clearInterval(dotI);
typing.remove();
addMessage('ai', simulateAI(text, modeEl.value));
}
sendBtn.addEventListener('click', handleSend);
promptEl.addEventListener('keydown', e=>{if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();handleSend();}});
clearBtn.addEventListener('click', ()=>{messagesEl.innerHTML=''; addMessage('ai','Welcome — RAME KING at your service!');});
presetBtn.addEventListener('click', ()=>{promptEl.value='Create a short marketing pitch for RAME KING.'; promptEl.focus();});
addMessage('ai','Welcome — RAME KING at your service!');
</script> `