add download page and share link ui
This commit is contained in:
Daniela Arcese
parent
7da6a953b6
commit
a71161bf20
7 changed files with 310 additions and 123 deletions
|
|
@ -1,15 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Download your file</title>
|
||||
<script type="text/javascript" src="/bundle.js"></script>
|
||||
<title>Download your file</title>
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
||||
<script src="/bundle.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>
|
||||
|
||||
<button onclick="download()">DOWNLOAD</button>
|
||||
<div class="main-window">
|
||||
<div id="download">
|
||||
<div class="title">
|
||||
Your friend is sending you a file:
|
||||
</div>
|
||||
<div class="share-window">
|
||||
<button id="download-btn" onclick="download()">Download File</button>
|
||||
<img id="expired-img" src="/resources/link_expired.png"/>
|
||||
</div>
|
||||
<div class="send-new">
|
||||
Send your own files
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul id="downloaded_files">
|
||||
</ul>
|
||||
<!-- <ul id="downloaded_files">
|
||||
</ul> -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -2,9 +2,10 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Firefox Fileshare</title>
|
||||
<script src="bundle.js"></script>
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
||||
<script src="/bundle.js"></script>
|
||||
<link rel="stylesheet" href="https://code.cdn.mozilla.net/fonts/fira.css">
|
||||
<link rel="stylesheet" type="text/css" href="main.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/main.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
@ -14,7 +15,7 @@
|
|||
Share your files quickly, privately and securely.
|
||||
</div>
|
||||
<div class="upload-window">
|
||||
<div id="upload-img"><img src="resources/upload.svg"/></div>
|
||||
<div id="upload-img"><img src="/resources/upload.svg"/></div>
|
||||
<div>
|
||||
DRAG & DROP
|
||||
</div>
|
||||
|
|
@ -24,7 +25,7 @@
|
|||
</div>
|
||||
<div id="browse">
|
||||
<form method="post" action="upload" enctype="multipart/form-data">
|
||||
<label for="file-upload" class="file-upload">browse.</label>
|
||||
<label for="file-upload" class="file-upload">browse</label>
|
||||
<input id="file-upload" type="file" onchange="onChange(event)" name="fileUploaded" />
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -37,12 +38,47 @@
|
|||
<tr>
|
||||
<th width=30%>File</th>
|
||||
<th width=45%>Copy URL</th>
|
||||
<th width=20%>Expires in</th>
|
||||
<th width=5%>Delete</th>
|
||||
<th width=18%>Expires in</th>
|
||||
<th width=7%>Delete</th>
|
||||
</tr>
|
||||
<div data-role="popup" id="popupArrow" data-arrow="true">
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div id="upload-progress">
|
||||
<div class="title" id="upload-filename">
|
||||
Uploading
|
||||
</div>
|
||||
<div class="upload-window">
|
||||
<div id="upload-img"><img src="/resources/upload.svg"/></div>
|
||||
<div class="upload">
|
||||
<!-- progress bar here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="share-link">
|
||||
<div class="title">
|
||||
Copy the link below to share your file!
|
||||
</div>
|
||||
<div class="share-window">
|
||||
<img src="/resources/share.png"/>
|
||||
<div id="share-window-r">
|
||||
<div id="copy">
|
||||
<input id="link" type="url" value="" readonly/>
|
||||
<button id="copy-btn">Copy</button>
|
||||
</div>
|
||||
<div>
|
||||
This link expires after one download
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="send-new">
|
||||
Send another file
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
127
public/main.css
127
public/main.css
|
|
@ -1,32 +1,35 @@
|
|||
/*** index.html ***/
|
||||
|
||||
/** page-one **/
|
||||
body {
|
||||
html {
|
||||
background: url('resources/background.png');
|
||||
font-family: 'Fira Sans';
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
background-size: cover;
|
||||
background-size: contain;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
input, select, textarea, button {
|
||||
font-family:inherit;
|
||||
}
|
||||
|
||||
/** page-one **/
|
||||
.main-window {
|
||||
border: 1px solid;
|
||||
width: 606px;
|
||||
height: 447px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
min-height: 447px;
|
||||
background-color: white;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 14px;
|
||||
width: 50%;
|
||||
margin: 50px auto ;
|
||||
width: 80%;
|
||||
margin: 50px auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.upload-window {
|
||||
|
|
@ -44,7 +47,7 @@ body {
|
|||
|
||||
#browse {
|
||||
float: right;
|
||||
color: blue;
|
||||
color: #2D7EFF;
|
||||
}
|
||||
|
||||
#browse-text {
|
||||
|
|
@ -96,12 +99,6 @@ td {
|
|||
width: 472px;
|
||||
margin: 10px auto ;
|
||||
table-layout: fixed;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
#file-list {
|
||||
overflow-y: scroll;
|
||||
height: 90px;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
|
|
@ -110,3 +107,93 @@ td {
|
|||
background: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/** upload-progress **/
|
||||
|
||||
|
||||
/** share-link **/
|
||||
.share-window {
|
||||
width: 50%;
|
||||
margin: 0 auto;
|
||||
width: 470px;
|
||||
height: 250px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#share-window-r {
|
||||
width: 50%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#share-window-r>div {
|
||||
font-size: 12px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
#copy {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
#link {
|
||||
width: 216px;
|
||||
height: 41px;
|
||||
border: 1px solid #979797;
|
||||
}
|
||||
|
||||
#copy-btn {
|
||||
width: 60px;
|
||||
height: 45px;
|
||||
background: #337FEB;
|
||||
border: 1px solid #979797;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#copy-btn:disabled {
|
||||
background: #47B04B;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.send-new {
|
||||
font-size: 14px;
|
||||
margin: auto;
|
||||
width: 80%;
|
||||
text-align: center;
|
||||
color: #2D7EFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/** download.html **/
|
||||
#download-btn {
|
||||
font-size: 18px;
|
||||
color: white;
|
||||
width: 214px;
|
||||
height: 87px;
|
||||
margin: 50px auto;
|
||||
text-align: center;
|
||||
background: #337FEB;
|
||||
border: 1px solid #3EA050;
|
||||
border-radius: 6px;
|
||||
font-weight: 300;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#download-btn:disabled {
|
||||
background: #47B04B;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
#download {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#expired-img {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
BIN
public/resources/link_expired.png
Normal file
BIN
public/resources/link_expired.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
public/resources/share.png
Normal file
BIN
public/resources/share.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Loading…
Add table
Add a link
Reference in a new issue