Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 55 lines (53 sloc) 2.413 kB
66ea8ee @Calvein Separate files and nicer JavaScript
authored
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Simple uploader - by Calvein</title>
6 <link href="http://fonts.googleapis.com/css?family=Pacifico&text='Simple uploader'" rel="stylesheet">
7 <link href="http://necolas.github.com/normalize.css/2.0.1/normalize.css" rel="stylesheet">
8 <link href="style.css" rel="stylesheet">
b819e36 @Calvein Tout
authored
9 </head>
10 <body>
66ea8ee @Calvein Separate files and nicer JavaScript
authored
11 <header>
12 <h1>Simple uploader</h1>
7556ad2 @Calvein lighter index.html
authored
13 <h2>By <a href="http://twitter.com/Calvein">Calvein</a> based on the original idea by <a href="http://twitter.com/jessedodds">Jesse Dodds</a></h2>
66ea8ee @Calvein Separate files and nicer JavaScript
authored
14 </header>
15 <form>
16 <div id="uploader">
17 <figure><div></div></figure><!--
18 --><label>
19 Choose a file...
20 </label>
21 <input type=file id=file><!--
22 --><progress max=100 value=30></progress>
23 <ul>
24 <li>Complete</li>
25 <li><a href=#>Remove</a></li>
26 </ul>
27 </div>
28 </form>
29 <p>
30 It's done in plain JavaScript and CSS3, there is no images.<br>The pattern comes from <a href="http://subtlepatterns.com/">Subtle Patterns</a>,
31 the icons are edited version of <a href="http://twitter.com/necolas">Nicolas Gallagher</a>'s <a href="http://nicolasgallagher.com/pure-css-gui-icons/">ones</a>.<br>
32 It works only (well I only tested those) on Chrome and Firefox.
33 </p>
34 <hr>
35 <footer>
36 Get the <img src="http://dribbble.com/favicon.ico" alt="Dribbble"> <a href="http://dribbble.com/shots/251571-Image-upload-idea">shot</a> |
37 Get the <img src="https://github.com/favicon.ico" alt="GitHub"> <a href="https://github.com/Calvein/Simple-uploader">code</a> |
38 <a href="http://twitter.com/Calvein" class="twitter-follow-button" data-show-count="false">Follow @calvein</a>
39 </footer>
7b5717a @Calvein Pointer event > false click
authored
40 <script src="http://platform.twitter.com/widgets.js"></script>
66ea8ee @Calvein Separate files and nicer JavaScript
authored
41 <script src="script.js"></script>
b819e36 @Calvein Tout
authored
42 <script>
66ea8ee @Calvein Separate files and nicer JavaScript
authored
43 var _gaq = _gaq || [];
44 _gaq.push(['_setAccount', 'UA-25537500-1']);
45 _gaq.push(['_trackPageview']);
46
47 (function() {
48 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
49 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
50 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
51 })();
7b5717a @Calvein Pointer event > false click
authored
52 </script>
b819e36 @Calvein Tout
authored
53 </body>
54 </html>
Something went wrong with that request. Please try again.