<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Pay App</title>
    <link rel="stylesheet" href="style.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=Inter:wght@100..900&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>
    <div id="phone-wrapper-chamados">
        <div class="app-chamados">
            <div class="row-chamados">
                <div class="logo">
                    <p>Chamados - Maritima</p>

                    <div class="fotoplayer">
                        <div class="logofotoplayer">
                            <img src="https://cdn.discordapp.com/attachments/1308816462407925801/1319181559546511402/LOGO_Maritima_RP_2000x2000_Transparente_-_by_Design_Ideal.png?ex=6787f6d1&is=6786a551&hm=4d10e4ba3c2161840508dde9793e89eff885e5bbca49a164d9453714447b19dd&" alt="">
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="homeappchamados">
                <div class="mainhome">
                    <div class="separatedline"></div>
                    
                    <div class="atividadesrecentes">
                        <div class="textactiv">
                            <div class="line">
                            </div>
                            <p>Chamadas de Emergências</p>
                        </div>
                        <div class="chamadosmain"> 
                            <div class="chamadobox">
                                <div class="logochamado">
                                    <img src="https://cdn.discordapp.com/attachments/1308816462407925801/1319181559546511402/LOGO_Maritima_RP_2000x2000_Transparente_-_by_Design_Ideal.png?ex=6787f6d1&is=6786a551&hm=4d10e4ba3c2161840508dde9793e89eff885e5bbca49a164d9453714447b19dd&" alt="">
                                </div>
                                <div class="namechamado">
                                    <p>Prefeitura</p>
                                </div>
                                <div class="deschamado">
                                    <p>Entrar em contato com a Prefeitura.</p>
                                </div>
                                <div class="chamar" data-type="prefeitura">
                                    <i class="fa-solid fa-phone"></i>
                                </div>
                            </div>
                            <div class="chamadobox">
                                <div class="logochamado">
                                    <img src="https://cdn.discordapp.com/icons/1314009438436327544/28026b8f14637f4636ca8c6185250dc3.png" alt="">
                                </div>
                                <div class="namechamado">
                                    <p>Policia</p>
                                </div>
                                <div class="deschamado">
                                    <p>Entrar em contato com a Policia.</p>
                                </div>
                                <div class="chamar" data-type="policia">
                                    <i class="fa-solid fa-phone"></i>
                                </div>
                            </div>
                            <div class="chamadobox">
                                <div class="logochamado">
                                    <img src="https://cdn.discordapp.com/attachments/1308816462407925801/1319181559546511402/LOGO_Maritima_RP_2000x2000_Transparente_-_by_Design_Ideal.png?ex=6787f6d1&is=6786a551&hm=4d10e4ba3c2161840508dde9793e89eff885e5bbca49a164d9453714447b19dd&" alt="">
                                </div>
                                <div class="namechamado">
                                    <p>Bennys</p>
                                </div>
                                <div class="deschamado">
                                    <p>Entrar em contato com a Bennys.</p>
                                </div>
                                <div class="chamar" data-type="bennys">
                                    <i class="fa-solid fa-phone"></i>
                                </div>
                            </div>
                            <div class="chamadobox">
                                <div class="logochamado">
                                    <img src="https://cdn.discordapp.com/attachments/1308816462407925801/1319181559546511402/LOGO_Maritima_RP_2000x2000_Transparente_-_by_Design_Ideal.png?ex=6787f6d1&is=6786a551&hm=4d10e4ba3c2161840508dde9793e89eff885e5bbca49a164d9453714447b19dd&" alt="">
                                </div>
                                <div class="namechamado">
                                    <p>Hospital</p>
                                </div>
                                <div class="deschamado">
                                    <p>Entrar em contato com o Hospital.</p>
                                </div>
                                <div class="chamar" data-type="hospital">
                                    <i class="fa-solid fa-phone"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="homechamados" style="display: none;"> 
                <!-- style="display: none;" -->
                <div class="textochamado">
                    <svg id="svgvoltar" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
                        fill="none">
                        <path
                            d="M0.292893 7.29289C-0.0976314 7.68342 -0.0976315 8.31658 0.292892 8.70711L6.65685 15.0711C7.04738 15.4616 7.68054 15.4616 8.07107 15.0711C8.46159 14.6805 8.46159 14.0474 8.07107 13.6569L2.41421 8L8.07107 2.34315C8.46159 1.95262 8.46159 1.31946 8.07107 0.928931C7.68054 0.538407 7.04738 0.538407 6.65685 0.928931L0.292893 7.29289ZM16 7L0.999999 7L0.999999 9L16 9L16 7Z"
                            fill="#00ffff" />
                    </svg>
                    <p>Realizando Chamado - <span id="chamadoname">Reportagem</span></p>
                </div>
                <div class="descmotivo">
                    <p>Descreva o motivo</p>
                </div>

                <div class="textarea">
                    <textarea placeholder="Descrição do Chamado - Max 200 caracteres." maxlength="200"> </textarea>
                </div>

                <div class="buttonenviar">
                    <p>Enviar Solicitação</p> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="12"
                        viewBox="0 0 14 12" fill="none">
                        <path d="M0 12V7.5L5.89474 6L0 4.5V0L14 6L0 12Z" fill="#1A191D" />
                    </svg>
                </div>

                <div class="mainchamados">
                    <div class="separatedline"></div>
                    <div class="chamadosrapido">
                        <div class="textactiv">
                            <div class="line">
                            </div>
                            <p>Aviso Importante</p>
                        </div>
                        <div id="atividadechamados" class="mainatividadeschamados">
                            <p class="avisodesc">Antes de enviar uma solicitação confirme se seu chamado contem uma descrição completa, chamados sem descrição ou com uma descrição porca serão ignorados.</p>    
                        </div>
                        
                    </div>
                </div>

            </div>

            <div class="footermain">
                <div class="watermark">
                    <b>With &#129505; by SeaGroup (Devloped by Brian)</b>
                </div>
            </div>

            <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
            <script src="dev.js"></script>
            <script src="https://cfx-nui-lb-phone/ui/components.js"></script>
            <script src="script.js"></script>
</body>
</html>