app/contrasena.php

<?php include_once "./inc/header.php" ?>
<?php include_once "./inc/welcome.php" ?>

<section class="container-sm">
    <header class="container-sm">
        <h4 class="fs-1 pt-serif-bold" style="letter-spacing: 2px;">Genera tu contraseña aquí</h4>
        <p class="fs-1">👀🔒</p>
    </header>
    <article class="container-sm d-flex flex-column align-items-center">
        <p class="fs-4 pt-serif-regular-italic">Pulsa el botón verde</p>
        <button id="generarContraseña" type="button" class="btn btn-success btn-lg">Generar contraseña
            ✍️</button>
        <div class="input-group alert alert-success my-3 pb-0 ancho-password" role="alert">
            <p id="showPassword" class="fs-4 pt-serif-regular form-control">Aquí tu contraseña</p>
            <button id="copy-contra" class="btn btn-danger pt-serif-regular mb-3" type="button" data-bs-toggle="modal"
                data-bs-target="#copiado" disabled>Copiar</button>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="copiado" tabindex="-1" aria-labelledby="copiadoLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content border-white">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="copiadoLabel">Éxito</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        Su contraseña ha sido copiada al portapapeles
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Ok</button>
                    </div>
                </div>
            </div>
        </div>

        <button id="downloadBtn" type="button" class="btn btn-warning btn-lg" disabled>Guardar en
            dispositivo 💾</button>

        <link rel="stylesheet" href="/css/formulario.css">
        <!-- Modal -->
        <div class="modal fade" id="form" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
            aria-labelledby="formLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content border-white">
                    <div class="modal-header">
                        <h1 class="text-center fs-5" id="formLabel">Encuesta de satisfacción</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form id="formulario-satisfaccion" class="container-fluid" action="/" method="post">
                            <div>
                                <p class="m-0 p-0 ">¿Qué tan satisfecho te sientes con el servicio?</p>
                                <p class="clasificacion">
                                    <input id="radio1" type="radio" name="estrellas" value="5">
                                    <label for="radio1">★</label>
                                    <input id="radio2" type="radio" name="estrellas" value="4"><label
                                        for="radio2">★</label>
                                    <input id="radio3" type="radio" name="estrellas" value="3">
                                    <label for="radio3">★</label>
                                    <input id="radio4" type="radio" name="estrellas" value="2">
                                    <label for="radio4">★</label>
                                    <input id="radio5" type="radio" name="estrellas" value="1" checked>
                                    <label for="radio5">★</label>
                                </p>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button id="no-opinion" type="button" class="btn btn-secondary" data-bs-dismiss="modal">Sin
                            opinion</button>
                        <button id="enviar-form" class="btn btn-primary">Enviar</button>
                    </div>
                </div>
            </div>
        </div>
    </article>
</section>
<script src="/js/contrasena.js?i=12"></script>
<script src="/js/formulario.js?i=12"></script>

<?php include_once "./inc/footer.php" ?>