-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
150 lines (134 loc) · 10.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!--TODO
Implement:
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; connect-src 'self' https://doc-0s-3g-sheets.googleusercontent.com https://docs.google.com https://api.example.com; script-src 'self' https://cdn.jsdelivr.net https://cdnjs.cloudflare.com https://github.io; style-src 'self' https://fonts.googleapis.com https://cdnjs.cloudflare.com; font-src 'self' https://fonts.gstatic.com https://cdnjs.cloudflare.com; img-src 'self' data:;">
See if this is a problem: - Event Listener Removal:
When dynamically adding elements that have event listeners (e.g., badges in displayBlogEntries), ensure corresponding removal logic is implemented to avoid memory leaks, especially if elements are frequently added and removed.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Submarine Communication Cables: Incidents and Events</title>
<meta name="description" content="Explore undersea submarine communication cable incidents and events worldwide.">
<script src="main.js"></script>
<!-- Include marked for Markdown and Papaparse for CSV parsing -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
<!--include Tailwind CSS-->
<link rel="stylesheet" href="styles.css"></link>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></link>
<!--include DOMPurify-->
<script src="https://cdn.jsdelivr.net/npm/dompurify@2/dist/purify.min.js"></script>
</head>
<body class="bg-gray-100">
<div class="banner"></div>
<div class="max-w-4xl mx-auto p-6">
<div class="text-sm text-gray-600 mb-4">Submarine communication cables</div>
<h1 class="text-4xl font-bold mb-6">Cable Incidents and Events</h1>
<div class="text-sm mb-4">This is a list of global cable developments and incidents.
It includes disruptions, reports of interference and major developments.
It is a non-exhaustive list and it should be noted that the industry
often doesn’t report disruptions so what is captured here is from
public sources only.</div>
<div class="text-sm mb-4">Filter through the items using the search box,
dropdowns or by clicking the tags under each event.</div>
<div class="flex-ctr-sb mb-6">
<!-- Search Input -->
<div class="flex flex-grow-2 items-center bg-white rounded-lg shadow p-4 search-panel w-1/2">
<i class="fas fa-search text-gray-400 mr-3"></i>
<input type="search" id="searchBox" placeholder="Keyword search for cable incidents and events..." class="w-full text-sm text-gray-800 placeholder-gray-400 border-none p-2">
</div>
<!-- Clear & MoreFilters Buttons -->
<div class="flex-ctr-sb flex-col items-stretch ml-2">
<button id="clearmeBtn" class="w-full text-gray-700 border border-gray-500 hover:bg-gray-200 hover:text-white px-4 py-1 rounded transition duration-200 ease-in-out">
<i class="fas fa-backspace"></i>
<div class="hidden sm:inline">Clear</div>
</button>
<button id="filterToggle" class="w-full text-blue-500 border border-blue-500 hover:bg-blue-500 hover:text-white px-4 py-1 rounded transition duration-200 ease-in-out"">
<i class="fas fa-filter"></i>
<div class="hidden sm:inline">Filters</div>
</button>
</div>
</div>
<!--filter panel-->
<div id="searchFilters" class="hidden bg-white rounded-lg shadow p-6 mb-6 search-panel">
<p class="mb-2">Advanced Filter</p>
<div class="flex items-center mb-4">
<label class="w-1/4 text-sm font-medium text-gray-700 hidden sm:block">Year</label>
<select id="yearFilter" class="w-full sm:w-3/4 text-sm text-gray-800 bg-gray-50 rounded-lg border border-gray-300 p-2">
<option>Year</option>
</select>
</div>
<div class="flex items-center mb-4">
<label class="w-1/4 text-sm font-medium text-gray-700 hidden sm:block">Cable Name</label>
<select id="cableFilter" class="w-full sm:w-3/4 text-sm text-gray-800 bg-gray-50 rounded-lg border border-gray-300 p-2">
<option>Cable Name</option>
</select>
</div>
<div class="flex items-center mb-4">
<label class="w-1/4 text-sm font-medium text-gray-700 hidden sm:block">Type of Event</label>
<select id="typeFilter" class="w-full sm:w-3/4 text-sm text-gray-800 bg-gray-50 rounded-lg border border-gray-300 p-2">
<option>Type of Event</option>
</select>
</div>
<div class="flex items-center mb-4">
<label class="w-1/4 text-sm font-medium text-gray-700 hidden sm:block">Cause</label>
<select id="causeFilter" class="w-full sm:w-3/4 text-sm text-gray-800 bg-gray-50 rounded-lg border border-gray-300 p-2">
<option>Cause</option>
</select>
</div>
<div class="flex items-center mb-4">
<label class="w-1/4 text-sm font-medium text-gray-700 hidden sm:block">Country/Location</label>
<select id="countryFilter" class="w-full sm:w-3/4 text-sm text-gray-800 bg-gray-50 rounded-lg border border-gray-300 p-2">
<option>Country</option>
</select>
</div>
<div class="flex items-center mb-4">
<label class="w-1/4 text-sm font-medium text-gray-700 hidden sm:block">Company</label>
<select id="companyFilter" class="w-full sm:w-3/4 text-sm text-gray-800 bg-gray-50 rounded-lg border border-gray-300 p-2">
<option>Company</option>
</select>
</div>
<!-- Buttons for clearing and applying filters -->
<div class="flex justify-end mt-4">
<button type="button" class="text-blue-500 border border-blue-500 hover:bg-blue-500 hover:text-white px-4 py-2 rounded transition duration-200 ease-in-out " id="ApplyBtn">Apply Filter</button>
<button type="button" class="text-gray-700 border border-gray-300 hover:bg-gray-200 hover:text-white px-4 py-2 rounded transition duration-200 ease-in-out ml-2" id="ClearBtn">Clear All</button>
</div>
</div>
<div class="row mb-6 flex-ctr-sb">
<div id="activefilters"></div>
<div class="justify-end">
<span id="shareResultsBadge" class="align-bottom badge-outline">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="16" height="16" viewBox="0 0 128 128" class="icon">
<path d="M 84 11 C 82.3 11 81 12.3 81 14 C 81 15.7 82.3 17 84 17 L 106.80078 17 L 60.400391 63.400391 C 59.200391 64.600391 59.200391 66.499609 60.400391 67.599609 C 61.000391 68.199609 61.8 68.5 62.5 68.5 C 63.2 68.5 63.999609 68.199609 64.599609 67.599609 L 111 21.199219 L 111 44 C 111 45.7 112.3 47 114 47 C 115.7 47 117 45.7 117 44 L 117 14 C 117 12.3 115.7 11 114 11 L 84 11 z M 24 31 C 16.8 31 11 36.8 11 44 L 11 104 C 11 111.2 16.8 117 24 117 L 84 117 C 91.2 117 97 111.2 97 104 L 97 59 C 97 57.3 95.7 56 94 56 C 92.3 56 91 57.3 91 59 L 91 104 C 91 107.9 87.9 111 84 111 L 24 111 C 20.1 111 17 107.9 17 104 L 17 44 C 17 40.1 20.1 37 24 37 L 69 37 C 70.7 37 72 35.7 72 34 C 72 32.3 70.7 31 69 31 L 24 31 z"></path>
</svg>
Share Results
</span>
<span id="downloadDataBadge" class="align-bottom badge-outline">
<svg width="16px" height="16px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z" fill="#1C274C"/>
<path d="M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z" fill="#1C274C"/>
</svg>
Download Data
</span>
</div>
</div>
<div class="bg-white rounded-lg shadow p-6" id="resultsPanel">
<div class="row justify-content-center">
<div class="col-md-10">
<div class="flex-ctr-sb">
<span id="resultsNumber" class="align-bottom mb-5 text-gray-900"></span>
<select id="sortOrderDD" class="form-select form-select-sm mb-2">
<option value="newest">Newest First</option>
<option value="oldest">Oldest First</option>
</select>
</div>
<div id="blogContainer"></div>
</div>
</div>
</div>
</div>
</body>
</html>