-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathscreens.html
118 lines (118 loc) · 4.24 KB
/
screens.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Screenshots</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
body, html, .wrapper, .wrapper ul {
height: 100%;
width: 100%;
}
.wrapper {
text-align: center;
padding-top: 10px;
}
.wrapper ul {
position: relative;
overflow: hidden;
margin-top: -55px;
}
.wrapper ul li {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: table;
visibility: collapse;
}
.wrapper ul li.active {
visibility: visible;
}
.wrapper ul li .slide {
display: table-cell;
text-align: center;
vertical-align: middle
}
.wrapper ul li img {
width: 750px;
height: auto;
border: 3px solid #FFF;
box-shadow: 0 0 10px -2px #888;
}
.wrapper ul li i {
font-style: normal;
display: block;
font-size: 18px;
font-family: sans-serif;
max-width: 750px;
margin: auto;
margin-top: 25px;
}
.wrapper .left, .wrapper .right {
position: absolute;
top: 0;
bottom: 0;
width: 100px;
background-image: url(css/arrow.png);
background-repeat: no-repeat;
background-size: 40px auto;
background-position: center center;
opacity: .75;
}
.wrapper .left:hover, .wrapper .right:hover {
opacity: 1;
}
.wrapper .left {
transform: rotate(180deg);
left: 0;
}
.wrapper .right {
right: 0;
}
</style>
</head>
<body>
<div class="wrapper">
<img src="imgs/logo.png" alt="logo" height="50px">
<ul>
<li class="active"><div class="slide"><img src="imgs/ss4.png" alt="screen">
<i>The summary shows an overview of the email usage and you can use the topbar to select the date range.
Also you can use the left menu to navigate through the visualizations.</i>
</div>
</li>
<li><div class="slide"><img src="imgs/ss1.png" alt="screen">
<i>This visualization shows the average time between the receiving/sending of the message and it's reply.</i>
</div></li>
<li><div class="slide"><img src="imgs/ss2.png" alt="screen">
<i>This visualizations shows your top most frequent contacts, grouped by domin.</i>
</div></li>
<li><div class="slide"><img src="imgs/ss3.png" alt="screen">
<i>This visualization shows the summary for an especific contact, you can type the contact email on the box and click in go.</i>
</div></li>
</ul>
<div class="left"></div>
<div class="right"></div>
</div>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var slide = 0;
$("div.left").click(function () {
slide -= slide == 0 ? -3 : 1;
$("ul li").removeClass("active");
$($("ul li")[slide]).addClass("active");
});
$("div.right").click(function () {
slide += slide == 3 ? -3 : 1;
$("ul li").removeClass("active");
$($("ul li")[slide]).addClass("active");
});
</script>
</body>
</html>