Hugging Face's logo

Spaces:
capta1n
/
sdlmax3
Running

App Files Community
capta1n commited on
Commit
83d31cc
·
verified ·
1 Parent(s): c7149af

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1023 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Sdlmax3
3
- emoji: 🔥
4
- colorFrom: blue
5
- colorTo: red
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: sdlmax3
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: gray
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,1023 @@
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 Security Guardian</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 pulse {
11
+ 0%, 100% { opacity: 1; }
12
+ 50% { opacity: 0.5; }
13
+ }
14
+ @keyframes rotate {
15
+ 0% { transform: rotate(0deg); }
16
+ 100% { transform: rotate(360deg); }
17
+ }
18
+ @keyframes flow {
19
+ 0% { stroke-dashoffset: 100; }
20
+ 100% { stroke-dashoffset: 0; }
21
+ }
22
+ .pulse {
23
+ animation: pulse 2s infinite;
24
+ }
25
+ .flow-arrow {
26
+ animation: flow 3s linear infinite;
27
+ }
28
+ .progress-ring {
29
+ transform: rotate(-90deg);
30
+ }
31
+ .progress-ring-circle {
32
+ transition: stroke-dashoffset 0.5s ease;
33
+ }
34
+ .avatar-blink {
35
+ animation: pulse 3s infinite;
36
+ }
37
+ .risk-counter {
38
+ animation: pulse 1.5s infinite;
39
+ }
40
+ .fade-in {
41
+ animation: fadeIn 0.5s ease-in;
42
+ }
43
+ @keyframes fadeIn {
44
+ from { opacity: 0; transform: translateY(10px); }
45
+ to { opacity: 1; transform: translateY(0); }
46
+ }
47
+ .code-highlight {
48
+ background-color: rgba(255, 255, 0, 0.3);
49
+ transition: background-color 0.3s;
50
+ }
51
+ .code-highlight:hover {
52
+ background-color: rgba(255, 255, 0, 0.6);
53
+ }
54
+ </style>
55
+ </head>
56
+ <body class="bg-gray-900 text-gray-100 font-sans">
57
+ <!-- Header -->
58
+ <header class="bg-gray-800 py-4 px-6 shadow-lg">
59
+ <div class="flex justify-between items-center">
60
+ <div class="flex items-center space-x-4">
61
+ <div class="w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center avatar-blink">
62
+ <i class="fas fa-robot text-2xl"></i>
63
+ </div>
64
+ <div>
65
+ <h1 class="text-2xl font-bold">AI SDL Security Guardian</h1>
66
+ <p class="text-gray-400 text-sm">Your digital security companion</p>
67
+ </div>
68
+ </div>
69
+ <div class="flex items-center space-x-4">
70
+ <div class="bg-gray-700 px-4 py-2 rounded-lg">
71
+ <p class="text-sm text-gray-300">Last updated: <span id="last-updated">Just now</span></p>
72
+ </div>
73
+ <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg flex items-center space-x-2 transition">
74
+ <i class="fas fa-sync-alt"></i>
75
+ <span>Refresh</span>
76
+ </button>
77
+ </div>
78
+ </div>
79
+ </header>
80
+
81
+ <!-- Real-time Analysis Stats -->
82
+ <section class="bg-gray-800 p-6 mb-6 shadow-lg">
83
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
84
+ <div class="bg-gray-700 p-4 rounded-lg">
85
+ <div class="flex justify-between items-center">
86
+ <h3 class="text-gray-400">Projects Analyzed</h3>
87
+ <i class="fas fa-project-diagram text-blue-400"></i>
88
+ </div>
89
+ <p class="text-3xl font-bold mt-2">1,248</p>
90
+ <p class="text-green-400 text-sm mt-1">+24 today</p>
91
+ </div>
92
+ <div class="bg-gray-700 p-4 rounded-lg">
93
+ <div class="flex justify-between items-center">
94
+ <h3 class="text-gray-400">Code Lines Scanned</h3>
95
+ <i class="fas fa-code text-blue-400"></i>
96
+ </div>
97
+ <p class="text-3xl font-bold mt-2">4.2M</p>
98
+ <p class="text-green-400 text-sm mt-1">+120K today</p>
99
+ </div>
100
+ <div class="bg-gray-700 p-4 rounded-lg">
101
+ <div class="flex justify-between items-center">
102
+ <h3 class="text-gray-400">Active Risks</h3>
103
+ <i class="fas fa-exclamation-triangle text-red-400"></i>
104
+ </div>
105
+ <p class="text-3xl font-bold mt-2">87</p>
106
+ <p class="text-red-400 text-sm mt-1">+12 new</p>
107
+ </div>
108
+ <div class="bg-gray-700 p-4 rounded-lg">
109
+ <div class="flex justify-between items-center">
110
+ <h3 class="text-gray-400">Security Score</h3>
111
+ <i class="fas fa-shield-alt text-blue-400"></i>
112
+ </div>
113
+ <div class="flex items-center mt-2">
114
+ <p class="text-3xl font-bold">92%</p>
115
+ <div class="ml-2 w-full bg-gray-600 rounded-full h-2.5">
116
+ <div class="bg-green-500 h-2.5 rounded-full" style="width: 92%"></div>
117
+ </div>
118
+ </div>
119
+ <p class="text-green-400 text-sm mt-1">+2% this week</p>
120
+ </div>
121
+ </div>
122
+ </section>
123
+
124
+ <div class="container mx-auto px-6">
125
+ <!-- Main Content -->
126
+ <div class="flex flex-col lg:flex-row gap-6">
127
+ <!-- Left Panel - SDL Process Visualization -->
128
+ <div class="lg:w-2/3 bg-gray-800 rounded-xl p-6 shadow-lg">
129
+ <h2 class="text-xl font-bold mb-6 flex items-center">
130
+ <i class="fas fa-shield-virus mr-2 text-blue-400"></i>
131
+ SDL Process Analysis
132
+ </h2>
133
+
134
+ <div class="relative h-96">
135
+ <!-- Circular SDL Process Visualization -->
136
+ <div class="absolute inset-0 flex items-center justify-center">
137
+ <svg width="400" height="400" viewBox="0 0 400 400" class="mx-auto">
138
+ <!-- Data Flow Arrows -->
139
+ <path id="flow1" d="M200,50 A150,150 0 0,1 350,200" fill="none" stroke="url(#gradient1)" stroke-width="2" stroke-dasharray="10,5" class="flow-arrow" />
140
+ <path id="flow2" d="M350,200 A150,150 0 0,1 200,350" fill="none" stroke="url(#gradient2)" stroke-width="2" stroke-dasharray="10,5" class="flow-arrow" />
141
+ <path id="flow3" d="M200,350 A150,150 0 0,1 50,200" fill="none" stroke="url(#gradient3)" stroke-width="2" stroke-dasharray="10,5" class="flow-arrow" />
142
+ <path id="flow4" d="M50,200 A150,150 0 0,1 200,50" fill="none" stroke="url(#gradient4)" stroke-width="2" stroke-dasharray="10,5" class="flow-arrow" />
143
+
144
+ <defs>
145
+ <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%">
146
+ <stop offset="0%" stop-color="#3B82F6" />
147
+ <stop offset="100%" stop-color="#10B981" />
148
+ </linearGradient>
149
+ <linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="0%">
150
+ <stop offset="0%" stop-color="#10B981" />
151
+ <stop offset="100%" stop-color="#F59E0B" />
152
+ </linearGradient>
153
+ <linearGradient id="gradient3" x1="0%" y1="0%" x2="100%" y2="0%">
154
+ <stop offset="0%" stop-color="#F59E0B" />
155
+ <stop offset="100%" stop-color="#EF4444" />
156
+ </linearGradient>
157
+ <linearGradient id="gradient4" x1="0%" y1="0%" x2="100%" y2="0%">
158
+ <stop offset="0%" stop-color="#EF4444" />
159
+ <stop offset="100%" stop-color="#8B5CF6" />
160
+ </linearGradient>
161
+ </defs>
162
+
163
+ <!-- SDL Process Nodes -->
164
+ <!-- Requirements -->
165
+ <g class="cursor-pointer hover:opacity-90 transition" onclick="showProcessDetail('requirements')">
166
+ <circle cx="200" cy="50" r="30" fill="#3B82F6" />
167
+ <text x="200" y="50" text-anchor="middle" fill="white" font-size="12" dy=".3em">Req</text>
168
+ <circle cx="200" cy="50" r="35" fill="none" stroke="#3B82F6" stroke-width="4" stroke-dasharray="78.5, 78.5" class="progress-ring-circle" stroke-dashoffset="17.27" />
169
+ <text x="200" y="90" text-anchor="middle" fill="#9CA3AF" font-size="10">78%</text>
170
+ <circle cx="230" cy="40" r="10" fill="#EF4444" class="risk-counter" />
171
+ <text x="230" y="40" text-anchor="middle" fill="white" font-size="8" dy=".3em">5</text>
172
+ </g>
173
+
174
+ <!-- Code -->
175
+ <g class="cursor-pointer hover:opacity-90 transition" onclick="showProcessDetail('code')">
176
+ <circle cx="350" cy="200" r="30" fill="#10B981" />
177
+ <text x="350" y="200" text-anchor="middle" fill="white" font-size="12" dy=".3em">Code</text>
178
+ <circle cx="350" cy="200" r="35" fill="none" stroke="#10B981" stroke-width="4" stroke-dasharray="78.5, 78.5" class="progress-ring-circle" stroke-dashoffset="31.4" />
179
+ <text x="350" y="240" text-anchor="middle" fill="#9CA3AF" font-size="10">60%</text>
180
+ <circle cx="380" cy="190" r="10" fill="#EF4444" class="risk-counter" />
181
+ <text x="380" y="190" text-anchor="middle" fill="white" font-size="8" dy=".3em">12</text>
182
+ </g>
183
+
184
+ <!-- Testing -->
185
+ <g class="cursor-pointer hover:opacity-90 transition" onclick="showProcessDetail('testing')">
186
+ <circle cx="200" cy="350" r="30" fill="#F59E0B" />
187
+ <text x="200" y="350" text-anchor="middle" fill="white" font-size="12" dy=".3em">Test</text>
188
+ <circle cx="200" cy="350" r="35" fill="none" stroke="#F59E0B" stroke-width="4" stroke-dasharray="78.5, 78.5" class="progress-ring-circle" stroke-dashoffset="47.1" />
189
+ <text x="200" y="390" text-anchor="middle" fill="#9CA3AF" font-size="10">40%</text>
190
+ <circle cx="230" cy="340" r="10" fill="#EF4444" class="risk-counter" />
191
+ <text x="230" y="340" text-anchor="middle" fill="white" font-size="8" dy=".3em">8</text>
192
+ </g>
193
+
194
+ <!-- Release -->
195
+ <g class="cursor-pointer hover:opacity-90 transition" onclick="showProcessDetail('release')">
196
+ <circle cx="50" cy="200" r="30" fill="#EF4444" />
197
+ <text x="50" y="200" text-anchor="middle" fill="white" font-size="12" dy=".3em">Release</text>
198
+ <circle cx="50" cy="200" r="35" fill="none" stroke="#EF4444" stroke-width="4" stroke-dasharray="78.5, 78.5" class="progress-ring-circle" stroke-dashoffset="23.55" />
199
+ <text x="50" y="240" text-anchor="middle" fill="#9CA3AF" font-size="10">70%</text>
200
+ <circle cx="80" cy="190" r="10" fill="#EF4444" class="risk-counter" />
201
+ <text x="80" y="190" text-anchor="middle" fill="white" font-size="8" dy=".3em">3</text>
202
+ </g>
203
+
204
+ <!-- Operations -->
205
+ <g class="cursor-pointer hover:opacity-90 transition" onclick="showProcessDetail('operations')">
206
+ <circle cx="110" cy="110" r="30" fill="#8B5CF6" />
207
+ <text x="110" y="110" text-anchor="middle" fill="white" font-size="12" dy=".3em">Ops</text>
208
+ <circle cx="110" cy="110" r="35" fill="none" stroke="#8B5CF6" stroke-width="4" stroke-dasharray="78.5, 78.5" class="progress-ring-circle" stroke-dashoffset="39.25" />
209
+ <text x="110" y="150" text-anchor="middle" fill="#9CA3AF" font-size="10">50%</text>
210
+ <circle cx="140" cy="100" r="10" fill="#EF4444" class="risk-counter" />
211
+ <text x="140" y="100" text-anchor="middle" fill="white" font-size="8" dy=".3em">7</text>
212
+ </g>
213
+
214
+ <!-- AI Avatar Center -->
215
+ <g>
216
+ <circle cx="200" cy="200" r="50" fill="#1F2937" />
217
+ <foreignObject x="150" y="150" width="100" height="100">
218
+ <div class="flex items-center justify-center h-full">
219
+ <div class="w-16 h-16 rounded-full bg-blue-500 flex items-center justify-center avatar-blink">
220
+ <i class="fas fa-robot text-2xl"></i>
221
+ </div>
222
+ </div>
223
+ </foreignObject>
224
+ <text x="200" y="220" text-anchor="middle" fill="white" font-size="10">Analyzing...</text>
225
+ </g>
226
+ </svg>
227
+ </div>
228
+ </div>
229
+
230
+ <div class="mt-8">
231
+ <h3 class="text-lg font-semibold mb-3 flex items-center">
232
+ <i class="fas fa-bolt mr-2 text-yellow-400"></i>
233
+ Analysis Insight
234
+ </h3>
235
+ <div class="bg-gray-700 rounded-lg p-4 h-40 overflow-y-auto">
236
+ <div class="space-y-3" id="analysis-insights">
237
+ <div class="fade-in flex items-start">
238
+ <div class="bg-blue-600 rounded-full w-6 h-6 flex items-center justify-center mr-2 mt-1">
239
+ <i class="fas fa-check text-xs"></i>
240
+ </div>
241
+ <div>
242
+ <p class="text-sm">Completed analysis: Alipay National Subsidy Project requirements</p>
243
+ <p class="text-xs text-gray-400">Identified 2 risks (SQLi, Auth Bypass)</p>
244
+ </div>
245
+ </div>
246
+ <div class="fade-in flex items-start">
247
+ <div class="bg-blue-600 rounded-full w-6 h-6 flex items-center justify-center mr-2 mt-1">
248
+ <i class="fas fa-check text-xs"></i>
249
+ </div>
250
+ <div>
251
+ <p class="text-sm">Completed analysis: Cloud Storage Optimization Project code</p>
252
+ <p class="text-xs text-gray-400">Found 3 vulnerabilities (XSS, IDOR, Hardcoded Secrets)</p>
253
+ </div>
254
+ </div>
255
+ <div class="fade-in flex items-start">
256
+ <div class="bg-blue-600 rounded-full w-6 h-6 flex items-center justify-center mr-2 mt-1">
257
+ <i class="fas fa-spinner fa-spin text-xs"></i>
258
+ </div>
259
+ <div>
260
+ <p class="text-sm">Analyzing: Payment Gateway API security tests</p>
261
+ <p class="text-xs text-gray-400">45% completed</p>
262
+ </div>
263
+ </div>
264
+ <div class="fade-in flex items-start">
265
+ <div class="bg-blue-600 rounded-full w-6 h-6 flex items-center justify-center mr-2 mt-1">
266
+ <i class="fas fa-check text-xs"></i>
267
+ </div>
268
+ <div>
269
+ <p class="text-sm">Completed analysis: User Profile Service release</p>
270
+ <p class="text-xs text-gray-400">Verified 12/15 fixes implemented</p>
271
+ </div>
272
+ </div>
273
+ </div>
274
+ </div>
275
+ </div>
276
+ </div>
277
+
278
+ <!-- Right Panel - Risk Alerts -->
279
+ <div class="lg:w-1/3 bg-gray-800 rounded-xl p-6 shadow-lg">
280
+ <div class="flex justify-between items-center mb-6">
281
+ <h2 class="text-xl font-bold flex items-center">
282
+ <i class="fas fa-exclamation-triangle mr-2 text-red-400"></i>
283
+ Risk Alerts
284
+ </h2>
285
+ <span class="bg-red-500 text-white text-xs px-2 py-1 rounded-full">87 Active</span>
286
+ </div>
287
+
288
+ <div class="space-y-4" id="risk-alerts">
289
+ <!-- Sample Risk Alert 1 -->
290
+ <div class="bg-gray-700 rounded-lg p-4 border-l-4 border-red-500 cursor-pointer hover:bg-gray-600 transition" onclick="showRiskDetail('alipay')">
291
+ <div class="flex justify-between items-start">
292
+ <div>
293
+ <h3 class="font-semibold">Alipay National Subsidy Project</h3>
294
+ <p class="text-sm text-gray-400">Project ID: PROJ-2023-048</p>
295
+ </div>
296
+ <span class="bg-red-500 text-white text-xs px-2 py-1 rounded-full">Critical</span>
297
+ </div>
298
+ <div class="mt-2">
299
+ <div class="flex flex-wrap gap-1">
300
+ <span class="bg-gray-600 text-xs px-2 py-1 rounded">Requirements</span>
301
+ <span class="bg-gray-600 text-xs px-2 py-1 rounded">Code</span>
302
+ </div>
303
+ </div>
304
+ <div class="mt-3">
305
+ <p class="text-sm">Risks: SQL Injection, Authorization Bypass</p>
306
+ <p class="text-xs text-gray-400 mt-1">Last detected: 15 minutes ago</p>
307
+ </div>
308
+ </div>
309
+
310
+ <!-- Sample Risk Alert 2 -->
311
+ <div class="bg-gray-700 rounded-lg p-4 border-l-4 border-orange-500 cursor-pointer hover:bg-gray-600 transition" onclick="showRiskDetail('cloud')">
312
+ <div class="flex justify-between items-start">
313
+ <div>
314
+ <h3 class="font-semibold">Cloud Storage Optimization</h3>
315
+ <p class="text-sm text-gray-400">Project ID: PROJ-2023-056</p>
316
+ </div>
317
+ <span class="bg-orange-500 text-white text-xs px-2 py-1 rounded-full">High</span>
318
+ </div>
319
+ <div class="mt-2">
320
+ <div class="flex flex-wrap gap-1">
321
+ <span class="bg-gray-600 text-xs px-2 py-1 rounded">Code</span>
322
+ <span class="bg-gray-600 text-xs px-2 py-1 rounded">Testing</span>
323
+ </div>
324
+ </div>
325
+ <div class="mt-3">
326
+ <p class="text-sm">Risks: XSS, Insecure Direct Object Reference</p>
327
+ <p class="text-xs text-gray-400 mt-1">Last detected: 1 hour ago</p>
328
+ </div>
329
+ </div>
330
+
331
+ <!-- Sample Risk Alert 3 -->
332
+ <div class="bg-gray-700 rounded-lg p-4 border-l-4 border-yellow-500 cursor-pointer hover:bg-gray-600 transition" onclick="showRiskDetail('payment')">
333
+ <div class="flex justify-between items-start">
334
+ <div>
335
+ <h3 class="font-semibold">Payment Gateway API</h3>
336
+ <p class="text-sm text-gray-400">Project ID: PROJ-2023-062</p>
337
+ </div>
338
+ <span class="bg-yellow-500 text-white text-xs px-2 py-1 rounded-full">Medium</span>
339
+ </div>
340
+ <div class="mt-2">
341
+ <div class="flex flex-wrap gap-1">
342
+ <span class="bg-gray-600 text-xs px-2 py-1 rounded">Testing</span>
343
+ <span class="bg-gray-600 text-xs px-2 py-1 rounded">Release</span>
344
+ </div>
345
+ </div>
346
+ <div class="mt-3">
347
+ <p class="text-sm">Risks: CSRF, Sensitive Data Exposure</p>
348
+ <p class="text-xs text-gray-400 mt-1">Last detected: 2 hours ago</p>
349
+ </div>
350
+ </div>
351
+
352
+ <!-- Sample Risk Alert 4 -->
353
+ <div class="bg-gray-700 rounded-lg p-4 border-l-4 border-blue-500 cursor-pointer hover:bg-gray-600 transition" onclick="showRiskDetail('user')">
354
+ <div class="flex justify-between items-start">
355
+ <div>
356
+ <h3 class="font-semibold">User Profile Service</h3>
357
+ <p class="text-sm text-gray-400">Project ID: PROJ-2023-071</p>
358
+ </div>
359
+ <span class="bg-blue-500 text-white text-xs px-2 py-1 rounded-full">Low</span>
360
+ </div>
361
+ <div class="mt-2">
362
+ <div class="flex flex-wrap gap-1">
363
+ <span class="bg-gray-600 text-xs px-2 py-1 rounded">Release</span>
364
+ <span class="bg-gray-600 text-xs px-2 py-1 rounded">Operations</span>
365
+ </div>
366
+ </div>
367
+ <div class="mt-3">
368
+ <p class="text-sm">Risks: Missing Security Headers</p>
369
+ <p class="text-xs text-gray-400 mt-1">Last detected: 4 hours ago</p>
370
+ </div>
371
+ </div>
372
+ </div>
373
+
374
+ <div class="mt-6">
375
+ <button class="w-full bg-blue-600 hover:bg-blue-700 py-2 rounded-lg flex items-center justify-center space-x-2 transition">
376
+ <i class="fas fa-file-alt"></i>
377
+ <span>Generate Security Report</span>
378
+ </button>
379
+ </div>
380
+ </div>
381
+ </div>
382
+ </div>
383
+
384
+ <!-- Risk Detail Modal -->
385
+ <div id="risk-detail-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
386
+ <div class="bg-gray-800 rounded-xl w-11/12 max-w-6xl max-h-screen overflow-y-auto" style="height: 90vh;">
387
+ <div class="p-6">
388
+ <div class="flex justify-between items-center mb-6">
389
+ <div>
390
+ <h2 class="text-2xl font-bold" id="risk-project-name">Alipay National Subsidy Project</h2>
391
+ <p class="text-gray-400" id="risk-project-id">PROJ-2023-048</p>
392
+ </div>
393
+ <div class="flex items-center space-x-4">
394
+ <span class="bg-red-500 text-white px-3 py-1 rounded-full text-sm" id="risk-severity">Critical</span>
395
+ <button onclick="closeRiskDetail()" class="text-gray-400 hover:text-white">
396
+ <i class="fas fa-times"></i>
397
+ </button>
398
+ </div>
399
+ </div>
400
+
401
+ <div class="grid grid-cols-1 md:grid-cols-5 gap-4 mb-6">
402
+ <button class="bg-blue-600 py-2 rounded-lg font-medium sdl-tab active" data-tab="requirements">Requirements</button>
403
+ <button class="bg-gray-700 hover:bg-gray-600 py-2 rounded-lg font-medium sdl-tab" data-tab="code">Code</button>
404
+ <button class="bg-gray-700 hover:bg-gray-600 py-2 rounded-lg font-medium sdl-tab" data-tab="testing">Testing</button>
405
+ <button class="bg-gray-700 hover:bg-gray-600 py-2 rounded-lg font-medium sdl-tab" data-tab="release">Release</button>
406
+ <button class="bg-gray-700 hover:bg-gray-600 py-2 rounded-lg font-medium sdl-tab" data-tab="operations">Operations</button>
407
+ </div>
408
+
409
+ <!-- Requirements Tab Content -->
410
+ <div id="requirements-content" class="sdl-tab-content">
411
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
412
+ <div class="bg-gray-700 rounded-lg p-4">
413
+ <h3 class="font-semibold mb-3 flex items-center">
414
+ <i class="fas fa-file-alt mr-2 text-blue-400"></i>
415
+ Requirements Document
416
+ </h3>
417
+ <div class="bg-gray-800 p-4 rounded h-64 overflow-y-auto">
418
+ <h4 class="font-medium mb-2">Project Overview</h4>
419
+ <p class="text-sm mb-4">The Alipay National Subsidy Project aims to distribute government subsidies to eligible citizens through the Alipay platform. The system will integrate with multiple government databases to verify eligibility and process payments.</p>
420
+
421
+ <h4 class="font-medium mb-2">Technical Architecture</h4>
422
+ <div class="bg-gray-900 p-3 rounded mb-4">
423
+ <img src="https://via.placeholder.com/600x300?text=Technical+Architecture+Diagram" alt="Architecture Diagram" class="w-full rounded">
424
+ </div>
425
+
426
+ <h4 class="font-medium mb-2">Key Features</h4>
427
+ <ul class="text-sm list-disc pl-5 space-y-1">
428
+ <li>User eligibility verification via national ID</li>
429
+ <li>Direct subsidy transfer to verified Alipay accounts</li>
430
+ <li>Real-time transaction reporting to government systems</li>
431
+ <li>Multi-level approval workflow for large subsidies</li>
432
+ </ul>
433
+ </div>
434
+ </div>
435
+
436
+ <div class="bg-gray-700 rounded-lg p-4">
437
+ <h3 class="font-semibold mb-3 flex items-center">
438
+ <i class="fas fa-shield-alt mr-2 text-red-400"></i>
439
+ Security Analysis Results
440
+ </h3>
441
+ <div class="bg-gray-800 p-4 rounded h-64 overflow-y-auto">
442
+ <h4 class="font-medium mb-2">Threat Model</h4>
443
+ <div class="bg-gray-900 p-3 rounded mb-4">
444
+ <img src="https://via.placeholder.com/600x300?text=Threat+Model+Diagram" alt="Threat Model" class="w-full rounded">
445
+ </div>
446
+
447
+ <h4 class="font-medium mb-2">Identified Risks</h4>
448
+ <div class="space-y-3">
449
+ <div class="bg-gray-900 p-3 rounded">
450
+ <div class="flex justify-between items-start">
451
+ <h5 class="font-medium text-red-400">SQL Injection</h5>
452
+ <span class="bg-red-500 text-white text-xs px-2 py-1 rounded">Critical</span>
453
+ </div>
454
+ <p class="text-sm mt-1">Eligibility verification query concatenates user input without parameterization.</p>
455
+ <p class="text-xs text-gray-400 mt-2"><span class="font-medium">Recommendation:</span> Use prepared statements with parameterized queries.</p>
456
+ </div>
457
+
458
+ <div class="bg-gray-900 p-3 rounded">
459
+ <div class="flex justify-between items-start">
460
+ <h5 class="font-medium text-orange-400">Authorization Bypass</h5>
461
+ <span class="bg-orange-500 text-white text-xs px-2 py-1 rounded">High</span>
462
+ </div>
463
+ <p class="text-sm mt-1">Approval workflow lacks proper role validation, allowing lower-privileged users to approve large subsidies.</p>
464
+ <p class="text-xs text-gray-400 mt-2"><span class="font-medium">Recommendation:</span> Implement proper role-based access control with multi-factor approval for sensitive actions.</p>
465
+ </div>
466
+ </div>
467
+ </div>
468
+ </div>
469
+ </div>
470
+ </div>
471
+
472
+ <!-- Code Tab Content -->
473
+ <div id="code-content" class="sdl-tab-content hidden">
474
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
475
+ <div class="bg-gray-700 rounded-lg p-4">
476
+ <h3 class="font-semibold mb-3 flex items-center">
477
+ <i class="fas fa-code mr-2 text-green-400"></i>
478
+ Code Review
479
+ </h3>
480
+ <div class="bg-gray-800 p-4 rounded h-96 overflow-y-auto">
481
+ <div class="mb-4">
482
+ <h4 class="font-medium mb-2">EligibilityService.java</h4>
483
+ <pre class="bg-gray-900 p-3 rounded text-sm overflow-x-auto"><code>public class EligibilityService {
484
+ public boolean checkEligibility(String nationalId) {
485
+ // Vulnerable SQL query - concatenates user input directly
486
+ String query = "SELECT * FROM citizens WHERE id = '" + nationalId + "' AND status = 'eligible'";
487
+
488
+ try (Connection conn = DriverManager.getConnection(DB_URL);
489
+ Statement stmt = conn.createStatement();
490
+ ResultSet rs = stmt.executeQuery(query)) {
491
+
492
+ return rs.next();
493
+ } catch (SQLException e) {
494
+ logger.error("Error checking eligibility", e);
495
+ return false;
496
+ }
497
+ }
498
+
499
+ public void approveSubsidy(long userId, BigDecimal amount) {
500
+ // Missing proper authorization check
501
+ if (amount.compareTo(MAX_AUTO_APPROVAL) > 0) {
502
+ // Should verify user has APPROVER role
503
+ subsidyDao.approve(userId, amount);
504
+ } else {
505
+ subsidyDao.autoApprove(userId, amount);
506
+ }
507
+ }
508
+ }</code></pre>
509
+ </div>
510
+
511
+ <div>
512
+ <h4 class="font-medium mb-2">SubsidyController.java</h4>
513
+ <pre class="bg-gray-900 p-3 rounded text-sm overflow-x-auto"><code>@RestController
514
+ @RequestMapping("/api/subsidy")
515
+ public class SubsidyController {
516
+ @PostMapping("/approve")
517
+ public ResponseEntity approve(
518
+ @RequestParam long userId,
519
+ @RequestParam BigDecimal amount) {
520
+
521
+ // No CSRF protection
522
+ eligibilityService.approveSubsidy(userId, amount);
523
+ return ResponseEntity.ok().build();
524
+ }
525
+ }</code></pre>
526
+ </div>
527
+ </div>
528
+ </div>
529
+
530
+ <div class="bg-gray-700 rounded-lg p-4">
531
+ <h3 class="font-semibold mb-3 flex items-center">
532
+ <i class="fas fa-bug mr-2 text-red-400"></i>
533
+ Vulnerability Analysis
534
+ </h3>
535
+ <div class="bg-gray-800 p-4 rounded h-96 overflow-y-auto">
536
+ <div class="space-y-3">
537
+ <div class="bg-gray-900 p-3 rounded">
538
+ <div class="flex justify-between items-start">
539
+ <h5 class="font-medium text-red-400">SQL Injection</h5>
540
+ <span class="bg-red-500 text-white text-xs px-2 py-1 rounded">Critical</span>
541
+ </div>
542
+ <p class="text-sm mt-1">Found in EligibilityService.java (line 5)</p>
543
+ <p class="text-xs text-gray-400 mt-2"><span class="font-medium">Recommendation:</span> Replace with prepared statement: <code class="bg-gray-800 px-1 rounded">PreparedStatement ps = conn.prepareStatement("SELECT * FROM citizens WHERE id = ? AND status = 'eligible'");</code></p>
544
+ </div>
545
+
546
+ <div class="bg-gray-900 p-3 rounded">
547
+ <div class="flex justify-between items-start">
548
+ <h5 class="font-medium text-orange-400">Authorization Bypass</h5>
549
+ <span class="bg-orange-500 text-white text-xs px-2 py-1 rounded">High</span>
550
+ </div>
551
+ <p class="text-sm mt-1">Found in EligibilityService.java (line 16)</p>
552
+ <p class="text-xs text-gray-400 mt-2"><span class="font-medium">Recommendation:</span> Add role check: <code class="bg-gray-800 px-1 rounded">if (!userService.hasRole(currentUser, "APPROVER")) throw new AccessDeniedException();</code></p>
553
+ </div>
554
+
555
+ <div class="bg-gray-900 p-3 rounded">
556
+ <div class="flex justify-between items-start">
557
+ <h5 class="font-medium text-yellow-400">Missing CSRF Protection</h5>
558
+ <span class="bg-yellow-500 text-white text-xs px-2 py-1 rounded">Medium</span>
559
+ </div>
560
+ <p class="text-sm mt-1">Found in SubsidyController.java (line 8)</p>
561
+ <p class="text-xs text-gray-400 mt-2"><span class="font-medium">Recommendation:</span> Add Spring Security's CSRF protection or require CSRF token in request.</p>
562
+ </div>
563
+ </div>
564
+ </div>
565
+ </div>
566
+ </div>
567
+ </div>
568
+
569
+ <!-- Testing Tab Content -->
570
+ <div id="testing-content" class="sdl-tab-content hidden">
571
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
572
+ <div class="bg-gray-700 rounded-lg p-4">
573
+ <h3 class="font-semibold mb-3 flex items-center">
574
+ <i class="fas fa-vial mr-2 text-yellow-400"></i>
575
+ Security Test Cases
576
+ </h3>
577
+ <div class="bg-gray-800 p-4 rounded h-96 overflow-y-auto">
578
+ <div class="mb-4">
579
+ <h4 class="font-medium mb-2">SQL Injection Test</h4>
580
+ <div class="bg-gray-900 p-3 rounded">
581
+ <p class="text-sm mb-2"><span class="font-medium">Endpoint:</span> POST /api/eligibility/check</p>
582
+ <p class="text-sm mb-2"><span class="font-medium">Payload:</span> <code class="bg-gray-800 px-1 rounded">{"nationalId": "123' OR '1'='1'--"}</code></p>
583
+ <p class="text-sm"><span class="font-medium">Result:</span> <span class="text-red-400">Vulnerable</span> - Returned eligibility for invalid ID</p>
584
+ </div>
585
+ </div>
586
+
587
+ <div class="mb-4">
588
+ <h4 class="font-medium mb-2">Authorization Bypass Test</h4>
589
+ <div class="bg-gray-900 p-3 rounded">
590
+ <p class="text-sm mb-2"><span class="font-medium">Endpoint:</span> POST /api/subsidy/approve?userId=456&amount=10000</p>
591
+ <p class="text-sm mb-2"><span class="font-medium">Headers:</span> Regular user token without approver role</p>
592
+ <p class="text-sm"><span class="font-medium">Result:</span> <span class="text-red-400">Vulnerable</span> - Allowed approval without proper role</p>
593
+ </div>
594
+ </div>
595
+
596
+ <div>
597
+ <h4 class="font-medium mb-2">CSRF Test</h4>
598
+ <div class="bg-gray-900 p-3 rounded">
599
+ <p class="text-sm mb-2"><span class="font-medium">Endpoint:</span> POST /api/subsidy/approve</p>
600
+ <p class="text-sm mb-2"><span class="font-medium">Test:</span> Replayed request without CSRF token</p>
601
+ <p class="text-sm"><span class="font-medium">Result:</span> <span class="text-red-400">Vulnerable</span> - Request processed without token validation</p>
602
+ </div>
603
+ </div>
604
+ </div>
605
+ </div>
606
+
607
+ <div class="bg-gray-700 rounded-lg p-4">
608
+ <h3 class="font-semibold mb-3 flex items-center">
609
+ <i class="fas fa-chart-bar mr-2 text-purple-400"></i>
610
+ Test Results Analysis
611
+ </h3>
612
+ <div class="bg-gray-800 p-4 rounded h-96 overflow-y-auto">
613
+ <div class="space-y-3">
614
+ <div class="bg-gray-900 p-3 rounded">
615
+ <div class="flex justify-between items-start">
616
+ <h5 class="font-medium text-red-400">SQL Injection</h5>
617
+ <span class="bg-red-500 text-white text-xs px-2 py-1 rounded">Critical</span>
618
+ </div>
619
+ <p class="text-sm mt-1">Confirmed via automated testing and manual verification.</p>
620
+ <p class="text-xs text-gray-400 mt-2"><span class="font-medium">Impact:</span> Allows attackers to bypass eligibility checks and potentially extract all citizen data.</p>
621
+ </div>
622
+
623
+ <div class="bg-gray-900 p-3 rounded">
624
+ <div class="flex justify-between items-start">
625
+ <h5 class="font-medium text-orange-400">Authorization Bypass</h5>
626
+ <span class="bg-orange-500 text-white text-xs px-2 py-1 rounded">High</span>
627
+ </div>
628
+ <p class="text-sm mt-1">Verified through role manipulation tests.</p>
629
+ <p class="text-xs text-gray-400 mt-2"><span class="font-medium">Impact:</span> Could allow fraudulent subsidy approvals leading to financial losses.</p>
630
+ </div>
631
+
632
+ <div class="bg-gray-900 p-3 rounded">
633
+ <div class="flex justify-between items-start">
634
+ <h5 class="font-medium text-yellow-400">CSRF Vulnerability</h5>
635
+ <span class="bg-yellow-500 text-white text-xs px-2 py-1 rounded">Medium</span>
636
+ </div>
637
+ <p class="text-sm mt-1">Confirmed via automated CSRF test suite.</p>
638
+ <p class="text-xs text-gray-400 mt-2"><span class="font-medium">Impact:</span> Could lead to unauthorized subsidy approvals if user visits malicious site while authenticated.</p>
639
+ </div>
640
+ </div>
641
+ </div>
642
+ </div>
643
+ </div>
644
+ </div>
645
+
646
+ <!-- Release Tab Content -->
647
+ <div id="release-content" class="sdl-tab-content hidden">
648
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
649
+ <div class="bg-gray-700 rounded-lg p-4">
650
+ <h3 class="font-semibold mb-3 flex items-center">
651
+ <i class="fas fa-upload mr-2 text-red-400"></i>
652
+ Release Checklist
653
+ </h3>
654
+ <div class="bg-gray-800 p-4 rounded h-96 overflow-y-auto">
655
+ <div class="space-y-4">
656
+ <div class="flex items-start">
657
+ <div class="mr-3 mt-1">
658
+ <input type="checkbox" class="rounded text-blue-500" checked>
659
+ </div>
660
+ <div>
661
+ <p class="font-medium">Code Review Completed</p>
662
+ <p class="text-sm text-gray-400">All code has been reviewed by at least one other developer</p>
663
+ </div>
664
+ </div>
665
+
666
+ <div class="flex items-start">
667
+ <div class="mr-3 mt-1">
668
+ <input type="checkbox" class="rounded text-blue-500">
669
+ </div>
670
+ <div>
671
+ <p class="font-medium">SQL Injection Fix Verified</p>
672
+ <p class="text-sm text-gray-400">Parameterized queries implemented for all database access</p>
673
+ </div>
674
+ </div>
675
+
676
+ <div class="flex items-start">
677
+ <div class="mr-3 mt-1">
678
+ <input type="checkbox" class="rounded text-blue-500">
679
+ </div>
680
+ <div>
681
+ <p class="font-medium">Authorization Controls Implemented</p>
682
+ <p class="text-sm text-gray-400">Role checks added for subsidy approval workflow</p>
683
+ </div>
684
+ </div>
685
+
686
+ <div class="flex items-start">
687
+ <div class="mr-3 mt-1">
688
+ <input type="checkbox" class="rounded text-blue-500" checked>
689
+ </div>
690
+ <div>
691
+ <p class="font-medium">Security Tests Passed</p>
692
+ <p class="text-sm text-gray-400">All automated security tests show no critical vulnerabilities</p>
693
+ </div>
694
+ </div>
695
+
696
+ <div class="flex items-start">
697
+ <div class="mr-3 mt-1">
698
+ <input type="checkbox" class="rounded text-blue-500">
699
+ </div>
700
+ <div>
701
+ <p class="font-medium">CSRF Protection Added</p>
702
+ <p class="text-sm text-gray-400">CSRF tokens required for all state-changing requests</p>
703
+ </div>
704
+ </div>
705
+ </div>
706
+ </div>
707
+ </div>
708
+
709
+ <div class="bg-gray-700 rounded-lg p-4">
710
+ <h3 class="font-semibold mb-3 flex items-center">
711
+ <i class="fas fa-exclamation-circle mr-2 text-orange-400"></i>
712
+ Outstanding Risks
713
+ </h3>
714
+ <div class="bg-gray-800 p-4 rounded h-96 overflow-y-auto">
715
+ <div class="space-y-3">
716
+ <div class="bg-gray-900 p-3 rounded">
717
+ <div class="flex justify-between items-start">
718
+ <h5 class="font-medium text-orange-400">Authorization Bypass</h5>
719
+ <span class="bg-orange-500 text-white text-xs px-2 py-1 rounded">High</span>
720
+ </div>
721
+ <p class="text-sm mt-1">Role checks implemented but not fully tested in all scenarios.</p>
722
+ <p class="text-xs text-gray-400 mt-2"><span class="font-medium">Action Required:</span> Complete end-to-end testing of approval workflow with different user roles.</p>
723
+ </div>
724
+
725
+ <div class="bg-gray-900 p-3 rounded">
726
+ <div class="flex justify-between items-start">
727
+ <h5 class="font-medium text-yellow-400">CSRF Protection</h5>
728
+ <span class="bg-yellow-500 text-white text-xs px-2 py-1 rounded">Medium</span>
729
+ </div>
730
+ <p class="text-sm mt-1">Tokens implemented but not yet verified in production-like environment.</p>
731
+ <p class="text-xs text-gray-400 mt-2"><span class="font-medium">Action Required:</span> Verify CSRF token behavior in staging environment before production release.</p>
732
+ </div>
733
+ </div>
734
+
735
+ <div class="mt-6">
736
+ <h4 class="font-medium mb-2">Release Recommendation</h4>
737
+ <div class="bg-gray-900 p-3 rounded">
738
+ <div class="flex items-start">
739
+ <div class="mr-3 text-yellow-400">
740
+ <i class="fas fa-exclamation-triangle"></i>
741
+ </div>
742
+ <div>
743
+ <p class="text-sm">Proceed with caution - 2 high/medium risks remain unverified. Recommend additional testing before production release.</p>
744
+ </div>
745
+ </div>
746
+ </div>
747
+ </div>
748
+ </div>
749
+ </div>
750
+ </div>
751
+ </div>
752
+
753
+ <!-- Operations Tab Content -->
754
+ <div id="operations-content" class="sdl-tab-content hidden">
755
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
756
+ <div class="bg-gray-700 rounded-lg p-4">
757
+ <h3 class="font-semibold mb-3 flex items-center">
758
+ <i class="fas fa-server mr-2 text-purple-400"></i>
759
+ Production Monitoring
760
+ </h3>
761
+ <div class="bg-gray-800 p-4 rounded h-96 overflow-y-auto">
762
+ <div class="mb-6">
763
+ <h4 class="font-medium mb-2">Security Events</h4>
764
+ <div class="bg-gray-900 p-3 rounded">
765
+ <div class="flex justify-between items-center mb-2">
766
+ <p class="text-sm">SQL Injection Attempts</p>
767
+ <span class="bg-red-500 text-white text-xs px-2 py-1 rounded">12 detected</span>
768
+ </div>
769
+ <div class="flex justify-between items-center mb-2">
770
+ <p class="text-sm">Unauthorized Access Attempts</p>
771
+ <span class="bg-orange-500 text-white text-xs px-2 py-1 rounded">8 detected</span>
772
+ </div>
773
+ <div class="flex justify-between items-center">
774
+ <p class="text-sm">CSRF Attempts Blocked</p>
775
+ <span class="bg-green-500 text-white text-xs px-2 py-1 rounded">24 blocked</span>
776
+ </div>
777
+ </div>
778
+ </div>
779
+
780
+ <div>
781
+ <h4 class="font-medium mb-2">System Health</h4>
782
+ <div class="grid grid-cols-2 gap-3">
783
+ <div class="bg-gray-900 p-3 rounded">
784
+ <p class="text-sm mb-1">Uptime</p>
785
+ <p class="font-medium">99.98%</p>
786
+ </div>
787
+ <div class="bg-gray-900 p-3 rounded">
788
+ <p class="text-sm mb-1">Response Time</p>
789
+ <p class="font-medium">142ms</p>
790
+ </div>
791
+ <div class="bg-gray-900 p-3 rounded">
792
+ <p class="text-sm mb-1">Error Rate</p>
793
+ <p class="font-medium">0.12%</p>
794
+ </div>
795
+ <div class="bg-gray-900 p-3 rounded">
796
+ <p class="text-sm mb-1">Security Patches</p>
797
+ <p class="font-medium">3 pending</p>
798
+ </div>
799
+ </div>
800
+ </div>
801
+ </div>
802
+ </div>
803
+
804
+ <div class="bg-gray-700 rounded-lg p-4">
805
+ <h3 class="font-semibold mb-3 flex items-center">
806
+ <i class="fas fa-tasks mr-2 text-blue-400"></i>
807
+ Vulnerability Management
808
+ </h3>
809
+ <div class="bg-gray-800 p-4 rounded h-96 overflow-y-auto">
810
+ <div class="space-y-3">
811
+ <div class="bg-gray-900 p-3 rounded">
812
+ <div class="flex justify-between items-start">
813
+ <h5 class="font-medium">Log4j Vulnerability</h5>
814
+ <span class="bg-green-500 text-white text-xs px-2 py-1 rounded">Patched</span>
815
+ </div>
816
+ <p class="text-sm mt-1">Updated to log4j 2.17.1 in all services</p>
817
+ <p class="text-xs text-gray-400 mt-2">Patched on 2023-01-15</p>
818
+ </div>
819
+
820
+ <div class="bg-gray-900 p-3 rounded">
821
+ <div class="flex justify-between items-start">
822
+ <h5 class="font-medium">Spring Framework RCE</h5>
823
+ <span class="bg-green-500 text-white text-xs px-2 py-1 rounded">Patched</span>
824
+ </div>
825
+ <p class="text-sm mt-1">Updated to Spring Framework 5.3.18</p>
826
+ <p class="text-xs text-gray-400 mt-2">Patched on 2023-04-02</p>
827
+ </div>
828
+
829
+ <div class="bg-gray-900 p-3 rounded">
830
+ <div class="flex justify-between items-start">
831
+ <h5 class="font-medium">OpenSSL Vulnerability</h5>
832
+ <span class="bg-yellow-500 text-white text-xs px-2 py-1 rounded">Pending</span>
833
+ </div>
834
+ <p class="text-sm mt-1">Upgrade to OpenSSL 3.0.7 required</p>
835
+ <p class="text-xs text-gray-400 mt-2">Scheduled for 2023-05-20 maintenance window</p>
836
+ </div>
837
+
838
+ <div class="bg-gray-900 p-3 rounded">
839
+ <div class="flex justify-between items-start">
840
+ <h5 class="font-medium">Nginx Security Updates</h5>
841
+ <span class="bg-yellow-500 text-white text-xs px-2 py-1 rounded">Pending</span>
842
+ </div>
843
+ <p class="text-sm mt-1">Multiple security fixes in latest stable release</p>
844
+ <p class="text-xs text-gray-400 mt-2">Scheduled for 2023-05-20 maintenance window</p>
845
+ </div>
846
+ </div>
847
+
848
+ <div class="mt-6">
849
+ <h4 class="font-medium mb-2">Security Recommendations</h4>
850
+ <div class="bg-gray-900 p-3 rounded">
851
+ <p class="text-sm">1. Schedule immediate maintenance window to address OpenSSL and Nginx vulnerabilities.</p>
852
+ <p class="text-sm mt-2">2. Enable additional WAF rules to detect and block suspicious subsidy approval patterns.</p>
853
+ <p class="text-sm mt-2">3. Implement more granular logging for authorization decisions to detect potential bypass attempts.</p>
854
+ </div>
855
+ </div>
856
+ </div>
857
+ </div>
858
+ </div>
859
+ </div>
860
+ </div>
861
+ </div>
862
+ </div>
863
+
864
+ <script>
865
+ // Simulate real-time updates
866
+ function simulateUpdates() {
867
+ // Update last updated time
868
+ const now = new Date();
869
+ document.getElementById('last-updated').textContent = now.toLocaleTimeString();
870
+
871
+ // Add new analysis insights
872
+ const insights = [
873
+ "Completed security review: Payment Processing Microservice",
874
+ "Detected potential XSS vulnerability in User Feedback Component",
875
+ "Started analysis: New Authentication Service Integration",
876
+ "Verified fixes for 3 critical vulnerabilities in Inventory Service"
877
+ ];
878
+
879
+ const randomInsight = insights[Math.floor(Math.random() * insights.length)];
880
+ const insightDiv = document.createElement('div');
881
+ insightDiv.className = 'fade-in flex items-start';
882
+ insightDiv.innerHTML = `
883
+ <div class="bg-blue-600 rounded-full w-6 h-6 flex items-center justify-center mr-2 mt-1">
884
+ <i class="fas fa-check text-xs"></i>
885
+ </div>
886
+ <div>
887
+ <p class="text-sm">${randomInsight}</p>
888
+ <p class="text-xs text-gray-400">${now.toLocaleTimeString()}</p>
889
+ </div>
890
+ `;
891
+
892
+ const insightsContainer = document.getElementById('analysis-insights');
893
+ insightsContainer.insertBefore(insightDiv, insightsContainer.firstChild);
894
+
895
+ // Keep only 5 insights
896
+ if (insightsContainer.children.length > 5) {
897
+ insightsContainer.removeChild(insightsContainer.lastChild);
898
+ }
899
+
900
+ // Randomly update progress rings
901
+ const rings = document.querySelectorAll('.progress-ring-circle');
902
+ rings.forEach(ring => {
903
+ const currentOffset = parseFloat(ring.getAttribute('stroke-dashoffset'));
904
+ const newOffset = Math.max(0, currentOffset + (Math.random() * 10 - 5));
905
+ ring.setAttribute('stroke-dashoffset', newOffset);
906
+
907
+ // Update percentage text
908
+ const percent = Math.round((78.5 - newOffset) / 78.5 * 100);
909
+ ring.parentElement.querySelector('text:nth-of-type(2)').textContent = `${percent}%`;
910
+ });
911
+
912
+ // Randomly update risk counters
913
+ const counters = document.querySelectorAll('.risk-counter');
914
+ counters.forEach(counter => {
915
+ const currentCount = parseInt(counter.nextElementSibling.textContent);
916
+ const change = Math.floor(Math.random() * 3) - 1; // -1, 0, or 1
917
+ const newCount = Math.max(0, currentCount + change);
918
+ counter.nextElementSibling.textContent = newCount;
919
+
920
+ // Pulse if count increased
921
+ if (change > 0) {
922
+ counter.classList.add('pulse');
923
+ setTimeout(() => counter.classList.remove('pulse'), 2000);
924
+ }
925
+ });
926
+ }
927
+
928
+ // Show risk detail modal
929
+ function showRiskDetail(project) {
930
+ const modal = document.getElementById('risk-detail-modal');
931
+ modal.classList.remove('hidden');
932
+
933
+ // Set project details based on selection
934
+ if (project === 'alipay') {
935
+ document.getElementById('risk-project-name').textContent = 'Alipay National Subsidy Project';
936
+ document.getElementById('risk-project-id').textContent = 'PROJ-2023-048';
937
+ document.getElementById('risk-severity').textContent = 'Critical';
938
+ document.getElementById('risk-severity').className = 'bg-red-500 text-white px-3 py-1 rounded-full text-sm';
939
+ } else if (project === 'cloud') {
940
+ document.getElementById('risk-project-name').textContent = 'Cloud Storage Optimization';
941
+ document.getElementById('risk-project-id').textContent = 'PROJ-2023-056';
942
+ document.getElementById('risk-severity').textContent = 'High';
943
+ document.getElementById('risk-severity').className = 'bg-orange-500 text-white px-3 py-1 rounded-full text-sm';
944
+ } else if (project === 'payment') {
945
+ document.getElementById('risk-project-name').textContent = 'Payment Gateway API';
946
+ document.getElementById('risk-project-id').textContent = 'PROJ-2023-062';
947
+ document.getElementById('risk-severity').textContent = 'Medium';
948
+ document.getElementById('risk-severity').className = 'bg-yellow-500 text-white px-3 py-1 rounded-full text-sm';
949
+ } else if (project === 'user') {
950
+ document.getElementById('risk-project-name').textContent = 'User Profile Service';
951
+ document.getElementById('risk-project-id').textContent = 'PROJ-2023-071';
952
+ document.getElementById('risk-severity').textContent = 'Low';
953
+ document.getElementById('risk-severity').className = 'bg-blue-500 text-white px-3 py-1 rounded-full text-sm';
954
+ }
955
+ }
956
+
957
+ // Close risk detail modal
958
+ function closeRiskDetail() {
959
+ document.getElementById('risk-detail-modal').classList.add('hidden');
960
+ }
961
+
962
+ // Show SDL process detail
963
+ function showProcessDetail(process) {
964
+ // In a real app, this would load specific content for the selected process
965
+ console.log(`Showing detail for ${process} process`);
966
+ }
967
+
968
+ // Tab switching in risk detail modal
969
+ document.querySelectorAll('.sdl-tab').forEach(tab => {
970
+ tab.addEventListener('click', () => {
971
+ // Remove active class from all tabs
972
+ document.querySelectorAll('.sdl-tab').forEach(t => {
973
+ t.classList.remove('active');
974
+ t.classList.add('bg-gray-700', 'hover:bg-gray-600');
975
+ t.classList.remove('bg-blue-600');
976
+ });
977
+
978
+ // Add active class to clicked tab
979
+ tab.classList.add('active', 'bg-blue-600');
980
+ tab.classList.remove('bg-gray-700', 'hover:bg-gray-600');
981
+
982
+ // Hide all content
983
+ document.querySelectorAll('.sdl-tab-content').forEach(content => {
984
+ content.classList.add('hidden');
985
+ });
986
+
987
+ // Show selected content
988
+ const tabName = tab.getAttribute('data-tab');
989
+ document.getElementById(`${tabName}-content`).classList.remove('hidden');
990
+ });
991
+ });
992
+
993
+ // Highlight code when vulnerability is clicked
994
+ document.querySelectorAll('.code-highlightable').forEach(item => {
995
+ item.addEventListener('click', () => {
996
+ const codeId = item.getAttribute('data-code-id');
997
+ const lineNumber = item.getAttribute('data-line');
998
+
999
+ // Remove all highlights
1000
+ document.querySelectorAll('.code-highlight').forEach(hl => {
1001
+ hl.classList.remove('code-highlight');
1002
+ });
1003
+
1004
+ // Add highlight to target code
1005
+ const codeElement = document.querySelector(`#${codeId} .line-${lineNumber}`);
1006
+ if (codeElement) {
1007
+ codeElement.classList.add('code-highlight');
1008
+ codeElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
1009
+ }
1010
+ });
1011
+ });
1012
+
1013
+ // Initialize
1014
+ document.addEventListener('DOMContentLoaded', () => {
1015
+ // Simulate real-time updates every 5 seconds
1016
+ setInterval(simulateUpdates, 5000);
1017
+
1018
+ // Initial update
1019
+ simulateUpdates();
1020
+ });
1021
+ </script>
1022
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=capta1n/sdlmax3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1023
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ 目标：创建一个拟人化的AI SDL产品，核心是体现出一个AI数字分身角色在企业SDL链路的每个环节都在持续进行安全分析，存在风险时会主动告警出某个项目在SDL链路中存在风险，无风险时会持续展示每个环节的安全分析报告。 系统分为三大主模块 分别是AI SDL数字分身工作大盘、风险项目告警、风险项目详情 AI SDL数字分身工作大盘 大盘中以游戏的形式呈现出一个AISDL数字分身持续在SDL的5个链路上持续进行安全分析并不断产出风险项目和风险报告5个链路分别是需求设计、代码变更、安全测试、发布、线上运行。 需求设计环节：AI SDL数字分身不断在对企业中的需求进行安全分析，发现存在风险的项目需求。 代码变更环节：AI SDL数字分身不断在对企业中的代码进行安全评审，发现存在风险的项目代码。 安全测试环节：AI SDL数字分身不断在对企业中的接口进行自动化安全测试，发现存在风险的项目接口地址。 发布环节：AI SDL数字分身对发布环节的全部项目进行安全检查，发现存在风险的项目发布变更行为。 线上运行环节：AI SDL数字分身对全部线上项目进行安全健康，发现存在漏洞或者入侵风险的项目。 风险项目告警 AI SDL数字分身在每个环节发现的风险，最终将信息聚合成"某个项目在某个环节存在某风险" 的形式产出告警（项目是唯一维度，如果一个项目在多个环节存在风险需聚合在一起），例 支付宝国补项目在代码和需求环节存在越权和sql注入风险。 项目详情 告警出来的风险项目，点击进入详情页，将项目分为需求-代码-安全测试-发布-线上5个模块，每个模块都包含内容--安全分析结果，需要在内容上动态展示分析过程和同步展示风险对应的内容，因为安全分析是对内容进行分析最终产出安全分析结果。 需求模块： ● 内容：展示项目对应的需求文档内容，包括技术架构图 ● 分析结果：产出威胁建模图、安全风险：包括业务场景-风险点-风险类型-整改建议 代码模块： ● 内容：展示项目对应的全部代码内容 ● 分析结果：安全风险：由风险接口、代码漏洞名称、漏洞描述、存在漏洞的代码内容（点击可定位到代码内容）、修复建议 安全测试： ● 内容：展示对应的风险接口以及每个风险接口对应的攻击payload和攻击结果 ● 分析结果：存在风险的接口、攻击payload请求、风险描述 发布： ● 内容：展示在发布环节进行安全检查的内容，检查之前环节积累下来的风险是否修复 ● 分析结果：未修复的风险，在之前的每个环节发现但未修复的风险，例代码环节的越权风险未修复 线上： ● 内容：展示发现的漏洞或者入侵事件风险 ● 分析结果：展示漏洞的修复情况 SDL Security Guardian模块需要有动效，链路分析工作可视：5个环节以环形布局排列，每个环节包含： ● 进度环： 实时显示分析进度（如"代码变更分析中：78%"）和持续分析中的动效 ● 风险计数器： 闪烁显示当前未处理风险数量 ● 数据流动态：环形链路间用光效箭头显示数据流动向（如需求→代码→测试→发布→线上） ● 实时数据看板： ● 右侧展示全局统计数据（如"今日已分析代码：120,000行"） ● 底部悬浮操作栏提供"一键生成安全报告"按钮 1、将Real-time Analysis Stats模块的内容调整到页面最上方 2、增加持续分析中的动效 Analysis Insight中的内容替换成数字人的分析动态，例● 持续分析动态：展示最新的分析动态，例完成分析 支付宝国补项目、完成分析云存储优化项目代码分析