-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
136 lines (121 loc) · 5.46 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
<!DOCTYPE html>
<html lang="en">
<head>
<!--
To add a favicon, you’ll need to add a <link rel="icon">
element in the <head> section of your index.html.
-->
<link rel="icon" type="image/png" href="assets/images/WhyDRS_favicon.png">
<!--
The "lang" attribute specifies the language of the webpage's content,
helping search engines and screen readers handle the text correctly.
-->
<meta charset="UTF-8">
<!--
Ensures the page is rendered correctly on mobile devices.
'width=device-width' sets the width to the device-width,
and 'initial-scale=1.0' sets the initial zoom level.
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
Provides a brief description of the webpage content,
which can be used by search engines for indexing.
-->
<meta name="description" content="WhyDRS Database - A Comprehensive Public Database for Companies, Brokers, and Transfer Agents">
<!--
Defines the color of the browser toolbar in some mobile browsers,
improving brand visibility and user experience.
-->
<meta name="theme-color" content="#144F9B">
<!--
The title of the webpage that appears in the browser tab
and in search engine results.
-->
<title>WhyDRS Database</title>
<!--
Preload instructions to hint that these resources
are high priority. 'as' attribute identifies the resource type.
-->
<link rel="preload" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" as="style">
<link rel="preload" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css" as="style">
<!--
Links to the DataTables and Buttons library CSS files.
DataTables helps create interactive tables with search,
sorting, pagination, etc.
-->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css">
<!--
Links to our custom stylesheet which holds site-specific styling.
-->
<link rel="stylesheet" href="src/web/css/styles.css">
</head>
<body>
<div class="container">
<!--
Main heading of the webpage, introducing the database.
-->
<h1>WhyDRS Database</h1>
<!--
Small paragraph providing context about the database and
encouraging the user to contribute missing data or contact.
-->
<p class="info-text"><sup>*</sup> Empty cells indicate missing data. You can help us improve by <a href="https://forms.gle/deQ6YDoyX4kTNXy28" target="_blank">contributing missing information</a> or emailing us at <a href="mailto:[email protected]">[email protected]</a>.</p>
<!--
Loading overlay that displays while the data is being fetched.
It prevents the user from interacting with the page
and shows a spinner and a loading message.
-->
<div id="loading-overlay">
<div class="loader"></div>
<p>Loading data, please wait...</p>
</div>
<!--
Table element that will be initialized as a DataTable in the script.
The "hidden" class is applied initially to hide it until data is ready.
-->
<table id="data-table" class="hidden">
<thead>
<tr>
<!--
Table headers (th) are dynamically generated
in the script.js based on JSON keys.
-->
</tr>
</thead>
<tbody>
<!--
Table rows (tr) are populated dynamically
with data from the fetched JSON.
-->
</tbody>
</table>
</div>
<!--
jQuery library (a dependency for DataTables)
is loaded first so DataTables can use it.
-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<!--
DataTables core script, which turns ordinary HTML tables
into powerful interactive tables with searching, sorting, etc.
-->
<script type="text/javascript" src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<!--
Buttons extension for DataTables, adding column visibility and other features.
-->
<script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.colVis.min.js"></script>
<!--
Our custom JavaScript which fetches data and initializes the table.
-->
<script src="src/web/javascript/script.js"></script>
<!--
A sticky bottom bar that stays fixed at the bottom
of the viewport, providing additional links and context.
-->
<div class="sticky-bottom-bar">
<p>WhyDRS is 100% volunteer-driven. Help us improve by contributing or providing feedback <a href="https://github.com/WhyDRS/Database/tree/main" style="color: #FFFFFF; text-decoration: underline;">here</a>. Have questions? Visit <a href="https://whydrs.org" style="color: #FFFFFF; text-decoration: underline;">WhyDRS.org</a> or contact us at <a href="mailto:[email protected]" style="color: #FFFFFF; text-decoration: underline;">[email protected]</a></p>
</div>
</body>
</html>