-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
119 lines (117 loc) · 5.76 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta property="og:title" content='Among Us "Gif" Generator'/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://dumpygif.me"/>
<meta property="og:description" content="drinking the amogus potion at 3 AM (not clickbait)"/>
<meta property="og:image" content="/assets/logo.png"/>
<title>Among Us "Gif" Generator</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="icon" type="image/x-icon" href="favicon.ico"/>
<script type="module" src="/pixel.js"></script>
<script type="module" src="/sus.js"></script>
<script type="module" src="/script.js"></script>
<!-- W library: https://github.com/jnordberg/gif.js -->
<script src="/gifjs/gif.js"></script>
<script src="/gifjs/gif.worker.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>
<body>
<h1>Among Us Gif Generator</h1>
<form id="settings">
<label for="imageInput">Upload an image to sussify:</label>
<br>
<input id="imageInput" type="file" accept="image/*" required>
<br><br>
<label id="numberOfImpostorsDisplay" for="numberOfImpostors">Lines of Sussy Bakas: <strong>15</strong> <br>(higher value = better "resolution" but will take more time to generate)</label>
<br>
<input id="numberOfImpostors" class="basicSettings" type="range" min="5" max="120" value="15">
<input id="numberOfImpostors_advanced" class="advancedSettings" type="number" min="1" step="0" value="15"/>
<br><br>
<label id="gifSpeedDisplay" for="gifSpeed">Gif speed... 😏: 150 ms</label>
<br>
<input id="gifSpeed" class="basicSettings" type="range" min=25 max=500 value=150>
<input id="gifSpeed_advanced" class="advancedSettings" type="number" min="1" step="0" value="150"/>
<br><br>
<label id="enlargeOutputDisplay" for="enlargeOutput">Enlarge Output: 1x (Default, no enlargement)</label>
<br>
<input id="enlargeOutput" class="basicSettings" type="range" min=100 max=400 value=100>
<input id="enlargeOutput_advanced" class="advancedSettings" type="number" min="0.01" step="0.01" value="1.00"/>
<br><br>
<input id="choreographed" type="checkbox">
<label for="choreographed">Choreographed (all impostors are in the same position at any given time)</label>
<br>
<div id="choreographyTypeContainer">
<h3>Choreography Type:</h3>
<input type="radio" name="choreographyType" value="basic" id="basicC" checked>
<label for="basicC">Basic</label>
<br>
<input type="radio" name="choreographyType" value="ripple" id="rippleC">
<label for="rippleC">Ripple (experimental)</label>
<br>
<input type="radio" name="choreographyType" value="wave" id="waveC">
<label for="waveC">Wave (experimental)</label>
<br>
</div>
<div id="waveDirectionsContainer">
<h3>Wave Direction:</h3>
<input type="radio" name="waveDirection" value="left-to-right" id="horizontal" checked/>
<label for="horizontal">Horizontal</label>
<br>
<input type="radio" name="waveDirection" value="top-to-bottom" id="vertical" />
<label for="vertical">Vertical</label>
<br>
</div>
<br>
<input id="colorCollapse" type="checkbox">
<label for="colorCollapse">Color Collapse™ (drastically improves performance for a small reduction in contrast, recommended for mobile users)</label>
<br>
<div id="compressionPercentContainer">
<br>
<label id="compressionPercentDisplay" for="compressionPercent">Compression: 60% (higher = less contrast, but faster generation time)</label>
<br>
<input id="compressionPercent" class="basicSettings" type="range" min=10 max=90 value=60>
<input id="compressionPercent_advanced" class="advancedSettings" type="number" min="0" max="99" step="1" value="60"/>
</div>
<div class="advancedSettings">
<br><br>
<strong>Would not recommend messing around here unless you know exactly what you're doing.</strong>
<br><br>
<label id="numWorkersDisplay" for="numWorkers">Number of workers: 5</label>
<br>
<input id="numWorkers" type="range" min="2" max="20" value="5" step="1">
<br><br>
<label id="gifQualityDisplay" for="gifQuality">Pixel Sample Interval: 10 (lower = higher quality GIF but will take longer to produce, and vice versa)</label>
<input id="gifQuality" class="advancedSettings" type="number" min="1" step="1" value="10"/>
<br>
</div>
<label class="toggle">
<input class="toggle-checkbox" type="checkbox" id="toggleAdvancedSettings">
<div class="toggle-switch"></div>
<span class="toggle-label">Advanced Settings</span>
</label>
<button id="btnGenerate" type="submit" disabled>Loading...</button>
</form>
<div id="status"></div>
<div id="loader"></div>
<div id="output">
<h1>Your gif:</h1>
<img id="outputImage">
<button id="btnDownload">Download</button>
<br>
</div>
<div class="footer">
<p class="footer-text-left">
Made with ☕❤
</p>
<div class="footer-content-right">
<a href="https://github.com/Walker30263/dumpygif" target="_blank" rel="noreferrer"><img src="/assets/socials/github.png" class="icon-style" alt="GitHub icon"></a>
<a href="https://twitter.com/DumpyGif" target="_blank" rel="noreferrer"><img src="/assets/socials/twitter.png" class="icon-style" alt="Twitter icon"></a>
</div>
</div>
</body>
</html>