-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
15 lines (14 loc) · 9.52 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Responsive CSS Sprite Generator</title><meta name="description" content="A tool for generating responsive CSS sprites."><meta name="keywords" content="Responsive,CSS,Sprite,Generator,Generated,Tool"><meta name="author" content="Aaron Eivers"><link rel="icon" href="./favicon.ico?v=2"><link rel="manifest" href="/manifest.webmanifest"><style>/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}
html{-webkit-box-sizing:border-box;box-sizing:border-box;font-family:'Roboto Condensed',sans-serif;color:#24292e}*,:after,:before{-webkit-box-sizing:inherit;box-sizing:inherit}body,html{height:100%}canvas{vertical-align:middle}.page-wrap{padding-top:120px;position:relative;height:100%}header{height:120px;width:100%;min-width:1024px;background-color:#24292e;position:fixed;z-index:3;padding:8px 10px 0}header h1{font-size:2em;margin:0 0 2px;color:#fff;font-weight:400}header h2{font-size:.85em;color:rgba(255,255,255,.75);font-weight:400;margin:0 0 15px}header input{font-size:1em;padding:6px;font-family:'Roboto Condensed',sans-serif;background-color:rgba(255,255,255,.125);color:#fff;border:none;border-radius:2px}header input:last-child{width:30px;text-align:center}header input.path-input{width:400px}header label{color:rgba(255,255,255,.75);font-size:1em}.content{position:relative;min-height:100%}.file-list{width:200px;min-height:100%;position:absolute;top:0;left:0;border-right:solid 8px #24292e}.file-list p{color:#fafbfc}.file-list ul{list-style:none;margin:0;padding:5px 5px 0}.file-list ul li{position:relative;padding:5px;margin:0 0 5px;min-height:29px;border:solid 1px transparent}.file-list ul li img{max-width:100%;height:auto;display:block}.file-list ul li span{position:absolute;bottom:5px;left:5px;background-color:#333;color:#fff;padding:3px;font-size:.8em;border-radius:5px;opacity:0}.file-list ul li:hover{border:dashed 1px #fff}.file-list ul li:hover span{opacity:1}.file-list ul li:hover .remove{opacity:1}.file-list .remove{position:absolute;top:3px;right:3px;width:24px;height:24px;background:transparent url(/assets/img/ic_clear_black_24px.svg) 0 0 no-repeat;cursor:pointer;opacity:.5;-webkit-filter:invert(1);filter:invert(1)}.file-list .remove:hover{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}.output{padding:10px 10px 10px 210px}.output b{font-size:1.1em}.add-files-btn{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;width:48px;height:48px;background:transparent url(/assets/img/ic_add_circle_black_48px.svg) center center no-repeat;cursor:pointer;display:none}.add-files-text{position:absolute;top:76px;left:0;right:0;bottom:0;margin:auto;width:175px;height:20px;text-align:center;cursor:pointer;display:none}.dropbox{border:solid 1px #e0e0e0;margin:0 auto;float:left;position:relative;min-width:100%;min-height:512px;cursor:pointer}.dropbox.is-empty .add-files-btn,.dropbox.is-empty .add-files-text{display:block}.fileSelect{display:block}.clear{width:100%;clear:both}.result{padding:10px 0 0 0}textarea{width:1024px;font-family:'Roboto Condensed',sans-serif;padding:10px 8px;background-color:#f5f5f5;-webkit-box-shadow:none;box-shadow:none;border:solid 1px #e0e0e0}.button{width:65px;height:65px;border-radius:5px;cursor:pointer;-webkit-transition:background-color .3s ease;-o-transition:background-color .3s ease;transition:background-color .3s ease}.button:hover{background-color:#00e5ff}.button span{display:block;position:absolute;left:0;bottom:100%;width:100%;font-size:.8em;color:rgba(255,255,255,.75);text-align:center;padding-bottom:5px}.download{position:absolute;bottom:10px;right:10px;background:rgba(255,255,255,.125) url(/assets/img/ic_file_download_white_48px.svg) center center no-repeat}.download-info{font-size:.9em;margin-bottom:2px}.copy{position:absolute;bottom:10px;right:85px;background:rgba(255,255,255,.125) url(/assets/img/ic_content_copy_white_48px.svg) center center no-repeat}.github{position:relative;left:10px;top:5px;display:inline-block;background:transparent url(/assets/img/GitHub-Mark-Light-32px.png) 0 0 no-repeat;width:32px;height:32px}.dimensions{font-size:.9em}.dark-checkered{background-color:#757575;background-image:-o-linear-gradient(45deg,#424242 25%,transparent 25%),-o-linear-gradient(135deg,#424242 25%,transparent 25%),-o-linear-gradient(45deg,transparent 75%,#424242 75%),-o-linear-gradient(135deg,transparent 75%,#424242 75%);background-image:linear-gradient(45deg,#424242 25%,transparent 25%),linear-gradient(-45deg,#424242 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#424242 75%),linear-gradient(-45deg,transparent 75%,#424242 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.light-checkered{background-color:#f5f5f5;background-image:-o-linear-gradient(45deg,#e0e0e0 25%,transparent 25%),-o-linear-gradient(135deg,#e0e0e0 25%,transparent 25%),-o-linear-gradient(45deg,transparent 75%,#e0e0e0 75%),-o-linear-gradient(135deg,transparent 75%,#e0e0e0 75%);background-image:linear-gradient(45deg,#e0e0e0 25%,transparent 25%),linear-gradient(-45deg,#e0e0e0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e0e0e0 75%),linear-gradient(-45deg,transparent 75%,#e0e0e0 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}</style></head><body><header id="header"><h1>Responsive CSS Sprite Generator<a class="github" href="https://github.com/eivers88/responsive-css-sprite-generator" target="_blank" rel="noopener"></a></h1><h2>A tool for generating CSS sprite sheets using percentage based background positions</h2><div id="download" class="download button"><span>Download</span></div><div id="copy" class="copy button" data-clipboard-target="#css"><span>Copy CSS</span></div><label for="prefix">Class Prefix: </label><input id="prefix" type="text" name="prefix" placeholder="class prefix" value=""><label for="path"> Path: </label><input id="path" class="path-input" type="text" name="path" placeholder="path" value="sprite.png"><label for="padding"> Padding (px): </label><input id="padding" type="text" name="padding" placeholder="padding" maxlength="2" value="2"></header><div class="page-wrap"><input type="file" id="fileElem" multiple="multiple" accept="image/*" style="display:none"><section class="content"><div id="fileList" class="file-list dark-checkered"></div><div class="output"><div><b>Generated Sprite</b> <span id="dimensions" class="dimensions"></span></div><div class="download-info">If the download button does not work, right click the sprite and select "Save Image As..."</div><div id="dropbox" class="dropbox is-empty light-checkered"><canvas id="canvas" width="256" height="256"></canvas><div class="add-files-btn"></div><div class="add-files-text">Add some images!</div></div><div class="clear"></div><div class="result"><div><b>Generated CSS</b></div><textarea id="css" cols="120" rows="20" name="css"></textarea></div></div></section></div><script>(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-70842502-1', 'auto');
ga('send', 'pageview');</script><script src="assets/js/bundle-167107567a.min.js" async></script></body></html>