-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
55 lines (45 loc) · 2.59 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cubic Bezier</title>
<link rel="stylesheet" href="./style.css">
<script src="./script.js" type="module" defer></script>
<link rel="shortcut icon" href="./img/favicon.png" type="image/x-icon">
</head>
<body>
<div class="container">
<canvas class="canvas">Your Browser doesn't support HTML Canvas :(</canvas>
<p class="text">
<code>
<i>cubic-bezier(<b class="p0 x0">0</b><span class="p0">,</span><b class="p0 y0">0</b>,<b class="p1 x1">0</b><span class="p1">,</span><b class="p1 y1">0</b>)</i>
</code>
<button class="btn-edit">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0 0 30 30"
style=" fill:#000000;">
<path
d="M 22.828125 3 C 22.316375 3 21.804562 3.1954375 21.414062 3.5859375 L 19 6 L 24 11 L 26.414062 8.5859375 C 27.195062 7.8049375 27.195062 6.5388125 26.414062 5.7578125 L 24.242188 3.5859375 C 23.851688 3.1954375 23.339875 3 22.828125 3 z M 17 8 L 5.2597656 19.740234 C 5.2597656 19.740234 6.1775313 19.658 6.5195312 20 C 6.8615312 20.342 6.58 22.58 7 23 C 7.42 23.42 9.6438906 23.124359 9.9628906 23.443359 C 10.281891 23.762359 10.259766 24.740234 10.259766 24.740234 L 22 13 L 17 8 z M 4 23 L 3.0566406 25.671875 A 1 1 0 0 0 3 26 A 1 1 0 0 0 4 27 A 1 1 0 0 0 4.328125 26.943359 A 1 1 0 0 0 4.3378906 26.939453 L 4.3632812 26.931641 A 1 1 0 0 0 4.3691406 26.927734 L 7 26 L 5.5 24.5 L 4 23 z">
</path>
</svg></button>
<button class="btn-copy">
<img src="https://img.icons8.com/material-outlined/24/000000/copy.png" />
</button>
</p>
<div class="settings">
<div class="bezier-inputs">
<input min="0" step=".05" max="1" type="number" name="" id="">
<input min="0" step=".05" max="1" type="number" name="" id="">
<input min="0" step=".05" max="1" type="number" name="" id="">
<input min="0" step=".05" max="1" type="number" name="" id="">
</div>
<button class="btn-bezier btn-bezier-cancel"><b>Cancel</b></button>
<button class="btn-bezier btn-bezier-confirm"><b>Confirm</b></button>
</div>
<button class="btn-start-animation">
<b>Start</b>
</button>
</div>
</body>
</html>