| 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 |