Add pixeldrain for creators offer

res/template/fragments/page_wrap.html

@@ -1,7 +1,8 @@
 {{define "page_menu"}}
 <button id="button_toggle_navigation" class="button_toggle_navigation" onclick="toggleMenu();">☰</button>
 <nav id="page_navigation" class="page_navigation">
-	<a href="/">Home</a>
+	<a href="/#">Home</a>
+	<a href="/#prepaid">For Creators</a>
 	<hr />
 	{{if .Authenticated}}<a href="/user">{{.User.Username}}</a>
 	<a href="/user/filemanager#files">My Files</a>

svelte/src/home_page/ForCreators.svelte

@@ -0,0 +1,97 @@
+<header id="prepaid">
+	<div class="header_image_container"></div>
+</header>
+<section>
+	<p style="text-align: center; font-size: 1.2em;">
+		We have a special offer for content creators and businesses
+	</p>
+	<p style="text-align: center; font-size: 1.2em;">
+		Whether you're working with large video files, high quality
+		photography or a different kind of media. Pixeldrain is the
+		best way to transfer data to your customers!
+	</p>
+	<br/>
+
+	<img src="/res/img/misc/sunrise.webp" class="float_right" alt="Sunrise">
+	<h2>Simple and affordable</h2>
+
+	<span class="keyword">€4 per TB per month for storage</span><br/>
+	<span class="keyword">€2 per TB for data transfer</span><br/>
+	<p>
+		You are only charged for what you use. And it's only 1.4% the price of
+		Amazon AWS. Yea, seriously, you could save 98% on your bandwidth bill by
+		switching!
+	</p>
+	<p>
+		Cheaper storage is also available with file expiry enabled.
+	</p>
+	<br style="clear: right;"/>
+	<br/>
+
+	<img src="/res/img/misc/branding.webp" class="float_left" alt="Download page branding">
+	<h2 style="clear: right;">Customizable</h2>
+	<p>
+		<span class="keyword">Downloading files doesn't have to be
+		dull.</span> Pixeldrain allows you to customize the look of
+		your download pages. Transfer files to your customers in
+		style! We also allow you to link directly to the file itself
+		and circumvent the download page completely.
+	</p>
+	<br style="clear: both;"/>
+	<h2>Interested?</h2>
+	<p>
+		To get started we will need the name and address of your business, and
+		the name of your pixeldrain account. We will prepare an invoice for you.
+		Your deposit needs to be at least €100 to save on administrative work.
+		We accept SEPA, PayPal and Bitcoin.
+	</p>
+	<p style="text-align: center;">
+		<a href="mailto:sales@pixeldrain.com" class="button button_highlight round" style="font-size: 1.4em">
+			<i class="icon">mail</i>
+			Contact sales@pixeldrain.com
+		</a>
+	</p>
+</section>
+
+
+<style>
+/* Override the default background with something spectacular */
+header {
+	background-image: url("/res/img/servers.webp");
+	background-repeat: no-repeat;
+	background-attachment: fixed;
+	background-position: center;
+	background-size: cover;
+	background-blend-mode: normal;
+}
+.header_image_container {
+	margin: auto;
+	height: 300px;
+	width: 750px;
+	max-width: 100%;
+	background-image: url("/res/img/professional_header.webp");
+	background-repeat: no-repeat;
+	background-size: contain;
+	background-position: center;
+}
+.keyword {
+	font-size: 1.1em;
+	text-shadow: 1px 1px 3px var(--shadow_color);
+}
+h2 {
+	border-bottom: none;
+}
+.float_left, .float_right {
+	max-width: 45%;
+	margin: 4px;
+	border-radius: 12px;
+}
+.float_left {
+	float: left;
+	margin-right: 16px;
+}
+.float_right {
+	float: right;
+	margin-left: 16px;
+}
+</style>

svelte/src/home_page/HomePage.svelte

@@ -1,5 +1,6 @@
 <script>
 import FeatureTable from "./FeatureTable.svelte";
+import ForCreators from "./ForCreators.svelte";
 import OtherPlans from "./OtherPlans.svelte";
 import UploadWidget from "./UploadWidget.svelte";
 
@@ -42,18 +43,11 @@ import UploadWidget from "./UploadWidget.svelte";
 </header>
 <section>
 	<p>
-		By purchasing a subscription you support pixeldrain on its
+		By purchasing a subscription you support pixeldrain on its mission to
-		mission to make content sharing easier, safer and faster for
+		make content sharing easier, safer and faster for everyone. The standard
-		everyone. The standard subscription plans use Patreon for
+		subscription plans use Patreon for payment processing. Check out our <a
-		payment processing. Check out our <a href="#prepaid">prepaid
+		href="#prepaid">prepaid plans</a> if you are interested in more
-		plans</a> if you would like to pay using cryptocurrencies.
+		professional services.
-	</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/>
 	<FeatureTable></FeatureTable>
