-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
154 lines (145 loc) · 6.42 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
151
152
153
154
<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ATC/DDD Index</title>
<!-- Bootstrap CSS & JS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- AG Grid CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-grid.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-theme-quartz.css" />
<link rel="stylesheet" href="styles.css">
<style>
</style>
</head>
<body>
<div class="container">
<!-- Header -->
<h1>ATC/DDD Index</h1>
<p>Anatomical Therapeutic Chemical (ATC) classification system and Defined Daily Dose (DDD)</p>
<div class="row">
<div class="col-12 col-lg-9 mb-3">
<!-- Table -->
<div id="myGrid" class="ag-theme-quartz"></div>
</div>
<div class="col-12 col-lg-3">
<div class="row">
<div class="col-12 col-md-6 col-lg-12">
<div class="card mb-3">
<!-- <img src="..." class="card-img-top" alt="..."> -->
<div class="card-body">
<h5 class="card-title">Apply for ATC entry</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Apply</a>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-12">
<div class="card mb-3">
<!-- <img src="..." class="card-img-top" alt="..."> -->
<div class="card-body">
<h5 class="card-title">Order classification index</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Order</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Tabs -->
<ul class="nav nav-tabs mt-2" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="news-tab" data-bs-toggle="tab" data-bs-target="#news" type="button"
role="tab" aria-controls="news" aria-selected="true">News</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="courses-tab" data-bs-toggle="tab" data-bs-target="#courses" type="button"
role="tab" aria-controls="courses" aria-selected="false">Courses</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="duedates-tab" data-bs-toggle="tab" data-bs-target="#duedates" type="button"
role="tab" aria-controls="duedates" aria-selected="false">Due dates</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="studies-tab" data-bs-toggle="tab" data-bs-target="#studies" type="button"
role="tab" aria-controls="studies" aria-selected="false">Studies</button>
</li>
</ul>
<div class="tab-content mt-3" id="myTabContent">
<div class="tab-pane fade show active" id="news" role="tabpanel" aria-labelledby="home-tab">
<h2>Latest news from NIPH</h2>
<p>(Content for news)</p>
<p>(Some more content for news)</p>
<p>(Last content for news)</p>
</div>
<div class="tab-pane fade" id="courses" role="tabpanel" aria-labelledby="courses-tab">
<h2>Courses and seminars</h2>
<h3>More colorful collaboration with AI</h3>
<div class="row">
<div class="col-12 col-md-6">
<img src="ai-extends-mix-w-icons.png" height="400" width="400" alt="">
</div>
<div class="col-12 col-md-6">
<p>
With AI extending everybody’s reach, let’s look at new collab opportunities (while doing our day job)
</p>
<p>
E.g., AI enables non-developers to make “production-aligned prototypes” using Copilot. Intended value:
</p>
<ul>
<li>Domain experts (e.g. researchers) get more hands-on</li>
<li>Better feedback, earlier</li>
<li>Saves time (e.g. fewer meetings)</li>
</ul>
<p>
<i>
Illustration: Microsoft triad (development, product management, and quality), but with richer colours
now that AI enables deeper collaboration
</i>
</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="duedates" role="tabpanel" aria-labelledby="duedates-tab">
<h2>Due dates and calendar</h2>
<p>(Content for due dates)</p>
<p>(Some more content for due dates)</p>
<p>(Final piece of content for due dates)</p>
</div>
<div class="tab-pane fade" id="studies" role="tabpanel" aria-labelledby="studies-tab">
<h2>Studies and research material</h2>
<p>(Content for studies)</p>
<p>(Some more content for studies)</p>
<p>(Last content for studies)</p>
</div>
</div>
<hr class="bg-danger border-2 border-top border-secondary" />
<!-- Footer -->
<p>On behalf of <a href="https://www.who.int">WHO</a> — by <a href="https://www.fhi.no/en/">NIPH</a>
(🇳🇴 <a href="https://www.fhi.no/">FHI</a>)</p>
</div>
<!-- AG Grid Script -->
<script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script>
<!-- CSV Parsing -->
<script src="https://cdn.jsdelivr.net/npm/papaparse@5.4.1/papaparse.min.js"></script>
<script src="darkmode.js"></script>
<script src="ag-grid.js"></script>
<script>
var triggerTabList = [].slice.call(document.querySelectorAll('#myTab button'));
triggerTabList.forEach(function (triggerEl) {
var tabTrigger = new bootstrap.Tab(triggerEl)
triggerEl.addEventListener('click', function (event) {
event.preventDefault()
tabTrigger.show()
})
})
</script>
</body>
</html>