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

Add a nice background image on the home page

Browse Source
This commit is contained in:
Fornax
2022-02-21 21:53:58 +01:00
parent 2a9fc5d9d5
commit fff4410801
12 changed files with 60 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -61,24 +61,27 @@ body {
} }
header, footer, .checkers { header, footer, .checkers {
background-image: url("{{.BackgroundPattern}}"); background-image: url("{{.BackgroundPattern}}");
background-color: #111111; /* Fallback */
background-color: var(--layer_1_color); background-color: var(--layer_1_color);
background-repeat: repeat; background-repeat: repeat;
background-blend-mode: luminosity; background-blend-mode: luminosity;
} }
header, footer { header, footer {
padding-top: 70px; box-shadow: inset 1px 1px 8px 0 var(--shadow_color);
box-shadow: inset 1px 1px 10px 0 var(--shadow_color);
border-radius: 12px; border-radius: 12px;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
color: var(--layer_1_text_color);
} }
header > h1 { header > h1 {
text-shadow: 1px 1px 10px var(--shadow_color); text-shadow: 1px 1px 4px var(--shadow_color);
margin-bottom: 50px; margin-top: 69px;
margin-bottom: 69px;
} }
footer { footer > .footer_content {
padding: 200px 8px 40px 8px; background-color: rgba(0, 0, 0, 0.5);
display: inline-block;
border-radius: 8px;
margin: 300px 0 69px 0;
} }
/* Page layout elements */ /* Page layout elements */

3
res/static/ads.txt
View File

@@ -1561,6 +1561,9 @@ loopme.com, 11013, DIRECT, 6c8d5f95897a5a3b
connectad.io, 204, DIRECT, 85ac85a30c93b3e5 connectad.io, 204, DIRECT, 85ac85a30c93b3e5
appnexus.com, 2579, RESELLER, f5ab79cb980f11d1 appnexus.com, 2579, RESELLER, f5ab79cb980f11d1
quantum-advertising.com, 6222, RESELLER quantum-advertising.com, 6222, RESELLER
ucfunnel.com, pub-34BAB998A98E4882C33BA88776232BA2, DIRECT
aralego.com, pub-34BAB998A98E4882C33BA88776232BA2, DIRECT
adiiix.com, pub-34BAB998A98E4882C33BA88776232BA2, DIRECT
# End of Valueimpression # End of Valueimpression
# Pixfuture # Pixfuture

BIN
res/static/img/horsehead.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 89 KiB

32
res/template/fragments/page_wrap.html
View File

