Warn users about high storage and bandwidth usage

svelte/src/admin_panel/Home.svelte

@@ -125,7 +125,7 @@ onDestroy(() => {
 
 <div>
 	<div class="limit_width">
-		<h3>Bandwidth and views</h3>
+		<h3>Bandwidth, hotlinking and views</h3>
 	</div>
 	<div class="highlight_dark" style="margin-bottom: 6px;">
 		<button on:click={() => { loadGraph(1440, 1, true) }}>Day</button>
@@ -145,7 +145,7 @@ onDestroy(() => {
 	<div class="highlight_dark">
 		Total usage from {start_time} to {end_time}<br/>
 		{formatDataVolume(total_bandwidth, 3)} bandwidth,
-		{formatDataVolume(total_hotlink), 3} hotlink bandwidth and
+		{formatDataVolume(total_hotlink, 3)} hotlink bandwidth and
 		{formatThousands(total_views, 3)} views
 	</div>
 

svelte/src/home_page/HomePage.svelte

@@ -529,8 +529,8 @@ const keydown = (e) => {
 				can upload anything it's hard to find reputable advertisers who
 				want to advertise on pixeldrain. Every month the ad revenue just
 				barely covers the bandwidth costs. If this continues I will have
-				to resort to adding more shady ads, or reducing the file size
+				to reduce the file size and bandwidth limits even more. That's
-				and bandwidth limits. That's not something I would like to do.
+				not something I would like to do.
 			</p>
 			<p>
 				Pro costs only <b>€20 per year</b> or €2 per month. You will get

svelte/src/user_home/Home.svelte

@@ -64,7 +64,7 @@ let graph_timespan = 0
 let update_graphs = (minutes, interval, live) => {
 	if (graph_timeout !== null) { clearTimeout(graph_timeout) }
 	if (live) {
-		graph_timeout = setTimeout(() => { update_graphs(minutes, interval, true) }, 10000)
+		graph_timeout = setTimeout(() => { update_graphs(minutes, interval, true) }, 6000)
 	}
 
 	graph_timespan = minutes
@@ -154,7 +154,30 @@ onDestroy(() => {
 		<div class="progress_bar_outer">
 			<div id="storage_progress" class="progress_bar_inner" style="width: {storage_percent*100}%;"></div>
 		</div>
-		<br/>
+
+		{#if storage_percent > 0.99}
+			<div class="highlight_red">
+				You have used all of your storage space. You won't be able to
+				upload new files anymore. Please upgrade to a higher support
+				tier to continue uploading files:
+				<br/>
+				<a class="button button_highlight" href="https://www.patreon.com/join/pixeldrain">
+					Upgrade options
+				</a>
+			</div>
+		{:else if storage_percent > 0.8}
+			<div class="highlight_yellow">
+				You have used {(storage_percent*100).toFixed(0)}% of your
+				storage space. If your storage space runs out you won't be able
+				to upload new files anymore. Please upgrade to a higher support
+				tier to continue uploading files:
+				<br/>
+				<a class="button button_highlight" href="https://www.patreon.com/join/pixeldrain">
+					Upgrade options
+				</a>
+			</div>
+		{/if}
+
 		Hotlink bandwidth:
 		{formatDataVolume(direct_link_bandwidth_used, 3)}
 		out of
@@ -165,6 +188,32 @@ onDestroy(() => {
 			<div id="direct_bandwidth_progress" class="progress_bar_inner" style="width: {direct_link_percent*100}%;"></div>
 		</div>
 
+		{#if direct_link_percent > 0.99}
+			<div class="highlight_red">
+				You have used all of your hotlink bandwidth. Other people won't
+				be able to download your files directly from the API anymore.
+				Downloads will have to go through the file viewer page. Please
+				upgrade to a higher support tier to continue hotlinking files:
+				<br/>
+				<a class="button button_highlight" href="https://www.patreon.com/join/pixeldrain">
+					Upgrade options
+				</a>
+			</div>
+		{:else if direct_link_percent > 0.8}
+			<div class="highlight_yellow">
+				You have used {(direct_link_percent*100).toFixed(0)}% of your
+				hotlink bandwidth. If your hotlink bandwidth runs out people
+				won't be able to download your files directly from the API
+				anymore. Downloads will have to go through the file viewer page.
+				Please upgrade to a higher support tier to continue hotlinking
+				files:
+				<br/>
+				<a class="button button_highlight" href="https://www.patreon.com/join/pixeldrain">
+					Upgrade options
+				</a>
+			</div>
+		{/if}
+
 		<h3>Exports</h3>
 		<div style="text-align: center;">
 			<a href="/user/export/files" class="button">
@@ -259,26 +308,27 @@ onDestroy(() => {
 	</div>
 	<Chart bind:this={graph_bandwidth} dataType="bytes" label="Bandwidth" />
 	<div class="limit_width">
-		<h3>Direct link bandwidth</h3>
+		<h3>Hotlink bandwidth</h3>
 		<p>
 			When a file is downloaded without going through pixeldrain's
-			download page it counts as a direct download. Because direct
+			download page it counts as a hotlink. Because hotlinking costs us
-			downloads cost us bandwidth and don't generate any ad
+			bandwidth and doesn't generate any ad revenue we have to limit it.
-			revenue we have to limit them. When your direct link
+			When your hotlink bandwidth runs out people will be asked to do a
-			bandwidth runs out people will be asked to do a test before
+			test before they can download your files. See our
-			they can download your files. See our
+			<a href="/#pro">subscription options</a> to get more hotlink
-			<a href="/#pro">subscription options</a> to get more direct
+			bandwidth.
-			linking bandwidth.
 		</p>
 	</div>
-	<Chart bind:this={graph_direct_link} dataType="bytes" label="Direct link bandwidth" />
+	<Chart bind:this={graph_direct_link} dataType="bytes" label="Hotlink bandwidth" />
 </div>
 
 <style>
 .progress_bar_outer {
+	display: block;
 	background-color: var(--layer_1_color);
 	width: 100%;
 	height: 3px;
+	margin: 6px 0 12px 0;
 }
 .progress_bar_inner {
 	background-color: var(--highlight_color);