add promo popup for mobile users

93cad8a4 · Pavel Dobryakov · ab1ca45f · 93cad8a4 · 93cad8a4 · 93cad8a4
Commit 93cad8a4 authored 5 years ago by Pavel Dobryakov
--- a/.DS_Store
+++ b/.DS_Store
--- a/app_badge.png
+++ b/app_badge.png
--- a/gp_badge.png
+++ b/gp_badge.png
--- a/index.html
+++ b/index.html
@@ -23,6 +23,11 @@

        <script type="text/javascript" src="dat.gui.min.js"></script>
        <style>
+            @font-face {
+                font-family: 'iconfont';
+                src: url('iconfont.ttf') format('truetype');
+            }
+
            * {
                user-select: none;
            }
@@ -52,11 +57,6 @@
                overflow: visible;
            }

-            @font-face {
-                font-family: 'iconfont';
-                src: url('iconfont.ttf') format('truetype');
-            }
-
            .bigFont {
                font-size: 150%;
                color: #8C8C8C;
@@ -99,16 +99,126 @@
            .discord:before {
                content: 'd';
            }
+
+            .promo {
+                display: none;
+                /* display: table; */
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                z-index: 1;
+                overflow: auto;
+                color: lightblue;
+                background-color: rgba(0,0,0,0.4);
+                animation: promo-appear-animation 0.35s ease-out;
+            }
+
+            .promo-middle {
+                display: table-cell;
+                vertical-align: middle;
+            }
+
+            .promo-content {
+                width: 80vw;
+                height: 80vh;
+                max-width: 80vh;
+                max-height: 80vw;
+                margin: auto;
+                padding: 0;
+                font-size: 2.8vmax;
+                font-family: Futura, "Trebuchet MS", Arial, sans-serif;
+                text-align: center;
+                background-image: url("promo_back.png");
+                background-position: center;
+                background-repeat: no-repeat;
+                background-size: cover;
+                border-radius: 15px;
+                box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
+            }
+
+            .promo-header {
+                height: 10%;
+                padding: 2px 16px;
+            }
+
+            .promo-close {
+                width: 10%;
+                height: 100%;
+                text-align: left;
+                float: left;
+                font-size: 1.3em;
+                /* transition: 0.2s; */
+            }
+
+            .promo-close:hover {
+                /* transform: scale(1.25); */
+                cursor: pointer;
+            }
+
+            .promo-body {
+                padding: 8px 16px 16px 16px;
+                margin: auto;
+            }
+
+            .promo-body p {
+                margin-top: 0;
+                mix-blend-mode: color-dodge;
+            }
+
+            .link {
+                width: 100%;
+                display: inline-block;
+            }
+
+            .link img {
+                width: 100%;
+            }
+
+            @keyframes promo-appear-animation {
+                0% {
+                    transform: scale(2.0);
+                    opacity: 0;
+                }
+                100% {
+                    transform: scale(1.0);
+                    opacity: 1;
+                }
+            }
        </style>
        <script>
            window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
            ga('create', 'UA-105392568-1', 'auto');
            ga('send', 'pageview');
        </script>
-        <script async src='https://www.google-analytics.com/analytics.js'></script>
+        <script async src="https://www.google-analytics.com/analytics.js"></script>
    </head>
    <body>
        <canvas></canvas>
+
+        <!-- Mother of God, pls forgive me -->
+        <div class="promo">
+            <div class="promo-middle">
+                <div class="promo-content">
+                    <div class="promo-header">
+                        <span class="promo-close">&times;</span>
+                    </div>
+                    <div class="promo-body">
+                        <p>Try Fluid Simulation app!</p>
+                        <div class="links-container">
+                            <a class="link" id="apple_link" target="_blank">
+                                <img class="link-img" alt="Download on the App Store" src="app_badge.png"/>
+                            </a>
+                            <a class="link" id="google_link" target="_blank">
+                                <img class="link-img" alt="Get it on Google Play" src="gp_badge.png"/>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
        <script src="./script.js"></script>
    </body>
 </html>
\ No newline at end of file
--- a/promo_back.png
+++ b/promo_back.png
--- a/script.js
+++ b/script.js
@@ -24,6 +24,35 @@ SOFTWARE.

 'use strict';

+// Promo code
+
+const promoPopup = document.getElementsByClassName('promo')[0];
+const promoPopupClose = document.getElementsByClassName('promo-close')[0];
+
+if (isMobile()) {
+    setTimeout(() => {
+        promoPopup.style.display = 'table';
+    }, 20000);
+}
+
+promoPopupClose.addEventListener('click', e => {
+    promoPopup.style.display = 'none';
+});
+
+const appleLink = document.getElementById('apple_link');
+appleLink.addEventListener('click', e => {
+    ga('send', 'event', 'link promo', 'app');
+    window.open('https://apps.apple.com/us/app/fluid-simulation/id1443124993');
+});
+
+const googleLink = document.getElementById('google_link');
+googleLink.addEventListener('click', e => {
+    ga('send', 'event', 'link promo', 'app');
+    window.open('https://play.google.com/store/apps/details?id=games.paveldogreat.fluidsimfree');
+});
+
+// Simulation code
+
 const canvas = document.getElementsByTagName('canvas')[0];
 resizeCanvas();