Hugging Face's logo

Spaces:
capta1n
/
bas7
Running

App Files Community
capta1n commited on
Commit
7aa4b4b
·
verified ·
1 Parent(s): 7b03b01

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +146 -25
  2. prompts.txt +2 -1
index.html CHANGED
@@ -119,6 +119,96 @@
119
  background-color: #d1d5db;
120
  border-radius: 10px;
121
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
122
  </style>
123
  </head>
124
  <body class="bg-gray-50">
@@ -421,40 +511,66 @@
421
  const detailsContainer = document.getElementById('attack-details');
422
  detailsContainer.innerHTML = `
423
  <div>
 
424
  <div class="flex items-center mb-6">
425
  <div class="w-12 h-12 rounded-full ${step.color} flex items-center justify-center mr-4">
426
  <i class="fas fa-${step.icon} text-xl"></i>
427
  </div>
428
  <div>
429
  <h3 class="text-xl font-semibold text-gray-800">${step.title}</h3>
430
- <p class="text-sm text-gray-500">攻击阶段 ${step.id}</p>
431
  </div>
432
  </div>
433
 
434
- <div class="mb-6">
435
- <h4 class="font-medium text-gray-700 mb-3">攻击行为</h4>
436
- <div class="bg-gray-50 p-4 rounded-lg text-sm text-gray-700">${step.behavior}</div>
 
 
 
 
 
 
 
 
 
 
 
 
437
  </div>
438
 
439
- <div class="mb-6">
440
- <h4 class="font-medium text-gray-700 mb-3">触发防御</h4>
441
- <div class="flex items-center">
442
- <span class="defense-badge bg-gray-100 text-gray-800 rounded-full mr-2">${step.defenses}</span>
443
- <span class="text-xs text-gray-500">检测时间 ${step.id < 10 ? '0' + step.id : step.id}:00</span>
 
 
 
 
 
 
444
  </div>
445
  </div>
446
 
447
- <div class="mb-6">
448
- <h4 class="font-medium text-gray-700 mb-3">安全告警</h4>
 
 
 
 
 
 
449
  <div class="space-y-3">
450
  ${step.alerts.map(alert => `
451
- <div class="p-3 rounded-lg ${alert.severity === 'critical' ? 'bg-red-50 border border-red-100' : alert.severity === 'high' ? 'bg-yellow-50 border border-yellow-100' : 'bg-orange-50 border border-orange-100'}">
452
  <div class="flex items-start">
453
- <div class="flex-shrink-0 mt-0.5">
454
- <i class="fas fa-${alert.severity === 'critical' ? 'exclamation-triangle text-red-500' : alert.severity === 'high' ? 'exclamation-circle text-yellow-500' : 'exclamation text-orange-500'}"></i>
455
  </div>
456
- <div class="ml-3">
457
- <div class="text-sm font-medium text-gray-800">${alert.message}</div>
 
458
  </div>
459
  </div>
460
  </div>
@@ -462,17 +578,22 @@
462
  </div>
463
  </div>
464
 
 
465
  <div>
466
- <h4 class="font-medium text-gray-700 mb-3">取证证据</h4>
467
- <div class="space-y-2">
468
- ${step.forensic.map(item => `
469
- <div class="flex items-start text-sm">
470
- <div class="flex-shrink-0 mt-1.5 mr-2">
471
- <div class="w-1.5 h-1.5 rounded-full bg-gray-400"></div>
 
 
 
 
 
472
  </div>
473
- <div class="text-gray-700">${item}</div>
474
- </div>
475
- `).join('')}
476
  </div>
477
  </div>
478
  </div>
 
119
  background-color: #d1d5db;
120
  border-radius: 10px;
121
  }
