Publii: update content

assets18/css/disclaimer.css

@@ -0,0 +1,88 @@
+/*
+ * Author:        Pierre-Henry Soria <hi@ph7.me>
+ * Copyright:     (c) 2020, Pierre-Henry Soria. All Rights Reserved.
+ */
+
+#disclaimer-dialog {
+    display: none;
+    position: absolute;
+    border-radius: 10px;
+    z-index: 1002;
+    margin: 1rem;
+    min-width: 350px;
+    background: #fff;
+    border: 5px solid #666;
+    padding: 12px;
+    overflow: hidden;
+}
+
+/* 420px or less */
+@media (max-width: 420px) {
+    #disclaimer-dialog {
+        margin: 1rem 0 1rem 0;
+        border: 0;
+    }
+}
+
+#disclaimer-dialog h1 {
+    text-align: center;
+    font-weight: 700;
+    padding: 3px;
+}
+
+#disclaimer-dialog p {
+    margin-top: 12px;
+}
+
+#disclaimer-background {
+    display: none;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background: #333;
+    position: fixed;
+    z-index: 1001;
+}
+
+#disclaimer-dialog .center {
+    margin-left: auto;
+    margin-right: auto;
+    width: 80%;
+    text-align: center;
+}
+
+#disclaimer-dialog .underline {
+    text-decoration: underline;
+}
+
+#disclaimer-dialog .italic {
+    font-style: italic;
+}
+
+#disclaimer-dialog .bold {
+    font-weight: bold;
+}
+
+#disclaimer-dialog button {
+    text-transform: uppercase;
+    display: inline-block;
+    cursor: pointer;
+    text-align: center;
+    font-weight: 400;
+    white-space: nowrap;
+    vertical-align: middle;
+    border: 1px solid transparent;
+    padding: 8px 12px;
+    font-size: 14px;
+    border-radius: 5px;
+    color: #fff;
+}
+
+#disclaimer-dialog button.agree {
+    background-color: #5cb85c;
+}
+
+#disclaimer-dialog button.disagree {
+    background-color: #d9534f;
+}

assets18/js/Disclaimer.js

@@ -0,0 +1,87 @@
+/*!
+ * Author:        Pierre-Henry Soria <hi@ph7.me>
+ * Copyright:     (c) 2020, Pierre-Henry Soria. All Rights Reserved.
+ */
+
+const localKeyName = 'agreed18';
+const strings = {
+    welcome: 'Vítáme Vás!',
+    site_contains_adult_materials: 'Tyto stránky obsahují sexuálně orientované materiály pro dospělé, které mohou být pro některé diváky urážlivé.',
+    acknowledge_confirm_majority: 'Chcete-li pokračovat, potvrďte, že jste starší <span class="underline">18</span> let.',
+    button_over18: 'Jsem starší 18-ti let',
+    button_under18: 'Jsem mladší 18-ti let',
+    footer_imprint_paragraph: 'Vstupem na tyto webové stránky vyjadřujete souhlas s našimi podmínkami používání a zásadami ochrany osobních údajů.',
+};
+
+class Disclaimer {
+    constructor() {
+        this.backgroundElement = document.getElementById('disclaimer-background');
+        this.dialogElement = document.getElementById('disclaimer-dialog');
+
+        this.dialogStatus = 0;
+    }
+
+    loadDialog() {
+        if (this.dialogStatus === 0) {
+            this.backgroundElement.style.opacity = '0.95';
+            this.backgroundElement.style.display = 'block';
+            this.dialogElement.style.display = 'block';
+
+            this.dialogStatus = 1;
+        }
+    }
+
+    disableDialog() {
+        if (this.dialogStatus === 1) {
+            this.dialogElement.style.display = 'none';
+            this.backgroundElement.style.display = 'none';
+
+            this.dialogStatus = 0;
+        }
+    }
+
+    centerDialog() {
+        const windowHeight = document.documentElement.clientHeight;
+        const windowWidth = document.documentElement.clientWidth;
+        const dialogHeight = parseInt(window.getComputedStyle(this.dialogElement).height);
+        const dialogWidth = parseInt(window.getComputedStyle(this.dialogElement).width);
+
+        this.dialogElement.style.position = 'absolute';
+        this.dialogElement.style.top = (windowHeight / 2 - dialogHeight / 2).toString() + 'px';
+        this.dialogElement.style.left = (windowWidth / 2 - dialogWidth / 2).toString() + 'px';
+        this.backgroundElement.style.height = windowHeight;
+    }
+
+    isAccepted() {
+        try {
+            return sessionStorage.getItem(localKeyName);
+        } catch (e) {
+            console.log('Cannot use sessionStorage', e);
+        }
+
+        return null;
+    }
+
+    setAccepted() {
+        try {
+            sessionStorage.setItem(localKeyName, '1');
+        } catch (e) {
+            console.log('Cannot use sessionStorage', e);
+        }
+    }
+
+    static generateDialog() {
+        const code = `<div id="disclaimer-dialog">
+      <div class="center">
+      <h1>${strings.welcome}</h1>
+      <p class="italic">${strings.site_contains_adult_materials}</p>
+      <p class="bold">${strings.acknowledge_confirm_majority}</p>
+      <p><button id="agree-over18" class="agree">${strings.button_over18}</button>
+      <button id="disagree-under18" class="disagree">${strings.button_under18}</button></p>
+      <p><small>${strings.footer_imprint_paragraph}</small></p>
+      </div></div>
+      <div id="disclaimer-background"></div>`;
+
+        document.write(code);
+    }
+}

assets18/js/common.js

@@ -0,0 +1,23 @@
+/*!
+ * Author:        Pierre-Henry Soria <hi@ph7.me>
+ * Copyright:     (c) 2020, Pierre-Henry Soria. All Rights Reserved.
+ */
+
+const disagreedRedirectLink = "https://google.com"; // <= URL to show when the visitor is likely to be under 18yrs
+
+Disclaimer.generateDialog();
+
+const oDisclaimer = new Disclaimer();
+if (!oDisclaimer.isAccepted()) {
+    oDisclaimer.loadDialog();
+    oDisclaimer.centerDialog();
+}
+
+document.getElementById('agree-over18').onclick = function () {
+    oDisclaimer.disableDialog();
+    oDisclaimer.setAccepted();
+};
+
+document.getElementById('disagree-under18').onclick = function () {
+    location.href = disagreedRedirectLink
+}

assets18/js/config.js

@@ -0,0 +1,4 @@
+let configs = {
+  majority: 18,
+  disagreedRedirectLink: 'https://google.com'
+};