OLD | NEW |
| (Empty) |
1 {% extends 'layout.html' %} | |
2 | |
3 {% block scripts %} | |
4 <script src="gif.js?v={{ version }}"></script> | |
5 <script src="scripts/main.js?v={{ version }}"></script> | |
6 {% endblock %} | |
7 | |
8 {% block body %} | |
9 | |
10 <h2>Usage</h2> | |
11 {{ contents['code.md'].html }} | |
12 | |
13 <h2>Demo</h2> | |
14 | |
15 <p> | |
16 GIF images are generated in the background using web workers. Hover the orig
inal and reference | |
17 tabs to see respective image. | |
18 </p> | |
19 | |
20 <p> | |
21 Reference images are rendered with photoshop cs6 using the perceptual settin
g with no dither. | |
22 </p> | |
23 | |
24 <div class="demo"> | |
25 <div class="images"> | |
26 <img class="render"> | |
27 <img class="original" src="images/test/anim1.jpg"> | |
28 <img class="original" src="images/test/anim2.jpg"> | |
29 <img class="original" src="images/test/anim3.jpg"> | |
30 <img class="original" src="images/test/anim4.jpg"> | |
31 <img class="reference" src="images/test/anim-ref.gif"> | |
32 </div> | |
33 <ul class="hover-buttons"> | |
34 <li class="original">Original</li> | |
35 <li class="reference">Reference</li> | |
36 </ul> | |
37 <div class="controls"> | |
38 <p class="quality"> | |
39 <label>Quality</label> | |
40 <input type="range" step="1" min="1" max="30" value="20"> | |
41 <span class="value">10</span> | |
42 </p> | |
43 <p class="delay"> | |
44 <label>Delay</label> | |
45 <input type="range" step="1" min="0" max="1000" value="500"> | |
46 <span class="value">500ms</span> | |
47 </p> | |
48 <p class="repeat"> | |
49 <label>Repeat</label> | |
50 <input type="range" step="1" min="0" max="21" value="21"> | |
51 <span class="value">forever</span> | |
52 </p> | |
53 <p class="info"> | |
54 <pre>Loading...</pre> | |
55 </p> | |
56 </div> | |
57 </div> | |
58 | |
59 <div class="demo"> | |
60 <div class="images"> | |
61 <img class="render"> | |
62 <img class="original" src="images/test/test1-orig.jpg"> | |
63 <img class="reference" src="images/test/test1-ref.gif"> | |
64 </div> | |
65 <ul class="hover-buttons"> | |
66 <li class="original">Original</li> | |
67 <li class="reference">Reference</li> | |
68 </ul> | |
69 <div class="controls"> | |
70 <p class="quality"> | |
71 <label>Quality</label> | |
72 <input type="range" step="1" min="1" max="30" value="20"> | |
73 <span class="value">10</span> | |
74 </p> | |
75 <p class="info"> | |
76 <pre>Loading...</pre> | |
77 </p> | |
78 </div> | |
79 </div> | |
80 | |
81 <div class="demo"> | |
82 <div class="images"> | |
83 <img class="render"> | |
84 <img class="original" src="images/test/test3-orig.png"> | |
85 <img class="reference" src="images/test/test3-ref.gif"> | |
86 </div> | |
87 <ul class="hover-buttons"> | |
88 <li class="original">Original</li> | |
89 <li class="reference">Reference</li> | |
90 </ul> | |
91 <div class="controls"> | |
92 <p class="quality"> | |
93 <label>Quality</label> | |
94 <input type="range" step="1" min="1" max="30" value="20"> | |
95 <span class="value">10</span> | |
96 </p> | |
97 <p class="info"> | |
98 <pre>Loading...</pre> | |
99 </p> | |
100 </div> | |
101 </div> | |
102 | |
103 <h2>Other tests</h2> | |
104 <ul> | |
105 {% for test in contents.tests._.pages %} | |
106 <li><a href="{{ test.url }}">{{ test.title }}</a></li> | |
107 {% endfor %} | |
108 </ul> | |
109 | |
110 {% endblock %} | |
OLD | NEW |