Prettify file uploader pages

Signed-off-by: Felix Paul Kühne <fkuehne@videolan.org>

Resources/web/css/reset.css

@@ -0,0 +1,86 @@
+/*
+html5doctor.com Reset Stylesheet v1.6.1
+Last Updated: 2010-09-17
+Author: Richard Clark - http://richclarkdesign.com
+*/
+html, body, div, span, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+abbr, address, cite, code,
+del, dfn, em, img, ins, kbd, q, samp,
+small, strong, sub, sup, var,
+b, i,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section, summary,
+time, mark, audio, video {
+    margin:0;
+    padding:0;
+    border:0;
+    outline:0;
+    font-size:100%;
+    vertical-align:baseline;
+    background:transparent;
+}
+body {
+    line-height:1;
+}
+article,aside,details,figcaption,figure,
+footer,header,hgroup,menu,nav,section {
+    display:block;
+}
+nav ul {
+    list-style:none;
+}
+blockquote, q {
+    quotes:none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+    content:'';
+    content:none;
+}
+a {
+    margin:0;
+    padding:0;
+    font-size:100%;
+    vertical-align:baseline;
+    background:transparent;
+}
+/* change colours to suit your needs */
+ins {
+    background-color:#ff9;
+    color:#000;
+    text-decoration:none;
+}
+/* change colours to suit your needs */
+mark {
+    background-color:#ff9;
+    color:#000;
+    font-style:italic;
+    font-weight:bold;
+}
+del {
+    text-decoration: line-through;
+}
+abbr[title], dfn[title] {
+    border-bottom:1px dotted;
+    cursor:help;
+}
+table {
+    border-collapse:collapse;
+    border-spacing:0;
+}
+/* change border colour to suit your needs */
+hr {
+    display:block;
+    height:1px;
+    border:0;
+    border-top:1px solid #cccccc;
+    margin:1em 0;
+    padding:0;
+}
+input, select {
+    vertical-align:middle;
+}

Resources/web/css/style.css

@@ -0,0 +1,109 @@
+body {
+	font: 14px/22px "Helvetica Neue","Helvetica", Arial, sans-serif;
+	background: #f4f4f4;
+	-webkit-font-smoothing: antialiased;
+}
+
+div.container {
+	width: 800px;
+	margin: 0 auto;
+	padding: 2em 0;
+	text-align: justify;
+}
+
+#appIcon {
+	width: 72px;
+	height: 72px;
+	background:url(Icon-72@2x.png);
+	-webkit-background-size: 72px 72px;
+	background-size: 72px 72px;
+	margin: 0 auto;
+}
+
+header {
+	text-align: center;
+}
+
+header h1 {
+	font-size: 3em;
+	line-height: 2em;
+	color: #e08d33;
+	background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(234, 171, 103)), to(rgb(214, 112, 0)));
+	background-image: -webkit-linear-gradient(top, rgb(234, 171, 103), rgb(214, 112, 0));
+	background-image: linear-gradient(top, rgb(234, 171, 103), rgb(214, 112, 0));
+	-webkit-background-clip: text;
+	-webkit-text-fill-color:transparent;
+	font-weight: normal;
+}
+
+form {
+	text-align: center;
+	margin: 2em;
+}
+
+footer p {
+	font-size: .8em;
+	text-align: center;
+	line-height: 1.3em;
+}
+
+div.container > div {
+	text-align: center;
+}
+
+div.container > div > span {
+	display: inline-block;
+	width: 100%;
+	font-size: 1.5em;
+	margin: 2em 0;
+	color: #008f00;
+}
+
+a#uploadMore {
+	color:white;
+	background-color: #c96800;
+	background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(216, 112, 0)), to(rgb(186, 97, 0)));
+	background-image: -webkit-linear-gradient(top, rgb(216, 112, 0), rgb(186, 97, 0));
+	background-image: -moz-linear-gradient(top, rgb(216, 112, 0), rgb(186, 97, 0));
+	background-image: -o-linear-gradient(top, rgb(216, 112, 0), rgb(186, 97, 0));
+	background-image: -ms-linear-gradient(top, rgb(216, 112, 0), rgb(186, 97, 0));
+	background-image: linear-gradient(top, rgb(216, 112, 0), rgb(186, 97, 0));
+	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#d87000', EndColorStr='#ba6100');
+	-webkit-box-shadow: inset 0 0 0 1px #8c4800, inset 0 2px 0 rgba(255,255,255,.32);
+	-moz-box-shadow: inset 0 0 0 1px #8c4800, inset 0 2px 0 rgba(255,255,255,.32);
+	box-shadow: inset 0 0 0 1px #8c4800, inset 0 2px 0 rgba(255,255,255,.32);
+	text-decoration: none;
+	padding: 10px 20px;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+	display: inline-block;
+	margin: 1em;
+	-webkit-border-radius: 8px;
+	-moz-border-radius: 8px;
+	border-radius: 8px;
+	font-size: 1.2em;
+	text-shadow: 0 -1px 0 black;
+}
+
+a#uploadMore:hover {
+	background-color: #cc7314;
+	background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(219, 123, 20)), to(rgb(190, 108, 20)));
+	background-image: -webkit-linear-gradient(top, rgb(219, 123, 20), rgb(190, 108, 20));
+	background-image: -moz-linear-gradient(top, rgb(219, 123, 20), rgb(190, 108, 20));
+	background-image: -o-linear-gradient(top, rgb(219, 123, 20), rgb(190, 108, 20));
+	background-image: -ms-linear-gradient(top, rgb(219, 123, 20), rgb(190, 108, 20));
+	background-image: linear-gradient(top, rgb(219, 123, 20), rgb(190, 108, 20));
+	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#db7b14', EndColorStr='#be6c14');
+}
+
+a#uploadMore:active {
+	background-color: #b96000;
+	background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(199, 103, 0)), to(rgb(171, 89, 0)));
+	background-image: -webkit-linear-gradient(top, rgb(199, 103, 0), rgb(171, 89, 0));
+	background-image: -moz-linear-gradient(top, rgb(199, 103, 0), rgb(171, 89, 0));
+	background-image: -o-linear-gradient(top, rgb(199, 103, 0), rgb(171, 89, 0));
+	background-image: -ms-linear-gradient(top, rgb(199, 103, 0), rgb(171, 89, 0));
+	background-image: linear-gradient(top, rgb(199, 103, 0), rgb(171, 89, 0));
+	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#c76700', EndColorStr='#ab5900');
+}

