PavelDoGreat · Tipzy480 · Aug 27, 2017 · Aug 29, 2017 · Aug 30, 2017 · Aug 30, 2017
diff --git a/.DS_Store b/.DS_Store
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
@@ -0,0 +1,12 @@
+# These are supported funding model platforms
+
+github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+custom: ['https://play.google.com/store/apps/details?id=games.paveldogreat.fluidsimfree', 'https://apps.apple.com/app/fluid-simulation/id1443124993']# Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
diff --git a/LDR_LLL1_0.png b/LDR_LLL1_0.png
diff --git a/README.md b/README.md
@@ -1 +1,17 @@
-# WebGL-Fluid-Simulation
+# WebGL Fluid Simulation
+
+[Play here](https://paveldogreat.github.io/WebGL-Fluid-Simulation/)
+
+<img src="/screenshot.jpg?raw=true" width="880">
+
+## References
+
+https://developer.nvidia.com/gpugems/gpugems/part-vi-beyond-triangles/chapter-38-fast-fluid-dynamics-simulation-gpu
+
+https://github.com/mharrys/fluids-2d
+
+https://github.com/haxiomic/GPU-Fluid-Experiments
+
+## License
+
+The code is available under the [MIT license](LICENSE)
diff --git a/app_badge.png b/app_badge.png
diff --git a/dat.gui.min.js b/dat.gui.min.js
diff --git a/gp_badge.png b/gp_badge.png
diff --git a/iconfont.ttf b/iconfont.ttf
diff --git a/index.html b/index.html
@@ -2,25 +2,44 @@
 <html>
     <head>
         <meta charset="utf-8">
-        <title>Fluid Simulation</title>
+        <meta http-equiv="Cache-Control" content="no-cache">
+
         <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="mobile-web-app-capable" content="yes">
+
+        <link rel="apple-touch-icon" href="logo.png">
+        <link rel="icon" href="logo.png">
+
+        <title>WebGL Fluid Simulation</title>
+        <meta name="description" content="A WebGL fluid simulation that works in mobile browsers.">
+
         <meta property="og:type" content="website">
-        <meta property="og:title" content="webgl fluid simulation">
+        <meta property="og:title" content="Webgl Fluid Simulation">
+        <meta property="og:description" content="A WebGL fluid simulation that works in mobile browsers.">
         <meta property="og:url" content="https://paveldogreat.github.io/WebGL-Fluid-Simulation/">
-        <meta property="og:image" content="logo.png">
+        <meta property="og:image" content="https://paveldogreat.github.io/WebGL-Fluid-Simulation/logo.png">
+
         <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;
             }
 
             html, body {
                 overflow: hidden;
+                background-color: #000;
             }
 
             body {
                 margin: 0;
-                position: absolute;
+                position: fixed;
                 width: 100%;
                 height: 100%;
             }
@@ -38,20 +57,31 @@
                 overflow: visible;
             }
 
-            @font-face {
-                font-family: 'iconfont';
-                src: url('iconfont.ttf') format('truetype');
-            }
-
             .bigFont {
                 font-size: 150%;
                 color: #8C8C8C;
             }
 
+            .cr.function.appBigFont {
+                font-size: 150%;
+                line-height: 27px;
+                color: #A5F8D3;
+                background-color: #023C40;
+            }
+
+            .cr.function.appBigFont .property-name {
+                float: none;
+            }
+
+            .cr.function.appBigFont .icon {
+                position: sticky;
+                bottom: 27px;
+            }
+
             .icon {
-                 font-family: 'iconfont';
-                 font-size: 130%;
-                 float: right;
+                font-family: 'iconfont';
+                font-size: 130%;
+                float: right;
             }
 
             .twitter:before {
@@ -61,16 +91,134 @@
             .github:before {
                 content: 'b';
             }
+
+            .app:before {
+                content: 'c';
+            }
+
+            .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>
diff --git a/logo.png b/logo.png
diff --git a/promo_back.png b/promo_back.png
diff --git a/screenshot.jpg b/screenshot.jpg