Skip to content

GitLab

Commit b33b765b authored by Damien Erambert's avatar Damien Erambert Committed by Felix Paul Kühne
Browse files

Prettify file uploader pages 


Signed-off-by: Felix Paul Kühne's avatarFelix Paul Kühne <fkuehne@videolan.org>
parent c37f5796
Hide whitespace changes
Inline Side-by-side
Showing with 246 additions and 45 deletions
Resources/web/css/reset.css 0 → 100644
View file @ b33b765b
/*
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 → 100644
View file @ b33b765b
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
View file @ b33b765b
<!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
View file @ b33b765b
<!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>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment