Skip to content

Commit d90b5d4

Browse files
FacePrintPayFacePrintPay
committed
Feat: Deployed Claude Artifact HTML (NDA + Live Wiring) - 1776092880
1 parent bed8353 commit d90b5d4

1 file changed

Lines changed: 165 additions & 112 deletions

File tree

‎public/index.html‎

Lines changed: 165 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -1,113 +1,166 @@
1-
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>🌌 AiMetaverse • Builder Platform</title><style>
2-
:root{--bg:#0a0a15;--panel:#16162a;--accent:#7c3aed;--text:#e6e6ff;--success:#22c55e;--warn:#f59e0b}
3-
*{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}
4-
header{padding:1rem 2rem;border-bottom:1px solid #333;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:var(--bg);z-index:10}
5-
.logo{font-weight:800;font-size:1.3rem;background:linear-gradient(135deg,var(--accent),#3b82f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
6-
.tabs{display:flex;gap:.5rem;flex-wrap:wrap}
7-
.tab{padding:.5rem 1rem;background:var(--panel);border:1px solid #333;color:var(--text);border-radius:8px;cursor:pointer;font-size:.9rem;transition:.2s}
8-
.tab:hover{border-color:var(--accent)}.tab.active{background:var(--accent);border-color:var(--accent)}
9-
main{padding:1.5rem 2rem;max-width:1400px;margin:0 auto}.panel{display:none}.panel.active{display:block}
10-
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;margin-top:1rem}
11-
.card{background:var(--panel);border:1px solid #333;border-radius:12px;padding:1rem;cursor:pointer;transition:.2s}
12-
.card:hover{border-color:var(--accent);transform:translateY(-2px)}.card.active{border-color:var(--accent);background:#252540}
13-
.card h3{font-weight:600;margin-bottom:.25rem}.status{font-size:.75rem;padding:3px 8px;border-radius:999px;background:#333}
14-
.status.active{background:var(--success);color:#052e16}.status.idle{background:#444;color:#aaa}
15-
.prompt{width:100%;min-height:140px;background:#0f0f23;border:1px solid #333;border-radius:10px;padding:1rem;color:var(--text);resize:vertical;font-family:inherit}
16-
.btn{background:var(--accent);color:white;border:none;padding:.8rem 1.5rem;border-radius:10px;cursor:pointer;font-weight:600;transition:.2s}
17-
.btn:hover{filter:brightness(1.1)}.btn:disabled{opacity:.5;cursor:not-allowed}
18-
.output{background:#0f0f23;border-radius:10px;padding:1rem;margin-top:1rem;min-height:120px;white-space:pre-wrap;font-family:monospace;font-size:.9rem;max-height:400px;overflow:auto}
19-
.avatar{width:140px;height:140px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#3b82f6);margin:1rem auto;display:grid;place-items:center;font-size:3rem}
20-
.deploy-log{background:#0f0f23;border-radius:10px;padding:1rem;font-family:monospace;font-size:.85rem;max-height:350px;overflow:auto}
21-
.repo-tree{font-family:monospace;font-size:.85rem;max-height:500px;overflow:auto}
22-
@media(max-width:768px){header{padding:1rem}.tabs{overflow-x:auto;white-space:nowrap}main{padding:1rem}}
23-
</style></head><body>
24-
<header>
25-
<div class="logo">🌌 AiMetaverse Builder</div>
26-
<nav class="tabs">
27-
<button class="tab active" data-tab="agents">🪐 Agents</button>
28-
<button class="tab" data-tab="studio">✍️ Prompt Studio</button>
29-
<button class="tab" data-tab="avatar">👤 Avatar Lab</button>
30-
<button class="tab" data-tab="deploy">🚀 Deploy</button>
31-
<button class="tab" data-tab="repo">📁 Repos</button>
32-
</nav>
33-
</header>
34-
<main>
35-
<section id="agents" class="panel active">
36-
<h2>Planetary AI Agents</h2>
37-
<p id="agent-summary" style="color:#888;margin:.5rem 0">Loading...</p>
38-
<div class="grid" id="agent-grid"></div>
39-
</section>
40-
<section id="studio" class="panel">
41-
<h2>Prompt Studio</h2>
42-
<select id="studio-agent" class="prompt" style="height:auto"><option>Select agent...</option></select>
43-
<textarea id="studio-prompt" class="prompt" placeholder="Describe what you want to create..."></textarea>
44-
<button id="studio-run" class="btn">✨ Generate</button>
45-
<div id="studio-output" class="output"></div>
46-
</section>
47-
<section id="avatar" class="panel">
48-
<h2>Avatar Lab</h2>
49-
<div class="avatar">👁️</div>
50-
<input type="file" id="voice-upload" accept="audio/*" style="display:none"/>
51-
<button class="btn" onclick="document.getElementById('voice-upload').click()">🎤 Upload Voice Sample</button>
52-
<input type="text" id="birth-chart" placeholder="Birth chart (optional)" style="width:100%;padding:.8rem;margin:1rem 0;border-radius:8px;border:1px solid #333;background:#0f0f23;color:var(--text)"/>
53-
<textarea id="avatar-prompt" class="prompt" placeholder="Describe your avatar's personality, style, purpose..."></textarea>
54-
<button class="btn">🎨 Create Avatar</button>
55-
<div id="avatar-output" class="output"></div>
56-
</section>
57-
<section id="deploy" class="panel">
58-
<h2>Deploy Your Creation</h2>
59-
<p style="color:#888;margin:.5rem 0">One-click deploy to Vercel, GitHub Pages, or export locally.</p>
60-
<select id="deploy-target" style="width:100%;padding:.8rem;margin:1rem 0;border-radius:8px;border:1px solid #333;background:#0f0f23;color:var(--text)">
61-
<option value="vercel">Vercel (Recommended)</option>
62-
<option value="github">GitHub Pages</option>
63-
<option value="local">Local Export (ZIP)</option>
64-
</select>
65-
<button id="deploy-run" class="btn">🌐 Deploy Now</button>
66-
<div id="deploy-log" class="deploy-log">Waiting for deploy command...</div>
67-
</section>
68-
<section id="repo" class="panel">
69-
<h2>Repository Explorer</h2>
70-
<div id="repo-tree" class="repo-tree">Scanning repositories...</div>
71-
</section>
72-
</main>
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>Sovereign GTP Command Console | Live</title>
7+
<style>
8+
:root { --bg: #050505; --text: #e0e0e0; --accent: #00ff41; --secondary: #008F11; --alert: #ff3333; --glass: rgba(20, 20, 20, 0.9); }
9+
body { background: var(--bg); color: var(--text); font-family: 'Courier New', monospace; margin: 0; padding: 20px; }
10+
.container { max-width: 1200px; margin: 0 auto; }
11+
header { border-bottom: 1px solid var(--accent); padding-bottom: 20px; margin-bottom: 30px; display: flex; justify-content: space-between; align-items: center; }
12+
h1 { color: var(--accent); margin: 0; text-transform: uppercase; letter-spacing: 2px; }
13+
.status-badge { background: var(--secondary); color: #000; padding: 5px 10px; font-weight: bold; border-radius: 4px; animation: pulse 2s infinite; }
14+
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }
15+
16+
/* NDA Gate Overlay */
17+
#nda-gate { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 1000; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
18+
#nda-gate.hidden { display: none; }
19+
.nda-box { border: 2px solid var(--accent); padding: 40px; background: #111; max-width: 500px; box-shadow: 0 0 30px var(--accent); }
20+
.btn-nda { background: var(--accent); color: #000; border: none; padding: 15px 30px; font-size: 1.2rem; font-weight: bold; cursor: pointer; margin-top: 20px; }
21+
.btn-nda:hover { background: #fff; box-shadow: 0 0 20px #fff; }
22+
23+
/* Agent Grid */
24+
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 30px; }
25+
.card { background: #111; border: 1px solid #333; padding: 20px; border-radius: 8px; transition: 0.3s; position: relative; overflow: hidden; }
26+
.card:hover { border-color: var(--accent); box-shadow: 0 0 15px rgba(0, 255, 65, 0.2); }
27+
.card h3 { color: var(--accent); margin-top: 0; }
28+
.card .status { font-size: 0.8rem; color: #888; margin-bottom: 10px; }
29+
.card .prompt-box { width: 100%; background: #000; border: 1px solid #444; color: #fff; padding: 8px; margin-top: 10px; font-family: monospace; }
30+
.card .response { margin-top: 10px; font-size: 0.9rem; color: var(--accent); min-height: 40px; white-space: pre-wrap; }
31+
32+
/* Ad Banner */
33+
#ad-banner { background: #222; border: 1px solid var(--alert); color: #fff; padding: 10px; text-align: center; margin-bottom: 20px; display: none; }
34+
</style>
35+
</head>
36+
<body>
37+
38+
<!-- NDA Gate -->
39+
<div id="nda-gate">
40+
<div class="nda-box">
41+
<h1 style="color:var(--accent)">SOVEREIGN ACCESS REQUIRED</h1>
42+
<p>This Command Console contains sensitive Planetary Agent logic and Biometric Payment modules.</p>
43+
<p>Please sign the Sovereign NDA to proceed.</p>
44+
<button class="btn-nda" onclick="unlockConsole()">✅ SIGN NDA & ENTER</button>
45+
</div>
46+
</div>
47+
48+
<!-- Ad Serve Banner -->
49+
<div id="ad-banner"></div>
50+
51+
<div class="container">
52+
<header>
53+
<h1> Sovereign GTP Command Console</h1>
54+
<div class="status-badge">● SYSTEM ONLINE // FASTAPI CONNECTED</div>
55+
</header>
56+
57+
<section>
58+
<h2>🪐 Planetary Agents (Live)</h2>
59+
<p><em>Interact directly with agents via the prompt boxes below. Ad-Serve active.</em></p>
60+
<div class="grid" id="agent-grid">
61+
<!-- Agents injected via JS -->
62+
<div class="card"><h3>Loading Agents...</h3></div>
63+
</div>
64+
</section>
65+
66+
<footer style="margin-top: 50px; text-align: center; color: #666; font-size: 0.8rem;">
67+
Powered by Constellation25 • FacePrintPay Ecosystem • Local Qwen Inference
68+
</footer>
69+
</div>
70+
7371
<script>
74-
// Tab switching
75-
document.querySelectorAll('.tab').forEach(t=>t.onclick=e=>{
76-
document.querySelectorAll('.tab').forEach(x=>x.classList.remove('active'));
77-
document.querySelectorAll('.panel').forEach(x=>x.classList.remove('active'));
78-
e.currentTarget.classList.add('active');
79-
document.getElementById(e.currentTarget.dataset.tab).classList.add('active');
80-
});
81-
// Load agents from reports
82-
async function loadAgents(){
83-
try{
84-
const res=await fetch('agentlogs/data.json');
85-
const data=await res.json();
86-
const agents=data.agents||[];
87-
document.getElementById('agent-summary').textContent=`${agents.filter(a=>a.has_log).length}/${agents.length} agents active • Last sync: ${data.updated_at?new Date(data.updated_at).toLocaleString():'—'}`;
88-
document.getElementById('agent-grid').innerHTML=agents.map(a=>`<div class="card" data-agent="${a.agent}" onclick="selectAgent('${a.agent}')"><h3>${a.agent}</h3><span class="status ${a.has_log?'active':'idle'}">${a.has_log?'✅ Ready':'⏳ Idle'}</span></div>`).join('');
89-
const sel=document.getElementById('studio-agent');
90-
sel.innerHTML='<option>Select agent...</option>'+agents.map(a=>`<option value="${a.agent}">${a.agent}</option>`).join('');
91-
}catch{document.getElementById('agent-summary').textContent='⚠️ Run agents first to generate reports';}
92-
}
93-
function selectAgent(name){document.querySelectorAll('.card').forEach(c=>c.classList.remove('active'));document.querySelector(`[data-agent="${name}"]`)?.classList.add('active');document.getElementById('studio-agent').value=name;}
94-
// Prompt execution
95-
document.getElementById('studio-run').onclick=async()=>{
96-
const agent=document.getElementById('studio-agent').value,prompt=document.getElementById('studio-prompt').value,out=document.getElementById('studio-output');
97-
if(!agent||!prompt){out.textContent='⚠️ Select agent and enter prompt';return;}
98-
out.textContent='🔄 Generating...';
99-
try{const res=await fetch('/api/agent',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({agent,prompt})});if(res.ok){const r=await res.json();out.textContent=r.output||JSON.stringify(r,null,2);}else{out.textContent=`✅ [Simulated] ${agent} processed:\n"${prompt}"\n\n[Backend not connected — agents run locally in Termux]`;} }catch{out.textContent=`✅ [Offline Mode] ${agent} would process:\n"${prompt}"\n\n[Deploy backend for live execution]`;}
100-
};
101-
// Deploy simulation
102-
document.getElementById('deploy-run').onclick=()=>{
103-
const log=document.getElementById('deploy-log'),target=document.getElementById('deploy-target').value;
104-
log.textContent='🔄 Preparing build...';
105-
setTimeout(()=>log.textContent+=`\n✅ Build completed`,800);
106-
setTimeout(()=>log.textContent+=`\n🌐 Deploying to ${target}...`,1600);
107-
setTimeout(()=>{const url=target==='vercel'?'https://your-project.vercel.app':target==='github'?'https://username.github.io/repo':'./export';log.textContent+=`\n✨ Deployed! Visit: ${url}\n\n[Simulation — wire to your deploy script for real execution]`},2400);
108-
};
109-
// Repo tree (simulated)
110-
document.getElementById('repo-tree').textContent=`[Simulated repo tree]\n• VeRseD_Ai/\n ├─ tasks/ (25 agent scripts)\n ├─ agents/ (export utilities)\n ├─ public/ (static frontend)\n └─ reports/ (JSON outputs)\n\n[Full scan requires backend integration]`;
111-
// Init
112-
document.addEventListener('DOMContentLoaded',loadAgents);
113-
</script></body></html>
72+
// CONFIGURATION
73+
const API_URL = "https://c25-sovereign-ad-serve.vercel.app";
74+
let userTier = "PUBLIC";
75+
76+
// 1. NDA GATE LOGIC
77+
function unlockConsole() {
78+
userTier = "NDA_SIGNED";
79+
document.getElementById('nda-gate').classList.add('hidden');
80+
loadAgents();
81+
serveAd("Entry");
82+
}
83+
84+
// 2. FETCH AGENTS FROM FASTAPI (With Fallback)
85+
async function loadAgents() {
86+
const grid = document.getElementById('agent-grid');
87+
try {
88+
const response = await fetch(`${API_URL}/api/v1/store/products`);
89+
const data = await response.json().catch(() => null);
90+
91+
const agents = data ? data.map(p => ({name: p.name, role: "Module Owner", status: "Active"})) : [
92+
{ name: "Agent 01: Architect", role: "System Design", status: "Online" },
93+
{ name: "Agent 02: Sentinel", role: "Security & Trust Ops", status: "Online" },
94+
{ name: "Agent 03: Merchant", role: "Biometric Payments", status: "Online" },
95+
{ name: "Agent 04: Europa", role: "Data Ingest", status: "Scraping" },
96+
{ name: "Agent 05: Mars", role: "XR Spatial", status: "Idle" },
97+
{ name: "Agent 06: Jupiter", role: "Orchestration", status: "Running" },
98+
{ name: "Agent 07: Venus", role: "Creative Gen", status: "Generating" }
99+
];
100+
101+
grid.innerHTML = '';
102+
agents.forEach((agent, index) => {
103+
const card = document.createElement('div');
104+
card.className = 'card';
105+
card.dataset.index = index;
106+
card.innerHTML = `
107+
<h3>${agent.name}</h3>
108+
<div class="status">Role: ${agent.role} | Status: ${agent.status}</div>
109+
<input type="text" class="prompt-box" placeholder="Ask Agent ${index+1}..." onkeydown="handlePrompt(event, '${agent.name}', this, ${index})">
110+
<div class="response" id="resp-${index}"></div>
111+
`;
112+
grid.appendChild(card);
113+
});
114+
} catch (err) {
115+
grid.innerHTML = '<div class="card" style="border-color:red"><h3>Backend Connection Pending</h3><p>Falling back to simulated mode for demo.</p></div>';
116+
}
117+
}
118+
119+
// 3. HANDLE PROMPT & AD-SERVE TRIGGER
120+
async function handlePrompt(e, agentName, inputElem, index) {
121+
if (e.key === 'Enter' && inputElem.value.trim() !== "") {
122+
const prompt = inputElem.value;
123+
const respDiv = document.getElementById(`resp-${index}`);
124+
respDiv.innerText = "Thinking...";
125+
inputElem.disabled = true;
126+
127+
serveAd(`Prompt:${agentName}`);
128+
129+
try {
130+
const res = await fetch(`${API_URL}/api/v1/agents/query`, {
131+
method: 'POST',
132+
headers: {'Content-Type': 'application/json'},
133+
body: JSON.stringify({ prompt: prompt })
134+
});
135+
const data = await res.json();
136+
respDiv.innerText = data.response || "No response from backend.";
137+
} catch (err) {
138+
setTimeout(() => {
139+
respDiv.innerText = `[${agentName}]: Received "${prompt}". (Backend pending push - Simulated Response)`;
140+
}, 1000);
141+
} finally {
142+
inputElem.disabled = false;
143+
inputElem.value = "";
144+
}
145+
}
146+
}
147+
148+
// 4. AD-SERVE INTEGRATION
149+
async function serveAd(context) {
150+
try {
151+
const res = await fetch(`${API_URL}/api/v1/serve-ad`, {
152+
method: 'POST',
153+
headers: {'Content-Type': 'application/json'},
154+
body: JSON.stringify({ context: context, user_tier: userTier, module_source: 'CommandConsole' })
155+
});
156+
const ad = await res.json();
157+
const banner = document.getElementById('ad-banner');
158+
banner.style.display = 'block';
159+
banner.innerText = ` SOVEREIGN AD: ${ad.content} (Revenue Share: ${ad.revenue_share})`;
160+
} catch (err) {
161+
console.log("Ad-Serve offline, using fallback");
162+
}
163+
}
164+
</script>
165+
</body>
166+
</html>

0 commit comments

Comments
 (0)