122
+ .forensic-item {
123
+ position: relative;
124
+ padding-left: 1.5rem;
125
+ margin-bottom: 0.75rem;
126
+ }
127
+ .forensic-item:before {
128
+ content: "";
129
+ position: absolute;
130
+ left: 0.5rem;
131
+ top: 0.5rem;
132
+ width: 6px;
133
+ height: 6px;
134
+ border-radius: 50%;
135
+ background-color: #3b82f6;
136
+ }
137
+ .forensic-item:after {
138
+ content: "";
139
+ position: absolute;
140
+ left: 0.5rem;
141
+ top: 1.1rem;
142
+ bottom: -0.5rem;
143
+ width: 2px;
144
+ background-color: #e5e7eb;
145
+ }
146
+ .forensic-item:last-child:after {
147
+ display: none;
148
+ }
149
+ .alert-icon {
150
+ width: 2rem;
151
+ height: 2rem;
152
+ display: flex;
153
+ align-items: center;
154
+ justify-content: center;
155
+ border-radius: 50%;
156
+ flex-shrink: 0;
157
+ }
158
+ .alert-critical {
159
+ background-color: #fee2e2;
160
+ color: #dc2626;
161
+ }
162
+ .alert-high {
163
+ background-color: #fef3c7;
164
+ color: #d97706;
165
+ }
166
+ .alert-emergency {
167
+ background-color: #ffedd5;
168
+ color: #ea580c;
169
+ }
170
+ .timeline-marker {
171
+ width: 1rem;
172
+ height: 1rem;
173
+ border-radius: 50%;
174
+ display: flex;
175
+ align-items: center;
176
+ justify-content: center;
177
+ position: relative;
178
+ z-index: 1;
179
+ }
180
+ .timeline-marker:after {
181
+ content: "";
182
+ position: absolute;
183
+ left: 50%;
184
+ top: 50%;
185
+ transform: translate(-50%, -50%);
186
+ width: 0.5rem;
187
+ height: 0.5rem;
188
+ border-radius: 50%;
189
+ background-color: white;
190
+ }
191
+ .section-divider {
192
+ position: relative;
193
+ margin: 1.5rem 0;
194
+ }
195
+ .section-divider:before {
196
+ content: "";
197
+ position: absolute;
198
+ left: 0;
199
+ right: 0;
200
+ top: 50%;
201
+ height: 1px;
202
+ background-color: #e5e7eb;
203
+ }
204
+ .section-divider span {
205
+ position: relative;
206
+ padding: 0 0.5rem;
207
+ background-color: white;
208
+ z-index: 1;
209
+ font-size: 0.75rem;
210
+ color: #6b7280;
211
+ }
212
  </style>
213
  </head>
214
  <body class="bg-gray-50">
 
511
  const detailsContainer = document.getElementById('attack-details');
512
  detailsContainer.innerHTML = `
513
  <div>
514
+ <!-- Header with icon and title -->
515
  <div class="flex items-center mb-6">
516
  <div class="w-12 h-12 rounded-full ${step.color} flex items-center justify-center mr-4">
517
  <i class="fas fa-${step.icon} text-xl"></i>
518
  </div>
519
  <div>
520
  <h3 class="text-xl font-semibold text-gray-800">${step.title}</h3>
521
+ <p class="text-sm text-gray-500">攻击阶段 ${step.id} | ${step.id < 10 ? '0' + step.id : step.id}:00</p>
522
  </div>
523
  </div>
524
 
525
+ <!-- Attack Behavior Section -->
526
+ <div class="mb-8">
527
+ <div class="flex items-center mb-3">
528
+ <div class="w-6 h-6 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-2">
529
+ <i class="fas fa-bolt text-xs"></i>
530
+ </div>
531
+ <h4 class="font-medium text-gray-700">攻击行为</h4>
532
+ </div>
533
+ <div class="bg-gray-50 p-4 rounded-lg text-sm text-gray-700 border border-gray-200">
534
+ <div class="flex">
535
+ <div class="timeline-marker ${step.color} mr-3 flex-shrink-0">
536
+ </div>
537
+ <div>${step.behavior}</div>
538
+ </div>
539
+ </div>
540
  </div>
541
 
542
+ <!-- Defense Trigger Section -->
543
+ <div class="mb-8">
544
+ <div class="flex items-center mb-3">
545
+ <div class="w-6 h-6 rounded-full bg-green-100 text-green-600 flex items-center justify-center mr-2">
546
+ <i class="fas fa-shield-alt text-xs"></i>
547
+ </div>
548
+ <h4 class="font-medium text-gray-700">触发防御</h4>
549
+ </div>
550
+ <div class="flex items-center bg-gray-50 p-4 rounded-lg border border-gray-200">
551
+ <span class="defense-badge bg-white text-gray-800 rounded-full border border-gray-300 mr-3">${step.defenses}</span>
552
+ <span class="text-sm text-gray-600">检测到攻击行为并触发防御机制</span>
553
  </div>
554
  </div>
555
 
556
+ <!-- Security Alerts Section -->
557
+ <div class="mb-8">
558
+ <div class="flex items-center mb-3">
559
+ <div class="w-6 h-6 rounded-full bg-red-100 text-red-600 flex items-center justify-center mr-2">
560
+ <i class="fas fa-exclamation-triangle text-xs"></i>
561
+ </div>
562
+ <h4 class="font-medium text-gray-700">安全告警</h4>
563
+ </div>
564
  <div class="space-y-3">
565
  ${step.alerts.map(alert => `
