-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
75 lines (75 loc) · 2.74 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>rain-char demo</title>
<link rel="stylesheet" href="demo/style_v1.4.0.css">
<script src="https://cdn.jsdelivr.net/npm/rain-char@1.4.0/src/rain-char.min.js"></script>
<!-- <script src="src/rain-char.js"></script>-->
</head>
<body>
<div id="controls">
<div class="row">
<label>Font</label>
<select id="font">
<option value="Verdana">Verdana</option>
<option value="cursive">cursive</option>
<option value="Courier New">Courier New</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Brush Script MT">Brush Script MT</option>
</select>
</div>
<div class="row">
<label>Character Size</label>
<div>
<input type="number" min="5" max="100" id="char-size1" value="10">
<input type="number" min="5" max="100" id="char-size2" value="40">
</div>
</div>
<div class="row">
<label>Character Range</label>
<select id="char-range">
<option value="[0x0021, 0x007e]">Basic Latin</option>
<option value="[[0x0021, 0x007e], [0x00a1, 0x02af]]">Extended Latin</option>
<option value="[[0x3041, 0x3096], [0x30a1, 0x30f6]]">Hiragana/Katakana</option>
<option value="[0x2800, 0x28ff]">Braille Patterns</option>
<option value="[0x1f300, 0x1f64f]">Emojis</option>
<option value="[[0x2731, 0x273d], [0x2744, 0x274b]]">Snow</option>
</select>
</div>
<div class="row">
<label>Background</label>
<input type="color" value="#222222" id="bg-color">
</div>
<div class="row">
<label>Foreground</label>
<input type="color" value="#32cd32" id="fg-color">
</div>
<div class="row">
<label>Speed (FPS)</label>
<input type="number" value="30" id="fps" min="1" max="100">
</div>
<div class="row">
<label>Density Factor</label>
<input type="number" value="10" id="density" min="1" max="100">
</div>
<div class="row">
<label>Trail Multiplier</label>
<input type="number" value="1" id="trail" min="0" max="4" step="0.1">
</div>
<div class="row">
<label>Char Spacing</label>
<input type="number" value="1" id="char-spacing" min="0.1" max="4" step="0.1">
</div>
<div class="row">
<label>Char Change Frequency</label>
<input type="number" value="1" id="char-change" min="0" max="1" step="0.1">
</div>
<div class="row">
<label>Resize the effect screen with the little handle at bottom right</label>
</div>
</div>
<div id="effect"></div>
</body>
<script src="demo/script_v1.4.0.js"></script>
</html>