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
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

<!DOCTYPE html>
<html lang="en">

<head>
	<title>pugl</title>
	<meta charset="utf-8">
	<meta content="width=device-width,initial-scale=1" name="viewport">
	<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>&reg;.
	</p>
</noscript>
<div id="page">
	<div id="main">
		<div id="ui">
			<div id="title">
				<img src="icon.png" alt="" id="title-icon"> pugl
				<input placeholder="Title" id="creation-title">
				<button id="about-button" class="img-button" title="about pugl">
					<img alt="about" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+CjxlbGxpcHNlIGN4PSIxNiIgY3k9IjE2IiByeD0iMTIiIHJ5PSIxMiIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMiIGZpbGw9Im5vbmUiIC8+Cjx0ZXh0IGZpbGw9IiNmZmYiIHg9IjE2IiB5PSIyNCIgZm9udC13ZWlnaHQ9ImJvbGQiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjIwcHgiIHRleHQtYW5jaG9yPSJtaWRkbGUiPj88L3RleHQ+Cjwvc3ZnPgo=">
				</button>
			</div>
			<form action="#" method="dialog" id="code-form" class="ui-section inline-block">
				<input type="text" placeholder="Code" id="code">
				<input type="submit" value="import">
			</form>
			<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>
				&nbsp;
				<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 &lt;canvas&gt;.<br>
					Try upgrading to the latest version of Microsoft Internet Explorer&reg;.
				</p>
			</canvas>
		</div>
	</div>
	<div id="error">error</div>
	<dialog id="about-dialog">
		<h2>pugl</h2>
		<i><b>p</b>ommicket's <b>u</b>tility for <b>gl</b> shaders</i>
		<hr>
		<p>
			pugl is a tool that lets you create &amp; share shaders without writing any code.
		</p>
		<p>
			to learn how to use pugl, check out <a href="guide/index.html" target="_blank">the guide</a>.
		</p>
		<h3>credits</h3>
		<hr>
		<p>
		icon based on
		<a href="https://commons.wikimedia.org/wiki/File:Long-beakedEchidna.jpg" target="_blank">Long-beakedEchidna.jpg from WikiMedia</a>
		CC BY-SA 3.0.
		</p>
		<p>
		everything else is licensed under WTFPLv2.
		</p>
		<form method="dialog">
			<button>close</button>
		</form>
	</dialog>
</div>

</body>
</html>