commit 1274e1a977d13b6656958ccbf7944111f68b3542 Author: Christian Julian Jimenez <zs22016079@estudiantes.uv.mx> Date: Mon Apr 21 20:25:22 2025 -0600 first commit diff --git a/README.md b/README.md new file mode 100644 index 0000000..e69de29 diff --git a/css/inicio.css b/css/inicio.css new file mode 100644 index 0000000..d5377b9 --- /dev/null +++ b/css/inicio.css @@ -0,0 +1,597 @@ +@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap'); + +* { + font-family: 'Open Sans', sans-serif; + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + --grey: #F1F0F6; + --dark-grey: #8D8D8D; + --light: #fff; + --dark: #000; + --green: #81D43A; + --light-green: #E3FFCB; + --blue: #35245b; + --light-blue: #D0E4FF; + --dark-blue: #0c1b5e; + --red: #FC3B56; +} + +html { + overflow-x: hidden; +} + +body { + background: var(--grey); + overflow-x: hidden; +} + +a { + text-decoration: none; +} + +li { + list-style: none; +} + + + + + + + +/* SIDEBAR */ +#sidebar { + position: fixed; + max-width: 260px; + width: 100%; + background: var(--light); + top: 0; + left: 0; + height: 100%; + overflow-y: auto; + scrollbar-width: none; + transition: all .3s ease; + z-index: 200; +} +#sidebar.hide { + max-width: 60px; +} +#sidebar.hide:hover { + max-width: 260px; +} +#sidebar::-webkit-scrollbar { + display: none; +} +#sidebar .brand { + font-size: 24px; + display: flex; + align-items: center; + height: 64px; + font-weight: 700; + color: var(--blue); + position: sticky; + top: 0; + left: 0; + z-index: 100; + background: var(--light); + transition: all .3s ease; + padding: 0 6px; +} +#sidebar .icon { + min-width: 48px; + display: flex; + justify-content: center; + align-items: center; + margin-right: 6px; +} +#sidebar .icon-right { + margin-left: auto; + transition: all .3s ease; +} +#sidebar .side-menu { + margin: 36px 0; + padding: 0 20px; + transition: all .3s ease; +} +#sidebar.hide .side-menu { + padding: 0 6px; +} +#sidebar.hide:hover .side-menu { + padding: 0 20px; +} +#sidebar .side-menu a { + display: flex; + align-items: center; + font-size: 14px; + color: var(--dark); + padding: 12px 16px 12px 0; + transition: all .3s ease; + border-radius: 10px; + margin: 4px 0; + white-space: nowrap; +} +#sidebar .side-menu > li > a:hover { + background: var(--grey); +} +#sidebar .side-menu > li > a.active .icon-right { + transform: rotateZ(90deg); +} +#sidebar .side-menu > li > a.active, +#sidebar .side-menu > li > a.active:hover { + background: var(--blue); + color: var(--light); +} +#sidebar .divider { + margin-top: 24px; + font-size: 12px; + text-transform: uppercase; + font-weight: 700; + color: var(--dark-grey); + transition: all .3s ease; + white-space: nowrap; +} +#sidebar.hide:hover .divider { + text-align: left; +} +#sidebar.hide .divider { + text-align: center; +} +#sidebar .side-dropdown { + padding-left: 54px; + max-height: 0; + overflow-y: hidden; + transition: all .15s ease; +} +#sidebar .side-dropdown.show { + max-height: 1000px; +} +#sidebar .side-dropdown a:hover { + color: var(--blue); +} +#sidebar .ads { + width: 100%; + padding: 20px; +} +#sidebar.hide .ads { + display: none; +} +#sidebar.hide:hover .ads { + display: block; +} +#sidebar .ads .wrapper { + background: var(--grey); + padding: 20px; + border-radius: 10px; +} +#sidebar .btn-upgrade { + font-size: 14px; + display: flex; + justify-content: center; + align-items: center; + padding: 12px 0; + color: var(--light); + background: var(--blue); + transition: all .3s ease; + border-radius: 5px; + font-weight: 600; + margin-bottom: 12px; +} +#sidebar .btn-upgrade:hover { + background: var(--dark-blue); +} +#sidebar .ads .wrapper p { + font-size: 12px; + color: var(--dark-grey); + text-align: center; +} +#sidebar .ads .wrapper p span { + font-weight: 700; +} +/* SIDEBAR */ + + + + + +/* CONTENT */ +#content { + position: relative; + width: calc(100% - 260px); + left: 260px; + transition: all .3s ease; +} +#sidebar.hide + #content { + width: calc(100% - 60px); + left: 60px; +} +/* NAVBAR */ +nav { + background: var(--light); + height: 64px; + padding: 0 20px; + display: flex; + align-items: center; + grid-gap: 28px; + position: sticky; + top: 0; + left: 0; + z-index: 100; +} +nav .toggle-sidebar { + font-size: 18px; + cursor: pointer; +} +nav form { + max-width: 400px; + width: 100%; + margin-right: auto; +} +nav .form-group { + position: relative; +} +nav .form-group input { + width: 100%; + background: var(--grey); + border-radius: 5px; + border: none; + outline: none; + padding: 10px 36px 10px 16px; + transition: all .3s ease; +} +nav .form-group input:focus { + box-shadow: 0 0 0 1px var(--blue), 0 0 0 4px var(--light-blue); +} +nav .form-group .icon { + position: absolute; + top: 50%; + transform: translateY(-50%); + right: 16px; + color: var(--dark-grey); +} +nav .nav-link { + position: relative; +} +nav .nav-link .icon { + font-size: 18px; + color: var(--dark); +} +nav .nav-link .badge { + position: absolute; + top: -12px; + right: -12px; + width: 20px; + height: 20px; + border-radius: 50%; + border: 2px solid var(--light); + background: var(--red); + display: flex; + justify-content: center; + align-items: center; + color: var(--light); + font-size: 10px; + font-weight: 700; +} +nav .divider { + width: 1px; + background: var(--grey); + height: 12px; + display: block; +} +nav .profile { + position: relative; +} +nav .profile img { + width: 36px; + height: 36px; + border-radius: 50%; + object-fit: cover; + cursor: pointer; +} +nav .profile .profile-link { + position: absolute; + top: calc(100% + 10px); + right: 0; + background: var(--light); + padding: 10px 0; + box-shadow: 4px 4px 16px rgba(0, 0, 0, .1); + border-radius: 10px; + width: 160px; + opacity: 0; + pointer-events: none; + transition: all .3s ease; +} +nav .profile .profile-link.show { + opacity: 1; + pointer-events: visible; + top: 100%; +} +nav .profile .profile-link a { + padding: 10px 16px; + display: flex; + grid-gap: 10px; + font-size: 14px; + color: var(--dark); + align-items: center; + transition: all .3s ease; +} +nav .profile .profile-link a:hover { + background: var(--grey); +} +/* NAVBAR */ + + + +/* MAIN */ +main { + width: 100%; + padding: 24px 20px 20px 20px; +} +main .title { + font-size: 28px; + font-weight: 600; + margin-bottom: 10px; +} +main .breadcrumbs { + display: flex; + grid-gap: 6px; +} +main .breadcrumbs li, +main .breadcrumbs li a { + font-size: 14px; +} +main .breadcrumbs li a { + color: var(--blue); +} +main .breadcrumbs li a.active, +main .breadcrumbs li.divider { + color: var(--dark-grey); + pointer-events: none; +} +main .info-data { + margin-top: 36px; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + grid-gap: 20px; +} +main .info-data .card { + padding: 20px; + border-radius: 10px; + background: var(--light); + box-shadow: 4px 4px 16px rgba(0, 0, 0, .05); +} +main .card .head { + display: flex; + justify-content: space-between; + align-items: flex-start; +} +main .card .head h2 { + font-size: 24px; + font-weight: 600; +} +main .card .head p { + font-size: 14px; +} +main .card .head .icon { + font-size: 20px; + color: var(--green); +} +main .card .head .icon.down { + color: var(--red); +} +main .card .progress { + display: block; + margin-top: 24px; + height: 10px; + width: 100%; + border-radius: 10px; + background: var(--grey); + overflow-y: hidden; + position: relative; + margin-bottom: 4px; +} +main .card .progress::before { + content: ''; + position: absolute; + top: 0; + left: 0; + height: 100%; + background: var(--blue); + width: var(--value); +} +main .card .label { + font-size: 14px; + font-weight: 700; +} +main .data { + display: flex; + grid-gap: 20px; + margin-top: 20px; + flex-wrap: wrap; +} +main .data .content-data { + flex-grow: 1; + flex-basis: 400px; + padding: 20px; + background: var(--light); + border-radius: 10px; + box-shadow: 4px 4px 16px rgba(0, 0, 0, .1); +} +main .content-data .head { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 24px; +} +main .content-data .head h3 { + font-size: 20px; + font-weight: 600; +} +main .content-data .head .menu { + position: relative; + display: flex; + justify-content: center; + align-items: center; +} +main .content-data .head .menu .icon { + cursor: pointer; +} +main .content-data .head .menu-link { + position: absolute; + top: calc(100% + 10px); + right: 0; + width: 140px; + background: var(--light); + border-radius: 10px; + box-shadow: 4px 4px 16px rgba(0, 0, 0, .1); + padding: 10px 0; + z-index: 100; + opacity: 0; + pointer-events: none; + transition: all .3s ease; +} +main .content-data .head .menu-link.show { + top: 100%; + opacity: 1; + pointer-events: visible; +} +main .content-data .head .menu-link a { + display: block; + padding: 6px 16px; + font-size: 14px; + color: var(--dark); + transition: all .3s ease; +} +main .content-data .head .menu-link a:hover { + background: var(--grey); +} +main .content-data .chart { + width: 100%; + max-width: 100%; + overflow-x: auto; + scrollbar-width: none; +} +main .content-data .chart::-webkit-scrollbar { + display: none; +} + +main .chat-box { + width: 100%; + max-height: 360px; + overflow-y: auto; + scrollbar-width: none; +} +main .chat-box::-webkit-scrollbar { + display: none; +} +main .chat-box .day { + text-align: center; + margin-bottom: 10px; +} +main .chat-box .day span { + display: inline-block; + padding: 6px 12px; + border-radius: 20px; + background: var(--light-blue); + color: var(--blue); + font-size: 12px; + font-weight: 600; +} +main .chat-box .msg img { + width: 28px; + height: 28px; + border-radius: 50%; + object-fit: cover; +} +main .chat-box .msg { + display: flex; + grid-gap: 6px; + align-items: flex-start; +} +main .chat-box .profile .username { + font-size: 14px; + font-weight: 600; + display: inline-block; + margin-right: 6px; +} +main .chat-box .profile .time { + font-size: 12px; + color: var(--dark-grey); +} +main .chat-box .chat p { + font-size: 14px; + padding: 6px 10px; + display: inline-block; + max-width: 400px; + line-height: 150%; +} +main .chat-box .msg:not(.me) .chat p { + border-radius: 0 5px 5px 5px; + background: var(--blue); + color: var(--light); +} +main .chat-box .msg.me { + justify-content: flex-end; +} +main .chat-box .msg.me .profile { + text-align: right; +} +main .chat-box .msg.me p { + background: var(--grey); + border-radius: 5px 0 5px 5px; +} +main form { + margin-top: 6px; +} +main .form-group { + width: 100%; + display: flex; + grid-gap: 10px; +} +main .form-group input { + flex-grow: 1; + padding: 10px 16px; + border-radius: 5px; + outline: none; + background: var(--grey); + border: none; + transition: all .3s ease; + width: 100%; +} +main .form-group input:focus { + box-shadow: 0 0 0 1px var(--blue), 0 0 0 4px var(--light-blue); +} +main .btn-send { + padding: 0 16px; + background: var(--blue); + border-radius: 5px; + color: var(--light); + cursor: pointer; + border: none; + transition: all .3s ease; +} +main .btn-send:hover { + background: var(--dark-blue); +} +/* MAIN */ +/* CONTENT */ + + + + + + +@media screen and (max-width: 768px) { + #content { + position: relative; + width: calc(100% - 60px); + transition: all .3s ease; + } + nav .nav-link, + nav .divider { + display: none; + } +} diff --git a/css/login.css b/css/login.css new file mode 100644 index 0000000..fcf9c6d --- /dev/null +++ b/css/login.css @@ -0,0 +1,132 @@ +@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap'); + + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Open Sans', sans-serif; +} + +body { + background-color: #f1f0f6; + display: grid; + place-items: center; + min-height: 100vh; +} + +.login-container { + background-color: #ffffff; + border: 2px solid #e8e8e8; + border-radius: 8px; + padding: 2rem; + width: 100%; + max-width: 500px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +@media screen and (max-width: 768px) { + .login-container { + width: 80%; + } +} + + +.login-encabezado { + text-align: center; + margin-bottom: 1.5rem; +} + +.login-logo { + max-width: 150px; + height: auto; + margin-bottom: 1rem; +} + +.login-titulo { + font-size: 1.5rem; + color: #333; + display: flex; + align-items: center; + justify-content: center; +} + +.login-subtitulo { + color: #666; + margin-top: 0.5rem; +} + +.login-formulario { + color: #666; + margin-top: 0.5rem; +} + +.form-grupo { + margin-bottom: 1rem; +} + +.form-label { + display: flex; + align-items: center; + margin-bottom: 0.5rem; + font-weight: bold; +} + +.form-input { + width: 100%; + padding: 0.75rem; + border: 1px solid #e8e8e8; + border-radius: 4px; + background-color: #f6f6f6; + transition: all 0.3s ease; +} + +.form-input:focus { + outline: none; + border-color: #35245b; + box-shadow: 0 0 0 2px rgba(2, 27, 48, 0.2); +} + +.login-boton { + background-color: #35245b; + color: white; + border: none; + border-radius: 4px; + padding: 0.75rem; + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + cursor: pointer; + transition: all 0.3s ease; + margin-top: 1rem; + width: 100%; +} + +.login-boton:hover { + background-color: #432d74; + box-shadow: 0 4px 8px #53388f; +} + +.login-boton:active { + transform: scale(0.98); +} + +.material-icons { + font-size: 1.25rem; +} + +.mensaje-error { + display: none; + background-color: #f8d7da; + color: #dc3545; + border: 1px solid #dc3545; + border-radius: 4px; + padding: 0.75rem; + margin-top: 1rem; + text-align: center; + animation: fadeIn 0.3s ease-in-out; +} + + + diff --git a/img/lania.png b/img/lania.png new file mode 100644 index 0000000..176473a Binary files /dev/null and b/img/lania.png differ diff --git a/img/lania_logo.png b/img/lania_logo.png new file mode 100644 index 0000000..4dafeec Binary files /dev/null and b/img/lania_logo.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..d9bf166 --- /dev/null +++ b/index.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<html lang="es"> + <head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <link rel="stylesheet" type="text/css" href="css/login.css" /> + <link + rel="stylesheet" + href="https://fonts.googleapis.com/icon?family=Material+Icons" + /> + <title>Iniciar Sesión</title> + </head> + <body> + <div class="login-container"> + <div class="login-encabezado"> + <img + src="img/lania_logo.png" + alt="Logo de la empresa" + class="login-logo" + /> + <h1 class="login-titulo">Iniciar Sesión</h1> + <p class="login-subtitulo">Por favor ingrese sus credenciales</p> + </div> + + <form id="login-formulario" class="login-formulario"> + <div class="form-grupo"> + <label for="numero-personal" class="form-label" + ><span class="material-icons">person</span>Número de Personal</label + > + <input + type="text" + id="numero-personal" + name="numero-personal" + class="form-input" + placeholder="Ingresa tu número de personal" + required + /> + </div> + + <div class="form-grupo"> + <label for="contrasena" class="form-label"> + <span class="material-icons">lock</span> + Contraseña</label + > + <input + type="password" + id="contrasena" + name="contrasena" + class="form-input" + placeholder="Ingresa tu contraseña" + required + /> + </div> + + <button type="submit" class="login-boton"> + <span class="material-icons">login</span>Iniciar Sesión + </button> + + <div id="mensaje-error" class="mensaje-error"></div> + </form> + </div> + <script src="js/login.js"></script> + </body> +</html> diff --git a/inicio.html b/inicio.html new file mode 100644 index 0000000..ee24795 --- /dev/null +++ b/inicio.html @@ -0,0 +1,269 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link href='https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css' rel='stylesheet'> + <link rel="stylesheet" href="css/inicio.css"> + <title>AdminSite</title> +</head> +<body> + + <!-- SIDEBAR --> + <section id="sidebar"> + <a href="#" class="brand"><i class='bx bx-code-alt icon' ></i> LANIA</a> + <!-- <a href="#" class="brand"> + <img src="img/lania_logo.png" alt="Logo" style="height: 40px;"> + </a> --> + <ul class="side-menu"> + <li><a href="#" class="active"><i class='bx bxs-dashboard icon' ></i> Dashboard</a></li> + <li class="divider" data-text="main">Main</li> + <li> + <a href="#"><i class='bx bxs-inbox icon' ></i> Elements <i class='bx bx-chevron-right icon-right' ></i></a> + <ul class="side-dropdown"> + <li><a href="#">Alert</a></li> + <li><a href="#">Badges</a></li> + <li><a href="#">Breadcrumbs</a></li> + <li><a href="#">Button</a></li> + </ul> + </li> + <li><a href="#"><i class='bx bxs-chart icon' ></i> Charts</a></li> + <li><a href="#"><i class='bx bxs-widget icon' ></i> Widgets</a></li> + <li class="divider" data-text="table and forms">Table and forms</li> + <li><a href="#"><i class='bx bx-table icon' ></i> Tables</a></li> + <li> + <a href="#"><i class='bx bxs-notepad icon' ></i> Forms <i class='bx bx-chevron-right icon-right' ></i></a> + <ul class="side-dropdown"> + <li><a href="#">Basic</a></li> + <li><a href="#">Select</a></li> + <li><a href="#">Checkbox</a></li> + <li><a href="#">Radio</a></li> + </ul> + </li> + </ul> + <!-- <div class="ads"> + <div class="wrapper"> + <a href="#" class="btn-upgrade">Upgrade</a> + <p>Become a <span>PRO</span> member and enjoy <span>All Features</span></p> + </div> + </div> --> + </section> + <!-- SIDEBAR --> + + <!-- NAVBAR --> + <section id="content"> + <!-- NAVBAR --> + <nav> + <i class='bx bx-menu toggle-sidebar' ></i> + <form action="#"> + <div class="form-group"> + <input type="text" placeholder="Buscar..."> + <i class='bx bx-search icon' ></i> + </div> + </form> + <a href="#" class="nav-link"> + <i class='bx bxs-bell icon' ></i> + <span class="badge">5</span> + </a> + <a href="#" class="nav-link"> + <i class='bx bxs-message-square-dots icon' ></i> + <span class="badge">8</span> + </a> + <span class="divider"></span> + <div class="profile"> + <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8cGVvcGxlfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt=""> + <ul class="profile-link"> + <li><a href="#"><i class='bx bxs-user-circle icon' ></i> Profile</a></li> + <li><a href="#"><i class='bx bxs-cog' ></i> Settings</a></li> + <li><a href="#"><i class='bx bxs-log-out-circle' ></i> Logout</a></li> + </ul> + </div> + </nav> + <!-- NAVBAR --> + + <!-- MAIN --> + <main> + <h1 class="title">Dashboard</h1> + <ul class="breadcrumbs"> + <li><a href="#">Home</a></li> + <li class="divider">/</li> + <li><a href="#" class="active">Dashboard</a></li> + </ul> + <div class="info-data"> + <div class="card"> + <div class="head"> + <div> + <h2>1500</h2> + <p>Traffic</p> + </div> + <i class='bx bx-trending-up icon' ></i> + </div> + <span class="progress" data-value="40%"></span> + <span class="label">40%</span> + </div> + <div class="card"> + <div class="head"> + <div> + <h2>234</h2> + <p>Sales</p> + </div> + <i class='bx bx-trending-down icon down' ></i> + </div> + <span class="progress" data-value="60%"></span> + <span class="label">60%</span> + </div> + <div class="card"> + <div class="head"> + <div> + <h2>465</h2> + <p>Pageviews</p> + </div> + <i class='bx bx-trending-up icon' ></i> + </div> + <span class="progress" data-value="30%"></span> + <span class="label">30%</span> + </div> + <div class="card"> + <div class="head"> + <div> + <h2>235</h2> + <p>Visitors</p> + </div> + <i class='bx bx-trending-up icon' ></i> + </div> + <span class="progress" data-value="80%"></span> + <span class="label">80%</span> + </div> + </div> + <div class="data"> + <div class="content-data"> + <div class="head"> + <h3>Sales Report</h3> + <div class="menu"> + <i class='bx bx-dots-horizontal-rounded icon'></i> + <ul class="menu-link"> + <li><a href="#">Edit</a></li> + <li><a href="#">Save</a></li> + <li><a href="#">Remove</a></li> + </ul> + </div> + </div> + <div class="chart"> + <div id="chart"></div> + </div> + </div> + <div class="content-data"> + <div class="head"> + <h3>Chatbox</h3> + <div class="menu"> + <i class='bx bx-dots-horizontal-rounded icon'></i> + <ul class="menu-link"> + <li><a href="#">Edit</a></li> + <li><a href="#">Save</a></li> + <li><a href="#">Remove</a></li> + </ul> + </div> + </div> + <div class="chat-box"> + <p class="day"><span>Today</span></p> + <div class="msg"> + <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8cGVvcGxlfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt=""> + <div class="chat"> + <div class="profile"> + <span class="username">Alan</span> + <span class="time">18:30</span> + </div> + <p>Hello</p> + </div> + </div> + <div class="msg me"> + <div class="chat"> + <div class="profile"> + <span class="time">18:30</span> + </div> + <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque voluptatum eos quam dolores eligendi exercitationem animi nobis reprehenderit laborum! Nulla.</p> + </div> + </div> + <div class="msg me"> + <div class="chat"> + <div class="profile"> + <span class="time">18:30</span> + </div> + <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, architecto!</p> + </div> + </div> + <div class="msg me"> + <div class="chat"> + <div class="profile"> + <span class="time">18:30</span> + </div> + <p>Lorem ipsum, dolor sit amet.</p> + </div> + </div> + </div>` + <form action="#"> + <div class="form-group"> + <input type="text" placeholder="Type..."> + <button type="submit" class="btn-send"><i class='bx bxs-send' ></i></button> + </div> + </form> + </div> + <div class="content-data"> + <div class="head"> + <h3>Sales Report</h3> + <div class="menu"> + <i class='bx bx-dots-horizontal-rounded icon'></i> + <ul class="menu-link"> + <li><a href="#">Edit</a></li> + <li><a href="#">Save</a></li> + <li><a href="#">Remove</a></li> + </ul> + </div> + </div> + <div class="chart"> + <div id="basic"></div> + </div> + </div> + <div class="content-data"> + <div class="head"> + <h3>Sales Report</h3> + <div class="menu"> + <i class='bx bx-dots-horizontal-rounded icon'></i> + <ul class="menu-link"> + <li><a href="#">Edit</a></li> + <li><a href="#">Save</a></li> + <li><a href="#">Remove</a></li> + </ul> + </div> + </div> + <div class="chart"> + <div id="treemap"></div> + </div> + </div> + <div class="content-data"> + <div class="head"> + <h3>Sales Report</h3> + <div class="menu"> + <i class='bx bx-dots-horizontal-rounded icon'></i> + <ul class="menu-link"> + <li><a href="#">Edit</a></li> + <li><a href="#">Save</a></li> + <li><a href="#">Remove</a></li> + </ul> + </div> + </div> + <div class="chart"> + <div id="polar"></div> + </div> + </div> + </div> + </main> + <!-- MAIN --> + </section> + <!-- NAVBAR --> + + <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> + <script src="js/inicio.js"></script> + <script src="https://website-widgets.pages.dev/dist/sienna.min.js" defer></script> +</body> +</html> \ No newline at end of file diff --git a/js/inicio.js b/js/inicio.js new file mode 100644 index 0000000..d58114e --- /dev/null +++ b/js/inicio.js @@ -0,0 +1,354 @@ +// SIDEBAR DROPDOWN +const allDropdown = document.querySelectorAll('#sidebar .side-dropdown'); +const sidebar = document.getElementById('sidebar'); + +allDropdown.forEach(item=> { + const a = item.parentElement.querySelector('a:first-child'); + a.addEventListener('click', function (e) { + e.preventDefault(); + + if(!this.classList.contains('active')) { + allDropdown.forEach(i=> { + const aLink = i.parentElement.querySelector('a:first-child'); + + aLink.classList.remove('active'); + i.classList.remove('show'); + }) + } + + this.classList.toggle('active'); + item.classList.toggle('show'); + }) +}) + + + + + +// SIDEBAR COLLAPSE +const toggleSidebar = document.querySelector('nav .toggle-sidebar'); +const allSideDivider = document.querySelectorAll('#sidebar .divider'); + +if(sidebar.classList.contains('hide')) { + allSideDivider.forEach(item=> { + item.textContent = '-' + }) + allDropdown.forEach(item=> { + const a = item.parentElement.querySelector('a:first-child'); + a.classList.remove('active'); + item.classList.remove('show'); + }) +} else { + allSideDivider.forEach(item=> { + item.textContent = item.dataset.text; + }) +} + +toggleSidebar.addEventListener('click', function () { + sidebar.classList.toggle('hide'); + + if(sidebar.classList.contains('hide')) { + allSideDivider.forEach(item=> { + item.textContent = '-' + }) + + allDropdown.forEach(item=> { + const a = item.parentElement.querySelector('a:first-child'); + a.classList.remove('active'); + item.classList.remove('show'); + }) + } else { + allSideDivider.forEach(item=> { + item.textContent = item.dataset.text; + }) + } +}) + + + + +sidebar.addEventListener('mouseleave', function () { + if(this.classList.contains('hide')) { + allDropdown.forEach(item=> { + const a = item.parentElement.querySelector('a:first-child'); + a.classList.remove('active'); + item.classList.remove('show'); + }) + allSideDivider.forEach(item=> { + item.textContent = '-' + }) + } +}) + + + +sidebar.addEventListener('mouseenter', function () { + if(this.classList.contains('hide')) { + allDropdown.forEach(item=> { + const a = item.parentElement.querySelector('a:first-child'); + a.classList.remove('active'); + item.classList.remove('show'); + }) + allSideDivider.forEach(item=> { + item.textContent = item.dataset.text; + }) + } +}) + + + + +// PROFILE DROPDOWN +const profile = document.querySelector('nav .profile'); +const imgProfile = profile.querySelector('img'); +const dropdownProfile = profile.querySelector('.profile-link'); + +imgProfile.addEventListener('click', function () { + dropdownProfile.classList.toggle('show'); +}) + + + + +// MENU +const allMenu = document.querySelectorAll('main .content-data .head .menu'); + +allMenu.forEach(item=> { + const icon = item.querySelector('.icon'); + const menuLink = item.querySelector('.menu-link'); + + icon.addEventListener('click', function () { + menuLink.classList.toggle('show'); + }) +}) + + + +window.addEventListener('click', function (e) { + if(e.target !== imgProfile) { + if(e.target !== dropdownProfile) { + if(dropdownProfile.classList.contains('show')) { + dropdownProfile.classList.remove('show'); + } + } + } + + allMenu.forEach(item=> { + const icon = item.querySelector('.icon'); + const menuLink = item.querySelector('.menu-link'); + + if(e.target !== icon) { + if(e.target !== menuLink) { + if (menuLink.classList.contains('show')) { + menuLink.classList.remove('show') + } + } + } + }) +}) + + + + + +// PROGRESSBAR +const allProgress = document.querySelectorAll('main .card .progress'); + +allProgress.forEach(item=> { + item.style.setProperty('--value', item.dataset.value) +}) + + + + + + +// APEXCHART +var options = { + series: [{ + name: 'series1', + data: [31, 40, 28, 51, 42, 109, 100] +}, { + name: 'series2', + data: [11, 32, 45, 32, 34, 52, 41] +}], + chart: { + height: 350, + type: 'area' +}, +dataLabels: { + enabled: false +}, +stroke: { + curve: 'smooth' +}, +xaxis: { + type: 'datetime', + categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z", "2018-09-19T04:30:00.000Z", "2018-09-19T05:30:00.000Z", "2018-09-19T06:30:00.000Z"] +}, +tooltip: { + x: { + format: 'dd/MM/yy HH:mm' + }, +}, +}; + +var options2 = { + series: [{ + name: 'Net Profit', + data: [44, 55, 57, 56, 61, 58, 63, 60, 66] + }, { + name: 'Revenue', + data: [76, 85, 101, 98, 87, 105, 91, 114, 94] + }, { + name: 'Free Cash Flow', + data: [35, 41, 36, 26, 45, 48, 52, 53, 41] + }], + chart: { + type: 'bar', + height: 350 + }, + plotOptions: { + bar: { + horizontal: false, + columnWidth: '55%', + borderRadius: 5, + borderRadiusApplication: 'end' + }, + }, + dataLabels: { + enabled: false + }, + stroke: { + show: true, + width: 2, + colors: ['transparent'] + }, + xaxis: { + categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'], + }, + yaxis: { + title: { + text: '$ (thousands)' + } + }, + fill: { + opacity: 1 + }, + tooltip: { + y: { + formatter: function (val) { + return "$ " + val + " thousands" + } + } + } + }; + + + var options3 = { + series: [ + { + data: [ + { + x: 'New Delhi', + y: 218 + }, + { + x: 'Kolkata', + y: 149 + }, + { + x: 'Mumbai', + y: 184 + }, + { + x: 'Ahmedabad', + y: 55 + }, + { + x: 'Bangaluru', + y: 84 + }, + { + x: 'Pune', + y: 31 + }, + { + x: 'Chennai', + y: 70 + }, + { + x: 'Jaipur', + y: 30 + }, + { + x: 'Surat', + y: 44 + }, + { + x: 'Hyderabad', + y: 68 + }, + { + x: 'Lucknow', + y: 28 + }, + { + x: 'Indore', + y: 19 + }, + { + x: 'Kanpur', + y: 29 + } + ] + } + ], + legend: { + show: false + }, + chart: { + height: 350, + type: 'treemap' + }, + title: { + text: 'Basic Treemap' + } + }; + + var options4 = { + series: [14, 23, 21, 17, 15, 10, 12, 17, 21], + chart: { + type: 'polarArea', + }, + stroke: { + colors: ['#fff'] + }, + fill: { + opacity: 0.8 + }, + responsive: [{ + breakpoint: 480, + options: { + chart: { + width: 200 + }, + legend: { + position: 'bottom' + } + } + }] + }; + + var chart = new ApexCharts(document.querySelector("#polar"), options4); + chart.render(); + + + var chart = new ApexCharts(document.querySelector("#chart"), options); + chart.render(); + + var chart = new ApexCharts(document.querySelector("#basic"), options2); + chart.render(); + + var basic = new ApexCharts(document.querySelector("#treemap"), options3); + basic.render(); \ No newline at end of file diff --git a/js/login.js b/js/login.js new file mode 100644 index 0000000..04e7f1d --- /dev/null +++ b/js/login.js @@ -0,0 +1,33 @@ +const formulario = document.getElementById("login-formulario"); +const notificacion = document.getElementById("mensaje-error"); + +formulario.addEventListener("submit", async (event) => { + + event.preventDefault(); + + const numeroPersonal = document.getElementById("numero-personal").value; + const contrasena = document.getElementById("contrasena").value; + const data = new FormData(); + + data.append("numero-personal", numeroPersonal); + data.append("contrasena", contrasena); + + try { + const respuestaPeticion = await fetch('controladores/login.php', { + method: "POST", + body: data, + }); + + const verificarCredenciales = await respuestaPeticion.json(); + + if (verificarCredenciales.loginExitoso) { + window.location.href = 'inicio.html'; + } else { + notificacion.textContent = "Usuario y/o contraseña incorrectos"; + notificacion.style.display = "block"; + } + } catch (error) { + notificacion.textContent = + "Lo sentimos, el servicio no está disponible por el momento"; + } +});