pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update plans on the home page

Browse Source
This commit is contained in:
Wim Brand
2021-01-08 00:48:07 +01:00
parent bb26d26681
commit 7dae739e7b
3 changed files with 207 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
res/include/style/layout.css
View File

@@ -57,6 +57,7 @@ body{
background-repeat: repeat; background-repeat: repeat;
margin: 0; margin: 0;
font-family: system-ui, sans-serif; font-family: system-ui, sans-serif;
font-size: 17px;
line-height: 1.8em; line-height: 1.8em;
color: #b2b2b2; /* Fallback */ color: #b2b2b2; /* Fallback */
color: var(--text_color); color: var(--text_color);
@@ -261,16 +262,39 @@ h1, h2, h3, h4, h5, h6 {
line-height: 1em; line-height: 1em;
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
font-weight: normal;
} }
h2, h3{ /* Differentiate it a bit, else it just looks like bold text */
h1 {
font-size: 2.5em;
font-family: "light", sans-serif;
text-align: center;
}
h2 {
font-size: 2em;
font-family: "light", sans-serif;
text-align: center;
border-bottom: 1px var(--layer_4_color_border) solid;
}
h3 {
font-size: 1.5em;
font-family: "light", sans-serif;
border-bottom: 1px var(--layer_3_color_border) solid; border-bottom: 1px var(--layer_3_color_border) solid;
} }
h1{font-size: 2.25em; font-family: "light", sans-serif; font-weight: normal;} h4 {
h2{font-size: 2em; font-family: "light", sans-serif; font-weight: normal;} font-size: 1.25em;
h3{font-size: 1.5em; font-family: "light", sans-serif; font-weight: normal;} font-family: sans-serif;
h4{font-size: 1.25em; font-family: sans-serif; font-weight: normal;} border-bottom: 1px var(--layer_2_color_border) solid;
h5{font-size: 1em; font-family: sans-serif; font-weight: normal;} }
h6{font-size: .75em; font-family: sans-serif; font-weight: normal;} h5 {
font-size: 1em;
font-family: sans-serif;
border-bottom: 1px var(--layer_1_color_border) solid;
}
h6{
font-size: .75em;
font-family: sans-serif;
}
p, .indent { p, .indent {
margin: 10px; margin: 10px;

338
res/template/home.html
View File

@@ -26,26 +26,27 @@
padding: 5px; padding: 5px;
} }
.big_number { .big_number {
font-size: 24px; font-size: 1.5em;
font-weight: bold; font-weight: bold;
line-height: 1em; line-height: 1em;
text-align: center; text-align: center;
display: block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
background-color: var(--highlight_color); background-color: var(--highlight_color);
color: var(--highlight_text_color); color: var(--highlight_text_color);
border-radius: 30px; border-radius: 30px;
padding: 5px; padding: 0.15em;
margin-right: 10px; margin-right: 0.4em;
width: 34px; width: 1.4em;
height: 34px; height: 1.4em;
float: left; vertical-align: middle;
} }
.instruction_text { .instruction_text {
margin: 5px; margin: 0.1em;
font-size: 24px; font-size: 1.5em;
display: block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
vertical-align: middle;
} }
.social_button { .social_button {
margin: 5px; margin: 5px;
@@ -56,44 +57,62 @@
margin: 5px 15px; margin: 5px 15px;
} }
.features { .feat_table {
width: 100%; display: flex;
text-align: center; flex-direction: column;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
} }
.features > div { .feat_table > div {
display: inline-block; display: flex;
margin: 12px; flex-direction: row;
width: 18em; }
vertical-align: top; .feat_table > div > div:first-child { max-width: 14em; }
text-align: left; .feat_table > div > div {
white-space: initial; flex: 1 0 0;
margin: 0.2em;
padding: 0.5em;
text-align: center;
}
.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); background-color: var(--layer_3_color);
box-shadow: 1px 1px 6px -2px var(--shadow_color); box-shadow: 1px 1px 3px -1px var(--shadow_color);
text-shadow: 1px 1px 3px var(--shadow_color);
} }
.features > div > h3 { .feat_table > div > .feat_pro {
text-align: center; background-color: var(--layer_4_color);
border-bottom: none; box-shadow: 1px 1px 3px 0 var(--shadow_color);
margin: 10px; text-shadow: 1px 1px 6px var(--shadow_color);
} }
.features > div > .price { .feat_table > div > .feat_highlight {
text-align: center; border: 1px solid var(--highlight_color)
margin-bottom: 6px;
} }
.features > div > .feature { .text_highlight {
display: block; color: var(--highlight_color);
text-align: center; text-shadow: 0 0 4px var(--shadow_color);
padding: 6px; font-size: 1.1em;
border-bottom: 1px solid var(--layer_3_color_border); font-weight: bold;
} }
.features > div > ul {
padding-left: 20px; @media (max-width: 800px) {
.feat_table > div {
flex-direction: column;
margin: 0.2em;
border-radius: 6px;
}
.feat_table > div > div {
margin: 0;
border-radius: 0;
}
} }
.features > div > ul > li { @media (min-width: 800px) {
margin: 8px; .feat_table > div > div.round_tl { border-top-left-radius: 0.5em; }
text-align: center; .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; }
} }
{{template `modal.css`}} {{template `modal.css`}}
@@ -109,7 +128,9 @@
<br/> <br/>
<div class="page_content" style="padding-top: 0;"> <div class="page_content" style="padding-top: 0;">
<div id="instruction_1" class="instruction_highlight" style="margin-top: 0;"><div class="limit_width"> <div id="instruction_1" class="instruction_highlight" style="margin-top: 0;"><div class="limit_width">
<span class="big_number">1</span><span class="instruction_text">Select files to upload</span> <span class="big_number">1</span>
<span class="instruction_text">Select files to upload</span>
<br/>
You can also drop files anywhere on this page from your file You can also drop files anywhere on this page from your file
manager manager
</div></div> </div></div>
@@ -203,152 +224,81 @@
For more information about pixeldrain see the For more information about pixeldrain see the
<a href="/about">about</a> page. <a href="/about">about</a> page.
</p> </p>
<h2>Features</h2>
<h2 id="pro">Pro</h2>
<p> <p>
By purchasing a subscription you support pixeldrain on its By purchasing a subscription you support pixeldrain on its
mission to make content sharing easier, safer and faster for mission to make content sharing easier, safer and faster for
everyone. everyone.
</p> </p>
</div> <div class="feat_table">
<div class="features"> <div>
<div> <div></div>
<h3>Free</h3> <div class="feat_normal round_tl">Free</div>
<div class="price">€0 per month</div> <div class="feat_pro feat_highlight round_tr">Pro</div>
<img src="/res/img/benefit_0_small.png" style="width: 100%;"> </div>
<div>
<a href="#" onclick="return explainFileExpiry()" class="feature"> <div class="feat_label">Size limit per file</div>
Files expire 30 days after last view <div class="feat_normal">5 GB per file</div>
</a> <div class="feat_pro"><span class="text_highlight">15 GB</span> per file</div>
<div class="feature">No account required</div> </div>
<div class="feature">Max file size 10 GB</div> <div>
<div class="feature">Access your files anywhere with a pixeldrain account</div> <div class="feat_label"><a href="javascript:void(0);" onclick="return explainFileExpiry();">File expiry</a></div>
<div class="feature">Group multiple files together in a single link with lists</div> <div class="feat_normal">30 days after the last time it is viewed</div>
</div> <div class="feat_pro"><span class="text_highlight">90 days</span> after the last time it is viewed</div>
<div> </div>
<h3>I'm doing my part!</h3> <div>
<div class="price">€2 per month + tax</div> <div class="feat_label">Advertisements</div>
<img src="/res/img/benefit_1_small.png" style="width: 100%;"> <div class="feat_normal">Pop-up or a banner ad on the file viewer page</div>
<div class="feat_pro">
<a href="#" onclick="return explainFileExpiry()" class="feature"> <span class="text_highlight">No ads</span> on files
Files expire 2 months after last view you share, or when viewing files from other
</a> users
</div>
<div class="feature">No ads when viewing files</div> </div>
<div class="feature">No ads on files you uploaded</div> <div>
<!--<a href="#" onclick="return explainDirectLinking()" class="feature"> <div class="feat_label">Privacy</div>
3 TB of direct linking bandwidth <div class="feat_normal">
</a>--> No trackers, but advertisers can see your IP address
and browser fingerprint
<div style="text-align: center; padding: 8px;"> </div>
{{if eq .User.Subscription.ID "patreon_1"}} <div class="feat_pro">
<strong>You have this plan. Thank you for supporting pixeldrain!</strong> <span class="text_highlight">Completely
{{else}} private</span>. No third party scripts and no
<a href="/subscribe?plan=t1" class="button button_highlight" style="width: 90%;"> logging
Get Started </div>
</a> </div>
{{end}} <div>
</div> <div class="feat_label">Online file previews</div>
</div> <div class="feat_pro">View image, video, audio, PDF and text files directly in your web browser</div>
<div> </div>
<h3>Resolve</h3> <div>
<div class="price">€4 per month + tax</div> <div class="feat_label"><a href="javascript:void(0);" onclick="return explainDirectLinking();">Direct linking</a></div>
<img src="/res/img/benefit_5_small.png" style="width: 100%;"> <div class="feat_pro">Rate limiting mode will be enabled when a file has 3 times more downloads than views</div>
</div>
<a href="#" onclick="return explainFileExpiry()" class="feature"> <div>
Files expire 3 months after last view <div></div>
</a> <div class="feat_normal round_bl">Free</div>
<div class="feat_pro feat_highlight round_br">
<div class="feature">No ads when viewing files</div> <button class="button_highlight">Only € 1 per month!</button>
<div class="feature">No ads on files you uploaded</div> <br/>
<!--<a href="#" onclick="return explainDirectLinking()" class="feature"> Billed annually. We accept Stripe and PayPal
6 TB of direct linking bandwidth </div>
</a>-->
<div style="text-align: center; padding: 8px;">
{{if eq .User.Subscription.ID "patreon_5"}}
<strong>You have this plan. Thank you for supporting pixeldrain!</strong>
{{else}}
<a href="/subscribe?plan=t5" 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_small.png" style="width: 100%;">
<a href="#" onclick="return explainFileExpiry()" class="feature">
Files expire 4 months after last view
</a>
<div class="feature">No ads when viewing files</div>
<div class="feature">No ads on files you uploaded</div>
<!--<a href="#" onclick="return explainDirectLinking()" class="feature">
12 TB of direct linking bandwidth
</a>-->
<div style="text-align: center; padding: 8px;">
{{if eq .User.Subscription.ID "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_small.png" style="width: 100%;">
<a href="#" onclick="return explainFileExpiry()" class="feature">
Files expire 8 months after last view
</a>
<div class="feature">No ads when viewing files</div>
<div class="feature">No ads on files you uploaded</div>
<!--<a href="#" onclick="return explainDirectLinking()" class="feature">
24 TB of direct linking bandwidth
</a>-->
<div style="text-align: center; padding: 8px;">
{{if eq .User.Subscription.ID "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_small.png" style="width: 100%;">
<a href="#" onclick="return explainFileExpiry()" class="feature">
Files you upload never expire
</a>
<div class="feature">No ads when viewing files</div>
<div class="feature">No ads on files you uploaded</div>
<!--<a href="#" onclick="return explainDirectLinking()" class="feature">
48 TB of direct linking bandwidth
</a>-->
<div style="text-align: center; padding: 8px;">
{{if eq .User.Subscription.ID "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>
</div> </div>
<br/>
<h2>Premium</h2>
<p>
Premium is more catered toward file storage and content
delivery. This plan enables the Buckets feature which
provides a more structured way to manage your files on
pixeldrain. Buckets allow direct linking to files without
running into rate limiting.
</p>
<p>
When you choose for Premium you will also get all the
benefits of the Pro subscription.
</p>
</div> </div>
</div> </div>
@@ -361,14 +311,18 @@
<p> <p>
Unlike most other sharing sites pixeldrain uses a postponing Unlike most other sharing sites pixeldrain uses a postponing
system for expiring files. When a file is freshly uploaded it system for expiring files. When a file is freshly uploaded it
gets 30 days by default (this can be extended by supporting the gets 30 days by default (90 days if you have the pro plan).
site on patreon). After these 30 days we will check when the After these 30 days we will check when the file was last viewed.
file was last viewed. Files which are regularly viewed could Files which are regularly viewed could still bring new users to
still bring new users to the platform, it would be rude to show the platform, it would be rude to show these people a 404 Not
these people a 404 Not Found page. So if the file was viewed in Found page. So if the file was viewed in the last 30 days we
the last 30 days we will simply postpone the next check a month. will simply postpone the next check a month. If the file was not
If the file was not viewed however it will immediately be viewed however it will immediately be removed.
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>
<p> <p>
This way we can minimize dead links, and you won't have to tell This way we can minimize dead links, and you won't have to tell
@@ -377,9 +331,9 @@
</template> </template>
<template id="tpl_direct_linking"> <template id="tpl_direct_linking">
<p> <p>
Normally when viewing a file on pixeldrain it has to go through When viewing a file on pixeldrain it has to go through the file
the file viewer. Files which are directly downloaded without viewer. Files which are directly downloaded without visiting the
visiting the file viewer are blocked after a while. file viewer are blocked after a while.
</p> </p>
<p> <p>
Direct linking allows you to share files without going through Direct linking allows you to share files without going through

38
webcontroller/user_style.go
View File

@@ -51,8 +51,10 @@ type pixeldrainStyleSheet struct {
Layer1Shadow int // Deep layers have little shadow Layer1Shadow int // Deep layers have little shadow
Layer2Color hsl Layer2Color hsl
Layer2Shadow int Layer2Shadow int
Layer3Color hsl // Highest and brightest layer Layer3Color hsl
Layer3Shadow int // High layers have lots of shadow Layer3Shadow int
Layer4Color hsl // Highest and brightest layer
Layer4Shadow int // High layers have lots of shadow
ShadowColor hsl ShadowColor hsl
} }
@@ -82,6 +84,9 @@ func (s pixeldrainStyleSheet) String() string {
--layer_3_color: #%s; --layer_3_color: #%s;
--layer_3_color_border: #%s; --layer_3_color_border: #%s;
--layer_3_shadow: %s; --layer_3_shadow: %s;
--layer_4_color: #%s;
--layer_4_color_border: #%s;
--layer_4_shadow: %s;
--shadow_color: #%s; --shadow_color: #%s;
}`, }`,
@@ -106,6 +111,9 @@ func (s pixeldrainStyleSheet) String() string {
s.Layer3Color.RGB(), s.Layer3Color.RGB(),
s.Layer3Color.add(0, 0, .05).RGB(), s.Layer3Color.add(0, 0, .05).RGB(),
fmt.Sprintf("%dpx", s.Layer3Shadow), fmt.Sprintf("%dpx", s.Layer3Shadow),
s.Layer4Color.RGB(),
s.Layer4Color.add(0, 0, .05).RGB(),
fmt.Sprintf("%dpx", s.Layer4Shadow),
s.ShadowColor.RGB(), s.ShadowColor.RGB(),
) )
} }
@@ -213,6 +221,8 @@ var defaultPixeldrainStyle = pixeldrainStyleSheet{
Layer2Shadow: 5, Layer2Shadow: 5,
Layer3Color: hsl{0, 0, .15}, Layer3Color: hsl{0, 0, .15},
Layer3Shadow: 7, Layer3Shadow: 7,
Layer4Color: hsl{0, 0, .18},
Layer4Shadow: 9,
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
} }
@@ -255,6 +265,8 @@ var solarizedDarkStyle = pixeldrainStyleSheet{
Layer2Shadow: 5, Layer2Shadow: 5,
Layer3Color: hsl{192, .95, .17}, Layer3Color: hsl{192, .95, .17},
Layer3Shadow: 7, Layer3Shadow: 7,
Layer4Color: hsl{192, .99, .19},
Layer4Shadow: 9,
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
} }
@@ -270,12 +282,14 @@ var maroonStyle = pixeldrainStyleSheet{
ScrollbarHoverColor: hsl{0, .75, .4}, ScrollbarHoverColor: hsl{0, .75, .4},
ScrollbarBackgroundColor: hsl{0, 0, 0}, ScrollbarBackgroundColor: hsl{0, 0, 0},
Layer1Color: hsl{0, .5, .07}, Layer1Color: hsl{0, .5, .05},
Layer1Shadow: 3, Layer1Shadow: 3,
Layer2Color: hsl{0, .6, .1}, // hsl{0, .8, .15}, Layer2Color: hsl{0, .6, .08}, // hsl{0, .8, .15},
Layer2Shadow: 5, Layer2Shadow: 5,
Layer3Color: hsl{0, .9, .2}, Layer3Color: hsl{0, .9, .14},
Layer3Shadow: 7, Layer3Shadow: 7,
Layer4Color: hsl{0, .9, .20},
Layer4Shadow: 9,
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
} }
@@ -297,6 +311,8 @@ var hackerStyle = pixeldrainStyleSheet{
Layer2Shadow: 5, Layer2Shadow: 5,
Layer3Color: hsl{120, .3, .08}, Layer3Color: hsl{120, .3, .08},
Layer3Shadow: 7, Layer3Shadow: 7,
Layer4Color: hsl{120, .5, .12},
Layer4Shadow: 9,
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
} }
@@ -318,6 +334,8 @@ var cantaPixeldrainStyle = pixeldrainStyleSheet{
Layer2Shadow: 5, Layer2Shadow: 5,
Layer3Color: hsl{172, .06, .25}, // hsl(172, 6%, 25%) Layer3Color: hsl{172, .06, .25}, // hsl(172, 6%, 25%)
Layer3Shadow: 6, Layer3Shadow: 6,
Layer4Color: hsl{172, .07, .30}, // hsl(172, 6%, 25%)
Layer4Shadow: 7,
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
} }
@@ -339,6 +357,8 @@ var arcPixeldrainStyle = pixeldrainStyleSheet{
Layer2Shadow: 5, Layer2Shadow: 5,
Layer3Color: hsl{223, .12, .29}, Layer3Color: hsl{223, .12, .29},
Layer3Shadow: 7, Layer3Shadow: 7,
Layer4Color: hsl{223, .10, .32},
Layer4Shadow: 9,
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
} }
@@ -354,12 +374,14 @@ var deepseaPixeldrainStyle = pixeldrainStyleSheet{
ScrollbarHoverColor: hsl{12, .38, .26}, // hsl(12, 38%, 26%) ScrollbarHoverColor: hsl{12, .38, .26}, // hsl(12, 38%, 26%)
ScrollbarBackgroundColor: hsl{0, 0, .11}, // hsl(0, 0%, 11%) ScrollbarBackgroundColor: hsl{0, 0, .11}, // hsl(0, 0%, 11%)
Layer1Color: hsl{160, .27, .07}, Layer1Color: hsl{160, .27, .05},
Layer1Shadow: 3, Layer1Shadow: 3,
Layer2Color: hsl{163, .26, .11}, // hsl(163, 26%, 11%) Layer2Color: hsl{163, .26, .09}, // hsl(163, 26%, 11%)
Layer2Shadow: 5, Layer2Shadow: 5,
Layer3Color: hsl{161, .28, .14}, // hsl(161, 28%, 14%) Layer3Color: hsl{161, .28, .12}, // hsl(161, 28%, 14%)
Layer3Shadow: 7, Layer3Shadow: 7,
Layer4Color: hsl{161, .32, .15},
Layer4Shadow: 9,
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
} }