| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>🤖 AI-Robotic Orchestrator by A.P.PATHUm LAKMAL</title> |
| <style> |
| |
| :root { |
| --bg-dark: #0a0f14; |
| --bg-panel: #141a20; |
| --neon-green: #00ffaa; |
| --neon-blue: #00d4ff; |
| --neon-red: #ff3366; |
| --text-main: #e0e6ed; |
| --text-muted: #7a8b9e; |
| --border-glow: rgba(0, 255, 170, 0.2); |
| } |
| |
| * { box-sizing: border-box; } |
| |
| body { |
| font-family: 'Segoe UI', 'Courier New', monospace, sans-serif; |
| background-color: var(--bg-dark); |
| color: var(--text-main); |
| margin: 0; |
| padding: 20px; |
| display: flex; |
| justify-content: center; |
| background-image: |
| linear-gradient(rgba(0, 255, 170, 0.03) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(0, 255, 170, 0.03) 1px, transparent 1px); |
| background-size: 40px 40px; |
| } |
| |
| .container { |
| max-width: 1100px; |
| width: 100%; |
| background: var(--bg-panel); |
| border: 1px solid var(--border-glow); |
| border-radius: 16px; |
| padding: 30px; |
| box-shadow: 0 0 30px rgba(0, 255, 170, 0.05); |
| position: relative; |
| } |
| |
| |
| h1 { |
| text-align: center; |
| color: var(--neon-green); |
| text-shadow: 0 0 15px rgba(0, 255, 170, 0.4); |
| margin-top: 0; |
| margin-bottom: 5px; |
| letter-spacing: 2px; |
| } |
| .subtitle { |
| text-align: center; |
| color: var(--text-muted); |
| margin-top: -5px; |
| margin-bottom: 25px; |
| font-size: 0.9rem; |
| border-bottom: 1px solid #2a3540; |
| padding-bottom: 15px; |
| } |
| |
| |
| .robot-status-panel { |
| display: flex; |
| justify-content: space-between; |
| background: #0d1219; |
| border: 1px solid #2a3540; |
| border-radius: 8px; |
| padding: 15px 20px; |
| margin-bottom: 25px; |
| flex-wrap: wrap; |
| gap: 10px; |
| } |
| .stat-item { display: flex; flex-direction: column; } |
| .stat-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px;} |
| .stat-value { font-weight: bold; font-size: 1.1rem; font-family: 'Courier New', monospace; } |
| .blink { animation: blinker 1.5s linear infinite; } |
| |
| @keyframes blinker { 50% { opacity: 0.3; } } |
| |
| |
| .server-grid { display: flex; justify-content: space-between; gap: 15px; flex-wrap: wrap; margin-bottom: 25px; } |
| .server-card { |
| flex: 1; min-width: 180px; |
| background: #11181f; |
| border: 1px solid #2a3540; |
| border-radius: 10px; |
| padding: 20px 15px; |
| text-align: center; |
| transition: all 0.3s ease; |
| } |
| .server-card:hover { border-color: var(--text-muted); transform: translateY(-2px); } |
| |
| .server-card h3 { margin: 0 0 15px 0; color: var(--neon-blue); } |
| |
| |
| .status-badge { |
| display: inline-block; padding: 6px 16px; border-radius: 20px; font-size: 0.8rem; |
| font-weight: bold; text-transform: uppercase; letter-spacing: 1px; |
| background: #2a3540; color: var(--text-muted); |
| } |
| .status-primary { background: rgba(0, 255, 170, 0.2); color: var(--neon-green); border: 1px solid var(--neon-green); box-shadow: 0 0 10px rgba(0,255,170,0.1); } |
| .status-secondary { background: rgba(0, 212, 255, 0.1); color: var(--neon-blue); border: 1px solid var(--neon-blue); } |
| .status-excluded { background: rgba(255, 51, 102, 0.1); color: var(--neon-red); border: 1px solid var(--neon-red); } |
| |
| .db-box { margin-top: 12px; font-size: 0.8rem; background: #0d1219; padding: 6px; border-radius: 4px; border-left: 2px solid #2a3540; } |
| .db-box.ha { border-left-color: var(--neon-green); } |
| |
| |
| .ai-control-panel { |
| background: rgba(0, 0, 0, 0.4); |
| border: 1px solid #2a3540; |
| border-radius: 10px; |
| padding: 20px; |
| margin-bottom: 25px; |
| } |
| .ai-control-panel h2 { margin-top: 0; color: var(--neon-blue); font-size: 1.1rem; border-bottom: 1px solid #2a3540; padding-bottom: 10px; } |
| |
| .control-group { display: flex; gap: 10px; flex-wrap: wrap; margin: 15px 0; } |
| |
| |
| button { |
| background: transparent; |
| color: var(--text-main); |
| border: 1px solid #2a3540; |
| padding: 10px 20px; |
| border-radius: 6px; |
| cursor: pointer; |
| font-weight: 600; |
| font-family: inherit; |
| transition: all 0.2s ease; |
| } |
| button:hover { background: #2a3540; } |
| button.primary-act { border-color: var(--neon-green); color: var(--neon-green); } |
| button.primary-act:hover { box-shadow: 0 0 15px rgba(0,255,170,0.2); background: rgba(0,255,170,0.1); } |
| |
| button.danger { border-color: var(--neon-red); color: var(--neon-red); } |
| button.danger:hover { background: rgba(255,51,102,0.1); box-shadow: 0 0 15px rgba(255,51,102,0.2); } |
| |
| button:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none !important; } |
| |
| |
| .ai-terminal { |
| background: #0a0b0d; |
| border: 1px solid #2a3540; |
| border-radius: 8px; |
| padding: 5px; |
| } |
| .terminal-header { |
| background: #141a20; |
| padding: 8px 15px; |
| border-bottom: 1px solid #2a3540; |
| color: var(--text-muted); |
| font-size: 0.8rem; |
| display: flex; |
| justify-content: space-between; |
| border-radius: 8px 8px 0 0; |
| } |
| .terminal-window { |
| padding: 15px; |
| height: 160px; |
| overflow-y: auto; |
| font-family: 'Courier New', monospace; |
| font-size: 0.9rem; |
| color: #bbb; |
| } |
| |
| .terminal-window::-webkit-scrollbar { width: 5px; } |
| .terminal-window::-webkit-scrollbar-track { background: #0a0b0d; } |
| .terminal-window::-webkit-scrollbar-thumb { background: #2a3540; border-radius: 10px; } |
| |
| .log-line { margin-bottom: 3px; } |
| .log-error { color: var(--neon-red); } |
| .log-success { color: var(--neon-green); } |
| .log-info { color: var(--neon-blue); } |
| .log-warn { color: #ffaa00; } |
| |
| |
| .social-footer { margin-top: 30px; padding-top: 20px; border-top: 1px solid #2a3540; text-align: center; } |
| .social-footer h3 { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 15px; font-weight: 400; letter-spacing: 1px;} |
| .social-links { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; } |
| .social-btn { |
| display: inline-flex; align-items: center; gap: 8px; |
| background: transparent; border: 1px solid #2a3540; |
| padding: 8px 18px; border-radius: 30px; |
| text-decoration: none; color: var(--text-muted); |
| font-size: 0.9rem; transition: all 0.2s; |
| } |
| .social-btn:hover { background: #2a3540; border-color: var(--neon-blue); color: white; } |
| |
| |
| .creator-credit { |
| margin-top: 20px; |
| font-size: 0.9rem; |
| color: #555; |
| letter-spacing: 1px; |
| border-top: 1px solid #1a232c; |
| padding-top: 15px; |
| } |
| .creator-credit strong { color: var(--neon-blue); } |
| </style> |
| </head> |
| <body> |
|
|
| <div class="container"> |
| |
| |
| <h1>🤖 AI-Robotic Orchestrator</h1> |
| <div class="subtitle">AG1-Sample :: Autonomous Scheduler Unit</div> |
|
|
| |
| <div class="robot-status-panel"> |
| <div class="stat-item"><span class="stat-label">System Status</span><span class="stat-value blink" style="color: var(--neon-green);">● ACTIVE</span></div> |
| <div class="stat-item"><span class="stat-label">Uptime</span><span class="stat-value" id="robotUptime">00:00:00</span></div> |
| <div class="stat-item"><span class="stat-label">Operational Node</span><span class="stat-value" id="currentPrimaryDisplay" style="color: var(--neon-green);">Server1</span></div> |
| <div class="stat-item"><span class="stat-label">CPU Load</span><span class="stat-value" id="cpuLoad">12%</span></div> |
| </div> |
|
|
| |
| <div class="server-grid" id="serverGrid"> |
| |
| </div> |
|
|
| |
| <div class="ai-control-panel"> |
| <h2>⚡ Command Center [v2.0]</h2> |
| |
| <div style="background: #0d1219; padding: 8px 15px; border-radius: 4px; margin-bottom: 15px; border-left: 3px solid #ffaa00;"> |
| <strong style="color:#ffaa00;">⚙️ Active Directive:</strong> <span id="customRuleDisplay" style="color: var(--text-main);">No custom rule applied.</span> |
| </div> |
|
|
| <div class="control-group"> |
| <button class="danger" onclick="simulateFailover('Server2')">⚡ Force Failover to [S2]</button> |
| <button class="danger" onclick="simulateFailover('Server3')">⚡ Force Failover to [S3]</button> |
| <button class="primary-act" onclick="resetSimulation()">⟳ Reset Orchestrator</button> |
| </div> |
| <div class="control-group"> |
| <button onclick="simulateJobRun('Server1')">Run Job on Node 1</button> |
| <button onclick="simulateJobRun('Server2')">Run Job on Node 2</button> |
| <button onclick="simulateJobRun('Server3')">Run Job on Node 3</button> |
| <button style="border-color: #ffaa00; color: #ffaa00;" onclick="triggerCustomLog()">Execute Custom Directive</button> |
| </div> |
| </div> |
|
|
| |
| <div class="ai-terminal"> |
| <div class="terminal-header"> |
| <span>📟 ROBOT TERMINAL LOG</span> |
| <span>Operator: A.P.PATHUm LAKMAL | PID: 8372</span> |
| </div> |
| <div class="terminal-window" id="logFeed"> |
| <div class="log-line log-info">[INIT] AI-Robotic Orchestrator v2.0 boot sequence complete.</div> |
| <div class="log-line log-info">[INIT] Operator validated: A.P.PATHUm LAKMAL.</div> |
| <div class="log-line log-success">[INIT] Handshake successful. Waiting for directives.</div> |
| </div> |
| </div> |
|
|
| |
| <div class="social-footer"> |
| <h3>CONNECT WITH THE DEVELOPER</h3> |
| <div class="social-links"> |
| <a href="https://www.facebook.com/YOUR_USERNAME" target="_blank" class="social-btn">📘 Facebook</a> |
| <a href="https://github.com/YOUR_USERNAME" target="_blank" class="social-btn">🐙 GitHub</a> |
| <a href="https://huggingface.co/YOUR_USERNAME" target="_blank" class="social-btn">🤗 Hugging Face</a> |
| <a href="https://wa.me/YOUR_PHONE_NUMBER" target="_blank" class="social-btn">💬 WhatsApp</a> |
| </div> |
| |
| |
| <div class="creator-credit"> |
| Created by <strong>A.P.PATHUm LAKMAL</strong> © 2026 |
| </div> |
| </div> |
|
|
| </div> |
|
|
| <script> |
| |
| let state = { |
| servers: { |
| 'Server1': { role: 'Primary', canWrite: true, cssClass: 'status-primary' }, |
| 'Server2': { role: 'Secondary', canWrite: false, cssClass: 'status-secondary' }, |
| 'Server3': { role: 'Secondary', canWrite: false, cssClass: 'status-excluded' } |
| } |
| }; |
| |
| |
| let myCustomRuleName = "My Policy: Server3 is forbidden for writes."; |
| let myCustomLogMessage = "🛡️ EXECUTING CUSTOM DIRECTIVE: Verified Server3 is in Excluded mode. Audit passed."; |
| document.getElementById('customRuleDisplay').textContent = myCustomRuleName; |
| |
| |
| const logFeed = document.getElementById('logFeed'); |
| const uptimeDisplay = document.getElementById('robotUptime'); |
| |
| |
| let seconds = 0; |
| setInterval(() => { |
| seconds++; |
| const hrs = String(Math.floor(seconds / 3600)).padStart(2, '0'); |
| const mins = String(Math.floor((seconds % 3600) / 60)).padStart(2, '0'); |
| const secs = String(seconds % 60).padStart(2, '0'); |
| uptimeDisplay.textContent = `${hrs}:${mins}:${secs}`; |
| |
| |
| document.getElementById('cpuLoad').textContent = Math.floor(Math.random() * 30 + 5) + '%'; |
| }, 1000); |
| |
| |
| setInterval(() => { |
| const logs = [ |
| "[SCAN] Performing routine health check on Availability Group...", |
| "[SCAN] Replica sync status: OK.", |
| "[INFO] Node load balanced across Secondary replicas.", |
| "[DEBUG] AutoUpsert job dormant on current Primary." |
| ]; |
| if(Math.random() > 0.7) { |
| const randomLog = logs[Math.floor(Math.random() * logs.length)]; |
| addLog(randomLog, 'info'); |
| } |
| }, 8000); |
| |
| |
| function addLog(message, type = 'info') { |
| const entry = document.createElement('div'); |
| entry.className = `log-line log-${type}`; |
| const timestamp = new Date().toLocaleTimeString(); |
| entry.innerHTML = `<span style="color:#555;">[${timestamp}]</span> ${message}`; |
| logFeed.appendChild(entry); |
| logFeed.scrollTop = logFeed.scrollHeight; |
| } |
| |
| function renderUI() { |
| const grid = document.getElementById('serverGrid'); |
| const primaryDisplay = document.getElementById('currentPrimaryDisplay'); |
| let html = ''; |
| |
| let primaryName = ''; |
| for (const [name, data] of Object.entries(state.servers)) { |
| if (data.role === 'Primary') primaryName = name; |
| |
| let jobBtnHtml = (data.role === 'Primary') |
| ? `<button class="primary-act" style="padding:5px 15px; font-size:0.8rem; margin-top:10px;" onclick="simulateJobRun('${name}')">Run AutoUpsert</button>` |
| : `<button disabled style="padding:5px 15px; font-size:0.8rem; margin-top:10px;">[BLOCKED]</button>`; |
| |
| html += ` |
| <div class="server-card"> |
| <h3>${name}</h3> |
| <div class="status-badge ${data.cssClass}">${data.role}</div> |
| <div class="db-box ha"><strong>agDatabase:</strong> ${data.canWrite ? '<span style="color:var(--neon-green);">WRITABLE</span>' : '<span style="color:#ff3366;">READ-ONLY</span>'}</div> |
| <div class="db-box" style="border-left-color: #ffaa00;"><strong>Utility DB:</strong> Local</div> |
| ${jobBtnHtml} |
| </div> |
| `; |
| } |
| grid.innerHTML = html; |
| primaryDisplay.textContent = primaryName; |
| } |
| |
| function simulateFailover(targetServer) { |
| if (state.servers[targetServer].role === 'Primary') { |
| addLog(`[ABORT] Failover to ${targetServer} rejected. Node is already Active Primary.`, 'error'); |
| return; |
| } |
| |
| for (const key in state.servers) { |
| state.servers[key].role = 'Secondary'; |
| state.servers[key].canWrite = false; |
| state.servers[key].cssClass = (key === 'Server3') ? 'status-excluded' : 'status-secondary'; |
| } |
| |
| state.servers[targetServer].role = 'Primary'; |
| state.servers[targetServer].canWrite = true; |
| state.servers[targetServer].cssClass = 'status-primary'; |
| |
| addLog(`⚠️ [FAILOVER] TARGET ACQUIRED! ${targetServer} is now the Active Primary.`, 'warn'); |
| addLog(`[INFO] agDatabase write permissions transferred to ${targetServer}.`, 'info'); |
| |
| if(targetServer === 'Server3') { |
| addLog(`[NOTE] Server3 hosting the Scheduler. AutoUpsert deploying to this node.`, 'info'); |
| } |
| renderUI(); |
| } |
| |
| function simulateJobRun(serverName) { |
| const server = state.servers[serverName]; |
| addLog(`📝 [EXEC] Attempting job execution on ${serverName}...`, 'info'); |
| |
| if (server.role === 'Primary') { |
| addLog(`✅ [SUCCESS] AutoUpsert task executed on ${serverName}.`, 'success'); |
| addLog(` > Task table read successfully from agDatabase.`, 'success'); |
| } |
| else if (server.role === 'Secondary' && serverName === 'Server2') { |
| addLog(`⚠️ [BLOCKED] Job schedule triggered on ${serverName}.`, 'warn'); |
| addLog(` > Replica is Secondary. tsqlCommand obfuscated and aborted.`, 'error'); |
| } |
| else if (server.role === 'Secondary' && serverName === 'Server3') { |
| addLog(`⛔ [FAILED] ${serverName} is excluded from this Availability Group.`, 'error'); |
| addLog(` > No AutoUpsert job exists here.`, 'error'); |
| } |
| } |
| |
| function resetSimulation() { |
| state.servers = { |
| 'Server1': { role: 'Primary', canWrite: true, cssClass: 'status-primary' }, |
| 'Server2': { role: 'Secondary', canWrite: false, cssClass: 'status-secondary' }, |
| 'Server3': { role: 'Secondary', canWrite: false, cssClass: 'status-excluded' } |
| }; |
| renderUI(); |
| addLog(`🔄 [RESET] Orchestrator restored to default state. Server1 is Primary.`, 'warn'); |
| } |
| |
| function triggerCustomLog() { |
| addLog(myCustomLogMessage, 'success'); |
| addLog(`[AUDIT] Custom Rule checked: ${myCustomRuleName}`, 'info'); |
| } |
| |
| |
| renderUI(); |
| addLog("[READY] System online. A.P.PATHUm LAKMAL awaiting commands.", 'success'); |
| |
| </script> |
| </body> |
| </html> |
