Skip to content

Commit 93cad8a

Browse files
Pavel DobryakovPavel Dobryakov
Pavel Dobryakov
authored and
Pavel Dobryakov
committed
add promo popup for mobile users
1 parent ab1ca45 commit 93cad8a

File tree

6 files changed

+145
-6
lines changed

6 files changed

+145
-6
lines changed

‎.DS_Store‎

6 KB
Binary file not shown.

‎app_badge.png‎

18.8 KB
Loading

‎gp_badge.png‎

17.5 KB
Loading

‎index.html‎

Lines changed: 116 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,11 @@
2323

2424
<script type="text/javascript" src="dat.gui.min.js"></script>
2525
<style>
26+
@font-face {
27+
font-family: 'iconfont';
28+
src: url('iconfont.ttf') format('truetype');
29+
}
30+
2631
* {
2732
user-select: none;
2833
}
@@ -52,11 +57,6 @@
5257
overflow: visible;
5358
}
5459

55-
@font-face {
56-
font-family: 'iconfont';
57-
src: url('iconfont.ttf') format('truetype');
58-
}
59-
6060
.bigFont {
6161
font-size: 150%;
6262
color: #8C8C8C;
@@ -99,16 +99,126 @@
9999
.discord:before {
100100
content: 'd';
101101
}
102+
103+
.promo {
104+
display: none;
105+
/* display: table; */
106+
position: absolute;
107+
top: 0;
108+
left: 0;
109+
width: 100%;
110+
height: 100%;
111+
z-index: 1;
112+
overflow: auto;
113+
color: lightblue;
114+
background-color: rgba(0,0,0,0.4);
115+
animation: promo-appear-animation 0.35s ease-out;
116+
}
117+
118+
.promo-middle {
119+
display: table-cell;
120+
vertical-align: middle;
121+
}
122+
123+
.promo-content {
124+
width: 80vw;
125+
height: 80vh;
126+
max-width: 80vh;
127+
max-height: 80vw;
128+
margin: auto;
129+
padding: 0;
130+
font-size: 2.8vmax;
131+
font-family: Futura, "Trebuchet MS", Arial, sans-serif;
132+
text-align: center;
133+
background-image: url("promo_back.png");
134+
background-position: center;
135+
background-repeat: no-repeat;
136+
background-size: cover;
137+
border-radius: 15px;
138+
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
139+
}
140+
141+
.promo-header {
142+
height: 10%;
143+
padding: 2px 16px;
144+
}
145+
146+
.promo-close {
147+
width: 10%;
148+
height: 100%;
149+
text-align: left;
150+
float: left;
151+
font-size: 1.3em;
152+
/* transition: 0.2s; */
153+
}
154+
155+
.promo-close:hover {
156+
/* transform: scale(1.25); */
157+
cursor: pointer;
158+
}
159+
160+
.promo-body {
161+
padding: 8px 16px 16px 16px;
162+
margin: auto;
163+
}
164+
165+
.promo-body p {
166+
margin-top: 0;
167+
mix-blend-mode: color-dodge;
168+
}
169+
170+
.link {
171+
width: 100%;
172+
display: inline-block;
173+
}
174+
175+
.link img {
176+
width: 100%;
177+
}
178+
179+
@keyframes promo-appear-animation {
180+
0% {
181+
transform: scale(2.0);
182+
opacity: 0;
183+
}
184+
100% {
185+
transform: scale(1.0);
186+
opacity: 1;
187+
}
188+
}
102189
</style>
103190
<script>
104191
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
105192
ga('create', 'UA-105392568-1', 'auto');
106193
ga('send', 'pageview');
107194
</script>
108-
<script async src='https://www.google-analytics.com/analytics.js'></script>
195+
<script async src="https://www.google-analytics.com/analytics.js"></script>
109196
</head>
110197
<body>
111198
<canvas></canvas>
199+
200+
<!-- Mother of God, pls forgive me -->
201+
<div class="promo">
202+
<div class="promo-middle">
203+
<div class="promo-content">
204+
<div class="promo-header">
205+
<span class="promo-close">&times;</span>
206+
</div>
207+
<div class="promo-body">
208+
<p>Try Fluid Simulation app!</p>
209+
<div class="links-container">
210+
<a class="link" id="apple_link" target="_blank">
211+
<img class="link-img" alt="Download on the App Store" src="app_badge.png"/>
212+
</a>
213+
<a class="link" id="google_link" target="_blank">
214+
<img class="link-img" alt="Get it on Google Play" src="gp_badge.png"/>
215+
</a>
216+
</div>
217+
</div>
218+
</div>
219+
</div>
220+
</div>
221+
112222
<script src="./script.js"></script>
113223
</body>
114224
</html>

‎promo_back.png‎

399 KB
Loading

‎script.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,35 @@ SOFTWARE.
2424

2525
'use strict';
2626

27+
// Promo code
28+
29+
const promoPopup = document.getElementsByClassName('promo')[0];
30+
const promoPopupClose = document.getElementsByClassName('promo-close')[0];
31+
32+
if (isMobile()) {
33+
setTimeout(() => {
34+
promoPopup.style.display = 'table';
35+
}, 20000);
36+
}
37+
38+
promoPopupClose.addEventListener('click', e => {
39+
promoPopup.style.display = 'none';
40+
});
41+
42+
const appleLink = document.getElementById('apple_link');
43+
appleLink.addEventListener('click', e => {
44+
ga('send', 'event', 'link promo', 'app');
45+
window.open('https://apps.apple.com/us/app/fluid-simulation/id1443124993');
46+
});
47+
48+
const googleLink = document.getElementById('google_link');
49+
googleLink.addEventListener('click', e => {
50+
ga('send', 'event', 'link promo', 'app');
51+
window.open('https://play.google.com/store/apps/details?id=games.paveldogreat.fluidsimfree');
52+
});
53+
54+
// Simulation code
55+
2756
const canvas = document.getElementsByTagName('canvas')[0];
2857
resizeCanvas();
2958

0 commit comments

Comments
 (0)