Skip to content

GitLab

Commit 43688ac4 authored by Jr Prévost's avatar Jr Prévost Committed by Felix Paul Kühne
Browse files

New UI for file upload 



- iOS topbar feel
- CSS buttons
Signed-off-by: Felix Paul Kühne's avatarFelix Paul Kühne <fkuehne@videolan.org>
parent bf39e4d0
Hide whitespace changes
Inline Side-by-side
Resources/web/index.html
View file @ 43688ac4
......@@ -29,22 +29,27 @@
</script>
</head>
<body>
<div class="container">
<header>
<div id="appIcon"></div>
<h1>VLC for iOS</h1>
</header>
<header>
<nav>
<a class="btn linkBtn" href="http://www.videolan.org"><div class="icon"></div></a>
<button class="btn uploadBtn">Upload files</button>
</nav>
</header>
<div class="main">
<div id="progress" style="display: none;">
<div class="bar" style="width: 50%;"></div>
</div>
<form>
<form style="display: none;">
<input id="fileupload" type="file" name="files[]" data-url="upload.json" multiple>
</form>
<div id="uploads" style="display: none;">
<p>So far you have uploaded:</p>
<ul>
</ul>
<ul></ul>
</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 both the <a href="http://opensource.org/licenses/GPL-2.0" target="_blank">GPLv2 (or later)</a> and the <a href="http://opensource.org/licenses/MPL-2.0" target="_blank">MPLv2</a> as well as 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>
......
Resources/web/style.css
View file @ 43688ac4
/* @override http://localhost:8000/style.css */
/* YUI CSS Reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;} table{border-collapse:collapse;border-spacing:0;} fieldset,img{border:0;} address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;} ol,ul{list-style:none;} caption,th{text-align:left;} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} q:before,q:after{content:'';} abbr,acronym{border:0;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,nav,header,footer{margin:0;padding:0;} table{border-collapse:collapse;border-spacing:0;} fieldset,img{border:0;} address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;} ol,ul{list-style:none;} caption,th{text-align:left;} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} q:before,q:after{content:'';} abbr,acronym{border:0;}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
height: 100%;
}
body {
height: 100%;
font: 14px/22px "Helvetica Neue","Helvetica", Arial, sans-serif;
background: #f4f4f4;
background: black;
color: white;
-webkit-font-smoothing: antialiased;
position: relative;
}
div.container {
width: 800px;
margin: 0 auto;
padding: 2em 0;
text-align: justify;
div.main {
background-image: url(padLibBg@2x.png);
border: 2px solid inherit;
position: absolute;
top: 88px;
bottom: 0;
left: 0;
right: 0;
}
#appIcon {
width: 72px;
height: 72px;
background:url(Icon-72@2x.png);
-webkit-background-size: 72px 72px;
background-size: 72px 72px;
margin: 0 auto;
div.main.drop {
border: 2px solid yellow;
}
header {
text-align: center;
height: 88px;
background-color: #c95a07;
background-image: url(navBarBackground@2x.png);
border-top-left-radius: 14px;
border-top-right-radius: 14px;
}
nav {
height: 88px;
padding: 14px;
background-image: url(title@2x.png);
background-repeat: no-repeat;
background-position: center;
}
header h1 {
font-size: 3em;
line-height: 2em;
color: #e08d33;
.btn {
display: inline-block;
background-color: transparent;
border: 2px solid #8c4800;
border-radius: 10px;
background-image: -webkit-gradient(linear, left top, left bottom, from(#d87306), to(#ba6100));
background-image: -webkit-linear-gradient(top, #d87306, #ba6100);
background-image: -moz-linear-gradient(top, #d87306, #ba6100);
background-image: -ms-linear-gradient(top, #d87306, #ba6100);
background-image: -o-linear-gradient(top, #d87306, #ba6100);
background-image: linear-gradient(top, #d87306, #ba6100);
box-shadow: inset 0px 3px 0px -1px #e09d54, 0px 3px 0px -1px rgba(255,255,255,0.1);
color: white;
font-size: 1.3em;
font-weight: bold;
text-align: center;
text-shadow: 2px 2px 0px #783704;
height: 58px;
cursor: pointer;
}
.btn:active{
background-image: -webkit-gradient(linear, left top, left bottom, from(#c36707), to(#a85600));
background-image: -webkit-linear-gradient(top, #c36707, #a85600);
background-image: -moz-linear-gradient(top, #c36707, #a85600);
background-image: -ms-linear-gradient(top, #c36707, #a85600);
background-image: -o-linear-gradient(top, #c36707, #a85600);
background-image: linear-gradient(top, #c36707, #a85600);
box-shadow: inset 0px 3px 0px -1px #d39554, 0px 3px 0px -1px rgba(255,255,255,0.1);
}
.linkBtn {
float: left;
width: 82px;
}
.linkBtn .icon {
height: 60px;
background-image: url(menuCone@2x.png);
background-position: 22px 6px;
background-repeat: no-repeat;
}
.uploadBtn {
width: 200px;
float: right;
}
#progress {
width: 100%;
background-color: red;
......@@ -51,16 +124,23 @@ header h1 {
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: -moz-linear-gradient(top, rgb(234, 171, 103), rgb(214, 112, 0));
background-image: -ms-linear-gradient(top, rgb(234, 171, 103), rgb(214, 112, 0));
background-image: -o-linear-gradient(top, rgb(234, 171, 103), rgb(214, 112, 0));
background-image: linear-gradient(top, rgb(234, 171, 103), rgb(214, 112, 0));
}
form,#uploads {
text-align: center;
margin: 2em;
}
form,#uploads {}
footer p {
font-size: .8em;
text-align: center;
footer {
font-size: .9em;
line-height: 1.3em;
text-align: center;
padding: 100px 0 10px 0;
color: rgb(120, 120, 120);
text-shadow: 1px 1px 2px black;
}
footer a{
color: #c95a07;
}
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