-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfancytodo.html
82 lines (60 loc) · 3.21 KB
/
fancytodo.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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- code in this file from: https://codepen.io/shshaw/pen/WXMdwE/ -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fancy Todo</title>
<link rel="stylesheet" href="fancytodo.css" />
</head>
<body style="font-family: Arial, Helvetica, sans-serif;">
<svg viewBox="0 0 0 0" style="position: absolute; z-index: -1; opacity: 0;">
<defs>
<linearGradient id="boxGradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="25" y2="25">
<stop offset="0%" stop-color="#27FDC7" />
<stop offset="100%" stop-color="#0FC0F5" />
</linearGradient>
<linearGradient id="lineGradient">
<stop offset="0%" stop-color="#0FC0F5" />
<stop offset="100%" stop-color="#27FDC7" />
</linearGradient>
<path id="todo__line" stroke="url(#lineGradient)" d="M21 12.3h168v0.1z"></path>
<path id="todo__box" stroke="url(#boxGradient)" d="M21 12.7v5c0 1.3-1 2.3-2.3 2.3H8.3C7 20 6 19 6 17.7V7.3C6 6 7 5 8.3 5h10.4C20 5 21 6 21 7.3v5.4"></path>
<path id="todo__check" stroke="url(#boxGradient)" d="M10 13l2 2 5-5"></path>
<circle id="todo__circle" cx="13.5" cy="12.5" r="10"></circle>
</defs>
</svg>
<div class="todo-list">
<label class="todo">
<input class="todo__state" type="checkbox" />
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 25" class="todo__icon">
<use xlink:href="#todo__line" class="todo__line"></use>
<use xlink:href="#todo__box" class="todo__box"></use>
<use xlink:href="#todo__check" class="todo__check"></use>
<use xlink:href="#todo__circle" class="todo__circle"></use>
</svg>
<div class="todo__text">Do a very important task</div>
</label>
<label class="todo">
<input class="todo__state" type="checkbox" />
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 25" class="todo__icon">
<use xlink:href="#todo__line" class="todo__line"></use>
<use xlink:href="#todo__box" class="todo__box"></use>
<use xlink:href="#todo__check" class="todo__check"></use>
<use xlink:href="#todo__circle" class="todo__circle"></use>
</svg>
<div class="todo__text">Another important task</div>
</label>
<label class="todo">
<input class="todo__state" type="checkbox" />
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 25" class="todo__icon">
<use xlink:href="#todo__line" class="todo__line"></use>
<use xlink:href="#todo__box" class="todo__box"></use>
<use xlink:href="#todo__check" class="todo__check"></use>
<use xlink:href="#todo__circle" class="todo__circle"></use>
</svg>
<div class="todo__text">Not so important task</div>
</label>
</div>
</body>
</html>