@@ -63,32 +57,13 @@ import UploadWidget from "./UploadWidget.svelte";
 	</div>
 	<br/>
 	<OtherPlans></OtherPlans>
-
+	<br/>
-	<h2 id="prepaid">Prepaid plans</h2>
-	<p>
-		You you need more bandwidth or storage space there's also
-		prepaid plans. For prepaid we charge a base rate of €1 per
-		month, the rest of the charges are usage based. We charge €4 per
-		TB per month for storage space and €2 per TB for bandwidth
-		usage. We accept Bitcoin, Lightning Network and Dogecoin
-		payments.
-	</p>
-	<p>
-		If €4 per TB of storage is too much we also have plans with
-		cheaper storage and file expiry enabled. Your files will not
-		expire as long as they generate traffic, so this can be a viable
-		option if your files are accessed often.
-	</p>
-	<div style="text-align: center;">
-		<img src="/res/img/coins.webp" alt="supported coins" style="width: 250px; height: 96px;"/>
-	</div>
-	<p>
-		To use prepaid you need to register a pixeldrain account. After
-		logging in head to the <a href="/user/transactions">transactions
-		page</a> to deposit your coins.
-	</p>
 </section>
 
+<ForCreators/>
+<br/>
+<br/>
+
 <style>
 .header_image_container {
 	margin: auto;

svelte/src/home_page/OtherPlans.svelte

@@ -9,6 +9,7 @@
 			<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=5736701" class="button button_highlight round">
 				€ 4
 			</a>
+			/ month
 			{/if}
 		</div>
 		<div class="feat_pro features_cell round_tr">
@@ -25,7 +26,10 @@
 			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>
+			<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=5291482" class="button button_highlight round">
+				€ 8
+			</a>
+			/ month
 			{/if}
 		</div>
 		<div class="feat_pro features_cell">
@@ -48,7 +52,10 @@
 			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>
+			<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=5291516" class="button button_highlight round">
+				€ 16
+			</a>
+			/ month
 			{/if}
 		</div>
 		<div class="feat_pro features_cell">
@@ -66,7 +73,10 @@
 			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>
+			<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=5291528" class="button button_highlight round">
+				€ 32
+			</a>
+			/ month
 			{/if}
 		</div>
 		<div class="feat_pro features_cell">
@@ -84,94 +94,17 @@
 			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>
+			<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=6573749" class="button button_highlight round">
-			{/if}
+				€ 64
-		</div>
-		<div class="feat_pro features_cell">
-			<div><span class="text_highlight">20 GB</span> max file size</div>
-			<div><span class="text_highlight">Files never expire</span></div>
-			<div><span class="text_highlight">32 TB</span> transfer limit</div>
-			<div><span class="text_highlight">32 TB</span> storage space</div>
-			<div><span class="text_highlight">File viewer branding</span></div>
-		</div>
-	</div>
-	<div>
-		<div class="cell_background" style="background-image: url('/res/img/benefit_7.webp');">
-			Omnipotence<br/>
-			{#if window.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>
-			{/if}
-		</div>
-		<div class="feat_pro features_cell">
-			<div><span class="text_highlight">20 GB</span> max file size</div>
-			<div><span class="text_highlight">Files never expire</span></div>
-			<div><span class="text_highlight">48 TB</span> transfer limit</div>
-			<div><span class="text_highlight">48 TB</span> storage space</div>
-			<div><span class="text_highlight">File viewer branding</span></div>
-		</div>
-	</div>
-	<div>
-		<div class="cell_background" style="background-image: url('/res/img/benefit_8.webp');">
-			Omnipresence<br/>
-			{#if window.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>
-			{/if}
-		</div>
-		<div class="feat_pro features_cell">
-			<div><span class="text_highlight">20 GB</span> max file size</div>
-			<div><span class="text_highlight">Files never expire</span></div>
-			<div><span class="text_highlight">64 TB</span> transfer limit</div>
-			<div><span class="text_highlight">64 TB</span> storage space</div>
-			<div><span class="text_highlight">File viewer branding</span></div>
-		</div>
-	</div>
-	<div>
-		<div class="cell_background" style="background-image: url('/res/img/benefit_9.webp');">
-			Omniscience<br/>
-			{#if window.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>
-			{/if}
-		</div>
-		<div class="feat_pro features_cell">
-			<div><span class="text_highlight">20 GB</span> max file size</div>
-			<div><span class="text_highlight">Files never expire</span></div>
-			<div><span class="text_highlight">96 TB</span> transfer limit</div>
-			<div><span class="text_highlight">96 TB</span> storage space</div>
-			<div><span class="text_highlight">File viewer branding</span></div>
-		</div>
-	</div>
-	<div>
-		<div class="cell_background" style="background-image: url('/res/img/benefit_10.webp');">
-			Trinity<br/>
-			{#if window.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>
+			/ month
 			{/if}
 		</div>
 		<div class="feat_pro features_cell round_br">
 			<div><span class="text_highlight">20 GB</span> max file size</div>
 			<div><span class="text_highlight">Files never expire</span></div>
-			<div><span class="text_highlight">128 TB</span> transfer limit</div>
+			<div><span class="text_highlight">32 TB</span> transfer limit</div>
-			<div><span class="text_highlight">128 TB</span> storage space</div>
+			<div><span class="text_highlight">32 TB</span> storage space</div>
 			<div><span class="text_highlight">File viewer branding</span></div>
 		</div>
 	</div>
@@ -185,6 +118,7 @@
 .feat_table > div {
 	display: flex;
 	flex-direction: row;
+	min-height: 8em;
 }
 .feat_table > div > div:first-child {
 	flex: 0 0 20%;

svelte/src/user_home/Subscription.svelte

@@ -7,8 +7,6 @@ import { formatDataVolume } from "../util/Formatting.svelte";
 
 let loading = false
 let subscription = window.user.subscription.id
-let hotlinking = window.user.hotlinking_enabled
-let transfer_cap = window.user.monthly_transfer_cap / 1e9
 
 let result = ""
 let result_success = false
@@ -41,15 +39,16 @@ const update = async (update_field) => {
 
 		result_success = true
 		result = "Subscription updated"
-
-		setTimeout(() => {location.reload()}, 1000)
 	} catch (err) {
 		result_success = false
 		result = "Failed to update subscription: "+err
+	} finally {
 		loading = false
 	}
 }
 
+let hotlinking = window.user.hotlinking_enabled
+let transfer_cap = window.user.monthly_transfer_cap / 1e9
 let transfer_used = 0
 let load_tranfer_used = () => {
 	let today = new Date()
@@ -79,7 +78,6 @@ onMount(load_tranfer_used)
 		<Spinner />
 	</div>
 {/if}
-
 <section>
 	<h2>Manage subscription</h2>
 	{#if window.user.subscription.type !== "patreon"}
@@ -143,7 +141,7 @@ onMount(load_tranfer_used)
 						</button>
 					{/if}
 				</div>
-				<div class="feat_normal">
+				<div class="feat_normal" class:feat_highlight={subscription === "prepaid_temp_storage_120d"}>
 					<ul>
 						<li>Base price of €1 per month</li>
 						<li>€1 per TB per month for storage</li>
@@ -164,7 +162,7 @@ onMount(load_tranfer_used)
 						</button>
 					{/if}
 				</div>
-				<div class="feat_normal">
+				<div class="feat_normal" class:feat_highlight={subscription === "prepaid_temp_storage_60d"}>
 					<ul>
 						<li>Base price of €1 per month</li>
 						<li>€0.50 per TB per month for storage</li>
@@ -185,7 +183,7 @@ onMount(load_tranfer_used)
 						</button>
 					{/if}
 				</div>
-				<div class="feat_normal round_br">
+				<div class="feat_normal round_br" class:feat_highlight={subscription === ""}>
 					<ul>
 						<li>Standard free plan, files expire after 30 days.</li>
 					</ul>
@@ -239,6 +237,27 @@ onMount(load_tranfer_used)
 </section>
 
 <style>
+.spinner_container {
+	position: absolute;
+	top: 10px;
+	left: 10px;
+	height: 100px;
+	width: 100px;
+	z-index: 1000;
+}
+
+.green {
+	color: var(--highlight_color);
+}
+.red {
+	color: var(--danger_color);
+}
+.billshock_container {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+
 .spinner_container {
 	position: absolute;
 	top: 10px;
@@ -281,17 +300,4 @@ onMount(load_tranfer_used)
 
 .feat_table > div > div.round_tr { border-top-right-radius:    0.5em; }
 .feat_table > div > div.round_br { border-bottom-right-radius: 0.5em; }
-
-.green {
-	color: var(--highlight_color);
-}
-.red {
-	color: var(--danger_color);
-}
-.billshock_container {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-}
-
 </style>