forked from ShoroukAziz/notion_widgets
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathblogging.html
67 lines (57 loc) · 2.44 KB
/
blogging.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
<!-- To change the current value of the Gauge, you need to change 88 to something else in HTML section
and update the .sc-percentage rotate value from 158deg to something else. This will be a part of the Simple Chart library.
x * 180 / 24
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body { background-color: #4a4b4f; font-family:sans-serif; color:#fff; text-align:center }
code { display:inline-block; max-width:600px; padding:80px 0 0; line-height:1.5; font-family:monospace; color:#ccc }
.sc-gauge { width:200px; margin:0 30px auto; display: inline-block; }
.sc-background { position:relative; height:100px; margin-bottom:10px; background-color:#fff; border-radius:150px 150px 0 0; overflow:hidden; text-align:center; }
.sc-mask { position:absolute; top:20px; right:20px; left:20px; height:80px; background-color: #4a4b4f; border-radius:150px 150px 0 0 }
.sc-percentage { position:absolute; top:100px; left:-200%; width:400%; height:400%; margin-left:100px; background-color:#b263b0; }
.sc-percentage { transform:rotate(30deg); transform-origin:top center; }
.sc-percentage2 { position:absolute; top:100px; left:-200%; width:400%; height:400%; margin-left:100px; background-color:#b263b0; }
.sc-percentage2 { transform:rotate(67.5deg); transform-origin:top center; }
.sc-min { float:left; }
.sc-max { float:right; }
.sc-value { position:absolute; top:25%; left:0; width:100%; font-size:48px; font-weight:700; }
.title{ font-size: 15px;
color: white;
position: absolute;
top: 55px;
right: 65px;
}
.title2{ font-size: 15px;
color: white;
position: absolute;
top: 55px;
right: 80px;
}
</style>
</head>
<body>
<div class="sc-gauge">
<div class="sc-background">
<div class="sc-percentage"></div>
<div class="sc-mask"></div>
<span class="sc-value">4 <span class="title" span>published</span> </span>
</div>
<span class="sc-min">0</span>
<span class="sc-max">24</span>
</div>
<div class="sc-gauge">
<div class="sc-background">
<div class="sc-percentage2"></div>
<div class="sc-mask"></div>
<span class="sc-value">9<br> <span class="title2" span>ideas</span> </span>
</div>
<span class="sc-min">0</span>
<span class="sc-max">24</span>
</div>
</body>
</html>