566
+ <div class="p-4 rounded-lg border ${alert.severity === 'critical' ? 'border-red-200 bg-red-50' : alert.severity === 'high' ? 'border-yellow-200 bg-yellow-50' : 'border-orange-200 bg-orange-50'}">
567
  <div class="flex items-start">
568
+ <div class="alert-icon ${alert.severity === 'critical' ? 'alert-critical' : alert.severity === 'high' ? 'alert-high' : 'alert-emergency'} mr-3">
569
+ <i class="fas fa-${alert.severity === 'critical' ? 'exclamation-triangle' : alert.severity === 'high' ? 'exclamation-circle' : 'exclamation'} text-sm"></i>
570
  </div>
571
+ <div>
572
+ <div class="text-sm font-medium text-gray-800 mb-1">${alert.severity === 'critical' ? '严重告警' : alert.severity === 'high' ? '高危告警' : '紧急告警'}</div>
573
+ <div class="text-xs text-gray-600">${alert.message}</div>
574
  </div>
575
  </div>
576
  </div>
 
578
  </div>
579
  </div>
580
 
581
+ <!-- Forensic Evidence Section -->
582
  <div>
583
+ <div class="flex items-center mb-3">
584
+ <div class="w-6 h-6 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center mr-2">
585
+ <i class="fas fa-search text-xs"></i>
586
+ </div>
587
+ <h4 class="font-medium text-gray-700">取证证据</h4>
588
+ </div>
589
+ <div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
590
+ <div class="p-4">
591
+ ${step.forensic.map((item, idx) => `
592
+ <div class="forensic-item">
593
+ <div class="text-sm text-gray-700 pl-2">${item}</div>
594
  </div>
595
+ `).join('')}
596
+ </div>
 
597
  </div>
598
  </div>
599
  </div>
prompts.txt CHANGED
@@ -1 +1,2 @@
1
- 1、高级持续性威胁攻击链文本替换为 BAS AI Hacker演练报告 2、完整的攻击流程可视化，包含交互式防御检测点 文本替换为演练时间：2025-04-23 10:11 ~ 2025-04-23 11:10 3、将APT组织: TA505 文本替换成 发起攻击
 
 
1
+ 1、高级持续性威胁攻击链文本替换为 BAS AI Hacker演练报告 2、完整的攻击流程可视化，包含交互式防御检测点 文本替换为演练时间：2025-04-23 10:11 ~ 2025-04-23 11:10 3、将APT组织: TA505 文本替换成 发起攻击
2
+ 优化攻击阶段取证详情中的视觉样式，整体内容都更加美观一些