Hugging Face's logo

Spaces:
capta1n
/
landingpage4
Running

App Files Community
capta1n commited on
Commit
50a7e4e
·
verified ·
1 Parent(s): 8a02b85

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1564 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Landingpage4
3
- emoji: 📈
4
- colorFrom: green
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: landingpage4
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1564 @@
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>AI SDL Digital Twin Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @keyframes float {
11
+ 0% { transform: translateY(0px); }
12
+ 50% { transform: translateY(-10px); }
13
+ 100% { transform: translateY(0px); }
14
+ }
15
+
16
+ @keyframes pulse {
17
+ 0% { opacity: 0.7; }
18
+ 50% { opacity: 1; }
19
+ 100% { opacity: 0.7; }
20
+ }
21
+
22
+ @keyframes pulse-glow {
23
+ 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
24
+ 70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
25
+ 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
26
+ }
27
+
28
+ @keyframes data-flow {
29
+ 0% { stroke-dashoffset: 100; }
30
+ 100% { stroke-dashoffset: 0; }
31
+ }
32
+
33
+ @keyframes rotate {
34
+ 0% { transform: rotate(0deg); }
35
+ 100% { transform: rotate(360deg); }
36
+ }
37
+
38
+ @keyframes scanning {
39
+ 0% { transform: translateX(-100%) rotate(45deg); }
40
+ 100% { transform: translateX(100%) rotate(45deg); }
41
+ }
42
+
43
+ @keyframes flicker {
44
+ 0% { opacity: 0.5; }
45
+ 50% { opacity: 1; }
46
+ 100% { opacity: 0.5; }
47
+ }
48
+
49
+ @keyframes bounce {
50
+ 0%, 100% { transform: translateY(0); }
51
+ 50% { transform: translateY(-5px); }
52
+ }
53
+
54
+ @keyframes flip {
55
+ 0% { transform: rotateX(0deg); }
56
+ 50% { transform: rotateX(90deg); }
57
+ 100% { transform: rotateX(0deg); }
58
+ }
59
+
60
+ @keyframes highlight {
61
+ 0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
62
+ 50% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0.3); }
63
+ }
64
+
65
+ .floating {
66
+ animation: float 3s ease-in-out infinite;
67
+ }
68
+
69
+ .pulse {
70
+ animation: pulse 2s ease-in-out infinite;
71
+ }
72
+
73
+ .pulse-glow {
74
+ animation: pulse-glow 1.5s infinite;
75
+ }
76
+
77
+ .data-flow {
78
+ stroke-dasharray: 10;
79
+ animation: data-flow 2s linear infinite;
80
+ }
81
+
82
+ .rotate {
83
+ animation: rotate 2s linear infinite;
84
+ }
85
+
86
+ .scanning {
87
+ position: relative;
88
+ overflow: hidden;
89
+ }
90
+
91
+ .scanning::after {
92
+ content: "";
93
+ position: absolute;
94
+ top: 0;
95
+ left: 0;
96
+ right: 0;
97
+ bottom: 0;
98
+ background: linear-gradient(
99
+ to bottom,
100
+ rgba(16, 185, 129, 0.1) 0%,
101
+ rgba(16, 185, 129, 0.3) 50%,
102
+ rgba(16, 185, 129, 0.1) 100%
103
+ );
104
+ transform: rotate(45deg);
105
+ animation: scanning 3s linear infinite;
106
+ }
107
+
108
+ .flicker {
109
+ animation: flicker 1.5s ease-in-out infinite alternate;
110
+ }
111
+
112
+ .bounce {
113
+ animation: bounce 0.5s ease infinite;
114
+ }
115
+
116
+ .flip {
117
+ animation: flip 0.6s ease-out;
118
+ }
119
+
120
+ .highlight {
121
+ animation: highlight 1.5s ease-in-out infinite;
122
+ }
123
+
124
+ .code-block {
125
+ font-family: 'Courier New', monospace;
126
+ background-color: #1e293b;
127
+ color: #f8fafc;
128
+ padding: 1rem;
129
+ border-radius: 0.5rem;
130
+ overflow-x: auto;
131
+ }
132
+
133
+ .vulnerability-line {
134
+ background-color: #7f1d1d;
135
+ padding: 0.2rem;
136
+ border-radius: 0.2rem;
137
+ }
138
+
139
+ .threat-model {
140
+ background-color: #f8fafc;
141
+ border: 1px solid #e2e8f0;
142
+ border-radius: 0.5rem;
143
+ padding: 1rem;
144
+ position: relative;
145
+ }
146
+
147
+ .risk-tag {
148
+ display: inline-block;
149
+ padding: 0.2rem 0.5rem;
150
+ border-radius: 1rem;
151
+ font-size: 0.75rem;
152
+ margin-right: 0.5rem;
153
+ margin-bottom: 0.5rem;
154
+ }
155
+
156
+ .progress-ring__circle {
157
+ transition: stroke-dashoffset 0.5s;
158
+ transform: rotate(-90deg);
159
+ transform-origin: 50% 50%;
160
+ }
161
+
162
+ .highlight-box {
163
+ position: relative;
164
+ border-left: 4px solid;
165
+ padding-left: 1rem;
166
+ margin-bottom: 1rem;
167
+ }
168
+
169
+ .highlight-box::before {
170
+ content: "";
171
+ position: absolute;
172
+ top: 0;
173
+ left: 0;
174
+ right: 0;
175
+ bottom: 0;
176
+ background-color: rgba(255, 255, 255, 0.1);
177
+ border-radius: 0.25rem;
178
+ z-index: -1;
179
+ }
180
+
181
+ .circular-node {
182
+ position: absolute;
183
+ width: 100px;
184
+ height: 100px;
185
+ border-radius: 50%;
186
+ display: flex;
187
+ flex-direction: column;
188
+ align-items: center;
189
+ justify-content: center;
190
+ text-align: center;
191
+ transition: all 0.3s ease;
192
+ }
193
+
194
+ .circular-node:hover {
195
+ transform: scale(1.1);
196
+ z-index: 10;
197
+ }
198
+
199
+ .stats-card {
200
+ transition: all 0.3s ease;
201
+ position: relative;
202
+ }
203
+
204
+ .stats-card:hover {
205
+ transform: translateY(-5px);
206
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
207
+ }
208
+
209
+ .stats-card::before {
210
+ content: "";
211
+ position: absolute;
212
+ top: 0;
213
+ left: 0;
214
+ right: 0;
215
+ height: 3px;
216
+ background-color: #10b981;
217
+ opacity: 0;
218
+ transition: opacity 0.3s ease;
219
+ }
220
+
221
+ .stats-card:hover::before {
222
+ opacity: 1;
223
+ }
224
+
225
+ .active-scan {
226
+ position: relative;
227
+ }
228
+
229
+ .active-scan::after {
230
+ content: "Analyzing...";
231
+ position: absolute;
232
+ bottom: -20px;
233
+ left: 0;
234
+ right: 0;
235
+ text-align: center;
236
+ font-size: 0.75rem;
237
+ color: #10b981;
238
+ font-weight: 600;
239
+ }
240
+
241
+ .chat-bubble {
242
+ position: absolute;
243
+ background-color: white;
244
+ border-radius: 1rem;
245
+ padding: 0.75rem 1rem;
246
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
247
+ max-width: 300px;
248
+ opacity: 0;
249
+ transition: opacity 0.3s ease;
250
+ z-index: 20;
251
+ }
252
+
253
+ .chat-bubble::after {
254
+ content: "";
255
+ position: absolute;
256
+ bottom: -10px;
257
+ left: 20px;
258
+ border-width: 10px 10px 0;
259
+ border-style: solid;
260
+ border-color: white transparent transparent;
261
+ }
262
+
263
+ .alert-item {
264
+ transition: all 0.3s ease;
265
+ transform-origin: center bottom;
266
+ }
267
+
268
+ .alert-item.new {
269
+ animation: bounce 0.5s ease;
270
+ }
271
+
272
+ .alert-item.focused {
273
+ transform: scale(1.05);
274
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
275
+ z-index: 10;
276
+ }
277
+
278
+ .alert-detail {
279
+ position: fixed;
280
+ top: 0;
281
+ left: 0;
282
+ right: 0;
283
+ bottom: 0;
284
+ background-color: rgba(0, 0, 0, 0.5);
285
+ display: flex;
286
+ align-items: center;
287
+ justify-content: center;
288
+ z-index: 100;
289
+ opacity: 0;
290
+ pointer-events: none;
291
+ transition: opacity 0.3s ease;
292
+ }
293
+
294
+ .alert-detail.active {
295
+ opacity: 1;
296
+ pointer-events: all;
297
+ }
298
+
299
+ .alert-detail-content {
300
+ background-color: white;
301
+ border-radius: 0.5rem;
302
+ padding: 1.5rem;
303
+ max-width: 500px;
304
+ width: 90%;
305
+ transform: scale(0.9);
306
+ transition: transform 0.3s ease;
307
+ }
308
+
309
+ .alert-detail.active .alert-detail-content {
310
+ transform: scale(1);
311
+ }
312
+
313
+ .flip-container {
314
+ perspective: 1000px;
315
+ }
316
+
317
+ .flipper {
318
+ transition: transform 0.6s;
319
+ transform-style: preserve-3d;
320
+ position: relative;
321
+ }
322
+
323
+ .flipper.flip {
324
+ transform: rotateX(360deg);
325
+ }
326
+
327
+ .front, .back {
328
+ backface-visibility: hidden;
329
+ position: absolute;
330
+ top: 0;
331
+ left: 0;
332
+ }
333
+
334
+ .front {
335
+ z-index: 2;
336
+ transform: rotateX(0deg);
337
+ }
338
+
339
+ .back {
340
+ transform: rotateX(180deg);
341
+ }
342
+
343
+ .typing-effect {
344
+ overflow: hidden;
345
+ white-space: nowrap;
346
+ border-right: 2px solid #10b981;
347
+ animation: blink-caret 0.75s step-end infinite;
348
+ }
349
+
350
+ @keyframes blink-caret {
351
+ from, to { border-color: transparent; }
352
+ 50% { border-color: #10b981; }
353
+ }
354
+ </style>
355
+ </head>
356
+ <body class="bg-gray-50 min-h-screen">
357
+ <!-- Navigation -->
358
+ <nav class="bg-green-800 text-white shadow-lg">
359
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
360
+ <div class="flex justify-between h-16 items-center">
361
+ <div class="flex items-center">
362
+ <div class="flex-shrink-0 flex items-center">
363
+ <i class="fas fa-robot text-2xl mr-2"></i>
364
+ <span class="text-xl font-bold">AI SDL Digital Twin</span>
365
+ </div>
366
+ </div>
367
+ <div class="hidden md:block">
368
+ <div class="ml-10 flex items-baseline space-x-4">
369
+ <a href="#" class="bg-green-700 px-3 py-2 rounded-md text-sm font-medium">Dashboard</a>
370
+ <a href="#alerts" class="text-green-200 hover:bg-green-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Risk Alerts</a>
371
+ <a href="#projects" class="text-green-200 hover:bg-green-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Risk Projects</a>
372
+ </div>
373
+ </div>
374
+ </div>
375
+ </div>
376
+ </nav>
377
+
378
+ <!-- Main Content -->
379
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
380
+ <!-- Dashboard Section -->
381
+ <section id="dashboard">
382
+ <div class="mb-8">
383
+ <h1 class="text-3xl font-bold text-gray-900">Security Risk Dashboard</h1>
384
+ <p class="mt-2 text-gray-600">Comprehensive view of security risks across all projects</p>
385
+ </div>
386
+
387
+ <div class="flex flex-col lg:flex-row gap-8">
388
+ <!-- Left Column - Stats and Visualization -->
389
+ <div class="lg:w-2/3">
390
+ <!-- Real-time Stats Panel -->
391
+ <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8 scanning">
392
+ <div class="p-6">
393
+ <div class="flex justify-between items-center mb-6">
394
+ <h2 class="text-xl font-bold text-gray-900">Real-time Analysis Dashboard</h2>
395
+ <div class="flex items-center">
396
+ <div class="h-3 w-3 rounded-full bg-green-500 mr-2 pulse"></div>
397
+ <span class="text-sm font-medium text-green-600">Active Scanning</span>
398
+ </div>
399
+ </div>
400
+
401
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
402
+ <div class="stats-card bg-gray-50 p-4 rounded-lg active-scan">
403
+ <div class="flex items-center">
404
+ <div class="bg-green-100 rounded-full h-10 w-10 flex items-center justify-center text-green-600 mr-3 flicker">
405
+ <i class="fas fa-file-alt"></i>
406
+ </div>
407
+ <div>
408
+ <h4 class="text-sm font-medium text-gray-700">Requirements Analyzed</h4>
409
+ <p class="text-xl font-bold text-gray-900 flip-container">
410
+ <span class="flipper">
411
+ <span class="front">24</span>
412
+ <span class="back">24</span>
413
+ </span>
414
+ </p>
415
+ <p class="text-xs text-gray-500">2 threats identified</p>
416
+ </div>
417
+ </div>
418
+ </div>
419
+
420
+ <div class="stats-card bg-gray-50 p-4 rounded-lg active-scan">
421
+ <div class="flex items-center">
422
+ <div class="bg-green-100 rounded-full h-10 w-10 flex items-center justify-center text-green-600 mr-3 flicker">
423
+ <i class="fas fa-code"></i>
424
+ </div>
425
+ <div>
426
+ <h4 class="text-sm font-medium text-gray-700">Code Scanned</h4>
427
+ <p class="text-xl font-bold text-gray-900 flip-container">
428
+ <span class="flipper">
429
+ <span class="front">120,842</span>
430
+ <span class="back">120,842</span>
431
+ </span>
432
+ <span class="text-sm">lines</span>
433
+ </p>
434
+ <p class="text-xs text-gray-500">1 critical vulnerability</p>
435
+ </div>
436
+ </div>
437
+ </div>
438
+
439
+ <div class="stats-card bg-gray-50 p-4 rounded-lg active-scan">
440
+ <div class="flex items-center">
441
+ <div class="bg-green-100 rounded-full h-10 w-10 flex items-center justify-center text-green-600 mr-3 flicker">
442
+ <i class="fas fa-shield-alt"></i>
443
+ </div>
444
+ <div>
445
+ <h4 class="text-sm font-medium text-gray-700">Tests Completed</h4>
446
+ <p class="text-xl font-bold text-gray-900 flip-container">
447
+ <span class="flipper">
448
+ <span class="front">18/42</span>
449
+ <span class="back">18/42</span>
450
+ </span>
451
+ </p>
452
+ <p class="text-xs text-gray-500">1 medium risk found</p>
453
+ </div>
454
+ </div>
455
+ </div>
456
+
457
+ <div class="stats-card bg-gray-50 p-4 rounded-lg active-scan">
458
+ <div class="flex items-center">
459
+ <div class="bg-green-100 rounded-full h-10 w-10 flex items-center justify-center text-green-600 mr-3 flicker">
460
+ <i class="fas fa-rocket"></i>
461
+ </div>
462
+ <div>
463
+ <h4 class="text-sm font-medium text-gray-700">Releases Verified</h4>
464
+ <p class="text-xl font-bold text-gray-900 flip-container">
465
+ <span class="flipper">
466
+ <span class="front">3</span>
467
+ <span class="back">3</span>
468
+ </span>
469
+ </p>
470
+ <p class="text-xs text-gray-500">All checks passed</p>
471
+ </div>
472
+ </div>
473
+ </div>
474
+
475
+ <div class="stats-card bg-gray-50 p-4 rounded-lg active-scan">
476
+ <div class="flex items-center">
477
+ <div class="bg-green-100 rounded-full h-10 w-10 flex items-center justify-center text-green-600 mr-3 flicker">
478
+ <i class="fas fa-server"></i>
479
+ </div>
480
+ <div>
481
+ <h4 class="text-sm font-medium text-gray-700">Production Services</h4>
482
+ <p class="text-xl font-bold text-gray-900 flip-container">
483
+ <span class="flipper">
484
+ <span class="front">5</span>
485
+ <span class="back">5</span>
486
+ </span>
487
+ </p>
488
+ <p class="text-xs text-gray-500">No active incidents</p>
489
+ </div>
490
+ </div>
491
+ </div>
492
+ </div>
493
+ </div>
494
+ </div>
495
+
496
+ <!-- Circular SDL Process Visualization -->
497
+ <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8 p-6 relative">
498
+ <!-- Chat Bubble -->
499
+ <div id="chatBubble" class="chat-bubble" style="top: 50px; left: 50px;">
500
+ <div id="chatText" class="text-sm text-gray-800"></div>
501
+ </div>
502
+
503
+ <div class="relative h-96">
504
+ <div class="absolute inset-0 flex items-center justify-center">
505
+ <svg width="100%" height="100%" viewBox="0 0 500 500" class="absolute">
506
+ <!-- Data flow arrows -->
507
+ <defs>
508
+ <marker id="arrowhead" markerWidth="10" markerHeight="7"
509
+ refX="0" refY="3.5" orient="auto">
510
+ <polygon points="0 0, 10 3.5, 0 7" fill="#10b981" />
511
+ </marker>
512
+ </defs>
513
+
514
+ <!-- Circular path for data flow -->
515
+ <path id="data-path" d="M250,100 A150,150 0 1,1 250,400 A150,150 0 1,1 250,100"
516
+ fill="none" stroke="#10b981" stroke-width="2" stroke-dasharray="10,5"
517
+ class="data-flow" />
518
+
519
+ <!-- Animated arrow along the path -->
520
+ <circle cx="250" cy="100" r="5" fill="#10b981">
521
+ <animateMotion dur="10s" repeatCount="indefinite">
522
+ <mpath xlink:href="#data-path"/>
523
+ </animateMotion>
524
+ </circle>
525
+ </svg>
526
+
527
+ <!-- Requirement Design Node -->
528
+ <div id="requirementNode" class="circular-node bg-green-50 border-2 border-green-200" style="top: 10%; left: 50%; transform: translateX(-50%);">
529
+ <div class="relative w-16 h-16 mb-2">
530
+ <svg class="w-full h-full" viewBox="0 0 36 36">
531
+ <path
532
+ d="M18 2.0845
533
+ a 15.9155 15.9155 0 0 1 0 31.831
534
+ a 15.9155 15.9155 0 0 1 0 -31.831"
535
+ fill="none"
536
+ stroke="#e2e8f0"
537
+ stroke-width="3"
538
+ />
539
+ <path
540
+ class="progress-ring__circle"
541
+ stroke="#10b981"
542
+ stroke-width="3"
543
+ stroke-dasharray="78, 100"
544
+ d="M18 2.0845
545
+ a 15.9155 15.9155 0 0 1 0 31.831
546
+ a 15.9155 15.9155 0 0 1 0 -31.831"
547
+ />
548
+ </svg>
549
+ <div class="absolute inset-0 flex items-center justify-center">
550
+ <i class="fas fa-lightbulb text-green-600 text-xl"></i>
551
+ </div>
552
+ </div>
553
+ <div class="text-xs font-medium text-gray-700">Requirement Design</div>
554
+ <div class="text-xs text-gray-500 mt-1">78% analyzed</div>
555
+ <div class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full h-6 w-6 flex items-center justify-center text-xs pulse-glow">2</div>
556
+ </div>
557
+
558
+ <!-- Code Changes Node -->
559
+ <div id="codeNode" class="circular-node bg-green-50 border-2 border-green-200" style="top: 30%; right: 10%;">
560
+ <div class="relative w-16 h-16 mb-2">
561
+ <svg class="w-full h-full" viewBox="0 0 36 36">
562
+ <path
563
+ d="M18 2.0845
564
+ a 15.9155 15.9155 0 0 1 0 31.831
565
+ a 15.9155 15.9155 0 0 1 0 -31.831"
566
+ fill="none"
567
+ stroke="#e2e8f0"
568
+ stroke-width="3"
569
+ />
570
+ <path
571
+ class="progress-ring__circle"
572
+ stroke="#10b981"
573
+ stroke-width="3"
574
+ stroke-dasharray="45, 100"
575
+ d="M18 2.0845
576
+ a 15.9155 15.9155 0 0 1 0 31.831
577
+ a 15.9155 15.9155 0 0 1 0 -31.831"
578
+ />
579
+ </svg>
580
+ <div class="absolute inset-0 flex items-center justify-center">
581
+ <i class="fas fa-code text-green-600 text-xl"></i>
582
+ </div>
583
+ </div>
584
+ <div class="text-xs font-medium text-gray-700">Code Changes</div>
585
+ <div class="text-xs text-gray-500 mt-1">45% analyzed</div>
586
+ <div class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full h-6 w-6 flex items-center justify-center text-xs pulse-glow">1</div>
587
+ </div>
588
+
589
+ <!-- Security Testing Node -->
590
+ <div id="testingNode" class="circular-node bg-green-50 border-2 border-green-200" style="bottom: 20%; right: 20%;">
591
+ <div class="relative w-16 h-16 mb-2">
592
+ <svg class="w-full h-full" viewBox="0 0 36 36">
593
+ <path
594
+ d="M18 2.0845
595
+ a 15.9155 15.9155 0 0 1 0 31.831
596
+ a 15.9155 15.9155 0 0 1 0 -31.831"
597
+ fill="none"
598
+ stroke="#e2e8f0"
599
+ stroke-width="3"
600
+ />
601
+ <path
602
+ class="progress-ring__circle"
603
+ stroke="#10b981"
604
+ stroke-width="3"
605
+ stroke-dasharray="32, 100"
606
+ d="M18 2.0845
607
+ a 15.9155 15.9155 0 0 1 0 31.831
608
+ a 15.9155 15.9155 0 0 1 0 -31.831"
609
+ />
610
+ </svg>
611
+ <div class="absolute inset-0 flex items-center justify-center">
612
+ <i class="fas fa-shield-alt text-green-600 text-xl"></i>
613
+ </div>
614
+ </div>
615
+ <div class="text-xs font-medium text-gray-700">Security Testing</div>
616
+ <div class="text-xs text-gray-500 mt-1">32% analyzed</div>
617
+ <div class="absolute -top-2 -right-2 bg-yellow-500 text-white rounded-full h-6 w-6 flex items-center justify-center text-xs">1</div>
618
+ </div>
619
+
620
+ <!-- Release Node -->
621
+ <div id="releaseNode" class="circular-node bg-green-50 border-2 border-green-200" style="bottom: 20%; left: 20%;">
622
+ <div class="relative w-16 h-16 mb-2">
623
+ <svg class="w-full h-full" viewBox="0 0 36 36">
624
+ <path
625
+ d="M18 2.0845
626
+ a 15.9155 15.9155 0 0 1 0 31.831
627
+ a 15.9155 15.9155 0 0 1 0 -31.831"
628
+ fill="none"
629
+ stroke="#e2e8f0"
630
+ stroke-width="3"
631
+ />
632
+ <path
633
+ class="progress-ring__circle"
634
+ stroke="#10b981"
635
+ stroke-width="3"
636
+ stroke-dasharray="90, 100"
637
+ d="M18 2.0845
638
+ a 15.9155 15.9155 0 0 1 0 31.831
639
+ a 15.9155 15.9155 0 0 1 0 -31.831"
640
+ />
641
+ </svg>
642
+ <div class="absolute inset-0 flex items-center justify-center">
643
+ <i class="fas fa-rocket text-green-600 text-xl"></i>
644
+ </div>
645
+ </div>
646
+ <div class="text-xs font-medium text-gray-700">Release</div>
647
+ <div class="text-xs text-gray-500 mt-1">90% analyzed</div>
648
+ </div>
649
+
650
+ <!-- Production Node -->
651
+ <div id="productionNode" class="circular-node bg-green-50 border-2 border-green-200" style="top: 30%; left: 10%;">
652
+ <div class="relative w-16 h-16 mb-2">
653
+ <svg class="w-full h-full" viewBox="0 0 36 36">
654
+ <path
655
+ d="M18 2.0845
656
+ a 15.9155 15.9155 0 0 1 0 31.831
657
+ a 15.9155 15.9155 0 0 1 0 -31.831"
658
+ fill="none"
659
+ stroke="#e2e8f0"
660
+ stroke-width="3"
661
+ />
662
+ <path
663
+ class="progress-ring__circle"
664
+ stroke="#10b981"
665
+ stroke-width="3"
666
+ stroke-dasharray="65, 100"
667
+ d="M18 2.0845
668
+ a 15.9155 15.9155 0 0 1 0 31.831
669
+ a 15.9155 15.9155 0 0 1 0 -31.831"
670
+ />
671
+ </svg>
672
+ <div class="absolute inset-0 flex items-center justify-center">
673
+ <i class="fas fa-globe text-green-600 text-xl"></i>
674
+ </div>
675
+ </div>
676
+ <div class="text-xs font-medium text-gray-700">Production</div>
677
+ <div class="text-xs text-gray-500 mt-1">65% analyzed</div>
678
+ </div>
679
+
680
+ <!-- Center AI Avatar -->
681
+ <div class="absolute inset-0 flex items-center justify-center">
682
+ <div class="relative">
683
+ <div class="floating">
684
+ <img id="aiAvatar" class="h-24 w-24 object-contain" src="https://img.icons8.com/color/480/robot-3.png" alt="AI SDL Digital Twin">
685
+ </div>
686
+ <div class="absolute bottom-0 right-0 bg-green-500 text-white rounded-full h-8 w-8 flex items-center justify-center">
687
+ <i class="fas fa-bolt"></i>
688
+ </div>
689
+ </div>
690
+ </div>
691
+ </div>
692
+ </div>
693
+ </div>
694
+
695
+ <!-- Risk Projects Section -->
696
+ <section id="projects" class="mb-8">
697
+ <h2 class="text-2xl font-bold text-gray-900 mb-4">Risk Projects List</h2>
698
+
699
+ <div class="bg-white shadow overflow-hidden rounded-lg">
700
+ <table class="min-w-full divide-y divide-gray-200">
701
+ <thead class="bg-gray-50">
702
+ <tr>
703
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Project</th>
704
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
705
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Progress</th>
706
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Risks</th>
707
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
708
+ </tr>
709
+ </thead>
710
+ <tbody class="bg-white divide-y divide-gray-200">
711
+ <!-- Project 1 -->
712
+ <tr class="hover:bg-gray-50 cursor-pointer" onclick="showProjectDetail('alipay-subsidy')">
713
+ <td class="px-6 py-4 whitespace-nowrap">
714
+ <div class="flex items-center">
715
+ <div class="flex-shrink-0 h-10 w-10 bg-red-100 rounded-full flex items-center justify-center text-red-600">
716
+ <i class="fas fa-exclamation-triangle"></i>
717
+ </div>
718
+ <div class="ml-4">
719
+ <div class="text-sm font-medium text-gray-900">支付宝国补项目</div>
720
+ <div class="text-sm text-gray-500">Government subsidy system</div>
721
+ </div>
722
+ </div>
723
+ </td>
724
+ <td class="px-6 py-4 whitespace-nowrap">
725
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">High Risk</span>
726
+ </td>
727
+ <td class="px-6 py-4 whitespace-nowrap">
728
+ <div class="w-full bg-gray-200 rounded-full h-2">
729
+ <div class="bg-red-500 h-2 rounded-full" style="width: 65%"></div>
730
+ </div>
731
+ <div class="text-xs text-gray-500 mt-1">65% analyzed</div>
732
+ </td>
733
+ <td class="px-6 py-4 whitespace-nowrap">
734
+ <span class="risk-tag bg-red-100 text-red-800">SQL Injection</span>
735
+ <span class="risk-tag bg-red-100 text-red-800">AuthZ Bypass</span>
736
+ </td>
737
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
738
+ <button class="text-green-600 hover:text-green-900">View Details</button>
739
+ </td>
740
+ </tr>
741
+
742
+ <!-- Project 2 -->
743
+ <tr class="hover:bg-gray-50 cursor-pointer" onclick="showProjectDetail('merchant-portal')">
744
+ <td class="px-6 py-4 whitespace-nowrap">
745
+ <div class="flex items-center">
746
+ <div class="flex-shrink-0 h-10 w-10 bg-orange-100 rounded-full flex items-center justify-center text-orange-600">
747
+ <i class="fas fa-exclamation-circle"></i>
748
+ </div>
749
+ <div class="ml-4">
750
+ <div class="text-sm font-medium text-gray-900">Merchant Portal v2.0</div>
751
+ <div class="text-sm text-gray-500">Merchant management dashboard</div>
752
+ </div>
753
+ </div>
754
+ </td>
755
+ <td class="px-6 py-4 whitespace-nowrap">
756
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-orange-100 text-orange-800">Medium Risk</span>
757
+ </td>
758
+ <td class="px-6 py-4 whitespace-nowrap">
759
+ <div class="w-full bg-gray-200 rounded-full h-2">
760
+ <div class="bg-orange-500 h-2 rounded-full" style="width: 42%"></div>
761
+ </div>
762
+ <div class="text-xs text-gray-500 mt-1">42% analyzed</div>
763
+ </td>
764
+ <td class="px-6 py-4 whitespace-nowrap">
765
+ <span class="risk-tag bg-orange-100 text-orange-800">XSS</span>
766
+ <span class="risk-tag bg-yellow-100 text-yellow-800">Input Validation</span>
767
+ </td>
768
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
769
+ <button class="text-green-600 hover:text-green-900">View Details</button>
770
+ </td>
771
+ </tr>
772
+
773
+ <!-- Project 3 -->
774
+ <tr class="hover:bg-gray-50 cursor-pointer" onclick="showProjectDetail('payment-gateway')">
775
+ <td class="px-6 py-4 whitespace-nowrap">
776
+ <div class="flex items-center">
777
+ <div class="flex-shrink-0 h-10 w-10 bg-yellow-100 rounded-full flex items-center justify-center text-yellow-600">
778
+ <i class="fas fa-info-circle"></i>
779
+ </div>
780
+ <div class="ml-4">
781
+ <div class="text-sm font-medium text-gray-900">Payment Gateway</div>
782
+ <div class="text-sm text-gray-500">Microservice for payment processing</div>
783
+ </div>
784
+ </div>
785
+ </td>
786
+ <td class="px-6 py-4 whitespace-nowrap">
787
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Low Risk</span>
788
+ </td>
789
+ <td class="px-6 py-4 whitespace-nowrap">
790
+ <div class="w-full bg-gray-200 rounded-full h-2">
791
+ <div class="bg-yellow-500 h-2 rounded-full" style="width: 88%"></div>
792
+ </div>
793
+ <div class="text-xs text-gray-500 mt-1">88% analyzed</div>
794
+ </td>
795
+ <td class="px-6 py-4 whitespace-nowrap">
796
+ <span class="risk-tag bg-yellow-100 text-yellow-800">Hardcoded Creds</span>
797
+ </td>
798
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
799
+ <button class="text-green-600 hover:text-green-900">View Details</button>
800
+ </td>
801
+ </tr>
802
+ </tbody>
803
+ </table>
804
+ </div>
805
+ </section>
806
+ </div>
807
+
808
+ <!-- Right Column - Risk Alerts -->
809
+ <div class="lg:w-1/3">
810
+ <section id="alerts" class="mb-8">
811
+ <div class="flex justify-between items-center mb-4">
812
+ <h2 class="text-2xl font-bold text-gray-900">Risk Alerts</h2>
813
+ <div class="flex items-center">
814
+ <span id="newAlertsCount" class="bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full mr-2">3 New</span>
815
+ <button class="text-sm text-green-600 hover:text-green-800">View All</button>
816
+ </div>
817
+ </div>
818
+
819
+ <div class="bg-white shadow overflow-hidden rounded-lg">
820
+ <div id="alertStream" class="divide-y divide-gray-200 max-h-[600px] overflow-y-auto">
821
+ <!-- Critical Alert -->
822
+ <div class="alert-item new" data-project="alipay-subsidy" data-phase="requirements">
823
+ <div class="p-4 hover:bg-gray-50 cursor-pointer transition" onclick="focusAlert(this)">
824
+ <div class="flex items-start">
825
+ <div class="flex-shrink-0 pt-1">
826
+ <div class="bg-red-500 rounded-full h-8 w-8 flex items-center justify-center text-white pulse-glow">
827
+ <i class="fas fa-exclamation-triangle"></i>
828
+ </div>
829
+ </div>
830
+ <div class="ml-3 flex-1">
831
+ <div class="flex items-center justify-between">
832
+ <h3 class="text-sm font-medium text-red-700">支付宝国补项目 - 需求设计环节</h3>
833
+ <span class="text-xs text-gray-500">刚刚</span>
834
+ </div>
835
+ <div class="mt-1 text-sm text-gray-700">
836
+ <p>检测到需求设计中的权限配置风险</p>
837
+ </div>
838
+ <div class="mt-2">
839
+ <span class="risk-tag bg-red-100 text-red-800">SQL Injection</span>
840
+ <span class="risk-tag bg-red-100 text-red-800">Authorization Bypass</span>
841
+ </div>
842
+ </div>
843
+ </div>
844
+ </div>
845
+ </div>
846
+
847
+ <!-- High Alert -->
848
+ <div class="alert-item new" data-project="merchant-portal" data-phase="code">
849
+ <div class="p-4 hover:bg-gray-50 cursor-pointer transition" onclick="focusAlert(this)">
850
+ <div class="flex items-start">
851
+ <div class="flex-shrink-0 pt-1">
852
+ <div class="bg-orange-500 rounded-full h-8 w-8 flex items-center justify-center text-white pulse-glow">
853
+ <i class="fas fa-exclamation-circle"></i>
854
+ </div>
855
+ </div>
856
+ <div class="ml-3 flex-1">
857
+ <div class="flex items-center justify-between">
858
+ <h3 class="text-sm font-medium text-orange-700">Merchant Portal - 代码变更环节</h3>
859
+ <span class="text-xs text-gray-500">1分钟前</span>
860
+ </div>
861
+ <div class="mt-1 text-sm text-gray-700">
862
+ <p>检测到3个API端点存在XSS漏洞</p>
863
+ </div>
864
+ <div class="mt-2">
865
+ <span class="risk-tag bg-orange-100 text-orange-800">Cross-Site Scripting</span>
866
+ <span class="risk-tag bg-yellow-100 text-yellow-800">Input Validation</span>
867
+ </div>
868
+ </div>
869
+ </div>
870
+ </div>
871
+ </div>
872
+
873
+ <!-- Medium Alert -->
874
+ <div class="alert-item new" data-project="payment-gateway" data-phase="code">
875
+ <div class="p-4 hover:bg-gray-50 cursor-pointer transition" onclick="focusAlert(this)">
876
+ <div class="flex items-start">
877
+ <div class="flex-shrink-0 pt-1">
878
+ <div class="bg-yellow-500 rounded-full h-8 w-8 flex items-center justify-center text-white pulse-glow">
879
+ <i class="fas fa-info-circle"></i>
880
+ </div>
881
+ </div>
882
+ <div class="ml-3 flex-1">
883
+ <div class="flex items-center justify-between">
884
+ <h3 class="text-sm font-medium text-yellow-700">Payment Gateway - 代码变更环节</h3>
885
+ <span class="text-xs text-gray-500">5分钟前</span>
886
+ </div>
887
+ <div class="mt-1 text-sm text-gray-700">
888
+ <p>配置文件中发现硬编码凭据</p>
889
+ </div>
890
+ <div class="mt-2">
891
+ <span class="risk-tag bg-yellow-100 text-yellow-800">Sensitive Data Exposure</span>
892
+ </div>
893
+ </div>
894
+ </div>
895
+ </div>
896
+ </div>
897
+
898
+ <!-- Older alerts -->
899
+ <div class="alert-item" data-project="merchant-portal" data-phase="testing">
900
+ <div class="p-4 hover:bg-gray-50 cursor-pointer transition" onclick="focusAlert(this)">
901
+ <div class="flex items-start">
902
+ <div class="flex-shrink-0 pt-1">
903
+ <div class="bg-blue-500 rounded-full h-8 w-8 flex items-center justify-center text-white">
904
+ <i class="fas fa-shield-alt"></i>
905
+ </div>
906
+ </div>
907
+ <div class="ml-3 flex-1">
908
+ <div class="flex items-center justify-between">
909
+ <h3 class="text-sm font-medium text-blue-700">Merchant Portal - 安全测试环节</h3>
910
+ <span class="text-xs text-gray-500">15分钟前</span>
911
+ </div>
912
+ <div class="mt-1 text-sm text-gray-700">
913
+ <p>安全测试发现输入验证问题</p>
914
+ </div>
915
+ <div class="mt-2">
916
+ <span class="risk-tag bg-blue-100 text-blue-800">Input Validation</span>
917
+ </div>
918
+ </div>
919
+ </div>
920
+ </div>
921
+ </div>
922
+ </div>
923
+ </div>
924
+ </section>
925
+
926
+ <!-- Analysis Details Panel -->
927
+ <div class="bg-gray-50 p-6 rounded-lg">
928
+ <h3 class="text-lg font-semibold text-gray-900 mb-4">Analysis Insights</h3>
929
+
930
+ <div class="space-y-4">
931
+ <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
932
+ <h4 class="text-sm font-medium text-gray-700 mb-2">Current Focus</h4>
933
+ <div class="flex items-center">
934
+ <div class="bg-green-100 rounded-full h-8 w-8 flex items-center justify-center text-green-600 mr-3">
935
+ <i class="fas fa-code"></i>
936
+ </div>
937
+ <div>
938
+ <p class="text-sm text-gray-900">Code Change Analysis</p>
939
+ <p class="text-xs text-gray-500">Scanning payment processing module</p>
940
+ </div>
941
+ </div>
942
+ </div>
943
+
944
+ <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
945
+ <h4 class="text-sm font-medium text-gray-700 mb-2">Recent Findings</h4>
946
+ <div class="space-y-3">
947
+ <div class="flex items-start">
948
+ <div class="bg-red-100 rounded-full h-6 w-6 flex items-center justify-center text-red-600 mr-2 mt-0.5">
949
+ <i class="fas fa-exclamation-triangle text-xs"></i>
950
+ </div>
951
+ <div>
952
+ <p class="text-sm text-gray-900">SQL Injection vulnerability</p>
953
+ <p class="text-xs text-gray-500">In subsidy payment processing</p>
954
+ </div>
955
+ </div>
956
+ <div class="flex items-start">
957
+ <div class="bg-yellow-100 rounded-full h-6 w-6 flex items-center justify-center text-yellow-600 mr-2 mt-0.5">
958
+ <i class="fas fa-info-circle text-xs"></i>
959
+ </div>
960
+ <div>
961
+ <p class="text-sm text-gray-900">Hardcoded credentials</p>
962
+ <p class="text-xs text-gray-500">In payment gateway config</p>
963
+ </div>
964
+ </div>
965
+ </div>
966
+ </div>
967
+
968
+ <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
969
+ <h4 class="text-sm font-medium text-gray-700 mb-2">Next Steps</h4>
970
+ <div class="flex items-start">
971
+ <div class="bg-blue-100 rounded-full h-6 w-6 flex items-center justify-center text-blue-600 mr-2 mt-0.5">
972
+ <i class="fas fa-shield-alt text-xs"></i>
973
+ </div>
974
+ <div>
975
+ <p class="text-sm text-gray-900">Security Testing Phase</p>
976
+ <p class="text-xs text-gray-500">Starting in approx. 15 minutes</p>
977
+ </div>
978
+ </div>
979
+ </div>
980
+ </div>
981
+
982
+ <div class="mt-6 pt-4 border-t border-gray-200">
983
+ <button class="w-full bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-md flex items-center justify-center transition">
984
+ <i class="fas fa-bell mr-2"></i> Get Notifications
985
+ </button>
986
+ </div>
987
+ </div>
988
+ </div>
989
+ </div>
990
+ </section>
991
+ </main>
992
+
993
+ <!-- Project Detail Modal -->
994
+ <div id="projectDetailModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
995
+ <div class="relative top-20 mx-auto p-5 border w-11/12 max-w-6xl shadow-lg rounded-md bg-white max-h-screen overflow-y-auto">
996
+ <div class="flex justify-between items-center pb-3 border-b">
997
+ <h3 id="projectDetailTitle" class="text-2xl font-bold text-gray-900"></h3>
998
+ <button onclick="hideProjectDetail()" class="text-gray-400 hover:text-gray-600">
999
+ <i class="fas fa-times"></i>
1000
+ </button>
1001
+ </div>
1002
+
1003
+ <div id="projectDetailContent" class="py-4">
1004
+ <!-- Content will be loaded dynamically -->
1005
+ </div>
1006
+ </div>
1007
+ </div>
1008
+
1009
+ <!-- Alert Detail Modal -->
1010
+ <div id="alertDetailModal" class="alert-detail">
1011
+ <div class="alert-detail-content">
1012
+ <div class="flex justify-between items-center pb-3 border-b">
1013
+ <h3 id="alertDetailTitle" class="text-xl font-bold text-gray-900"></h3>
1014
+ <button onclick="hideAlertDetail()" class="text-gray-400 hover:text-gray-600">
1015
+ <i class="fas fa-times"></i>
1016
+ </button>
1017
+ </div>
1018
+ <div id="alertDetailContent" class="py-4">
1019
+ <div class="flex items-center mb-4">
1020
+ <div id="alertDetailIcon" class="rounded-full h-10 w-10 flex items-center justify-center text-white mr-3"></div>
1021
+ <div>
1022
+ <p id="alertDetailTime" class="text-sm text-gray-500"></p>
1023
+ <p id="alertDetailStatus" class="text-xs font-medium"></p>
1024
+ </div>
1025
+ </div>
1026
+ <div id="alertDetailDescription" class="text-sm text-gray-700 mb-4"></div>
1027
+ <div id="alertDetailTags" class="mb-4"></div>
1028
+ <div class="bg-gray-50 p-3 rounded">
1029
+ <h4 class="text-sm font-medium text-gray-700 mb-2">Recommended Actions</h4>
1030
+ <ul id="alertDetailActions" class="text-sm text-gray-700 list-disc pl-5"></ul>
1031
+ </div>
1032
+ </div>
1033
+ <div class="pt-4 border-t">
1034
+ <button onclick="hideAlertDetail()" class="w-full bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-md">
1035
+ Acknowledge
1036
+ </button>
1037
+ </div>
1038
+ </div>
1039
+ </div>
1040
+
1041
+ <script>
1042
+ // Sample project data
1043
+ const projects = {
1044
+ 'alipay-subsidy': {
1045
+ title: '支付宝国补项目 (Alipay Subsidy Project)',
1046
+ description: 'Government subsidy distribution system for Alipay platform',
1047
+ status: 'high-risk',
1048
+ progress: 65,
1049
+ risks: [
1050
+ { type: 'SQL Injection', severity: 'high', phase: 'code' },
1051
+ { type: 'Authorization Bypass', severity: 'high', phase: 'requirements' },
1052
+ { type: 'Data Validation', severity: 'medium', phase: 'requirements' }
1053
+ ],
1054
+ requirements: {
1055
+ content: `The system allows government agencies to distribute subsidies directly to citizens' Alipay accounts. Features include:
1056
+
1057
+ - Bulk payment processing
1058
+ - Recipient verification
1059
+ - Reporting and analytics
1060
+
1061
+ Architecture Diagram:
1062
+ [Frontend] -> [API Gateway] -> [Subsidy Service] -> [Payment Service] -> [Alipay Integration]`,
1063
+ analysis: [
1064
+ {
1065
+ scenario: 'Bulk payment processing',
1066
+ riskPoint: 'No rate limiting on bulk operations',
1067
+ riskType: 'Denial of Service',
1068
+ recommendation: 'Implement rate limiting and batch size restrictions'
1069
+ },
1070
+ {
1071
+ scenario: 'Recipient verification',
1072
+ riskPoint: 'Relies solely on mobile number verification',
1073
+ riskType: 'Authorization Bypass',
1074
+ recommendation: 'Implement multi-factor verification for high-value transactions'
1075
+ }
1076
+ ]
1077
+ },
1078
+ code: {
1079
+ content: `// SubsidyService.java - Process subsidy payment
1080
+ public class SubsidyService {
1081
+ public void processPayment(String userId, BigDecimal amount) {
1082
+ // Vulnerable SQL query
1083
+ String query = "UPDATE accounts SET balance = balance + " + amount +
1084
+ " WHERE user_id = '" + userId + "'";
1085
+
1086
+ // Execute query
1087
+ database.execute(query);
1088
+
1089
+ // Log the transaction
1090
+ logger.log("Processed payment of " + amount + " to user " + userId);
1091
+ }
1092
+ }`,
1093
+ analysis: [
1094
+ {
1095
+ vulnerability: 'SQL Injection',
1096
+ description: 'Concatenating user input directly into SQL query',
1097
+ code: 'String query = "UPDATE accounts SET balance = balance + " + amount + " WHERE user_id = \'" + userId + "\'";',
1098
+ recommendation: 'Use prepared statements with parameterized queries'
1099
+ }
1100
+ ]
1101
+ },
1102
+ securityTesting: {
1103
+ content: `Tested API Endpoint: POST /api/subsidies
1104
+
1105
+ Vulnerable Request:
1106
+ POST /api/subsidies HTTP/1.1
1107
+ Content-Type: application/json
1108
+
1109
+ {
1110
+ "recipient": "1234567890",
1111
+ "amount": "1000.00",
1112
+ "reference": "&lt;script&gt;alert(1)&lt;/script&gt;"
1113
+ }`,
1114
+ analysis: [
1115
+ {
1116
+ endpoint: 'POST /api/subsidies',
1117
+ payload: 'XSS payload in reference field',
1118
+ description: 'Reference field reflects user input without proper encoding'
1119
+ }
1120
+ ]
1121
+ },
1122
+ release: {
1123
+ content: 'Release candidate v1.2.5 includes fixes for 3 of 5 identified vulnerabilities',
1124
+ analysis: [
1125
+ {
1126
+ unresolved: 'Authorization bypass in recipient verification',
1127
+ phase: 'requirements',
1128
+ risk: 'Medium'
1129
+ },
1130
+ {
1131
+ unresolved: 'SQL Injection in payment processing',
1132
+ phase: 'code',
1133
+ risk: 'High'
1134
+ }
1135
+ ]
1136
+ },
1137
+ production: {
1138
+ content: 'Not yet deployed to production',
1139
+ analysis: []
1140
+ }
1141
+ },
1142
+ 'merchant-portal': {
1143
+ title: 'Merchant Portal v2.0',
1144
+ description: 'Dashboard for merchants to manage their Alipay integration',
1145
+ status: 'medium-risk',
1146
+ progress: 42,
1147
+ risks: [
1148
+ { type: 'Cross-Site Scripting', severity: 'medium', phase: 'security-testing' },
1149
+ { type: 'Input Validation', severity: 'low', phase: 'security-testing' }
1150
+ ],
1151
+ requirements: {
1152
+ content: `The Merchant Portal provides:
1153
+
1154
+ - Transaction history and reporting
1155
+ - Payout management
1156
+ - API key management
1157
+ - Customer support integration
1158
+
1159
+ Architecture:
1160
+ [React Frontend] -> [Node.js API] -> [Various Microservices]`,
1161
+ analysis: [
1162
+ {
1163
+ scenario: 'API key management',
1164
+ riskPoint: 'No rate limiting on key generation',
1165
+ riskType: 'Resource Exhaustion',
1166
+ recommendation: 'Implement rate limiting and quotas'
1167
+ }
1168
+ ]
1169
+ },
1170
+ code: {
1171
+ content: `// API Key generation endpoint
1172
+ app.post('/api/keys', (req, res) => {
1173
+ const { merchantId } = req.body;
1174
+
1175
+ // Generate API key
1176
+ const apiKey = generateApiKey();
1177
+
1178
+ // Store in database
1179
+ db.query(\`INSERT INTO api_keys (merchant_id, key) VALUES (${merchantId}, '${apiKey}')\`);
1180
+
1181
+ // Return to client
1182
+ res.json({ key: apiKey });
1183
+ });`,
1184
+ analysis: [
1185
+ {
1186
+ vulnerability: 'SQL Injection',
1187
+ description: 'Concatenating user input directly into SQL query',
1188
+ code: 'db.query(`INSERT INTO api_keys (merchant_id, key) VALUES (${merchantId}, \'${apiKey}\')`);',
1189
+ recommendation: 'Use parameterized queries'
1190
+ }
1191
+ ]
1192
+ },
1193
+ securityTesting: {
1194
+ content: `Tested API Endpoint: GET /api/transactions
1195
+
1196
+ Vulnerable Request:
1197
+ GET /api/transactions?search=&lt;script&gt;alert('XSS')&lt;/script&gt; HTTP/1.1`,
1198
+ analysis: [
1199
+ {
1200
+ endpoint: 'GET /api/transactions',
1201
+ payload: 'XSS payload in search parameter',
1202
+ description: 'Search parameter reflects user input without proper encoding'
1203
+ }
1204
+ ]
1205
+ },
1206
+ release: {
1207
+ content: 'Release candidate v2.0.0-rc3 includes fixes for XSS vulnerabilities',
1208
+ analysis: []
1209
+ },
1210
+ production: {
1211
+ content: 'Currently running v1.9.4 in production with no critical issues',
1212
+ analysis: []
1213
+ }
1214
+ },
1215
+ 'payment-gateway': {
1216
+ title: 'Payment Gateway Microservice',
1217
+ description: 'Core payment processing service',
1218
+ status: 'low-risk',
1219
+ progress: 88,
1220
+ risks: [
1221
+ { type: 'Sensitive Data Exposure', severity: 'medium', phase: 'code' }
1222
+ ],
1223
+ requirements: {
1224
+ content: `Payment Gateway handles:
1225
+
1226
+ - Credit card processing
1227
+ - Bank transfers
1228
+ - Digital wallet payments
1229
+ - Fraud detection
1230
+
1231
+ Architecture:
1232
+ [Clients] -> [Payment Gateway] -> [Processors] -> [Banks]`,
1233
+ analysis: [
1234
+ {
1235
+ scenario: 'Fraud detection',
1236
+ riskPoint: 'No logging of fraud detection rules',
1237
+ riskType: 'Auditability',
1238
+ recommendation: 'Implement detailed audit logging'
1239
+ }
1240
+ ]
1241
+ },
1242
+ code: {
1243
+ content: `# config.py - Payment Gateway Configuration
1244
+
1245
+ DATABASE = {
1246
+ 'host': 'payment-db.internal',
1247
+ 'user': 'admin',
1248
+ 'password': 'supersecret123', # Hardcoded credentials
1249
+ 'name': 'payment_gateway'
1250
+ }
1251
+
1252
+ API_KEYS = {
1253
+ 'stripe': 'sk_live_abcd1234',
1254
+ 'alipay': 'live_xyz789'
1255
+ }`,
1256
+ analysis: [
1257
+ {
1258
+ vulnerability: 'Hardcoded Credentials',
1259
+ description: 'Sensitive credentials stored in source code',
1260
+ code: '\'password\': \'supersecret123\'',
1261
+ recommendation: 'Use environment variables or secret management system'
1262
+ }
1263
+ ]
1264
+ },
1265
+ securityTesting: {
1266
+ content: `Tested API Endpoint: POST /api/payments
1267
+
1268
+ No vulnerabilities found in recent tests`,
1269
+ analysis: []
1270
+ },
1271
+ release: {
1272
+ content: 'Release candidate v3.1.2 includes fix for hardcoded credentials',
1273
+ analysis: []
1274
+ },
1275
+ production: {
1276
+ content: 'Currently running v3.0.9 in production with no active incidents',
1277
+ analysis: []
1278
+ }
1279
+ }
1280
+ };
1281
+
1282
+ // Alert data
1283
+ const alertDetails = {
1284
+ 'alipay-subsidy-requirements': {
1285
+ title: '支付宝国补项目 - 需求设计环节',
1286
+ description: '在需求设计阶段检测到权限配置风险。批量支付处理功能缺乏速率限制，可能导致拒绝服务攻击。',
1287
+ actions: [
1288
+ '为批量操作实施速率限制',
1289
+ '添加批量大小限制',
1290
+ '实施多因素验证机制'
1291
+ ],
1292
+ severity: 'high'
1293
+ },
1294
+ 'merchant-portal-code': {
1295
+ title: 'Merchant Portal - 代码变更环节',
1296
+ description: '在3个API端点检测到XSS漏洞。搜索参数未正确编码用户输入，导致跨站脚本攻击风险。',
1297
+ actions: [
1298
+ '对所有用户输入实施输出编码',
1299
+ '添加内容安全策略(CSP)头',
1300
+ '更新输入验证规则'
1301
+ ],
1302
+ severity: 'medium'
1303
+ },
1304
+ 'payment-gateway-code': {
1305
+ title: 'Payment Gateway - 代码变更环节',
1306
+ description: '在配置文件中发现硬编码凭据。数据库密码和API密钥以明文形式存储在源代码中。',
1307
+ actions: [
1308
+ '将敏感数据移至环境变量',
1309
+ '实施密钥管理系统',
1310
+ '轮换所有暴露的凭据'
1311
+ ],
1312
+ severity: 'medium'
1313
+ },
1314
+ 'merchant-portal-testing': {
1315
+ title: 'Merchant Portal - 安全测试环节',
1316
+ description: '安全测试发现输入验证问题。某些字段未正确验证用户输入，可能导致业务逻辑绕过。',
1317
+ actions: [
1318
+ '实施严格的输入验证规则',
1319
+ '添加服务器端验证',
1320
+ '更新API文档以反映验证要求'
1321
+ ],
1322
+ severity: 'low'
1323
+ }
1324
+ };
1325
+
1326
+ // Show project detail
1327
+ function showProjectDetail(projectId) {
1328
+ const project = projects[projectId];
1329
+ if (!project) return;
1330
+
1331
+ document.getElementById('projectDetailTitle').textContent = project.title;
1332
+
1333
+ let content = `
1334
+ <div class="mb-6">
1335
+ <p class="text-gray-700 mb-4">${escapeHtml(project.description)}</p>
1336
+
1337
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
1338
+ <div class="bg-gray-50 p-4 rounded-lg">
1339
+ <h4 class="text-sm font-medium text-gray-500 mb-1">Status</h4>
1340
+ <p class="font-medium ${project.status === 'high-risk' ? 'text-red-600' : project.status === 'medium-risk' ? 'text-orange-600' : 'text-yellow-600'}">
1341
+ ${project.status === 'high-risk' ? 'High Risk' : project.status === 'medium-risk' ? 'Medium Risk' : 'Low Risk'}
1342
+ </p>
1343
+ </div>
1344
+
1345
+ <div class="bg-gray-50 p-4 rounded-lg">
1346
+ <h4 class="text-sm font-medium text-gray-500 mb-1">Progress</h4>
1347
+ <div class="w-full bg-gray-200 rounded-full h-2 mt-2">
1348
+ <div class="h-2 rounded-full ${project.status === 'high-risk' ? 'bg-red-500' : project.status === 'medium-risk' ? 'bg-orange-500' : 'bg-yellow-500'}" style="width: ${project.progress}%"></div>
1349
+ </div>
1350
+ <p class="text-xs text-gray-500 mt-1">${project.progress}% complete</p>
1351
+ </div>
1352
+
1353
+ <div class="bg-gray-50 p-4 rounded-lg">
1354
+ <h4 class="text-sm font-medium text-gray-500 mb-1">Risks Detected</h4>
1355
+ <div class="mt-1">
1356
+ ${project.risks.map(risk => `
1357
+ <span class="risk-tag ${risk.severity === 'high' ? 'bg-red-100 text-red-800' : risk.severity === 'medium' ? 'bg-orange-100 text-orange-800' : 'bg-yellow-100 text-yellow-800'}">
1358
+ ${escapeHtml(risk.type)}
1359
+ </span>
1360
+ `).join('')}
1361
+ </div>
1362
+ </div>
1363
+ </div>
1364
+ </div>
1365
+
1366
+ <div class="border-t pt-6">
1367
+ <h3 class="text-lg font-bold text-gray-900 mb-4">SDL Phase Analysis</h3>
1368
+
1369
+ <div class="space-y-8">
1370
+ <!-- Requirements -->
1371
+ <div>
1372
+ <div class="flex items-center mb-3">
1373
+ <div class="bg-green-600 rounded-full h-6 w-6 flex items-center justify-center text-white mr-3">
1374
+ <i class="fas fa-lightbulb text-xs"></i>
1375
+ </div>
1376
+ <h4 class="font-semibold text-gray-900">Requirement Design</h4>
1377
+ </div>
1378
+
1379
+ <div class="ml-9">
1380
+ <div class="highlight-box border-green-500 mb-4">
1381
+ <h5 class="font-medium text-gray-900 mb-2">Content</h5>
1382
+ <div class="text-sm text-gray-700 whitespace-pre-line">${escapeHtml(project.requirements.content)}</div>
1383
+ </div>
1384
+
1385
+ <div class="highlight-box border-green-500">
1386
+ <h5 class="font-medium text-gray-900 mb-2">Security Analysis Results</h5>
1387
+ ${project.requirements.analysis.length > 0 ? `
1388
+ <div class="space-y-4">
1389
+ ${project.requirements.analysis.map(item => `
1390
+ <div class="bg-white p-3 rounded-lg border border-gray-200">
1391
+ <div class="font-medium">${escapeHtml(item.scenario)}</div>
1392
+ <div class="text-sm mt-1"><span class="font-medium">Risk:</span> ${escapeHtml(item.riskPoint)} (${escapeHtml(item.riskType)})</div>
1393
+ <div class="text-sm mt-1"><span class="font-medium">Recommendation:</span> ${escapeHtml(item.recommendation)}</div>
1394
+ </div>
1395
+ `).join('')}
1396
+ </div>
1397
+ ` : '<p class="text-sm text-gray-500">No risks detected in this phase</p>'}
1398
+ </div>
1399
+ </div>
1400
+ </div>
1401
+
1402
+ <!-- Code -->
1403
+ <div>
1404
+ <div class="flex items-center mb-3">
1405
+ <div class="bg-green-600 rounded-full h-6 w-6 flex items-center justify-center text-white mr-3">
1406
+ <i class="fas fa-code text-xs"></i>
1407
+ </div>
1408
+ <h4 class="font-semibold text-gray-900">Code Changes</h4>
1409
+ </div>
1410
+
1411
+ <div class="ml-9">
1412
+ <div class="highlight-box border-green-500 mb-4">
1413
+ <h5 class="font-medium text-gray-900 mb-2">Content</h5>
1414
+ <div class="code-block">${escapeHtml(project.code.content)}</div>
1415
+ </div>
1416
+
1417
+ <div class="highlight-box border-green-500">
1418
+ <h5 class="font-medium text-gray-900 mb-2">Security Analysis Results</h5>
1419
+ ${project.code.analysis.length > 0 ? `
1420
+ <div class="space-y-4">
1421
+ ${project.code.analysis.map(item => `
1422
+ <div class="bg-white p-3 rounded-lg border border-gray-200">
1423
+ <div class="font-medium">${escapeHtml(item.vulnerability)}</div>
1424
+ <div class="text-sm mt-1"><span class="font-medium">Description:</span> ${escapeHtml(item.description)}</div>
1425
+ <div class="text-sm mt-1"><span class="font-medium">Vulnerable Code:</span> <span class="code-block vulnerability-line">${escapeHtml(item.code)}</span></div>
1426
+ <div class="text-sm mt-1"><span class="font-medium">Recommendation:</span> ${escapeHtml(item.recommendation)}</div>
1427
+ </div>
1428
+ `).join('')}
1429
+ </div>
1430
+ ` : '<p class="text-sm text-gray-500">No risks detected in this phase</p>'}
1431
+ </div>
1432
+ </div>
1433
+ </div>
1434
+
1435
+ <!-- Security Testing -->
1436
+ <div>
1437
+ <div class="flex items-center mb-3">
1438
+ <div class="bg-green-600 rounded-full h-6 w-6 flex items-center justify-center text-white mr-3">
1439
+ <i class="fas fa-shield-alt text-xs"></i>
1440
+ </div>
1441
+ <h4 class="font-semibold text-gray-900">Security Testing</h4>
1442
+ </div>
1443
+
1444
+ <div class="ml-9">
1445
+ <div class="highlight-box border-green-500 mb-4">
1446
+ <h5 class="font-medium text-gray-900 mb-2">Content</h5>
1447
+ <div class="code-block">${escapeHtml(project.securityTesting.content)}</div>
1448
+ </div>
1449
+
1450
+ <div class="highlight-box border-green-500">
1451
+ <h5 class="font-medium text-gray-900 mb-2">Security Analysis Results</h5>
1452
+ ${project.securityTesting.analysis.length > 0 ? `
1453
+ <div class="space-y-4">
1454
+ ${project.securityTesting.analysis.map(item => `
1455
+ <div class="bg-white p-3 rounded-lg border border-gray-200">
1456
+ <div class="font-medium">${escapeHtml(item.endpoint)}</div>
1457
+ <div class="text-sm mt-1"><span class="font-medium">Payload:</span> <span class="code-block">${escapeHtml(item.payload)}</span></div>
1458
+ <div class="text-sm mt-1"><span class="font-medium">Description:</span> ${escapeHtml(item.description)}</div>
1459
+ </div>
1460
+ `).join('')}
1461
+ </div>
1462
+ ` : '<p class="text-sm text-gray-500">No risks detected in this phase</p>'}
1463
+ </div>
1464
+ </div>
1465
+ </div>
1466
+
1467
+ <!-- Release -->
1468
+ <div>
1469
+ <div class="flex items-center mb-3">
1470
+ <div class="bg-green-600 rounded-full h-6 w-6 flex items-center justify-center text-white mr-3">
1471
+ <i class="fas fa-rocket text-xs"></i>
1472
+ </div>
1473
+ <h4 class="font-semibold text-gray-900">Release</h4>
1474
+ </div>
1475
+
1476
+ <div class="ml-9">
1477
+ <div class="highlight-box border-green-500 mb-4">
1478
+ <h5 class="font-medium text-gray-900 mb-2">Content</h5>
1479
+ <p class="text-sm text-gray-700">${escapeHtml(project.release.content)}</p>
1480
+ </div>
1481
+
1482
+ <div class="highlight-box border-green-500">
1483
+ <h5 class="font-medium text-gray-900 mb-2">Security Analysis Results</h5>
1484
+ ${project.release.analysis.length > 0 ? `
1485
+ <div class="space-y-4">
1486
+ ${project.release.analysis.map(item => `
1487
+ <div class="bg-white p-3 rounded-lg border border-gray-200">
1488
+ <div class="font-medium">Unresolved ${escapeHtml(item.phase)} risk</div>
1489
+ <div class="text-sm mt-1"><span class="font-medium">Risk:</span> ${escapeHtml(item.unresolved)}</div>
1490
+ <div class="text-sm mt-1"><span class="font-medium">Severity:</span> <span class="${item.risk === 'High' ? 'text-red-600' : item.risk === 'Medium' ? 'text-orange-600' : 'text-yellow-600'}">${escapeHtml(item.risk)}</span></div>
1491
+ </div>
1492
+ `).join('')}
1493
+ </div>
1494
+ ` : '<p class="text-sm text-gray-500">All identified risks have been resolved</p>'}
1495
+ </div>
1496
+ </div>
1497
+ </div>
1498
+
1499
+ <!-- Production -->
1500
+ <div>
1501
+ <div class="flex items-center mb-3">
1502
+ <div class="bg-green-600 rounded-full h-6 w-6 flex items-center justify-center text-white mr-3">
1503
+ <i class="fas fa-globe text-xs"></i>
1504
+ </div>
1505
+ <h4 class="font-semibold text-gray-900">Production</h4>
1506
+ </div>
1507
+
1508
+ <div class="ml-9">
1509
+ <div class="highlight-box border-green-500 mb-4">
1510
+ <h5 class="font-medium text-gray-900 mb-2">Content</h5>
1511
+ <p class="text-sm text-gray-700">${escapeHtml(project.production.content)}</p>
1512
+ </div>
1513
+
1514
+ <div class="highlight-box border-green-500">
1515
+ <h5 class="font-medium text-gray-900 mb-2">Security Analysis Results</h5>
1516
+ ${project.production.analysis.length > 0 ? `
1517
+ <div class="space-y-4">
1518
+ ${project.production.analysis.map(item => `
1519
+ <div class="bg-white p-3 rounded-lg border border-gray-200">
1520
+ <div class="font-medium">${escapeHtml(item.vulnerability)}</div>
1521
+ <div class="text-sm mt-1"><span class="font-medium">Status:</span> ${escapeHtml(item.status)}</div>
1522
+ <div class="text-sm mt-1"><span class="font-medium">Recommendation:</span> ${escapeHtml(item.recommendation)}</div>
1523
+ </div>
1524
+ `).join('')}
1525
+ </div>
1526
+ ` : '<p class="text-sm text-gray-500">No active threats detected in production</p>'}
1527
+ </div>
1528
+ </div>
1529
+ </div>
1530
+ </div>
1531
+ </div>
1532
+ `;
1533
+
1534
+ document.getElementById('projectDetailContent').innerHTML = content;
1535
+ document.getElementById('projectDetailModal').classList.remove('hidden');
1536
+ }
1537
+
1538
+ // Hide project detail
1539
+ function hideProjectDetail() {
1540
+ document.getElementById('projectDetailModal').classList.add('hidden');
1541
+ }
1542
+
1543
+ // Show alert detail
1544
+ function showAlertDetail(alertId) {
1545
+ const alert = alertDetails[alertId];
1546
+ if (!alert) return;
1547
+
1548
+ document.getElementById('alertDetailTitle').textContent = alert.title;
1549
+ document.getElementById('alertDetailDescription').textContent = alert.description;
1550
+ document.getElementById('alertDetailTime').textContent = '刚刚';
1551
+
1552
+ // Set icon based on severity
1553
+ const icon = document.getElementById('alertDetailIcon');
1554
+ icon.className = 'rounded-full h-10 w-10 flex items-center justify-center text-white mr-3';
1555
+
1556
+ if (alert.severity === 'high') {
1557
+ icon.classList.add('bg-red-500', 'pulse-glow');
1558
+ icon.innerHTML = '<i class="fas fa-exclamation-triangle"></i>';
1559
+ document.getElementById('alertDetailStatus').textContent = 'High Risk';
1560
+ document.getElementById('alertDetailStatus').className = 'text-xs font-medium text-red-600';
1561
+ } else if (alert.severity === 'medium') {
1562
+ icon.classList.add('bg-orange-500', 'pulse-glow');
1563
+ icon.innerHTML = '<i class="fas fa-exclamation-circle"></i
1564
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ 数字分身动作：增加对话气泡：实时显示分析日志（如"正在分析支付宝国补项目需求中的权限配置..."），文本逐字浮现，并在完成时触发"完成！"的轻快音效。 Real-time Analysis Dashboard模块：采用动态数字翻转效果，数值随后台数据更新实时刷新。 Risk Alerts模块 ● 告警瀑布流： ● 右侧垂直列表实时滚动新告警，每个告警项包含： ● 风险等级徽章（红/橙/黄/蓝，带呼吸光效） ● 项目名称+环节（如"云存储优化项目-代码变更环节"） ● 风险类型标签（如"SQL注入"、"权限越界"） ● 时间戳（动态显示"刚刚"、"1分钟前"） ● 告警动画：新告警项从底部弹出，伴随微交互动画（如徽章图标弹跳）。 ● 点击查看交互： ● 点击告警项时，触发焦点放大动画（告警项放大并弹出半透明详情层），同时对应环节节点的进度环高亮闪烁，数字分身转向该环节并指向告警项。