Skip to content

Commit 07d8f48

Browse files
thinhhoangphamthinhhoangpham
committed
bug fixed and code refactoring
1 parent ee3aaa9 commit 07d8f48

7 files changed

Lines changed: 539 additions & 657 deletions

File tree

‎attack_timearcs.css‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
body {
2+
margin: 0;
3+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
4+
color: #212529;
5+
background: #f8f9fa;
6+
}
7+
header {
8+
padding: 12px 16px;
9+
background: #ffffff;
10+
border-bottom: 1px solid #e9ecef;
11+
position: sticky;
12+
top: 0;
13+
z-index: 100;
14+
}
15+
.header-controls {
16+
display: flex;
17+
gap: 12px;
18+
align-items: center;
19+
flex-wrap: wrap;
20+
}
21+
.secondary-controls {
22+
display: flex;
23+
gap: 12px;
24+
align-items: center;
25+
flex-wrap: wrap;
26+
padding: 12px 16px 8px 16px;
27+
background: #ffffff;
28+
border-bottom: 1px solid #e9ecef;
29+
position: sticky;
30+
top: 48px;
31+
z-index: 99;
32+
}
33+
main { padding: 8px 16px 12px 16px; }
34+
.top-bar {
35+
position: sticky;
36+
top: 110px;
37+
z-index: 98;
38+
background: #ffffff;
39+
border-bottom: 1px solid #e9ecef;
40+
padding: 8px 0;
41+
}
42+
#axis-top { display: block; height: 36px; }
43+
#chart-container {
44+
background: #fff;
45+
border: 1px solid #e9ecef;
46+
border-radius: 6px;
47+
padding: 8px;
48+
overflow: auto;
49+
min-height: 400px;
50+
margin-top: 8px;
51+
position: relative;
52+
}
53+
.row-line { stroke: #e9ecef; stroke-width: 1; }
54+
.ip-label { font-size: 8px; fill: #343a40; }
55+
.time-axis text { font-size: 10px; fill: #000; }
56+
.time-axis path, .time-axis line { stroke: #000; }
57+
.arc { fill: none; stroke-opacity: 0.8; pointer-events: stroke; }
58+
.arc:hover { stroke-opacity: 1; }
59+
.legend { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 0; }
60+
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; }
61+
.swatch { width: 12px; height: 12px; border-radius: 2px; border: 1px solid #dee2e6; }
62+
.controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
63+
.hint { color: #6c757d; font-size: 12px; }
64+
#status { color: #6c757d; font-size: 12px; margin-left: auto; white-space: nowrap; }
65+
.tooltip { position: fixed; background: rgba(0,0,0,0.85); color: #fff; padding: 8px 10px; border-radius: 4px; font-size: 12px; pointer-events: none; display: none; z-index: 99999; }

‎attack_timearcs.html‎

Lines changed: 1 addition & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -5,73 +5,7 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Network TimeArcs</title>
77
<script src="https://d3js.org/d3.v7.min.js"></script>
8-
<style>
9-
body {
10-
margin: 0;
11-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
12-
color: #212529;
13-
background: #f8f9fa;
14-
}
15-
header {
16-
padding: 12px 16px;
17-
background: #ffffff;
18-
border-bottom: 1px solid #e9ecef;
19-
position: sticky;
20-
top: 0;
21-
z-index: 100;
22-
}
23-
.header-controls {
24-
display: flex;
25-
gap: 12px;
26-
align-items: center;
27-
flex-wrap: wrap;
28-
}
29-
.secondary-controls {
30-
display: flex;
31-
gap: 12px;
32-
align-items: center;
33-
flex-wrap: wrap;
34-
padding: 12px 16px 8px 16px;
35-
background: #ffffff;
36-
border-bottom: 1px solid #e9ecef;
37-
position: sticky;
38-
top: 48px;
39-
z-index: 99;
40-
}
41-
main { padding: 8px 16px 12px 16px; }
42-
.top-bar {
43-
position: sticky;
44-
top: 110px;
45-
z-index: 98;
46-
background: #ffffff;
47-
border-bottom: 1px solid #e9ecef;
48-
padding: 8px 0;
49-
}
50-
#axis-top { display: block; height: 36px; }
51-
#chart-container {
52-
background: #fff;
53-
border: 1px solid #e9ecef;
54-
border-radius: 6px;
55-
padding: 8px;
56-
overflow: auto;
57-
min-height: 400px;
58-
margin-top: 8px;
59-
position: relative;
60-
}
61-
.row-line { stroke: #e9ecef; stroke-width: 1; }
62-
.ip-label { font-size: 8px; fill: #343a40; }
63-
.time-axis text { font-size: 10px; fill: #000; }
64-
.time-axis path, .time-axis line { stroke: #000; }
65-
.arc { fill: none; stroke-opacity: 0.8; pointer-events: stroke; }
66-
.arc:hover { stroke-opacity: 1; }
67-
.legend { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 0; }
68-
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; }
69-
.swatch { width: 12px; height: 12px; border-radius: 2px; border: 1px solid #dee2e6; }
70-
.controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
71-
.hint { color: #6c757d; font-size: 12px; }
72-
#status { color: #6c757d; font-size: 12px; margin-left: auto; white-space: nowrap; }
73-
.tooltip { position: fixed; background: rgba(0,0,0,0.85); color: #fff; padding: 8px 10px; border-radius: 4px; font-size: 12px; pointer-events: none; display: none; z-index: 99999; }
74-
</style>
8+
<link rel="stylesheet" href="attack_timearcs.css">
759
<link rel="preconnect" href="https://d3js.org" />
7610
<link rel="dns-prefetch" href="https://d3js.org" />
7711
</head>

0 commit comments

Comments
 (0)