Hugging Face's logo

Spaces:
elasko-aim
/
quantum-observer-network
Running

App Files Community
elasko-aim commited on
Commit
43549cb
Β·
verified Β·
1 Parent(s): ea980de

dashboard and monitoring pages conceptually for index and promt product <!DOCTYPE html>

Browse files

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quantum Observer Network</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#ec4899',
secondary: '#84cc16'
}
}
}
}
</script>
</head>
<body class="bg-white text-gray-800">
<custom-navbar></custom-navbar>

<main class="min-h-screen">
<!-- Hero Section -->
<section class="relative bg-gradient-to-br from-pink-50 to-lime-50 py-20">
<div class="container mx-auto px-4">
<div class="text-center max-w-4xl mx-auto">
<h1 class="text-5xl md:text-6xl font-bold text-gray-900 mb-6">
Quantum <span class="text-primary">Observer</span> Network
</h1>
<p class="text-xl md:text-2xl text-gray-600 mb-8 leading-relaxed">
Recursive security monitoring where every observer becomes the observed
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="dashboard.html" class="bg-primary hover:bg-pink-600 text-white px-8 py-4 rounded-xl font-semibold transition-all duration-300 transform hover:scale-105 shadow-lg">
<i data-feather="activity" class="inline w-5 h-5 mr-2"></i>
Access Dashboard
</a>
<a href="monitoring.html" class="bg-secondary hover:bg-lime-600 text-white px-8 py-4 rounded-xl font-semibold transition-all duration-300 transform hover:scale-105 shadow-lg">
<i data-feather="eye" class="inline w-5 h-5 mr-2"></i>
Live Monitoring
</a>
</div>
</div>
</div>
</section>

<!-- System Architecture -->
<section class="py-20 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-16">System Architecture</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Level 0 -->
<div class="bg-gradient-to-br from-pink-50 to-pink-100 p-6 rounded-2xl border border-pink-200">
<div class="text-primary mb-4">
<i data-feather="cpu" class="w-12 h-12"></i>
</div>
<h3 class="text-xl font-bold mb-3">Level 0: Physical Layer</h3>
<ul class="text-gray-600 space-y-2">
<li>β€’ Photon Detection</li>
<li>β€’ Quantum Sensors</li>
<li>β€’ Adaptive Optics</li>
</ul>
</div>

<!-- Level 1 -->
<div class="bg-gradient-to-br from-lime-50 to-lime-100 p-6 rounded-2xl border border-lime-200">
<div class="text-secondary mb-4">
<i data-feather="video" class="w-12 h-12"></i>
</div>
<h3 class="text-xl font-bold mb-3">Level 1: System Cameras</h3>
<ul class="text-gray-600 space-y-2">
<li>β€’ Observer Detection</li>
<li>β€’ Pattern Analysis</li>
<li>β€’ Real-time Processing</li>
</ul>
</div>

<!-- Level 2 -->
<div class="bg-gradient-to-br from-pink-50 to-pink-100 p-6 rounded-2xl border border-pink-200">
<div class="text-primary mb-4">
<i data-feather="smartphone" class="w-12 h-12"></i>
</div>
<h3 class="text-xl font-bold mb-3">Level 2: Mobile Sensors</h3>
<ul class="text-gray-600 space-y-2">
<li>β€’ Distributed Network</li>
<li>β€’ Collective Intelligence</li>
<li>β€’ Secure Enclave</li>
</ul>
</div>

<!-- Level 3 -->
<div class="bg-gradient-to-br from-lime-50 to-lime-100 p-6 rounded-2xl border border-lime-200">
<div class="text-secondary mb-4">
<i data-feather="glasses" class="w-12 h-12"></i>
</div>
<h3 class="text-xl font-bold mb-3">Level 3: Reality Interface</h3>
<ul class="text-gray-600 space-y-2">
<li>β€’ AR Overlay</li>
<li>β€’ Tactile Response</li>
<li>β€’ Intervention Protocol</li>
</ul>
</div>
</div>
</section>

<!-- Live Metrics -->
<section class="py-20 bg-gradient-to-br from-pink-50 to-lime-50">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-16">Real-time Security Metrics</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-white p-6 rounded-2xl shadow-lg border border-pink-200">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold">Quantum Integrity</h3>
<span class="text-primary font-bold">89%</span>
</div>
<div class="flex items-center">
<div class="w-full bg-gray-200 rounded-full h-3">
<div class="bg-primary h-3 rounded-full" style="width: 89%"></div>
</div>
</div>

<div class="bg-white p-6 rounded-2xl shadow-lg border border-lime-200">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold">Active Observers</h3>
<span class="text-secondary font-bold">8/12</span>
</div>
<div class="flex items-center">
<div class="w-full bg-gray-200 rounded-full h-3">
<div class="bg-secondary h-3 rounded-full" style="width: 66%"></div>
</div>
</div>

<div class="bg-white p-6 rounded-2xl shadow-lg border border-pink-200">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold">System Stability</h3>
<span class="text-primary font-bold">Ξ” +0.02</span>
</div>
<div class="text-sm text-gray-600">Within optimal range</div>
</div>
</div>
</div>
</section>
</main>

<custom-footer></custom-footer>

<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>
feather.replace();
</script>
</body>
</html>

Files changed (8) hide show
  1. README.md +8 -5
  2. components/footer.js +159 -0
  3. components/navbar.js +141 -0
  4. dashboard.html +204 -0
  5. index.html +160 -19
  6. monitoring.html +227 -0
  7. script.js +175 -0
  8. style.css +69 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Quantum Observer Network
