mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2025-12-10 05:17:03 +08:00
ads
This commit is contained in:
Miodec
parent
2393451985
commit
b9973f1277
27 changed files with 671 additions and 171 deletions
|
|
@ -87,6 +87,7 @@ const CONFIG_SCHEMA = joi.object({
|
|||
tapeMode: joi.string().valid("off", "letter", "word"),
|
||||
alwaysShowCPM: joi.boolean(),
|
||||
enableAds: joi.string().valid("off", "on", "max"),
|
||||
ads: joi.string().valid("off", "result", "on", "sellout"),
|
||||
hideExtraLetters: joi.boolean(),
|
||||
strictSpace: joi.boolean(),
|
||||
minAcc: joi.string().valid("off", "custom"),
|
||||
|
|
|
|||
63
frontend/src/styles/ads.scss
Normal file
63
frontend/src/styles/ads.scss
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
#ad-vertical-left-wrapper,
|
||||
#ad-vertical-right-wrapper {
|
||||
margin-top: 2rem;
|
||||
transition: margin-top 0.125s;
|
||||
}
|
||||
|
||||
#ad-footer-wrapper,
|
||||
#ad-footer-small-wrapper {
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
#ad-result-wrapper,
|
||||
#ad-result-small-wrapper,
|
||||
.pageSettings .ad,
|
||||
.pageAbout .ad,
|
||||
.pageAccount .ad {
|
||||
margin: 1rem auto 0 auto;
|
||||
}
|
||||
|
||||
#app.focus {
|
||||
.ad {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.ad {
|
||||
background: var(--sub-alt-color);
|
||||
display: grid;
|
||||
grid-template-areas: "col";
|
||||
|
||||
div {
|
||||
grid-area: col;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 3rem;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--sub-color);
|
||||
&.small {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.ad-v {
|
||||
width: 160px;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
&.ad-h {
|
||||
width: 728px;
|
||||
height: 90px;
|
||||
}
|
||||
|
||||
&.ad-h-s {
|
||||
width: 320px;
|
||||
height: 50px;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -35,6 +35,24 @@
|
|||
/* Firefox */
|
||||
}
|
||||
|
||||
#app {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1000px) auto;
|
||||
justify-items: center;
|
||||
&.wide125 {
|
||||
grid-template-columns: auto minmax(0, 1250px) auto;
|
||||
}
|
||||
&.wide150 {
|
||||
grid-template-columns: auto minmax(0, 1500px) auto;
|
||||
}
|
||||
&.wide200 {
|
||||
grid-template-columns: auto minmax(0, 2000px) auto;
|
||||
}
|
||||
&.widemax {
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
}
|
||||
}
|
||||
|
||||
#nocss {
|
||||
display: none !important;
|
||||
pointer-events: none;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "404", "about", "account", "animations", "banners", "caret",
|
||||
@import "404", "ads", "about", "account", "animations", "banners", "caret",
|
||||
"commandline", "core", "footer", "inputs", "keymap", "leaderboards", "login",
|
||||
"monkey", "nav", "notifications", "popups", "profile", "scroll", "settings",
|
||||
"test", "z_media-queries";
|
||||
|
|
|
|||
|
|
@ -479,11 +479,50 @@
|
|||
place-self: center;
|
||||
grid-area: check;
|
||||
}
|
||||
&.ads {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas:
|
||||
"title"
|
||||
"description";
|
||||
a {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#videoAdPopupWrapper {
|
||||
display: flex;
|
||||
padding: 2rem;
|
||||
#videoAdPopup {
|
||||
background: var(--bg-color);
|
||||
border-radius: var(--roundness);
|
||||
padding: 2rem;
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
max-width: 1000px;
|
||||
aspect-ratio: 16/9;
|
||||
display: grid;
|
||||
grid-template-areas: "middle";
|
||||
.preloader {
|
||||
grid-area: middle;
|
||||
display: grid;
|
||||
place-items: center center;
|
||||
gap: 1rem;
|
||||
font-size: 2rem;
|
||||
color: var(--main-color);
|
||||
height: max-content;
|
||||
align-self: center;
|
||||
}
|
||||
.video {
|
||||
grid-area: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#pbTablesPopupWrapper #pbTablesPopup {
|
||||
.title {
|
||||
color: var(--text-color);
|
||||
|
|
|
|||
|
|
@ -883,7 +883,8 @@
|
|||
#restartTestButtonWithSameWordset,
|
||||
#nextTestButton,
|
||||
#practiseWordsButton,
|
||||
#watchReplayButton {
|
||||
#watchReplayButton,
|
||||
#watchVideoAdButton {
|
||||
position: relative;
|
||||
border-radius: var(--roundness);
|
||||
padding: 1rem 2rem;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,12 @@
|
|||
@media only screen and (max-width: 1330px) {
|
||||
.ad.ad-v {
|
||||
display: none;
|
||||
}
|
||||
#app {
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1250px) {
|
||||
#leaderboardsWrapper #leaderboards {
|
||||
.mainTitle {
|
||||
|
|
@ -103,6 +112,12 @@
|
|||
}
|
||||
|
||||
@media only screen and (max-width: 900px) {
|
||||
.ad.ad-h {
|
||||
display: none;
|
||||
}
|
||||
.ad.ad-h-s {
|
||||
display: grid;
|
||||
}
|
||||
.profile .pbsWords,
|
||||
.profile .pbsTime {
|
||||
font-size: 1rem;
|
||||
|
|
@ -827,6 +842,9 @@
|
|||
}
|
||||
|
||||
@media only screen and (max-width: 350px) {
|
||||
.ad.ad-h-s {
|
||||
display: none;
|
||||
}
|
||||
#keymap {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -542,31 +542,22 @@ export function setQuickEnd(qe: boolean, nosave?: boolean): boolean {
|
|||
return true;
|
||||
}
|
||||
|
||||
export function setEnableAds(
|
||||
val: MonkeyTypes.EnableAds,
|
||||
nosave?: boolean
|
||||
): boolean {
|
||||
if (!isConfigValueValid("enable ads", val, [["on", "off", "max"]])) {
|
||||
export function setAds(val: MonkeyTypes.Ads, nosave?: boolean): boolean {
|
||||
if (!isConfigValueValid("ads", val, [["off", "result", "on", "sellout"]])) {
|
||||
return false;
|
||||
}
|
||||
|
||||
config.enableAds = "off";
|
||||
config.ads = val;
|
||||
saveToLocalStorage("ads", nosave);
|
||||
if (!nosave) {
|
||||
saveToLocalStorage("enableAds", nosave);
|
||||
Notifications.add("Ads have been temporarily disabled", 0);
|
||||
setTimeout(() => {
|
||||
location.reload();
|
||||
}, 3000);
|
||||
Notifications.add("Ad settings changed. Refreshing...", 0);
|
||||
}
|
||||
ConfigEvent.dispatch("ads", config.ads);
|
||||
|
||||
return true;
|
||||
|
||||
// config.enableAds = val;
|
||||
// if (!nosave) {
|
||||
// saveToLocalStorage("enableAds", nosave);
|
||||
// setTimeout(() => {
|
||||
// location.reload();
|
||||
// }, 3000);
|
||||
// Notifications.add("Ad settings changed. Refreshing...", 0);
|
||||
// }
|
||||
|
||||
// return true;
|
||||
}
|
||||
|
||||
export function setRepeatQuotes(
|
||||
|
|
@ -652,9 +643,14 @@ export function setPageWidth(
|
|||
$("#centerContent").removeClass("wide150");
|
||||
$("#centerContent").removeClass("wide200");
|
||||
$("#centerContent").removeClass("widemax");
|
||||
$("#app").removeClass("wide125");
|
||||
$("#app").removeClass("wide150");
|
||||
$("#app").removeClass("wide200");
|
||||
$("#app").removeClass("widemax");
|
||||
|
||||
if (val !== "100") {
|
||||
$("#centerContent").addClass("wide" + val);
|
||||
$("#app").addClass("wide" + val);
|
||||
}
|
||||
saveToLocalStorage("pageWidth", nosave);
|
||||
ConfigEvent.dispatch("pageWidth", config.pageWidth);
|
||||
|
|
@ -1818,120 +1814,122 @@ export function apply(
|
|||
setLazyMode(configObj.lazyMode, true);
|
||||
setShowAverage(configObj.showAverage, true);
|
||||
setTapeMode(configObj.tapeMode, true);
|
||||
setAds(configObj.ads, true);
|
||||
|
||||
try {
|
||||
setEnableAds(configObj.enableAds, true);
|
||||
// try {
|
||||
// setEnableAds(configObj.enableAds, true);
|
||||
|
||||
if (config.enableAds === "max" || config.enableAds === "on") {
|
||||
// $("head").append(`
|
||||
// <script
|
||||
// src="https://hb.vntsm.com/v3/live/ad-manager.min.js"
|
||||
// type="text/javascript"
|
||||
// data-site-id="60b78af12119122b8958910f"
|
||||
// data-mode="scan"
|
||||
// id="adScript"
|
||||
// async
|
||||
// ></script>
|
||||
// `);
|
||||
// if (config.enableAds === "max" || config.enableAds === "on") {
|
||||
// // $("head").append(`
|
||||
// // <script
|
||||
// // src="https://hb.vntsm.com/v3/live/ad-manager.min.js"
|
||||
// // type="text/javascript"
|
||||
// // data-site-id="60b78af12119122b8958910f"
|
||||
// // data-mode="scan"
|
||||
// // id="adScript"
|
||||
// // async
|
||||
// // ></script>
|
||||
// // `);
|
||||
|
||||
if (config.enableAds === "max") {
|
||||
//
|
||||
// if (config.enableAds === "max") {
|
||||
// //
|
||||
|
||||
$("#ad_rich_media").removeClass("hidden");
|
||||
$("#ad_rich_media")
|
||||
.html
|
||||
// `<div class="vm-placement" data-id="60bf737ee04cb761c88aafb1" style="display:none"></div>`
|
||||
();
|
||||
} else {
|
||||
$("#ad_rich_media").remove();
|
||||
}
|
||||
// $("#ad_rich_media").removeClass("hidden");
|
||||
// $("#ad_rich_media")
|
||||
// .html
|
||||
// // `<div class="vm-placement" data-id="60bf737ee04cb761c88aafb1" style="display:none"></div>`
|
||||
// ();
|
||||
// } else {
|
||||
// $("#ad_rich_media").remove();
|
||||
// }
|
||||
|
||||
//<div class="vm-placement" data-id="60bf73dae04cb761c88aafb5"></div>
|
||||
// //<div class="vm-placement" data-id="60bf73dae04cb761c88aafb5"></div>
|
||||
|
||||
$("#ad_footer")
|
||||
.html
|
||||
// `<div class="vm-placement" data-id="60bf73dae04cb761c88aafb5"></div>`
|
||||
();
|
||||
$("#ad_footer").removeClass("hidden");
|
||||
// $("#ad_footer")
|
||||
// .html
|
||||
// // `<div class="vm-placement" data-id="60bf73dae04cb761c88aafb5"></div>`
|
||||
// ();
|
||||
// $("#ad_footer").removeClass("hidden");
|
||||
|
||||
// $("#ad_footer2").html(`<div class="vm-placement" data-id="60bf73e9e04cb761c88aafb7"></div>`);
|
||||
// $("#ad_footer2").removeClass("hidden");
|
||||
// // $("#ad_footer2").html(`<div class="vm-placement" data-id="60bf73e9e04cb761c88aafb7"></div>`);
|
||||
// // $("#ad_footer2").removeClass("hidden");
|
||||
|
||||
$("#ad_about1")
|
||||
.html
|
||||
// `<div class="vm-placement" data-id="60bf73dae04cb761c88aafb5"></div>`
|
||||
();
|
||||
$("#ad_about1").removeClass("hidden");
|
||||
// $("#ad_about1")
|
||||
// .html
|
||||
// // `<div class="vm-placement" data-id="60bf73dae04cb761c88aafb5"></div>`
|
||||
// ();
|
||||
// $("#ad_about1").removeClass("hidden");
|
||||
|
||||
$("#ad_about2")
|
||||
.html
|
||||
// `<div class="vm-placement" data-id="60bf73dae04cb761c88aafb5"></div>`
|
||||
();
|
||||
$("#ad_about2").removeClass("hidden");
|
||||
// $("#ad_about2")
|
||||
// .html
|
||||
// // `<div class="vm-placement" data-id="60bf73dae04cb761c88aafb5"></div>`
|
||||
// ();
|
||||
// $("#ad_about2").removeClass("hidden");
|
||||
|
||||
$("#ad_settings0")
|
||||
.html
|
||||
// `<div class="vm-placement" data-id="60bf73dae04cb761c88aafb5"></div>`
|
||||
();
|
||||
$("#ad_settings0").removeClass("hidden");
|
||||
// $("#ad_settings0")
|
||||
// .html
|
||||
// // `<div class="vm-placement" data-id="60bf73dae04cb761c88aafb5"></div>`
|
||||
// ();
|
||||
// $("#ad_settings0").removeClass("hidden");
|
||||
|
||||
$("#ad_settings1")
|
||||
.html
|
||||
// `<div class="vm-placement" data-id="60bf73dae04cb761c88aafb5"></div>`
|
||||
();
|
||||
$("#ad_settings1").removeClass("hidden");
|
||||
// $("#ad_settings1")
|
||||
// .html
|
||||
// // `<div class="vm-placement" data-id="60bf73dae04cb761c88aafb5"></div>`
|
||||
// ();
|
||||
// $("#ad_settings1").removeClass("hidden");
|
||||
|
||||
$("#ad_settings2")
|
||||
.html
|
||||
// `<div class="vm-placement" data-id="60bf73dae04cb761c88aafb5"></div>`
|
||||
();
|
||||
$("#ad_settings2").removeClass("hidden");
|
||||
// $("#ad_settings2")
|
||||
// .html
|
||||
// // `<div class="vm-placement" data-id="60bf73dae04cb761c88aafb5"></div>`
|
||||
// ();
|
||||
// $("#ad_settings2").removeClass("hidden");
|
||||
|
||||
$("#ad_settings3")
|
||||
.html
|
||||
// `<div class="vm-placement" data-id="60bf73dae04cb761c88aafb5"></div>`
|
||||
();
|
||||
$("#ad_settings3").removeClass("hidden");
|
||||
// $("#ad_settings3")
|
||||
// .html
|
||||
// // `<div class="vm-placement" data-id="60bf73dae04cb761c88aafb5"></div>`
|
||||
// ();
|
||||
// $("#ad_settings3").removeClass("hidden");
|
||||
|
||||
// $("#ad_account")
|
||||
// .html
|
||||
// // `<div class="vm-placement" data-id="60bf73dae04cb761c88aafb5"></div>`
|
||||
// ();
|
||||
// $("#ad_account").removeClass("hidden");
|
||||
// $(".footerads").removeClass("hidden");
|
||||
// } else {
|
||||
// $("#adScript").remove();
|
||||
// $(".footerads").remove();
|
||||
// $("#ad_left").remove();
|
||||
// $("#ad_right").remove();
|
||||
// $("#ad_footer").remove();
|
||||
// $("#ad_footer2").remove();
|
||||
// $("#ad_footer3").remove();
|
||||
// $("#ad_settings0").remove();
|
||||
// $("#ad_settings1").remove();
|
||||
// $("#ad_settings2").remove();
|
||||
// $("#ad_settings3").remove();
|
||||
// $("#ad_account").remove();
|
||||
// $("#ad_about1").remove();
|
||||
// $("#ad_about2").remove();
|
||||
// }
|
||||
// } catch (e) {
|
||||
// Notifications.add("Error initialising ads: " + (e as Error).message);
|
||||
// console.log("error initialising ads " + (e as Error).message);
|
||||
// $(".footerads").remove();
|
||||
// $("#ad_left").remove();
|
||||
// $("#ad_right").remove();
|
||||
// $("#ad_footer").remove();
|
||||
// $("#ad_footer2").remove();
|
||||
// $("#ad_footer3").remove();
|
||||
// $("#ad_settings0").remove();
|
||||
// $("#ad_settings1").remove();
|
||||
// $("#ad_settings2").remove();
|
||||
// $("#ad_settings3").remove();
|
||||
// $("#ad_account").remove();
|
||||
// $("#ad_about1").remove();
|
||||
// $("#ad_about2").remove();
|
||||
// }
|
||||
|
||||
$("#ad_account")
|
||||
.html
|
||||
// `<div class="vm-placement" data-id="60bf73dae04cb761c88aafb5"></div>`
|
||||
();
|
||||
$("#ad_account").removeClass("hidden");
|
||||
$(".footerads").removeClass("hidden");
|
||||
} else {
|
||||
$("#adScript").remove();
|
||||
$(".footerads").remove();
|
||||
$("#ad_left").remove();
|
||||
$("#ad_right").remove();
|
||||
$("#ad_footer").remove();
|
||||
$("#ad_footer2").remove();
|
||||
$("#ad_footer3").remove();
|
||||
$("#ad_settings0").remove();
|
||||
$("#ad_settings1").remove();
|
||||
$("#ad_settings2").remove();
|
||||
$("#ad_settings3").remove();
|
||||
$("#ad_account").remove();
|
||||
$("#ad_about1").remove();
|
||||
$("#ad_about2").remove();
|
||||
}
|
||||
} catch (e) {
|
||||
Notifications.add("Error initialising ads: " + (e as Error).message);
|
||||
console.log("error initialising ads " + (e as Error).message);
|
||||
$(".footerads").remove();
|
||||
$("#ad_left").remove();
|
||||
$("#ad_right").remove();
|
||||
$("#ad_footer").remove();
|
||||
$("#ad_footer2").remove();
|
||||
$("#ad_footer3").remove();
|
||||
$("#ad_settings0").remove();
|
||||
$("#ad_settings1").remove();
|
||||
$("#ad_settings2").remove();
|
||||
$("#ad_settings3").remove();
|
||||
$("#ad_account").remove();
|
||||
$("#ad_about1").remove();
|
||||
$("#ad_about2").remove();
|
||||
}
|
||||
ConfigEvent.dispatch(
|
||||
"configApplied",
|
||||
undefined,
|
||||
|
|
@ -1967,6 +1965,8 @@ export function loadFromLocalStorage(): void {
|
|||
localStorageConfig = newConfig;
|
||||
saveFullConfigToLocalStorage(true);
|
||||
console.log("saving localStorage config");
|
||||
} else {
|
||||
reset();
|
||||
}
|
||||
// TestLogic.restart(false, true);
|
||||
loadDone();
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ export default <MonkeyTypes.Config>{
|
|||
minWpmCustomSpeed: 100,
|
||||
highlightMode: "letter",
|
||||
alwaysShowCPM: false,
|
||||
enableAds: "off",
|
||||
ads: "result",
|
||||
hideExtraLetters: false,
|
||||
strictSpace: false,
|
||||
minAcc: "off",
|
||||
|
|
|
|||
196
frontend/src/ts/controllers/ad-controller.ts
Normal file
196
frontend/src/ts/controllers/ad-controller.ts
Normal file
|
|
@ -0,0 +1,196 @@
|
|||
import { debounce } from "throttle-debounce";
|
||||
import * as Misc from "../utils/misc";
|
||||
import * as ConfigEvent from "../observables/config-event";
|
||||
import * as BannerEvent from "../observables/banner-event";
|
||||
import Config from "../config";
|
||||
import * as TestActive from "../states/test-active";
|
||||
|
||||
const breakpoint = 900;
|
||||
let widerThanBreakpoint = true;
|
||||
|
||||
let initialised = false;
|
||||
|
||||
export function init(): void {
|
||||
$("head").append(`<script>
|
||||
!function(e){var s=new XMLHttpRequest;s.open("GET","https://api.enthusiastgaming.net/scripts/cdn.enthusiast.gg/script/eg-aps/release/eg-aps-bootstrap-v2.0.0.bundle.js?site=monkeytype.com",!0),s.onreadystatechange=function(){var t;4==s.readyState&&(200<=s.status&&s.status<300||304==s.status)&&((t=e.createElement("script")).type="text/javascript",t.text=s.responseText,e.head.appendChild(t))},s.send(null)}(document);
|
||||
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
||||
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
||||
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
||||
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
||||
})(window,document,'script','dataLayer','GTM-W7WN5QV');
|
||||
</script>`);
|
||||
$("body")
|
||||
.prepend(`<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W7WN5QV"
|
||||
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>`);
|
||||
|
||||
setInterval(() => {
|
||||
if (TestActive.get()) {
|
||||
console.log("test active - stopping ad refresh");
|
||||
return;
|
||||
}
|
||||
refreshVisible();
|
||||
console.log("refreshing visible ads");
|
||||
}, 30000);
|
||||
|
||||
initialised = true;
|
||||
}
|
||||
|
||||
export function removeAll(): void {
|
||||
removeSellout();
|
||||
removeOn();
|
||||
removeResult();
|
||||
}
|
||||
|
||||
export function removeSellout(): void {
|
||||
$("#ad-footer-wrapper").remove();
|
||||
$("#ad-footer-small-wrapper").remove();
|
||||
$("#ad-about-1-wrapper").remove();
|
||||
$("#ad-about-1-small-wrapper").remove();
|
||||
$("#ad-about-2-wrapper").remove();
|
||||
$("#ad-about-2-small-wrapper").remove();
|
||||
$("#ad-settings-1-wrapper").remove();
|
||||
$("#ad-settings-1-small-wrapper").remove();
|
||||
$("#ad-settings-2-wrapper").remove();
|
||||
$("#ad-settings-2-small-wrapper").remove();
|
||||
$("#ad-settings-3-wrapper").remove();
|
||||
$("#ad-settings-3-small-wrapper").remove();
|
||||
$("#ad-account-1-wrapper").remove();
|
||||
$("#ad-account-1-small-wrapper").remove();
|
||||
$("#ad-account-2-wrapper").remove();
|
||||
$("#ad-account-2-small-wrapper").remove();
|
||||
}
|
||||
|
||||
export function removeOn(): void {
|
||||
$("#ad-vertical-right-wrapper").remove();
|
||||
$("#ad-vertical-left-wrapper").remove();
|
||||
}
|
||||
|
||||
export function removeResult(): void {
|
||||
$("#ad-result-wrapper").remove();
|
||||
$("#ad-result-small-wrapper").remove();
|
||||
}
|
||||
|
||||
function updateVerticalMargin(): void {
|
||||
const height = $("#bannerCenter").height() as number;
|
||||
const margin = height + Misc.convertRemToPixels(2) + "px";
|
||||
$("#ad-vertical-left-wrapper").css("margin-top", margin);
|
||||
$("#ad-vertical-right-wrapper").css("margin-top", margin);
|
||||
}
|
||||
|
||||
function updateBreakpoint(noReinstate = false): void {
|
||||
const beforeUpdate = widerThanBreakpoint;
|
||||
|
||||
if (window.innerWidth > breakpoint) {
|
||||
widerThanBreakpoint = true;
|
||||
} else {
|
||||
widerThanBreakpoint = false;
|
||||
}
|
||||
if (noReinstate) return;
|
||||
if (beforeUpdate !== widerThanBreakpoint) {
|
||||
reinstate();
|
||||
}
|
||||
}
|
||||
|
||||
export async function refreshVisible(): Promise<void> {
|
||||
//@ts-ignore
|
||||
const adDivs = Object.keys(window.egAdPack.gptAdSlots);
|
||||
const visibleAdDivs = [];
|
||||
|
||||
for (let i = 0; i < adDivs.length; i++) {
|
||||
const el = document.querySelectorAll(
|
||||
"[data-adunit-name='" + adDivs[i] + "']"
|
||||
)[0];
|
||||
if (!el) continue;
|
||||
const elParent = el.parentElement as HTMLElement;
|
||||
if (
|
||||
window.getComputedStyle(elParent).getPropertyValue("display") != "none"
|
||||
) {
|
||||
visibleAdDivs.push(adDivs[i]);
|
||||
}
|
||||
}
|
||||
console.log("refreshing", visibleAdDivs);
|
||||
//@ts-ignore
|
||||
window.egAps.refreshAds(visibleAdDivs);
|
||||
}
|
||||
|
||||
export function reinstate(): boolean {
|
||||
if (Config.ads === "off") return false;
|
||||
if (!initialised) {
|
||||
init();
|
||||
return true;
|
||||
}
|
||||
try {
|
||||
//@ts-ignore
|
||||
window.egAps.reinstate();
|
||||
return true;
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
export async function renderResult(): Promise<void> {
|
||||
if (Config.ads === "off") return;
|
||||
if (!initialised) {
|
||||
init();
|
||||
}
|
||||
if (widerThanBreakpoint) {
|
||||
// $("#ad-result-wrapper").html(`
|
||||
// <div class="icon"><i class="fas fa-ad"></i></div>
|
||||
// <div id="ad-result"></div>
|
||||
// `);
|
||||
// if ($("#ad-result-wrapper").is(":empty")) {
|
||||
//@ts-ignore
|
||||
// window.egAps.render(["ad-result"]);
|
||||
// } else {
|
||||
//@ts-ignore
|
||||
window.egAps.refreshAds(["ad-result"]);
|
||||
// }
|
||||
} else {
|
||||
// $("#ad-result-small-wrapper").html(`
|
||||
// <div class="icon small"><i class="fas fa-ad"></i></div>
|
||||
// <div id="ad-result-small"></div>
|
||||
// `);
|
||||
// if ($("#ad-result-small-wrapper").is(":empty")) {
|
||||
//@ts-ignore
|
||||
// window.egAps.render(["ad-result-small"]);
|
||||
// } else {
|
||||
//@ts-ignore
|
||||
window.egAps.refreshAds(["ad-result-small"]);
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
export function destroyResult(): void {
|
||||
// $("#ad-result-wrapper").empty();
|
||||
// $("#ad-result-small-wrapper").empty();
|
||||
}
|
||||
|
||||
const debouncedMarginUpdate = debounce(100, updateVerticalMargin);
|
||||
const debouncedBreakpointUpdate = debounce(100, updateBreakpoint);
|
||||
|
||||
$(window).on("resize", () => {
|
||||
debouncedMarginUpdate();
|
||||
debouncedBreakpointUpdate();
|
||||
});
|
||||
|
||||
ConfigEvent.subscribe((event, value) => {
|
||||
if (event === "ads") {
|
||||
if (value == "off") {
|
||||
removeAll();
|
||||
} else if (value == "result") {
|
||||
removeSellout();
|
||||
removeOn();
|
||||
} else if (value == "on") {
|
||||
removeSellout();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
BannerEvent.subscribe(() => {
|
||||
updateVerticalMargin();
|
||||
});
|
||||
|
||||
$(document).ready(() => {
|
||||
updateBreakpoint(true);
|
||||
});
|
||||
|
|
@ -10,6 +10,7 @@ import * as PageProfile from "../pages/profile";
|
|||
import * as Page404 from "../pages/404";
|
||||
import * as PageTransition from "../states/page-transition";
|
||||
import type Page from "../pages/page";
|
||||
import * as AdController from "../controllers/ad-controller";
|
||||
|
||||
export async function change(
|
||||
page: Page,
|
||||
|
|
@ -58,6 +59,7 @@ export async function change(
|
|||
nextPage?.afterShow();
|
||||
},
|
||||
async () => {
|
||||
AdController.reinstate();
|
||||
await nextPage?.beforeShow(params);
|
||||
}
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1212,30 +1212,38 @@ const commandsDifficulty: MonkeyTypes.CommandsGroup = {
|
|||
|
||||
export const commandsEnableAds: MonkeyTypes.CommandsGroup = {
|
||||
title: "Set enable ads...",
|
||||
configKey: "enableAds",
|
||||
configKey: "ads",
|
||||
list: [
|
||||
{
|
||||
id: "setEnableAdsOff",
|
||||
display: "off",
|
||||
configValue: "off",
|
||||
exec: (): void => {
|
||||
UpdateConfig.setEnableAds("off");
|
||||
UpdateConfig.setAds("off");
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "setEnableAdsOn",
|
||||
display: "on",
|
||||
configValue: "on",
|
||||
display: "result",
|
||||
configValue: "result",
|
||||
exec: (): void => {
|
||||
UpdateConfig.setEnableAds("on");
|
||||
UpdateConfig.setAds("result");
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "setEnableMax",
|
||||
display: "sellout",
|
||||
configValue: "max",
|
||||
id: "setEnableOn",
|
||||
display: "on",
|
||||
configValue: "on",
|
||||
exec: (): void => {
|
||||
UpdateConfig.setEnableAds("max");
|
||||
UpdateConfig.setAds("on");
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "setEnableSellout",
|
||||
display: "sellout",
|
||||
configValue: "sellout",
|
||||
exec: (): void => {
|
||||
UpdateConfig.setAds("sellout");
|
||||
},
|
||||
},
|
||||
],
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { debounce } from "throttle-debounce";
|
||||
import * as Misc from "../utils/misc";
|
||||
import * as BannerEvent from "../observables/banner-event";
|
||||
|
||||
function updateMargin(): void {
|
||||
console.log("updating margin");
|
||||
|
|
@ -165,6 +166,7 @@ class Notification {
|
|||
</div>
|
||||
`);
|
||||
updateMargin();
|
||||
BannerEvent.dispatch();
|
||||
if (this.duration >= 0) {
|
||||
$(`#bannerCenter .banner[id='${this.id}'] .closeButton`).on(
|
||||
"click",
|
||||
|
|
@ -213,6 +215,7 @@ class Notification {
|
|||
() => {
|
||||
$(`#bannerCenter .banner[id='${this.id}']`).remove();
|
||||
updateMargin();
|
||||
BannerEvent.dispatch();
|
||||
}
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import "./firebase";
|
|||
|
||||
import * as DB from "./db";
|
||||
import "./ui";
|
||||
import "./controllers/ad-controller";
|
||||
import Config from "./config";
|
||||
import * as TestStats from "./test/test-stats";
|
||||
import * as Replay from "./test/replay";
|
||||
|
|
@ -17,6 +18,7 @@ import "./test/caps-warning";
|
|||
import "./popups/support-popup";
|
||||
import "./popups/contact-popup";
|
||||
import "./popups/version-popup";
|
||||
import "./popups/video-ad-popup";
|
||||
import "./popups/edit-preset-popup";
|
||||
import "./popups/simple-popups";
|
||||
import "./controllers/input-controller";
|
||||
|
|
|
|||
18
frontend/src/ts/observables/banner-event.ts
Normal file
18
frontend/src/ts/observables/banner-event.ts
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
type SubscribeFunction = () => void;
|
||||
|
||||
const subscribers: SubscribeFunction[] = [];
|
||||
|
||||
export function subscribe(fn: SubscribeFunction): void {
|
||||
subscribers.push(fn);
|
||||
}
|
||||
|
||||
export function dispatch(): void {
|
||||
subscribers.forEach((fn) => {
|
||||
try {
|
||||
fn();
|
||||
} catch (e) {
|
||||
console.error("Banner event subscriber threw an error");
|
||||
console.error(e);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -166,11 +166,7 @@ async function initGroups(): Promise<void> {
|
|||
UpdateConfig.setRepeatQuotes,
|
||||
"button"
|
||||
);
|
||||
groups["enableAds"] = new SettingsGroup(
|
||||
"enableAds",
|
||||
UpdateConfig.setEnableAds,
|
||||
"button"
|
||||
);
|
||||
groups["ads"] = new SettingsGroup("ads", UpdateConfig.setAds, "button");
|
||||
groups["alwaysShowWordsHistory"] = new SettingsGroup(
|
||||
"alwaysShowWordsHistory",
|
||||
UpdateConfig.setAlwaysShowWordsHistory,
|
||||
|
|
|
|||
37
frontend/src/ts/popups/video-ad-popup.ts
Normal file
37
frontend/src/ts/popups/video-ad-popup.ts
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
function show(): void {
|
||||
if ($("#videoAdPopupWrapper").hasClass("hidden")) {
|
||||
$("#videoAdPopupWrapper")
|
||||
.stop(true, true)
|
||||
.css("opacity", 0)
|
||||
.removeClass("hidden")
|
||||
.animate({ opacity: 1 }, 100, () => {
|
||||
//@ts-ignore
|
||||
window.dataLayer.push({ event: "EG_Video" });
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function hide(): void {
|
||||
if (!$("#videoAdPopupWrapper").hasClass("hidden")) {
|
||||
$("#videoAdPopupWrapper")
|
||||
.stop(true, true)
|
||||
.css("opacity", 1)
|
||||
.animate(
|
||||
{
|
||||
opacity: 0,
|
||||
},
|
||||
100,
|
||||
() => {
|
||||
$("#videoAdPopupWrapper").addClass("hidden");
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
$(".pageTest #watchVideoAdButton").on("click", () => {
|
||||
show();
|
||||
});
|
||||
|
||||
$("#videoAdPopup .button").on("click", (e) => {
|
||||
hide();
|
||||
});
|
||||
|
|
@ -23,6 +23,7 @@ export function set(foc: boolean, withCursor = false): void {
|
|||
$("#middle").removeClass("focus");
|
||||
$("#bannerCenter").removeClass("focus");
|
||||
$("#capsWarning").removeClass("focus");
|
||||
$("#app").removeClass("focus");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ import * as TestInput from "./test-input";
|
|||
import * as Notifications from "../elements/notifications";
|
||||
import * as Loader from "../elements/loader";
|
||||
import QuotesController from "../controllers/quotes-controller";
|
||||
import * as AdController from "../controllers/ad-controller";
|
||||
import { Chart } from "chart.js";
|
||||
import { Auth } from "../firebase";
|
||||
|
||||
|
|
@ -710,6 +711,7 @@ export async function update(
|
|||
$("#result"),
|
||||
250,
|
||||
async () => {
|
||||
AdController.renderResult();
|
||||
TestUI.setResultCalculating(false);
|
||||
$("#words").empty();
|
||||
ChartController.result.resize();
|
||||
|
|
|
|||
|
|
@ -53,6 +53,7 @@ import * as Monkey from "./monkey";
|
|||
import objectHash from "object-hash";
|
||||
import * as AnalyticsController from "../controllers/analytics-controller";
|
||||
import { Auth } from "../firebase";
|
||||
import * as AdController from "../controllers/ad-controller";
|
||||
|
||||
let failReason = "";
|
||||
|
||||
|
|
@ -483,6 +484,7 @@ export function restart(
|
|||
$("#monkey").stop(true, true).css({ animationDuration: "0s" });
|
||||
$("#typingTest").css("opacity", 0).removeClass("hidden");
|
||||
$("#wordsInput").val(" ");
|
||||
AdController.destroyResult();
|
||||
let shouldQuoteRepeat = false;
|
||||
if (
|
||||
Config.mode === "quote" &&
|
||||
|
|
|
|||
4
frontend/src/ts/types/types.d.ts
vendored
4
frontend/src/ts/types/types.d.ts
vendored
|
|
@ -102,7 +102,7 @@ declare namespace MonkeyTypes {
|
|||
|
||||
type HighlightMode = "off" | "letter" | "word";
|
||||
|
||||
type EnableAds = "off" | "on" | "max";
|
||||
type Ads = "off" | "result" | "on" | "sellout";
|
||||
|
||||
type MinimumAccuracy = "off" | "custom";
|
||||
|
||||
|
|
@ -363,7 +363,7 @@ declare namespace MonkeyTypes {
|
|||
minWpmCustomSpeed: number;
|
||||
highlightMode: HighlightMode;
|
||||
alwaysShowCPM: boolean;
|
||||
enableAds: EnableAds;
|
||||
ads: Ads;
|
||||
hideExtraLetters: boolean;
|
||||
strictSpace: boolean;
|
||||
minAcc: MinimumAccuracy;
|
||||
|
|
|
|||
|
|
@ -71,7 +71,14 @@
|
|||
mapped onto a scale from 0 to 100.
|
||||
</p>
|
||||
</div>
|
||||
<div id="ad_about1" class="hidden"></div>
|
||||
<div id="ad-about-1-wrapper" class="ad advertisement ad-h">
|
||||
<div class="icon"><i class="fas fa-ad"></i></div>
|
||||
<div id="ad-about-1"></div>
|
||||
</div>
|
||||
<div id="ad-about-1-small-wrapper" class="ad advertisement ad-h-s">
|
||||
<div class="icon small"><i class="fas fa-ad"></i></div>
|
||||
<div id="ad-about-1-small"></div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h1>results screen</h1>
|
||||
<p>
|
||||
|
|
@ -217,7 +224,14 @@
|
|||
themes and more
|
||||
</p>
|
||||
</div>
|
||||
<div id="ad_about2" class="hidden"></div>
|
||||
<div id="ad-about-2-wrapper" class="ad advertisement ad-h">
|
||||
<div class="icon"><i class="fas fa-ad"></i></div>
|
||||
<div id="ad-about-2"></div>
|
||||
</div>
|
||||
<div id="ad-about-2-small-wrapper" class="ad advertisement ad-h-s">
|
||||
<div class="icon small"><i class="fas fa-ad"></i></div>
|
||||
<div id="ad-about-2-small"></div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h1 id="supporters_title">supporters</h1>
|
||||
<div class="supporters"></div>
|
||||
|
|
|
|||
|
|
@ -280,7 +280,14 @@
|
|||
|
||||
<!-- <div class="group createdDate">Account created on -</div> -->
|
||||
|
||||
<div id="ad_account" class="hidden"></div>
|
||||
<div id="ad-account-1-wrapper" class="ad ad-h">
|
||||
<div class="icon"><i class="fas fa-ad"></i></div>
|
||||
<div id="ad-account-1"></div>
|
||||
</div>
|
||||
<div id="ad-account-1-small-wrapper" class="ad ad-h-s">
|
||||
<div class="icon small"><i class="fas fa-ad"></i></div>
|
||||
<div id="ad-account-1-small"></div>
|
||||
</div>
|
||||
|
||||
<div class="group presetFilterButtons" style="display: none">
|
||||
<div class="buttonsAndTitle">
|
||||
|
|
@ -536,6 +543,14 @@
|
|||
Export CSV
|
||||
</div>
|
||||
</div>
|
||||
<div id="ad-account-2-wrapper" class="ad advertisement ad-h">
|
||||
<div class="icon"><i class="fas fa-ad"></i></div>
|
||||
<div id="ad-account-2"></div>
|
||||
</div>
|
||||
<div id="ad-account-2-small-wrapper" class="ad advertisement ad-h-s">
|
||||
<div class="icon small"><i class="fas fa-ad"></i></div>
|
||||
<div id="ad-account-2-small"></div>
|
||||
</div>
|
||||
<div class="group history">
|
||||
<!-- <div class="title">result history</div> -->
|
||||
<table width="100%">
|
||||
|
|
|
|||
|
|
@ -27,7 +27,16 @@
|
|||
<a class="textButton" href="#group_dangerZone">danger zone</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="ad_settings0" class="hidden"></div>
|
||||
|
||||
<div id="ad-settings-1-wrapper" class="ad advertisement ad-h">
|
||||
<div class="icon"><i class="fas fa-ad"></i></div>
|
||||
<div id="ad-settings-1"></div>
|
||||
</div>
|
||||
<div id="ad-settings-1-small-wrapper" class="ad advertisement ad-h-s">
|
||||
<div class="icon small"><i class="fas fa-ad"></i></div>
|
||||
<div id="ad-settings-1-small"></div>
|
||||
</div>
|
||||
|
||||
<div id="group_account" class="sectionGroupTitle hidden" group="account">
|
||||
account
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
|
|
@ -773,7 +782,14 @@
|
|||
<div class="sectionSpacer"></div>
|
||||
</div>
|
||||
|
||||
<div id="ad_settings1" class="hidden"></div>
|
||||
<div id="ad-settings-2-wrapper" class="ad advertisement ad-h">
|
||||
<div class="icon"><i class="fas fa-ad"></i></div>
|
||||
<div id="ad-settings-2"></div>
|
||||
</div>
|
||||
<div id="ad-settings-2-small-wrapper" class="ad advertisement ad-h-s">
|
||||
<div class="icon small"><i class="fas fa-ad"></i></div>
|
||||
<div id="ad-settings-2-small"></div>
|
||||
</div>
|
||||
|
||||
<div id="group_sound" class="sectionGroupTitle" group="sound">
|
||||
sound
|
||||
|
|
@ -1605,7 +1621,14 @@
|
|||
<div class="sectionSpacer"></div>
|
||||
</div>
|
||||
|
||||
<div id="ad_settings2" class="hidden"></div>
|
||||
<div id="ad-settings-3-wrapper" class="ad advertisement ad-h">
|
||||
<div class="icon"><i class="fas fa-ad"></i></div>
|
||||
<div id="ad-settings-3"></div>
|
||||
</div>
|
||||
<div id="ad-settings-3-small-wrapper" class="ad advertisement ad-h-s">
|
||||
<div class="icon small"><i class="fas fa-ad"></i></div>
|
||||
<div id="ad-settings-3-small"></div>
|
||||
</div>
|
||||
|
||||
<div id="group_theme" class="sectionGroupTitle" group="theme">
|
||||
theme
|
||||
|
|
@ -2308,24 +2331,27 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section enableAds">
|
||||
<h1>enable ads</h1>
|
||||
<div class="section ads">
|
||||
<h1>ads</h1>
|
||||
<div class="text">
|
||||
If you wish to support me without directly donating you can enable ads
|
||||
that will be visible at the bottom of the screen. Sellout mode also
|
||||
shows ads on both sides of the screen.
|
||||
You can disable or enable ads at any time. "Result" will show one ad on
|
||||
the result page, "on" will add floating vertical banners, and "sellout"
|
||||
will add multiple ads on every page.
|
||||
<br />
|
||||
<br />
|
||||
(changes will take effect after a refresh).
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="button" enableAds="off" tabindex="0" onclick="this.blur();">
|
||||
<div class="button" ads="off" tabindex="0" onclick="this.blur();">
|
||||
off
|
||||
</div>
|
||||
<div class="button" enableAds="on" tabindex="0" onclick="this.blur();">
|
||||
<div class="button" ads="result" tabindex="0" onclick="this.blur();">
|
||||
result
|
||||
</div>
|
||||
<div class="button" ads="on" tabindex="0" onclick="this.blur();">
|
||||
on
|
||||
</div>
|
||||
<div class="button" enableAds="max" tabindex="0" onclick="this.blur();">
|
||||
<div class="button" ads="sellout" tabindex="0" onclick="this.blur();">
|
||||
sellout
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -2361,9 +2387,7 @@
|
|||
change your preferences here.
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="button danger" tabindex="0" onclick="this.blur();">
|
||||
open
|
||||
</div>
|
||||
<div class="button" tabindex="0" onclick="this.blur();">open</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section updateAccountName needsAccount hidden">
|
||||
|
|
|
|||
|
|
@ -295,6 +295,23 @@
|
|||
>
|
||||
<i class="far fa-fw fa-image"></i>
|
||||
</div>
|
||||
<div
|
||||
id="watchVideoAdButton"
|
||||
aria-label="Watch video ad"
|
||||
data-balloon-pos="down"
|
||||
tabindex="0"
|
||||
onclick="this.blur();"
|
||||
>
|
||||
<i class="fas fa-fw fa-ad"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div id="ad-result-wrapper" class="ad advertisement ad-h">
|
||||
<div class="icon"><i class="fas fa-ad"></i></div>
|
||||
<div id="ad-result"></div>
|
||||
</div>
|
||||
<div id="ad-result-small-wrapper" class="ad advertisement ad-h-s">
|
||||
<div class="icon small"><i class="fas fa-ad"></i></div>
|
||||
<div id="ad-result-small"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ssWatermark hidden">monkeytype.com</div>
|
||||
|
|
|
|||
|
|
@ -64,14 +64,19 @@
|
|||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="cookie">
|
||||
<div class="cookie ads">
|
||||
<label class="checkbox">
|
||||
<div class="title">Advertising</div>
|
||||
<div class="description">
|
||||
Our advertising partner may use cookies to deliver ads that are more
|
||||
relevant to you. If you enable ads you will receive another popup
|
||||
where you can review how they use cookies.
|
||||
relevant to you.
|
||||
</div>
|
||||
<a
|
||||
class="text-button"
|
||||
onclick="window.__tcfapi('displayConsentUi', 2, function() {} );"
|
||||
>
|
||||
Click to change your preferences on ad related cookies
|
||||
</a>
|
||||
</label>
|
||||
</div>
|
||||
<div class="button active acceptSelected">Accept selected</div>
|
||||
|
|
@ -218,6 +223,16 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div id="videoAdPopupWrapper" class="popupWrapper hidden">
|
||||
<div id="videoAdPopup">
|
||||
<div class="preloader">
|
||||
<i class="fas fa-fw fa-spin fa-circle-notch"></i>
|
||||
<div class="button">Click to close</div>
|
||||
</div>
|
||||
<div id="eg-video-player" class="video"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="pbTablesPopupWrapper" class="popupWrapper hidden">
|
||||
<div id="pbTablesPopup">
|
||||
<!-- <div class="title">All words personal bests</div> -->
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
<body>
|
||||
<%= compilation.assets["html/warnings.html"].source() %>
|
||||
|
||||
<div id="ad_rich_media" class="hidden"></div>
|
||||
<div class="customBackground"></div>
|
||||
<div id="backgroundLoader" style="display: none"></div>
|
||||
<div id="bannerCenter" class="focus"></div>
|
||||
|
|
@ -30,8 +29,14 @@
|
|||
</div>
|
||||
|
||||
<%= compilation.assets["html/popups.html"].source() %>
|
||||
|
||||
<div style="display: flex; justify-content: space-around">
|
||||
<!-- <div id="div-gpt-ad-mkt-0" style="height: 100vh"></div> -->
|
||||
<div id="app" class="focus">
|
||||
<div>
|
||||
<div id="ad-vertical-left-wrapper" class="ad advertisement ad-v">
|
||||
<div class="icon"><i class="fas fa-ad"></i></div>
|
||||
<div id="ad-vertical-left"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="centerContent" class="hidden">
|
||||
<%= compilation.assets["html/top.html"].source() %>
|
||||
<div id="middle">
|
||||
|
|
@ -47,16 +52,19 @@
|
|||
|
||||
<%= compilation.assets["html/bottom.html"].source() %>
|
||||
|
||||
<div class="footerads hidden">
|
||||
<div
|
||||
id="ad_footer"
|
||||
style="display: flex; justify-content: center; justify-self: center"
|
||||
></div>
|
||||
<div
|
||||
id="ad_footer2"
|
||||
class="hidden"
|
||||
style="display: flex; justify-content: center; justify-self: center"
|
||||
></div>
|
||||
<div id="ad-footer-wrapper" class="ad advertisement ad-h">
|
||||
<div class="icon"><i class="fas fa-ad"></i></div>
|
||||
<div id="ad-footer"></div>
|
||||
</div>
|
||||
<div id="ad-footer-small-wrapper" class="ad advertisement ad-h-s">
|
||||
<div class="icon small"><i class="fas fa-ad"></i></div>
|
||||
<div id="ad-footer-small"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="ad-vertical-right-wrapper" class="ad advertisement ad-v">
|
||||
<div class="icon"><i class="fas fa-ad"></i></div>
|
||||
<div id="ad-vertical-right"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue