Untitled

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="theme-color" content="#2196f3">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <title>test</title>
    <link rel="stylesheet" href="assets/f7/css/framework7.min.css">
</head>
<body>
    <div id="app">
        <!-- Your main view, should have "view-main" class -->
        <div class="view view-main ios-edges">
            <!-- Splash page -->
            <div id="splashPage" class="page" data-name="splash">
                splash page
            </div>
        </div>

        <!-- Login screen -->
        <div id="loginScreen" class="login-screen">
            <div class="view">
                <div class="page">
                    <div class="page-content login-screen-content">
                        <div class="login-screen-title">login screen</div>

                    </div>
                </div>
            </div>
        </div>

    </div>

    <script type="text/javascript" src="assets/f7/js/framework7.min.js"></script>
    <script type="text/javascript">
        (function()
        {
            'use strict';
            var f7 = new Framework7({ // http://framework7.io/docs/app.html#app-parameters
                root: '#app',
                name: 'test',
                id: 'com',
                theme: 'md',
                touch: {
                    materialRipple: false,
                },
                routes: [
                    {
                        name: 'splash',
                        path: '/splash',
                        pageName: 'splash',
                    },
                ],
            });
            var $$ = Dom7;
            f7.views.create('.view-main', {
                name: 'main',
                url: '/splash',
                stackedPages: true,
            });

            $$('#loginScreen').on('loginscreen:open', function()
            {
                console.log('loginscreen:open');
            });
            $$('#loginScreen').on('loginscreen:opened', function()
            {
                console.log('loginscreen:opened');
            });

            // Broken:
            f7.loginScreen.open($$('#loginScreen')[0], true);
            // Works:
            //setTimeout(() => f7.loginScreen.open($$('#loginScreen')[0], true), 1000);
        })();
    </script>
</body>
</html>