Resources/web/index.html

@@ -1,27 +1,29 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-<html>
-	<head>
-		<meta http-equiv=\"content-type\" content=\"text/html; charset=UTF-8\">
-        <style type="text/css">
-            h1, h6 { text-align: center}
-            form { text-align: center}
-            A:link {text-decoration: underline; color: #aaaaaa}
-            A:visited {text-decoration: none; color: #aaaaaa}
-            A:active {text-decoration: none; color: #aaaaaa}
-        </style>
-        <title>VLC for iOS File Uploader</title>
-    </head>
-	<body bgcolor=#000000>
-        <div style="text-align:center; background-color:#000000; border:solid black 1px; padding:0.5em 1em 0.5em 1em; overflow:auto; font-size:10pt; font-family:Helvetica; color:#aaaaaa"; A:link {text-decoration: underline; color:#aaaaaa}>
-        <img src="Icon-72.png">
-        <h1>VLC for iOS</h1>
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>VLC for iOS File Uploader</title>
+	<link rel="stylesheet" href="reset.css">
+	<link rel="stylesheet" href="style.css">
+</head>
+<body>
+	<div class="container">
+		<header>
+		<div id="appIcon"></div>
+		<h1>VLC for iOS</h1>
+		</header>
+
 		<form action="upload.html" method="post" enctype="multipart/form-data" accept-charset="utf-8">
 			<input type="file" name="upload1"><br/>
             <br />
 			<input type="submit" value="Submit">
         </form>
-		</p>
-        <h6>VLC for iOS is free, open-source software published by <a href="http://www.videolan.org" target="_blank">VideoLAN</a>. Modification and redistribution is subject to $LICENSE and further rights reserved by the VideoLAN association.<br />You can find the sources to this application <a href="http://git.videolan.org/?p=vlc-ports/ios2.git;a=summary" target="_blank">online</a> and more information about licensing in the About dialog included within the app.</h6>
-        </div>
-	</body>
+
+        <footer>
+            <p>
+                VLC for iOS is free, open-source software published by <a href="http://www.videolan.org" target="_blank">VideoLAN</a>. <br />Modification and redistribution is subject to $LICENSE and further rights reserved by the VideoLAN association.<br />You can find the sources to this application <a href="http://git.videolan.org/?p=vlc-ports/ios2.git;a=summary" target="_blank">online</a> and more information about licensing in the About dialog included within the app.
+            </p>
+        </footer>
+	</div>
+</body>
 </html>

Resources/web/upload.html

@@ -1,25 +1,29 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-<html>
-	<head>
-		<meta http-equiv=\"content-type\" content=\"text/html; charset=UTF-8\">
-        <style type="text/css">
-            h1, h6 { text-align: center}
-            p { text-align: center}
-            a:link {text-decoration: underline; color: #aaaaaa}
-            a:visited {text-decoration: none; color: #aaaaaa}
-            a:active {text-decoration: none; color: #aaaaaa}
-        </style>
-        <title>VLC for iOS File Uploader</title>
-    </head>
-	<body bgcolor=#000000>
-    <div style="text-align:center; background-color:#000000; border:solid black 1px; padding:0.5em 1em 0.5em 1em; overflow:auto; font-size:10pt; font-family:Helvetica; color:#aaaaaa"; A:link {text-decoration: underline; color:#aaaaaa}>
-    <img src="Icon-72.png">
-	<h1>VLC for iOS</h1>
-    %MyFiles%
-    <br />
-    <p><a href="index.html">Upload more files</a></p>
-    <h6>VLC for iOS is free, open-source software published by <a href="http://www.videolan.org" target="_blank">VideoLAN</a>. Modification and redistribution is subject to $LICENSE and further rights reserved by the VideoLAN association.<br />You can find the sources to this application <a href="http://git.videolan.org/?p=vlc-ports/ios2.git;a=summary" target="_blank">online</a> and more information about licensing in the About dialog included within the app.</h6>
-    </div>
-    </div>
-	</body>
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>VLC for iOS File Uploader</title>
+	<link rel="stylesheet" href="reset.css">
+	<link rel="stylesheet" href="style.css">
+</head>
+<body>
+	<div class="container">
+		<header>
+		<div id="appIcon"></div>
+		<h1>VLC for iOS</h1>
+		</header>
+
+		<div>
+			<span id="uploadCompleted">Upload completed!</span>
+
+			<a href="index.html" id="uploadMore">Upload more Files</a>
+		</div>
+
+        <footer>
+            <p>
+            VLC for iOS is free, open-source software published by <a href="http://www.videolan.org" target="_blank">VideoLAN</a>. <br />Modification and redistribution is subject to $LICENSE and further rights reserved by the VideoLAN association.<br />You can find the sources to this application <a href="http://git.videolan.org/?p=vlc-ports/ios2.git;a=summary" target="_blank">online</a> and more information about licensing in the About dialog included within the app.
+            </p>
+        </footer>
+	</div>
+</body>
 </html>