@@ -55,22 +55,24 @@ function resetMenu() {
{{define "page_bottom"}} {{define "page_bottom"}}
<footer> <footer>
<div style="display: inline-block; margin: 0 8px 0 8px;"> <div class="footer_content">
Pixeldrain is a product by <a href="//fornaxian.tech" target="_blank">Fornaxian Technologies</a> <div style="display: inline-block; margin: 0 8px 0 8px;">
Pixeldrain is a product by <a href="//fornaxian.tech" target="_blank">Fornaxian Technologies</a>
</div>
<div style="display: inline-block; margin: 0 8px 0 8px;">
(
<a href="https://www.patreon.com/pixeldrain" target="_blank">{{template `patreon.svg` .}} Patreon</a> |
<a href="https://twitter.com/Fornax96" target="_blank">{{template `twitter.svg` .}} Twitter</a> |
<a href="https://reddit.com/r/pixeldrain" target="_blank">{{template `reddit.svg` .}} Reddit</a> |
<a href="https://github.com/Fornaxian" target="_blank">{{template `github.svg` .}} GitHub</a> |
<a href="https://mastodon.social/web/@fornax" target="_blank">{{template `mastodon.svg` .}} Mastodon</a>
)
</div>
<br/>
<span class="small_footer_text" style="font-size: .75em; line-height: .75em;">
page rendered by {{.Hostname}}
</span>
</div> </div>
<div style="display: inline-block; margin: 0 8px 0 8px;">
(
<a href="https://www.patreon.com/pixeldrain" target="_blank">{{template `patreon.svg` .}} Patreon</a> |
<a href="https://twitter.com/Fornax96" target="_blank">{{template `twitter.svg` .}} Twitter</a> |
<a href="https://reddit.com/r/pixeldrain" target="_blank">{{template `reddit.svg` .}} Reddit</a> |
<a href="https://github.com/Fornaxian" target="_blank">{{template `github.svg` .}} GitHub</a> |
<a href="https://mastodon.social/web/@fornax" target="_blank">{{template `mastodon.svg` .}} Mastodon</a>
)
</div>
<br/>
<span class="small_footer_text" style="font-size: .75em; line-height: .75em;">
page rendered by {{.Hostname}}
</span>
</footer> </footer>
</div><!-- end page_body --> </div><!-- end page_body -->
{{end}} {{end}}

20
res/template/home.html
View File

@@ -5,6 +5,16 @@
{{template "meta_tags" "Free file sharing service"}} {{template "meta_tags" "Free file sharing service"}}
{{template "user_style" .}} {{template "user_style" .}}
<style> <style>
/* Override the default background with something spectacular */
header, footer, .checkers {
background-image: url("/res/img/horsehead.webp");
background-color: var(--layer_1_color);
background-repeat: no-repeat;
background-blend-mode: luminosity;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
.header_image{ .header_image{
width: 100%; width: 100%;
max-width: 800px; max-width: 800px;
@@ -91,9 +101,9 @@
</head> </head>
<body> <body>
{{template "page_top" .}} {{template "page_top" .}}
<header style="padding-bottom: 60px;"> <header style="padding-bottom: 80px; padding-top: 80px;">
<picture> <picture>
<source media="(max-width: 800px)" srcset="/res/img/header_orbitron.png"> <source media="(max-width: 700px)" srcset="/res/img/header_orbitron.png">
<img class="header_image" src="/res/img/header_orbitron_wide.png" alt="Header image"> <img class="header_image" src="/res/img/header_orbitron_wide.png" alt="Header image">
</picture> </picture>
</header> </header>
@@ -128,7 +138,11 @@
them. them.
</p> </p>
<h2 id="pro">Getting more out of pixeldrain</h2> </section>
<header>
<h1 id="pro">Getting more out of pixeldrain</h1>
</header>
<section>
<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

5
res/template/user_logout.html
View File

@@ -7,14 +7,14 @@
<body> <body>
{{template "page_top" .}} {{template "page_top" .}}
<header> <header>
<h1>Please confirm that you want to log out of your pixeldrain account</h1> <h1>Logging out of your pixeldrain account</h1>
</header> </header>
<br/> <br/>
<form method="POST" action="/logout"> <form method="POST" action="/logout">
<input type="submit" value="I want to log out of pixeldrain on this computer" class="button_highlight"/> <input type="submit" value="I want to log out of pixeldrain on this computer" class="button_highlight"/>
</form> </form>
<br/>
<section> <section>
<br/>
<h2>Why do I need to confirm my logout?</h2> <h2>Why do I need to confirm my logout?</h2>
<p> <p>
We need you to confirm your action so we can be sure that you We need you to confirm your action so we can be sure that you
@@ -29,7 +29,6 @@
logout button triggers a different request type than normal logout button triggers a different request type than normal
page visit we can confirm that you really want to log out. page visit we can confirm that you really want to log out.
</p> </p>
<br/>
</section> </section>
{{template "page_bottom" .}} {{template "page_bottom" .}}
{{template "analytics"}} {{template "analytics"}}

6
svelte/src/file_viewer/FilePicker.svelte
View File

@@ -6,6 +6,7 @@ import Modal from "../util/Modal.svelte";
let dispatch = createEventDispatcher() let dispatch = createEventDispatcher()
export let multi_select = true export let multi_select = true
export let title = ""
let modal; let modal;
let directory_element; let directory_element;
let input_search; let input_search;
@@ -86,7 +87,9 @@ const keydown = (e) => {
<button class="button round" on:click={modal.hide}> <button class="button round" on:click={modal.hide}>
<i class="icon">close</i> Cancel <i class="icon">close</i> Cancel
</button> </button>
<div class="title">Select files to add to album</div> <div class="title">
{title}
</div>
<input bind:this={input_search} on:keyup={search} class="search" type="text" placeholder="press / to search"/> <input bind:this={input_search} on:keyup={search} class="search" type="text" placeholder="press / to search"/>
<button class="button button_highlight round" on:click={done}> <button class="button button_highlight round" on:click={done}>
<i class="icon">done</i> Add <i class="icon">done</i> Add
@@ -121,6 +124,7 @@ const keydown = (e) => {
.title { .title {
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
text-align: center;
} }
.search { .search {
min-width: 100px; min-width: 100px;

2
svelte/src/file_viewer/GalleryView.svelte
View File

@@ -156,7 +156,7 @@ const drop = (e, index) => {
{/if} {/if}
</div> </div>
<FilePicker bind:this={file_picker} on:files={e => {add_files(e.detail)}} multi_select={true}></FilePicker> <FilePicker bind:this={file_picker} on:files={e => {add_files(e.detail)}} multi_select={true} title="Select files to add to album"></FilePicker>
<style> <style>
.gallery{ .gallery{

1
svelte/src/file_viewer/viewers/TextBlock.svelte
View File

@@ -14,6 +14,7 @@ export let center = false
padding-left: 8px; padding-left: 8px;
vertical-align: middle; vertical-align: middle;
color: var(--layer_1_text_color);
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
border-radius: 8px; border-radius: 8px;
padding: 8px; padding: 8px;

2
svelte/src/home_page/HomePage.svelte
View File

@@ -552,6 +552,8 @@ const keydown = (e) => {
</div> </div>
</section> </section>
{/if} {/if}
<br/>
</div> </div>
<style> <style>

2
svelte/src/user_home/AccountSettings.svelte
View File

@@ -322,7 +322,7 @@ onMount(() => {
<br/> <br/>
</section> </section>
<FilePicker bind:this={file_picker} on:files={e => {add_file(e.detail)}} multi_select={false}></FilePicker> <FilePicker bind:this={file_picker} on:files={e => {add_file(e.detail)}} multi_select={false} title="Select image file"></FilePicker>
<style> <style>
.banner_preview { .banner_preview {

2
webcontroller/user_style.go
View File

@@ -468,6 +468,6 @@ var snowstormPixeldrainStyle = pixeldrainStyleSheet{
Layer3: hsl{218, .27, .92}, // hsl(218, 27%, 92%) Layer3: hsl{218, .27, .92}, // hsl(218, 27%, 92%)
Layer4: hsl{218, .27, .94}, // hsl(218, 27%, 94%) Layer4: hsl{218, .27, .94}, // hsl(218, 27%, 94%)
Shadow: hsl{0, .0, .70}, Shadow: hsl{0, .0, .60},
Light: true, Light: true,
} }