blob: 5b10c84053b2759cfc3eaa79aab90b99bd3cc6f1 (
plain)
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<title>pugl</title>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1" name="viewport">
<script>
// make sure we have the right base for URLs
if (!location.pathname.endsWith('.html') && !location.pathname.endsWith('/')) {
location.pathname = location.pathname + '/';
}
</script>
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="style.css">
</head>
<body class="no-margin overflow-hidden">
<script src="pugl.js" async></script>
<noscript>
<p>
This page requires JavaScript to function.<br>
Try using a modern browser such as <em>Netscape Navigator</em>®.
</p>
</noscript>
<div id="page">
<div id="main">
<div id="ui">
<div id="top-area">
<img src="icon.png" alt="" id="title-icon"> <span id="title">pugl</span>
<input placeholder="Title" id="creation-title">
<div id="creation-buttons">
<button id="list-creations" class="img-button" title="list creations">
<img alt="list creations" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+PHBhdGggZD0iTTYgNyBMMjYgNyBNNiAxNiBMMjYgMTYgTTYgMjUgTDI2IDI1IiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+">
</button>
<button id="link-creation" class="img-button" title="copy link to creation">
<img alt="copy link" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+PHJlY3QgeD0iNiIgeT0iNCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjIwIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMyIgcng9IjIiIGZpbGw9Im5vbmUiLz48cmVjdCB4PSIxMSIgeT0iOCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjIwIiBzdHJva2U9IiNmZmYiIGNsaXAtcGF0aD0icGF0aCgnTSAyMCAwIGwgMCAyNCBsIC0xNCAwIGwgMCAxMDAgbCAxMDAgMCBMIDEwMCAwIHonKSIgc3Ryb2tlLXdpZHRoPSIzIiByeD0iMiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==">
<span id="copied-notice">Copied link!</span>
</button>
<a href="guide/index.html" class="no-text-decoration" target="_blank">
<button id="about-button" class="img-button" title="about pugl">
<img alt="about" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+PGVsbGlwc2UgY3g9IjE2IiBjeT0iMTYiIHJ4PSIxMiIgcnk9IjEyIiBzdHJva2U9IiNmOGYiIHN0cm9rZS13aWR0aD0iMyIgZmlsbD0ibm9uZSIgLz48dGV4dCBmaWxsPSIjZjhmIiB4PSIxNiIgeT0iMjQiIGZvbnQtd2VpZ2h0PSJib2xkIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIyMHB4IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj4/PC90ZXh0Pjwvc3ZnPg==">
</button>
</a>
<button id="new-creation" class="img-button" title="new creation">
<img alt="new creation" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+PHBhdGggZD0iTTE2IDYgTDE2IDI2IE02IDE2IEwyNiAxNiIgc3Ryb2tlPSIjOGY4IiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvc3ZnPg==">
</button>
<button id="delete-creation" class="img-button" title="delete creation">
<img alt="delete creation" src="x.svg">
</button>
</div>
</div>
<form action="#" method="dialog" id="resolution-form" class="ui-section inline-block">
<input type="number" placeholder="width" id="resolution-x">
×
<input type="number" placeholder="height" id="resolution-y">
<input type="submit" value="change resolution">
</form>
<div class="ui-section">
<div class="inline-block no-wrap">
<button disabled id="play" class="img-button" title="run the shader once per frame (shortcut: space)">
<img alt="play" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+PHBhdGggZD0iTSA2IDI2IEwgMjYgMTYgTCA2IDYgeiIgZmlsbD0iI2ZmZiIgc3Ryb2tlPSJub25lIiAvPjwvc3ZnPgo=">
</button>
<button id="pause" class="img-button" title="run the shader only on command (shortcut: space)">
<img alt="pause" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+CjxwYXRoIGQ9Ik0gNiA2IGwgMCAyMCBsIDcgMCBsIDAgLTIwIHogTSAxOSA2IGwgMCAyMCBsIDcgMCBsIDAgLTIwIHoiIGZpbGw9IiNmZmYiIHN0cm9rZT0ibm9uZSIgLz4KPC9zdmc+Cg==">
</button>
<button disabled id="step" class="img-button" title="run the shader once (shortcut: .)">
<img alt="step" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+CjxwYXRoIGQ9Ik0gNiA2IGwgMCAyMCBsIDQgMCBsIDAgLTIwIHogTSAxNCA2IGwgMTIgMTAgbCAtMTIgMTAgeiIgZmlsbD0iI2ZmZiIgc3Ryb2tlPSJub25lIiAvPgo8L3N2Zz4K">
</button>
<button id="restart" class="img-button" title="reset .time to 0, and update shader (shortcut: R)">
<img alt="restart" src="data:image/svg+xml;base64,Cgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIj4KPHBhdGggZD0iTTEyIDggYSA5IDkgMCAxIDAgMTAgNSBtIDAgLTIgbCAtNCA0IG0gNCAtNCBsIDUgMiIgc3Ryb2tlPSIjZmZmIiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8L3N2Zz4K">
</button>
</div>
<div class="inline-block no-wrap" title="automatically update display when anything is changed">
<input id="auto-update" type="checkbox" checked>
<label for="auto-update">auto-update</label>
</div>
</div>
<div class="ui-section">
Add <input type="text" id="widget-search" placeholder="Search">
<div id="widget-choices"></div>
<div id="widgets-container"></div>
</div>
</div>
<div id="ui-resize"></div>
<div id="canvas-container">
<canvas id="canvas">
<p>
Your browser doesn't support HTML5 <canvas>.<br>
Try upgrading to the latest version of Microsoft Internet Explorer®.
</p>
</canvas>
</div>
</div>
<div id="error">error</div>
<dialog id="creations-dialog">
<h3>saved creations</h3>
<hr>
<div id="creations"></div>
<br>
<form method="dialog">
<button>close</button>
</form>
</dialog>
<dialog id="delete-dialog">
<h3>delete creation "<span id="delete-creation-title"></span>"?</h3>
<br>
<form method="dialog">
<button id="delete-creation-confirm">yes</button>
<button>no</button>
</form>
</dialog>
</div>
</body>
</html>
|
