forked from tsoding/emoteJAM
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
53 lines (42 loc) · 4.29 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
<!DOCTYPE html>
<html>
<head>
<title>emoteJAM — Generate animated emotes from static images</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/bright.css">
</head>
<body>
<h1>emoteJAM</h1>
<p>Welcome to emoteJAM — a simple website that generates animated <a href="https://betterttv.com/">BTTV</a> emotes from static images. Let's get started!</p>
<h2>1. Select an Image</h2>
<p>112x112 static images are prefered but you can try to select any image and see what happens. This does not upload the image anywhere. emoteJAM works entirely in your browser without any server behind it.</p>
<div id="image-selector-entry"></div>
<p>After you selected the image move on the next section to select a Filter!</p>
<h2>2. Select a Filter</h2>
<p>The image below is not a GIF yet. It's just a preview of how the filter looks like when applied to the image you've selected. Try different filters and pick the one you want.</p>
<div id="filter-selector-entry"></div>
<p>Bright green color is going to be transparent when the actual final GIF is rendered. There is no way to change that yet (but we are working on it). If your image contains that color I'm deeply sorry!</p>
<p>Let's render your GIF now.</p>
<h2>3. Render the GIF</h2>
<p>Click "Render" and when the rendering process is done you can just Right Click the final image and Save it as a GIF that you can then upload to <a href="https://betterttv.com/">BTTV</a>.</p>
<div class="widget">
<div class="widget-element progress-bar"><div class="progress" id="render-progress"></div></div>
<div class="widget-element"><input id="render" type="submit" value="Render" /></div>
<div class="widget-element">
<div id="render-spinner" class="spinning-wheel" style="display: none"></div>
</div>
<img id="render-preview" class="widget-element" />
<div class="widget-element"><a id="render-download" style="display: none; border: none;"><input type="submit" value="Download" /></a></div>
<p>By clicking "Render" you confirm that you have all of the necessary permissions from the respective copyright holders to process this image. Since all of the image processing/generation is done on your machine emoteJAM developers disclaim all the responsibility for any copyright violations done using this website.</p>
<p>Feel free to scroll back and start over. Have fun!</p>
</div>
<a href="https://github.com/tsoding/emoteJAM" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<!-- NOTE: we didn't move gif.js to js because it expects gif.worker.js to be available at `/` resource -->
<script src="gif.js"></script>
<script src="js/grecha.js"></script>
<script src="js/eval.js"></script>
<script src="js/filters.js"></script>
<script src="js/index.js"></script>
</body>
</html>