<div class="tip" id="tips-install-pwa">
    <button class="close" onclick="hideTips();"><img src="../assets/cross.svg" alt="close" title="close message"></button>

    <!-- FOR IOS SAFARI -->

    <section id="install-on-ios-safari" style="display: none;">
        
        <h3>INSTALL THE APP</h3>
        
        <ul>
            <li>use cryptee even while you're offline</li>
            <li>access your files and photos faster</li>
        </ul>
        
        <strong>STEP 1</strong>
        <p>tap the <img class="icon" src="../imgs/ios-share.svg" alt="ios share icon"> icon on safari's toolbar</p>
        <br>

        <strong>STEP 2</strong>
        <p>scroll down and tap on the <i>add to home screen</i> button, and that's it!</p>
        <br>
        
    </section>    

    <!-- FOR IOS ALL NON-SAFARI BROWSERS -->

    <section id="install-on-ios-other" style="display: none;">
        
        <h3>INSTALL THE APP</h3>
        
        <ul>
            <li>use cryptee even while you're offline</li>
            <li>access your files and photos faster</li>
        </ul>
        
        <strong>STEP 1</strong>
        <p>open 'crypt.ee' using <i>safari</i></p>
        <br>

        <strong>STEP 2</strong>
        <p>tap the <img class="icon" src="../imgs/ios-share.svg" alt="ios share icon"> icon on the toolbar then scroll down and tap on the <i>add to home screen</i> button, and that's it!</p>
        <br>
        
    </section>

    <!-- FOR ANDROID -->

    <section id="install-on-other" style="display: none;">
        
        <h3>INSTALL THE APP</h3>
        
        <ul>
            <li>use cryptee even while you're offline</li>
            <li>access your files and photos faster</li>
        </ul>
        
        <strong>STEP 1</strong>
        <p>open 'crypt.ee' using using <i>chrome</i>, <i>opera</i> or <i>firefox</i></p>
        <br>

        <strong>STEP 2</strong>
        <p>tap the <i class="ri-more-2-fill"></i> icon on the toolbar then tap on the <i>install</i> or the <i>add to home screen</i> button, and that's it!</p>
        <br>

    </section>

    <button id="button-why">
        <small>but wait... wouldn't this create just a shortcut?</small>
        <p>the installation doesn't create just a web-shortcut. it's a proper app with an icon on your home screen, and even works offline. in case if you're curious, these types of apps are called: "progressive web apps". <strong class="right">close</strong></p>
    </button>

</div>
