Add info tooltips to the feature table
This commit is contained in:
@@ -6,9 +6,9 @@
|
||||
|
||||
Files will be removed if they have not been accessed for 120 days. When a file
|
||||
is downloaded the expiry time is reset to 120 days from the current day. This
|
||||
only happens when someone downloads more than 1% of the whole file in a single
|
||||
only happens when someone downloads more than 10% of the whole file in a single
|
||||
request. So if you have a 5 GB file the timer is only extended when you download
|
||||
at least 50 MB. The expiry timer is not updated when it was already updated
|
||||
at least 500 MB. The expiry timer is not updated when it was already updated
|
||||
within the last 24 hours.
|
||||
|
||||
File expiry is often seen as a downside of pixeldrain. But keep in mind that 120
|
||||
|
||||
8
svelte/package-lock.json
generated
8
svelte/package-lock.json
generated
@@ -20,7 +20,7 @@
|
||||
"@babel/preset-env": "^7.26.0",
|
||||
"@rollup/plugin-babel": "^6.0.4",
|
||||
"@rollup/plugin-commonjs": "^26.0.3",
|
||||
"@rollup/plugin-node-resolve": "^15.3.0",
|
||||
"@rollup/plugin-node-resolve": "^15.3.1",
|
||||
"@rollup/plugin-terser": "^0.4.4",
|
||||
"@rollup/plugin-typescript": "^11.1.6",
|
||||
"@types/jsmediatags": "^3.9.6",
|
||||
@@ -1718,9 +1718,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/plugin-node-resolve": {
|
||||
"version": "15.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.3.0.tgz",
|
||||
"integrity": "sha512-9eO5McEICxMzJpDW9OnMYSv4Sta3hmt7VtBFz5zR9273suNOydOyq/FrGeGy+KsTRFm8w0SLVhzig2ILFT63Ag==",
|
||||
"version": "15.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.3.1.tgz",
|
||||
"integrity": "sha512-tgg6b91pAybXHJQMAAwW9VuWBO6Thi+q7BCNARLwSqlmsHz0XYURtGvh/AuwSADXSI4h/2uHbs7s4FzlZDGSGA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
"@babel/preset-env": "^7.26.0",
|
||||
"@rollup/plugin-babel": "^6.0.4",
|
||||
"@rollup/plugin-commonjs": "^26.0.3",
|
||||
"@rollup/plugin-node-resolve": "^15.3.0",
|
||||
"@rollup/plugin-node-resolve": "^15.3.1",
|
||||
"@rollup/plugin-terser": "^0.4.4",
|
||||
"@rollup/plugin-typescript": "^11.1.6",
|
||||
"@types/jsmediatags": "^3.9.6",
|
||||
|
||||
@@ -55,11 +55,11 @@ export default [
|
||||
extensions: ['.svelte'],
|
||||
}),
|
||||
commonjs(),
|
||||
nodeResolve(),
|
||||
typescript({
|
||||
compilerOptions: { lib: ["es2015", "dom"] },
|
||||
verbatimModuleSyntax: true,
|
||||
nodeResolve({
|
||||
modulePaths: [process.cwd() + "/src"],
|
||||
extensions: [".svelte", ".mjs", ".js", ".json"]
|
||||
}),
|
||||
typescript(),
|
||||
|
||||
// Watch the `public` directory and refresh the browser on changes when
|
||||
// not in production
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<script>
|
||||
import Tooltip from "layout/Tooltip.svelte";
|
||||
import Euro from "../util/Euro.svelte";
|
||||
import OtherPlans from "./OtherPlans.svelte";
|
||||
</script>
|
||||
@@ -34,45 +35,76 @@ import OtherPlans from "./OtherPlans.svelte";
|
||||
<span class="bold">None</span>
|
||||
</div>
|
||||
<div class="feature_cell pro_feat">
|
||||
<span class="bold">€4 / month</span> or
|
||||
<span class="bold">€40 / year</span><br/>
|
||||
Charged through Patreon
|
||||
<Tooltip>
|
||||
<span slot="label">
|
||||
<span class="bold">€4 / month</span> or
|
||||
<span class="bold">€40 / year</span>
|
||||
</span>
|
||||
The Pro subscription is managed by Patreon. Patreon's own fees
|
||||
and sales tax will be added to this price. After paying you need
|
||||
to link your pixeldrain account to Patreon to activate the plan.
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div class="feature_cell prepaid_feat">
|
||||
<span class="bold">€1 / month minimum</span><br/>
|
||||
Only charged when usage is less than €1
|
||||
<Tooltip>
|
||||
<span slot="label" class="bold">€1 / month minimum</span>
|
||||
<p>
|
||||
The minimum fee is only charged when usage is less than €1.
|
||||
This calculation is per day, the €1 amount is divided by the
|
||||
number of days in the month and if your usage is lower than
|
||||
that, you will be charged the minimum fee.
|
||||
</p>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<div class="left_col">
|
||||
<a class="round button" href="/about#toc_3">
|
||||
<i class="icon">info</i>
|
||||
Transfer limit
|
||||
</a>
|
||||
<a href="/about#toc_3">Transfer limit</a>
|
||||
</div>
|
||||
<div class="feature_cell free_feat">
|
||||
<span class="bold">6 GB per day</span><br/>
|
||||
|
||||
Download speed is reduced to 1 MiB/s when exceeded. Max 3 concurrent
|
||||
downloads
|
||||
<Tooltip>
|
||||
<span slot="label" class="bold">6 GB per day</span>
|
||||
<p>
|
||||
Free users are limited to downloading 6 GB per day, this
|
||||
limit is linked to your IP address, even if you are logged
|
||||
in to an account.
|
||||
</p>
|
||||
<p>
|
||||
When the download limit is exceeded the download speed is
|
||||
reduced to 1 MiB/s. You can have at most three concurrent
|
||||
downloads running.
|
||||
</p>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div class="feature_cell pro_feat">
|
||||
<span class="bold">4 TB per 30 days</span><br/>
|
||||
|
||||
Transfer limit is used for downloading, sharing and hotlinking. No
|
||||
connection limit
|
||||
<Tooltip>
|
||||
<span slot="label" class="bold">4 TB per 30 days</span>
|
||||
<p>
|
||||
The transfer limit is used for downloading, sharing and
|
||||
hotlinking files.
|
||||
</p>
|
||||
<p>
|
||||
Paid plans do not have a concurrent connection limit.
|
||||
</p>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div class="feature_cell prepaid_feat">
|
||||
<span class="bold">€1 per TB transferred</span><br/>
|
||||
|
||||
Used for downloading, sharing and hotlinking. You only pay for what
|
||||
you use. No connection limit
|
||||
<Tooltip>
|
||||
<span slot="label" class="bold">€1 per TB transferred</span>
|
||||
<p>
|
||||
Prepaid does not have a transfer limit, instead you are
|
||||
charged for what you use at a rate of €1 per terabyte
|
||||
downloaded. This applies to downloading your own files,
|
||||
other people's files and others downloading your files (if
|
||||
you have hotlinking enabled in your account settings).
|
||||
</p>
|
||||
<p>
|
||||
Paid plans do not have a concurrent connection limit.
|
||||
</p>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<div class="left_col">
|
||||
<a class="round button" href="/about#toc_6">
|
||||
<i class="icon">info</i>
|
||||
Hotlinking
|
||||
</a>
|
||||
<a href="/about#toc_6">Hotlinking</a>
|
||||
</div>
|
||||
<div class="feature_cell free_feat">
|
||||
<span class="bold">Hotlinking not supported</span><br/>
|
||||
@@ -92,25 +124,55 @@ import OtherPlans from "./OtherPlans.svelte";
|
||||
</div>
|
||||
<div class="feature_cell prepaid_feat">
|
||||
<span class="bold">€4 / TB / month</span><br/>
|
||||
No limit, you only pay for what you use
|
||||
No limit, you pay for what you use
|
||||
</div>
|
||||
|
||||
<div class="left_col">
|
||||
<a class="round button" href="/about#toc_1">
|
||||
<i class="icon">info</i>
|
||||
File expiry
|
||||
</a>
|
||||
<a href="/about#toc_1">File expiry</a>
|
||||
</div>
|
||||
<div class="feature_cell free_feat">
|
||||
<span class="bold">120 days</span> (4 months)
|
||||
<Tooltip>
|
||||
<span slot="label" class="bold">120 days (4 months)</span>
|
||||
<p>
|
||||
Files expire when they have not been downloaded in the last
|
||||
120 days. A download is counted when more than 10% of the
|
||||
whole file was downloaded in a single request.
|
||||
</p>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div class="feature_cell pro_feat">
|
||||
<span class="bold">240 days</span> (8 months)<br/>
|
||||
Plans without expiry are available
|
||||
<Tooltip>
|
||||
<span slot="label" class="bold">240 days (8 months)</span>
|
||||
<p>
|
||||
The Pro plan has 240 day file expiry. The same rules apply
|
||||
as the free plan. Higher Patreon subscription plans are
|
||||
available where files do not expire at all.
|
||||
</p>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div class="feature_cell prepaid_feat">
|
||||
<span class="bold">Files do not expire</span><br/>
|
||||
While prepaid subscription plan is active
|
||||
<Tooltip>
|
||||
<span slot="label" class="bold">Files do not expire</span>
|
||||
<p>
|
||||
Files don't expire while your Prepaid plan is active. If
|
||||
your credit runs out you have one week to top up your
|
||||
balance. If you fail to do so your files will revert to the
|
||||
regular file expiry rules.
|
||||
</p>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<div class="left_col">
|
||||
Download page customization
|
||||
</div>
|
||||
<div class="feature_cell free_feat">
|
||||
<span class="bold">None</span>
|
||||
</div>
|
||||
<div class="feature_cell pro_feat">
|
||||
None
|
||||
</div>
|
||||
<div class="feature_cell prepaid_feat">
|
||||
Theme, background, header and footer image can be customized
|
||||
</div>
|
||||
|
||||
<div class="left_col">
|
||||
|
||||
71
svelte/src/layout/Tooltip.svelte
Normal file
71
svelte/src/layout/Tooltip.svelte
Normal file
@@ -0,0 +1,71 @@
|
||||
<script lang="ts">
|
||||
let button: HTMLButtonElement
|
||||
let dialog: HTMLDialogElement
|
||||
|
||||
export let style = ""
|
||||
|
||||
const open = () => {
|
||||
// Show the window so we can get the location
|
||||
dialog.showModal()
|
||||
|
||||
const edge_offset = 5
|
||||
|
||||
// Get the egdes of the screen, so the window does not spawn off-screen
|
||||
const window_rect = dialog.getBoundingClientRect()
|
||||
const max_left = window.innerWidth - window_rect.width - edge_offset
|
||||
const max_top = window.innerHeight - window_rect.height - edge_offset
|
||||
|
||||
// Get the location of the button
|
||||
const button_rect = button.getBoundingClientRect()
|
||||
|
||||
// Prevent the window from being glued to the edges
|
||||
const min_left = Math.max((button_rect.left + (button_rect.width/2)) - (window_rect.width/2), edge_offset)
|
||||
const min_top = Math.max(button_rect.bottom, edge_offset)
|
||||
|
||||
// Place the window
|
||||
dialog.style.left = Math.round(Math.min(min_left, max_left)) + "px"
|
||||
dialog.style.top = Math.round(Math.min(min_top, max_top)) + "px"
|
||||
}
|
||||
|
||||
// Close the dialog when the user clicks the background
|
||||
const click = (e: Event) => {
|
||||
if (e.target === dialog) {
|
||||
dialog.close()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<button bind:this={button} on:click={open} class="button round" style={style}>
|
||||
<i class="icon">info</i><slot name="label"></slot>
|
||||
</button>
|
||||
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
||||
<dialog bind:this={dialog} on:click={click}>
|
||||
<div class="menu">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<style>
|
||||
.button {
|
||||
flex: 0 0 content;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
dialog {
|
||||
text-align: initial;
|
||||
background-color: var(--card_color);
|
||||
color: var(--body_text_color);
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
padding: 0.5em;
|
||||
margin: 0;
|
||||
box-shadow: 2px 2px 10px var(--shadow_color);
|
||||
}
|
||||
.menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 20em;
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,10 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./",
|
||||
"lib": [
|
||||
"es2015",
|
||||
"dom"
|
||||
],
|
||||
"baseUrl": "./src",
|
||||
"verbatimModuleSyntax": true,
|
||||
"target": "ES2017",
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user