-
Notifications
You must be signed in to change notification settings - Fork 24
/
Copy pathindex.html
232 lines (200 loc) · 10.8 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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Project Title</title>
<link rel="icon" href="./favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/light.css" />
<script type="module"
src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/shoelace-autoloader.js"></script>
<link rel="stylesheet" href="./index.css">
<link rel="stylesheet" href="./components/team-member/team-member.css">
<script type="module" src="./components/team-member/team-member.js"></script>
<link rel="stylesheet" href="./components/table-of-content/table-of-content.css">
<script type="module" src="./components/image/image-component.js"></script>
<script type="module" src="./components/video/video.js"></script>
<link rel="stylesheet" href="./components/references/references.css">
<link rel="stylesheet" href="./components/scroll-to-top/scroll-to-top.css">
<script src="./components/scroll-to-top/scroll-to-top.js"></script>
<script src="./components/table-component/table-component.js"></script>
<link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />
</head>
<body>
<div class="content">
<h1>Project Title</h1>
<!-- This is the team member component use to display details about your team members -->
<div class="team-member-wrapper">
<team-member avatar="assets/blackranger.png" name="Black" department="Mechanical Engineering"
year="1993"></team-member>
<team-member avatar="assets/yellowranger.png" name="Yellow" department="Computer Engineering"
year="1993"></team-member>
<team-member avatar="assets/redranger.png" name="Red" department="Electrical Engineering"
year="1993"></team-member>
<team-member avatar="assets/pinkranger.png" name="Pink" department="Biomedical Engineering"
year="1993"></team-member>
<team-member avatar="assets/blueranger.png" name="Blue" department="Chemical Engineering"
year="1993"></team-member>
</div>
<!-- This is a divide from the shoelace library for aesthetic purpose -->
<sl-divider></sl-divider>
<!-- This is the table-of-content component use to define all of the link directly to each section -->
<div class="table-of-content">
<h2>Table of Contents</h2>
<sl-tree>
<sl-tree-item expanded>
<a href="#section-header-1">1. Section Header 1</a>
<sl-tree-item>
<a href="#sub-section-1-header-1">1.1. Sub-section Header 1</a>
</sl-tree-item>
<sl-tree-item>
<a href="#sub-section-1-header-2">1.2. Sub-section Header 2</a>
</sl-tree-item>
</sl-tree-item>
<sl-tree-item expanded>
<a href="#section-header-2">2. Section Header 1</a>
<sl-tree-item>
<a href="#sub-section-2-header-1">2.1. Sub-section Header 1</a>
</sl-tree-item>
<sl-tree-item>
<a href="#sub-section-2-header-2">2.2. Sub-section Header 2</a>
</sl-tree-item>
</sl-tree-item>
<sl-tree-item>
<a href="#references">References</a>
</sl-tree-item>
</sl-tree>
</div>
<sl-divider></sl-divider>
<div>
<!-- This is an example of what a section might look like -->
<div id="section-header-1">
<h2> 1. Section Header 1 </h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna
aliqua. Tincidunt ornare massa eget egestas. At tellus at urna condimentum mattis pellentesque id nibh tortor.
Elementum sagittis vitae et leo duis ut diam. Morbi tristique senectus et netus et malesuada fames.
Suspendisse
ultrices gravida dictum fusce ut placerat orci. Risus nullam eget felis eget nunc lobortis mattis aliquam
faucibus
(Brody, 2007). Eget sit amet tellus cras adipiscing enim eu turpis egestas. Aliquet nibh praesent tristique
magna
sit amet purus. Adipiscing bibendum est ultricies integer quis auctor elit sed. Fermentum et sollicitudin ac
orci
phasellus egestas tellus rutrum. At in tellus integer feugiat scelerisque varius morbi enim nunc. Volutpat
blandit
aliquam etiam erat velit scelerisque in. Id diam maecenas ultricies mi eget mauris pharetra et. Nec dui nunc
mattis
enim ut tellus elementum sagittis vitae.
</p>
</div>
<div id="sub-section-1-header-1">
<h3>1.1 Sub-section Header 1</h3>
<p>
Ultrices dui sapien eget mi. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit. Dolor purus non enim
praesent elementum facilisis. Lacus vestibulum sed arcu non odio euismod lacinia at. Metus aliquam eleifend mi
in nulla. Lacus sed viverra tellus in hac habitasse platea. Varius quam quisque id diam vel quam elementum
pulvinar. Eleifend quam adipiscing vitae proin sagittis nisl rhoncus. Diam ut venenatis tellus in metus
vulputate. Lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque. Venenatis lectus magna
fringilla
urna. In nisl nisi scelerisque eu ultrices. Velit egestas dui id ornare arcu odio ut sem nulla. Quam id leo in
vitae. Egestas congue quisque egestas diam in arcu cursus euismod quis. Porttitor leo a diam sollicitudin
tempor
id eu nisl.
</p>
</div>
<div id="sub-section-1-header-2">
<h3>1.2 Sub-section Header 2</h3>
<p>
Fermentum dui faucibus in ornare quam viverra orci. Donec ultrices tincidunt arcu non sodales. A diam maecenas
sed enim ut sem viverra. Semper viverra nam libero justo laoreet sit. Mi sit amet mauris commodo quis. Auctor
augue mauris augue neque gravida in fermentum et. Auctor elit sed vulputate mi sit amet. Maecenas pharetra
convallis posuere morbi leo urna. Sem nulla pharetra diam sit amet nisl. Id nibh tortor id aliquet lectus.
Nibh
nisl condimentum id venenatis a condimentum vitae sapien. Convallis posuere morbi leo urna molestie at
elementum.
</p>
<!-- This is an example of how you might use the image component -->
<image-component tag="image" source="assets/requirement.png"
subtitle="Image 1: iDP suggested pathway"></image-component>
</div>
</div>
<br />
<br />
<sl-divider></sl-divider>
<div>
<div id="section-header-2">
<h2>2. Section Header 2</h2>
<p>
Ornare arcu dui vivamus arcu felis bibendum ut tristique et. Mi proin sed libero enim sed faucibus turpis in
eu. Odio ut sem nulla pharetra diam sit. Nibh cras pulvinar mattis nunc sed blandit libero. Lacus sed viverra
tellus in hac habitasse platea dictumst vestibulum. At augue eget arcu dictum varius duis. Mauris ultrices
eros in cursus turpis massa (Lindberg, 1967). Libero nunc consequat interdum varius sit amet mattis. Ut ornare
lectus sit amet est placerat in egestas erat. Elementum curabitur vitae nunc sed. Proin nibh nisl condimentum
id venenatis a condimentum vitae sapien (Chamberlin et al., 2008). Vitae tempus quam pellentesque nec nam
aliquam sem.
</p>
</div>
<div id="sub-section-2-header-1">
<h3>2.1. Sub-section Header 1</h3>
<p>
Pellentesque nec nam aliquam sem et tortor consequat. Et netus et malesuada fames ac turpis egestas maecenas.
Eu tincidunt tortor aliquam nulla facilisi. Nunc aliquet bibendum enim facilisis gravida. Elementum pulvinar
etiam non quam lacus (Moll et al., 2011; Parker & Fox, 2010). Blandit cursus risus at ultrices mi. Arcu dui
vivamus arcu felis bibendum ut tristique. Porttitor rhoncus dolor purus non enim praesent elementum facilisis.
Mauris in aliquam sem fringilla. Non quam lacus suspendisse faucibus. Tristique senectus et netus et malesuada
fames ac. <a href="#image">Link to the image above</a>
</p>
<!-- This is an example of how you might use the video component -->
<video-component tag="rick" source="https://www.youtube.com/embed/dQw4w9WgXcQ"
subtitle="Video: Never gonna give you up?"></video-component>
</div>
<div id="sub-section-2-header-2">
<h3>2.2. Sub-section Header 2</h3>
<p>
Vitae proin sagittis nisl rhoncus mattis rhoncus urna neque viverra. Dignissim convallis aenean et tortor at
risus viverra adipiscing. Facilisi nullam vehicula ipsum a arcu cursus. Adipiscing elit pellentesque
habitant
morbi tristique senectus et netus. Turpis massa tincidunt dui ut ornare lectus. Suspendisse sed nisi lacus
sed. Diam volutpat commodo sed egestas egestas fringilla phasellus faucibus. Ut ornare lectus sit amet est
placerat in egestas. Magna fringilla urna porttitor rhoncus. Imperdiet dui accumsan sit amet.
</p>
<!-- This is an example of how you might use the table component -->
<table-component subtitle="Table: Demo table">
<div id="table-1"></div>
</table-component>
</div>
</div>
<!-- This is an example of how you can use the references component to create references -->
<div id="references" class="references">
<sl-divider></sl-divider>
<h2>References</h2>
<ul>
<li>
Brody, J. E. (2007, December 11). Mental reserves keep brain agile. The New York Times. Retrieved from
http://www.dowjones.com/factiva/
</li>
<li>
Chamberlin, J., Novotney, A., Packard, E., & Price, M. (2008, May). Enhancing worker well-being: Occupational
health psychologists convene to share their research on work, stress, and health. Monitor on Psychology,
39(5), 26-29.
</li>
<li>
Jones, T. J., & Fields, N. (2003). Emotional quotient and personality. E-Journal of Applied Psychology, 2(2),
38-45. Retrieved from http://ejournalappliedpsyc/index.php/ejap
</li>
</ul>
</div>
</div>
<!-- This is the code to display the scroll to top button for ergonomic -->
<!-- You can leave it as it is, or if you don't like its aesthetics you can also just delete it, -->
<!-- but it might reduce the user experience. -->
<sl-button class="scroll-to-top" variant="primary" size="medium" circle onclick="scrollToTop()">
<sl-icon name="arrow-up" label="Settings"></sl-icon>
</sl-button>
<script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>
<script type="module" src="./components/table-component/table-component.js"></script>
</body>
</html>