Hugging Face's logo

Spaces:
namht94
/
timberstack-survival-terminal
Running

App Files Community
namht94 commited on
Commit
90e733d
·
verified ·
1 Parent(s): 4fae819

quá đẹp, cho anh thêm example về màn hình login & table theo syle này nữa nha

Browse files
Files changed (12) hide show
  1. README.md +8 -5
  2. components/bot-list.js +152 -0
  3. components/data-table.js +285 -0
  4. components/header.js +112 -0
  5. components/roadmap.js +94 -0
  6. components/sidebar.js +139 -0
  7. components/tool-grid.js +144 -0
  8. index.html +117 -19
  9. login.html +101 -0
  10. script.js +114 -0
  11. style.css +241 -18
  12. table.html +78 -0
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Timberstack Survival Terminal
3
- emoji: 📉
4
- colorFrom: blue
5
- colorTo: yellow
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: Timberstack Survival Terminal 🛡️
3
+ colorFrom: red
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/bot-list.js ADDED
@@ -0,0 +1,152 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomBotList extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ .bot-list {
7
+ display: flex;
8
+ flex-direction: column;
9
+ gap: 0.75rem;
10
+ }
11
+
12
+ .bot-card {
13
+ background: rgba(15, 17, 21, 0.8);
14
+ border: 1px solid #4a5568;
15
+ padding: 0.75rem;
16
+ position: relative;
17
+ }
18
+
19
+ .bot-card.online {
20
+ border-left: 2px solid #ff9f1c;
21
+ }
22
+
23
+ .bot-card.offline {
24
+ opacity: 0.5;
25
+ }
26
+
27
+ .bot-header {
28
+ display: flex;
29
+ justify-content: space-between;
30
+ align-items: center;
31
+ margin-bottom: 0.5rem;
32
+ }
33
+
34
+ .bot-name {
35
+ font-size: 0.875rem;
36
+ font-weight: 600;
37
+ color: #ff9f1c;
38
+ }
39
+
40
+ .bot-status {
41
+ font-size: 0.75rem;
42
+ text-transform: uppercase;
43
+ }
44
+
45
+ .status-online {
46
+ color: #ff9f1c;
47
+ animation: pulse-amber 2s infinite;
48
+ }
49
+
50
+ .status-offline {
51
+ color: #4a5568;
52
+ }
53
+
54
+ .health-gauge {
55
+ display: flex;
56
+ gap: 1px;
57
+ margin: 0.5rem 0;
58
+ }
59
+
60
+ .gauge-segment {
61
+ height: 6px;
62
+ flex: 1;
63
+ background: #4a5568;
64
+ }
65
+
66
+ .gauge-segment.active {
67
+ background: #ff9f1c;
68
+ }
69
+
70
+ .gauge-segment.warning {
71
+ background: #dc2626;
72
+ }
73
+
74
+ .bot-actions {
75
+ display: flex;
76
+ gap: 0.5rem;
77
+ margin-top: 0.5rem;
78
+ }
79
+
80
+ .action-btn {
81
+ background: transparent;
82
+ border: 1px solid #4a5568;
83
+ color: #4a5568;
84
+ padding: 0.25rem 0.5rem;
85
+ font-size: 0.75rem;
86
+ cursor: pointer;
87
+ transition: all 0.3s ease;
88
+ }
89
+
90
+ .action-btn:hover {
91
+ border-color: #ff9f1c;
92
+ color: #ff9f1c;
93
+ }
94
+
95
+ @keyframes pulse-amber {
96
+ 0%, 100% { opacity: 1; }
97
+ 50% { opacity: 0.5; }
98
+ }
99
+ </style>
100
+ <div class="bot-list">
101
+ <div class="bot-card online">
102
+ <div class="bot-header">
103
+ <span class="bot-name">ALPHA-WOLF</span>
104
+ <span class="bot-status status-online">[ONLINE]</span>
105
+ </div>
106
+ <div class="health-gauge">
107
+ ${Array(10).fill().map((_, i) =>
108
+ `<div class="gauge-segment ${i < 8 ? 'active' : ''}"></div>`
109
+ ).join('')}
110
+ </div>
111
+ <div class="bot-actions">
112
+ <button class="action-btn">SLEEP</button>
113
+ <button class="action-btn">SCAN</button>
114
+ </div>
115
+ </div>
116
+
117
+ <div class="bot-card online">
118
+ <div class="bot-header">
119
+ <span class="bot-name">GHOST-RIDER</span>
120
+ <span class="bot-status status-online">[ONLINE]</span>
121
+ </div>
122
+ <div class="health-gauge">
123
+ ${Array(10).fill().map((_, i) =>
124
+ `<div class="gauge-segment ${i < 6 ? 'active' : ''}"></div>`
125
+ ).join('')}
126
+ </div>
127
+ <div class="bot-actions">
128
+ <button class="action-btn">SLEEP</button>
129
+ <button class="action-btn">SCAN</button>
130
+ </div>
131
+ </div>
132
+
133
+ <div class="bot-card offline">
134
+ <div class="bot-header">
135
+ <span class="bot-name">ECHO-SENTINEL</span>
136
+ <span class="bot-status status-offline">[OFFLINE]</span>
137
+ </div>
138
+ <div class="health-gauge">
139
+ ${Array(10).fill().map(() =>
140
+ `<div class="gauge-segment"></div>`
141
+ ).join('')}
142
+ </div>
143
+ <div class="bot-actions">
144
+ <button class="action-btn">WAKE</button>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ `;
149
+ }
150
+ }
151
+
152
+ customElements.define('custom-bot-list', CustomBotList);
components/data-table.js ADDED
@@ -0,0 +1,285 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomDataTable extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ .table-container {
7
+ overflow-x: auto;
8
+ }
9
+
10
+ .terminal-table {
11
+ width: 100%;
12
+ border-collapse: collapse;
13
+ font-size: 0.75rem;
14
+ }
15
+
16
+ .terminal-table th {
17
+ background: rgba(15, 17, 21, 0.9);
18
+ border-bottom: 1px solid #4a5568;
19
+ padding: 0.75rem;
20
+ text-align: left;
21
+ font-family: 'Chakra Petch', monospace;
22
+ text-transform: uppercase;
23
+ letter-spacing: 0.1em;
24
+ color: #4a5568;
25
+ font-weight: 600;
26
+ }
27
+
28
+ .terminal-table td {
29
+ padding: 0.75rem;
30
+ border-bottom: 1px solid rgba(74, 85, 104, 0.3);
31
+ }
32
+
33
+ .terminal-table tr:hover {
34
+ background: rgba(255, 159, 28, 0.05);
35
+ }
36
+
37
+ .terminal-table tr:last-child td {
38
+ border-bottom: none;
39
+ }
40
+
41
+ .status-badge {
42
+ display: inline-block;
43
+ padding: 0.25rem 0.5rem;
44
+ font-size: 0.625rem;
45
+ text-transform: uppercase;
46
+ letter-spacing: 0.1em;
47
+ }
48
+
49
+ .status-success {
50
+ background: rgba(5, 150, 105, 0.1);
51
+ color: #059669;
52
+ border: 1px solid rgba(5, 150, 105, 0.3);
53
+ }
54
+
55
+ .status-warning {
56
+ background: rgba(255, 159, 28, 0.1);
57
+ color: #ff9f1c;
58
+ border: 1px solid rgba(255, 159, 28, 0.3);
59
+ }
60
+
61
+ .status-error {
62
+ background: rgba(220, 38, 38, 0.1);
63
+ color: #dc2626;
64
+ border: 1px solid rgba(220, 38, 38, 0.3);
65
+ }
66
+
67
+ .table-actions {
68
+ display: flex;
69
+ gap: 0.5rem;
70
+ }
71
+
72
+ .action-btn {
73
+ background: transparent;
74
+ border: 1px solid #4a5568;
75
+ color: #4a5568;
76
+ padding: 0.25rem 0.5rem;
77
+ font-size: 0.75rem;
78
+ cursor: pointer;
79
+ transition: all 0.3s ease;
80
+ }
81
+
82
+ .action-btn:hover {
83
+ border-color: #ff9f1c;
84
+ color: #ff9f1c;
85
+ }
86
+
87
+ .pagination {
88
+ display: flex;
89
+ justify-content: space-between;
90
+ align-items: center;
91
+ padding: 1rem;
92
+ border-top: 1px solid #4a5568;
93
+ background: rgba(15, 17, 21, 0.5);
94
+ }
95
+
96
+ .pagination-controls {
97
+ display: flex;
98
+ gap: 0.5rem;
99
+ }
100
+
101
+ .page-info {
102
+ font-size: 0.75rem;
103
+ color: #4a5568;
104
+ }
105
+
106
+ @media (max-width: 768px) {
107
+ .terminal-table {
108
+ font-size: 0.625rem;
109
+ }
110
+
111
+ .action-btn {
112
+ font-size: 0.625rem;
113
+ padding: 0.125rem 0.375rem;
114
+ }
115
+ }
116
+ </style>
117
+ <div class="table-container">
118
+ <table class="terminal-table">
119
+ <thead>
120
+ <tr>
121
+ <th>ID</th>
122
+ <th>Timestamp</th>
123
+ <th>Event Type</th>
124
+ <th>Source</th>
125
+ <th>Status</th>
126
+ <th>Actions</th>
127
+ </tr>
128
+ </thead>
129
+ <tbody>
130
+ <tr>
131
+ <td class="text-[#ff9f1c]">LOG-8472</td>
132
+ <td>23:47:15 AKST</td>
133
+ <td>THREAT DETECTED</td>
134
+ <td>PERIMETER-ALPHA</td>
135
+ <td>
136
+ <span class="status-badge status-error">CRITICAL</span>
137
+ </td>
138
+ <td>
139
+ <div class="table-actions">
140
+ <button class="action-btn" data-action="view">
141
+ <i data-feather="eye"></i>
142
+ </button>
143
+ <button class="action-btn" data-action="resolve">
144
+ <i data-feather="check-circle"></i>
145
+ </button>
146
+ </div>
147
+ </td>
148
+ </tr>
149
+ <tr>
150
+ <td class="text-[#ff9f1c]">LOG-8471</td>
151
+ <td>23:32:08 AKST</td>
152
+ <td>SYSTEM SCAN</td>
153
+ <td>CORE-FURNACE</td>
154
+ <td>
155
+ <span class="status-badge status-success">NOMINAL</span>
156
+ </td>
157
+ <td>
158
+ <div class="table-actions">
159
+ <button class="action-btn" data-action="view">
160
+ <i data-feather="eye"></i>
161
+ </button>
162
+ </td>
163
+ </tr>
164
+ <tr>
165
+ <td class="text-[#ff9f1c]">LOG-8470</td>
166
+ <td>23:15:42 AKST</td>
167
+ <td>BOT UPDATE</td>
168
+ <td>ALPHA-WOLF</td>
169
+ <td>
170
+ <span class="status-badge status-warning">WARNING</span>
171
+ </td>
172
+ <td>
173
+ <div class="table-actions">
174
+ <button class="action-btn" data-action="view">
175
+ <i data-feather="eye"></i>
176
+ </button>
177
+ <button class="action-btn" data-action="resolve">
178
+ <i data-feather="check-circle"></i>
179
+ </button>
180
+ </div>
181
+ </td>
182
+ </tr>
183
+ <tr>
184
+ <td class="text-[#ff9f1c]">LOG-8469</td>
185
+ <td>22:58:27 AKST</td>
186
+ <td>POWER FLUCTUATION</td>
187
+ <td>GRID-BETA</td>
188
+ <td>
189
+ <span class="status-badge status-success">RESOLVED</span>
190
+ </td>
191
+ <td>
192
+ <div class="table-actions">
193
+ <button class="action-btn" data-action="view">
194
+ <i data-feather="eye"></i>
195
+ </button>
196
+ </div>
197
+ </td>
198
+ </tr>
199
+ </tbody>
200
+ </table>
201
+
202
+ <div class="pagination">
203
+ <div class="page-info">
204
+ SHOWING 4 OF 1287 ENTRIES
205
+ </div>
206
+
207
+ <div class="pagination-controls">
208
+ <button class="action-btn">
209
+ <i data-feather="chevron-left"></i>
210
+ </button>
211
+ <button class="action-btn active">
212
+ 1
213
+ </button>
214
+ <button class="action-btn">
215
+ 2
216
+ </button>
217
+ <button class="action-btn">
218
+ 3
219
+ </button>
220
+ <span style="color: #4a5568; padding: 0 0.25rem;">...</button>
221
+ <button class="action-btn">
222
+ 42
223
+ </button>
224
+ <button class="action-btn">
225
+ <i data-feather="chevron-right"></i>
226
+ </button>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ `;
231
+
232
+ // Initialize feather icons and add event listeners
233
+ setTimeout(() => {
234
+ const icons = this.shadowRoot.querySelectorAll('[data-feather]');
235
+ icons.forEach(icon => {
236
+ feather.replace(icon);
237
+ });
238
+
239
+ const actionButtons = this.shadowRoot.querySelectorAll('.action-btn');
240
+ actionButtons.forEach(button => {
241
+ button.addEventListener('click', (e) => {
242
+ const action = button.getAttribute('data-action');
243
+ this.handleTableAction(action, button.closest('tr'));
244
+ });
245
+ });
246
+ }, 100);
247
+ }
248
+
249
+ handleTableAction(action, row) {
250
+ const rowId = row.querySelector('td:first-child').textContent;
251
+
252
+ const modal = document.createElement('div');
253
+ modal.style.cssText = `
254
+ position: fixed;
255
+ top: 0;
256
+ left: 0;
257
+ width: 100%;
258
+ height: 100%;
259
+ background: rgba(0, 0, 0, 0.9);
260
+ color: #ff9f1c;
261
+ font-family: 'JetBrains Mono', monospace;
262
+ padding: 2rem;
263
+ z-index: 1000;
264
+ overflow-y: auto;
265
+ `;
266
+
267
+ modal.innerHTML = `
268
+ <div style="border: 1px solid #4a5568; padding: 1rem;">
269
+ <div style="display: flex; justify-content: space-between; margin-bottom: 1rem;">
270
+ <h3 style="font-family: 'Chakra Petch', monospace; text-transform: uppercase; letter-spacing: 0.1em;">ACTION: ${action.toUpperCase()} - ${rowId}</h3>
271
+ <button onclick="this.parentElement.parentElement.parentElement.remove()" style="background: transparent; border: 1px solid #4a5568; color: #4a5568; padding: 0.25rem 0.5rem; cursor: pointer;">CLOSE</button>
272
+ </div>
273
+ <div style="background: #0a0c10; border: 1px solid #4a5568; padding: 1rem; font-size: 0.875rem;">
274
+ > Executing ${action} on ${rowId}...<br>
275
+ > Processing request...<br>
276
+ > Action completed successfully<br>
277
+ > Systems updated<br>
278
+ </div>
279
+ `;
280
+
281
+ document.body.appendChild(modal);
282
+ }
283
+ }
284
+
285
+ customElements.define('custom-data-table', CustomDataTable);
components/header.js ADDED
@@ -0,0 +1,112 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomHeader extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ .header {
7
+ border-bottom: 1px solid #4a5568;
8
+ padding-bottom: 1rem;
9
+ }
10
+
11
+ .header-top {
12
+ display: flex;
13
+ justify-content: space-between;
14
+ align-items: center;
15
+ margin-bottom: 0.5rem;
16
+ }
17
+
18
+ .system-title {
19
+ font-family: 'Chakra Petch', monospace;
20
+ font-size: 1.5rem;
21
+ text-transform: uppercase;
22
+ letter-spacing: 0.2em;
23
+ color: #ff9f1c;
24
+ }
25
+
26
+ .threat-level {
27
+ display: flex;
28
+ align-items: center;
29
+ gap: 0.5rem;
30
+ font-size: 0.75rem;
31
+ }
32
+
33
+ .threat-indicator {
34
+ width: 8px;
35
+ height: 8px;
36
+ border-radius: 50%;
37
+ background: #dc2626;
38
+ box-shadow: 0 0 8px #dc2626;
39
+ animation: pulse-amber 2s infinite;
40
+ }
41
+
42
+ .header-stats {
43
+ display: grid;
44
+ grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
45
+ gap: 1rem;
46
+ font-size: 0.75rem;
47
+ }
48
+
49
+ .stat-item {
50
+ display: flex;
51
+ justify-content: space-between;
52
+ padding: 0.25rem 0;
53
+ border-bottom: 1px solid rgba(74, 85, 104, 0.3);
54
+ }
55
+
56
+ .stat-label {
57
+ color: #4a5568;
58
+ }
59
+
60
+ .stat-value {
61
+ color: #ff9f1c;
62
+ font-weight: 500;
63
+ }
64
+
65
+ @keyframes pulse-amber {
66
+ 0%, 100% { opacity: 1; }
67
+ 50% { opacity: 0.5; }
68
+ }
69
+
70
+ @media (max-width: 768px) {
71
+ .header-stats {
72
+ grid-template-columns: 1fr;
73
+ }
74
+
75
+ .system-title {
76
+ font-size: 1rem;
77
+ }
78
+ }
79
+ </style>
80
+ <div class="header">
81
+ <div class="header-top">
82
+ <h1 class="system-title">TIMBERSTACK TERMINAL</h1>
83
+ <div class="threat-level">
84
+ <div class="threat-indicator"></div>
85
+ <span>THREAT LEVEL: ELEVATED</span>
86
+ </div>
87
+ </div>
88
+
89
+ <div class="header-stats">
90
+ <div class="stat-item">
91
+ <span class="stat-label">OUTSIDE TEMP:</span>
92
+ <span class="stat-value">-18°C</span>
93
+ </div>
94
+ <div class="stat-item">
95
+ <span class="stat-label">POWER RESERVE:</span>
96
+ <span class="stat-value">94%</span>
97
+ </div>
98
+ <div class="stat-item">
99
+ <span class="stat-label">ACTIVE THREATS:</span>
100
+ <span class="stat-value">3</span>
101
+ </div>
102
+ <div class="stat-item">
103
+ <span class="stat-label">TIME:</span>
104
+ <span class="stat-value">23:47 AKST</span>
105
+ </div>
106
+ </div>
107
+ </div>
108
+ `;
109
+ }
110
+ }
111
+
112
+ customElements.define('custom-header', CustomHeader);
components/roadmap.js ADDED
@@ -0,0 +1,94 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomRoadmap extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ .roadmap-container {
7
+ position: relative;
8
+ min-height: 200px;
9
+ background:
10
+ linear-gradient(90deg, transparent 95%, rgba(74,85,104,0.1) 100%),
11
+ linear-gradient(180deg, transparent 95%, rgba(74,85,104,0.1) 100%);
12
+ background-size: 20px 20px;
13
+ }
14
+
15
+ .milestone {
16
+ position: relative;
17
+ margin-bottom: 1rem;
18
+ padding-left: 1.5rem;
19
+ }
20
+
21
+ .milestone::before {
22
+ content: '▶';
23
+ position: absolute;
24
+ left: 0;
25
+ color: #ff9f1c;
26
+ }
27
+
28
+ .milestone.completed {
29
+ text-decoration: line-through;
30
+ color: #4a5568;
31
+ }
32
+
33
+ .milestone.completed::before {
34
+ content: '✓';
35
+ color: #059669;
36
+ }
37
+
38
+ .milestone.current {
39
+ color: #ff9f1c;
40
+ font-weight: 600;
41
+ }
42
+
43
+ .milestone.current::before {
44
+ content: '●';
45
+ animation: pulse-amber 2s infinite;
46
+ }
47
+
48
+ .milestone-text {
49
+ font-size: 0.75rem;
50
+ line-height: 1.4;
51
+ }
52
+
53
+ .milestone-date {
54
+ font-size: 0.625rem;
55
+ color: #4a5568;
56
+ margin-top: 0.25rem;
57
+ }
58
+
59
+ @keyframes pulse-amber {
60
+ 0%, 100% { opacity: 1; }
61
+ 50% { opacity: 0.5; }
62
+ }
63
+ </style>
64
+ <div class="roadmap-container">
65
+ <div class="milestone completed">
66
+ <div class="milestone-text">Establish Base Infrastructure</div>
67
+ <div class="milestone-date">COMPLETED: 12/15</div>
68
+ </div>
69
+
70
+ <div class="milestone current">
71
+ <div class="milestone-text">Deploy Alpha-Wolf Bot Cluster</div>
72
+ <div class="milestone-date">EST: 48H</div>
73
+ </div>
74
+
75
+ <div class="milestone">
76
+ <div class="milestone-text">Implement Threat Detection System</div>
77
+ <div class="milestone-date">NEXT WAYPOINT</div>
78
+ </div>
79
+
80
+ <div class="milestone">
81
+ <div class="milestone-text">Upgrade Power Management</div>
82
+ <div class="milestone-date">PENDING</div>
83
+ </div>
84
+
85
+ <div class="milestone">
86
+ <div class="milestone-text">Expand Surveillance Network</div>
87
+ <div class="milestone-date">PENDING</div>
88
+ </div>
89
+ </div>
90
+ `;
91
+ }
92
+ }
93
+
94
+ customElements.define('custom-roadmap', CustomRoadmap);
components/sidebar.js ADDED
@@ -0,0 +1,139 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomSidebar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ :host {
7
+ display: block;
8
+ height: 100%;
9
+ }
10
+
11
+ .sidebar {
12
+ height: 100%;
13
+ padding: 1rem 0;
14
+ background: rgba(10, 12, 16, 0.95);
15
+ }
16
+
17
+ .nav-section {
18
+ margin-bottom: 2rem;
19
+ }
20
+
21
+ .section-title {
22
+ font-family: 'Chakra Petch', monospace;
23
+ font-size: 0.75rem;
24
+ text-transform: uppercase;
25
+ color: #4a5568;
26
+ padding: 0.5rem 1rem;
27
+ letter-spacing: 0.1em;
28
+ }
29
+
30
+ .nav-item {
31
+ display: flex;
32
+ align-items: center;
33
+ gap: 0.75rem;
34
+ padding: 0.75rem 1rem;
35
+ color: #4a5568;
36
+ text-decoration: none;
37
+ font-size: 0.875rem;
38
+ transition: all 0.3s ease;
39
+ border-left: 2px solid transparent;
40
+ }
41
+
42
+ .nav-item:hover {
43
+ color: #ff9f1c;
44
+ background: rgba(255, 159, 28, 0.05);
45
+ border-left-color: #ff9f1c;
46
+ }
47
+
48
+ .nav-item.active {
49
+ color: #ff9f1c;
50
+ background: rgba(255, 159, 28, 0.1);
51
+ border-left-color: #ff9f1c;
52
+ }
53
+
54
+ .nav-item i {
55
+ width: 16px;
56
+ height: 16px;
57
+ }
58
+
59
+ .status-indicator {
60
+ width: 6px;
61
+ height: 6px;
62
+ border-radius: 50%;
63
+ margin-left: auto;
64
+ }
65
+
66
+ .status-online {
67
+ background: #ff9f1c;
68
+ box-shadow: 0 0 4px #ff9f1c;
69
+ }
70
+
71
+ .status-offline {
72
+ background: #4a5568;
73
+ }
74
+
75
+ @media (max-width: 768px) {
76
+ .sidebar {
77
+ padding: 0.5rem;
78
+ }
79
+
80
+ .nav-item {
81
+ padding: 1rem;
82
+ font-size: 1rem;
83
+ }
84
+ }
85
+ </style>
86
+ <div class="sidebar">
87
+ <div class="nav-section">
88
+ <div class="section-title">NAVIGATION</div>
89
+ <a href="/" class="nav-item">
90
+ <i data-feather="home"></i>
91
+ DASHBOARD
92
+ </a>
93
+ <a href="/login.html" class="nav-item">
94
+ <i data-feather="shield"></i>
95
+ ACCESS TERMINAL
96
+ </a>
97
+ <a href="/table.html" class="nav-item">
98
+ <i data-feather="file-text"></i>
99
+ SYSTEM LOGS
100
+ </a>
101
+ <a href="/pack" class="nav-item">
102
+ <i data-feather="users"></i>
103
+ THE PACK
104
+ </a>
105
+ </div>
106
+
107
+ <div class="nav-section">
108
+ <div class="section-title">SYSTEMS</div>
109
+ <a href="/armory" class="nav-item">
110
+ <i data-feather="tool"></i>
111
+ ARMORY
112
+ </a>
113
+ <a href="/map" class="nav-item">
114
+ <i data-feather="map"></i>
115
+ TOPOGRAPHIC MAP
116
+ </a>
117
+ </div>
118
+ <div class="nav-section">
119
+ <div class="section-title">ENVIRONMENT</div>
120
+ <a href="#" class="nav-item">
121
+ <i data-feather="sun"></i>
122
+ SEASONAL MODE
123
+ <div class="status-indicator status-online"></div>
124
+ </a>
125
+ </div>
126
+ </div>
127
+ `;
128
+
129
+ // Initialize feather icons in shadow DOM
130
+ setTimeout(() => {
131
+ const icons = this.shadowRoot.querySelectorAll('[data-feather]');
132
+ icons.forEach(icon => {
133
+ feather.replace(icon);
134
+ });
135
+ }, 100);
136
+ }
137
+ }
138
+
139
+ customElements.define('custom-sidebar', CustomSidebar);
components/tool-grid.js ADDED
@@ -0,0 +1,144 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomToolGrid extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ .tool-grid {
7
+ display: grid;
8
+ grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
9
+ gap: 0.5rem;
10
+ }
11
+
12
+ .tool-cartridge {
13
+ background: linear-gradient(135deg, rgba(15,17,21,0.9) 0%, rgba(10,12,16,0.9) 100%);
14
+ border: 1px solid #4a5568;
15
+ padding: 1rem 0.5rem;
16
+ text-align: center;
17
+ cursor: pointer;
18
+ transition: all 0.3s ease;
19
+ position: relative;
20
+ }
21
+
22
+ .tool-cartridge:hover {
23
+ border-color: #ff9f1c;
24
+ box-shadow: 0 0 10px rgba(255, 159, 28, 0.3);
25
+ }
26
+
27
+ .tool-cartridge i {
28
+ color: #4a5568;
29
+ transition: color 0.3s ease;
30
+ }
31
+
32
+ .tool-cartridge:hover i {
33
+ color: #ff9f1c;
34
+ }
35
+
36
+ .tool-name {
37
+ font-size: 0.75rem;
38
+ margin-top: 0.5rem;
39
+ color: #4a5568;
40
+ }
41
+
42
+ .tool-cartridge:hover .tool-name {
43
+ color: #ff9f1c;
44
+ }
45
+
46
+ .tool-cartridge::before {
47
+ content: '';
48
+ position: absolute;
49
+ top: -1px;
50
+ left: -1px;
51
+ right: -1px;
52
+ bottom: -1px;
53
+ border: 1px solid rgba(255, 159, 28, 0.1);
54
+ pointer-events: none;
55
+ }
56
+
57
+ @media (max-width: 768px) {
58
+ .tool-grid {
59
+ grid-template-columns: repeat(3, 1fr);
60
+ }
61
+ }
62
+ </style>
63
+ <div class="tool-grid">
64
+ <div class="tool-cartridge" data-tool="build">
65
+ <i data-feather="package"></i>
66
+ <div class="tool-name">BUILD</div>
67
+ </div>
68
+
69
+ <div class="tool-cartridge" data-tool="deploy">
70
+ <i data-feather="upload-cloud"></i>
71
+ <div class="tool-name">DEPLOY</div>
72
+ </div>
73
+
74
+ <div class="tool-cartridge" data-tool="scan">
75
+ <i data-feather="eye"></i>
76
+ <div class="tool-name">SCAN</div>
77
+ </div>
78
+
79
+ <div class="tool-cartridge" data-tool="monitor">
80
+ <i data-feather="activity"></i>
81
+ <div class="tool-name">MONITOR</div>
82
+ </div>
83
+
84
+ <div class="tool-cartridge" data-tool="backup">
85
+ <i data-feather="save"></i>
86
+ <div class="tool-name">BACKUP</div>
87
+ </div>
88
+
89
+ <div class="tool-cartridge" data-tool="clean">
90
+ <i data-feather="trash-2"></i>
91
+ <div class="tool-name">CLEAN</div>
92
+ </div>
93
+ </div>
94
+ `;
95
+
96
+ // Add click handlers for tools
97
+ setTimeout(() => {
98
+ const cartridges = this.shadowRoot.querySelectorAll('.tool-cartridge');
99
+ cartridges.forEach(cartridge => {
100
+ cartridge.addEventListener('click', () => {
101
+ const tool = cartridge.getAttribute('data-tool');
102
+ this.executeTool(tool);
103
+ });
104
+ });
105
+ }, 100);
106
+ }
107
+
108
+ executeTool(tool) {
109
+ // Simulate tool execution
110
+ const modal = document.createElement('div');
111
+ modal.style.cssText = `
112
+ position: fixed;
113
+ top: 0;
114
+ left: 0;
115
+ width: 100%;
116
+ height: 100%;
117
+ background: rgba(0, 0, 0, 0.9);
118
+ color: #ff9f1c;
119
+ font-family: 'JetBrains Mono', monospace;
120
+ padding: 2rem;
121
+ z-index: 1000;
122
+ overflow-y: auto;
123
+ `;
124
+
125
+ modal.innerHTML = `
126
+ <div style="border: 1px solid #4a5568; padding: 1rem;">
127
+ <div style="display: flex; justify-content: space-between; margin-bottom: 1rem;">
128
+ <h3 style="font-family: 'Chakra Petch', monospace; text-transform: uppercase; letter-spacing: 0.1em;">EXECUTING: ${tool.toUpperCase()}</h3>
129
+ <button onclick="this.parentElement.parentElement.parentElement.remove()" style="background: transparent; border: 1px solid #4a5568; color: #4a5568; padding: 0.25rem 0.5rem; cursor: pointer;">CLOSE</button>
130
+ </div>
131
+ <div style="background: #0a0c10; border: 1px solid #4a5568; padding: 1rem; font-size: 0.875rem;">
132
+ > Initializing ${tool} protocol...<br>
133
+ > Loading dependencies...<br>
134
+ > Executing command sequence...<br>
135
+ > ${tool.toUpperCase()} COMPLETE<br>
136
+ > Systems nominal<br>
137
+ </div>
138
+ `;
139
+
140
+ document.body.appendChild(modal);
141
+ }
142
+ }
143
+
144
+ customElements.define('custom-tool-grid', CustomToolGrid);
index.html CHANGED
@@ -1,19 +1,117 @@
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>TIMBERSTACK - Survivalist Terminal</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <script>
13
+ tailwind.config = {
14
+ theme: {
15
+ extend: {
16
+ fontFamily: {
17
+ 'stencil': ['Chakra Petch', 'monospace'],
18
+ 'mono': ['JetBrains Mono', 'monospace'],
19
+ }
20
+ }
21
+ }
22
+ }
23
+ </script>
24
+ </head>
25
+ <body class="bg-[#0a0c10] text-white font-mono overflow-hidden">
26
+ <!-- Noise Overlay -->
27
+ <div class="noise-overlay"></div>
28
+
29
+ <!-- Scanlines -->
30
+ <div class="scanlines"></div>
31
+
32
+ <!-- Snow Particles (Winter Mode) -->
33
+ <div class="snow-container"></div>
34
+
35
+ <div class="container mx-auto h-screen flex">
36
+ <!-- Sidebar -->
37
+ <div class="w-64 border-r-2 border-[#4a5568] border-double">
38
+ <custom-sidebar></custom-sidebar>
39
+ </div>
40
+
41
+ <!-- Main Content -->
42
+ <div class="flex-1 p-6">
43
+ <custom-header></custom-header>
44
+
45
+ <!-- Dashboard Grid -->
46
+ <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6 mt-6">
47
+ <!-- System Status -->
48
+ <div class="terminal-card">
49
+ <div class="card-header">
50
+ <i data-feather="server" class="text-[#ff9f1c]"></i>
51
+ <h3 class="font-stencil uppercase">FURNACE STATUS</h3>
52
+ </div>
53
+ <div class="card-content">
54
+ <div class="status-line">
55
+ <span class="label">TEMP:</span>
56
+ <span class="value text-[#ff9f1c]">42°C</span>
57
+ </div>
58
+ <div class="status-line">
59
+ <span class="label">LOAD:</span>
60
+ <span class="value text-cyan-600">[██████░░] 68%</span>
61
+ </div>
62
+ <div class="status-line">
63
+ <span class="label">UPTIME:</span>
64
+ <span class="value text-[#4a5568]">14d 8h 32m</span>
65
+ </div>
66
+ </div>
67
+ </div>
68
+
69
+ <!-- Bot Roster -->
70
+ <div class="terminal-card">
71
+ <div class="card-header">
72
+ <i data-feather="users" class="text-[#ff9f1c]"></i>
73
+ <h3 class="font-stencil uppercase">THE PACK</h3>
74
+ </div>
75
+ <div class="card-content">
76
+ <custom-bot-list></custom-bot-list>
77
+ </div>
78
+ </div>
79
+
80
+ <!-- Tools Armory -->
81
+ <div class="terminal-card">
82
+ <div class="card-header">
83
+ <i data-feather="tool" class="text-[#ff9f1c]"></i>
84
+ <h3 class="font-stencil uppercase">ARMORY</h3>
85
+ </div>
86
+ <div class="card-content">
87
+ <custom-tool-grid></custom-tool-grid>
88
+ </div>
89
+ </div>
90
+
91
+ <!-- Roadmap -->
92
+ <div class="terminal-card lg:col-span-2 xl:col-span-1">
93
+ <div class="card-header">
94
+ <i data-feather="map" class="text-[#ff9f1c]"></i>
95
+ <h3 class="font-stencil uppercase">TOPOGRAPHIC MAP</h3>
96
+ </div>
97
+ <div class="card-content">
98
+ <custom-roadmap></custom-roadmap>
99
+ </div>
100
+ </div>
101
+ </div>
102
+ </div>
103
+ </div>
104
+ <!-- Component Scripts -->
105
+ <script src="components/sidebar.js"></script>
106
+ <script src="components/header.js"></script>
107
+ <script src="components/bot-list.js"></script>
108
+ <script src="components/tool-grid.js"></script>
109
+ <script src="components/roadmap.js"></script>
110
+
111
+ <script src="script.js"></script>
112
+ <script>
113
+ feather.replace();
114
+ </script>
115
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
116
+ </body>
117
+ </html>
login.html ADDED
@@ -0,0 +1,101 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>TIMBERSTACK - Access Terminal</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <script>
13
+ tailwind.config = {
14
+ theme: {
15
+ extend: {
16
+ fontFamily: {
17
+ 'stencil': ['Chakra Petch', 'monospace'],
18
+ 'mono': ['JetBrains Mono', 'monospace'],
19
+ }
20
+ }
21
+ }
22
+ }
23
+ </script>
24
+ </head>
25
+ <body class="bg-[#0a0c10] text-white font-mono overflow-hidden">
26
+ <!-- Noise Overlay -->
27
+ <div class="noise-overlay"></div>
28
+
29
+ <!-- Scanlines -->
30
+ <div class="scanlines"></div>
31
+
32
+ <!-- Snow Particles (Winter Mode) -->
33
+ <div class="snow-container"></div>
34
+
35
+ <div class="container mx-auto h-screen flex items-center justify-center">
36
+ <div class="terminal-card w-96">
37
+ <div class="card-header">
38
+ <i data-feather="shield" class="text-[#ff9f1c]"></i>
39
+ <h3 class="font-stencil uppercase">ACCESS TERMINAL</h3>
40
+ </div>
41
+ <div class="card-content">
42
+ <form id="loginForm" class="space-y-4">
43
+ <div class="input-group">
44
+ <label class="block text-xs text-[#4a5568] mb-2 uppercase tracking-wider">IDENTIFICATION</label>
45
+ <div class="relative">
46
+ <input type="text"
47
+ class="terminal-input w-full pl-8"
48
+ placeholder="USER-XXXXX"
49
+ required>
50
+ <i data-feather="user" class="absolute left-2 top-1/2 transform -translate-y-1/2 text-[#4a5568]"></i>
51
+ </div>
52
+ </div>
53
+
54
+ <div class="input-group">
55
+ <label class="block text-xs text-[#4a5568] mb-2 uppercase tracking-wider">AUTHENTICATION</label>
56
+ <div class="relative">
57
+ <input type="password"
58
+ class="terminal-input w-full pl-8"
59
+ placeholder="••••••••"
60
+ required>
61
+ <i data-feather="lock" class="absolute left-2 top-1/2 transform -translate-y-1/2 text-[#4a5568]"></i>
62
+ </div>
63
+ </div>
64
+
65
+ <div class="flex items-center justify-between">
66
+ <label class="flex items-center space-x-2">
67
+ <input type="checkbox" class="form-checkbox text-[#ff9f1c] bg-transparent border-[#4a5568]">
68
+ <span class="text-xs text-[#4a5568]">REMEMBER TERMINAL</span>
69
+ </label>
70
+ <a href="#" class="text-xs text-[#ff9f1c] hover:underline">RECOVER ACCESS</a>
71
+ </div>
72
+
73
+ <button type="submit"
74
+ class="w-full py-2 border border-[#ff9f1c] text-[#ff9f1c] hover:bg-[#ff9f1c] hover:text-[#0a0c10] transition-all duration-300 font-stencil uppercase tracking-wider">
75
+ INITIATE BOOT SEQUENCE
76
+ </button>
77
+ </form>
78
+ </div>
79
+ </div>
80
+ </div>
81
+
82
+ <script src="script.js"></script>
83
+ <script>
84
+ feather.replace();
85
+
86
+ document.getElementById('loginForm').addEventListener('submit', function(e) {
87
+ e.preventDefault();
88
+ // Simulate authentication process
89
+ const submitBtn = this.querySelector('button[type="submit"]');
90
+ const originalText = submitBtn.textContent;
91
+
92
+ submitBtn.innerHTML = '<i data-feather="loader" class="animate-spin mx-auto"></i>';
93
+ feather.replace();
94
+
95
+ setTimeout(() => {
96
+ window.location.href = 'index.html';
97
+ }, 2000);
98
+ });
99
+ </script>
100
+ </body>
101
+ </html>
script.js ADDED
@@ -0,0 +1,114 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Main application script for Timberstack
2
+
3
+ class TimberstackApp {
4
+ constructor() {
5
+ this.init();
6
+ }
7
+
8
+ init() {
9
+ this.createSnowEffect();
10
+ this.setupEventListeners();
11
+ this.loadSystemStatus();
12
+ }
13
+
14
+ // Create winter snow effect
15
+ createSnowEffect() {
16
+ const snowContainer = document.querySelector('.snow-container');
17
+ if (!snowContainer) return;
18
+
19
+ for (let i = 0; i < 50; i++) {
20
+ const snowflake = document.createElement('div');
21
+ snowflake.className = 'snowflake';
22
+
23
+ const size = Math.random() * 4 + 2;
24
+ snowflake.style.width = `${size}px`;
25
+ snowflake.style.height = `${size}px`;
26
+ snowflake.style.left = `${Math.random() * 100}vw`;
27
+ snowflake.style.animationDuration = `${Math.random() * 3 + 2}s`;
28
+ snowflake.style.animationDelay = `${Math.random() * 5}s`;
29
+
30
+ snowContainer.appendChild(snowflake);
31
+ }
32
+ }
33
+
34
+ setupEventListeners() {
35
+ // Global keyboard shortcuts
36
+ document.addEventListener('keydown', (e) => {
37
+ if (e.ctrlKey && e.key === 'k') {
38
+ e.preventDefault();
39
+ this.toggleCommandPalette();
40
+ }
41
+ });
42
+ }
43
+
44
+ toggleCommandPalette() {
45
+ // Command palette implementation
46
+ console.log('Command palette toggled');
47
+ }
48
+
49
+ loadSystemStatus() {
50
+ // Mock system status data
51
+ const systemData = {
52
+ temperature: 42,
53
+ load: 68,
54
+ uptime: '14d 8h 32m',
55
+ threats: 3,
56
+ power: 94
57
+ };
58
+
59
+ this.updateDashboard(systemData);
60
+ }
61
+
62
+ updateDashboard(data) {
63
+ // Update dashboard elements with real data
64
+ console.log('Updating dashboard with:', data);
65
+ }
66
+
67
+ // Simulate terminal boot sequence
68
+ simulateBootSequence() {
69
+ const bootMessages = [
70
+ '> INITIALIZING TIMBERSTACK TERMINAL...',
71
+ '> LOADING SURVIVAL PROTOCOLS...',
72
+ '> SCANNING FOR THREATS...',
73
+ '> SYSTEMS NOMINAL',
74
+ '> WELCOME BACK, SURVIVALIST'
75
+ ];
76
+
77
+ // This would be used in the Gatehouse feature
78
+ return bootMessages;
79
+ }
80
+ }
81
+
82
+ // Initialize app when DOM is loaded
83
+ document.addEventListener('DOMContentLoaded', () => {
84
+ new TimberstackApp();
85
+ });
86
+
87
+ // Utility functions
88
+ const Utils = {
89
+ formatUptime(seconds) {
90
+ const days = Math.floor(seconds / 86400);
91
+ const hours = Math.floor((seconds % 86400) / 3600);
92
+ const minutes = Math.floor((seconds % 3600) / 60);
93
+ return `${days}d ${hours}h ${minutes}m`;
94
+ },
95
+
96
+ generateId() {
97
+ return Math.random().toString(36).substr(2, 9);
98
+ },
99
+
100
+ debounce(func, wait) {
101
+ let timeout;
102
+ return function executedFunction(...args) {
103
+ const later = () => {
104
+ clearTimeout(timeout);
105
+ func(...args);
106
+ };
107
+ clearTimeout(timeout);
108
+ timeout = setTimeout(later, wait);
109
+ };
110
+ }
111
+ };
112
+
113
+ // Export for use in components
114
+ window.TimberstackUtils = Utils;
style.css CHANGED
@@ -1,28 +1,251 @@
 
 
 
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=Chakra+Petch:wght@400;600;700&family=JetBrains+Mono:wght@300;400;500&display=swap');
2
+
3
+ /* Base Styles */
4
  body {
5
+ position: relative;
6
+ background: #0a0c10;
7
+ }
8
+
9
+ /* Noise Overlay */
10
+ .noise-overlay {
11
+ position: fixed;
12
+ top: 0;
13
+ left: 0;
14
+ width: 100%;
15
+ height: 100%;
16
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
17
+ pointer-events: none;
18
+ z-index: 50;
19
+ }
20
+
21
+ /* Scanlines */
22
+ .scanlines {
23
+ position: fixed;
24
+ top: 0;
25
+ left: 0;
26
+ width: 100%;
27
+ height: 100%;
28
+ background: linear-gradient(
29
+ to bottom,
30
+ rgba(255,255,255,0) 0%,
31
+ rgba(255,255,255,0.006) 50%,
32
+ rgba(255,255,255,0) 100%
33
+ );
34
+ background-size: 100% 3px;
35
+ pointer-events: none;
36
+ z-index: 51;
37
+ }
38
+
39
+ /* Snow Effect */
40
+ .snow-container {
41
+ position: fixed;
42
+ top: 0;
43
+ left: 0;
44
+ width: 100%;
45
+ height: 100%;
46
+ pointer-events: none;
47
+ z-index: 40;
48
+ }
49
+
50
+ .snowflake {
51
+ position: absolute;
52
+ background-color: #4a5568;
53
+ border-radius: 50%;
54
+ opacity: 0.3;
55
+ animation: fall linear infinite;
56
+ }
57
+
58
+ @keyframes fall {
59
+ to {
60
+ transform: translateY(100vh);
61
+ }
62
+ }
63
+
64
+ /* Terminal Card Styles */
65
+ .terminal-card {
66
+ background: rgba(10, 12, 16, 0.8);
67
+ border: 1px solid #4a5568;
68
+ border-image: linear-gradient(45deg, transparent, #4a5568, transparent) 1;
69
+ position: relative;
70
+ backdrop-filter: blur(10px);
71
+ }
72
+
73
+ .terminal-card::before {
74
+ content: '';
75
+ position: absolute;
76
+ top: 2px;
77
+ left: 2px;
78
+ right: 2px;
79
+ bottom: 2px;
80
+ border: 1px solid rgba(255, 159, 28, 0.1);
81
+ pointer-events: none;
82
+ }
83
+
84
+ .card-header {
85
+ border-bottom: 1px solid #4a5568;
86
+ padding: 1rem;
87
+ display: flex;
88
+ align-items: center;
89
+ gap: 0.5rem;
90
+ background: linear-gradient(90deg, rgba(255,159,28,0.05) 0%, transparent 100%);
91
+ }
92
+
93
+ .card-header h3 {
94
+ font-size: 0.875rem;
95
+ letter-spacing: 0.1em;
96
+ }
97
+
98
+ .card-content {
99
+ padding: 1rem;
100
+ }
101
+
102
+ .status-line {
103
+ display: flex;
104
+ justify-content: space-between;
105
+ margin-bottom: 0.5rem;
106
+ font-size: 0.75rem;
107
+ }
108
+
109
+ .label {
110
+ color: #4a5568;
111
+ }
112
+
113
+ .value {
114
+ font-weight: 500;
115
+ }
116
+
117
+ /* Technical Border Effects */
118
+ .tech-border {
119
+ position: relative;
120
+ border: 1px solid #4a5568;
121
+ }
122
+
123
+ .tech-border::before,
124
+ .tech-border::after {
125
+ content: '';
126
+ position: absolute;
127
+ width: 8px;
128
+ height: 8px;
129
+ background: #0a0c10;
130
+ }
131
+
132
+ .tech-border::before {
133
+ top: -1px;
134
+ left: -1px;
135
+ border-right: 1px solid #ff9f1c;
136
+ border-bottom: 1px solid #ff9f1c;
137
+ }
138
+
139
+ .tech-border::after {
140
+ bottom: -1px;
141
+ right: -1px;
142
+ border-left: 1px solid #ff9f1c;
143
+ border-top: 1px solid #ff9f1c;
144
+ }
145
+
146
+ /* Pulse Animation for Online Status */
147
+ @keyframes pulse-amber {
148
+ 0%, 100% { opacity: 1; }
149
+ 50% { opacity: 0.5; }
150
+ }
151
+
152
+ .pulse-online {
153
+ animation: pulse-amber 2s infinite;
154
+ color: #ff9f1c;
155
+ }
156
+
157
+ /* Mobile Responsive */
158
+ @media (max-width: 768px) {
159
+ .container {
160
+ flex-direction: column;
161
+ }
162
+
163
+ .sidebar {
164
+ width: 100%;
165
+ height: auto;
166
+ border-right: none;
167
+ border-bottom: 2px solid #4a5568;
168
+ }
169
+
170
+ .terminal-card {
171
+ margin-bottom: 1rem;
172
+ }
173
+ }
174
+ /* Terminal Input Style */
175
+ .terminal-input {
176
+ background: transparent;
177
+ border: none;
178
+ border-bottom: 1px solid #4a5568;
179
+ color: #ff9f1c;
180
+ font-family: 'JetBrains Mono', monospace;
181
+ padding: 0.5rem 0;
182
+ width: 100%;
183
  }
184
 
185
+ .terminal-input:focus {
186
+ outline: none;
187
+ border-bottom-color: #ff9f1c;
188
  }
189
 
190
+ /* Form Elements */
191
+ .form-checkbox {
192
+ appearance: none;
193
+ border: 1px solid #4a5568;
194
+ background: transparent;
195
+ width: 1rem;
196
+ height: 1rem;
197
+ border-radius: 2px;
198
  }
199
 
200
+ .form-checkbox:checked {
201
+ background: #ff9f1c;
202
+ border-color: #ff9f1c;
 
 
 
203
  }
204
 
205
+ .form-checkbox:checked::before {
206
+ content: '✓';
207
+ color: #0a0c10;
208
+ font-size: 0.75rem;
209
+ display: flex;
210
+ align-items: center;
211
+ justify-content: center;
212
  }
213
+
214
+ .input-group {
215
+ margin-bottom: 1rem;
216
+ }
217
+
218
+ .input-group label {
219
+ display: block;
220
+ margin-bottom: 0.5rem;
221
+ }
222
+
223
+ /* Loading Animation */
224
+ @keyframes spin {
225
+ 0% { transform: rotate(0deg); }
226
+ 100% { transform: rotate(360deg); }
227
+ }
228
+
229
+ .animate-spin {
230
+ animation: spin 1s linear infinite;
231
+ }
232
+ /* Fuel Gauge Style */
233
+ .fuel-gauge {
234
+ display: flex;
235
+ gap: 2px;
236
+ margin: 0.5rem 0;
237
+ }
238
+
239
+ .gauge-segment {
240
+ height: 4px;
241
+ flex: 1;
242
+ background: #4a5568;
243
+ }
244
+
245
+ .gauge-segment.active {
246
+ background: #ff9f1c;
247
+ }
248
+
249
+ .gauge-segment.warning {
250
+ background: #dc2626;
251
+ }
table.html ADDED
@@ -0,0 +1,78 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>TIMBERSTACK - System Logs</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <script>
13
+ tailwind.config = {
14
+ theme: {
15
+ extend: {
16
+ fontFamily: {
17
+ 'stencil': ['Chakra Petch', 'monospace'],
18
+ 'mono': ['JetBrains Mono', 'monospace'],
19
+ }
20
+ }
21
+ }
22
+ }
23
+ </script>
24
+ </head>
25
+ <body class="bg-[#0a0c10] text-white font-mono overflow-hidden">
26
+ <!-- Noise Overlay -->
27
+ <div class="noise-overlay"></div>
28
+
29
+ <!-- Scanlines -->
30
+ <div class="scanlines"></div>
31
+
32
+ <!-- Snow Particles (Winter Mode) -->
33
+ <div class="snow-container"></div>
34
+
35
+ <div class="container mx-auto h-screen flex">
36
+ <!-- Sidebar -->
37
+ <div class="w-64 border-r-2 border-[#4a5568] border-double">
38
+ <custom-sidebar></custom-sidebar>
39
+ </div>
40
+
41
+ <!-- Main Content -->
42
+ <div class="flex-1 p-6">
43
+ <custom-header></custom-header>
44
+
45
+ <!-- Table Section -->
46
+ <div class="terminal-card mt-6">
47
+ <div class="card-header">
48
+ <i data-feather="file-text" class="text-[#ff9f1c]"></i>
49
+ <h3 class="font-stencil uppercase">SYSTEM LOGS</h3>
50
+ <div class="ml-auto flex items-center space-x-2">
51
+ <button class="text-xs border border-[#4a5568] px-2 py-1 hover:border-[#ff9f1c] hover:text-[#ff9f1c] transition-all">
52
+ <i data-feather="filter"></i>
53
+ FILTER
54
+ </button>
55
+ <button class="text-xs border border-[#4a5568] px-2 py-1 hover:border-[#ff9f1c] hover:text-[#ff9f1c] transition-all">
56
+ <i data-feather="refresh-cw"></i>
57
+ REFRESH
58
+ </button>
59
+ </div>
60
+
61
+ <div class="card-content p-0">
62
+ <custom-data-table></custom-data-table>
63
+ </div>
64
+ </div>
65
+ </div>
66
+ </div>
67
+
68
+ <!-- Component Scripts -->
69
+ <script src="components/sidebar.js"></script>
70
+ <script src="components/header.js"></script>
71
+ <script src="components/data-table.js"></script>
72
+
73
+ <script src="script.js"></script>
74
+ <script>
75
+ feather.replace();
76
+ </script>
77
+ </body>
78
+ </html>