revamp upload process
This commit is contained in:
@@ -32,69 +32,62 @@
|
||||
<div id="file_viewer_list_title"></div>
|
||||
<div id="file_viewer_file_title">{{.Title}}</div>
|
||||
</div>
|
||||
<div id="list_navigator_buttons" class="button_group list_navigator_buttons"></div>
|
||||
<button id="button_close_file_viewer" class="button_close_file_viewer button_red" onClick="window.close();">🞫</button>
|
||||
<button id="button_close_file_viewer" class="button_close_file_viewer button_red" onClick="window.close();">{{template `close.svg`}}</button>
|
||||
</div>
|
||||
<div id="list_navigator" class="list_navigator"></div>
|
||||
<div id="file_viewer_window" class="file_viewer_window">
|
||||
<div id="toolbar" class="file_viewer_toolbar">
|
||||
<!-- Ugly workaround to get rid of the scrollbar in non-webkit browsers -->
|
||||
<div>
|
||||
<div>
|
||||
<div id="stat_views_label" class="toolbar_label">Views</div>
|
||||
<div id="stat_views" style="text-align: center;">N/A</div>
|
||||
<div id="stat_downloads_label" class="toolbar_label">Downloads</div>
|
||||
<div id="stat_downloads" style="text-align: center;">N/A</div>
|
||||
<div id="toolbar" class="file_viewer_toolbar"><div><div>
|
||||
<div id="stat_views_label" class="toolbar_label">Views</div>
|
||||
<div id="stat_views" style="text-align: center;">N/A</div>
|
||||
<div id="stat_downloads_label" class="toolbar_label">Downloads</div>
|
||||
<div id="stat_downloads" style="text-align: center;">N/A</div>
|
||||
|
||||
<button id="btnDownload" class="toolbar_button button_full_width" onClick="Toolbar.download();">
|
||||
<img src="{{template `floppy_small.png`}}" alt="Download this file"/>
|
||||
<span>Download</span>
|
||||
</button>
|
||||
<button id="btnCopy" class="toolbar_button button_full_width" onClick="Toolbar.copyUrl();">
|
||||
<img src="{{template `clipboard_small.png`}}" alt="Copy file URL to clipboard"/>
|
||||
<span><u>C</u>opy Link</span>
|
||||
</button>
|
||||
<button id="btnShare" class="toolbar_button button_full_width" onClick="Sharebar.toggle();">
|
||||
<img src="{{template `share_small.png`}}" alt="Share this file on social media"/>
|
||||
<span>Share</span>
|
||||
</button>
|
||||
<button id="btnDetails" class="toolbar_button button_full_width" onClick="DetailsWindow.toggle();">
|
||||
<img src="{{template `info_small.png`}}" alt="Help"/>
|
||||
<span>Deta<u>i</u>ls</span>
|
||||
</button>
|
||||
{{template "advertisement" .}}
|
||||
<button id="btnDownload" class="toolbar_button button_full_width" onClick="Toolbar.download();">
|
||||
{{template `save.svg` .}}
|
||||
<span>Download</span>
|
||||
</button>
|
||||
<button id="btnDownloadList" class="toolbar_button button_full_width" style="display: none" onClick="Toolbar.downloadList()">
|
||||
{{template `save.svg` .}}
|
||||
<span>DL all files</span>
|
||||
</button>
|
||||
<button id="btnCopy" class="toolbar_button button_full_width" onClick="Toolbar.copyUrl();">
|
||||
{{template `copy.svg` .}}
|
||||
<span><u>C</u>opy Link</span>
|
||||
</button>
|
||||
<button id="btnShare" class="toolbar_button button_full_width" onClick="Sharebar.toggle();">
|
||||
{{template `share.svg` .}}
|
||||
<span>Share</span>
|
||||
</button>
|
||||
<button id="btnShuffle" class="toolbar_button button_full_width" style="display: none" onClick="ListNavigator.toggleShuffle();">
|
||||
{{template `shuffle.svg` .}}
|
||||
<span>Shuffle ☐</span>
|
||||
</button>
|
||||
<button id="btnDetails" class="toolbar_button button_full_width" onClick="DetailsWindow.toggle();">
|
||||
{{template `help.svg` .}}
|
||||
<span>Deta<u>i</u>ls</span>
|
||||
</button>
|
||||
{{template "advertisement" .}}
|
||||
|
||||
<!-- This frame will load the download URL when a download button is pressed -->
|
||||
<iframe id="download_frame" style="display: none; width: 1px; height: 1px;"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- This frame will load the download URL when a download button is pressed -->
|
||||
<iframe id="download_frame" style="display: none; width: 1px; height: 1px;"></iframe>
|
||||
</div></div></div>
|
||||
|
||||
<div id="sharebar" class="file_viewer_sharebar">
|
||||
Share on:<br/>
|
||||
<button class="sharebar-button button_full_width" onClick="window.open('mailto:please@set.address?subject=File%20on%20PixelDrain&body=' + window.location.href);">
|
||||
<img src="{{template `social_email.png`}}" alt="Share on E-Mail" style="width:40px; height: 40px;"/>
|
||||
<br/>E-Mail
|
||||
<button class="sharebar-button button_full_width" onclick="window.open('mailto:please@set.address?subject=File%20on%20PixelDrain&body=' + window.location.href);">
|
||||
{{template `email.svg` .}}<br/>E-Mail
|
||||
</button>
|
||||
<button class="sharebar-button button_full_width" onclick="window.open('https://www.reddit.com/submit?url=' + window.location.href);">
|
||||
<img src="{{template `social_reddit.png`}}" alt="Share on Reddit" style="width:40px; height: 40px;"/>
|
||||
<br/>Reddit
|
||||
{{template `reddit.svg` .}}<br/>Reddit
|
||||
</button>
|
||||
<button class="sharebar-button button_full_width" onClick="window.open('https://twitter.com/share?url=' + window.location.href);">
|
||||
<img src="{{template `social_twitter.png`}}" alt="Share on Twitter" style="width:40px; height: 40px;"/>
|
||||
<br/>Twitter
|
||||
<button class="sharebar-button button_full_width" onclick="window.open('https://twitter.com/share?url=' + window.location.href);">
|
||||
{{template `twitter.svg` .}}<br/>Twitter
|
||||
</button>
|
||||
<button class="sharebar-button button_full_width" onClick="window.open('http://www.facebook.com/sharer.php?u=' + window.location.href);">
|
||||
<img src="{{template `social_facebook.png`}}" alt="Share on Facebook" style="width:40px; height: 40px;"/>
|
||||
<br/>Facebook
|
||||
<button class="sharebar-button button_full_width" onclick="window.open('http://www.facebook.com/sharer.php?u=' + window.location.href);">
|
||||
{{template `facebook.svg` .}}<br/>Facebook
|
||||
</button>
|
||||
<button class="sharebar-button button_full_width" onClick="window.open('http://www.tumblr.com/share/link?url=' + window.location.href);">
|
||||
<img src="{{template `social_tumblr.png`}}" alt="Share on Tumblr" style="width:40px; height: 40px;"/>
|
||||
<br/>Tumblr
|
||||
</button>
|
||||
<button class="sharebar-button button_full_width" onClick="window.open('https://voat.co/submit?linkpost=true&url=' + window.location.href);">
|
||||
<img src="{{template `social_voat.png`}}" alt="Share on Voat" style="width:40px; height: 40px;"/>
|
||||
<br/>Voat
|
||||
<button class="sharebar-button button_full_width" onclick="window.open('http://www.tumblr.com/share/link?url=' + window.location.href);">
|
||||
{{template `tumblr.svg` .}}<br/>Tumblr
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -4,6 +4,44 @@
|
||||
<head>
|
||||
{{template "meta_tags" "Free file sharing service"}}
|
||||
{{template "user_style" .}}
|
||||
<style>
|
||||
.instruction_highlight {
|
||||
border-top: 1px solid var(--layer_2_color_border);
|
||||
border-bottom: 1px solid var(--layer_2_color_border);
|
||||
box-sizing: border-box;
|
||||
margin: 10px 0;
|
||||
padding: 5px;
|
||||
}
|
||||
.big_number {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
background-color: var(--highlight_color);
|
||||
color: var(--highlight_text_color);
|
||||
border-radius: 30px;
|
||||
padding: 5px;
|
||||
margin-right: 10px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
float: left;
|
||||
}
|
||||
.instruction_text {
|
||||
margin: 5px;
|
||||
font-size: 24px;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.social_button {
|
||||
margin: 5px;
|
||||
}
|
||||
.social_button > img, .social_button > svg {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 5px 15px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
{{template "page_top" .}}
|
||||
@@ -11,21 +49,67 @@
|
||||
<img id="header_image" class="header_image" src="/res/img/header_2019.png" alt="Header image"/>
|
||||
<br/>
|
||||
<div class="page_content">
|
||||
<h1>How to share files with pixeldrain</h1>
|
||||
<div id="instruction_1" class="instruction_highlight"><div class="limit_width">
|
||||
<span class="big_number">1</span><span class="instruction_text">Select files to upload</span>
|
||||
You can also drop files anywhere on this page from your file
|
||||
manager
|
||||
</div></div>
|
||||
<input id="file_input_field" type="file" name="file" multiple="multiple"/>
|
||||
<button id="select_file_button" class="big_button button_highlight">Upload Files</button>
|
||||
<button id="text_button" class="big_button button_highlight" onClick="window.location.href = '/t/'">Upload Text</button>
|
||||
<br/>
|
||||
<p>
|
||||
By uploading files to Pixeldrain you accept that a cookie will
|
||||
be placed in your web browser. More information on the <a
|
||||
href="/about">about</a> page
|
||||
be placed in your web browser. More information on the
|
||||
<a href="/about">about</a> page
|
||||
<p>
|
||||
|
||||
<div id="instruction_2" class="instruction_highlight" style="display: none">
|
||||
<div class="limit_width">
|
||||
<span class="big_number">2</span><span class="instruction_text">Wait for the files to finish uploading</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="uploads_queue"></div>
|
||||
<br/>
|
||||
<button id="btn_create_list">Create list with uploaded files</button>
|
||||
<button id="btn_copy_links">Copy links to clipboard</button>
|
||||
<button id="btn_copy_bbcode">Copy BBCode to clipboard</button>
|
||||
|
||||
<div id="instruction_3" class="instruction_highlight" style="display: none">
|
||||
<div class="limit_width"><span class="big_number">3</span><span class="instruction_text">Share the files</span></div>
|
||||
</div>
|
||||
<div id="instruction_3_after" style="display: none">
|
||||
<div id="navigator_share_button" style="display: inline-block">
|
||||
<button class="social_button" onclick="shareButton()">
|
||||
{{template `share.svg` .}}<br/>Share
|
||||
</button>
|
||||
</div>
|
||||
<button id="btn_copy_link" class="social_button" style="display: inline-block" onclick="copyLink()">
|
||||
{{template `copy.svg` .}}<br/><span>Copy link</span>
|
||||
</button>
|
||||
<button id="btn_open_link" class="social_button" style="display: inline-block" onclick="openLink()">
|
||||
{{template `open_in_new.svg` .}}<br/><span>Open link</span>
|
||||
</button>
|
||||
<div id="social_buttons" style="display: inline-block">
|
||||
<button class="social_button" onclick="window.open('mailto:please@set.address?subject=File%20on%20pixeldrain&body=' + shareLink);">
|
||||
{{template `email.svg` .}}<br/>E-Mail
|
||||
</button>
|
||||
<button class="social_button" onclick="window.open('https://twitter.com/share?url=' + shareLink);">
|
||||
{{template `twitter.svg` .}}<br/>Twitter
|
||||
</button>
|
||||
<button class="social_button" onclick="window.open('http://www.facebook.com/sharer.php?u=' + shareLink);">
|
||||
{{template `facebook.svg` .}}<br/>Facebook
|
||||
</button>
|
||||
<button class="social_button" onclick="window.open('https://www.reddit.com/submit?url=' + shareLink);">
|
||||
{{template `reddit.svg` .}}<br/>Reddit
|
||||
</button>
|
||||
<button class="social_button" onclick="window.open('http://www.tumblr.com/share/link?url=' + shareLink);">
|
||||
{{template `tumblr.svg` .}}<br/>Tumblr
|
||||
</button>
|
||||
</div>
|
||||
<br/>
|
||||
<button id="btn_create_list">Create list with uploaded files</button>
|
||||
<button id="btn_copy_links">Copy all links to clipboard</button>
|
||||
<button id="btn_copy_bbcode">Copy BBCode to clipboard</button>
|
||||
<br/>
|
||||
<div id="created_lists"></div>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<div class="limit_width">
|
||||
@@ -68,6 +152,7 @@
|
||||
var apiEndpoint = '{{.APIEndpoint}}';
|
||||
var API_URL = "/api";
|
||||
{{template "home.js"}}
|
||||
{{template "home_plain.js"}}
|
||||
</script>
|
||||
|
||||
{{template "analytics"}}
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
<body>
|
||||
<div id="toolbar">
|
||||
<button class="toolbar_button button_full_width" onClick="uploadText();">
|
||||
<img src="{{template `upload_small.png`}}" alt="Start Upload"/>
|
||||
{{template `upload.svg` .}}
|
||||
<span>Upload</span>
|
||||
</button>
|
||||
<a href="/" class="button toolbar_button button_full_width">
|
||||
|
||||
Reference in New Issue
Block a user