432 lines
14 KiB
HTML
432 lines
14 KiB
HTML
{{define "home"}}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
{{template "meta_tags" "Free file sharing service"}}
|
|
{{template "user_style" .}}
|
|
<style>
|
|
.header_image{
|
|
width: 100%;
|
|
max-width: 800px;
|
|
margin: 0 auto 50px auto;
|
|
}
|
|
.big_button{
|
|
width: 40%;
|
|
min-width: 250px;
|
|
max-width: 400px;
|
|
margin: 10px !important;
|
|
border-radius: 5px;
|
|
font-size: 1.8em;
|
|
}
|
|
.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;
|
|
padding: 5px;
|
|
}
|
|
.big_number {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
line-height: 1em;
|
|
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;
|
|
}
|
|
|
|
.features {
|
|
width: 100%;
|
|
text-align: center;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
.features > div {
|
|
display: inline-block;
|
|
margin: 12px;
|
|
width: 18em;
|
|
vertical-align: top;
|
|
text-align: left;
|
|
white-space: initial;
|
|
background-color: var(--layer_3_color);
|
|
box-shadow: 1px 1px 6px -2px var(--shadow_color);
|
|
}
|
|
.features > div > h3 {
|
|
text-align: center;
|
|
border-bottom: none;
|
|
margin: 10px;
|
|
}
|
|
.features > div > .price {
|
|
text-align: center;
|
|
margin-bottom: 6px;
|
|
}
|
|
.features > div > .feature {
|
|
display: block;
|
|
text-align: center;
|
|
padding: 6px;
|
|
border-bottom: 1px solid var(--layer_3_color_border);
|
|
}
|
|
.features > div > ul {
|
|
padding-left: 20px;
|
|
}
|
|
.features > div > ul > li {
|
|
margin: 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
{{template `modal.css`}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
{{template "page_top" .}}
|
|
|
|
<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>
|
|
<br/>
|
|
<div class="page_content" style="padding-top: 0;">
|
|
<div id="instruction_1" class="instruction_highlight" style="margin-top: 0;"><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="upload_file_button" class="big_button button_highlight">
|
|
<i class="icon small">cloud_upload</i>
|
|
<u>U</u>pload Files</button>
|
|
<button id="upload_text_button" class="big_button button_highlight">
|
|
<i class="icon small">text_fields</i>
|
|
Upload <u>T</u>ext</button>
|
|
<br/>
|
|
<p>
|
|
By uploading files to pixeldrain you acknowledge and accept our
|
|
<a href="/about#content-policy">content policy</a>.
|
|
<p>
|
|
<div id="instruction_2" class="instruction_highlight">
|
|
<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>
|
|
|
|
<div id="instruction_3" class="instruction_highlight">
|
|
<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 id="btn_social_share" class="social_button">
|
|
{{template `share.svg` .}}<br/>Share
|
|
</button>
|
|
</div>
|
|
<button id="btn_copy_link" class="social_button" style="display: inline-block">
|
|
{{template `copy.svg` .}}<br/><span><u>C</u>opy link</span>
|
|
</button>
|
|
<button id="btn_open_link" class="social_button" style="display: inline-block">
|
|
{{template `open_in_new.svg` .}}<br/><span>Open link</span>
|
|
</button>
|
|
<div id="social_buttons" style="display: inline-block">
|
|
<button id="btn_social_email" class="social_button">
|
|
{{template `email.svg` .}}<br/>E-Mail
|
|
</button>
|
|
<button id="btn_social_twitter" class="social_button">
|
|
{{template `twitter.svg` .}}<br/>Twitter
|
|
</button>
|
|
<button id="btn_social_facebook" class="social_button">
|
|
{{template `facebook.svg` .}}<br/>Facebook
|
|
</button>
|
|
<button id="btn_social_reddit" class="social_button">
|
|
{{template `reddit.svg` .}}<br/>Reddit
|
|
</button>
|
|
<button id="btc_social_tumblr" class="social_button">
|
|
{{template `tumblr.svg` .}}<br/>Tumblr
|
|
</button>
|
|
</div>
|
|
<br/>
|
|
<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>
|
|
<br/>
|
|
<div id="created_lists"></div>
|
|
</div>
|
|
|
|
<div class="limit_width">
|
|
<h2>What is pixeldrain?</h2>
|
|
<p>
|
|
Pixeldrain is a file sharing website built for speed and
|
|
ease of use. Pixeldrain does not cost any money, though
|
|
donations are appreciated. See how you can support
|
|
pixeldrain below.
|
|
</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
|
|
files will be saved in the order you uploaded them. 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 about pixeldrain see the
|
|
<a href="/about">about</a> page.
|
|
</p>
|
|
<h2>Features</h2>
|
|
<p>
|
|
By purchasing a subscription you support pixeldrain on its
|
|
mission to make content sharing easier, safer and faster for
|
|
everyone.
|
|
</p>
|
|
</div>
|
|
<div class="features">
|
|
<div>
|
|
<h3>Free</h3>
|
|
<div class="price">€0 per month</div>
|
|
<img src="/res/img/benefit_0_small.png" style="width: 100%;">
|
|
|
|
<a href="#" onclick="return explainFileExpiry()" class="feature">
|
|
Files expire 30 days after last view
|
|
</a>
|
|
<div class="feature">No account required</div>
|
|
<div class="feature">Max file size 10 GB</div>
|
|
<div class="feature">Access your files anywhere with a pixeldrain account</div>
|
|
<div class="feature">Group multiple files together in a single link with lists</div>
|
|
</div>
|
|
<div>
|
|
<h3>I'm doing my part!</h3>
|
|
<div class="price">€2 per month + tax</div>
|
|
<img src="/res/img/benefit_1_small.png" style="width: 100%;">
|
|
|
|
<a href="#" onclick="return explainFileExpiry()" class="feature">
|
|
Files expire 2 months after last view
|
|
</a>
|
|
|
|
<div class="feature">No ads when viewing files</div>
|
|
<div class="feature">No ads on files you uploaded</div>
|
|
<!--<a href="#" onclick="return explainDirectLinking()" class="feature">
|
|
3 TB of direct linking bandwidth
|
|
</a>-->
|
|
|
|
<div style="text-align: center; padding: 8px;">
|
|
{{if eq .User.Subscription.ID "patreon_1"}}
|
|
<strong>You have this plan. Thank you for supporting pixeldrain!</strong>
|
|
{{else}}
|
|
<a href="/subscribe?plan=t1" class="button button_highlight" style="width: 90%;">
|
|
Get Started
|
|
</a>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3>Resolve</h3>
|
|
<div class="price">€4 per month + tax</div>
|
|
<img src="/res/img/benefit_5_small.png" style="width: 100%;">
|
|
|
|
<a href="#" onclick="return explainFileExpiry()" class="feature">
|
|
Files expire 3 months after last view
|
|
</a>
|
|
|
|
<div class="feature">No ads when viewing files</div>
|
|
<div class="feature">No ads on files you uploaded</div>
|
|
<!--<a href="#" onclick="return explainDirectLinking()" class="feature">
|
|
6 TB of direct linking bandwidth
|
|
</a>-->
|
|
|
|
<div style="text-align: center; padding: 8px;">
|
|
{{if eq .User.Subscription.ID "patreon_5"}}
|
|
<strong>You have this plan. Thank you for supporting pixeldrain!</strong>
|
|
{{else}}
|
|
<a href="/subscribe?plan=t5" class="button button_highlight" style="width: 90%;">
|
|
Get Started
|
|
</a>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3>Persistence</h3>
|
|
<div class="price">€8 per month + tax</div>
|
|
<img src="/res/img/benefit_2_small.png" style="width: 100%;">
|
|
|
|
<a href="#" onclick="return explainFileExpiry()" class="feature">
|
|
Files expire 4 months after last view
|
|
</a>
|
|
|
|
<div class="feature">No ads when viewing files</div>
|
|
<div class="feature">No ads on files you uploaded</div>
|
|
<!--<a href="#" onclick="return explainDirectLinking()" class="feature">
|
|
12 TB of direct linking bandwidth
|
|
</a>-->
|
|
|
|
<div style="text-align: center; padding: 8px;">
|
|
{{if eq .User.Subscription.ID "patreon_2"}}
|
|
<strong>You have this plan. Thank you for supporting pixeldrain!</strong>
|
|
{{else}}
|
|
<a href="/subscribe?plan=t2" class="button button_highlight" style="width: 90%;">
|
|
Get Started
|
|
</a>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3>Tenacity</h3>
|
|
<div class="price">€16 per month + tax</div>
|
|
<img src="/res/img/benefit_3_small.png" style="width: 100%;">
|
|
|
|
<a href="#" onclick="return explainFileExpiry()" class="feature">
|
|
Files expire 8 months after last view
|
|
</a>
|
|
|
|
<div class="feature">No ads when viewing files</div>
|
|
<div class="feature">No ads on files you uploaded</div>
|
|
<!--<a href="#" onclick="return explainDirectLinking()" class="feature">
|
|
24 TB of direct linking bandwidth
|
|
</a>-->
|
|
|
|
<div style="text-align: center; padding: 8px;">
|
|
{{if eq .User.Subscription.ID "patreon_3"}}
|
|
<strong>You have this plan. Thank you for supporting pixeldrain!</strong>
|
|
{{else}}
|
|
<a href="/subscribe?plan=t3" class="button button_highlight" style="width: 90%;">
|
|
Get Started
|
|
</a>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3>Eternity</h3>
|
|
<div class="price">€32 per month + tax</div>
|
|
<img src="/res/img/benefit_4_small.png" style="width: 100%;">
|
|
|
|
<a href="#" onclick="return explainFileExpiry()" class="feature">
|
|
Files you upload never expire
|
|
</a>
|
|
|
|
<div class="feature">No ads when viewing files</div>
|
|
<div class="feature">No ads on files you uploaded</div>
|
|
<!--<a href="#" onclick="return explainDirectLinking()" class="feature">
|
|
48 TB of direct linking bandwidth
|
|
</a>-->
|
|
|
|
<div style="text-align: center; padding: 8px;">
|
|
{{if eq .User.Subscription.ID "patreon_4"}}
|
|
<strong>You have this plan. Thank you for supporting pixeldrain!</strong>
|
|
{{else}}
|
|
<a href="/subscribe?plan=t4" class="button button_highlight" style="width: 90%;">
|
|
Get Started
|
|
</a>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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
|
|
gets 30 days by default (this can be extended by supporting the
|
|
site on patreon). 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>
|
|
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>
|
|
Normally 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.
|
|
</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>
|
|
|
|
{{template "page_bottom" .}}
|
|
|
|
<script>
|
|
'use strict';
|
|
let apiEndpoint = '{{.APIEndpoint}}';
|
|
{{template "util.js"}}
|
|
{{template "Modal.js"}}
|
|
{{template "UploadManager.js"}}
|
|
{{template "homepage.js"}}
|
|
|
|
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
|
|
}
|
|
</script>
|
|
|
|
{{template "analytics"}}
|
|
</body>
|
|
</html>
|
|
{{end}}
|