-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
124 lines (108 loc) · 3.44 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
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
120
121
122
123
124
<html>
<head>
<title>
Pixirain
</title>
<meta charset = "utf-8">
<link rel = "stylesheet" href = "css/index.css">
</head>
<body>
<script src="js/howler.core.min.js"></script>
<script type="module" src = "js/index.js"></script>
<div id = "container">
<div id = "rain">
</div>
<div id = "menu">
<div class = "menutitle">
Pixirain
</div>
<div class = "options">
<div id = "defaults">
Restore Defaults
</div>
<div id = "rain-colour">
Rain colour:
<input id = "colour-input" type = "color" value = "#ffffff">
</div>
<div id = "canvas-colour">
Background colour:
<input id = "bgcolour-input" type = "color" value = "#000000">
</div>
<div id = "rain-alpha">
Opacity:
<input id = "rain-alpha-range" type = "range" min = "0" max = "1" step = "0.01" value = "0.2">
<input id = "rain-alpha-number" type = "number" min = "0" max = "1" step = "0.01" value = "0.2">
</div>
<div id = "rain-num">
Particles:
<input id = "rain-num-range" type = "range" min = "2000" max = "6000" step = "100" value = "4096">
<input id = "rain-num-number" type = "number" min = "2000" max = "6000" step = "100" value = "4096">
</div>
<div id = "rain-angle">
Angle:
<input id = "rain-angle-range" type = "range" min = "-80" max = "80" step = "1" value = "0">
<input id = "rain-angle-number" type = "number" min = "-80" max = "80" step = "1" value = "0">
</div>
<div id = "velocity">
Velocity:
<input id = "velocity-range" type = "range" min = "10" max = "20" step = "1" value = "15">
<input id = "velocity-number" type = "number" min = "10" max = "20" step = "1" value = "15">
</div>
<div id = "generate">
Generate Rain
</div>
</div>
</div>
<div id = "sound">
<div class = "menutitle">
Pixirain
</div>
<div class = "options">
<div id = "rain-sound">
Rain Sound:
<input class = "bigInput" type = "checkbox" id = "rain-sound-checkbox">
</div>
<div id = "thunder-sound">
Thunder:
<input class = "bigInput" type = "checkbox" id = "thunder-sound-checkbox">
</div>
<div id = "rain-volume">
Rain Volume:
<input id = "rain-volume-range" type = "range" min = "0" max = "100" step = "1" value = "50">
</div>
<div id = "thunder-volume">
Thunder Volume:
<input id = "thunder-volume-range" type = "range" min = "0" max = "100" step = "1" value = "50">
</div>
</div>
</div>
<div id = "scene">
<div class = "menutitle">
Pixirain
</div>
<div class = "options">
<div id = "default-scene">
Default:
<input class = "bigInput" type = "radio" name = "scene-radio" value = "default" checked>
</div>
<div id = "mountain-scene">
Mountain:
<input class = "bigInput" type = "radio" name = "scene-radio" value = "mountain">
</div>
<div id = "city-scene">
City:
<input class = "bigInput" type = "radio" name = "scene-radio" value = "city">
</div>
<div id = "moon-scene">
Moon:
<input class = "bigInput" type = "radio" name = "scene-radio" value = "moon">
</div>
<div id = "scene-colour">
Scene colour:
<input id = "colour-input-scene" type = "color" value = "#ffffff">
</div>
</div>
</div>
</div>
</body>
</html>