<!DOCTYPE html>
<html lang="es">

<head>
    <title>Mi boveda</title>
    <meta charset="utf-8"/>
    <!--  Responsive -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
        integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous" />

    <!--Bootstrap Bundle -->

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"
        integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <!-- Swuitch-Colors 1.0.0-->
    <link rel="stylesheet" href="https://www.softitlan.com/switch-colors/1.0.0/sw-colors-light.css" />
    <script src="https://www.softitlan.com/switch-colors/1.0.0/sw-colors-script.js"></script>
    <!-- icons -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css" />
    <!--scritp for encript by AES-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"></script>

    <script src="https://code.jquery.com/jquery-2.2.4.min.js" type="text/javascript"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>

    <link rel="stylesheet" href="./resources/css/styles.css"/>

    <script src="./resources/javascript/main.js" type="module"></script>
    <script src="./resources/javascript/utils.js"></script>
</head>

<body class="sw-background-green">
    <header>
        <!-- TN y navbar-->
        <nav class="navbar navbar-expand-lg navbar-dark">
            <a href="" class="navbar-brand text-success">
                <i class="ic bi bi-shield-lock text-success icont3"></i>
                Tortuga Ninja Beta
            </a>
            <div class="bg-success">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navi"
                    aria-controls="navi" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse justify-content-end" id="navi">
                <ul class="navbar-nav">
                    <li class="navbar-item">
                        <a class="btn sw-background-grey btn-success nav-link text-body" data-toggle="modal" data-target="#ins" id="ing">
                            Ingresar
                        </a>
                    </li>
                    <li class="navbar-item">
                        <a class="btn sw-background-grey btn-success nav-link text-body btnReg">
                            Registrarse
                        </a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>
    <!-- tarjeta de descripcion -->
    <div class="bg-white" style="margin: 0px">
        <div class="jumbotron bg-white">
            <div class="container-fluid curv">
                <div class="row">
                    <div class="col col-lg-7 col-md-7 col-sm-12 col-12">
                        <div>
                            <!-- descripcion de TN -->
                            <h1>Tortuga Ninja Beta</h1>
                            <h5>
                                Un gestor que respalda información de forma privada y segura,
                                como datos de banco, cuentas de servicios en línea, redes
                                sociales, etc. No pedimos información personal y la
                                información está doblemente cifrada, sólo tú tienes acceso.
                            </h5>
                        </div>
                    </div>
                    <!-- logo -->
                    <div class="col col-lg-5 col-md-5 col-sm-12 col-12">
                        <div>
                            <img class="mx-auto d-block" src="https://storage.softitlan.com/ninja_turtle/TN_logoRecortado.png" alt=""
                                height="300" width="300" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="d-none d-sm-none d-md-block" style="height: 150px; overflow: hidden">
            <svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%">
                <path d="M-3.94,-4.42 C149.99,150.00 367.37,184.05 504.51,-9.36 L500.00,150.00 L0.00,150.00 Z"
                    style="stroke: none; fill: #e6f4ea"></path>
            </svg>
        </div>
    </div>
    <main>
        <!-- Ventajas de TN -->
        <div class="container-fluid">
            <div class="vtj">
                <h3 class="text-center">Ventajas de usar Tortuga Ninja</h3>
                <div class="row">
                    <div class="col col-lg-6 col-md-6 col-sm-12">
                        <div class="jumbotron bg-white VTDTarget">
                            <ul>
                                <li>
                                    <h4>
                                        Protección de tus datos, este Gestor de contraseñas
                                        desabilita la visualización cuando hay inactividad.
                                    </h4>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-12">
                        <div class="VTDTarget VTDTargetI text-center">
                            <h1>
                                <i class="bi bi-clock-history icont2"></i>
                            </h1>
                            <br />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col col-lg-6 col-md-6 col-sm-12">
                        <div class="VTDTarget VTDTargetI text-center d-none d-sm-none d-md-block">
                            <h1>
                                <i class="bi bi-database-lock icont2"></i>
                            </h1>
                            <br />
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-12">
                        <div class="jumbotron bg-white VTDTarget">
                            <ul>
                                <li>
                                    <h4>
                                        Garantiza la seguridad de tus datos al cifrarlos con una
                                        llave única para que sólo tu tengas el control.
                                    </h4>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-12">
                        <div class="d-none d-xl-none d-block d-sm-block d-md-none VTDTargetI VTDTarget text-center">
                            <h1>
                                <i class="bi bi-database-lock icont2"></i>
                            </h1>
                            <br />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col col-lg-6 col-md-6 col-sm-12">
                        <div class="jumbotron bg-white VTDTarget">
                            <ul>
                                <li>
                                    <h4>
                                        Fácil uso y accesibilidad, de tal forma que puedas usarla
                                        desde cualquier parte del mundo.
                                    </h4>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-12">
                        <div class="VTDTarget VTDTargetI text-center">
                            <h1>
                                <i class="bi bi-globe-americas icont2"></i>
                            </h1>
                            <br />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <hr />
        <div class="container-fluid">
            <div class="row">
                <div class="col">
                    <div class="jumbotron bg-white VTDTarget">
                        <h5>
                            El cifrado es una técnica que consiste en transformar un texto
                            en una cadena codificada. Tortuga Ninja esta hecho de tal manera
                            que se genere un cifrado total de sus datos, de esta manera su
                            información siempre se mantiene intregra y segura.
                        </h5>
                        <img src="https://storage.softitlan.com/ninja_turtle/cifrado.png" alt="cifrado" class="cif" />
                        <h5>
                            <ul>
                                <li>Solo tu conservas la llave de descifrado.</li>
                                <li>La información esta doblemente cifrada.</li>
                                <li>
                                    No solicitamos ni almacenamos información personal como
                                    nombres, edad, direcciones de correo, número de teléfono,
                                    etc.
                                </li>
                                <li>
                                    El doble cifrado mantiene tu información con alta seguridad
                                    e integridad.
                                </li>
                            </ul>
                        </h5>
                    </div>
                </div>
            </div>
        </div>
        <hr />

        <div class="container text-center">
            <h2>Respalda tu información de forma segura en Tortuga Ninja</h2>
            <a class="btn sw-background-grey nav-link text-body btnReg">Registrarse</a>
        </div>
    </main>
    <footer>
        <div class="container-fluid">
            <div class="info sw-background-grey text-center">
                &copy; 2022 Tortuga Ninja Beta&reg; de softitlan MX
            </div>
        </div>
    </footer>
    <!--Modal-->
    <!--Modal-->
    <div class="modal fade" id="ins" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Iniciar Sesión</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="./resources/html/vault.html" method="GET">
                        <div class="form-group">
                            <div class="row">
                                <div class="col-1 col-lg-1 col-md-1 col-sm-1" id="icon">
                                    <i class="bi bi-person-circle"></i>
                                </div>
                                <div class="col-10 col-lg-10 col-md-10 col-sm-10">
                                    <input type="text" class="form-control" placeholder="Usuario:" id="username"
                                        name="username" />
                                </div>
                            </div>
                        </div>
                        <div class="warning GR2"></div>
                        <div class="modal-footer">
                            <input type="submit" class="btn btn-success" id="init" />
                            <button type="button" class="btn sw-background-grey" id="cancel">
                                Cancelar
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>

</html>