As a Senior World-Class AI Architect, Developer/Designer/Artist, and Frontend Engineer, I will implement the 'Operation Control' dashboard card with advanced controls for manually advancing, pausing, or resetting the attack simulation. The color palette will favor red, green, gray, and occasional gold, while avoiding pink, purple, and blue. The dark mode will be super dark with a sophisticated theme, incorporating sacred geometry patterns like the Flower of Life and Metatron’s Cube as subtle, low-opacity overlays and in animations. System instructions will be enhanced for clarity and depth, and an AI Companion assistant with customizable system instructions will be embedded. Additionally, NLP will be integrated for hands-free operation, ensuring seamless and efficient interaction.
Browse files- README.md +7 -4
- components/navbar.js +100 -0
- components/sidebar.js +136 -0
- index.html +286 -19
- script.js +193 -0
- style.css +62 -18
README.md
CHANGED
|
@@ -1,10 +1,13 @@
|
|
| 1 |
---
|
| 2 |
-
title: Operation Void Control
|
| 3 |
-
emoji: 🌖
|
| 4 |
colorFrom: green
|
| 5 |
-
colorTo:
|
|
|
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: Operation Void Control 🕉️
|
|
|
|
| 3 |
colorFrom: green
|
| 4 |
+
colorTo: purple
|
| 5 |
+
emoji: 🐳
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite-v3
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# Welcome to your new DeepSite project!
|
| 13 |
+
This project was created with [DeepSite](https://huggingface.co/deepsite).
|
components/navbar.js
ADDED
|
@@ -0,0 +1,100 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
class CustomNavbar extends HTMLElement {
|
| 2 |
+
connectedCallback() {
|
| 3 |
+
this.attachShadow({ mode: 'open' });
|
| 4 |
+
this.shadowRoot.innerHTML = `
|
| 5 |
+
<style>
|
| 6 |
+
:host {
|
| 7 |
+
display: block;
|
| 8 |
+
background-color: #050505;
|
| 9 |
+
border-bottom: 1px solid #1f2937;
|
| 10 |
+
height: 64px;
|
| 11 |
+
}
|
| 12 |
+
.container {
|
| 13 |
+
max-width: 100%;
|
| 14 |
+
height: 100%;
|
| 15 |
+
display: flex;
|
| 16 |
+
align-items: center;
|
| 17 |
+
justify-content: space-between;
|
| 18 |
+
padding: 0 1.5rem;
|
| 19 |
+
}
|
| 20 |
+
.brand {
|
| 21 |
+
font-family: 'Courier New', monospace;
|
| 22 |
+
font-weight: bold;
|
| 23 |
+
font-size: 1.25rem;
|
| 24 |
+
color: #fff;
|
| 25 |
+
display: flex;
|
| 26 |
+
align-items: center;
|
| 27 |
+
gap: 0.5rem;
|
| 28 |
+
text-decoration: none;
|
| 29 |
+
letter-spacing: 2px;
|
| 30 |
+
}
|
| 31 |
+
.brand span {
|
| 32 |
+
color: #22c55e;
|
| 33 |
+
}
|
| 34 |
+
.actions {
|
| 35 |
+
display: flex;
|
| 36 |
+
align-items: center;
|
| 37 |
+
gap: 1.5rem;
|
| 38 |
+
}
|
| 39 |
+
.icon-btn {
|
| 40 |
+
background: none;
|
| 41 |
+
border: none;
|
| 42 |
+
cursor: pointer;
|
| 43 |
+
color: #9ca3af;
|
| 44 |
+
transition: color 0.2s;
|
| 45 |
+
display: flex;
|
| 46 |
+
align-items: center;
|
| 47 |
+
}
|
| 48 |
+
.icon-btn:hover {
|
| 49 |
+
color: #fff;
|
| 50 |
+
}
|
| 51 |
+
.user-profile {
|
| 52 |
+
display: flex;
|
| 53 |
+
align-items: center;
|
| 54 |
+
gap: 0.75rem;
|
| 55 |
+
border-left: 1px solid #1f2937;
|
| 56 |
+
padding-left: 1.5rem;
|
| 57 |
+
}
|
| 58 |
+
.avatar {
|
| 59 |
+
width: 32px;
|
| 60 |
+
height: 32px;
|
| 61 |
+
border-radius: 50%;
|
| 62 |
+
border: 1px solid #374151;
|
| 63 |
+
object-fit: cover;
|
| 64 |
+
}
|
| 65 |
+
.user-info {
|
| 66 |
+
display: flex;
|
| 67 |
+
flex-direction: column;
|
| 68 |
+
}
|
| 69 |
+
.user-name {
|
| 70 |
+
font-size: 0.875rem;
|
| 71 |
+
font-weight: 500;
|
| 72 |
+
color: #fff;
|
| 73 |
+
}
|
| 74 |
+
.user-role {
|
| 75 |
+
font-size: 0.75rem;
|
| 76 |
+
color: #6b7280;
|
| 77 |
+
}
|
| 78 |
+
</style>
|
| 79 |
+
<div class="container">
|
| 80 |
+
<a href="#" class="brand">
|
| 81 |
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>
|
| 82 |
+
CLAWDBOT<span>C2</span>
|
| 83 |
+
</a>
|
| 84 |
+
<div class="actions">
|
| 85 |
+
<button class="icon-btn">
|
| 86 |
+
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
|
| 87 |
+
</button>
|
| 88 |
+
<div class="user-profile">
|
| 89 |
+
<div class="user-info">
|
| 90 |
+
<span class="user-name">Cmdr. Shepard</span>
|
| 91 |
+
<span class="user-role">Level 4 Access</span>
|
| 92 |
+
</div>
|
| 93 |
+
<img src="http://static.photos/people/64x64/42" alt="User" class="avatar">
|
| 94 |
+
</div>
|
| 95 |
+
</div>
|
| 96 |
+
</div>
|
| 97 |
+
`;
|
| 98 |
+
}
|
| 99 |
+
}
|
| 100 |
+
customElements.define('custom-navbar', CustomNavbar);
|
components/sidebar.js
ADDED
|
@@ -0,0 +1,136 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
class CustomSidebar extends HTMLElement {
|
| 2 |
+
connectedCallback() {
|
| 3 |
+
this.attachShadow({ mode: 'open' });
|
| 4 |
+
this.shadowRoot.innerHTML = `
|
| 5 |
+
<style>
|
| 6 |
+
:host {
|
| 7 |
+
display: none; /* Hidden on mobile by default */
|
| 8 |
+
width: 260px;
|
| 9 |
+
background-color: #050505;
|
| 10 |
+
border-right: 1px solid #1f2937;
|
| 11 |
+
height: 100%;
|
| 12 |
+
flex-shrink: 0;
|
| 13 |
+
}
|
| 14 |
+
@media (min-width: 1024px) {
|
| 15 |
+
:host {
|
| 16 |
+
display: block;
|
| 17 |
+
}
|
| 18 |
+
}
|
| 19 |
+
.nav-content {
|
| 20 |
+
display: flex;
|
| 21 |
+
flex-direction: column;
|
| 22 |
+
height: 100%;
|
| 23 |
+
padding: 1.5rem 1rem;
|
| 24 |
+
}
|
| 25 |
+
.nav-label {
|
| 26 |
+
font-size: 0.75rem;
|
| 27 |
+
text-transform: uppercase;
|
| 28 |
+
letter-spacing: 0.1em;
|
| 29 |
+
color: #4b5563;
|
| 30 |
+
margin-bottom: 1rem;
|
| 31 |
+
padding-left: 0.75rem;
|
| 32 |
+
font-weight: 600;
|
| 33 |
+
}
|
| 34 |
+
.nav-list {
|
| 35 |
+
list-style: none;
|
| 36 |
+
padding: 0;
|
| 37 |
+
margin: 0;
|
| 38 |
+
}
|
| 39 |
+
.nav-item {
|
| 40 |
+
margin-bottom: 0.25rem;
|
| 41 |
+
}
|
| 42 |
+
.nav-link {
|
| 43 |
+
display: flex;
|
| 44 |
+
align-items: center;
|
| 45 |
+
gap: 0.75rem;
|
| 46 |
+
padding: 0.75rem;
|
| 47 |
+
border-radius: 0.5rem;
|
| 48 |
+
text-decoration: none;
|
| 49 |
+
color: #9ca3af;
|
| 50 |
+
font-size: 0.9rem;
|
| 51 |
+
transition: all 0.2s;
|
| 52 |
+
border: 1px solid transparent;
|
| 53 |
+
}
|
| 54 |
+
.nav-link:hover {
|
| 55 |
+
background-color: #111827;
|
| 56 |
+
color: #fff;
|
| 57 |
+
}
|
| 58 |
+
.nav-link.active {
|
| 59 |
+
background-color: rgba(34, 197, 94, 0.1);
|
| 60 |
+
color: #22c55e;
|
| 61 |
+
border-color: rgba(34, 197, 94, 0.2);
|
| 62 |
+
}
|
| 63 |
+
.nav-link svg {
|
| 64 |
+
width: 18px;
|
| 65 |
+
height: 18px;
|
| 66 |
+
}
|
| 67 |
+
.spacer {
|
| 68 |
+
flex-grow: 1;
|
| 69 |
+
}
|
| 70 |
+
.logout-btn {
|
| 71 |
+
display: flex;
|
| 72 |
+
align-items: center;
|
| 73 |
+
gap: 0.75rem;
|
| 74 |
+
padding: 0.75rem;
|
| 75 |
+
color: #ef4444;
|
| 76 |
+
cursor: pointer;
|
| 77 |
+
transition: opacity 0.2s;
|
| 78 |
+
text-decoration: none;
|
| 79 |
+
font-size: 0.9rem;
|
| 80 |
+
}
|
| 81 |
+
.logout-btn:hover {
|
| 82 |
+
opacity: 0.8;
|
| 83 |
+
}
|
| 84 |
+
</style>
|
| 85 |
+
<div class="nav-content">
|
| 86 |
+
<div>
|
| 87 |
+
<div class="nav-label">Main</div>
|
| 88 |
+
<ul class="nav-list">
|
| 89 |
+
<li class="nav-item">
|
| 90 |
+
<a href="#" class="nav-link active">
|
| 91 |
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>
|
| 92 |
+
Overview
|
| 93 |
+
</a>
|
| 94 |
+
</li>
|
| 95 |
+
<li class="nav-item">
|
| 96 |
+
<a href="#" class="nav-link">
|
| 97 |
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>
|
| 98 |
+
Agents
|
| 99 |
+
</a>
|
| 100 |
+
</li>
|
| 101 |
+
<li class="nav-item">
|
| 102 |
+
<a href="#" class="nav-link">
|
| 103 |
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
|
| 104 |
+
Tasks
|
| 105 |
+
</a>
|
| 106 |
+
</li>
|
| 107 |
+
</ul>
|
| 108 |
+
</div>
|
| 109 |
+
|
| 110 |
+
<div>
|
| 111 |
+
<div class="nav-label">System</div>
|
| 112 |
+
<ul class="nav-list">
|
| 113 |
+
<li class="nav-item">
|
| 114 |
+
<a href="#" class="nav-link">
|
| 115 |
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
|
| 116 |
+
AI Assistant
|
| 117 |
+
</a>
|
| 118 |
+
</li>
|
| 119 |
+
<li class="nav-item">
|
| 120 |
+
<a href="#" class="nav-link">
|
| 121 |
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
|
| 122 |
+
Settings
|
| 123 |
+
</a>
|
| 124 |
+
</li>
|
| 125 |
+
</ul>
|
| 126 |
+
</div>
|
| 127 |
+
|
| 128 |
+
<a href="#" class="logout-btn">
|
| 129 |
+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
|
| 130 |
+
Logout
|
| 131 |
+
</a>
|
| 132 |
+
</div>
|
| 133 |
+
`;
|
| 134 |
+
}
|
| 135 |
+
}
|
| 136 |
+
customElements.define('custom-sidebar', CustomSidebar);
|
index.html
CHANGED
|
@@ -1,19 +1,286 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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>Operation Void Control | Clawdbot C2</title>
|
| 7 |
+
<link rel="stylesheet" href="style.css">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 11 |
+
<script>
|
| 12 |
+
tailwind.config = {
|
| 13 |
+
theme: {
|
| 14 |
+
extend: {
|
| 15 |
+
colors: {
|
| 16 |
+
void: {
|
| 17 |
+
900: '#050505',
|
| 18 |
+
800: '#0a0a0a',
|
| 19 |
+
700: '#121212',
|
| 20 |
+
},
|
| 21 |
+
neon: {
|
| 22 |
+
green: '#22c55e',
|
| 23 |
+
orange: '#f97316',
|
| 24 |
+
gold: '#ffd700',
|
| 25 |
+
red: '#ef4444',
|
| 26 |
+
}
|
| 27 |
+
},
|
| 28 |
+
fontFamily: {
|
| 29 |
+
mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', "Liberation Mono", "Courier New", 'monospace'],
|
| 30 |
+
}
|
| 31 |
+
}
|
| 32 |
+
}
|
| 33 |
+
}
|
| 34 |
+
</script>
|
| 35 |
+
</head>
|
| 36 |
+
<body class="bg-void-900 text-gray-300 font-sans antialiased overflow-hidden h-screen flex flex-col relative">
|
| 37 |
+
|
| 38 |
+
<!-- Sacred Geometry Background Layer -->
|
| 39 |
+
<div class="absolute inset-0 z-0 pointer-events-none opacity-[0.03] pattern-metatron"></div>
|
| 40 |
+
<div class="absolute inset-0 z-0 pointer-events-none opacity-[0.05] pattern-flower"></div>
|
| 41 |
+
|
| 42 |
+
<!-- Top Navigation -->
|
| 43 |
+
<custom-navbar></custom-navbar>
|
| 44 |
+
|
| 45 |
+
<div class="flex flex-1 overflow-hidden relative z-10">
|
| 46 |
+
<!-- Sidebar -->
|
| 47 |
+
<custom-sidebar></custom-sidebar>
|
| 48 |
+
|
| 49 |
+
<!-- Main Content -->
|
| 50 |
+
<main class="flex-1 overflow-y-auto p-6 md:p-8 scroll-smooth">
|
| 51 |
+
|
| 52 |
+
<header class="mb-8 border-b border-gray-800 pb-4 flex justify-between items-end">
|
| 53 |
+
<div>
|
| 54 |
+
<h1 class="text-3xl font-bold text-white tracking-wider uppercase font-mono">Tactical Dashboard</h1>
|
| 55 |
+
<p class="text-sm text-neon-green mt-1 flex items-center gap-2">
|
| 56 |
+
<span class="w-2 h-2 rounded-full bg-neon-green animate-pulse"></span>
|
| 57 |
+
SYSTEM ONLINE // CLAWDBOT v3.2.0
|
| 58 |
+
</p>
|
| 59 |
+
</div>
|
| 60 |
+
<div class="hidden md:block text-right">
|
| 61 |
+
<div class="text-xs text-gray-500 uppercase">Last Sync</div>
|
| 62 |
+
<div class="text-sm font-mono text-gray-300" id="clock">00:00:00</div>
|
| 63 |
+
</div>
|
| 64 |
+
</header>
|
| 65 |
+
|
| 66 |
+
<!-- Stats Row -->
|
| 67 |
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
| 68 |
+
<!-- Stat Card 1 -->
|
| 69 |
+
<div class="bg-void-800 border border-gray-800 rounded-lg p-5 shadow-lg relative overflow-hidden group hover:border-neon-green transition-colors">
|
| 70 |
+
<div class="absolute right-2 top-2 opacity-10 group-hover:opacity-20 transition-opacity">
|
| 71 |
+
<i data-feather="cpu" class="w-12 h-12 text-neon-green"></i>
|
| 72 |
+
</div>
|
| 73 |
+
<h3 class="text-gray-400 text-xs uppercase font-bold tracking-widest">Active Agents</h3>
|
| 74 |
+
<div class="text-3xl font-bold text-white mt-2 font-mono">42</div>
|
| 75 |
+
<div class="text-xs text-neon-green mt-1 flex items-center">
|
| 76 |
+
<i data-feather="arrow-up" class="w-3 h-3 mr-1"></i> 12% increase
|
| 77 |
+
</div>
|
| 78 |
+
</div>
|
| 79 |
+
|
| 80 |
+
<!-- Stat Card 2 -->
|
| 81 |
+
<div class="bg-void-800 border border-gray-800 rounded-lg p-5 shadow-lg relative overflow-hidden group hover:border-neon-orange transition-colors">
|
| 82 |
+
<div class="absolute right-2 top-2 opacity-10 group-hover:opacity-20 transition-opacity">
|
| 83 |
+
<i data-feather="activity" class="w-12 h-12 text-neon-orange"></i>
|
| 84 |
+
</div>
|
| 85 |
+
<h3 class="text-gray-400 text-xs uppercase font-bold tracking-widest">Pending Tasks</h3>
|
| 86 |
+
<div class="text-3xl font-bold text-white mt-2 font-mono">08</div>
|
| 87 |
+
<div class="text-xs text-neon-orange mt-1">Critical Queue</div>
|
| 88 |
+
</div>
|
| 89 |
+
|
| 90 |
+
<!-- Stat Card 3 -->
|
| 91 |
+
<div class="bg-void-800 border border-gray-800 rounded-lg p-5 shadow-lg relative overflow-hidden group hover:border-neon-gold transition-colors">
|
| 92 |
+
<div class="absolute right-2 top-2 opacity-10 group-hover:opacity-20 transition-opacity">
|
| 93 |
+
<i data-feather="shield" class="w-12 h-12 text-neon-gold"></i>
|
| 94 |
+
</div>
|
| 95 |
+
<h3 class="text-gray-400 text-xs uppercase font-bold tracking-widest">Security Level</h3>
|
| 96 |
+
<div class="text-3xl font-bold text-white mt-2 font-mono">HIGH</div>
|
| 97 |
+
<div class="text-xs text-neon-gold mt-1">Encryption Active</div>
|
| 98 |
+
</div>
|
| 99 |
+
|
| 100 |
+
<!-- Stat Card 4 -->
|
| 101 |
+
<div class="bg-void-800 border border-gray-800 rounded-lg p-5 shadow-lg relative overflow-hidden group hover:border-neon-red transition-colors">
|
| 102 |
+
<div class="absolute right-2 top-2 opacity-10 group-hover:opacity-20 transition-opacity">
|
| 103 |
+
<i data-feather="alert-triangle" class="w-12 h-12 text-neon-red"></i>
|
| 104 |
+
</div>
|
| 105 |
+
<h3 class="text-gray-400 text-xs uppercase font-bold tracking-widest">Threats Blocked</h3>
|
| 106 |
+
<div class="text-3xl font-bold text-white mt-2 font-mono">1,024</div>
|
| 107 |
+
<div class="text-xs text-neon-red mt-1">Last 24h</div>
|
| 108 |
+
</div>
|
| 109 |
+
</div>
|
| 110 |
+
|
| 111 |
+
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
| 112 |
+
|
| 113 |
+
<!-- Operation Control Panel (Feature Request) -->
|
| 114 |
+
<div class="lg:col-span-2 bg-void-800 border border-gray-700 rounded-xl shadow-2xl relative overflow-hidden">
|
| 115 |
+
<div class="absolute top-0 right-0 p-4 opacity-20">
|
| 116 |
+
<i data-feather="crosshair" class="w-24 h-24 text-gray-500"></i>
|
| 117 |
+
</div>
|
| 118 |
+
|
| 119 |
+
<div class="p-6 border-b border-gray-700 bg-gradient-to-r from-void-900 to-void-800">
|
| 120 |
+
<h2 class="text-xl font-bold text-white flex items-center gap-2">
|
| 121 |
+
<i data-feather="settings" class="text-neon-green"></i>
|
| 122 |
+
Operation Control
|
| 123 |
+
</h2>
|
| 124 |
+
<p class="text-gray-400 text-sm mt-1">Manual override for attack simulation and fleet deployment.</p>
|
| 125 |
+
</div>
|
| 126 |
+
|
| 127 |
+
<div class="p-8">
|
| 128 |
+
<!-- Simulation Status -->
|
| 129 |
+
<div class="flex justify-between items-center mb-8">
|
| 130 |
+
<div class="flex flex-col">
|
| 131 |
+
<span class="text-xs text-gray-500 uppercase tracking-wider mb-1">Current State</span>
|
| 132 |
+
<span id="sim-status-text" class="text-2xl font-mono font-bold text-neon-green animate-pulse">IDLE</span>
|
| 133 |
+
</div>
|
| 134 |
+
<div class="text-right">
|
| 135 |
+
<span class="text-xs text-gray-500 uppercase tracking-wider mb-1 block">Runtime</span>
|
| 136 |
+
<span id="sim-timer" class="text-2xl font-mono text-white">00:00:00</span>
|
| 137 |
+
</div>
|
| 138 |
+
</div>
|
| 139 |
+
|
| 140 |
+
<!-- Progress Bar -->
|
| 141 |
+
<div class="w-full bg-gray-900 rounded-full h-2.5 mb-8 border border-gray-700">
|
| 142 |
+
<div id="sim-progress" class="bg-gradient-to-r from-neon-green to-neon-gold h-2.5 rounded-full" style="width: 0%"></div>
|
| 143 |
+
</div>
|
| 144 |
+
|
| 145 |
+
<!-- Controls Grid -->
|
| 146 |
+
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
| 147 |
+
<button id="btn-advance" class="group relative px-6 py-4 bg-void-700 border border-neon-green/30 rounded-lg overflow-hidden hover:border-neon-green transition-all">
|
| 148 |
+
<div class="absolute inset-0 bg-neon-green/5 translate-y-full group-hover:translate-y-0 transition-transform"></div>
|
| 149 |
+
<div class="flex flex-col items-center relative z-10">
|
| 150 |
+
<i data-feather="play" class="w-6 h-6 text-neon-green mb-2 fill-current"></i>
|
| 151 |
+
<span class="text-sm font-bold text-gray-200 group-hover:text-white">ADVANCE</span>
|
| 152 |
+
</div>
|
| 153 |
+
</button>
|
| 154 |
+
|
| 155 |
+
<button id="btn-pause" class="group relative px-6 py-4 bg-void-700 border border-neon-orange/30 rounded-lg overflow-hidden hover:border-neon-orange transition-all">
|
| 156 |
+
<div class="absolute inset-0 bg-neon-orange/5 translate-y-full group-hover:translate-y-0 transition-transform"></div>
|
| 157 |
+
<div class="flex flex-col items-center relative z-10">
|
| 158 |
+
<i data-feather="pause" class="w-6 h-6 text-neon-orange mb-2 fill-current"></i>
|
| 159 |
+
<span class="text-sm font-bold text-gray-200 group-hover:text-white">PAUSE</span>
|
| 160 |
+
</div>
|
| 161 |
+
</button>
|
| 162 |
+
|
| 163 |
+
<button id="btn-reset" class="group relative px-6 py-4 bg-void-700 border border-neon-red/30 rounded-lg overflow-hidden hover:border-neon-red transition-all">
|
| 164 |
+
<div class="absolute inset-0 bg-neon-red/5 translate-y-full group-hover:translate-y-0 transition-transform"></div>
|
| 165 |
+
<div class="flex flex-col items-center relative z-10">
|
| 166 |
+
<i data-feather="rotate-ccw" class="w-6 h-6 text-neon-red mb-2 fill-current"></i>
|
| 167 |
+
<span class="text-sm font-bold text-gray-200 group-hover:text-white">RESET</span>
|
| 168 |
+
</div>
|
| 169 |
+
</button>
|
| 170 |
+
</div>
|
| 171 |
+
|
| 172 |
+
<div class="mt-6 text-center">
|
| 173 |
+
<p class="text-xs text-gray-600 font-mono">COMMAND AUTHORIZATION LEVEL 4 REQUIRED</p>
|
| 174 |
+
</div>
|
| 175 |
+
</div>
|
| 176 |
+
</div>
|
| 177 |
+
|
| 178 |
+
<!-- AI Companion (NLP Enabled) -->
|
| 179 |
+
<div class="bg-void-800 border border-gray-700 rounded-xl flex flex-col h-[500px] lg:h-auto shadow-2xl relative overflow-hidden">
|
| 180 |
+
<div class="p-4 border-b border-gray-700 bg-void-900 flex justify-between items-center">
|
| 181 |
+
<h2 class="text-sm font-bold text-white flex items-center gap-2">
|
| 182 |
+
<i data-feather="cpu" class="text-neon-gold"></i>
|
| 183 |
+
AI COMPANION
|
| 184 |
+
</h2>
|
| 185 |
+
<div class="flex gap-2">
|
| 186 |
+
<span id="nlp-status" class="text-[10px] bg-gray-800 px-2 py-0.5 rounded text-gray-400 border border-gray-600">VOICE OFF</span>
|
| 187 |
+
</div>
|
| 188 |
+
</div>
|
| 189 |
+
|
| 190 |
+
<!-- Chat Area -->
|
| 191 |
+
<div id="chat-history" class="flex-1 overflow-y-auto p-4 space-y-4 scroll-smooth">
|
| 192 |
+
<!-- AI Message -->
|
| 193 |
+
<div class="flex items-start gap-3">
|
| 194 |
+
<div class="w-8 h-8 rounded bg-gradient-to-br from-gray-700 to-gray-900 flex items-center justify-center border border-gray-600">
|
| 195 |
+
<i data-feather="aperture" class="w-4 h-4 text-neon-gold"></i>
|
| 196 |
+
</div>
|
| 197 |
+
<div class="bg-void-700 p-3 rounded-lg rounded-tl-none text-sm text-gray-200 border border-gray-700 shadow-sm">
|
| 198 |
+
<p class="mb-1">Greetings, Commander. I am ready to assist.</p>
|
| 199 |
+
<p class="text-xs text-gray-500 font-mono mt-1">SYS: NLP Module Active</p>
|
| 200 |
+
</div>
|
| 201 |
+
</div>
|
| 202 |
+
</div>
|
| 203 |
+
|
| 204 |
+
<!-- Input Area -->
|
| 205 |
+
<div class="p-4 bg-void-900 border-t border-gray-700">
|
| 206 |
+
<div class="relative">
|
| 207 |
+
<input type="text" id="ai-input" placeholder="Type or use voice command..." class="w-full bg-void-800 border border-gray-700 rounded-lg py-3 pl-4 pr-12 text-sm text-white focus:outline-none focus:border-neon-green transition-colors">
|
| 208 |
+
<button id="voice-btn" class="absolute right-2 top-2 p-1.5 rounded-md hover:bg-gray-700 text-gray-400 hover:text-white transition-colors">
|
| 209 |
+
<i data-feather="mic" class="w-4 h-4"></i>
|
| 210 |
+
</button>
|
| 211 |
+
</div>
|
| 212 |
+
<div class="mt-2 flex gap-2 overflow-x-auto pb-1">
|
| 213 |
+
<button class="cmd-chip text-[10px] bg-gray-800 hover:bg-gray-700 border border-gray-700 px-2 py-1 rounded text-gray-300">Status Report</button>
|
| 214 |
+
<button class="cmd-chip text-[10px] bg-gray-800 hover:bg-gray-700 border border-gray-700 px-2 py-1 rounded text-gray-300">Pause Sim</button>
|
| 215 |
+
<button class="cmd-chip text-[10px] bg-gray-800 hover:bg-gray-700 border border-gray-700 px-2 py-1 rounded text-gray-300">Analyze</button>
|
| 216 |
+
</div>
|
| 217 |
+
</div>
|
| 218 |
+
</div>
|
| 219 |
+
|
| 220 |
+
</div>
|
| 221 |
+
|
| 222 |
+
<!-- Recent Activity Table -->
|
| 223 |
+
<div class="mt-8 bg-void-800 border border-gray-800 rounded-xl overflow-hidden shadow-lg">
|
| 224 |
+
<div class="px-6 py-4 border-b border-gray-700 flex justify-between items-center">
|
| 225 |
+
<h3 class="text-lg font-bold text-white">Agent Fleet</h3>
|
| 226 |
+
<button class="text-xs bg-neon-green/10 text-neon-green border border-neon-green/30 px-3 py-1 rounded hover:bg-neon-green/20 transition-colors flex items-center gap-1">
|
| 227 |
+
<i data-feather="plus" class="w-3 h-3"></i> Deploy New
|
| 228 |
+
</button>
|
| 229 |
+
</div>
|
| 230 |
+
<div class="overflow-x-auto">
|
| 231 |
+
<table class="w-full text-left border-collapse">
|
| 232 |
+
<thead>
|
| 233 |
+
<tr class="text-xs text-gray-500 uppercase bg-void-900 border-b border-gray-800">
|
| 234 |
+
<th class="px-6 py-3 font-medium">Agent ID</th>
|
| 235 |
+
<th class="px-6 py-3 font-medium">Status</th>
|
| 236 |
+
<th class="px-6 py-3 font-medium">Location</th>
|
| 237 |
+
<th class="px-6 py-3 font-medium">Latency</th>
|
| 238 |
+
<th class="px-6 py-3 font-medium text-right">Action</th>
|
| 239 |
+
</tr>
|
| 240 |
+
</thead>
|
| 241 |
+
<tbody class="text-sm divide-y divide-gray-800">
|
| 242 |
+
<tr class="group hover:bg-white/5 transition-colors">
|
| 243 |
+
<td class="px-6 py-4 font-mono text-neon-green">AGNT-099</td>
|
| 244 |
+
<td class="px-6 py-4"><span class="px-2 py-1 rounded text-[10px] bg-neon-green/10 text-neon-green border border-neon-green/20">ONLINE</span></td>
|
| 245 |
+
<td class="px-6 py-4 text-gray-400">US-East-1</td>
|
| 246 |
+
<td class="px-6 py-4 text-gray-400 font-mono">24ms</td>
|
| 247 |
+
<td class="px-6 py-4 text-right">
|
| 248 |
+
<a href="#" class="text-gray-500 hover:text-white"><i data-feather="more-horizontal" class="w-4 h-4"></i></a>
|
| 249 |
+
</td>
|
| 250 |
+
</tr>
|
| 251 |
+
<tr class="group hover:bg-white/5 transition-colors">
|
| 252 |
+
<td class="px-6 py-4 font-mono text-neon-orange">AGNT-104</td>
|
| 253 |
+
<td class="px-6 py-4"><span class="px-2 py-1 rounded text-[10px] bg-neon-orange/10 text-neon-orange border border-neon-orange/20">BUSY</span></td>
|
| 254 |
+
<td class="px-6 py-4 text-gray-400">EU-West-2</td>
|
| 255 |
+
<td class="px-6 py-4 text-gray-400 font-mono">112ms</td>
|
| 256 |
+
<td class="px-6 py-4 text-right">
|
| 257 |
+
<a href="#" class="text-gray-500 hover:text-white"><i data-feather="more-horizontal" class="w-4 h-4"></i></a>
|
| 258 |
+
</td>
|
| 259 |
+
</tr>
|
| 260 |
+
<tr class="group hover:bg-white/5 transition-colors">
|
| 261 |
+
<td class="px-6 py-4 font-mono text-gray-500">AGNT-112</td>
|
| 262 |
+
<td class="px-6 py-4"><span class="px-2 py-1 rounded text-[10px] bg-gray-700/30 text-gray-400 border border-gray-600">OFFLINE</span></td>
|
| 263 |
+
<td class="px-6 py-4 text-gray-400">Asia-Pac-3</td>
|
| 264 |
+
<td class="px-6 py-4 text-gray-400 font-mono">--</td>
|
| 265 |
+
<td class="px-6 py-4 text-right">
|
| 266 |
+
<a href="#" class="text-gray-500 hover:text-white"><i data-feather="more-horizontal" class="w-4 h-4"></i></a>
|
| 267 |
+
</td>
|
| 268 |
+
</tr>
|
| 269 |
+
</tbody>
|
| 270 |
+
</table>
|
| 271 |
+
</div>
|
| 272 |
+
</div>
|
| 273 |
+
|
| 274 |
+
</main>
|
| 275 |
+
</div>
|
| 276 |
+
|
| 277 |
+
<!-- Script Includes -->
|
| 278 |
+
<script src="components/navbar.js"></script>
|
| 279 |
+
<script src="components/sidebar.js"></script>
|
| 280 |
+
<script src="script.js"></script>
|
| 281 |
+
<script>
|
| 282 |
+
feather.replace();
|
| 283 |
+
</script>
|
| 284 |
+
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
|
| 285 |
+
</body>
|
| 286 |
+
</html>
|
script.js
ADDED
|
@@ -0,0 +1,193 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
document.addEventListener('DOMContentLoaded', () => {
|
| 2 |
+
/* --- Clock --- */
|
| 3 |
+
function updateClock() {
|
| 4 |
+
const now = new Date();
|
| 5 |
+
const timeString = now.toLocaleTimeString('en-US', { hour12: false });
|
| 6 |
+
const clockEl = document.getElementById('clock');
|
| 7 |
+
if(clockEl) clockEl.textContent = timeString;
|
| 8 |
+
}
|
| 9 |
+
setInterval(updateClock, 1000);
|
| 10 |
+
updateClock();
|
| 11 |
+
|
| 12 |
+
/* --- Operation Control Logic --- */
|
| 13 |
+
let simState = 'IDLE'; // IDLE, RUNNING, PAUSED
|
| 14 |
+
let simTime = 0;
|
| 15 |
+
let simInterval = null;
|
| 16 |
+
let progress = 0;
|
| 17 |
+
|
| 18 |
+
const statusText = document.getElementById('sim-status-text');
|
| 19 |
+
const timerText = document.getElementById('sim-timer');
|
| 20 |
+
const progressBar = document.getElementById('sim-progress');
|
| 21 |
+
const btnAdvance = document.getElementById('btn-advance');
|
| 22 |
+
const btnPause = document.getElementById('btn-pause');
|
| 23 |
+
const btnReset = document.getElementById('btn-reset');
|
| 24 |
+
|
| 25 |
+
function formatTime(seconds) {
|
| 26 |
+
const h = Math.floor(seconds / 3600).toString().padStart(2, '0');
|
| 27 |
+
const m = Math.floor((seconds % 3600) / 60).toString().padStart(2, '0');
|
| 28 |
+
const s = (seconds % 60).toString().padStart(2, '0');
|
| 29 |
+
return `${h}:${m}:${s}`;
|
| 30 |
+
}
|
| 31 |
+
|
| 32 |
+
function updateUI() {
|
| 33 |
+
statusText.textContent = simState;
|
| 34 |
+
|
| 35 |
+
// Color coding based on state
|
| 36 |
+
statusText.classList.remove('text-neon-green', 'text-neon-orange', 'text-gray-500');
|
| 37 |
+
if (simState === 'RUNNING') {
|
| 38 |
+
statusText.classList.add('text-neon-green');
|
| 39 |
+
statusText.classList.add('animate-pulse');
|
| 40 |
+
} else if (simState === 'PAUSED') {
|
| 41 |
+
statusText.classList.add('text-neon-orange');
|
| 42 |
+
statusText.classList.remove('animate-pulse');
|
| 43 |
+
} else {
|
| 44 |
+
statusText.classList.add('text-gray-500');
|
| 45 |
+
statusText.classList.remove('animate-pulse');
|
| 46 |
+
}
|
| 47 |
+
|
| 48 |
+
timerText.textContent = formatTime(simTime);
|
| 49 |
+
progressBar.style.width = `${progress}%`;
|
| 50 |
+
}
|
| 51 |
+
|
| 52 |
+
btnAdvance.addEventListener('click', () => {
|
| 53 |
+
if (simState === 'RUNNING') return; // Already running
|
| 54 |
+
|
| 55 |
+
simState = 'RUNNING';
|
| 56 |
+
statusText.classList.add('animate-pulse');
|
| 57 |
+
|
| 58 |
+
simInterval = setInterval(() => {
|
| 59 |
+
simTime++;
|
| 60 |
+
progress = (simTime % 60) / 60 * 100; // Loop progress for demo
|
| 61 |
+
updateUI();
|
| 62 |
+
if (simTime % 60 === 0 && simTime > 0) {
|
| 63 |
+
addAiMessage("Simulation milestone reached. Analyzing vector performance...", false);
|
| 64 |
+
}
|
| 65 |
+
}, 1000);
|
| 66 |
+
|
| 67 |
+
updateUI();
|
| 68 |
+
addAiMessage("Simulation sequence initiated. Engines firing.", false);
|
| 69 |
+
});
|
| 70 |
+
|
| 71 |
+
btnPause.addEventListener('click', () => {
|
| 72 |
+
if (simState !== 'RUNNING') return;
|
| 73 |
+
|
| 74 |
+
simState = 'PAUSED';
|
| 75 |
+
clearInterval(simInterval);
|
| 76 |
+
updateUI();
|
| 77 |
+
addAiMessage("Simulation paused. Awaiting command.", false);
|
| 78 |
+
});
|
| 79 |
+
|
| 80 |
+
btnReset.addEventListener('click', () => {
|
| 81 |
+
simState = 'IDLE';
|
| 82 |
+
clearInterval(simInterval);
|
| 83 |
+
simTime = 0;
|
| 84 |
+
progress = 0;
|
| 85 |
+
updateUI();
|
| 86 |
+
addAiMessage("Simulation reset. All parameters normalized.", false);
|
| 87 |
+
});
|
| 88 |
+
|
| 89 |
+
/* --- AI Companion & NLP --- */
|
| 90 |
+
const chatHistory = document.getElementById('chat-history');
|
| 91 |
+
const aiInput = document.getElementById('ai-input');
|
| 92 |
+
const voiceBtn = document.getElementById('voice-btn');
|
| 93 |
+
const nlpStatus = document.getElementById('nlp-status');
|
| 94 |
+
const cmdChips = document.querySelectorAll('.cmd-chip');
|
| 95 |
+
|
| 96 |
+
function addAiMessage(text, isUser = false) {
|
| 97 |
+
const div = document.createElement('div');
|
| 98 |
+
div.className = `flex items-start gap-3 ${isUser ? 'flex-row-reverse' : ''}`;
|
| 99 |
+
|
| 100 |
+
const iconColor = isUser ? 'bg-neon-green/20 text-neon-green' : 'bg-gradient-to-br from-gray-700 to-gray-900 text-neon-gold';
|
| 101 |
+
const icon = isUser ? '<i data-feather="user" class="w-4 h-4"></i>' : '<i data-feather="aperture" class="w-4 h-4"></i>';
|
| 102 |
+
const bubbleColor = isUser ? 'bg-neon-green/10 border-neon-green/30' : 'bg-void-700 border-gray-700';
|
| 103 |
+
|
| 104 |
+
div.innerHTML = `
|
| 105 |
+
<div class="w-8 h-8 rounded flex items-center justify-center border border-gray-600 shrink-0 ${iconColor}">
|
| 106 |
+
${icon}
|
| 107 |
+
</div>
|
| 108 |
+
<div class="p-3 rounded-lg text-sm text-gray-200 border shadow-sm max-w-[80%] ${isUser ? 'rounded-tr-none' : 'rounded-tl-none'} ${bubbleColor}">
|
| 109 |
+
<p>${text}</p>
|
| 110 |
+
</div>
|
| 111 |
+
`;
|
| 112 |
+
|
| 113 |
+
chatHistory.appendChild(div);
|
| 114 |
+
chatHistory.scrollTop = chatHistory.scrollHeight;
|
| 115 |
+
feather.replace();
|
| 116 |
+
}
|
| 117 |
+
|
| 118 |
+
function handleCommand(text) {
|
| 119 |
+
const lower = text.toLowerCase();
|
| 120 |
+
let response = "";
|
| 121 |
+
|
| 122 |
+
if (lower.includes("pause") || lower.includes("stop")) {
|
| 123 |
+
if (simState === 'RUNNING') btnPause.click();
|
| 124 |
+
response = "Acknowledged. Pausing operations.";
|
| 125 |
+
} else if (lower.includes("start") || lower.includes("advance") || lower.includes("resume")) {
|
| 126 |
+
if (simState !== 'RUNNING') btnAdvance.click();
|
| 127 |
+
response = "Acknowledged. Advancing simulation.";
|
| 128 |
+
} else if (lower.includes("reset")) {
|
| 129 |
+
btnReset.click();
|
| 130 |
+
response = "System resetting to initial state.";
|
| 131 |
+
} else if (lower.includes("status") || lower.includes("report")) {
|
| 132 |
+
response = `Current Status: ${simState}. Runtime: ${formatTime(simTime)}. Progress: ${Math.floor(progress)}%.`;
|
| 133 |
+
} else if (lower.includes("hello") || lower.includes("hi")) {
|
| 134 |
+
response = "Greetings, Commander. Systems nominal.";
|
| 135 |
+
} else {
|
| 136 |
+
response = `I received: "${text}". Please clarify the tactical directive.`;
|
| 137 |
+
}
|
| 138 |
+
|
| 139 |
+
addAiMessage(text, true);
|
| 140 |
+
setTimeout(() => addAiMessage(response, false), 600);
|
| 141 |
+
}
|
| 142 |
+
|
| 143 |
+
// Text Input
|
| 144 |
+
aiInput.addEventListener('keypress', (e) => {
|
| 145 |
+
if (e.key === 'Enter' && aiInput.value.trim()) {
|
| 146 |
+
handleCommand(aiInput.value);
|
| 147 |
+
aiInput.value = '';
|
| 148 |
+
}
|
| 149 |
+
});
|
| 150 |
+
|
| 151 |
+
// Chip Inputs
|
| 152 |
+
cmdChips.forEach(chip => {
|
| 153 |
+
chip.addEventListener('click', () => {
|
| 154 |
+
handleCommand(chip.textContent);
|
| 155 |
+
});
|
| 156 |
+
});
|
| 157 |
+
|
| 158 |
+
// NLP / Web Speech API
|
| 159 |
+
if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
|
| 160 |
+
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
|
| 161 |
+
const recognition = new SpeechRecognition();
|
| 162 |
+
|
| 163 |
+
recognition.continuous = false;
|
| 164 |
+
recognition.lang = 'en-US';
|
| 165 |
+
recognition.interimResults = false;
|
| 166 |
+
|
| 167 |
+
recognition.onstart = () => {
|
| 168 |
+
nlpStatus.textContent = "LISTENING...";
|
| 169 |
+
nlpStatus.classList.remove('text-gray-400', 'border-gray-600');
|
| 170 |
+
nlpStatus.classList.add('text-neon-red', 'border-neon-red', 'animate-pulse');
|
| 171 |
+
voiceBtn.classList.add('text-neon-red');
|
| 172 |
+
};
|
| 173 |
+
|
| 174 |
+
recognition.onend = () => {
|
| 175 |
+
nlpStatus.textContent = "VOICE OFF";
|
| 176 |
+
nlpStatus.classList.add('text-gray-400', 'border-gray-600');
|
| 177 |
+
nlpStatus.classList.remove('text-neon-red', 'border-neon-red', 'animate-pulse');
|
| 178 |
+
voiceBtn.classList.remove('text-neon-red');
|
| 179 |
+
};
|
| 180 |
+
|
| 181 |
+
recognition.onresult = (event) => {
|
| 182 |
+
const transcript = event.results[0][0].transcript;
|
| 183 |
+
handleCommand(transcript);
|
| 184 |
+
};
|
| 185 |
+
|
| 186 |
+
voiceBtn.addEventListener('click', () => {
|
| 187 |
+
recognition.start();
|
| 188 |
+
});
|
| 189 |
+
} else {
|
| 190 |
+
voiceBtn.style.display = 'none';
|
| 191 |
+
console.log("Web Speech API not supported in this browser.");
|
| 192 |
+
}
|
| 193 |
+
});
|
style.css
CHANGED
|
@@ -1,28 +1,72 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
body {
|
| 2 |
-
|
| 3 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 4 |
}
|
| 5 |
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
|
|
|
| 9 |
}
|
| 10 |
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
margin-bottom: 10px;
|
| 15 |
-
margin-top: 5px;
|
| 16 |
}
|
| 17 |
|
| 18 |
-
|
| 19 |
-
|
| 20 |
-
|
| 21 |
-
padding: 16px;
|
| 22 |
-
border: 1px solid lightgray;
|
| 23 |
-
border-radius: 16px;
|
| 24 |
}
|
| 25 |
|
| 26 |
-
|
| 27 |
-
|
|
|
|
| 28 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
/* Global & Reset */
|
| 2 |
+
:root {
|
| 3 |
+
--color-primary: #22c55e; /* Green */
|
| 4 |
+
--color-secondary: #f97316; /* Orange */
|
| 5 |
+
--color-void: #050505;
|
| 6 |
+
--color-void-light: #0a0a0a;
|
| 7 |
+
--color-gold: #ffd700;
|
| 8 |
+
--color-red: #ef4444;
|
| 9 |
+
}
|
| 10 |
+
|
| 11 |
body {
|
| 12 |
+
background-color: var(--color-void);
|
| 13 |
+
color: #e5e5e5;
|
| 14 |
+
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
| 15 |
+
}
|
| 16 |
+
|
| 17 |
+
/* Scrollbar */
|
| 18 |
+
::-webkit-scrollbar {
|
| 19 |
+
width: 8px;
|
| 20 |
+
height: 8px;
|
| 21 |
+
}
|
| 22 |
+
::-webkit-scrollbar-track {
|
| 23 |
+
background: var(--color-void);
|
| 24 |
+
}
|
| 25 |
+
::-webkit-scrollbar-thumb {
|
| 26 |
+
background: #333;
|
| 27 |
+
border-radius: 4px;
|
| 28 |
+
}
|
| 29 |
+
::-webkit-scrollbar-thumb:hover {
|
| 30 |
+
background: #444;
|
| 31 |
+
}
|
| 32 |
+
|
| 33 |
+
/* Sacred Geometry Patterns (SVG Backgrounds) */
|
| 34 |
+
.pattern-metatron {
|
| 35 |
+
background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 0 L93.3 25 L93.3 75 L50 100 L6.7 75 L6.7 25 Z' fill='none' stroke='%2322c55e' stroke-width='0.5'/%3E%3Cpath d='M50 0 L6.7 25 M50 0 L93.3 25 M50 100 L6.7 75 M50 100 L93.3 75 M6.7 25 L6.7 75 M93.3 25 L93.3 75 M50 0 L50 100 M6.7 25 L93.3 75 M93.3 25 L6.7 75' stroke='%2322c55e' stroke-width='0.5'/%3E%3C/svg%3E");
|
| 36 |
+
background-size: 200px 200px;
|
| 37 |
+
animation: rotateSlow 120s linear infinite;
|
| 38 |
}
|
| 39 |
|
| 40 |
+
.pattern-flower {
|
| 41 |
+
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='10' fill='none' stroke='%23ffd700' stroke-width='0.5'/%3E%3Ccircle cx='30' cy='10' r='10' fill='none' stroke='%23ffd700' stroke-width='0.5'/%3E%3Ccircle cx='30' cy='50' r='10' fill='none' stroke='%23ffd700' stroke-width='0.5'/%3E%3Ccircle cx='10' cy='30' r='10' fill='none' stroke='%23ffd700' stroke-width='0.5'/%3E%3Ccircle cx='50' cy='30' r='10' fill='none' stroke='%23ffd700' stroke-width='0.5'/%3E%3Ccircle cx='47.3' cy='17.3' r='10' fill='none' stroke='%23ffd700' stroke-width='0.5'/%3E%3Ccircle cx='12.7' cy='42.7' r='10' fill='none' stroke='%23ffd700' stroke-width='0.5'/%3E%3Ccircle cx='12.7' cy='17.3' r='10' fill='none' stroke='%23ffd700' stroke-width='0.5'/%3E%3Ccircle cx='47.3' cy='42.7' r='10' fill='none' stroke='%23ffd700' stroke-width='0.5'/%3E%3C/svg%3E");
|
| 42 |
+
background-size: 120px 120px;
|
| 43 |
+
animation: rotateReverse 240s linear infinite;
|
| 44 |
}
|
| 45 |
|
| 46 |
+
@keyframes rotateSlow {
|
| 47 |
+
from { transform: rotate(0deg); }
|
| 48 |
+
to { transform: rotate(360deg); }
|
|
|
|
|
|
|
| 49 |
}
|
| 50 |
|
| 51 |
+
@keyframes rotateReverse {
|
| 52 |
+
from { transform: rotate(360deg); }
|
| 53 |
+
to { transform: rotate(0deg); }
|
|
|
|
|
|
|
|
|
|
| 54 |
}
|
| 55 |
|
| 56 |
+
/* Utility Animations */
|
| 57 |
+
.animate-pulse-gold {
|
| 58 |
+
animation: pulse-gold 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
| 59 |
}
|
| 60 |
+
|
| 61 |
+
@keyframes pulse-gold {
|
| 62 |
+
0%, 100% { opacity: 1; text-shadow: 0 0 10px var(--color-gold); }
|
| 63 |
+
50% { opacity: .7; text-shadow: 0 0 2px var(--color-gold); }
|
| 64 |
+
}
|
| 65 |
+
|
| 66 |
+
/* Glassmorphism Helpers */
|
| 67 |
+
.glass-panel {
|
| 68 |
+
background: rgba(10, 10, 10, 0.7);
|
| 69 |
+
backdrop-filter: blur(10px);
|
| 70 |
+
-webkit-backdrop-filter: blur(10px);
|
| 71 |
+
border: 1px solid rgba(255, 255, 255, 0.05);
|
| 72 |
+
}
|