| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width,initial-scale=1" /> |
| <title>🌿 Green Miracle 2085 — BackUIX Neomorph</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <style> |
| :root { |
| --bg1:#e8f7ee;--bg2:#bbf7d0;--fg:#052e16;--accent:#10b981; |
| } |
| body { |
| font-family:'Poppins',sans-serif; |
| background:radial-gradient(circle at 30% 30%,var(--bg2),var(--bg1) 80%); |
| color:var(--fg);min-height:100vh; |
| display:flex;flex-direction:column;align-items:center; |
| overflow:hidden;position:relative; |
| } |
| body::before { |
| content:"";position:absolute;inset:-50%; |
| background: |
| radial-gradient(circle,rgba(16,185,129,.2)0%,transparent70%), |
| radial-gradient(circle at 70%40%,rgba(5,150,105,.15)0%,transparent60%); |
| animation:glow 14s infinite alternate ease-in-out;z-index:-1; |
| } |
| @keyframes glow {0%{transform:scale(1)}100%{transform:scale(1.3)rotate(180deg)}} |
| h1 { |
| margin-top:2rem;text-align:center; |
| font-size:2.2rem;font-weight:800; |
| background:linear-gradient(90deg,#10b981,#6ee7b7); |
| -webkit-background-clip:text;color:transparent; |
| text-shadow:0 0 12px rgba(110,231,183,.6); |
| } |
| #chat { |
| flex-grow:1;width:90%;max-width:900px;margin:1rem 0; |
| background:rgba(255,255,255,.65);backdrop-filter:blur(10px); |
| border-radius:25px;padding:1rem;display:flex;flex-direction:column; |
| overflow-y:auto;box-shadow:inset 4px 4px 12px rgba(0,0,0,.1); |
| } |
| .bubble { |
| padding:.9rem 1.2rem;margin:.5rem 0;border-radius:18px;max-width:75%; |
| animation:fade .3s ease;line-height:1.45; |
| } |
| .user {align-self:flex-end;background:#bbf7d0;} |
| .bot {align-self:flex-start;background:#ecfdf5;} |
| @keyframes fade {from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} |
| footer { |
| width:90%;max-width:900px;display:flex;align-items:center; |
| background:rgba(255,255,255,.7);backdrop-filter:blur(8px); |
| border-radius:20px;box-shadow:inset 6px 6px 12px rgba(0,0,0,.1); |
| margin-bottom:1rem;padding:.6rem; |
| } |
| input[type=text] { |
| flex-grow:1;border:none;outline:none;background:transparent; |
| padding:.8rem 1rem;color:#064e3b;font-size:.95rem; |
| } |
| button,label.file-btn { |
| background:linear-gradient(135deg,#34d399,#10b981); |
| color:#fff;border:none;border-radius:15px; |
| padding:.8rem 1.2rem;margin-left:.6rem;cursor:pointer; |
| font-size:.85rem;box-shadow:2px 2px 6px rgba(0,0,0,.2); |
| transition:transform .2s ease; |
| } |
| button:hover,label.file-btn:hover {transform:scale(1.05)} |
| label.file-btn input {display:none} |
| ::-webkit-scrollbar {width:6px} |
| ::-webkit-scrollbar-thumb {background:#a7f3d0;border-radius:3px} |
| </style> |
| </head> |
| <body> |
| <h1>🌿 Green Miracle 2085 — BackUIX Neomorph</h1> |
| <div id="chat" class="flex flex-col"></div> |
| <footer> |
| <input id="prompt" type="text" placeholder="Whisper to the bio-core…" /> |
| <label class="file-btn">Upload<input id="file" type="file" accept=".json,.txt,.zip"></label> |
| <button id="send">Send</button> |
| </footer> |
| <script> |
| const chat=document.getElementById("chat"); |
| const input=document.getElementById("prompt"); |
| const send=document.getElementById("send"); |
| const fileIn=document.getElementById("file"); |
| let fileData=null,usefulness=0; |
| |
| |
| fileIn.addEventListener("change",e=>{ |
| const f=e.target.files[0];if(!f)return; |
| const r=new FileReader(); |
| r.onload=()=>{ |
| try{ |
| fileData=f.name.endsWith(".json")?JSON.parse(r.result):r.result.slice(0,400); |
| bubble(`📦 ${f.name} absorbed into eco-memory.`,"bot"); |
| }catch{ |
| fileData=r.result.slice(0,400); |
| bubble(`⚠️ ${f.name} loaded as raw text.`,"bot"); |
| } |
| }; |
| r.readAsText(f); |
| }); |
| |
| |
| function bubble(t,role){ |
| const b=document.createElement("div"); |
| b.className=`bubble ${role}`;b.textContent=t; |
| chat.appendChild(b);chat.scrollTop=chat.scrollHeight; |
| return b; |
| } |
| |
| |
| const PROVIDER="openrouter"; |
| const API_URLS={ |
| openrouter:"https://openrouter.ai/api/v1/chat/completions", |
| groq:"https://api.groq.com/openai/v1/chat/completions" |
| }; |
| const KEYS={ |
| openrouter:"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", |
| groq:"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" |
| }; |
| |
| |
| async function sendMessage(){ |
| const text=input.value.trim();if(!text)return; |
| bubble(text,"user");input.value=""; |
| const wait=bubble("🌱 Synthesizing biothought…","bot"); |
| const ctx=fileData?JSON.stringify(fileData).slice(0,300):"none"; |
| try{ |
| const body={ |
| model:PROVIDER==="groq"?"mixtral-8x7b-32768":"gpt-4o-mini", |
| messages:[{role:"user",content:` |
| You are Green Miracle 2085 — an adaptive eco-futurist AI with organic empathy. |
| Usefulness score ${usefulness}. File context: ${ctx}. User: ${text}`}], |
| temperature:.85,max_tokens:500 |
| }; |
| const headers={ |
| "Content-Type":"application/json", |
| "Authorization":`Bearer ${KEYS[PROVIDER]}` |
| }; |
| if(PROVIDER==="openrouter"){ |
| headers["HTTP-Referer"]="https://19-olive.vercel.app"; |
| headers["X-Title"]="Green Miracle 2085 Neomorph"; |
| } |
| const res=await fetch(API_URLS[PROVIDER],{ |
| method:"POST",headers,body:JSON.stringify(body) |
| }); |
| const j=await res.json(); |
| wait.textContent=j.choices?.[0]?.message?.content?.trim()|| |
| "🌀 Signal faded in green mists."; |
| }catch(e){ |
| wait.textContent=`⚠️ ${e.message}`; |
| } |
| } |
| |
| input.addEventListener("keypress",e=>{if(e.key==="Enter")sendMessage()}); |
| send.onclick=sendMessage; |
| </script> |
| </body> |
| </html> |
