-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
77 lines (72 loc) · 4.93 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
<html>
<head>
<meta charset=utf-8 />
<title>Storage Viewer</title>
<link rel="stylesheet" type="text/css" href="node_modules/semantic-ui-css/semantic.min.css">
<script src="app.js"></script>
</head>
<body>
<div class="ui container">
<div class="ui basic segment">
<h1 class="ui massive dividing header"><img src="disk-lightning.png"/>Storage Viewer</h1>
<button id="action-btn" class="ui teal button" onclick="action()">Action</button>
<button id="button" class="ui teal button" onclick="changeClickMeText()"><i class="help icon"></i></button>
<button id="click-me-btn" onclick="changeBtnText()" class="ui teal button">Click Me</button>
<button id="doc-btn" class="ui button" onclick="toggleDocumentation()">Documentation</button>
<p></p>
<i id="star" class="huge yellow star icon" style="display:none"></i>
<table class="ui celled padded table">
<thead>
<tr><th class="single line">Location</th>
<th>Serial No.</th>
<th>Status</th>
<th>Info</th>
<th>Percent Used</th>
</tr></thead>
<tbody>
<tr>
<td class="single line">Box 1</td>
<td class="single line">ABCDEFGH</td>
<td><i class="check square green icon"></i>OK</td>
<td class="single line">LM0567TKY987</td>
<td class="single line">98%</td>
</tr>
<tr>
<td class="single line">Box 2</td>
<td class="single line">IJKLMNOP</td>
<td><i class="warning sign yellow icon"></i>Warning</td>
<td class="single line">LM0567TKY987</td>
<td class="single line">50%</td>
</tr>
<tr>
<td class="single line">Box 3</td>
<td class="single line">QRSTUVW</td>
<td><i class="check square green icon"></i>OK</td>
<td class="single line">LM0567TKY987</td>
<td class="single line">99%</td>
</tr>
<tr>
<td class="single line">Box 4</td>
<td class="single line">XYZPDQ</td>
<td><i class="check square green icon"></i>OK</td>
<td class="single line">LM0567TKY987</td>
<td class="single line">98%</td>
</tr>
<tr>
<td class="single line">Box 5</td>
<td class="single line">HGFEDCBA</td>
<td><i class="check square green icon"></i>OK</td>
<td class="single line">LM0567TKY987</td>
<td class="single line">97%</td>
</tr>
</tbody>
</table>
<div id="docs" class="ui piled segment" style="display:none">
<h4 class="ui header">Welcome to Documenation</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at velit eu tellus rutrum accumsan tristique nec est. Sed eu dui varius, vestibulum dolor quis, elementum metus. Cras non mi sit amet metus tristique vestibulum. Donec dolor nisi, tincidunt nec posuere vel, scelerisque a eros. Proin elit purus, fermentum at vehicula in, volutpat ut purus. Maecenas eget elit in dolor porttitor dictum at in enim. Etiam tincidunt facilisis turpis, in mattis velit sagittis sit amet. Mauris nec erat sit amet odio luctus lobortis sit amet in nisi. Cras odio dui, tempus in tempus ullamcorper, dictum convallis sem. Duis vel dapibus libero, sit amet maximus metus. Sed posuere nunc id vestibulum pulvinar. Curabitur eu volutpat arcu. Proin in odio erat. In non viverra mauris. Suspendisse ac posuere ante.</p>
<p>Donec vehicula nibh non mauris volutpat, non pellentesque sapien lacinia. Fusce quam dui, egestas id neque ac, vehicula porta sapien. Morbi sed ex at neque tristique convallis. Aliquam condimentum sapien quis justo dictum, ac interdum enim lobortis. Quisque consequat quam sit amet risus accumsan, ut fermentum leo elementum. Vestibulum eget lorem non quam iaculis lacinia non vitae ligula. Ut pellentesque rhoncus sapien quis viverra. Sed consequat porttitor leo eget feugiat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam finibus a nisi a consectetur. Nam dapibus tincidunt lectus, hendrerit tempor purus vehicula quis.</p>
</div>
</div>
</div>
</body>
</html>