Files
fnx_web/res/template/home.html

386 lines
13 KiB
HTML
Raw Normal View History

2017-11-10 12:39:55 +01:00
{{define "home"}}
<!DOCTYPE html>
2020-01-17 20:32:21 +01:00
<html lang="en">
2017-11-10 12:39:55 +01:00
<head>
{{template "meta_tags" "Free file sharing service"}}
{{template "user_style" .}}
2020-01-14 17:10:03 +01:00
<style>
2020-08-09 23:47:17 +02:00
.header_image{
width: 100%;
max-width: 800px;
2020-08-11 19:52:03 +02:00
margin: 0 auto 50px auto;
2020-08-09 23:47:17 +02:00
}
2020-10-19 18:10:54 +02:00
.big_button{
width: 40%;
min-width: 250px;
max-width: 400px;
margin: 10px !important;
border-radius: 5px;
font-size: 1.8em;
}
2020-01-14 17:10:03 +01:00
.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: 1.5em 0;
2020-01-14 17:10:03 +01:00
padding: 5px;
}
.big_number {
2021-01-08 00:48:07 +01:00
font-size: 1.5em;
2020-01-14 17:10:03 +01:00
font-weight: bold;
2020-11-04 20:51:39 +01:00
line-height: 1em;
2020-01-14 17:10:03 +01:00
text-align: center;
2021-01-08 00:48:07 +01:00
display: inline-block;
2020-01-14 17:10:03 +01:00
box-sizing: border-box;
background-color: var(--highlight_color);
color: var(--highlight_text_color);
border-radius: 30px;
2021-01-08 00:48:07 +01:00
padding: 0.15em;
margin-right: 0.4em;
width: 1.4em;
height: 1.4em;
vertical-align: middle;
2020-01-14 17:10:03 +01:00
}
.instruction_text {
2021-01-08 00:48:07 +01:00
margin: 0.1em;
font-size: 1.5em;
display: inline-block;
2020-01-14 17:10:03 +01:00
box-sizing: border-box;
2021-01-08 00:48:07 +01:00
vertical-align: middle;
2020-01-14 17:10:03 +01:00
}
.social_button {
margin: 5px;
}
.social_button > img, .social_button > svg {
width: 40px;
height: 40px;
margin: 5px 15px;
}
2020-08-03 15:26:22 +02:00
2021-01-08 00:48:07 +01:00
.feat_table {
display: flex;
flex-direction: column;
}
.feat_table > div {
display: flex;
flex-direction: row;
}
.feat_table > div > div:first-child { max-width: 14em; }
.feat_table > div > div {
flex: 1 0 0;
margin: 0.2em;
padding: 0.5em;
2020-08-03 15:26:22 +02:00
text-align: center;
}
2021-01-08 00:48:07 +01:00
.feat_table > div > .feat_label {
border-top-left-radius: 0.5em;
border-bottom-left-radius: 0.5em;
background-color: var(--layer_1_color);
}
.feat_table > div > .feat_normal {
2020-08-03 15:26:22 +02:00
background-color: var(--layer_3_color);
2021-01-08 00:48:07 +01:00
box-shadow: 1px 1px 3px -1px var(--shadow_color);
text-shadow: 1px 1px 3px var(--shadow_color);
2020-08-03 15:26:22 +02:00
}
2021-01-08 00:48:07 +01:00
.feat_table > div > .feat_pro {
background-color: var(--layer_4_color);
box-shadow: 1px 1px 3px 0 var(--shadow_color);
text-shadow: 1px 1px 6px var(--shadow_color);
2020-08-03 15:26:22 +02:00
}
2021-01-08 00:48:07 +01:00
.feat_table > div > .feat_highlight {
border: 1px solid var(--highlight_color)
2020-08-03 15:26:22 +02:00
}
2021-01-08 00:48:07 +01:00
.text_highlight {
color: var(--highlight_color);
text-shadow: 0 0 4px var(--shadow_color);
font-size: 1.1em;
font-weight: bold;
2020-08-03 15:26:22 +02:00
}
2021-01-08 00:48:07 +01:00
@media (max-width: 800px) {
.feat_table > div {
flex-direction: column;
margin: 0.2em;
border-radius: 6px;
}
.feat_table > div > div {
margin: 0;
border-radius: 0;
}
2020-08-03 15:26:22 +02:00
}
2021-01-08 00:48:07 +01:00
@media (min-width: 800px) {
.feat_table > div > div.round_tl { border-top-left-radius: 0.5em; }
.feat_table > div > div.round_tr { border-top-right-radius: 0.5em; }
.feat_table > div > div.round_br { border-bottom-right-radius: 0.5em; }
.feat_table > div > div.round_bl { border-bottom-left-radius: 0.5em; }
2020-08-03 15:26:22 +02:00
}
2020-08-11 19:52:03 +02:00
{{template `modal.css`}}
2020-01-14 17:10:03 +01:00
</style>
2017-11-10 12:39:55 +01:00
</head>
<body>
2019-09-16 23:50:57 +02:00
{{template "page_top" .}}
2020-08-09 23:47:17 +02:00
<picture>
<source media="(max-width: 800px)" srcset="/res/img/header_orbitron.png">
<img class="header_image" src="/res/img/header_orbitron_wide.png" alt="Header image">
</picture>
2019-09-16 23:50:57 +02:00
<br/>
2020-07-30 22:47:40 +02:00
<div class="page_content" style="padding-top: 0;">
<div id="instruction_1" class="instruction_highlight" style="margin-top: 0;"><div class="limit_width">
2021-01-08 00:48:07 +01:00
<span class="big_number">1</span>
<span class="instruction_text">Select files to upload</span>
<br/>
2020-01-14 17:10:03 +01:00
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"/>
2020-04-14 16:00:24 +02:00
<button id="upload_file_button" class="big_button button_highlight">
2020-10-19 18:10:54 +02:00
<i class="icon small">cloud_upload</i>
2020-04-14 16:00:24 +02:00
<u>U</u>pload Files</button>
<button id="upload_text_button" class="big_button button_highlight">
2020-10-19 18:10:54 +02:00
<i class="icon small">text_fields</i>
2020-04-14 16:00:24 +02:00
Upload <u>T</u>ext</button>
2019-09-17 23:38:40 +02:00
<br/>
2017-11-10 12:39:55 +01:00
<p>
By uploading files to pixeldrain you acknowledge and accept our
<a href="/about#content-policy">content policy</a>.
2019-06-04 10:13:19 +02:00
<p>
2020-01-27 16:56:16 +01:00
<div id="instruction_2" class="instruction_highlight">
2020-01-14 17:10:03 +01:00
<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
2020-01-27 16:56:16 +01:00
<div id="instruction_3" class="instruction_highlight">
2020-01-14 17:10:03 +01:00
<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">
2020-01-20 12:43:43 +01:00
<button id="btn_social_share" class="social_button">
2020-01-14 17:10:03 +01:00
{{template `share.svg` .}}<br/>Share
</button>
</div>
2020-01-20 12:43:43 +01:00
<button id="btn_copy_link" class="social_button" style="display: inline-block">
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>
2020-01-20 12:43:43 +01:00
<button id="btn_open_link" class="social_button" style="display: inline-block">
2020-01-14 17:10:03 +01:00
{{template `open_in_new.svg` .}}<br/><span>Open link</span>
</button>
<div id="social_buttons" style="display: inline-block">
2020-01-20 12:43:43 +01:00
<button id="btn_social_email" class="social_button">
2020-01-14 17:10:03 +01:00
{{template `email.svg` .}}<br/>E-Mail
</button>
2020-01-20 12:43:43 +01:00
<button id="btn_social_twitter" class="social_button">
2020-01-14 17:10:03 +01:00
{{template `twitter.svg` .}}<br/>Twitter
</button>
2020-01-20 12:43:43 +01:00
<button id="btn_social_facebook" class="social_button">
2020-01-14 17:10:03 +01:00
{{template `facebook.svg` .}}<br/>Facebook
</button>
2020-01-20 12:43:43 +01:00
<button id="btn_social_reddit" class="social_button">
2020-01-14 17:10:03 +01:00
{{template `reddit.svg` .}}<br/>Reddit
</button>
2020-01-20 12:43:43 +01:00
<button id="btc_social_tumblr" class="social_button">
2020-01-14 17:10:03 +01:00
{{template `tumblr.svg` .}}<br/>Tumblr
</button>
</div>
<br/>
2020-10-19 18:10:54 +02:00
<button id="btn_create_list"><i class="icon">list</i> Create list with uploaded files</button>
<button id="btn_copy_links"><i class="icon">content_copy</i> Copy all links to clipboard</button>
<button id="btn_copy_markdown"><i class="icon">content_copy</i> Copy markdown to clipboard</button>
<button id="btn_copy_bbcode"><i class="icon">content_copy</i> Copy BBCode to clipboard</button>
2020-01-14 17:10:03 +01:00
<br/>
<div id="created_lists"></div>
</div>
2019-02-12 21:51:01 +01:00
2019-09-17 23:38:40 +02:00
<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
2020-08-03 15:26:22 +02:00
donations are appreciated. See how you can support
pixeldrain below.
2019-09-17 23:38:40 +02:00
</p>
<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
2020-08-03 15:26:22 +02:00
files will be saved in the order you uploaded them. When all
files have finished uploading you click the "Create list
2019-09-17 23:38:40 +02:00
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>
2020-08-03 15:26:22 +02:00
For more information about pixeldrain see the
<a href="/about">about</a> page.
2019-09-17 23:38:40 +02:00
</p>
2021-01-08 00:48:07 +01:00
<h2 id="pro">Pro</h2>
2020-08-11 19:52:03 +02:00
<p>
By purchasing a subscription you support pixeldrain on its
mission to make content sharing easier, safer and faster for
everyone.
</p>
2021-01-08 00:48:07 +01:00
<div class="feat_table">
<div>
<div></div>
<div class="feat_normal round_tl">Free</div>
<div class="feat_pro feat_highlight round_tr">Pro</div>
2020-08-03 15:26:22 +02:00
</div>
2021-01-08 00:48:07 +01:00
<div>
<div class="feat_label">Size limit per file</div>
<div class="feat_normal">5 GB per file</div>
<div class="feat_pro"><span class="text_highlight">15 GB</span> per file</div>
2020-08-11 19:52:03 +02:00
</div>
2021-01-08 00:48:07 +01:00
<div>
<div class="feat_label"><a href="javascript:void(0);" onclick="return explainFileExpiry();">File expiry</a></div>
<div class="feat_normal">30 days after the last time it is viewed</div>
<div class="feat_pro"><span class="text_highlight">90 days</span> after the last time it is viewed</div>
2020-08-03 15:26:22 +02:00
</div>
2021-01-08 00:48:07 +01:00
<div>
<div class="feat_label">Advertisements</div>
<div class="feat_normal">Pop-up or a banner ad on the file viewer page</div>
<div class="feat_pro">
<span class="text_highlight">No ads</span> on files
you share, or when viewing files from other
users
</div>
2020-08-03 15:26:22 +02:00
</div>
2021-01-08 00:48:07 +01:00
<div>
<div class="feat_label">Privacy</div>
<div class="feat_normal">
No trackers, but advertisers can see your IP address
and browser fingerprint
</div>
<div class="feat_pro">
<span class="text_highlight">Completely
private</span>. No third party scripts and no
logging
</div>
</div>
<div>
<div class="feat_label">Online file previews</div>
<div class="feat_pro">View image, video, audio, PDF and text files directly in your web browser</div>
</div>
<div>
<div class="feat_label"><a href="javascript:void(0);" onclick="return explainDirectLinking();">Direct linking</a></div>
<div class="feat_pro">Rate limiting mode will be enabled when a file has 3 times more downloads than views</div>
</div>
<div>
<div></div>
<div class="feat_normal round_bl">Free</div>
<div class="feat_pro feat_highlight round_br">
<button class="button_highlight">Only € 1 per month!</button>
<br/>
Billed annually. We accept Stripe and PayPal
</div>
2020-08-03 15:26:22 +02:00
</div>
</div>
2021-01-08 00:48:07 +01:00
<br/>
<h2>Premium</h2>
<p>
Premium is more catered toward file storage and content
delivery. This plan enables the Buckets feature which
provides a more structured way to manage your files on
pixeldrain. Buckets allow direct linking to files without
running into rate limiting.
</p>
<p>
When you choose for Premium you will also get all the
benefits of the Pro subscription.
</p>
2019-09-17 23:38:40 +02:00
</div>
2017-11-10 12:39:55 +01:00
</div>
2020-08-11 19:52:03 +02:00
<template id="tpl_file_expiry">
<p>
Files on pixeldrain have to expire eventually. If we didn't do
this the website would keep growing forever and we would run out
of money pretty quickly.
</p>
<p>
Unlike most other sharing sites pixeldrain uses a postponing
system for expiring files. When a file is freshly uploaded it
2021-01-08 00:48:07 +01:00
gets 30 days by default (90 days if you have the pro plan).
After these 30 days we will check when the file was last viewed.
Files which are regularly viewed could still bring new users to
the platform, it would be rude to show these people a 404 Not
Found page. So if the file was viewed in the last 30 days we
will simply postpone the next check a month. If the file was not
viewed however it will immediately be removed.
</p>
<p>
Views are only counted when someone visits the download page in
a web browser. This makes sure that users can see that the file
comes from pixeldrain.
2020-08-11 19:52:03 +02:00
</p>
<p>
This way we can minimize dead links, and you won't have to tell
your friends to 'hurry and download this before it expires'.
</p>
</template>
<template id="tpl_direct_linking">
<p>
2021-01-08 00:48:07 +01:00
When viewing a file on pixeldrain it has to go through the file
viewer. Files which are directly downloaded without visiting the
file viewer are blocked after a while.
2020-08-11 19:52:03 +02:00
</p>
<p>
Direct linking allows you to share files without going through
the file viewer. You can use this to embed videos / images in
your own webpages. Files which are direct linked won't count any
views but we will keep track of the downloads and used
bandwidth.
</p>
<p>
When you use up your direct linking bandwidth your direct links
will stop working for the rest of the month. You can always
upgrade to get more bandwidth. The amount of bandwidth used in
the month can be seen on your <a href="/user">user page</a> when
logged in.
</p>
</template>
2020-01-31 19:16:20 +01:00
{{template "page_bottom" .}}
2019-09-16 23:50:57 +02:00
2020-01-17 20:32:21 +01:00
<script>
2020-01-27 16:56:16 +01:00
'use strict';
let apiEndpoint = '{{.APIEndpoint}}';
{{template "util.js"}}
2020-08-11 19:52:03 +02:00
{{template "Modal.js"}}
2020-01-27 16:56:16 +01:00
{{template "UploadManager.js"}}
{{template "homepage.js"}}
2020-08-11 19:52:03 +02:00
function explainFileExpiry() {
let m = new Modal(
document.body, null, "File Expiry Postponing", "600px", "auto"
)
m.cloneTemplate("tpl_file_expiry")
m.open()
return false
}
function explainDirectLinking() {
let m = new Modal(
document.body, null, "Direct Linking Bandwidth", "600px", "auto"
)
m.cloneTemplate("tpl_direct_linking")
m.open()
return false
}
2019-12-23 23:56:57 +01:00
</script>
2017-11-10 12:39:55 +01:00
{{template "analytics"}}
</body>
</html>
{{end}}