minzo456 commited on
Commit
32934a7
·
verified ·
1 Parent(s): f64f046

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +0 -159
index.html CHANGED
@@ -1,159 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Elephant AI Pro | Neural Console</title>
7
- <script src="https://cdn.tailwindcss.com"></script>
8
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
9
- <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
10
- <style>
11
- @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;700&family=JetBrains+Mono&display=swap');
12
-
13
- :root { --accent: #00f2ff; --bg: #050505; }
14
- body { background: var(--bg); color: #fff; font-family: 'Space Grotesk', sans-serif; overflow: hidden; margin: 0; }
15
-
16
- /* 🔱 Glassmorphism Panels */
17
- .glass-panel { background: rgba(10, 10, 10, 0.8); backdrop-filter: blur(30px); border: 1px solid rgba(255, 255, 255, 0.03); }
18
- .user-bubble { background: rgba(0, 242, 255, 0.03); border-left: 2px solid var(--accent); padding: 1.5rem; border-radius: 12px 0 0 12px; margin-left: auto; }
19
- .ai-bubble { background: rgba(255, 255, 255, 0.01); border-left: 2px solid #333; padding: 1.5rem; border-radius: 0 12px 12px 0; margin-right: auto; }
20
-
21
- #chat-container::-webkit-scrollbar { width: 3px; }
22
- #chat-container::-webkit-scrollbar-thumb { background: #222; border-radius: 10px; }
23
- .typing-cursor::after { content: '|'; animation: blink 0.8s infinite; color: var(--accent); }
24
- @keyframes blink { 50% { opacity: 0; } }
25
-
26
- .glow { box-shadow: 0 0 20px rgba(0, 242, 255, 0.1); }
27
- pre[class*="language-"] { background: #0a0a0a !important; border: 1px solid #1a1a1a !important; border-radius: 8px; }
28
- </style>
29
- </head>
30
- <body class="flex h-screen w-screen overflow-hidden">
31
-
32
- <aside class="w-72 glass-panel border-r border-white/5 hidden lg:flex flex-col items-center py-10 z-20">
33
- <div class="mb-16 text-center">
34
- <div class="w-14 h-14 bg-white/5 rounded-2xl flex items-center justify-center mb-4 mx-auto border border-white/10 glow">
35
- <span class="text-xl font-bold text-cyan-400">E</span>
36
- </div>
37
- <h1 class="text-[10px] tracking-[0.5em] text-gray-500 uppercase font-bold">Elephant Pro</h1>
38
- </div>
39
-
40
- <nav class="flex-1 w-full px-6 space-y-10">
41
- <div class="p-4 rounded-xl border border-white/5 bg-white/[0.01]">
42
- <p class="text-[8px] text-cyan-500 tracking-widest uppercase mb-2">Neural Engine</p>
43
- <p class="text-[10px] text-gray-400 font-mono italic">TENCENT_HY3_AGENT</p>
44
- </div>
45
- <div class="p-4 rounded-xl border border-white/5 bg-white/[0.01]">
46
- <p class="text-[8px] text-gray-600 tracking-widest uppercase mb-2">Access Level</p>
47
- <p class="text-[10px] text-white/40 font-mono">MINZO-PRIME_ROOT</p>
48
- </div>
49
- </nav>
50
-
51
- <div class="mt-auto text-[8px] text-gray-800 tracking-[0.4em] uppercase">Status: Online</div>
52
- </aside>
53
-
54
- <main class="flex-1 flex flex-col relative">
55
- <header class="h-20 flex items-center justify-between px-10 border-b border-white/5 backdrop-blur-md">
56
- <div class="flex flex-col">
57
- <span class="text-[9px] text-gray-500 tracking-[0.4em] uppercase font-bold">Secure Command Terminal</span>
58
- <span class="text-[8px] text-cyan-900 font-mono mt-1 uppercase">Node: HF-Space-Direct</span>
59
- </div>
60
- <div id="clock" class="text-[10px] font-mono text-gray-700 tracking-widest"></div>
61
- </header>
62
-
63
- <div id="chat-container" class="flex-1 overflow-y-auto px-10 lg:px-20 py-10">
64
- <div id="chat-box" class="max-w-4xl mx-auto space-y-12"></div>
65
- </div>
66
-
67
- <footer class="p-10">
68
- <div class="max-w-4xl mx-auto relative group">
69
- <input id="user-input" type="text" autocomplete="off" placeholder="TRANSMIT NEURAL COMMAND..."
70
- class="w-full bg-white/[0.02] border border-white/5 rounded-2xl py-6 px-10 text-[13px] tracking-widest text-white focus:outline-none focus:border-cyan-500/30 transition-all duration-500">
71
- <button onclick="send()" class="absolute right-8 top-1/2 -translate-y-1/2 text-cyan-600 hover:text-white transition-all">
72
- <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M14 5l7 7m0 0l-7 7m7-7H3" stroke-width="2"/></svg>
73
- </button>
74
- </div>
75
- </footer>
76
- </main>
77
-
78
- <script>
79
- // 🔱 පද්ධතියේ Backend එක සමඟ සම්බන්ධ වීම
80
- const API_URL = window.location.origin + "/generate";
81
-
82
- function init() {
83
- updateClock();
84
- setInterval(updateClock, 1000);
85
- appendMsg('ELEPHANT', 'Uplink Established. Tencent Hy3 Core is active. Awaiting your command, Commander MINZO-PRIME.', 'ai');
86
- }
87
-
88
- function updateClock() { document.getElementById('clock').innerText = new Date().toLocaleString(); }
89
-
90
- async function send() {
91
- const input = document.getElementById('user-input');
92
- const prompt = input.value.trim();
93
- if (!prompt) return;
94
-
95
- appendMsg('MASTER', prompt, 'user');
96
- input.value = '';
97
-
98
- const aiId = 'ai-' + Date.now();
99
- appendMsg('ELEPHANT', 'REASONING...', 'ai', aiId);
100
-
101
- try {
102
- const response = await fetch(API_URL, {
103
- method: "POST",
104
- headers: { "Content-Type": "application/json" },
105
- body: JSON.stringify({ prompt })
106
- });
107
-
108
- const data = await response.json();
109
- const el = document.getElementById(aiId);
110
-
111
- if (data.choices && data.choices[0]) {
112
- el.innerText = '';
113
- typeEffect(aiId, data.choices[0].message.content);
114
- } else if (data.error) {
115
- el.innerText = "SYSTEM_FAULT: " + data.error;
116
- }
117
- } catch (e) {
118
- document.getElementById(aiId).innerText = "CONNECTION_LOST: Remote Node Unreachable.";
119
- }
120
- }
121
-
122
- function appendMsg(who, text, type, id = '') {
123
- const box = document.getElementById('chat-box');
124
- const div = document.createElement('div');
125
- div.className = `flex flex-col ${type === 'user' ? 'items-end' : 'items-start'}`;
126
- div.innerHTML = `
127
- <span class="text-[8px] tracking-[0.4em] text-gray-700 mb-3 uppercase font-bold">${who}</span>
128
- <div id="${id}" class="${type === 'user' ? 'user-bubble' : 'ai-bubble'} text-[14px] leading-relaxed max-w-[85%] font-mono text-gray-300">
129
- ${text}
130
- </div>
131
- `;
132
- box.appendChild(div);
133
- scroll();
134
- }
135
-
136
- function typeEffect(id, text) {
137
- let i = 0;
138
- const el = document.getElementById(id);
139
- el.classList.add('typing-cursor');
140
- function type() {
141
- if (i < text.length) {
142
- el.innerHTML = text.substring(0, i + 1).replace(/\n/g, '<br>');
143
- i++;
144
- scroll();
145
- setTimeout(type, 8);
146
- } else {
147
- el.classList.remove('typing-cursor');
148
- Prism.highlightAllUnder(el);
149
- }
150
- }
151
- type();
152
- }
153
-
154
- function scroll() { const c = document.getElementById('chat-container'); c.scrollTop = c.scrollHeight; }
155
- document.getElementById('user-input').addEventListener('keypress', (e) => { if(e.key === 'Enter') send(); });
156
- window.onload = init;
157
- </script>
158
- </body>
159
- </html>