<!DOCTYPE html>
<html dir="ltr">


<!-- Mirrored from yoda.hypeople.studio/yoda-admin-template/html/ltr/horizontal/auth-register.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Sep 2023 17:52:04 GMT -->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!-- Font -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&amp;display=swap"
        rel="stylesheet" />

    <!-- Plugin -->
    <link rel="stylesheet" type="text/css" href="../app-assets/css/plugin/swiper-bundle.min.css">
    <link rel="stylesheet" type="text/css" href="../app-assets/icons/iconly/index.min.css">
    <link rel="stylesheet" type="text/css" href="../app-assets/icons/remix-icon/index.min.css">
    <link rel="stylesheet" type="text/css" href="../app-assets/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../app-assets/css/colors.css">

    <!-- Base -->
    <link rel="stylesheet" type="text/css" href="../app-assets/css/base/typography.css">
    <link rel="stylesheet" type="text/css" href="../app-assets/css/base/base.css">

    <!-- Theme -->
    <link rel="stylesheet" type="text/css" href="../app-assets/css/theme/colors-dark.css">
    <link rel="stylesheet" type="text/css" href="../app-assets/css/theme/theme-dark.css">
    <link rel="stylesheet" type="text/css" href="../app-assets/css/custom-rtl.css">

    <!-- Layouts -->
    <link rel="stylesheet" type="text/css" href="../app-assets/css/layouts/sider.css">
    <link rel="stylesheet" type="text/css" href="../app-assets/css/layouts/header.css">
    <link rel="stylesheet" type="text/css" href="../app-assets/css/layouts/page-content.css">
    <link rel="stylesheet" type="text/css" href="../app-assets/css/components.css">
    <!-- Customizer -->
    <link rel="stylesheet" type="text/css" href="../app-assets/css/layouts/customizer.css">

    <!-- Pages -->
    <link rel="stylesheet" type="text/css" href="../app-assets/css/pages/authentication.css">

    <!-- Custom -->
    <link rel="stylesheet" type="text/css" href="../../../assets/css/style.css">

    <title>Solicitud HelpDesk</title>
    <style>
        .form-switch .form-check-input:checked~.form-check-label:before {
            background: #ed1b24 !important;
        }

        .btn.btn-primary:hover {
            background: #e9484f !important;
            border-color: #e9484f !important;
        }

        .btn-primary {
            color: #fff !important;
            background-color: #ed1b24 !important;
            border-color: #ed1b24 !important;
        }

        #loader {
            background-color: #ffffffd9;
            display: none;
            justify-content: center;
            align-items: center;
            width: 100vw;
            height: 100vh;
            z-index: 999999;
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div id="loader">
        <div class="col hp-flex-none w-auto">
            <div class="spinner-border text-danger" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
    </div>
    <div class="row hp-authentication-page">
        <div class="hp-bg-black-20 hp-bg-color-dark-90 col-lg-4 col-4">
            <div class="row hp-image-row h-100">
                <div class="col-12 px-0">
                    <div class="row h-100 w-100 mx-0 align-items-center justify-content-center">
                        <div class="col-12">
                            <h4 class="hp-text-color-black-100 hp-text-color-dark-0 mx-16 mx-lg-0 mb-16">Solicitud
                                HelpDesk</h4>
                            <p class="h5 mb-0 fw-normal hp-text-color-black-80 hp-text-color-dark-20">Utiliza este
                                formulario para solicitar soporte. Recuerda incluir la mayor cantidad de detalles.</p>
                            <br><br>
                            <img class="m-auto w-100" src="../assets/img/helpdesk.png" alt="Background Image">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-8 col-lg-8 py-lg-0">
            <div class="row align-items-center justify-content-center h-100 mx-4 mx-sm-n32">
                <div class="col-10 px-8 px-sm-0 pt-24 pb-48">
                    <form id="helpdesk" class="mt-16">
                        <div class="mb-16">
                            <label for="description" class="form-label">Descripción de la solicitud:</label>
                            <textarea name="description" id="description" class="form-control" required></textarea>
                        </div>
                        <p style="font-size: 12px;line-height: 15px;">Para que el soporte sea efectivo, vamos a recopilar información técnica, para ello debes realizar el proceso con el aplicativo que este presentando falla. Cuando estés preparado da click en recopilar información y accede al aplicativo, luego cuando en pantalla se visualice el error o la falla da de nuevo click en detener recopilación y se te habilitara el botón de enviar</p>
                        <button type="submit" class="btn btn-primary w-100" disabled>
                            Enviar Solicitud
                        </button>
                    </form>
                    <!-- <button id="screenshot" class="btn btn-primary w-100">
                        Screenshot
                    </button> -->
                    <button id="record" class="btn btn-primary w-100">
                        Recopilar información
                    </button>
                    <video src="" width="100%" height="auto"></video>
                </div>
            </div>
        </div>
    </div>
    <script src="../assets/js/helpdesk.js"></script>
</body>

</html>