-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
202 lines (176 loc) · 8.84 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Dima Vishnevetsky">
<title>Is DiMsHiK Drinking coffee right now ?</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/coffee.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div class="intro-message">
<h3>Is <a target="_blank" href="http://www.dimshik.com?ref=coffee">DiMsHiK</a> <span class="my-name">(Dima
Vishnevetsky)</span> <br> drinking coffee right now ?</h3>
<hr class="intro-divider">
</div>
<div class="input-group clockpicker">
<input type="text" class="form-control" value="" placeholder="Now">
<span class="input-group-addon">
<i class="far fa-clock"></i>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<svg class="svg-cup" version="1.1" id="Objects" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="512.285px" height="465.297px" viewBox="0 0 512.285 465.297" enable-background="new 0 0 512.285 465.297"
xml:space="preserve">
<g id="XMLID_59_">
<circle id="dark_x5F_circle" fill="#433832" cx="256.143" cy="201.797" r="201.797" />
<circle id="light_x5F_circle" fill="#C4996C" cx="256.143" cy="201.797" r="170.454" />
<g id="XMLID_5_">
<polygon id="XMLID_8_" fill="#603912" points="0,465.297 90.084,465.297 90.084,384.865 0,384.865 23.057,423.741 " />
<polygon id="XMLID_6_" fill="#322A27" points="42.361,417.575 90.084,465.297 90.084,382.184 " />
</g>
<g id="XMLID_9_">
<polygon id="XMLID_11_" fill="#603912" points="512.285,465.297 422.201,465.297 422.201,384.865 512.285,384.865
489.229,423.741 " />
<polygon id="XMLID_10_" fill="#322A27" points="469.924,417.575 422.201,465.297 422.201,382.184 " />
</g>
<g id="cup">
<path id="XMLID_3_" fill="none" stroke="#E6E7E9" stroke-width="19" stroke-miterlimit="10" d="M191.4,197.583
c0,23.755,34.81,73.004,11.056,73.004c-23.755,0-109.638-8.487-109.638-60.445c0-23.755,19.257-43.012,43.012-43.012
C159.584,167.131,191.4,173.829,191.4,197.583z" />
<path id="XMLID_1_" fill="#F2F2F2" d="M282.637,315.779h-52.988c-45.41,0-82.223-36.813-82.223-82.224v-98.081h217.434v98.081
C364.859,278.967,328.047,315.779,282.637,315.779z" />
<path id="XMLID_2_" fill="#E6E7E9" d="M290.208,328.353h-68.131c-4.561,0-8.258-3.697-8.258-8.258l0,0
c0-4.561,3.697-8.258,8.258-8.258h68.131c4.561,0,8.258,3.697,8.258,8.258l0,0C298.466,324.656,294.769,328.353,290.208,328.353z" />
</g>
<!-- This is used to get a "relative" position functionality inside SVG -->
<svg style="overflow: visible" x="50%" y="45%">
<text fill="#8C603D">
<tspan x="15%" font-size="50" font-weight="bold" text-anchor="end" alignment-baseline="central" class="probability">text</tspan>
<tspan font-size="30" font-weight="bold" text-anchor="middle" dy="15">%</tspan>
<tspan x="0%" font-size="22" text-anchor="middle" dy="40">Probability</tspan>
</text>
</svg>
<rect id="robbon" x="42.361" y="326.954" fill="#8C603D" width="427.366" height="90.621" />
<svg style="overflow: visible" x="50%" y="83%">
<text font-size="45" font-weight="bold" text-anchor="middle" alignment-baseline="central" fill="#FFFFFF">
<tspan class="wep">text</tspan>
</text>
</svg>
<linearGradient id="steam_1_" gradientUnits="userSpaceOnUse" x1="256.1426" y1="35.1362" x2="256.1426" y2="124.6407">
<stop offset="0" style="stop-color:#E6E7E9" />
<stop offset="1" style="stop-color:#C4996C" />
</linearGradient>
<path id="steam" fill="url(#steam_1_)" d="M253.133,16.813c0,0,1.037,20.593-11.814,37.202
c-16.339,21.115-22.372,45.498-8.044,62.842c0,0-1.641-24.131,23.496-41.727c0,0-21.233,41.224,2.646,58.317
c0,0,3.521-11.353,16.338-25.891c16.842-19.104,12.951-38.459,1.006-54.295C263.247,35.345,253.133,16.813,253.133,16.813z" />
</g>
</svg>
</div>
</div>
<div class="row about">
<div class="col-lg-12 text-center">
<h3>About</h3>
<p>This is a fun "One day" project i did to present the coffee intake data i'm collecting about myself.</p>
<p>The data is based on <kbd class="total"></kbd> cups of coffee i drank over a period of about <span class="total-years"></span>, from <span
class="from-date"></span> to <span class="to-date"></span> (OMG 😲, <span class="total-years"></span> already).</p>
<p><span class="big-fan text-info">I'm a big fan</span> of DATA so i wear <a target="_blank" href="http://www.samsung.com/global/galaxy/gear-s2/">Samsung
gear s2 (classic)</a> and <s>log coffee cups i drink.</s> no longer log the data using my watch, as the coffee logging functionality was removed from samsung health a couple of versions ago.
<br>
Now I log them using a shortcut to google spreadsheet on my mobile. (It's a 3 tap process to log a cup of coffee)</p>
</div>
</div>
<div class="row" id="stats">
<div class="col-12 text-center">
<h3>Stats</h3>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-4">
<div class="card" id="TotalCups">
<div class="card-title">Total cups</div>
<div class="card-icon">
<i class="fas fa-coffee"></i>
</div>
<div class="card-data"></div>
<hr />
<div class="card-hint"> <i class="fas fa-mountain"></i><span class="card-hint-data"></span></div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-4">
<div class="card" id="FirstRecordedCoffeeCup">
<div class="card-title">First Recorded Coffee Cup</div>
<div class="card-icon"><i class="fas fa-plane-departure"></i></div>
<div class="card-data"></div>
<hr />
<div class="card-hint"> <i class="fas fa-question-circle"></i><span class="card-hint-data"> I Wonder how many have
I drank before</span></div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-4">
<div class="card" id="LatestRecordedCoffeeCup">
<div class="card-title">Latest Recorded Coffee Cup</div>
<div class="card-icon"><i class="fas fa-plane-arrival"></i></div>
<div class="card-data"></div>
<hr />
<div class="card-hint"> <i class="fas fa-info-circle"></i><span class="card-hint-data"> Syncing...</span> </div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-4">
<div class="card" id="ShortestTimeBetweenTwoCups">
<div class="card-title">Shortest Time Between Two Cups</div>
<div class="card-icon"><i class="fas fa-stopwatch"></i></div>
<div class="card-data"></div>
<hr />
<div class="card-hint"> <i class="fas fa-battery-full"></i> <span class="card-hint-data">Battery was fully charged</span>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-4">
<div class="card" id="LongestTimeBetweenTwoCups">
<div class="card-title">Longest Time Between Two Cups</div>
<div class="card-icon"><i class="far fa-calendar-alt"></i></div>
<div class="card-data"></div>
<hr />
<div class="card-hint"> <i class="fas fa-asterisk"></i><span class="card-hint-data"></span></div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-4">
<div class="card" id="MaximalNumberOfCupsInOneDay">
<div class="card-title">Maximal Number Of Cups In One Day</div>
<div class="card-icon"><i class="far fa-smile"></i></div>
<div class="card-data"></div>
<hr />
<div class="card-hint"><i class="far fa-calendar-alt"></i> <span class="card-hint-data"></span> (Latest date)</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<p class="copyright text-muted small">Made with lots of ☕️<br> Copyright © dimshik 2022. All Rights Reserved</p>
</div>
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="clockpicker//bootstrap-clockpicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<!-- coffee.js -->
<script src="js/coffee.js"></script>
</body>
</html>