Spaces:

BATUTO-ART
/

MICTLANTECUHTLI

Sleeping

App Files Files Community

BATUTO-ART commited on 16 days ago

Commit

cd27dfd

verified ·

1 Parent(s): 60b3228

Create index.html

Browse files

Files changed (1) hide show

index.html +100 -0

index.html ADDED Viewed

	@@ -0,0 +1,100 @@

+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NEUROCORE V10.3 — MICTLÁN</title>
+    <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&family=JetBrains+Mono&display=swap" rel="stylesheet">
+    <style>
+        :root { --gold: #D4AF37; --obsidian: #050505; }
+        body { background: #000; color: #e0e0e0; font-family: 'JetBrains Mono', monospace; overflow: hidden; }
+        .mictlan-header { border-bottom: 2px solid var(--gold); background: rgba(0,0,0,0.9); backdrop-filter: blur(10px); }
+        .gold-glow { text-shadow: 0 0 10px var(--gold); }
+        .card-msg { background: rgba(255,255,255,0.03); border: 1px solid rgba(212,175,55,0.2); border-left: 3px solid var(--gold); }
+        .btn-ritual { background: var(--gold); color: #000; font-family: 'Cinzel Decorative', serif; font-weight: bold; transition: 0.3s; }
+        .btn-ritual:hover { background: #FFD700; transform: scale(1.05); box-shadow: 0 0 20px var(--gold); }
+        #batuto-sig { position: absolute; top: 10px; left: 10px; font-family: 'Cinzel Decorative'; color: var(--gold); font-size: 14px; z-index: 50; pointer-events: none; }
+    </style>
+</head>
+<body>
+    <div id="batuto-sig">BATUTO-ART</div>
+    <div id="root"></div>
+    <script type="text/babel">
+        const { useState, useEffect, useRef } = React;
+        const MODELS = ["DeepSeek-R1-0528", "DeepSeek-V3.1-cb", "Llama-4-Maverick-17B-128E-Instruct", "Qwen3-235B"];
+        function App() {
+            const [tab, setTab] = useState('chat');
+            const [chat, setChat] = useState([{ r: 'asst', t: 'El Mictlán te recibe, Rey BATUTO. ¿Qué visión invocamos hoy?' }]);
+            const [msg, setMsg] = useState('');
+            const [loading, setLoading] = useState(false);
+            const scrollRef = useRef(null);
+            useEffect(() => { scrollRef.current?.scrollIntoView({ behavior: 'smooth' }); }, [chat]);
+            const onSend = async () => {
+                if(!msg) return;
+                const userMsg = msg; setMsg('');
+                setChat(prev => [...prev, { r: 'user', t: userMsg }]);
+                setLoading(true);
+                try {
+                    const res = await fetch('/api/chat', {
+                        method: 'POST',
+                        headers: {'Content-Type': 'application/json'},
+                        body: JSON.stringify({ message: userMsg, model: MODELS[0] })
+                    });
+                    const data = await res.json();
+                    setChat(prev => [...prev, { r: 'asst', t: data.reply }]);
+                } catch { setChat(prev => [...prev, { r: 'asst', t: 'Error en el portal.' }]); }
+                setLoading(false);
+            };
+            return (
+                <div className="h-screen flex flex-col max-w-md mx-auto border-x border-[#D4AF3733]">
+                    <header className="p-6 pt-12 mictlan-header text-center">
+                        <h1 className="text-sm tracking-[0.5em] text-[#D4AF37] gold-glow font-bold uppercase">Neurocore V10.3</h1>
+                    </header>
+                    <nav className="flex bg-black border-b border-[#D4AF3722]">
+                        {['chat', 'vision'].map(t => (
+                            <button key={t} onClick={() => setTab(t)} className={`flex-1 py-4 text-[10px] uppercase tracking-widest ${tab === t ? 'text-[#D4AF37] border-b-2 border-[#D4AF37]' : 'opacity-40'}`}>{t}</button>
+                        ))}
+                    </nav>
+                    <main className="flex-1 overflow-y-auto p-4 space-y-4">
+                        {tab === 'chat' ? (
+                            <>
+                                {chat.map((m, i) => (
+                                    <div key={i} className={`p-4 rounded-xl card-msg ${m.r === 'user' ? 'ml-8' : 'mr-8'}`}>
+                                        <p className="text-xs leading-relaxed">{m.t}</p>
+                                    </div>
+                                ))}
+                                <div ref={scrollRef} />
+                            </>
+                        ) : (
+                            <div className="text-center space-y-6 pt-10">
+                                <p className="text-[10px] uppercase tracking-widest opacity-50">Espejo de Obsidiana</p>
+                                <div className="aspect-square bg-white/5 rounded-3xl border border-dashed border-[#D4AF3744] flex items-center justify-center italic text-xs opacity-20">Invocando visiones...</div>
+                                <button className="w-full py-4 btn-ritual rounded-2xl">Manifestar Arte</button>
+                            </div>
+                        )}
+                    </main>
+                    {tab === 'chat' && (
+                        <footer className="p-4 bg-black flex gap-2">
+                            <input value={msg} onChange={e => setMsg(e.target.value)} onKeyDown={e => e.key === 'Enter' && onSend()} className="flex-1 bg-white/5 border border-[#D4AF3733] rounded-xl px-4 text-xs outline-none focus:border-[#D4AF37]" placeholder="Escribe al inframundo..." />
+                            <button onClick={onSend} className="w-12 h-12 btn-ritual rounded-xl">💀</button>
+                        </footer>
+                    )}
+                </div>
+            );
+        }
+        ReactDOM.createRoot(document.getElementById("root")).render(<App />);
+    </script>
+</body>
+</html>