[vlc-devel] [PATCH] updated wifi uploader ios >65KB
Konrad
mail at chernowii.com
Tue Oct 22 18:16:22 CEST 2013
<--------------START OF STYLE.CSS----------------------------->
/* @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,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;}
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
src: local('Raleway'), url(http://themes.googleusercontent.com/static/fonts/raleway/v6/cIFypx4yrWPDz3zOxk7hIQLUuEpTyoUstqEm5AMlJo4.woff) format('woff');
}
* {
-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: background: #bfe8f9; /* Old browsers */
background: -moz-linear-gradient(top, #bfe8f9 27%, #e4f5fc 69%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(27%,#bfe8f9), color-stop(69%,#e4f5fc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #bfe8f9 27%,#e4f5fc 69%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #bfe8f9 27%,#e4f5fc 69%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #bfe8f9 27%,#e4f5fc 69%); /* IE10+ */
background: linear-gradient(to bottom, #bfe8f9 27%,#e4f5fc 69%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfe8f9', endColorstr='#e4f5fc',GradientType=0 ); /* IE6-9 */
;
color: white;
-webkit-font-smoothing: antialiased;
position: relative;
background-color: rgb(31,31,31);
background-position: 0 88px;
}
div.main {
border: 2px solid transparent;
position: absolute;
top: 88px;
bottom: 0;
left: 0;
right: 0;
}
div.main.drop {
border: 2px solid yellow;
}
#header {
text-align: center;
height: 88px;
background-color: #8c4800;
border-top-left-radius: px;
border-top-right-radius: 0px;
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 2px 0px 0px #8a4413;
}
.nav {
height: 88px;
padding: 14px;
}
.nav:before {
content: "VLC for iOS File Uploader";
font-family: "Raleway", "Helvetica Neue";
font-size: 46px;
line-height: 60px;
text-shadow: 0px -2px 1px rgba(0,0,0,0.3);
}
.btn {
display: inline-block;
background-color: transparent;
border: 17px solid ##FFFFFF;
border-radius: 0px;
background-image: -webkit-gradient(linear, left top, left bottom, from(#d87306), to(#ba6100));
background-image: -webkit-linear-gradient(top, #d87306, #d87306);
background-image: -moz-linear-gradient(top, #d87306, #d87306);
background-image: -ms-linear-gradient(top, #d87306, #d87306);
background-image: -o-linear-gradient(top, #d87306, #d87306);
background-image: linear-gradient(top, #d87306, #d87306);
box-shadow: inset 0px 0px 0px 0px #e09d54, 0px 3px 0px 0px rgba(255,255,255,0.1);
color: white;
font-size: 1.3em;
font-weight: bold;
line-height: 52px;
text-align: center;
text-shadow: 2px 2px 0px #783704;
padding: 0 12px;
height: 58px;
min-width: 140px;
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('data:image/png;base64,iVBORw0KGgoAAAAN\
SUhEUgAAACYAAAAqCAYAAADf/ynVAAAEMElEQVRYw82YbUhTURjHLbPUMkojQ\
7Awh4rh28ygQCR6ISg/hIj4gkQmFvjNUszYFyXKan5JIqQMihTRRCkzzWmGgS\
0T8q10rmEiNjXNmpJTb/9Hzmxd3bzb1c0H/nC455zn/u55ec5zrgPHcQ5iBHO\
HAiApFMrK7qL9ioTaxIDCeaJnjvYEc6+rq7s6OTnZNT8//2d2dlZH5fr6+hyx\
oyYKLCkpSQogPcczepaQkBBqFzDYhsbGxhzOhCkUimxqYw+w7cPDw/WmwIaGh\
l6hjZvNwaRSqQRT9ssUGOom/P39fWwOVl1dncatYOXl5edtCgZzwVQ9RjkBio\
WuQTegW5AMSoQuDQ4OPkJbZ1uC7dHr9V9QdjHTbufMzIyK2toMrLCwMBox68V\
K7dDmTUFBwWmbgFG07+3tLUD5ooD2GT09PXLqYwswj+npaSXK3gLa+01NTSmp\
z5qDpaWlHdTpdN0UxwR8xA6AqVNTUyPWFIwieXNzswzT85Ad1iGQBNoLeTF5Q\
76sLryvr+8J9bH0FLAUzA3R/jVG4WtZWVm6q6trxDKZxYKorqqqKgM7cwR9Go\
SMsNVgQUFB+7HTfhsCKELGj5GRkbdqtbqsu7v7QWdnZ1F/f3+JVqtVoG7M0I7\
6UN81A6uoqEjhrDT0vbAmYBTBVSrVU2vBqK8lp4AlYJ4IEwPWgqHvN/Kx6mBy\
ufwUJ9KYj9UDo/y9q6srXywYNki+0LuA4NweIeIdyjUiuF6RD6F3AUFg8fHxw\
XNzc5RN0NdmQeMWAE1B16kvQsgn3BNCrAaj4YZ20WKlaN7U1HQFYLeN2m\yFz\
kJ3oOfQB+gzbT6oHaKU+y50DlocIfi4ibtAJjshPNk7HC0B8zOO4qOjo5V4Hi\
X2EgsdQ0Cu4p0SfoLAYFsiIyOjWlpa8tra2uRY9PdxrGjYNIoFc8Yp8J18km9\
6B70L79wsB\MxzfHy8zXiRYMRq8XzjKvxOcJqYmGg19j02NvYez3evCJabm3u\
cv3o7Ojrusel1EgHlAh2gc5XvXyaTHTULRplme3u7nN8R+Zc6ICDgCOrDWFrj\
JiSNoVGmrALyof8ZcXFxJ+ng5/tXKpVL4tuSeIWh/rjcnqchj42NPcH7cRLIc\
q99DNiblX1Z3eIPl7y8vDjEMY0J3638+PYfWHJychguqnOmAhK2uw6HcUlxcX\
Gqh4fHIVO5mEESieRwaWlpOq56NfA7a+ZyrI+JiQleFoymBvEqW2jUhLMZTHE\
fcq/GgYGBSsoeSBqN5hkSQwXqVOZg+NbQ0JBlvDyMwbbhy2o5Oxne/ZIYloB5\
eXl5I8b8tBcYvZsYloBhLSRydjbG8A+MtipSkiJ7gxGDIWws/uvCL8pOe4MRg\
+E2tQCWkpIiMRcmbGXEQCyLYDjxz3DrxMASbbz4M7n1Y5eNwQIh7TqA0jIWh7\
9sCR/uX\PB8PQAAAABJRU5ErkJggg==');
background-position: 36px 6px;
background-repeat: no-repeat;
}
.uploadBtn {
float: right;
position: relative;
overflow: hidden;
}
#fileupload {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
font-size: 1000px !important;
cursor: pointer;
}
.message {
margin: 100px 0px;
}
.message h1 {
font-size: 30px;
font-weight: bold;
text-align: center;
text-shadow: 1px 1px 2px black;
line-height: 60px;
}
.message p {
text-align: center;
text-shadow: 1px 1px 2px black;
}
.uploads li {
height: 80px;
padding: 0 20px;
position: relative;
}
.uploads li:nth-child(2n) {
background-color: rgba(0,0,0,0.2);
}
.uploads .filename {
font-size: 20px;
line-height: 50px;
text-align: left;
}
.uploads .progress {
height: 14px;
background-color: rgb(40,40,40);
border-radius: 20px;
position: relative;
overflow: hidden;
box-shadow: inset 0px -3px 10px 0px rgba(255,255,255,0.1);
}
.uploads .progress .bar {
background-color: #c95a07;
position: absolute;
top:0;
left:0;
bottom:0;
border-radius: 20px;
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);
}
.uploads li.fail .progress .bar {
background-image: none;
background-color: transparent;
box-shadow: none;
}
.uploads .progress .dots {
padding: 0 8px;
line-height: 0px;
font-size: 20px;
font-weight: bold;
float: left;
color: #c95a07;
}
.uploads .progress .dots:before {
content: "uploading ";
color: white;
line-height: 12px;
font-size: 12px;
}
.uploads li.fail .progress:before,
.uploads li.done .progress .bar:before {
line-height: 12px;
font-size: 12px;
font-weight: bold;
padding: 0 12px;
float: right;
}
.uploads li.fail .progress:before {
content: "File transfer failed";
color: #c95a07;
}
.uploads li.done .progress .bar:before {
content: "File transfer complete";
color: white;
}
.uploads li:hover .stop {
display: block;
}
.uploads li.done:hover .stop,
.uploads li.fail:hover .stop {
display: none;
}
.uploads .stop {
border: 3px solid white;
width: 26px;
height: 26px;
border-radius: 50%;
background-color: #bd1421;
position: absolute;
top: 8px;
right: 8px;
box-shadow: inset 3px 10px 4px -4px rgba(255,255,255,0.3);
cursor: pointer;
display: none;
}
.uploads .stop:before {
content: "-";
font-size: 46px;
line-height: 12px;
text-align: center;
width: 100%;
padding: 1px;
}
#footer {
font-size: .9em;
line-height: 1.3em;
margin-top: 40px;
padding-bottom: 8px;
text-align: center;
color: rgb(120, 120, 120);
text-shadow: 1px 1px 2px black;
}
#footer a{
color: #c95a07;
}
<---------------------------------------END OF STYLE.CSS----------------------------->
<----------------------------START OF INDEX.HTML----------------------------------->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VLC for iOS file uploader</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery.iframe-transport.js"></script>
<script type="text/javascript" src="jquery.fileupload.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div id="header">
<div class="nav">
<a class="btn linkBtn" href="http://www.videolan.org" target="_blank"><div class="icon"></div></a>
<div class="btn uploadBtn">
<input id="fileupload" type="file" name="files[]" data-url="upload.json" multiple>
Upload files
</div>
</div>
</div>
<div class="main">
<div class="uploads">
<ul></ul>
</div>
<div class="message">
<h1>Drop files</h1>
<p>
Drop files in the window to add them to your iOS device. <br>
Or click on the "Upload files" button to use the file dialog window.
</p>
</div>
<div id="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/ios.git;a=summary" target="_blank">online</a> and more information about licensing in the About dialog included within the app.</p>
<p> This is designed by <a href="http://chernowii.com" target="_blank">Konrad Iturbe</a>
</div>
</div>
</body>
</html>
<----------------------------END OF INDEX.HTML---------------------------------->
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mailman.videolan.org/pipermail/vlc-devel/attachments/20131022/e7be4698/attachment.html>
More information about the vlc-devel
mailing list