
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <title>GRIFO MOLICAMPER</title>
        <link href="<?php echo base_url;?>assets/css/styles.css" rel="stylesheet" />
        <script src="<?php echo base_url;?>assets/js/cdnjs.cloudflare.com_ajax_libs_font-awesome_5.13.0_js_all.min.js" crossorigin="anonymous"></script>
        

        <style>
          body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
        background: linear-gradient(135deg, #8f8ff7, #1c29e0);
        color: #333;
        transition: background 0.3s;
    }

        .card {
            background: #fff;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }

        .card-header {
            background: linear-gradient(135deg, #008fd6, #5ee7df);
            color: #fff;
        }

        .card-body {
            padding: 30px;
        }

        .form-control {
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 10px;
        }

        .form-control:focus {
            border-color: #008fd6;
            box-shadow: 0 0 5px #008fd6;
        }

        .alert {
            background: #ff6b6b;
            color: #fff;
        }
  
        .btn {
            background: linear-gradient(135deg, #FF0000, #000000);
            color: #fff;
            border: none;
            border-radius: 4px;
            padding: 10px 20px;
            cursor: pointer;
            transition: background 0.3s, transform 0.3s;
        }
      

        .btn:hover {
            background: linear-gradient(135deg, #a2f7f1, #132e86);
            transform: scale(1.05);
        }

        .small a {
            color: #8bb2c5;
        }

        .small a:hover {
            text-decoration: underline;
        }
        .stil {
        font-family: 'Arial Black', sans-serif; /* Cambiar 'Arial Black' al tipo de letra deseado */
        font-weight: bold; /* Asegurarse de que la fuente sea más gruesa */
        letter-spacing: -1px; /* Ajustar el espaciado entre letras según sea necesario */
        color: black; /* Cambiar 'black' al color deseado */
        background: linear-gradient(135deg, red, black); /* Degradado rojo a negro */
        -webkit-background-clip: text; /* Clip de fondo para aplicar el degradado al texto */
        color: transparent; /* Hacer el texto transparente para que se muestre el degradado de fondo */
        display: inline; /* Asegurarse de que el degradado abarque solo el texto */
    }
        .align-left {
          float: left;
}

    </style>
    </head>
    <body class="bg-primary">
    <div class="col-lg-12 row">
        <div class="col-md-9 align-left d-none d-md-block">
            <div class="card shadow-lg border-0 rounded-lg mt-0">
               <img src="<?php echo base_url;?>assets/img/MOLICAMPER.jpg"
                    class="img-fluid"
                    style="max-width:100%; height:935px; position:relative; left:-10px;">
            </div>
        </div>

        <div class="container col-md-3">
            <main>
                <div class="row">
                    <div class="col-md-12">
                        <div class="card shadow-lg border-0 rounded-lg mt-5">
                            <div class="card-header">
                                <h3 class="text-center font-weight-light my-1">
                                    <div class="d-flex align-items-center justify-content-start">
                                        <div class="image-container mr-1" style="max-height: 150px; overflow: hidden;">
                                            <img src="<?php echo base_url;?>assets/img/MOLICAMPER.jpg" class="img-fluid" style="width: 100%; margin-top: -50px; margin-left: -20px;">
                                        </div>
                                    </div>
                                </h3>
                            </div>
                            <div class="card-body">
                                <form id="frmlogin">
                                    <div class="form-group">
                                        <label class="small mb-1" for="usuario">usuario</label>
                                        <input class="form-control py-4" id="usuario" name="usuario" type="text" placeholder="INGRESE SU USUARIO" />
                                    </div>
                                    <div class="form-group">
                                        <label class="small mb-1" for="clave">ingrese su contraseña</label>
                                        <input class="form-control py-4" id="clave" name="clave" type="password" placeholder="CONTRASEÑA" />
                                    </div>
                                    <div class="alert alert-danger text-center d-none" id="alerta" role="alert">
                                    </div>
                                    <div class="form-group">
                                        <br>
                                    </div>
                                    <div class="form-group d-flex align-items-center justify-content-between mt-4 mb-0">
                                        <a class="small" href="http://192.168.1.40/postventa/">SOF LTE</a>
                                        <button class="btn btn-danger" type="submit" onclick="frmlogin(event);">INGRESAR</button>
                                    </div>
                                </form>
                            </div>
                            <div class="card-footer text-center">
                                <div class="small"><a href="http://192.168.1.40/postventa/">desarrollado por LEYSA SOF LTE</a></div>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>
</body>

        <script src="<?php echo base_url;?>assets/js/code.jquery.com_jquery-3.5.1.min.js" crossorigin="anonymous"></script>
        <script src="<?php echo base_url;?>assets/js/stackpath.bootstrapcdn.com_bootstrap_4.5.0_js_bootstrap.bundle.min.js" crossorigin="anonymous"></script>
        <script src="<?php echo base_url;?>assets/js/scripts.js"></script>
        <script>
            const base_url ="<?php echo base_url ?>";
        </script>
        <script src="<?php echo base_url;?>assets/js/login.js"></script>
        <script src="<?php echo base_url;?>assets/js/kit.fontawesome.com_ab917c5326.js" crossorigin="anonymous"></script>
    </body>
</html>



