-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
147 lines (120 loc) · 4.98 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cyberark</title>
<!--CSS-->
<link href="css/circle.css" rel="stylesheet" />
<link href="css/main.css" rel="stylesheet" />
<link href="css/timeline.css" rel="stylesheet" />
</head>
<body>
<div class="modal-bg" onclick="openModal()">
<div class="modal">This is the modal</div>
</div>
<div class="container container-timeline flex column wrap space-between align-between">
<section class="Last-verified progress medium-block">
<h2>Last verified</h2>
<div class="flex">
<div class="progress__circle c100 p10 green">
<span>10</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
<div class="progress__details">
Changed by <br> Andrey Singalovich <br> 28.12.16 4:45 PM
</div>
</div>
<div class="section-controls flex">
<button onclick="openModal()" class="btn-link">open modal</button>
<button onclick="openModal()" class="btn-link">open modal</button>
</div>
</section>
<section class="Last-verified progress medium-block">
<h2>Last verified</h2>
<div class="flex">
<div class="progress__circle c100 p40 green">
<span>40</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
<div class="progress__details">
Changed by <br> Andrey Singalovich <br> 28.12.16 4:45 PM
</div>
</div>
<div class="section-controls">
<button onclick="openModal()">open modal</button>
<!--<button onclick="openModal()">open modal</button>-->
</div>
</section>
<section class="latest-activities full-height large-block">
<h2>Lastest Activities</h2>
<div class="timeline">
<ul class="timeline__day clean-list" data-date="Today 07.12">
<li class="timeline__event" data-hour="11:02:45">
<p><strong>Admin</strong> - Add file category Device Type</p>
</li>
<li class="timeline__event alert" data-hour="2:30 - 4:00pm">
<p><strong>Weak</strong> - Get file request faild</p>
</li>
<li class="timeline__event" data-hour="5:00 - 8:00pm">
<p><strong>PasswordManager... </strong> - Add file c... Lorem Ipsum is simply dummy...</p>
</li>
<li class="timeline__event" data-hour="8:30 - 9:30pm">
<p><strong>Admin</strong> - Add file category Device Type</p>
</li>
</ul>
<ul class="timeline__day clean-list" data-date="Last week 01.12">
<li class="timeline__event" data-hour="11:02:45">
<p><strong>Admin</strong> - Add file category Device Type</p>
</li>
<li class="timeline__event" data-hour="2:30 - 4:00pm">
<p><strong>Weak</strong> - Get file request faild</p>
</li>
<li class="timeline__event alert" data-hour="2:30 - 4:00pm">
<p><strong>Weak</strong> - Get file request faild</p>
</li>
</ul>
</section>
<section class="profile small-block">
<h2>Last Access</h2>
<div class="profile__details">
<div class="profile__name">Boris Rodnik</div>
<p>
5 days ago on 28.12.16 , 4:45
<br> Lorem ipsum dolor sit
</p>
</div>
</section>
<section class="profile small-block">
<h2>Last Access</h2>
<div class="profile__details">
<div class="profile__name">Boris Rodnik</div>
<p>
5 days ago on 28.12.16 , 4:45
<br> Lorem ipsum dolor sit
</p>
</div>
</section>
<section class="profile small-block">
<h2>Last Access</h2>
<div class="profile__details">
<div class="profile__name">Boris Rodnik</div>
<p>
5 days ago on 28.12.16 , 4:45
<br> Lorem ipsum dolor sit
</p>
</div>
</section>
</div>
<script>
function openModal() {
document.querySelector('body').classList.toggle("modal-open");
}
</script>
</body>
</html>