forked from LeaVerou/cubic-bezier
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·74 lines (65 loc) · 2.07 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Cubic Bezier</title>
<link href="style.css" rel="stylesheet" />
<link rel="shortcut icon" type="image/png" href="about:blank" />
</head>
<body>
<header>
<h1 id="cb-code">
<a href=""><code>cubic-bezier(<span id="values"><span
id="P1x" class="param">0</span>,<span
id="P1y" class="param">0</span>,<span
id="P2x" class="param">.25</span>,<span
id="P2y" class="param">1</span></span>)</code></a>
</h1>
</header>
<div class="coordinate-plane">
<span class="control-point" id="P0"></span>
<button class="control-point" id="P1" style="left:10px; top: 150px;"></button>
<button class="control-point" id="P2" style="left:50px; top: 90px;"></button>
<span class="control-point" id="P3"></span>
<canvas height="299" width="149" id="curve"></canvas>
</div>
<section id="preview">
<div id="controls">
<h1>
Preview
</h1>
<div class="range-group">
<!-- <label for="duration">Duration:</label> -->
<input type="range" id="duration" value="1" min="0.1" max="10" step="0.1" pattern="\d*\.?\d+" size="3" />
<output for="duration">1s</output>
</div>
<button id="go">▶</button>
</div>
<div id="animation">
<canvas id="current" width="30" height="30"></canvas>
<canvas id="compare" width="30" height="30"></canvas>
</div>
</section>
<section id="library">
<h1>
Library
<span class="button-group">
<button id="save">Add…</button>
<button id="import">Import…</button>
<button id="export">Export…</button>
</span>
</h1>
<form id="importexport">
<label for="json">Paste Code</label>
<label for="json">Copy the code and save to a file to export</label>
<textarea id="json"></textarea>
<button>Import</button>
<button>Close</button>
</form>
</section>
<script src="chainvas.min.js"></script>
<script src="environment.js"></script>
<script src="cubic-bezier.js"></script>
<script src="interaction.js"></script>
</body>
</html>