Remove all advertising-related code
This commit is contained in:
@@ -1,73 +0,0 @@
|
||||
<script context="module">
|
||||
import { writable } from "svelte/store";
|
||||
export const adsplus_load = writable(false)
|
||||
export const adsplus_loaded = writable(false)
|
||||
export const adaround_load = writable(false)
|
||||
export const adaround_loaded = writable(false)
|
||||
export const flyingsquare_load = writable(false)
|
||||
export const flyingsquare_loaded = writable(false)
|
||||
export const valueimpression_load = writable(false)
|
||||
export const valueimpression_loaded = writable(false)
|
||||
|
||||
export const load_ad = (ad_type) => {
|
||||
if (ad_type === "ads.plus") {
|
||||
adsplus_load.set(true)
|
||||
} else if (ad_type === "adaround") {
|
||||
adaround_load.set(true)
|
||||
} else if (ad_type === "flyingsquare") {
|
||||
flyingsquare_load.set(true)
|
||||
} else if (ad_type === "valueimpression") {
|
||||
valueimpression_load.set(true)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// This script makes sure that each head element is only loaded once. The _load
|
||||
// stores are for telling this script to load a head element, and the _loaded
|
||||
// stores are for telling the ads that the head element has finished loading
|
||||
|
||||
let adsplus = false
|
||||
adsplus_load.subscribe(v => adsplus = v)
|
||||
const adsplus_load_event = () => {
|
||||
adsplus_loaded.set(true)
|
||||
console.debug("finished loading adsplus head element")
|
||||
}
|
||||
|
||||
let adaround = false
|
||||
adaround_load.subscribe(v => adaround = v)
|
||||
const adaround_load_event = () => {
|
||||
adaround_loaded.set(true)
|
||||
console.debug("finished loading adaround head element")
|
||||
}
|
||||
|
||||
let flyingsquare = false
|
||||
flyingsquare_load.subscribe(v => flyingsquare = v)
|
||||
const flyingsquare_load_event = () => {
|
||||
flyingsquare_loaded.set(true)
|
||||
console.debug("finished loading flyingsquare head element")
|
||||
}
|
||||
|
||||
let valueimpression = false
|
||||
valueimpression_load.subscribe(v => valueimpression = v)
|
||||
const valueimpression_load_event = () => {
|
||||
valueimpression_loaded.set(true)
|
||||
console.debug("finished loading valueimpression head element")
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
{#if adsplus}
|
||||
<script on:load={adsplus_load_event} async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
|
||||
{/if}
|
||||
{#if adaround}
|
||||
<script on:load={adaround_load_event} async src="/res/script/adaround.js"></script>
|
||||
{/if}
|
||||
{#if flyingsquare}
|
||||
<script on:load={flyingsquare_load_event} async src="/res/script/flyingsquare.js"></script>
|
||||
{/if}
|
||||
{#if valueimpression}
|
||||
<script on:load={valueimpression_load_event} async defer src="//services.vlitag.com/adv1/?q=f8197b031408cd00d0ba7385af21bec5"></script>
|
||||
<script> var vitag = vitag || {};</script>
|
||||
{/if}
|
||||
</svelte:head>
|
||||
@@ -1,248 +0,0 @@
|
||||
<script>
|
||||
import { onMount } from "svelte"
|
||||
import Mastodon from "../icons/Mastodon.svelte";
|
||||
import Reddit from "../icons/Reddit.svelte";
|
||||
import Twitter from "../icons/Twitter.svelte";
|
||||
import { color_by_name_no_prefix } from "../util/Util.svelte";
|
||||
import * as head from "./AdHead.svelte"
|
||||
|
||||
let container
|
||||
let banner
|
||||
let ad_type = ""
|
||||
|
||||
onMount(() => {
|
||||
let url_ads = new URL(window.location.href).searchParams.get("ads")
|
||||
if (url_ads) {
|
||||
set_ad_type(url_ads)
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
// 20% pixeldrain socials
|
||||
// 20% reviews
|
||||
// 50% patreon
|
||||
|
||||
let rand = Math.random()
|
||||
if (rand < 0.2) {
|
||||
set_ad_type("socials")
|
||||
} else if (rand < 0.4) {
|
||||
set_ad_type("reviews")
|
||||
} else {
|
||||
set_ad_type("patreon_support")
|
||||
}
|
||||
})
|
||||
|
||||
let set_ad_type = async t => {
|
||||
ad_type = t
|
||||
head.load_ad(t)
|
||||
resize()
|
||||
|
||||
console.log("leaderboard ad is " + t)
|
||||
}
|
||||
|
||||
// We scale the size of the banner based on the size of the screen. But because
|
||||
// some things don't scale easily like iframes and javascript ads we use a CSS
|
||||
// transformation instead of changing the actual dimensions
|
||||
const resize = () => {
|
||||
if (!banner) {
|
||||
return
|
||||
}
|
||||
|
||||
let scaleWidth = 1
|
||||
let scaleHeight = 1
|
||||
let minWindowHeight = 600
|
||||
let bannerWidth = banner.offsetWidth
|
||||
let bannerHeight = banner.offsetHeight
|
||||
|
||||
if (window.innerWidth < bannerWidth) {
|
||||
scaleWidth = window.innerWidth / bannerWidth
|
||||
}
|
||||
if (window.innerHeight < minWindowHeight) {
|
||||
scaleHeight = window.innerHeight / minWindowHeight
|
||||
}
|
||||
|
||||
// The smaller scale is the scale we'll use
|
||||
let scale = scaleWidth < scaleHeight ? scaleWidth : scaleHeight
|
||||
|
||||
// Because of the scale transformation the automatic margins don't work
|
||||
// anymore. So we have to manually calculate the margin. Here we take the
|
||||
// width of the viewport - the width of the ad to calculate the amount of
|
||||
// pixels around the ad. We multiply the ad size by the scale we calculated
|
||||
// to account for the smaller size.
|
||||
let offset = (window.innerWidth - (bannerWidth * scale)) / 2
|
||||
|
||||
container.style.height = (bannerHeight * scale) + "px"
|
||||
banner.style.marginLeft = offset + "px"
|
||||
banner.style.transform = "scale(" + scale + ")"
|
||||
}
|
||||
|
||||
head.adsplus_loaded.subscribe(v => {
|
||||
if (v) {
|
||||
window.googletag = window.googletag || {cmd: []};
|
||||
googletag.cmd.push(function() {
|
||||
googletag.defineSlot('/21673142571/299__pixeldrain.com__default__728x90_1', [728, 90], 'div-gpt-ad-pixeldraincom728x90_1').addService(googletag.pubads());
|
||||
googletag.pubads().collapseEmptyDivs();
|
||||
googletag.enableServices();
|
||||
});
|
||||
googletag.cmd.push(function() { googletag.display('div-gpt-ad-pixeldraincom728x90_1'); });
|
||||
}
|
||||
})
|
||||
head.valueimpression_loaded.subscribe(v => {
|
||||
if (v) {
|
||||
(vitag.Init = window.vitag.Init || []).push(function(){viAPItag.display("vi_1994884987")})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<svelte:window on:resize={resize} on:load={resize}/>
|
||||
|
||||
<svelte:head>
|
||||
{#if ad_type === "nextmillennium"}
|
||||
<script async src="https://powerad.ai/script.js"></script>
|
||||
{/if}
|
||||
</svelte:head>
|
||||
|
||||
<div bind:this={container}>
|
||||
{#if ad_type === "aads"}
|
||||
<iframe bind:this={banner} class="banner"
|
||||
data-aa="73974"
|
||||
src="//ad.a-ads.com/73974?size=728x90&background_color={color_by_name_no_prefix('body_color')}&text_color={color_by_name_no_prefix('body_text_color')}&title_color={color_by_name_no_prefix('highlight_color')}&title_hover_color={color_by_name_no_prefix('highlight_color')}&link_color={color_by_name_no_prefix('highlight_color')}&link_hover_color={color_by_name_no_prefix('highlight_color')}"
|
||||
style="width:728px; height:90px; border:0px; padding:0; overflow:hidden; background-color: transparent;"
|
||||
title="A-ads advertisement">
|
||||
</iframe>
|
||||
{:else if ad_type === "brave"}
|
||||
<a bind:this={banner} class="banner" style="display: inline-block; width: 728px; height: 90px;" href="/click/MdUXxSov?target=https%3A%2F%2Fbrave.com%2Fpix009">
|
||||
<img src="/res/img/misc/brave-728x90.png" style="width: 100%; height: 100%" alt="Brave ad"/>
|
||||
</a>
|
||||
{:else if ad_type === "ads.plus"}
|
||||
<!-- This is the tag for the unit and should be placed in the respective ad spot in the body part of the page -->
|
||||
<!-- /21673142571/299__pixeldrain.com__default__728x90_1 -->
|
||||
<div bind:this={banner} class="banner" id='div-gpt-ad-pixeldraincom728x90_1' style='width: 728px; height: 90px;'>
|
||||
</div>
|
||||
{:else if ad_type === "pixfuture"}
|
||||
<!-- We don't bind the pixfuture ad to the banner variable because pixfuture does its own scaling -->
|
||||
<!-- AuctionX Display platform tag START -->
|
||||
<div class="banner" id="27517x728x90x4605x_ADSLOT1" clickTrack="%%CLICK_URL_ESC%%"></div>
|
||||
<script type="text/javascript" async src="https://served-by.pixfuture.com/www/delivery/headerbid.js" slotId="27517x728x90x4605x_ADSLOT1" refreshTime="5" refreshInterval="60"></script>
|
||||
<!-- AuctionX Display platform tag END -->
|
||||
{:else if ad_type === "adaround"}
|
||||
<div bind:this={banner} class="_fa7cdd4c68507744 banner" data-zone="d8764be36c134d3d807abb2a073dc010" style="width:728px;height:90px;display: inline-block;margin: 0 auto"></div>
|
||||
{:else if ad_type === "flyingsquare"}
|
||||
<div bind:this={banner} class="xc449bad4854773ff banner" data-zone="28ebf286bb7d4446a5ba43b0ead8f1bb" style="width:728px;height:90px;display: inline-block;margin: 0 auto"></div>
|
||||
{:else if ad_type === "valueimpression"}
|
||||
<!-- Valueimpression overrides the style of its div after loading,
|
||||
messing up our scaling script, so we wrap it in another div of the
|
||||
correct size -->
|
||||
<div bind:this={banner} class="banner" style="width: 728px; height: 90px; overflow: hidden;">
|
||||
<div class="adsbyvli" data-ad-slot="vi_1994884987" style="width: 728px; height: 90px"></div>
|
||||
</div>
|
||||
{:else if ad_type === "nextmillennium"}
|
||||
|
||||
<div bind:this={banner} class="banner" style="width: 728px; height: 90px;"></div>
|
||||
|
||||
{:else if ad_type === "pixeldrain_social"}
|
||||
|
||||
<map name="socials_map">
|
||||
<area target="_blank" alt="Pixeldrain on Reddit" title="Pixeldrain on Reddit" href="https://reddit.com/r/pixeldrain" coords="0,38,364,90" shape="rect">
|
||||
<area target="_blank" alt="Pixeldrain on Twitter" title="Pixeldrain on Twitter" href="https://twitter.com/Fornax96" coords="364,38,728,90" shape="rect">
|
||||
</map>
|
||||
<img bind:this={banner} usemap="#socials_map" class="banner" src="/res/img/advertising/pixeldrain_socials.webp" style="display: inline-block; width: 728px; height: 90px;" alt="Pixeldrain social media"/>
|
||||
|
||||
{:else if ad_type === "patreon_support"}
|
||||
|
||||
<div class="banner support_banner">
|
||||
<span style="display: block; margin-bottom: 2px;">
|
||||
No ads today. Pixeldrain is currently funded by our subscribers!
|
||||
</span>
|
||||
<a href="/#pro" rel="noreferrer" class="button button_highlight" target="_blank">
|
||||
<i class="icon">bolt</i>
|
||||
Support Pixeldrain to help keep the project going
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{:else if ad_type === "socials"}
|
||||
<div class="banner center">
|
||||
<div class="socials">
|
||||
Pixeldrain is on the fediverse!<br/>
|
||||
|
||||
<a href="https://mastodon.social/@fornax" rel="noreferrer" class="button" target="_blank" style="background-color: #595aff; color: #ffffff;">
|
||||
<i class="icon small">people</i>
|
||||
Mastodon
|
||||
</a>
|
||||
<a href="https://lemmy.fornaxian.tech/c/pixeldrain"
|
||||
rel="noreferrer" class="button" target="_blank" style="background-color: #14854f; color: #ffffff;"
|
||||
>
|
||||
<i class="icon small">people</i>
|
||||
Lemmy
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="socials">
|
||||
And on legacy media too<br/>
|
||||
|
||||
<a href="https://twitter.com/Fornax96" rel="noreferrer" class="button" target="_blank" style="background-color: #1a8cd8; color: #ffffff;">
|
||||
<i class="icon small">people</i>
|
||||
Twitter
|
||||
</a>
|
||||
<a href="https://www.reddit.com/r/PixelDrain"
|
||||
rel="noreferrer" class="button" target="_blank" style="background-color: #ff4500; color: #ffffff;"
|
||||
>
|
||||
<i class="icon small">people</i>
|
||||
Reddit
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{:else if ad_type === "reviews"}
|
||||
|
||||
<div class="banner support_banner">
|
||||
<span style="display: block; margin-bottom: 2px;">
|
||||
Are you liking pixeldrain? Write a review! It really helps
|
||||
</span>
|
||||
<a href="https://alternativeto.net/software/pixeldrain/about/"
|
||||
rel="noreferrer" class="button" target="_blank" style="background-color: #0C9EF0; color: #FFFFFF; font-weight: bold;"
|
||||
>
|
||||
<i class="icon">rate_review</i>
|
||||
AlternativeTo
|
||||
</a>
|
||||
<a href="https://www.trustpilot.com/review/pixeldrain.com"
|
||||
rel="noreferrer" class="button" target="_blank" style="background-color: #00B67A; color: #FFFFFF; font-weight: bold;"
|
||||
>
|
||||
<i class="icon">rate_review</i>
|
||||
Trustpilot
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.banner {
|
||||
display: block;
|
||||
margin: auto;
|
||||
transform-origin: 0 0;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
.support_banner {
|
||||
text-align: center;
|
||||
padding: 2px;
|
||||
}
|
||||
.socials {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
/* Try to avoid text wrapping */
|
||||
@media(max-width: 600px) {
|
||||
.banner {
|
||||
font-size: 1em;
|
||||
}
|
||||
.socials {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,101 +0,0 @@
|
||||
<script>
|
||||
import { createEventDispatcher, onMount, tick } from "svelte"
|
||||
import { color_by_name_no_prefix } from "../util/Util.svelte";
|
||||
import * as head from "./AdHead.svelte"
|
||||
|
||||
let dispatch = createEventDispatcher()
|
||||
let ad_type = ""
|
||||
let visible = false
|
||||
|
||||
onMount(() => {
|
||||
let url_ads = new URL(window.location.href).searchParams.get("ads")
|
||||
if (url_ads) {
|
||||
set_ad_type(url_ads)
|
||||
return
|
||||
}
|
||||
|
||||
// If the screen is too small to display the full skyscraper ad, we don't
|
||||
// show it
|
||||
if (document.body.clientWidth < 800 || document.body.clientHeight < 700) {
|
||||
return
|
||||
}
|
||||
|
||||
set_ad_type("pixfuture")
|
||||
})
|
||||
|
||||
let set_ad_type = async t => {
|
||||
ad_type = t
|
||||
head.load_ad(t)
|
||||
|
||||
visible = true
|
||||
await tick() // Wait for skyscraper div to render
|
||||
dispatch("visibility", true)
|
||||
|
||||
console.log("skyscraper ad is " + t)
|
||||
}
|
||||
|
||||
head.adsplus_loaded.subscribe(v => {
|
||||
if (v) {
|
||||
window.googletag = window.googletag || {cmd: []};
|
||||
googletag.cmd.push(function() {
|
||||
googletag.defineSlot('/21673142571/299__pixeldrain.com__default__160x600_1', [160, 600], 'div-gpt-ad-pixeldraincom160x600_1').addService(googletag.pubads());
|
||||
googletag.pubads().collapseEmptyDivs();
|
||||
googletag.enableServices();
|
||||
});
|
||||
googletag.cmd.push(function() { googletag.display('div-gpt-ad-pixeldraincom160x600_1'); });
|
||||
}
|
||||
})
|
||||
head.valueimpression_loaded.subscribe(v => {
|
||||
if (v) {
|
||||
(vitag.Init = window.vitag.Init || []).push(function(){viAPItag.display("vi_1994884988")})
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
{#if visible}
|
||||
<div class="skyscraper">
|
||||
<div class="ad_space">
|
||||
{#if ad_type === "aads"}
|
||||
<iframe
|
||||
data-aa="1811738"
|
||||
src="//ad.a-ads.com/1811738?size=160x600&background_color={color_by_name_no_prefix('body_color')}&text_color={color_by_name_no_prefix('body_text_color')}&title_color={color_by_name_no_prefix('highlight_color')}&title_hover_color={color_by_name_no_prefix('highlight_color')}&link_color={color_by_name_no_prefix('highlight_color')}&link_hover_color={color_by_name_no_prefix('highlight_color')}"
|
||||
style="width:160px; height:600px; border:0px; padding:0; overflow:hidden; background-color: transparent;"
|
||||
title="A-ads advertisement">
|
||||
</iframe>
|
||||
{:else if ad_type === "ads.plus"}
|
||||
<!-- /21673142571/299__pixeldrain.com__default__160x600_1 -->
|
||||
<div id='div-gpt-ad-pixeldraincom160x600_1' style='width: 160px; height: 600px;'></div>
|
||||
{:else if ad_type === "pixfuture"}
|
||||
<!-- AuctionX Display platform tag START -->
|
||||
<div id="27513x160x600x4605x_ADSLOT1" clickTrack="%%CLICK_URL_ESC%%" style="display: block; margin: auto;"></div>
|
||||
<script type="text/javascript" async src="https://served-by.pixfuture.com/www/delivery/headerbid.js" slotId="27513x160x600x4605x_ADSLOT1" refreshTime="5" refreshInterval="60"></script>
|
||||
<!-- AuctionX Display platform tag END -->
|
||||
{:else if ad_type === "adaround"}
|
||||
<div class="_fa7cdd4c68507744" data-zone="2a0dbd4b7c484e9e824d211a57fa6b93" style="width:160px;height:600px;display: inline-block;margin: 0 auto"></div>
|
||||
{:else if ad_type === "flyingsquare"}
|
||||
<div class="xc449bad4854773ff" data-zone="d675792db61d408287d0d694d03d12e5" style="width:160px;height:600px;display: inline-block;margin: 0 auto"></div>
|
||||
{:else if ad_type === "valueimpression"}
|
||||
<div class="adsbyvli" data-ad-slot="vi_1994884988" style="width: 160px; height: 600px"></div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.skyscraper {
|
||||
position: absolute;
|
||||
width: 160px;
|
||||
z-index: 49;
|
||||
overflow: hidden;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.ad_space {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
159
svelte/src/file_viewer/BottomBanner.svelte
Normal file
159
svelte/src/file_viewer/BottomBanner.svelte
Normal file
@@ -0,0 +1,159 @@
|
||||
<script>
|
||||
import { onMount } from "svelte"
|
||||
|
||||
let ad_type = ""
|
||||
|
||||
onMount(() => {
|
||||
// 20% pixeldrain socials
|
||||
// 20% reviews
|
||||
// 10% battle cry
|
||||
// 40% patreon
|
||||
|
||||
let rand = Math.random()
|
||||
if (rand < 0.2) {
|
||||
ad_type = "socials"
|
||||
} else if (rand < 0.4) {
|
||||
ad_type = "reviews"
|
||||
} else if (rand < 0.5) {
|
||||
ad_type = "slava_ukraini"
|
||||
} else {
|
||||
ad_type = "patreon_support"
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
{#if ad_type === "patreon_support"}
|
||||
|
||||
<div class="banner support_banner">
|
||||
<span style="display: block; margin-bottom: 2px;">
|
||||
No ads today. Pixeldrain is currently funded by our subscribers!
|
||||
</span>
|
||||
<a href="/#pro" rel="noreferrer" class="button button_highlight" target="_blank">
|
||||
<i class="icon">bolt</i>
|
||||
Support Pixeldrain to help keep the project going
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{:else if ad_type === "socials"}
|
||||
|
||||
<div class="banner center">
|
||||
<div class="socials">
|
||||
Pixeldrain is on the fediverse!<br/>
|
||||
|
||||
<a href="https://mastodon.social/@fornax" rel="noreferrer" class="button" target="_blank" style="background-color: #595aff; color: #ffffff;">
|
||||
<i class="icon small">people</i>
|
||||
Mastodon
|
||||
</a>
|
||||
<a href="https://lemmy.fornaxian.tech/c/pixeldrain"
|
||||
rel="noreferrer" class="button" target="_blank" style="background-color: #14854f; color: #ffffff;"
|
||||
>
|
||||
<i class="icon small">people</i>
|
||||
Lemmy
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="socials">
|
||||
And on legacy media too<br/>
|
||||
|
||||
<a href="https://twitter.com/Fornax96" rel="noreferrer" class="button" target="_blank" style="background-color: #1a8cd8; color: #ffffff;">
|
||||
<i class="icon small">people</i>
|
||||
Twitter
|
||||
</a>
|
||||
<a href="https://www.reddit.com/r/PixelDrain"
|
||||
rel="noreferrer" class="button" target="_blank" style="background-color: #ff4500; color: #ffffff;"
|
||||
>
|
||||
<i class="icon small">people</i>
|
||||
Reddit
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{:else if ad_type === "reviews"}
|
||||
|
||||
<div class="banner support_banner">
|
||||
<span style="display: block; margin-bottom: 2px;">
|
||||
Are you liking pixeldrain? Write a review! It really helps
|
||||
</span>
|
||||
<a href="https://alternativeto.net/software/pixeldrain/about/"
|
||||
rel="noreferrer" class="button" target="_blank" style="background-color: #0C9EF0; color: #FFFFFF; font-weight: bold;"
|
||||
>
|
||||
<i class="icon">rate_review</i>
|
||||
AlternativeTo
|
||||
</a>
|
||||
<a href="https://www.trustpilot.com/review/pixeldrain.com"
|
||||
rel="noreferrer" class="button" target="_blank" style="background-color: #00B67A; color: #FFFFFF; font-weight: bold;"
|
||||
>
|
||||
<i class="icon">rate_review</i>
|
||||
Trustpilot
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{:else if ad_type === "slava_ukraini"}
|
||||
|
||||
<a href="https://en.wikipedia.org/wiki/War_crimes_in_the_Russian_invasion_of_Ukraine" class="banner flag" target="_blank" rel="noreferrer">
|
||||
<div class="flag_top">
|
||||
We do not forget
|
||||
</div>
|
||||
<div class="flag_bottom">
|
||||
Slava Ukraini!
|
||||
</div>
|
||||
</a>
|
||||
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.banner {
|
||||
display: block;
|
||||
margin: auto;
|
||||
transform-origin: 0 0;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
.support_banner {
|
||||
text-align: center;
|
||||
padding: 2px;
|
||||
}
|
||||
.socials {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
/* Try to avoid text wrapping */
|
||||
@media(max-width: 600px) {
|
||||
.banner {
|
||||
font-size: 1em;
|
||||
}
|
||||
.socials {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
|
||||
.flag {
|
||||
display: block;
|
||||
margin: auto;
|
||||
padding: 4px;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
font-size: 1.1em;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
.flag_top {
|
||||
background-color: #0057b7;
|
||||
color: #ffd700;
|
||||
padding: 2px;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
}
|
||||
.flag_bottom {
|
||||
background-color: #ffd700;
|
||||
color: #0057b7;
|
||||
padding: 2px;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -12,8 +12,7 @@ import EditWindow from "./EditWindow.svelte";
|
||||
import EmbedWindow from "./EmbedWindow.svelte";
|
||||
import ReportWindow from "./ReportWindow.svelte";
|
||||
import IntroPopup from "./IntroPopup.svelte";
|
||||
import AdHead from "./AdHead.svelte";
|
||||
import AdLeaderboard from "./AdLeaderboard.svelte";
|
||||
import BottomBanner from "./BottomBanner.svelte";
|
||||
import Sharebar from "./Sharebar.svelte";
|
||||
import GalleryView from "./GalleryView.svelte";
|
||||
import Downloader from "./Downloader.svelte";
|
||||
@@ -383,15 +382,11 @@ const keyboard_event = evt => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<svelte:window on:keydown={keyboard_event} on:hashchange={hash_change}/>
|
||||
|
||||
<div class="file_viewer">
|
||||
<!-- Head elements for the ads -->
|
||||
<AdHead></AdHead>
|
||||
|
||||
<LoadingIndicator loading={loading}/>
|
||||
|
||||
<div class="headerbar">
|
||||
@@ -612,7 +607,7 @@ const keyboard_event = evt => {
|
||||
</div>
|
||||
|
||||
{#if ads_enabled}
|
||||
<AdLeaderboard></AdLeaderboard>
|
||||
<BottomBanner/>
|
||||
<TransferLimit/>
|
||||
{:else if custom_footer}
|
||||
<CustomBanner src={custom_footer} link={custom_footer_link}></CustomBanner>
|
||||
|
||||
@@ -20,16 +20,17 @@ $: {
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if $download_limits.loaded}
|
||||
<div class="progress_bar_outer" title="{title}">
|
||||
<!-- Always show the outer bar to prevent layout shift -->
|
||||
<div class="progress_bar_outer" title="{title}">
|
||||
{#if $download_limits.loaded}
|
||||
<div class="progress_bar_text">
|
||||
{title}
|
||||
</div>
|
||||
<div class="progress_bar_inner" style="width: {percent}%;">
|
||||
{title}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.progress_bar_outer {
|
||||
|
||||
Reference in New Issue
Block a user