Files
fnx_web/res/template/home.html

162 lines
5.7 KiB
HTML
Raw Normal View History

2017-11-10 12:39:55 +01:00
{{define "home"}}
<!DOCTYPE html>
<html>
<head>
{{template "meta_tags" "Free file sharing service"}}
{{template "user_style" .}}
2020-01-14 17:10:03 +01:00
<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>
2017-11-10 12:39:55 +01:00
</head>
<body>
2019-09-16 23:50:57 +02:00
{{template "page_top" .}}
2019-09-18 22:23:12 +02:00
<img id="header_image" class="header_image" src="/res/img/header_2019.png" alt="Header image"/>
2019-09-16 23:50:57 +02:00
<br/>
2019-09-17 23:38:40 +02:00
<div class="page_content">
2020-01-14 17:10:03 +01:00
<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>
2019-09-17 23:38:40 +02:00
<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/>
2017-11-10 12:39:55 +01:00
<p>
2019-09-17 23:38:40 +02:00
By uploading files to Pixeldrain you accept that a cookie will
2020-01-14 17:10:03 +01:00
be placed in your web browser. More information on the
<a href="/about">about</a> page
2019-06-04 10:13:19 +02:00
<p>
2020-01-14 17:10:03 +01:00
<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>
2019-09-17 23:38:40 +02:00
<div id="uploads_queue"></div>
2020-01-14 17:10:03 +01:00
<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()">
2020-01-14 17:22:24 +01:00
{{template `copy.svg` .}}<br/><span><u>C</u>opy link</span>
2020-01-14 17:10:03 +01:00
</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>
2019-02-12 21:51:01 +01:00
2019-09-17 23:38:40 +02:00
<br/>
<div class="limit_width">
2020-01-13 21:50:53 +01:00
<h2>What is pixeldrain?</h2>
2019-09-17 23:38:40 +02:00
<p>
Pixeldrain is a file sharing website built for speed and
ease of use. Pixeldrain does not cost any money, though
donations are appreciated. For donation methods see the
<a href="/about">about</a> page.
</p>
<h2>How to use pixeldrain</h2>
<p>
Files can be uploaded by clicking the big green upload
button, or by dragging them onto this page from your file
manager. You can not upload directories at this time, only
files. The maximum file size you can upload is 10 GB.
</p>
<p>
You can also create lists, which are a collection of files.
Like a photo album, a music record or a video compilation.
To do this you need to upload a bunch of files at once. The
files will be saved in the order you upload them in. When
all files have finished uploading you click the "Create list
with uploaded files" button and you will be asked to enter a
name for your list. After picking a name the list will be
created and opened in a new window. If your browser blocks
the window you can also find a link to the list at the
bottom of your uploaded files.
</p>
<p>
For more information see the <a href="/about">about</a>
page.
</p>
</div>
2017-11-10 12:39:55 +01:00
</div>
2019-09-16 23:50:57 +02:00
{{template "page_bottom"}}
2019-12-23 23:56:57 +01:00
<script type="text/javascript">
var apiEndpoint = '{{.APIEndpoint}}';
var API_URL = "/api";
{{template "home.js"}}
2020-01-14 17:10:03 +01:00
{{template "home_plain.js"}}
2019-12-23 23:56:57 +01:00
</script>
2017-11-10 12:39:55 +01:00
{{template "analytics"}}
</body>
</html>
{{end}}