upload page ui
This commit is contained in:
Daniela Arcese
parent
ced5299a4d
commit
cc0ece20de
@ -1,18 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Firefox Fileshare</title>
|
||||
<script src="upload.js"></script>
|
||||
|
||||
<title>Firefox Fileshare</title>
|
||||
<script src="upload.js"></script>
|
||||
<link rel="stylesheet" href="https://code.cdn.mozilla.net/fonts/fira.css">
|
||||
<link rel="stylesheet" type="text/css" href="main.css" />
|
||||
</head>
|
||||
<body>
|
||||
<body background="resources/background.png">
|
||||
|
||||
<form method="post" action="upload" enctype="multipart/form-data">
|
||||
<input type="file" onchange="onChange(event)" name="fileUploaded" />
|
||||
</form>
|
||||
<div class="main-window">
|
||||
<div class="title">
|
||||
Share your files quickly, privately and securely.
|
||||
</div>
|
||||
<div class="upload-window">
|
||||
<div id="upload-img"><img src='resources/upload.svg'/></div>
|
||||
<div>
|
||||
DRAG & DROP
|
||||
</div>
|
||||
<div class="upload">
|
||||
<div id="browse-text">
|
||||
your file/folder here or
|
||||
</div>
|
||||
<div id="browse">
|
||||
<form method="post" action="upload" enctype="multipart/form-data">
|
||||
<label for="file-upload" class="file-upload">browse.</label>
|
||||
<input id="file-upload" type="file" onchange="onChange(event)" name="fileUploaded" />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul id="uploaded_files">
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
66
public/main.css
Normal file
66
public/main.css
Normal file
@ -0,0 +1,66 @@
|
||||
/*** index.html ***/
|
||||
body {
|
||||
font-family: 'Fira Sans';
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
background-size: cover;
|
||||
}
|
||||
.main-window{
|
||||
border: 1px solid;
|
||||
width: 606px;
|
||||
height: 447px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
background-color: white;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.title{
|
||||
font-size: 14px;
|
||||
width: 50%;
|
||||
margin: 50px auto ;
|
||||
}
|
||||
.upload-window{
|
||||
border: 1px dashed;
|
||||
width: 50%;
|
||||
margin: 0 auto;
|
||||
width: 470px;
|
||||
height: 250px;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
#browse{
|
||||
float: right;
|
||||
color: blue;
|
||||
}
|
||||
#browse-text{
|
||||
float: left;
|
||||
width: 128px;
|
||||
}
|
||||
#upload-img{
|
||||
padding-right: 20px;
|
||||
}
|
||||
.upload-window>div:nth-child(2){
|
||||
font-size: 26px;
|
||||
}
|
||||
.upload{
|
||||
font-size: 12px;
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
.file-upload{
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type="file"] {
|
||||
display: none;
|
||||
}
|
||||
form{
|
||||
width: 45px;
|
||||
float: right;
|
||||
}
|
||||
BIN
public/resources/background.png
Normal file
BIN
public/resources/background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
93
public/resources/upload.svg
Normal file
93
public/resources/upload.svg
Normal file
@ -0,0 +1,93 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="148px" height="113px" viewBox="0 0 148 113" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Group 14</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<filter x="-81.6%" y="-21.2%" width="210.5%" height="180.8%" filterUnits="objectBoundingBox" id="filter-1">
|
||||
<feOffset dx="-10" dy="10" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.126754982 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
|
||||
<feMerge>
|
||||
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
|
||||
<feMergeNode in="SourceGraphic"></feMergeNode>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<filter x="-83.8%" y="-21.6%" width="213.5%" height="182.4%" filterUnits="objectBoundingBox" id="filter-2">
|
||||
<feOffset dx="-10" dy="10" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.126754982 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
|
||||
<feMerge>
|
||||
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
|
||||
<feMergeNode in="SourceGraphic"></feMergeNode>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<filter x="-78.0%" y="-21.6%" width="204.9%" height="182.4%" filterUnits="objectBoundingBox" id="filter-3">
|
||||
<feOffset dx="-10" dy="10" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.126754982 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
|
||||
<feMerge>
|
||||
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
|
||||
<feMergeNode in="SourceGraphic"></feMergeNode>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<filter x="-58.8%" y="-21.7%" width="178.4%" height="189.1%" filterUnits="objectBoundingBox" id="filter-4">
|
||||
<feOffset dx="-10" dy="10" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.13 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
|
||||
<feMerge>
|
||||
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
|
||||
<feMergeNode in="SourceGraphic"></feMergeNode>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="Sidebar" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Group-14" transform="translate(19.000000, 1.000000)">
|
||||
<g id="Group-11" filter="url(#filter-1)" transform="translate(28.573415, 37.189410) rotate(-25.000000) translate(-28.573415, -37.189410) translate(9.573415, 11.189410)">
|
||||
<g id="noun_775738_cc" stroke="#00C8D8" stroke-width="2">
|
||||
<g id="Group-10" transform="translate(0.143028, 0.571288)">
|
||||
<path d="M0,3.11187997 C0,1.44994393 1.33795046,0.102678571 2.99700349,0.102678571 L24.2431693,0.102678571 L36.6460185,10.8658088 L36.6460185,46.9983075 C36.6460185,48.658562 35.2983063,50.0044643 33.647121,50.0044643 L2.9988975,50.0044643 C1.34265214,50.0044643 0,48.6697121 0,46.9952629 L0,3.11187997 Z" id="Rectangle-7" fill="#BFF1F5"></path>
|
||||
<path d="M24.430679,0.631293163 C24.430679,0.0822437139 24.7706307,-0.0632105526 25.1876619,0.304366627 L36.3833191,10.1723775 C36.8013892,10.5408704 36.6879598,10.8395929 36.1429992,10.8395929 L27.4265882,10.8395929 C25.7719932,10.8395929 24.430679,9.48831667 24.430679,7.83754409 L24.430679,0.631293163 Z" id="Rectangle-8" fill="#2FD2DF"></path>
|
||||
</g>
|
||||
</g>
|
||||
<g id="noun_1029125_cc" transform="translate(3.901518, 8.349380)" fill-rule="nonzero" fill="#2FD2DF">
|
||||
<g id="Group">
|
||||
<path d="M24.1801115,8.08668825 C23.3856986,7.07396809 21.8961743,7.07396809 21.1514122,8.08668825 L12.1646161,19.682334 C11.9660128,19.9355141 11.6184572,19.9355141 11.419854,19.73297 L7.89464663,15.8339974 C7.10023371,14.9225493 5.7100111,14.9225493 4.91559818,15.8339974 L0.943533576,20.2393301 C0.546327116,20.6950542 0.347723886,21.2520503 0.347723886,21.8596824 L0.347723886,36.5947607 C0.347723886,37.1517567 0.794581154,37.5568448 1.29108923,37.5568448 L27.8542712,37.5568448 C28.4004301,37.5568448 28.7976366,37.1011207 28.7976366,36.5947607 L28.7976366,14.7706413 C28.7976366,14.2136452 28.5990334,13.7072851 28.3011285,13.3021971 L24.1801115,8.08668825 Z" id="Shape"></path>
|
||||
<ellipse id="Oval" cx="5.51140787" cy="3.98517161" rx="3.17765168" ry="3.2407045"></ellipse>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g id="Group-10" filter="url(#filter-2)" transform="translate(44.984738, 0.000000)">
|
||||
<path d="M0,3.11187997 C0,1.44994393 1.33795046,0.102678571 2.99700349,0.102678571 L24.2431693,0.102678571 L36.6460185,10.8658088 L36.6460185,46.9983075 C36.6460185,48.658562 35.2983063,50.0044643 33.647121,50.0044643 L2.9988975,50.0044643 C1.34265214,50.0044643 0,48.6697121 0,46.9952629 L0,3.11187997 Z" id="Rectangle-7" stroke="#FF5B6D" stroke-width="2" fill="#FFDEE2"></path>
|
||||
<path d="M5.44129888,23.9323409 L30.6937957,23.9323409 C31.424931,23.9323409 32.0211705,23.4883258 32.0211705,22.9438547 C32.0211705,22.3993836 31.424931,21.9553685 30.6937957,21.9553685 L5.44129888,21.9553685 C4.71016356,21.9553685 4.11392405,22.3993836 4.11392405,22.9438547 C4.11392405,23.4883258 4.71016356,23.9323409 5.44129888,23.9323409 Z" id="Shape" fill="#FF9CA7" fill-rule="nonzero"></path>
|
||||
<path d="M5.44129888,17.9049859 L30.6937957,17.9049859 C31.424931,17.9049859 32.0211705,17.4609707 32.0211705,16.9164996 C32.0211705,16.3720286 31.424931,15.9280134 30.6937957,15.9280134 L5.44129888,15.9280134 C4.71016356,15.9280134 4.11392405,16.3720286 4.11392405,16.9164996 C4.11392405,17.4609707 4.71016356,17.9049859 5.44129888,17.9049859 Z" id="Shape" fill="#FF9CA7" fill-rule="nonzero"></path>
|
||||
<path d="M5.44129888,29.959696 L30.6937957,29.959696 C31.424931,29.959696 32.0211705,29.5156809 32.0211705,28.9712098 C32.0211705,28.4267387 31.424931,27.9827235 30.6937957,27.9827235 L5.44129888,27.9827235 C4.71016356,27.9827235 4.11392405,28.4267387 4.11392405,28.9712098 C4.11392405,29.5156809 4.71016356,29.959696 5.44129888,29.959696 Z" id="Shape" fill="#FF9CA7" fill-rule="nonzero"></path>
|
||||
<path d="M5.44129888,35.9870511 L30.6937957,35.9870511 C31.424931,35.9870511 32.0211705,35.5430359 32.0211705,34.9985649 C32.0211705,34.4540938 31.424931,34.0100786 30.6937957,34.0100786 L5.44129888,34.0100786 C4.71016356,34.0100786 4.11392405,34.4540938 4.11392405,34.9985649 C4.11392405,35.5430359 4.71016356,35.9870511 5.44129888,35.9870511 Z" id="Shape" fill="#FF9CA7" fill-rule="nonzero"></path>
|
||||
<path d="M5.44129888,42.0144062 L30.6937957,42.0144062 C31.424931,42.0144062 32.0211705,41.570391 32.0211705,41.0259199 C32.0211705,40.4814489 31.424931,40.0374337 30.6937957,40.0374337 L5.44129888,40.0374337 C4.71016356,40.0374337 4.11392405,40.4814489 4.11392405,41.0259199 C4.11392405,41.5724001 4.71016356,42.0144062 5.44129888,42.0144062 Z" id="Shape" fill="#FF9CA7" fill-rule="nonzero"></path>
|
||||
<path d="M24.430679,0.631293163 C24.430679,0.0822437139 24.7706307,-0.0632105526 25.1876619,0.304366627 L36.3833191,10.1723775 C36.8013892,10.5408704 36.6879598,10.8395929 36.1429992,10.8395929 L27.4265882,10.8395929 C25.7719932,10.8395929 24.430679,9.48831667 24.430679,7.83754409 L24.430679,0.631293163 Z" id="Rectangle-8" stroke="#FF5B6D" stroke-width="2" fill="#FF9CA7"></path>
|
||||
</g>
|
||||
<g id="Group-10" filter="url(#filter-3)" transform="translate(99.755713, 40.795908) rotate(25.000000) translate(-99.755713, -40.795908) translate(79.255713, 15.295908)">
|
||||
<path d="M-2.72848411e-12,3.11187997 C-2.72848411e-12,1.44994393 1.34238993,0.102678571 2.99799713,0.102678571 L37.4077263,0.102678571 L36.6460185,10.8658088 L36.6460185,46.9983075 C36.6460185,48.658562 35.2983063,50.0044643 33.647121,50.0044643 L2.9988975,50.0044643 C1.34265214,50.0044643 -2.72848411e-12,48.6697121 -2.72848411e-12,46.9952629 L-2.72848411e-12,3.11187997 Z" id="Rectangle-7" stroke="#FFBC38" stroke-width="2" fill="#FFEECD"></path>
|
||||
<g id="Group" transform="translate(11.566360, 15.461370)" stroke-linecap="round" stroke="#FFCD6A" stroke-linejoin="round">
|
||||
<g transform="translate(3.291139, 15.607143)" id="Shape" stroke-width="1.5">
|
||||
<path d="M0.507658228,0 L6.07462025,0"></path>
|
||||
<path d="M0.507658228,1.64285714 L6.07462025,1.64285714"></path>
|
||||
<path d="M1.80189873,3.28571429 L4.78037975,3.28571429"></path>
|
||||
</g>
|
||||
<g id="Shape" stroke-width="2">
|
||||
<path d="M12.8823418,6.68478571 C12.8823418,3.197 10.0618354,0.369642857 6.58227848,0.369642857 C3.10272152,0.369642857 0.28221519,3.197 0.28221519,6.68478571 C0.28221519,8.54367857 1.08772152,10.2095357 2.36221519,11.3652857 L3.79879747,13.7646786 L9.36658228,13.7646786 L10.8023418,11.3661071 C12.0768354,10.2095357 12.8823418,8.54367857 12.8823418,6.68478571 Z"></path>
|
||||
<polyline points="5.85164557 13.7991786 4.73759494 9.82264286 8.42696203 9.82264286 7.31291139 13.7991786"></polyline>
|
||||
</g>
|
||||
</g>
|
||||
<path d="M59.4642883,25.2355179 L31.4194394,25.2355179 C30.0529755,25.2355179 29.4086334,24.2834821 28.8404333,23.4439821 C28.2288404,22.5387679 27.6508156,21.6844821 26.2032973,21.6844821 L15.5761548,21.6844821 C14.0655941,21.6844821 12.8366772,23.3429464 12.8366772,25.3809107 L12.8366772,27.8451964 C13.4900254,27.0204821 14.4684103,26.4824464 15.5761548,26.4824464 L59.4642883,26.4824464 C60.5720328,26.4824464 61.5504176,27.0204821 62.2037658,27.8451964 L62.2037658,27.2882679 C62.2029471,25.251125 60.9740302,25.2355179 59.4642883,25.2355179 Z" id="Shape" stroke="#FFBC38" stroke-width="2" fill="#FFCD6A" transform="translate(37.520222, 24.764839) rotate(90.000000) translate(-37.520222, -24.764839) "></path>
|
||||
</g>
|
||||
<g id="Group-12" filter="url(#filter-4)" transform="translate(37.025316, 46.000000)">
|
||||
<path d="M24.196055,2.68359965 C24.8899407,1.8177448 26.0064693,1.82521173 26.6836283,2.69225814 L40.872699,20.8601973 C41.5526621,21.7308341 41.2103747,22.4366247 40.1012607,22.4366247 L31.1853858,22.4366247 L31.1853858,38.5236322 L19.6604889,38.5236322 L19.6604889,22.4366247 L10.3594066,22.4366247 C9.25859767,22.4366247 8.92499102,21.7393653 9.62260704,20.8688558 L24.196055,2.68359965 Z" id="Polygon" fill="#1F7FFF"></path>
|
||||
<g id="noun_47280_cc" fill-rule="nonzero" fill="#165CE4">
|
||||
<path d="M31.2533248,39.1323944 L19.5010415,39.1323944 C19.1136036,39.1323944 18.8553116,38.8732394 18.8553116,38.484507 L18.8553116,23.0647887 L8.45906105,23.0647887 C8.20076911,23.0647887 8.00705015,22.9352113 7.87790418,22.6760563 C7.74875821,22.4816901 7.8133312,22.1577465 7.94247717,21.9633803 L24.8605993,0.777464789 C25.1188912,0.453521127 25.6354751,0.453521127 25.893767,0.777464789 L42.7473161,21.8985915 C42.8764621,22.028169 42.9410351,22.2225352 42.9410351,22.4169014 C42.9410351,22.8056338 42.6827432,23.0647887 42.2953052,23.0647887 L42.2953052,23.0647887 L31.8990546,23.0647887 L31.8990546,38.484507 C31.8990546,38.8732394 31.5761897,39.1323944 31.2533248,39.1323944 Z M20.1467714,37.8366197 L30.543022,37.8366197 L30.543022,22.4169014 C30.543022,22.028169 30.8013139,21.7690141 31.1887518,21.7690141 L40.9392726,21.7690141 L25.3771831,2.26760563 L9.81509373,21.7690141 L19.5656145,21.7690141 C19.9530524,21.7690141 20.2113443,22.028169 20.2113443,22.4169014 L20.2113443,37.8366197 L20.1467714,37.8366197 Z" id="Shape"></path>
|
||||
<path d="M49.9794905,45.8056338 L1.22688672,45.8056338 C0.839448806,45.8056338 0.581156866,45.5464789 0.581156866,45.1577465 L0.581156866,36.8647887 C0.581156866,36.4760563 0.839448806,36.2169014 1.22688672,36.2169014 C1.61432463,36.2169014 1.87261657,36.4760563 1.87261657,36.8647887 L1.87261657,44.5098592 L49.3337606,44.5098592 L49.3337606,36.8647887 C49.3337606,36.4760563 49.5920526,36.2169014 49.9794905,36.2169014 C50.3669284,36.2169014 50.6252203,36.4760563 50.6252203,36.8647887 L50.6252203,45.1577465 C50.6252203,45.4816901 50.3023554,45.8056338 49.9794905,45.8056338 Z" id="Shape"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 13 KiB |
Loading…
Reference in New Issue
Block a user