diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..5008ddfcf53c02e82d7eee2e57c38e5672ef89f6 Binary files /dev/null and b/.DS_Store differ diff --git a/app_badge.png b/app_badge.png new file mode 100644 index 0000000000000000000000000000000000000000..4847115c6eccec771433d679bf163410d06c994b Binary files /dev/null and b/app_badge.png differ diff --git a/gp_badge.png b/gp_badge.png new file mode 100644 index 0000000000000000000000000000000000000000..c383305566f7c372de4fd6fe2181259fb8e2ec3e Binary files /dev/null and b/gp_badge.png differ diff --git a/index.html b/index.html index e812fc029a7bd77a4cbf7ee168ca31e4f77fa2c7..ea8c69baf1a696ceb5826f135359e01fd99e0323 100644 --- 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">×</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 diff --git a/promo_back.png b/promo_back.png new file mode 100644 index 0000000000000000000000000000000000000000..31dda3eded383b6ad8ede9b56b1ffc97cdf4bf7a Binary files /dev/null and b/promo_back.png differ diff --git a/script.js b/script.js index f02dfa3dd9ed4fab1436c0e3d633a7a78ee2c787..df97d6afa16310e29b1557af717a5ff2c17056f0 100644 --- 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();