<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Custom App Template</title>
        <link rel="stylesheet" href="styles.css" />
        <link rel="stylesheet" href="colors.css" />

        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet" />
    </head>
    <body>
        <div id="phone-wrapper">
            <div class="app" id="content">
                <div class="app-wrapper">
                    <!-- <div class="header">
                        <div class="title">Custom App Template</div>
                        <div class="subtitle">Vanilla JS</div>
                        <a class="subtitle" id="direction">N</a>
                    </div> -->
     
                        <div class="Rectangle1"
                            style=" width: 280px; height: 890px; background: #D9D9D9; box-shadow: 0px 4px 41.20000076293945px 1px #595959 inset; border-radius: 15px">
                            <div class="Rectangle2"
                                style="width: 200px; height: 100px; background: rgba(255, 255, 255, 0.63); box-shadow: -4px 3px 27px 9px rgba(255, 255, 255, 0.65); border-radius: 15px">
                                <div class="DigitalIdentity"
                                    style="width: 200; height: 64px; color: rgba(0, 0, 0, 0.71); font-size: 24px; font-family: Inknut Antiqua; font-weight: 900; word-wrap: break-word">
                                    الهويه الرقميه</div>
                                <img class="Istockphoto1251541478612x6121" style="width: 100px; height: 100px; border-radius: 16px"
                                    src="https://i.ibb.co/3Y46zpP/istockphoto-1251541478-612x612.jpg" />
                
                            </div>
                            <div class="DigitalIdentity2"
                                    style="width: 300; height: 64px; color: rgb(0, 0, 0); font-size: 65px; font-family: Inknut Antiqua; font-weight: 900; word-wrap: break-word"> </div>
                            <div class="Rectangle3"
                                style="width: 200px; height: 146px; background: rgba(255, 255, 255, 0.27); box-shadow: 0px 0px 16.200000762939453px 8px white inset; border-radius: 20px; border: 1px rgba(0, 0, 0, 0.12) solid">
                                

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

        <script src="dev.js"></script>
        <script>
            window.addEventListener('message', (e) => {
                if (e.data === 'componentsLoaded') {
                    const script = document.createElement('script');
                    script.src = 'script.js';
                    document.body.appendChild(script);

                    fetchNui('getDirection').then((direction) => {
                        document.getElementById('direction').innerText = direction;
                    });
                } else if (e.data?.type === 'updateDirection') {
                    document.getElementById('direction').innerText = e.data.direction;
                }
            });
        </script>
    </body>
</html>
