Hugging Face's logo

Spaces:
MoShow
/
responseready-matrix
Running

App Files Community
MoShow commited on
Commit
e71f0e3
·
verified ·
1 Parent(s): b85ffdf

Response Countres Readiness Countries Regional/HQ support

Browse files

5Cs Pillars DRC Tanzania South Sudan Burundi Angola CAR Uganda Zambia AFRO HQ
Coordination in emergencies Leadership, coordination, planning, and monitoring including 16,461,771 70500 95,380 280,000 350000 70500 110500 70500 1 300 000 1 400 000
Community protection Risk communication and Community Engagement and Infodemic 12,422,662 70000 30,700 85000 70000 70000
235000
Collaborative surveillance Epidemiology and Surveillance 12310634 52000 31,600 440,000 135000 52000 91000 52000
Points of entry, and cross-border coordination 3,890,297 15000 197,547 200,000 70000 15000 50000 15000
Strengthening laboratory and diagnostic capabilities 19,508,490 40000 40,200 25,000 80000 40000 50000 40000
Scalable clinical care Infection prevention and control 19,549,316 35000 183,400 32,000 120000 35000 35000 35000
Case management and care for survivors 72,494,470 40000 13,250 37,000 125000 40000 116000 40000
Operational support and logistics 8,659,842 105,000 390,000 75,000 70000 105,000 120000 105,000
Maintaining essential health systems and services 5000 40000 5000 5000
Mental health and Psychosocial support 5,145,902
Safe and dignified burials 862,737 36,800
Access to countermeasures Operational Research and Knowledge Management 4,449,374 95,000 30000
Total 175,755,495 432500 1,018,877 1,184,000 1,105,000 432500 807500 432500 1 300 000 1 400 000
Total 7 602 423 2 700 000
Grand total 15 641 984

Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +276 -19
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Responseready Matrix
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: ResponseReady Matrix
3
+ colorFrom: gray
4
+ colorTo: red
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,276 @@
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>Response Countries Readiness</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
12
+ body {
13
+ font-family: 'Inter', sans-serif;
14
+ }
15
+ .table-container {
16
+ overflow-x: auto;
17
+ }
18
+ .sticky-col {
19
+ position: sticky;
20
+ left: 0;
21
+ background-color: white;
22
+ z-index: 10;
23
+ }
24
+ .sticky-header {
25
+ position: sticky;
26
+ top: 0;
27
+ z-index: 20;
28
+ }
29
+ .progress-bar {
30
+ height: 6px;
31
+ border-radius: 3px;
32
+ overflow: hidden;
33
+ background-color: #e5e7eb;
34
+ }
35
+ .progress-fill {
36
+ height: 100%;
37
+ border-radius: 3px;
38
+ transition: width 0.5s ease-in-out;
39
+ }
40
+ .tooltip {
41
+ position: relative;
42
+ display: inline-block;
43
+ }
44
+ .tooltip .tooltip-text {
45
+ visibility: hidden;
46
+ width: 120px;
47
+ background-color: #1f2937;
48
+ color: white;
49
+ text-align: center;
50
+ border-radius: 6px;
51
+ padding: 5px;
52
+ position: absolute;
53
+ z-index: 1;
54
+ bottom: 125%;
55
+ left: 50%;
56
+ margin-left: -60px;
57
+ opacity: 0;
58
+ transition: opacity 0.3s;
59
+ font-size: 12px;
60
+ }
61
+ .tooltip:hover .tooltip-text {
62
+ visibility: visible;
63
+ opacity: 1;
64
+ }
65
+ @media print {
66
+ .no-print {
67
+ display: none;
68
+ }
69
+ .page-break {
70
+ page-break-after: always;
71
+ }
72
+ }
73
+ </style>
74
+ </head>
75
+ <body class="bg-gray-50 text-gray-800">
76
+ <div class="min-h-screen py-8 px-4 sm:px-6 lg:px-8">
77
+ <div class="max-w-7xl mx-auto">
78
+ <!-- Header -->
79
+ <div class="text-center mb-8">
80
+ <h1 class="text-3xl font-bold text-gray-900 mb-2">Response Countries Readiness</h1>
81
+ <p class="text-lg text-gray-600">Regional/HQ support</p>
82
+ </div>
83
+
84
+ <!-- Controls -->
85
+ <div class="flex flex-wrap gap-4 justify-between items-center mb-6 no-print">
86
+ <div class="flex items-center space-x-4">
87
+ <div class="tooltip">
88
+ <button id="export-pdf" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center transition-colors">
89
+ <i data-feather="download" class="w-4 h-4 mr-2"></i>
90
+ Export PDF
91
+ </button>
92
+ <span class="tooltip-text">Export table as PDF</span>
93
+ </div>
94
+ <div class="tooltip">
95
+ <button id="print" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg flex items-center transition-colors">
96
+ <i data-feather="printer" class="w-4 h-4 mr-2"></i>
97
+ Print
98
+ </button>
99
+ <span class="tooltip-text">Print table</span>
100
+ </div>
101
+ </div>
102
+ <div class="flex items-center space-x-4">
103
+ <div class="relative">
104
+ <input type="text" id="search" placeholder="Search..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
105
+ <i data-feather="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4"></i>
106
+ </div>
107
+ <div class="tooltip">
108
+ <button id="toggle-view" class="bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded-lg flex items-center transition-colors">
109
+ <i data-feather="grid" class="w-4 h-4 mr-2"></i>
110
+ Card View
111
+ </button>
112
+ <span class="tooltip-text">Toggle between table and card view</span>
113
+ </div>
114
+ </div>
115
+ </div>
116
+
117
+ <!-- Table Container -->
118
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
119
+ <div class="table-container max-h-screen overflow-auto">
120
+ <table class="min-w-full divide-y divide-gray-200" id="readiness-table">
121
+ <thead class="bg-gray-50 sticky-header">
122
+ <tr>
123
+ <th class="sticky-col px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50 border-r">5Cs</th>
124
+ <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pillars</th>
125
+ <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">DRC</th>
126
+ <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tanzania</th>
127
+ <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">South Sudan</th>
128
+ <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Burundi</th>
129
+ <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Angola</th>
130
+ <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">CAR</th>
131
+ <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Uganda</th>
132
+ <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Zambia</th>
133
+ <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">AFRO</th>
134
+ <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">HQ</th>
135
+ </tr>
136
+ </thead>
137
+ <tbody class="bg-white divide-y divide-gray-200" id="table-body">
138
+ <!-- Data will be populated by JavaScript -->
139
+ </tbody>
140
+ </table>
141
+ </div>
142
+ </div>
143
+
144
+ <!-- Pagination -->
145
+ <div class="flex justify-between items-center mt-6 no-print">
146
+ <div class="text-sm text-gray-600">
147
+ Showing <span id="page-start">1</span> to <span id="page-end">10</span> of <span id="total-items">0</span> entries
148
+ </div>
149
+ <div class="flex space-x-2">
150
+ <button id="prev-page" class="px-3 py-2 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
151
+ <i data-feather="chevron-left" class="w-4 h-4"></i>
152
+ </button>
153
+ <div id="page-numbers" class="flex space-x-1"></div>
154
+ <button id="next-page" class="px-3 py-2 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
155
+ <i data-feather="chevron-right" class="w-4 h-4"></i>
156
+ </button>
157
+ </div>
158
+ </div>
159
+ </div>
160
+ </div>
161
+
162
+ <script>
163
+ // Sample data structure - replace with actual data
164
+ const readinessData = [
165
+ { category: "Coordination", pillar: "Leadership & Governance", drc: 85, tanzania: 78, southSudan: 62, burundi: 45, angola: 91, car: 34, uganda: 88, zambia: 76, afro: 92, hq: 95 },
166
+ { category: "Coordination", pillar: "Partnership", drc: 78, tanzania: 82, southSudan: 58, burundi: 52, angola: 87, car: 41, uganda: 85, zambia: 79, afro: 89, hq: 93 },
167
+ { category: "Coordination", pillar: "Information Management", drc: 72, tanzania: 75, southSudan: 65, burundi: 48, angola: 83, car: 37, uganda: 81, zambia: 74, afro: 86, hq: 91 },
168
+ { category: "Continuity", pillar: "Health Services", drc: 88, tanzania: 80, southSudan: 70, burundi: 55, angola: 89, car: 42, uganda: 86, zambia: 82, afro: 90, hq: 94 },
169
+ { category: "Continuity", pillar: "Supply Chain", drc: 75, tanzania: 77, southSudan: 60, burundi: 50, angola: 85, car: 39, uganda: 83, zambia: 78, afro: 88, hq: 92 },
170
+ { category: "Continuity", pillar: "Workforce", drc: 82, tanzania: 79, southSudan: 68, burundi: 53, angola: 87, car: 44, uganda: 84, zambia: 80, afro: 89, hq: 93 },
171
+ { category: "Communication", pillar: "Risk Communication", drc: 79, tanzania: 81, southSudan: 63, burundi: 47, angola: 86, car: 36, uganda: 82, zambia: 77, afro: 87, hq: 90 },
172
+ { category: "Communication", pillar: "Community Engagement", drc: 84, tanzania: 76, southSudan: 67, burundi: 51, angola: 88, car: 43, uganda: 87, zambia: 81, afro: 91, hq: 94 },
173
+ { category: "Contingency", pillar: "Emergency Response", drc: 80, tanzania: 83, southSudan: 64, burundi: 49, angola: 90, car: 38, uganda: 85, zambia: 79, afro: 92, hq: 95 },
174
+ { category: "Contingency", pillar: "Surge Capacity", drc: 76, tanzania: 74, southSudan: 61, burundi: 46, angola: 84, car: 35, uganda: 80, zambia: 75, afro: 85, hq: 89 },
175
+ { category: "Capacity", pillar: "Training & Development", drc: 87, tanzania: 85, southSudan: 69, burundi: 54, angola: 92, car: 45, uganda: 89, zambia: 83, afro: 93, hq: 96 },
176
+ { category: "Capacity", pillar: "Infrastructure", drc: 73, tanzania: 72, southSudan: 66, burundi: 52, angola: 82, car: 40, uganda: 78, zambia: 73, afro: 84, hq: 88 },
177
+ { category: "Capacity", pillar: "Technology", drc: 81, tanzania: 84, southSudan: 71, burundi: 56, angola: 91, car: 47, uganda: 88, zambia: 84, afro: 94, hq: 97 }
178
+ ];
179
+
180
+ let currentPage = 1;
181
+ const itemsPerPage = 10;
182
+ let filteredData = [...readinessData];
183
+
184
+ function renderTable() {
185
+ const tableBody = document.getElementById('table-body');
186
+ tableBody.innerHTML = '';
187
+
188
+ const startIndex = (currentPage - 1) * itemsPerPage;
189
+ const endIndex = startIndex + itemsPerPage;
190
+ const pageData = filteredData.slice(startIndex, endIndex);
191
+
192
+ pageData.forEach((item, index) => {
193
+ const row = document.createElement('tr');
194
+ row.className = index % 2 === 0 ? 'bg-white' : 'bg-gray-50';
195
+
196
+ row.innerHTML = `
197
+ <td class="sticky-col px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 bg-white border-r">${item.category}</td>
198
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.pillar}</td>
199
+ <td class="px-6 py-4 whitespace-nowrap">
200
+ <div class="flex items-center space-x-2">
201
+ <div class="progress-bar w-16">
202
+ <div class="progress-fill bg-blue-500" style="width: ${item.drc}%"></div>
203
+ </div>
204
+ <span class="text-sm font-medium text-gray-700">${item.drc}%</span>
205
+ </div>
206
+ </td>
207
+ <td class="px-6 py-4 whitespace-nowrap">
208
+ <div class="flex items-center space-x-2">
209
+ <div class="progress-bar w-16">
210
+ <div class="progress-fill bg-green-500" style="width: ${item.tanzania}%"></div>
211
+ </div>
212
+ <span class="text-sm font-medium text-gray-700">${item.tanzania}%</span>
213
+ </div>
214
+ </td>
215
+ <td class="px-6 py-4 whitespace-nowrap">
216
+ <div class="flex items-center space-x-2">
217
+ <div class="progress-bar w-16">
218
+ <div class="progress-fill bg-yellow-500" style="width: ${item.southSudan}%"></div>
219
+ </div>
220
+ <span class="text-sm font-medium text-gray-700">${item.southSudan}%</span>
221
+ </div>
222
+ </td>
223
+ <td class="px-6 py-4 whitespace-nowrap">
224
+ <div class="flex items-center space-x-2">
225
+ <div class="progress-bar w-16">
226
+ <div class="progress-fill bg-red-500" style="width: ${item.burundi}%"></div>
227
+ </div>
228
+ <span class="text-sm font-medium text-gray-700">${item.burundi}%</span>
229
+ </div>
230
+ </td>
231
+ <td class="px-6 py-4 whitespace-nowrap">
232
+ <div class="flex items-center space-x-2">
233
+ <div class="progress-bar w-16">
234
+ <div class="progress-fill bg-purple-500" style="width: ${item.angola}%"></div>
235
+ </div>
236
+ <span class="text-sm font-medium text-gray-700">${item.angola}%</span>
237
+ </div>
238
+ </td>
239
+ <td class="px-6 py-4 whitespace-nowrap">
240
+ <div class="flex items-center space-x-2">
241
+ <div class="progress-bar w-16">
242
+ <div class="progress-fill bg-pink-500" style="width: ${item.car}%"></div>
243
+ </div>
244
+ <span class="text-sm font-medium text-gray-700">${item.car}%</span>
245
+ </div>
246
+ </td>
247
+ <td class="px-6 py-4 whitespace-nowrap">
248
+ <div class="flex items-center space-x-2">
249
+ <div class="progress-bar w-16">
250
+ <div class="progress-fill bg-indigo-500" style="width: ${item.uganda}%"></div>
251
+ </div>
252
+ <span class="text-sm font-medium text-gray-700">${item.uganda}%</span>
253
+ </div>
254
+ </td>
255
+ <td class="px-6 py-4 whitespace-nowrap">
256
+ <div class="flex items-center space-x-2">
257
+ <div class="progress-bar w-16">
258
+ <div class="progress-fill bg-teal-500" style="width: ${item.zambia}%"></div>
259
+ </div>
260
+ <span class="text-sm font-medium text-gray-700">${item.zambia}%</span>
261
+ </div>
262
+ </td>
263
+ <td class="px-6 py-4 whitespace-nowrap">
264
+ <div class="flex items-center space-x-2">
265
+ <div class="progress-bar w-16">
266
+ <div class="progress-fill bg-orange-500" style="width: ${item.afro}%"></div>
267
+ </div>
268
+ <span class="text-sm font-medium text-gray-700">${item.afro}%</span>
269
+ </div>
270
+ </td>
271
+ <td class="px-6 py-4 whitespace-nowrap">
272
+ <div class="flex items-center space-x-2">
273
+ <div class="progress-bar w-16">
274
+ <div class="progress
275
+ </body>
276
+ </html>