{{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;
		}
		.feat_table {
			display: flex;
			flex-direction: column;
		}
		.feat_table > div {
			display: flex;
			flex-direction: row;
		}
		.feat_table > div > div:first-child {
			flex: 0 0 20%;
			max-width: 20%;
		}
		.feat_table > div > div {
			flex: 1 1 0;
			margin: 0.25em;
			padding: 0.5em;
			text-align: center;
			word-wrap: break-word;
			hyphens: auto;
		}
		.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 {
			background-color: var(--layer_3_color);
			box-shadow: 1px 1px 3px -1px var(--shadow_color);
			text-shadow: 1px 1px 3px var(--shadow_color);
		}
		.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);
		}
		.feat_table > div > .feat_highlight {
			border: 1px solid var(--highlight_color)
		}
		.text_highlight {
			color: var(--highlight_color);
			text-shadow: 0 0 4px var(--shadow_color);
			font-size: 1.1em;
			font-weight: bold;
		}
		.feat_table > div > .cell_background {
			flex: 0 0 33%;
			min-width: 33%;
			border-top-left-radius: 0.5em;
			border-bottom-left-radius: 0.5em;
			background-position: center;
			background-size: cover;
			text-align: left;
			font-size: 1.1em;
			color: #ffffff;
			text-shadow: 0 0 3px #000000;
		}

		.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; }

		.features_cell {
			display: flex;
			flex-wrap: wrap;
		}
		.features_cell > div {
			flex: 1 1 50%;
			min-width: 220px;
		}

		{{ template `modal.css` }}
		</style>

		<script>
			window.api_endpoint = '{{.APIEndpoint}}';
			window.user = {{.User}};
		</script>
		<link rel='stylesheet' href='/res/svelte/home_page.css?v3'>
		<script defer src='/res/svelte/home_page.js?v3'></script>
	</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/>

		<!-- Svelte element -->
		<div id="uploader" class="page_content" style="margin-bottom: 50px;"></div>

		<h1>What is pixeldrain?</h1>
		<div class="page_content"><div class="limit_width">
			<p>
				Pixeldrain is a file sharing website built for speed and ease of
				use. You can upload files you want to share online to our
				servers and we will hold on to them for at least a month. During
				this time anyone with the link will be able to download your
				files. Pixeldrain is built to be as fast as possible, so you
				don't have to do any unnecessary waiting when downloading files.
			</p>
			<p>
				Files can be uploaded by clicking the big green upload
				button, or by dragging them onto this page from your file
				manager.
			</p>
			<p>
				If you uploaded multiple files at once you can also create a
				list, which is a collection of files with one single link. Like
				a photo album, a music record or a video compilation. Click the
				'Create list with uploaded files' button after your uploads are
				complete. The files will be saved in the order you uploaded
				them.
			</p>

			<h2 id="pro">Getting more out of pixeldrain</h2>
			<p>
				By purchasing a subscription you support pixeldrain on its
				mission to make content sharing easier, safer and faster for
				everyone.
			</p>
			<p>
				Pixeldrain uses
				<a href="https://en.wikipedia.org/wiki/Byte#Multiple-byte_units"
				target="_blank">SI standard units</a> for measuring file sizes.
				If you are using Microsoft Windows your files may appear smaller
				than they actually are.
			</p>
			<br/>
			<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>
				</div>
				<div>
					<div class="feat_label">Size limit per file</div>
					<div class="feat_normal">5 GB per file (4.66 GiB)</div>
					<div class="feat_pro">
						<span class="text_highlight">15 GB</span> per file (13.97 GiB)
					</div>
				</div>
				<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>
				</div>
				<div>
					<div class="feat_label">
						Adver&shy;tise&shy;ments
					</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. No ads when viewing files uploaded by
						other users
					</div>
				</div>
				<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">
						<a href="javascript:void(0);" onclick="return explainDirectLinking();">
							Hotlinking
						</a>
					</div>
					<div class="feat_normal">
						Rate limiting mode will be enabled when a file has 3
						times more downloads than views
					</div>
					<div class="feat_pro">
						<span class="text_highlight">1 terabyte</span> of
						direct downloads per 30 days. Never have to enter a
						CAPTCHA while logged in
						<br/>
						<button class="round" onclick="return explainDirectLinking()">
							<i class="icon">info</i>
							More information
						</button>
					</div>
				</div>
				<div>
					<div class="feat_label">
						Storage space
					</div>
					<div class="feat_normal">
						500 gigabytes
					</div>
					<div class="feat_pro">
						<span class="text_highlight">1 terabyte</span>
					</div>
				</div>
				<div>
					<div class="feat_label">
						Bandwidth priority
					</div>
					<div class="feat_normal">
						Download speed will be throttled during busy periods
					</div>
					<div class="feat_pro">
						<span class="text_highlight">High priority</span>
						bandwidth for files you download and files on your
						account
					</div>
				</div>
				<div>
					<div class="feat_label">
						Online file previews
					</div>
					<div class="feat_normal">
						View image, audio, PDF and text files directly in your
						web browser
					</div>
					<div class="feat_pro">
						<span class="text_highlight">Video streaming</span> in
						your web browser. Free users will also be able to watch
						videos you uploaded
					</div>
				</div>
				<div>
					<div></div>
					<div class="feat_normal round_bl">Free</div>
					<div class="feat_pro feat_highlight round_br">
						{{if eq .User.Subscription.ID "patreon_1"}}
						You have this plan<br/>
						Thank you for supporting pixeldrain!
						{{else}}
						Only
						<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=5291427" class="button button_highlight round">
							€ 2 per month
						</a>
						or
						<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=5291427&cadence=12" class="button button_highlight round">
							€ 20 per year!
						</a>
						<br/>
						(Excluding tax)
						<br/>
						Subscription managed by Patreon
						{{end}}
					</div>
				</div>
			</div>
			<br/>
			<div style="text-align: center;">
				Do you need even more time and space? Check out our other plans
			</div>
			<br/>
			<div class="feat_table">
				<div>
					<div class="cell_background" style="background-image: url('/res/img/benefit_5.webp');">
						Resolve<br/>
						{{if eq .User.Subscription.ID "patreon_5"}}
						You have this plan<br/>
						Thank you for supporting pixeldrain!
						{{else}}
						<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=5736701" class="button button_highlight round">
							€ 4
						</a>
						{{end}}
					</div>
					<div class="feat_pro features_cell round_tr">
						<div><span class="text_highlight">20 GB</span> max file size (18.63 GiB)<br/></div>
						<div><span class="text_highlight">120 days</span> file expiry</div>
						<div><span class="text_highlight">2 TB</span> hotlink bandwidth<br/></div>
						<div><span class="text_highlight">2 TB</span> storage space<br/></div>
					</div>
				</div>
				<div>
					<div class="cell_background" style="background-image: url('/res/img/benefit_2.webp');">
						Persistence<br/>
						{{if eq .User.Subscription.ID "patreon_2"}}
						You have this plan<br/>
						Thank you for supporting pixeldrain!
						{{else}}
						<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=5291482" class="button button_highlight round">€ 8</a>
						{{end}}
					</div>
					<div class="feat_pro features_cell">
						<div><span class="text_highlight">20 GB</span> max file size<br/></div>
						<div><span class="text_highlight">240 days</span> file expiry</div>
						<div><span class="text_highlight">4 TB</span> hotlink bandwidth<br/></div>
						<div><span class="text_highlight">4 TB</span> storage space<br/></div>
					</div>
				</div>
				<div>
					<div class="cell_background" style="background-image: url('/res/img/benefit_3.webp');">
						Tenacity<br/>
						{{if eq .User.Subscription.ID "patreon_3"}}
						You have this plan<br/>
						Thank you for supporting pixeldrain!
						{{else}}
						<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=5291516" class="button button_highlight round">€ 16</a>
						{{end}}
					</div>
					<div class="feat_pro features_cell">
						<div><span class="text_highlight">20 GB</span> max file size<br/></div>
						<div><span class="text_highlight">480 days</span> file expiry</div>
						<div><span class="text_highlight">8 TB</span> hotlink bandwidth<br/></div>
						<div><span class="text_highlight">8 TB</span> storage space<br/></div>
					</div>
				</div>
				<div>
					<div class="cell_background" style="background-image: url('/res/img/benefit_4.webp');">
						Eternity<br/>
						{{if eq .User.Subscription.ID "patreon_4"}}
						You have this plan<br/>
						Thank you for supporting pixeldrain!
						{{else}}
						<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=5291528" class="button button_highlight round">€ 32</a>
						{{end}}
					</div>
					<div class="feat_pro features_cell">
						<div><span class="text_highlight">20 GB</span> max file size<br/></div>
						<div><span class="text_highlight">Files never expire</span></div>
						<div><span class="text_highlight">16 TB</span> hotlink bandwidth<br/></div>
						<div><span class="text_highlight">16 TB</span> storage space<br/></div>
					</div>
				</div>
				<div>
					<div class="cell_background" style="background-image: url('/res/img/benefit_6.webp');">
						Infinity<br/>
						{{if eq .User.Subscription.ID "patreon_6"}}
						You have this plan<br/>
						Thank you for supporting pixeldrain!
						{{else}}
						<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=6573749" class="button button_highlight round">€ 64</a>
						{{end}}
					</div>
					<div class="feat_pro features_cell">
						<div><span class="text_highlight">20 GB</span> max file size<br/></div>
						<div><span class="text_highlight">Files never expire</span></div>
						<div><span class="text_highlight">32 TB</span> hotlink bandwidth<br/></div>
						<div><span class="text_highlight">32 TB</span> storage space<br/></div>
					</div>
				</div>
				<div>
					<div class="cell_background" style="background-image: url('/res/img/benefit_7.webp');">
						Omnipotence<br/>
						{{if eq .User.Subscription.ID "patreon_7"}}
						You have this plan<br/>
						Thank you for supporting pixeldrain!
						{{else}}
						<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=7732256" class="button button_highlight round">
							€ 96
						</a>
						{{end}}
					</div>
					<div class="feat_pro features_cell">
						<div><span class="text_highlight">20 GB</span> max file size<br/></div>
						<div><span class="text_highlight">Files never expire</span></div>
						<div><span class="text_highlight">48 TB</span> hotlink bandwidth<br/></div>
						<div><span class="text_highlight">48 TB</span> storage space<br/></div>
					</div>
				</div>
				<div>
					<div class="cell_background" style="background-image: url('/res/img/benefit_8.webp');">
						Omnipresence<br/>
						{{if eq .User.Subscription.ID "patreon_8"}}
						You have this plan<br/>
						Thank you for supporting pixeldrain!
						{{else}}
						<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=7732262" class="button button_highlight round">
							€ 128
						</a>
						{{end}}
					</div>
					<div class="feat_pro features_cell">
						<div><span class="text_highlight">20 GB</span> max file size<br/></div>
						<div><span class="text_highlight">Files never expire</span></div>
						<div><span class="text_highlight">64 TB</span> hotlink bandwidth<br/></div>
						<div><span class="text_highlight">64 TB</span> storage space<br/></div>
					</div>
				</div>
				<div>
					<div class="cell_background" style="background-image: url('/res/img/benefit_9.webp');">
						Omniscience<br/>
						{{if eq .User.Subscription.ID "patreon_9"}}
						You have this plan<br/>
						Thank you for supporting pixeldrain!
						{{else}}
						<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=7732266" class="button button_highlight round">
							€ 192
						</a>
						{{end}}
					</div>
					<div class="feat_pro features_cell">
						<div><span class="text_highlight">20 GB</span> max file size<br/></div>
						<div><span class="text_highlight">Files never expire</span></div>
						<div><span class="text_highlight">96 TB</span> hotlink bandwidth<br/></div>
						<div><span class="text_highlight">96 TB</span> storage space<br/></div>
					</div>
				</div>
				<div>
					<div class="cell_background" style="background-image: url('/res/img/benefit_10.webp');">
						Trinity<br/>
						{{if eq .User.Subscription.ID "patreon_10"}}
						You have this plan<br/>
						Thank you for supporting pixeldrain!
						{{else}}
						<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=7732271" class="button button_highlight round">
							€ 256
						</a>
						{{end}}
					</div>
					<div class="feat_pro features_cell round_br">
						<div><span class="text_highlight">20 GB</span> max file size<br/></div>
						<div><span class="text_highlight">Files never expire</span></div>
						<div><span class="text_highlight">128 TB</span> hotlink bandwidth<br/></div>
						<div><span class="text_highlight">128 TB</span> storage space<br/></div>
					</div>
				</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 (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 File 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.
			</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>
				Paying for bandwidth is the most expensive part of running
				pixeldrain. Because of this we have to limit what can be
				downloaded and by who.
			</p>
			<p>
				Normally when you view a file it's on pixeldrain's file viewer.
				The file viewer is the page with the download button, the name
				of the file and a frame where you can view the file if it's an
				image, video, audio, PDF or text file.
			</p>
			<p>
				More information about <a
				href="https://en.wikipedia.org/wiki/Inline_linking"
				target="_blank">Hotlinking on Wikipedia</a>.
			</p>
			<h3>Rate limiting</h3>
			<p>
				It's also possible to link directly to a file instead of the
				download page. This circumvents our advertisers and branding and
				thus we lose money when people do this. That's why I added 'rate
				limiting mode' to files. This mode is enabled when a file has
				been downloaded three times more than it has been viewed through
				the file viewer. When rate limiting mode is activated a file
				cannot be downloaded through the API, the request needs to come
				from the file viewer page. On the file viewer you will see a
				CAPTCHA to fill in when you click the download button.
			</p>
			<h3>Hotlinking with a Pro subscription</h3>
			<p>
				When you have a Pro subscription you will get a monthly
				bandwidth cap for all the files on your account combined. Normal
				downloads through the file viewer will not be subtracted from
				the cap, so nothing changes if you keep using the site like
				normal. If people download your files directly from the API (by
				replacing the /u/ part in the link with /api/file/) the
				bandwidth usage will be subtracted from the bandwidth cap on
				your account. If the bandwidth cap is exceeded rate limiting
				mode will be enabled for all the files on your account with
				three times more downloads than views.
			</p>
			<p>
				The bandwidth cap on your account is a 30 day rolling window.
				This means that bandwidth usage will expire 30 days after it was
				used. Your counter will not reset at the start of the next
				month.
			</p>
			<p>
				When a list of files is downloaded with the 'DL all files'
				button each file in the resulting zip file will be counted
				separately.
			</p>
		</template>

		{{template "page_bottom" .}}

		<script>
			'use strict';
			{{template "Modal.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, "Hotlinking Bandwidth", "800px", "auto"
				)
				m.cloneTemplate("tpl_direct_linking")
				m.open()
				return false
			}

			if (window.location.hash === "#direct_linking" || window.location.hash === "#hotlinking") {
				explainDirectLinking()
			}
		</script>

		{{template "analytics"}}
	</body>
</html>
{{end}}
