Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
148 lines (117 sloc) 6.58 KB
<!doctype html>
<!--[if lte IE 8]><html class="no-js oldie shitty shit" lang="en"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" manifest="cache.manifest" lang="en"><!--<![endif]-->
<head>
<!--
OMG thanks for viewing the source.
You're awesome.
Tech we used to build this:
__ HTML5 drag n drop, FileReader,
/ _) a[download], GIF encoding on the client, BlobBuilder,
.-^^^-/ / postMessage, <input type=range> (with Firefox polyfill),
__/ / appcache, transforms, transitions,
<__.|_|-|_| * { box-sizing : border-box; }
See the header and footer for github links and the people involved! ♥
-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Mothereffing animated gif</title>
<meta name="description" content="Drag and drop images from your desktop into the app. You can rotate and drag them. And generate your animated GIF! May even work while you're disconnected!">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700,800|Alfa+Slab+One|Patua+One" rel="stylesheet">
<link rel="stylesheet" href="assets/css/styles.css">
<!-- cache & network update notification -->
<!-- http://blog.grayghostvisuals.com/wordpress/cache-manifest-for-wordpress -->
<script src="assets/js/cache.update.js"></script>
<!-- uncommment for pretty notification update alerts -->
<!--<script src="assets/js/network.status.js"></script>-->
</head>
<body>
<img src="assets/img/project_approved.png" alt="This animated gif maker has been speed project tested and approved" id="speedProject">
<div id="container">
<header id="header" role="header" class="clearfix">
<span class="image">
<img src="assets/img/logo.gif" alt="">
</span>
<h1>Mothereffinganimatedgif</h1>
<p>Drag + Drop, Client-side, Animated GIF Creator</p>
<ul class="social">
<li><iframe src="http://markdotto.github.com/github-buttons/github-btn.html?user=h5bp&repo=mothereffinganimatedgif&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="62px" height="20px"></iframe>
<li><iframe src="http://markdotto.github.com/github-buttons/github-btn.html?user=paulirish&repo=lazyweb-requests&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="132px" height="20px"></iframe></li>
</ul>
</header>
<div id="main" role="main">
<div class="top">
<div class="files">
<div id="inimglist" class="clearfix"></div>
</div>
<div class="controls">
<span class="size">
<label>Width:</label>
<input type=range max=100 min=1 value=100><output></output>
</span>
<span class="rate">
<label>Frame Delay:</label>
<input type=range max=600 min=1 value=300><output></output>
</span>
<span class="quality">
<label>Quality:</label>
<input type=range max=10 min=1 value=3><output></output>
</span>
<a href="#" class="clear">Clear</a>
</div>
</div>
</div>
<div id="dropArea">
<h2 class='support'><span>Drag and <em>Drop</em> images here</span></h2>
<h2 class='nosupport'>Your browser doesn't support FileReader, Drag and Drop, or some other modern required features. :(</h2>
</div>
<div id='results'>
<h2 class='onlyfiles'>
<button class='play'>Animate</button>
<button class='clear'>Reset</button>
<a id="downloadlink" href="">Download GIF</a>
<a id="sharelink" href="">Post to imgur</a>
</h2>
<img id="animresult"/>
</div>
<footer id="footer" role="contentinfo">
<div id="html5-badge">
<a href="http://www.w3.org/html/logo/"><img src="http://www.w3.org/html/logo/badge/html5-badge-h-css3-device-performance-semantics-storage.png" width="261" height="64" alt="HTML5 Powered with CSS3 / Styling, Device Access, Performance &amp; Integration, Semantics, and Offline &amp; Storage" title="HTML5 Powered with CSS3 / Styling, Device Access, Performance &amp; Integration, Semantics, and Offline &amp; Storage"></a>
</div>
<p>Made by the crew behind <a href="https://github.com/h5bp/lazyweb-requests/issues/53">lazyweb-requests#53</a></p>
</footer>
</div>
<script>
var _errs=["4fc160e76fe93d1c35001ac4"];(function(a,b){a.onerror=function(){_errs.push(arguments)};
var d=function(){var a=b.createElement("script"),c=b.getElementsByTagName("script")[0];
a.src="//d15qhc0lu1ghnk.cloudfront.net/beacon.js";a.async=!0;
c.parentNode.insertBefore(a,c)};a.addEventListener?a.addEventListener("load",d,!1):
a.attachEvent("onload",d)})(window,document);
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="assets/js/libraries/jquery-1.7.1.min.js"><\/script>')</script>
<script src="assets/js/libraries/jquery.base64.min.js"></script>
<script src="assets/js/libraries/jQueryRotateCompressed.js"></script>
<script src="assets/js/libraries/LZWEncoder.js"></script>
<script src="assets/js/libraries/NeuQuant.js"></script>
<script src="assets/js/libraries/GIFEncoder.js"></script>
<script src="assets/js/libraries/filereader.js"></script>
<script src="assets/js/libraries/modernizr.js"></script>
<script src="assets/js/libraries/html5slider.js"></script>
<script src="assets/js/libraries/underscore-min.js"></script>
<script src="assets/js/libraries/backbone-min.js"></script>
<script src="assets/js/libraries/backbone.nopersistence.js"></script>
<script src="assets/js/share.js"></script>
<script src="assets/js/mfanimated.js"></script>
<script src="assets/js/models.js"></script>
<script src="assets/js/ui.js"></script>
<script src="assets/js/startup.js"></script>
<script>
var _gaq=[['_setAccount','UA-18857974-3'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>
Something went wrong with that request. Please try again.