3
- emoji: πŸ‘€
4
- colorFrom: purple
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: Quantum Observer Network πŸ”­
3
+ colorFrom: green
4
+ colorTo: pink
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/footer.js ADDED
@@ -0,0 +1,159 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Quantum Observer Network</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
+ primary: '#ec4899',
17
+ secondary: '#84cc16'
18
+ }
19
+ }
20
+ }
21
+ }
22
+ </script>
23
+ </head>
24
+ <body class="bg-white text-gray-800">
25
+ <custom-navbar></custom-navbar>
26
+
27
+ <main class="min-h-screen">
28
+ <!-- Hero Section -->
29
+ <section class="relative bg-gradient-to-br from-pink-50 to-lime-50 py-20">
30
+ <div class="container mx-auto px-4">
31
+ <div class="text-center max-w-4xl mx-auto">
32
+ <h1 class="text-5xl md:text-6xl font-bold text-gray-900 mb-6">
33
+ Quantum <span class="text-primary">Observer</span> Network
34
+ </h1>
35
+ <p class="text-xl md:text-2xl text-gray-600 mb-8 leading-relaxed">
36
+ Recursive security monitoring where every observer becomes the observed
37
+ </p>
38
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
39
+ <a href="dashboard.html" class="bg-primary hover:bg-pink-600 text-white px-8 py-4 rounded-xl font-semibold transition-all duration-300 transform hover:scale-105 shadow-lg">
40
+ <i data-feather="activity" class="inline w-5 h-5 mr-2"></i>
41
+ Access Dashboard
42
+ </a>
43
+ <a href="monitoring.html" class="bg-secondary hover:bg-lime-600 text-white px-8 py-4 rounded-xl font-semibold transition-all duration-300 transform hover:scale-105 shadow-lg">
44
+ <i data-feather="eye" class="inline w-5 h-5 mr-2"></i>
45
+ Live Monitoring
46
+ </a>
47
+ </div>
48
+ </div>
49
+ </div>
50
+ </section>
51
+
52
+ <!-- System Architecture -->
53
+ <section class="py-20 bg-white">
54
+ <div class="container mx-auto px-4">
55
+ <h2 class="text-4xl font-bold text-center mb-16">System Architecture</h2>
56
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
57
+ <!-- Level 0 -->
58
+ <div class="bg-gradient-to-br from-pink-50 to-pink-100 p-6 rounded-2xl border border-pink-200">
59
+ <div class="text-primary mb-4">
60
+ <i data-feather="cpu" class="w-12 h-12"></i>
61
+ </div>
62
+ <h3 class="text-xl font-bold mb-3">Level 0: Physical Layer</h3>
63
+ <ul class="text-gray-600 space-y-2">
64
+ <li>β€’ Photon Detection</li>
65
+ <li>β€’ Quantum Sensors</li>
66
+ <li>β€’ Adaptive Optics</li>
67
+ </ul>
68
+ </div>
69
+
70
+ <!-- Level 1 -->
71
+ <div class="bg-gradient-to-br from-lime-50 to-lime-100 p-6 rounded-2xl border border-lime-200">
72
+ <div class="text-secondary mb-4">
73
+ <i data-feather="video" class="w-12 h-12"></i>
74
+ </div>
75
+ <h3 class="text-xl font-bold mb-3">Level 1: System Cameras</h3>
76
+ <ul class="text-gray-600 space-y-2">
77
+ <li>β€’ Observer Detection</li>
78
+ <li>β€’ Pattern Analysis</li>
79
+ <li>β€’ Real-time Processing</li>
80
+ </ul>
81
+ </div>
82
+
83
+ <!-- Level 2 -->
84
+ <div class="bg-gradient-to-br from-pink-50 to-pink-100 p-6 rounded-2xl border border-pink-200">
85
+ <div class="text-primary mb-4">
86
+ <i data-feather="smartphone" class="w-12 h-12"></i>
87
+ </div>
88
+ <h3 class="text-xl font-bold mb-3">Level 2: Mobile Sensors</h3>
89
+ <ul class="text-gray-600 space-y-2">
90
+ <li>β€’ Distributed Network</li>
91
+ <li>β€’ Collective Intelligence</li>
92
+ <li>β€’ Secure Enclave</li>
93
+ </ul>
94
+ </div>
95
+
96
+ <!-- Level 3 -->
97
+ <div class="bg-gradient-to-br from-lime-50 to-lime-100 p-6 rounded-2xl border border-lime-200">
98
+ <div class="text-secondary mb-4">
99
+ <i data-feather="glasses" class="w-12 h-12"></i>
100
+ </div>
101
+ <h3 class="text-xl font-bold mb-3">Level 3: Reality Interface</h3>
102
+ <ul class="text-gray-600 space-y-2">
103
+ <li>β€’ AR Overlay</li>
104
+ <li>β€’ Tactile Response</li>
105
+ <li>β€’ Intervention Protocol</li>
106
+ </ul>
107
+ </div>
108
+ </div>
109
+ </section>
110
+
111
+ <!-- Live Metrics -->
112
+ <section class="py-20 bg-gradient-to-br from-pink-50 to-lime-50">
113
+ <div class="container mx-auto px-4">
114
+ <h2 class="text-4xl font-bold text-center mb-16">Real-time Security Metrics</h2>
115
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
116
+ <div class="bg-white p-6 rounded-2xl shadow-lg border border-pink-200">
117
+ <div class="flex items-center justify-between mb-4">
118
+ <h3 class="text-lg font-semibold">Quantum Integrity</h3>
119
+ <span class="text-primary font-bold">89%</span>
120
+ </div>
121
+ <div class="flex items-center">
122
+ <div class="w-full bg-gray-200 rounded-full h-3">
123
+ <div class="bg-primary h-3 rounded-full" style="width: 89%"></div>
124
+ </div>
125
+ </div>
126
+
127
+ <div class="bg-white p-6 rounded-2xl shadow-lg border border-lime-200">
128
+ <div class="flex items-center justify-between mb-4">
129
+ <h3 class="text-lg font-semibold">Active Observers</h3>
130
+ <span class="text-secondary font-bold">8/12</span>
131
+ </div>
132
+ <div class="flex items-center">
133
+ <div class="w-full bg-gray-200 rounded-full h-3">
134
+ <div class="bg-secondary h-3 rounded-full" style="width: 66%"></div>
135
+ </div>
136
+ </div>
137
+
138
+ <div class="bg-white p-6 rounded-2xl shadow-lg border border-pink-200">
139
+ <div class="flex items-center justify-between mb-4">
140
+ <h3 class="text-lg font-semibold">System Stability</h3>
141
+ <span class="text-primary font-bold">Ξ” +0.02</span>
142
+ </div>
143
+ <div class="text-sm text-gray-600">Within optimal range</div>
144
+ </div>
145
+ </div>
146
+ </div>
147
+ </section>
148
+ </main>
149
+
150
+ <custom-footer></custom-footer>
151
+
152
+ <script src="components/navbar.js"></script>
153
+ <script src="components/footer.js"></script>
154
+ <script src="script.js"></script>
155
+ <script>
156
+ feather.replace();
157
+ </script>
158
+ </body>
159
+ </html>
components/navbar.js ADDED
@@ -0,0 +1,141 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomNavbar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
7
+ * {
8
+ margin: 0;
9
+ padding: 0;
10
+ box-sizing: border-box;
11
+ }
12
+ :host {
13
+ display: block;
14
+ width: 100%;
15
+ position: sticky;
16
+ top: 0;
17
+ z-index: 1000;
18
+ }
19
+ nav {
20
+ background: rgba(255, 255, 255, 0.95);
21
+ backdrop-filter: blur(10px);
22
+ border-bottom: 1px solid #e5e7eb;
23
+ font-family: 'Inter', sans-serif;
24
+ }
25
+ .nav-container {
26
+ max-width: 1200px;
27
+ margin: 0 auto;
28
+ padding: 1rem 1.5rem;
29
+ }
30
+ .nav-content {
31
+ display: flex;
32
+ justify-content: between;
33
+ align-items: center;
34
+ }
35
+ .logo {
36
+ font-weight: 700;
37
+ font-size: 1.5rem;
38
+ background: linear-gradient(45deg, #ec4899, #84cc16);
39
+ -webkit-background-clip: text;
40
+ -webkit-text-fill-color: transparent;
41
+ }
42
+ .nav-links {
43
+ display: flex;
44
+ gap: 2rem;
45
+ align-items: center;
46
+ }
47
+ .nav-link {
48
+ color: #4b5563;
49
+ text-decoration: none;
50
+ font-weight: 500;
51
+ transition: all 0.3s ease;
52
+ padding: 0.5rem 1rem;
53
+ border-radius: 0.5rem;
54
+ display: flex;
55
+ align-items: center;
56
+ gap: 0.5rem;
57
+ }
58
+ .nav-link:hover {
59
+ color: #ec4899;
60
+ background: #fdf2f8;
61
+ }
62
+ .mobile-menu {
63
+ display: none;
64
+ flex-direction: column;
65
+ gap: 1rem;
66
+ padding: 1rem 0;
67
+ }
68
+ .menu-toggle {
69
+ display: none;
70
+ background: none;
71
+ border: none;
72
+ cursor: pointer;
73
+ }
74
+ @media (max-width: 768px) {
75
+ .nav-links { display: none; }
76
+ .menu-toggle { display: block; }
77
+ }
78
+ </style>
79
+ <nav>
80
+ <div class="nav-container">
81
+ <div class="nav-content">
82
+ <a href="index.html" class="logo">
83
+ Quantum Observer πŸ”­
84
+ </a>
85
+ <div class="nav-links">
86
+ <a href="index.html" class="nav-link">
87
+ <i data-feather="home"></i>
88
+ Home
89
+ </a>
90
+ <a href="dashboard.html" class="nav-link">
91
+ <i data-feather="activity"></i>
92
+ Dashboard
93
+ </a>
94
+ <a href="monitoring.html" class="nav-link">
95
+ <i data-feather="eye"></i>
96
+ Monitoring
97
+ </a>
98
+ <a href="observers.html" class="nav-link">
99
+ <i data-feather="users"></i>
100
+ Observers
101
+ </a>
102
+ <a href="security.html" class="nav-link">
103
+ <i data-feather="shield"></i>
104
+ Security
105
+ </a>
106
+ </div>
107
+ <button class="menu-toggle" data-menu-toggle>
108
+ <i data-feather="menu"></i>
109
+ </button>
110
+ </div>
111
+ <div class="mobile-menu hidden" data-mobile-menu>
112
+ <a href="index.html" class="nav-link">
113
+ <i data-feather="home"></i>
114
+ Home
115
+ </a>
116
+ <a href="dashboard.html" class="nav-link">
117
+ <i data-feather="activity"></i>
118
+ Dashboard
119
+ </a>
120
+ <a href="monitoring.html" class="nav-link">
121
+ <i data-feather="eye"></i>
122
+ Monitoring
123
+ </a>
124
+ <a href="observers.html" class="nav-link">
125
+ <i data-feather="users"></i>
126
+ Observers
127
+ </a>
128
+ <a href="security.html" class="nav-link">
129
+ <i data-feather="shield"></i>
130
+ Security
131
+ </a>
132
+ </div>
133
+ </div>
134
+ </nav>
135
+ <script src="https://unpkg.com/feather-icons"></script>
136
+ <script>feather.replace();</script>
137
+ `;
138
+ }
139
+ }
140
+
141
+ customElements.define('custom-navbar', CustomNavbar);
dashboard.html ADDED
@@ -0,0 +1,204 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Dashboard | Quantum Observer Network</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
+ primary: '#ec4899',
17
+ secondary: '#84cc16'
18
+ }
19
+ }
20
+ }
21
+ }
22
+ </script>
23
+ </head>
24
+ <body class="bg-gray-50 text-gray-800">
25
+ <custom-navbar></custom-navbar>
26
+
27
+ <main class="min-h-screen">
28
+ <!-- Dashboard Header -->
29
+ <section class="bg-white shadow-sm">
30
+ <div class="container mx-auto px-4 py-6">
31
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center">
32
+ <h1 class="text-3xl font-bold">
33
+ <span class="text-primary">Quantum</span> Dashboard
34
+ </h1>
35
+ <div class="flex items-center space-x-4 mt-4 md:mt-0">
36
+ <div class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">
37
+ <i data-feather="check-circle" class="inline w-4 h-4 mr-1"></i>
38
+ System Operational
39
+ </div>
40
+ <div class="text-sm text-gray-500">
41
+ Last updated: <span id="lastUpdated">Just now</span>
42
+ </div>
43
+ </div>
44
+ </div>
45
+ </div>
46
+ </section>
47
+
48
+ <!-- Main Dashboard Grid -->
49
+ <section class="container mx-auto px-4 py-8">
50
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
51
+ <!-- Quantum Integrity Card -->
52
+ <div class="bg-white rounded-xl shadow-md p-6 border-l-4 border-primary">
53
+ <div class="flex justify-between items-start">
54
+ <div>
55
+ <h3 class="text-lg font-semibold text-gray-700">Quantum Integrity</h3>
56
+ <p class="text-3xl font-bold mt-2">89.7%</p>
57
+ <p class="text-sm text-gray-500 mt-1">+0.2% from last hour</p>
58
+ </div>
59
+ <div class="bg-pink-100 p-3 rounded-lg">
60
+ <i data-feather="cpu" class="text-primary w-6 h-6"></i>
61
+ </div>
62
+ </div>
63
+ <div class="mt-6">
64
+ <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
65
+ <div class="h-full bg-primary rounded-full" style="width: 89.7%"></div>
66
+ </div>
67
+ </div>
68
+ </div>
69
+
70
+ <!-- Observer Network Card -->
71
+ <div class="bg-white rounded-xl shadow-md p-6 border-l-4 border-secondary">
72
+ <div class="flex justify-between items-start">
73
+ <div>
74
+ <h3 class="text-lg font-semibold text-gray-700">Observer Network</h3>
75
+ <p class="text-3xl font-bold mt-2">8/12</p>
76
+ <p class="text-sm text-gray-500 mt-1">2 observers in standby</p>
77
+ </div>
78
+ <div class="bg-lime-100 p-3 rounded-lg">
79
+ <i data-feather="users" class="text-secondary w-6 h-6"></i>
80
+ </div>
81
+ </div>
82
+ <div class="mt-6">
83
+ <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
84
+ <div class="h-full bg-secondary rounded-full" style="width: 66.6%"></div>
85
+ </div>
86
+ </div>
87
+ </div>
88
+
89
+ <!-- Reality Coherence Card -->
90
+ <div class="bg-white rounded-xl shadow-md p-6 border-l-4 border-primary">
91
+ <div class="flex justify-between items-start">
92
+ <div>
93
+ <h3 class="text-lg font-semibold text-gray-700">Reality Coherence</h3>
94
+ <p class="text-3xl font-bold mt-2">94.2%</p>
95
+ <p class="text-sm text-gray-500 mt-1">Stable (+0.1%)</p>
96
+ </div>
97
+ <div class="bg-pink-100 p-3 rounded-lg">
98
+ <i data-feather="globe" class="text-primary w-6 h-6"></i>
99
+ </div>
100
+ </div>
101
+ <div class="mt-6">
102
+ <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
103
+ <div class="h-full bg-primary rounded-full" style="width: 94.2%"></div>
104
+ </div>
105
+ </div>
106
+ </div>
107
+ </div>
108
+
109
+ <!-- System Activity Section -->
110
+ <div class="mt-8 grid grid-cols-1 lg:grid-cols-2 gap-8">
111
+ <!-- Activity Timeline -->
112
+ <div class="bg-white rounded-xl shadow-md p-6">
113
+ <h3 class="text-xl font-semibold mb-6">Recent Activity</h3>
114
+ <div class="space-y-6">
115
+ <div class="flex items-start">
116
+ <div class="bg-pink-100 p-2 rounded-full mr-4">
117
+ <i data-feather="alert-circle" class="text-primary w-5 h-5"></i>
118
+ </div>
119
+ <div>
120
+ <p class="font-medium">Observer #7 detected anomaly</p>
121
+ <p class="text-sm text-gray-500 mt-1">2 minutes ago</p>
122
+ </div>
123
+ </div>
124
+ <div class="flex items-start">
125
+ <div class="bg-lime-100 p-2 rounded-full mr-4">
126
+ <i data-feather="check-circle" class="text-secondary w-5 h-5"></i>
127
+ </div>
128
+ <div>
129
+ <p class="font-medium">Observer #3 came online</p>
130
+ <p class="text-sm text-gray-500 mt-1">12 minutes ago</p>
131
+ </div>
132
+ </div>
133
+ <div class="flex items-start">
134
+ <div class="bg-pink-100 p-2 rounded-full mr-4">
135
+ <i data-feather="refresh-cw" class="text-primary w-5 h-5"></i>
136
+ </div>
137
+ <div>
138
+ <p class="font-medium">Quantum recalibration complete</p>
139
+ <p class="text-sm text-gray-500 mt-1">27 minutes ago</p>
140
+ </div>
141
+ </div>
142
+ </div>
143
+ </div>
144
+
145
+ <!-- System Status -->
146
+ <div class="bg-white rounded-xl shadow-md p-6">
147
+ <h3 class="text-xl font-semibold mb-6">System Status</h3>
148
+ <div class="grid grid-cols-2 gap-4">
149
+ <div class="bg-gray-50 p-4 rounded-lg">
150
+ <div class="flex items-center">
151
+ <div class="bg-green-100 p-2 rounded-full mr-3">
152
+ <i data-feather="check" class="text-green-600 w-4 h-4"></i>
153
+ </div>
154
+ <span class="font-medium">Level 0</span>
155
+ </div>
156
+ <p class="text-sm text-gray-500 mt-2">Physical layer nominal</p>
157
+ </div>
158
+ <div class="bg-gray-50 p-4 rounded-lg">
159
+ <div class="flex items-center">
160
+ <div class="bg-green-100 p-2 rounded-full mr-3">
161
+ <i data-feather="check" class="text-green-600 w-4 h-4"></i>
162
+ </div>
163
+ <span class="font-medium">Level 1</span>
164
+ </div>
165
+ <p class="text-sm text-gray-500 mt-2">Cameras operational</p>
166
+ </div>
167
+ <div class="bg-gray-50 p-4 rounded-lg">
168
+ <div class="flex items-center">
169
+ <div class="bg-yellow-100 p-2 rounded-full mr-3">
170
+ <i data-feather="alert-triangle" class="text-yellow-600 w-4 h-4"></i>
171
+ </div>
172
+ <span class="font-medium">Level 2</span>
173
+ </div>
174
+ <p class="text-sm text-gray-500 mt-2">4/6 mobile sensors active</p>
175
+ </div>
176
+ <div class="bg-gray-50 p-4 rounded-lg">
177
+ <div class="flex items-center">
178
+ <div class="bg-green-100 p-2 rounded-full mr-3">
179
+ <i data-feather="check" class="text-green-600 w-4 h-4"></i>
180
+ </div>
181
+ <span class="font-medium">Level 3</span>
182
+ </div>
183
+ <p class="text-sm text-gray-500 mt-2">AR interface stable</p>
184
+ </div>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ </section>
189
+ </main>
190
+
191
+ <custom-footer></custom-footer>
192
+
193
+ <script src="components/navbar.js"></script>
194
+ <script src="components/footer.js"></script>
195
+ <script src="script.js"></script>
196
+ <script>
197
+ feather.replace();
198
+ // Update timestamp every minute
199
+ setInterval(() => {
200
+ document.getElementById('lastUpdated').textContent = new Date().toLocaleTimeString();
201
+ }, 60000);
202
+ </script>
203
+ </body>
204
+ </html>
index.html CHANGED
@@ -1,19 +1,160 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Quantum Observer Network</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
+ primary: '#ec4899',
17
+ secondary: '#84cc16'
18
+ }
19
+ }
20
+ }
21
+ }
22
+ </script>
23
+ </head>
24
+ <body class="bg-white text-gray-800">
25
+ <custom-navbar></custom-navbar>
26
+
27
+ <main class="min-h-screen">
28
+ <!-- Hero Section -->
29
+ <section class="relative bg-gradient-to-br from-pink-50 to-lime-50 py-20">
30
+ <div class="container mx-auto px-4">
31
+ <div class="text-center max-w-4xl mx-auto">
32
+ <h1 class="text-5xl md:text-6xl font-bold text-gray-900 mb-6">
33
+ Quantum <span class="text-primary">Observer</span> Network
34
+ </h1>
35
+ <p class="text-xl md:text-2xl text-gray-600 mb-8 leading-relaxed">
36
+ Recursive security monitoring where every observer becomes the observed
37
+ </p>
38
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
39
+ <a href="dashboard.html" class="bg-primary hover:bg-pink-600 text-white px-8 py-4 rounded-xl font-semibold transition-all duration-300 transform hover:scale-105 shadow-lg">
40
+ <i data-feather="activity" class="inline w-5 h-5 mr-2"></i>
41
+ Access Dashboard
42
+ </a>
43
+ <a href="monitoring.html" class="bg-secondary hover:bg-lime-600 text-white px-8 py-4 rounded-xl font-semibold transition-all duration-300 transform hover:scale-105 shadow-lg">
44
+ <i data-feather="eye" class="inline w-5 h-5 mr-2"></i>
45
+ Live Monitoring
46
+ </a>
47
+ </div>
48
+ </div>
49
+ </div>
50
+ </section>
51
+
52
+ <!-- System Architecture -->
53
+ <section class="py-20 bg-white">
54
+ <div class="container mx-auto px-4">
55
+ <h2 class="text-4xl font-bold text-center mb-16">System Architecture</h2>
56
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
57
+ <!-- Level 0 -->
58
+ <div class="bg-gradient-to-br from-pink-50 to-pink-100 p-6 rounded-2xl border border-pink-200">
59
+ <div class="text-primary mb-4">
60
+ <i data-feather="cpu" class="w-12 h-12"></i>
61
+ </div>
62
+ <h3 class="text-xl font-bold mb-3">Level 0: Physical Layer</h3>
63
+ <ul class="text-gray-600 space-y-2">
64
+ <li>β€’ Photon Detection</li>
65
+ <li>β€’ Quantum Sensors</li>
66
+ <li>β€’ Adaptive Optics</li>
67
+ </ul>
68
+ </div>
69
+
70
+ <!-- Level 1 -->
71
+ <div class="bg-gradient-to-br from-lime-50 to-lime-100 p-6 rounded-2xl border border-lime-200">
72
+ <div class="text-secondary mb-4">
73
+ <i data-feather="video" class="w-12 h-12"></i>
74
+ </div>
75
+ <h3 class="text-xl font-bold mb-3">Level 1: System Cameras</h3>
76
+ <ul class="text-gray-600 space-y-2">
77
+ <li>β€’ Observer Detection</li>
78
+ <li>β€’ Pattern Analysis</li>
79
+ <li>β€’ Real-time Processing</li>
80
+ </ul>
81
+ </div>
82
+
83
+ <!-- Level 2 -->
84
+ <div class="bg-gradient-to-br from-pink-50 to-pink-100 p-6 rounded-2xl border border-pink-200">
85
+ <div class="text-primary mb-4">
86
+ <i data-feather="smartphone" class="w-12 h-12"></i>
87
+ </div>
88
+ <h3 class="text-xl font-bold mb-3">Level 2: Mobile Sensors</h3>
89
+ <ul class="text-gray-600 space-y-2">
90
+ <li>β€’ Distributed Network</li>
91
+ <li>β€’ Collective Intelligence</li>
92
+ <li>β€’ Secure Enclave</li>
93
+ </ul>
94
+ </div>
95
+
96
+ <!-- Level 3 -->
97
+ <div class="bg-gradient-to-br from-lime-50 to-lime-100 p-6 rounded-2xl border border-lime-200">
98
+ <div class="text-secondary mb-4">
99
+ <i data-feather="glasses" class="w-12 h-12"></i>
100
+ </div>
101
+ <h3 class="text-xl font-bold mb-3">Level 3: Reality Interface</h3>
102
+ <ul class="text-gray-600 space-y-2">
103
+ <li>β€’ AR Overlay</li>
104
+ <li>β€’ Tactile Response</li>
105
+ <li>β€’ Intervention Protocol</li>
106
+ </ul>
107
+ </div>
108
+ </div>
109
+ </section>
110
+
111
+ <!-- Live Metrics -->
112
+ <section class="py-20 bg-gradient-to-br from-pink-50 to-lime-50">
113
+ <div class="container mx-auto px-4">
114
+ <h2 class="text-4xl font-bold text-center mb-16">Real-time Security Metrics</h2>
115
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
116
+ <div class="bg-white p-6 rounded-2xl shadow-lg border border-pink-200">
117
+ <div class="flex items-center justify-between mb-4">
118
+ <h3 class="text-lg font-semibold">Quantum Integrity</h3>
119
+ <span class="text-primary font-bold">89%</span>
120
+ </div>
121
+ <div class="flex items-center">
122
+ <div class="w-full bg-gray-200 rounded-full h-3">
123
+ <div class="bg-primary h-3 rounded-full" style="width: 89%"></div>
124
+ </div>
125
+ </div>
126
+
127
+ <div class="bg-white p-6 rounded-2xl shadow-lg border border-lime-200">
128
+ <div class="flex items-center justify-between mb-4">
129
+ <h3 class="text-lg font-semibold">Active Observers</h3>
130
+ <span class="text-secondary font-bold">8/12</span>
131
+ </div>
132
+ <div class="flex items-center">
133
+ <div class="w-full bg-gray-200 rounded-full h-3">
134
+ <div class="bg-secondary h-3 rounded-full" style="width: 66%"></div>
135
+ </div>
136
+ </div>
137
+
138
+ <div class="bg-white p-6 rounded-2xl shadow-lg border border-pink-200">
139
+ <div class="flex items-center justify-between mb-4">
140
+ <h3 class="text-lg font-semibold">System Stability</h3>
141
+ <span class="text-primary font-bold">Ξ” +0.02</span>
142
+ </div>
143
+ <div class="text-sm text-gray-600">Within optimal range</div>
144
+ </div>
145
+ </div>
146
+ </div>
147
+ </section>
148
+ </main>
149
+
150
+ <custom-footer></custom-footer>
151
+
152
+ <script src="components/navbar.js"></script>
153
+ <script src="components/footer.js"></script>
154
+ <script src="script.js"></script>
155
+ <script>
156
+ feather.replace();
157
+ </script>
158
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
159
+ </body>
160
+ </html>
monitoring.html ADDED
@@ -0,0 +1,227 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Live Monitoring | Quantum Observer Network</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 src="https://cdn.jsdelivr.net/npm/chart.js"></script>
12
+ <script>
13
+ tailwind.config = {
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: '#ec4899',
18
+ secondary: '#84cc16'
19
+ }
20
+ }
21
+ }
22
+ }
23
+ </script>
24
+ </head>
25
+ <body class="bg-gray-50 text-gray-800">
26
+ <custom-navbar></custom-navbar>
27
+
28
+ <main class="min-h-screen">
29
+ <!-- Monitoring Header -->
30
+ <section class="bg-white shadow-sm">
31
+ <div class="container mx-auto px-4 py-6">
32
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center">
33
+ <h1 class="text-3xl font-bold">
34
+ <span class="text-secondary">Live</span> Monitoring
35
+ </h1>
36
+ <div class="flex items-center space-x-4 mt-4 md:mt-0">
37
+ <div class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">
38
+ <i data-feather="activity" class="inline w-4 h-4 mr-1"></i>
39
+ Streaming Data
40
+ </div>
41
+ <div class="text-sm text-gray-500">
42
+ Refresh: <span class="font-medium">5s</span>
43
+ </div>
44
+ </div>
45
+ </div>
46
+ </div>
47
+ </section>
48
+
49
+ <!-- Main Monitoring Grid -->
50
+ <section class="container mx-auto px-4 py-8">
51
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
52
+ <!-- Quantum Fluctuations Chart -->
53
+ <div class="bg-white rounded-xl shadow-md p-6">
54
+ <div class="flex justify-between items-center mb-6">
55
+ <h3 class="text-lg font-semibold">Quantum Fluctuations</h3>
56
+ <div class="flex space-x-2">
57
+ <button class="px-3 py-1 bg-gray-100 rounded-lg text-sm">1h</button>
58
+ <button class="px-3 py-1 bg-primary text-white rounded-lg text-sm">24h</button>
59
+ <button class="px-3 py-1 bg-gray-100 rounded-lg text-sm">7d</button>
60
+ </div>
61
+ </div>
62
+ <canvas id="quantumChart" height="250"></canvas>
63
+ </div>
64
+
65
+ <!-- Observer Status -->
66
+ <div class="bg-white rounded-xl shadow-md p-6">
67
+ <h3 class="text-lg font-semibold mb-6">Observer Status</h3>
68
+ <div class="space-y-4">
69
+ <div class="flex items-center justify-between">
70
+ <div class="flex items-center">
71
+ <div class="w-3 h-3 bg-green-500 rounded-full mr-3"></div>
72
+ <span>Observer #1</span>
73
+ </div>
74
+ <span class="text-sm text-gray-500">Active (12.7ms)</span>
75
+ </div>
76
+ <div class="flex items-center justify-between">
77
+ <div class="flex items-center">
78
+ <div class="w-3 h-3 bg-green-500 rounded-full mr-3"></div>
79
+ <span>Observer #2</span>
80
+ </div>
81
+ <span class="text-sm text-gray-500">Active (8.2ms)</span>
82
+ </div>
83
+ <div class="flex items-center justify-between">
84
+ <div class="flex items-center">
85
+ <div class="w-3 h-3 bg-yellow-500 rounded-full mr-3"></div>
86
+ <span>Observer #3</span>
87
+ </div>
88
+ <span class="text-sm text-gray-500">Standby</span>
89
+ </div>
90
+ <div class="flex items-center justify-between">
91
+ <div class="flex items-center">
92
+ <div class="w-3 h-3 bg-green-500 rounded-full mr-3"></div>
93
+ <span>Observer #4</span>
94
+ </div>
95
+ <span class="text-sm text-gray-500">Active (15.1ms)</span>
96
+ </div>
97
+ <div class="flex items-center justify-between">
98
+ <div class="flex items-center">
99
+ <div class="w-3 h-3 bg-red-500 rounded-full mr-3"></div>
100
+ <span>Observer #5</span>
101
+ </div>
102
+ <span class="text-sm text-gray-500">Offline</span>
103
+ </div>
104
+ </div>
105
+ </div>
106
+
107
+ <!-- Anomaly Detection -->
108
+ <div class="bg-white rounded-xl shadow-md p-6">
109
+ <h3 class="text-lg font-semibold mb-6">Anomaly Detection</h3>
110
+ <div class="flex items-center justify-between mb-4">
111
+ <div>
112
+ <p class="text-2xl font-bold text-primary">3</p>
113
+ <p class="text-sm text-gray-500">Active anomalies</p>
114
+ </div>
115
+ <div class="bg-pink-100 p-3 rounded-lg">
116
+ <i data-feather="alert-triangle" class="text-primary w-6 h-6"></i>
117
+ </div>
118
+ </div>
119
+ <div class="space-y-3">
120
+ <div class="p-3 bg-red-50 rounded-lg border-l-4 border-red-500">
121
+ <div class="flex justify-between">
122
+ <span class="font-medium">Quantum decoherence</span>
123
+ <span class="text-xs text-red-500">Critical</span>
124
+ </div>
125
+ <p class="text-sm text-gray-600 mt-1">Observer #7, Sector 4</p>
126
+ </div>
127
+ <div class="p-3 bg-yellow-50 rounded-lg border-l-4 border-yellow-500">
128
+ <div class="flex justify-between">
129
+ <span class="font-medium">Latency spike</span>
130
+ <span class="text-xs text-yellow-500">Warning</span>
131
+ </div>
132
+ <p class="text-sm text-gray-600 mt-1">Observer #2, Sector 1</p>
133
+ </div>
134
+ <div class="p-3 bg-yellow-50 rounded-lg border-l-4 border-yellow-500">
135
+ <div class="flex justify-between">
136
+ <span class="font-medium">Signal interference</span>
137
+ <span class="text-xs text-yellow-500">Warning</span>
138
+ </div>
139
+ <p class="text-sm text-gray-600 mt-1">Observer #4, Sector 3</p>
140
+ </div>
141
+ </div>
142
+ </div>
143
+
144
+ <!-- Reality Coherence Map -->
145
+ <div class="bg-white rounded-xl shadow-md p-6">
146
+ <h3 class="text-lg font-semibold mb-6">Reality Coherence Map</h3>
147
+ <div class="bg-gray-100 rounded-lg p-4 flex items-center justify-center">
148
+ <div class="relative">
149
+ <img src="http://static.photos/technology/640x360/42" alt="Reality Map" class="rounded-lg">
150
+ <div class="absolute -top-2 -right-2 bg-red-500 text-white text-xs px-2 py-1 rounded-full">Live</div>
151
+ </div>
152
+ </div>
153
+ <div class="mt-4 grid grid-cols-3 gap-2">
154
+ <div class="text-center">
155
+ <p class="text-sm text-gray-500">Sector 1</p>
156
+ <p class="font-medium">98.2%</p>
157
+ </div>
158
+ <div class="text-center">
159
+ <p class="text-sm text-gray-500">Sector 2</p>
160
+ <p class="font-medium">96.7%</p>
161
+ </div>
162
+ <div class="text-center">
163
+ <p class="text-sm text-gray-500">Sector 3</p>
164
+ <p class="font-medium">91.4%</p>
165
+ </div>
166
+ </div>
167
+ </div>
168
+ </div>
169
+ </section>
170
+ </main>
171
+
172
+ <custom-footer></custom-footer>
173
+
174
+ <script src="components/navbar.js"></script>
175
+ <script src="components/footer.js"></script>
176
+ <script src="script.js"></script>
177
+ <script>
178
+ feather.replace();
179
+
180
+ // Initialize charts
181
+ document.addEventListener('DOMContentLoaded', function() {
182
+ // Quantum Fluctuations Chart
183
+ const quantumCtx = document.getElementById('quantumChart').getContext('2d');
184
+ const quantumChart = new Chart(quantumCtx, {
185
+ type: 'line',
186
+ data: {
187
+ labels: Array.from({length: 24}, (_, i) => `${i}:00`),
188
+ datasets: [{
189
+ label: 'Quantum Variance',
190
+ data: [85, 86, 87, 88, 89, 90, 91, 92, 91, 90, 89, 88, 87, 86, 85, 84, 83, 82, 83, 84, 85, 86, 87, 88],
191
+ borderColor: '#ec4899',
192
+ backgroundColor: 'rgba(236, 72, 153, 0.1)',
193
+ borderWidth: 2,
194
+ tension: 0.4,
195
+ fill: true
196
+ }]
197
+ },
198
+ options: {
199
+ responsive: true,
200
+ plugins: {
201
+ legend: {
202
+ display: false
203
+ }
204
+ },
205
+ scales: {
206
+ y: {
207
+ beginAtZero: false,
208
+ min: 80,
209
+ max: 100
210
+ }
211
+ }
212
+ }
213
+ });
214
+
215
+ // Simulate live data updates
216
+ setInterval(() => {
217
+ const newData = quantumChart.data.datasets[0].data.map(value => {
218
+ const change = (Math.random() - 0.5) * 2;
219
+ return Math.max(80, Math.min(100, value + change));
220
+ });
221
+ quantumChart.data.datasets[0].data = newData;
222
+ quantumChart.update();
223
+ }, 5000);
224
+ });
225
+ </script>
226
+ </body>
227
+ </html>
script.js ADDED
@@ -0,0 +1,175 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Global application state
2
+ class QuantumObserverApp {
3
+ constructor() {
4
+ this.securityLevel = 0;
5
+ this.activeObservers = 0;
6
+ this.systemStatus = 'operational';
7
+ this.metrics = {
8
+ quantumIntegrity: 89,
9
+ observerNetwork: 66,
10
+ realityCoherence: 94
11
+ };
12
+ }
13
+
14
+ // Initialize the application
15
+ init() {
16
+ this.setupEventListeners();
17
+ this.startMetricsUpdate();
18
+ this.initializeQuantumSimulation();
19
+ }
20
+
21
+ // Set up global event listeners
22
+ setupEventListeners() {
23
+ // Mobile menu toggle
24
+ document.addEventListener('click', (e) => {
25
+ if (e.target.closest('[data-menu-toggle]')) {
26
+ this.toggleMobileMenu();
27
+ }
28
+ });
29
+
30
+ // Security status updates
31
+ this.setupSecurityMonitoring();
32
+ }
33
+
34
+ // Simulate real-time metrics updates
35
+ startMetricsUpdate() {
36
+ setInterval(() => {
37
+ this.updateMetrics();
38
+ this.dispatchMetricsUpdate();
39
+ }, 2000);
40
+ }
41
+
42
+ // Update security metrics with realistic fluctuations
43
+ updateMetrics() {
44
+ this.metrics.quantumIntegrity = Math.max(85, Math.min(95,
45
+ this.metrics.quantumIntegrity + (Math.random() - 0.5) * 2
46
+ ));
47
+
48
+ this.metrics.observerNetwork = Math.max(60, Math.min(75,
49
+ this.metrics.observerNetwork + (Math.random() - 0.5) * 3
50
+ ));
51
+
52
+ this.metrics.realityCoherence = Math.max(90, Math.min(98,
53
+ this.metrics.realityCoherence + (Math.random() - 0.5) * 1.5
54
+ ));
55
+ }
56
+
57
+ // Dispatch custom event for metrics updates
58
+ dispatchMetricsUpdate() {
59
+ const event = new CustomEvent('metricsUpdate', {
60
+ detail: { metrics: this.metrics }
61
+ });
62
+ document.dispatchEvent(event);
63
+ }
64
+
65
+ // Toggle mobile menu
66
+ toggleMobileMenu() {
67
+ const menu = document.querySelector('[data-mobile-menu]');
68
+ if (menu) {
69
+ menu.classList.toggle('hidden');
70
+ menu.classList.toggle('flex');
71
+ }
72
+ }
73
+
74
+ // Initialize quantum simulation visualization
75
+ initializeQuantumSimulation() {
76
+ // This would integrate with actual quantum computing APIs
77
+ console.log('Quantum simulation initialized');
78
+ }
79
+
80
+ // Security monitoring setup
81
+ setupSecurityMonitoring() {
82
+ // Monitor for security events
83
+ document.addEventListener('securityAlert', (e) => {
84
+ this.handleSecurityAlert(e.detail);
85
+ });
86
+ }
87
+
88
+ // Handle security alerts
89
+ handleSecurityAlert(alert) {
90
+ console.log('Security alert received:', alert);
91
+
92
+ // Update security level based on alert severity
93
+ if (alert.severity === 'high') {
94
+ this.securityLevel = Math.min(100, this.securityLevel + 10);
95
+ this.triggerEmergencyProtocol(alert);
96
+ }
97
+ }
98
+
99
+ // Emergency protocol trigger
100
+ triggerEmergencyProtocol(alert) {
101
+ // Implement emergency response protocols
102
+ const protocol = {
103
+ phase1: ['isolate_nodes', 'quantum_scrambling'],
104
+ phase2: ['reroute_streams', 'regenerate_keys'],
105
+ phase3: ['forensic_analysis', 'system_hardening']
106
+ };
107
+
108
+ console.log('Emergency protocol activated:', protocol);
109
+ }
110
+ }
111
+
112
+ // Initialize the application when DOM is loaded
113
+ document.addEventListener('DOMContentLoaded', () => {
114
+ const app = new QuantumObserverApp();
115
+ app.init();
116
+ });
117
+
118
+ // API integration for quantum metrics
119
+ class QuantumMetricsAPI {
120
+ constructor() {
121
+ this.baseURL = 'https://api.quantum-observer.net/v1';
122
+ }
123
+
124
+ async getSystemStatus() {
125
+ try {
126
+ const response = await fetch(`${this.baseURL}/status`);
127
+ return await response.json();
128
+ } catch (error) {
129
+ console.error('Failed to fetch system status:', error);
130
+ return { status: 'unknown', metrics: {} };
131
+ }
132
+ }
133
+
134
+ async getObserverNetwork() {
135
+ try {
136
+ const response = await fetch(`${this.baseURL}/observers`);
137
+ return await response.json();
138
+ } catch (error) {
139
+ console.error('Failed to fetch observer network:', error);
140
+ return { observers: [], active: 0 };
141
+ }
142
+ }
143
+ }
144
+
145
+ // Utility functions
146
+ const Utils = {
147
+ // Format percentage values
148
+ formatPercentage: (value) => {
149
+ return `${Math.round(value)}%`;
150
+ },
151
+
152
+ // Generate random security events for demo
153
+ generateSecurityEvent: () => {
154
+ const events = [
155
+ { type: 'photon_anomaly', severity: 'low' },
156
+ { type: 'observer_timeout', severity: 'medium' },
157
+ { type: 'quantum_breach', severity: 'high' }
158
+ ];
159
+
160
+ return events[Math.floor(Math.random() * events.length)];
161
+ },
162
+
163
+ // Debounce function for performance
164
+ debounce: (func, wait) => {
165
+ let timeout;
166
+ return function executedFunction(...args) {
167
+ const later = () => {
168
+ clearTimeout(timeout);
169
+ func(...args);
170
+ };
171
+ clearTimeout(timeout);
172
+ timeout = setTimeout(later, wait);
173
+ };
174
+ }
175
+ };
style.css CHANGED
@@ -1,28 +1,79 @@
 
 
 
 
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
2
+
3
+ * {
4
+ margin: 0;
5
+ padding: 0;
6
+ box-sizing: border-box;
7
+ }
8
+
9
  body {
10
+ font-family: 'Inter', sans-serif;
11
+ line-height: 1.6;
12
+ }
13
+
14
+ /* Custom scrollbar */
15
+ ::-webkit-scrollbar {
16
+ width: 8px;
17
+ }
18
+
19
+ ::-webkit-scrollbar-track {
20
+ background: #f1f1f1;
21
+ }
22
+
23
+ ::-webkit-scrollbar-thumb {
24
+ background: linear-gradient(45deg, #ec4899, #84cc16);
25
+ border-radius: 4px;
26
+ }
27
+
28
+ ::-webkit-scrollbar-thumb:hover {
29
+ background: linear-gradient(45deg, #db2777, #65a30d);
30
+ }
31
+
32
+ /* Animation classes */
33
+ .fade-in {
34
+ animation: fadeIn 0.8s ease-in;
35
+ }
36
+
37
+ @keyframes fadeIn {
38
+ from { opacity: 0; transform: translateY(20px); }
39
+ to { opacity: 1; transform: translateY(0); }
40
  }
41
 
42
+ .pulse-glow {
43
+ animation: pulseGlow 2s infinite;
 
44
  }
45
 
46
+ @keyframes pulseGlow {
47
+ 0%, 100% { box-shadow: 0 0 20px rgba(236, 72, 153, 0.3); }
48
+ 50% { box-shadow: 0 0 30px rgba(236, 72, 153, 0.6); }
 
 
49
  }
50
 
51
+ /* Quantum gradient backgrounds */
52
+ .quantum-gradient {
53
+ background: linear-gradient(135deg, #fdf2f8 0%, #ecfdf5 100%);
 
 
 
54
  }
55
 
56
+ .security-pattern {
57
+ background-image:
58
+ radial-gradient(circle at 20% 80%, rgba(236, 72, 153, 0.1) 0%,
59
+ transparent 50%),
60
+ radial-gradient(circle at 80% 20%, rgba(132, 204, 22, 0.1) 0%,
61
+ transparent 50%);
62
  }
63
+
64
+ /* Component transitions */
65
+ .component-enter {
66
+ opacity: 0;
67
+ transform: scale(0.9);
68
+ }
69
+
70
+ .component-enter-active {
71
+ opacity: 1;
72
+ transform: scale(1);
73
+ transition: all 0.3s ease-out;
74
+ }
75
+
76
+ /* Responsive text scaling */
77
+ .text-responsive {
78
+ font-size: clamp(1rem, 2.5vw, 2rem);
79
+ }