Files
fnx_web/res/template/home.html

294 lines
9.7 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>
.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;
}
2020-08-03 15:26:22 +02:00
.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 {
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;
}
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-07-30 22:47:40 +02:00
<img id="header_image" class="header_image" src="/res/img/header_orbitron.png" alt="Header image"/>
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;">
<!-- <h1>How to share files:</h1> -->
<div id="instruction_1" class="instruction_highlight" style="margin-top: 0;"><div class="limit_width">
2020-01-14 17:10:03 +01:00
<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"/>
2020-04-14 16:00:24 +02:00
<button id="upload_file_button" class="big_button button_highlight">
<i class="icon">cloud_upload</i>
<u>U</u>pload Files</button>
<button id="upload_text_button" class="big_button button_highlight">
<i class="icon">text_fields</i>
Upload <u>T</u>ext</button>
2019-09-17 23:38:40 +02:00
<br/>
2017-11-10 12:39:55 +01:00
<p>
2020-01-17 20:32:21 +01: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-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-04-14 16:00:24 +02:00
<button id="btn_create_list"><i class="icon small">list</i> Create list with uploaded files</button>
<button id="btn_copy_links"><i class="icon small">content_copy</i> Copy all links to clipboard</button>
<button id="btn_copy_markdown"><i class="icon small">content_copy</i> Copy markdown to clipboard</button>
<button id="btn_copy_bbcode"><i class="icon small">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>
2020-08-03 15:26:22 +02:00
<h2>Features</h2>
</div>
<div class="features">
<div>
<h3>Free</h3>
<div class="price">€0 per month</div>
<img src="/res/img/benefit_0.png" style="width: 100%;">
<div class="feature">No account required</div>
<div class="feature">Files expire 30 days after last view</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.png" style="width: 100%;">
<div class="feature">No ads when viewing and downloading files</div>
<div class="feature">Support pixeldrain's development</div>
<div style="text-align: center; padding: 8px;">
{{if eq .User.Subscription "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>Persistence</h3>
<div class="price">€8 per month + tax</div>
<img src="/res/img/benefit_2.png" style="width: 100%;">
<div class="feature">No ads when viewing and downloading files</div>
<div class="feature">No ads on files you uploaded</div>
<div class="feature">Files expire two months after last view</div>
<div style="text-align: center; padding: 8px;">
{{if eq .User.Subscription "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.png" style="width: 100%;">
<div class="feature">No ads when viewing and downloading files</div>
<div class="feature">No ads on files you uploaded</div>
<div class="feature">Files expire six months after last view</div>
<div style="text-align: center; padding: 8px;">
{{if eq .User.Subscription "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.png" style="width: 100%;">
<div class="feature">No ads when viewing and downloading files</div>
<div class="feature">No ads on files you uploaded</div>
<div class="feature">Files you upload never expire</div>
<div style="text-align: center; padding: 8px;">
{{if eq .User.Subscription "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>
2019-09-17 23:38:40 +02:00
</div>
2017-11-10 12:39:55 +01:00
</div>
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"}}
{{template "UploadManager.js"}}
{{template "homepage.js"}}
2019-12-23 23:56:57 +01:00
</script>
2017-11-10 12:39:55 +01:00
{{template "analytics"}}
</body>
</html>
{{end}}