Spaces:

fakesisalg
/

test23

Running

File size: 8,990 Bytes

a7be866

 rediseña esta pagina mas moderna posible pero deja las conexiones de la api postman <!DOCTYPE html> <html lang="es"> <head>   <meta charset="UTF-8">   <title>Inventario Electrónico | Gestor de Productos</title>   <style>     :root {       --primary-color: #4361ee;       --secondary-color: #3f37c9;       --accent-color: #4895ef;       --light-color: #f8f9fa;       --dark-color: #212529;       --success-color: #4cc9f0;       --error-color: #f72585;       --border-radius: 8px;       --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);       --transition: all 0.3s ease;     }      * {       margin: 0;       padding: 0;       box-sizing: border-box;     }      body {       font-family: 'Montserrat', sans-serif;       background-color: #f5f7fa;       color: var(--dark-color);       line-height: 1.6;       padding: 0;       margin: 0;       min-height: 100vh;       display: flex;       flex-direction: column;     }      .container {       max-width: 1200px;       margin: 0 auto;       padding: 2rem;       width: 100%;     }      header {       background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));       background-color: var(--primary-color);       color: white;       padding: 1.5rem 0;       box-shadow: var(--box-shadow);       position: relative;       z-index: 10;     }      .header-content {       display: flex;       justify-content: space-between;       align-items: center;     }      .logo {       font-size: 1.8rem;       font-weight: 700;       display: flex;       align-items: center;       gap: 0.5rem;     }      .logo-icon {       font-size: 2rem;     }      .auth-section {       display: flex;       flex-direction: column;       align-items: center;       justify-content: center;       min-height: calc(100vh - 200px);     }      .card {       background: white;       border-radius: var(--border-radius);       box-shadow: var(--box-shadow);       padding: 2.5rem;       width: 100%;       max-width: 500px;       margin: 2rem auto;       transition: var(--transition);     }      .card:hover {       box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);     }      h1, h2 {       color: var(--dark-color);       margin-bottom: 1.5rem;       text-align: center;     }      h1 {       font-size: 2.2rem;       font-weight: 600;       color: var(--primary-color);     }      h2 {       font-size: 1.8rem;       font-weight: 500;     }      form {       display: flex;       flex-direction: column;       gap: 1.5rem;     }      .form-group {       display: flex;       flex-direction: column;       gap: 0.5rem;     }      label {       font-weight: 500;       color: var(--dark-color);     }      input {       padding: 0.8rem 1rem;       border: 1px solid #ddd;       border-radius: var(--border-radius);       font-size: 1rem;       transition: var(--transition);     }      input:focus {       outline: none;       border-color: var(--accent-color);       box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.2);     }      button {       background-color: var(--primary-color);       color: white;       border: none;       padding: 1rem;       border-radius: var(--border-radius);       font-size: 1rem;       font-weight: 600;       cursor: pointer;       transition: var(--transition);       text-transform: uppercase;       letter-spacing: 0.5px;     }      button:hover {       background-color: var(--secondary-color);       transform: translateY(-2px);     }      button:active {       transform: translateY(0);     }      #formSection {       display: none;       animation: fadeIn 0.5s ease;     }      @keyframes fadeIn {       from { opacity: 0; transform: translateY(20px); }       to { opacity: 1; transform: translateY(0); }     }      .status-message {       padding: 1rem;       border-radius: var(--border-radius);       margin-top: 1rem;       text-align: center;       display: none;     }      .success {       background-color: rgba(76, 201, 240, 0.2);       color: #0a6c74;       display: block;     }      .error {       background-color: rgba(247, 37, 133, 0.2);       color: #a4133c;       display: block;     }      footer {       background-color: var(--dark-color);       color: white;       text-align: center;       padding: 1.5rem;       margin-top: auto;     }      .footer-content {       display: flex;       justify-content: space-between;       align-items: center;       max-width: 1200px;       margin: 0 auto;     }      .copyright {       font-size: 0.9rem;     }      .social-links {       display: flex;       gap: 1rem;     }      .social-icon {       color: white;       font-size: 1.2rem;       transition: var(--transition);     }      .social-icon:hover {       color: var(--accent-color);     }      @media (max-width: 768px) {       .container {         padding: 1rem;       }              .card {         padding: 1.5rem;       }              h1 {         font-size: 1.8rem;       }              h2 {         font-size: 1.5rem;       }              .header-content {         flex-direction: column;         gap: 1rem;       }              .footer-content {         flex-direction: column;         gap: 1rem;       }     }   </style> </head> <body>   <header>     <div class="container header-content">       <div class="logo">         <span class="logo-icon">📦</span>         <span>Inventario Electrónico</span>       </div>       <div>         <label for="languageSelect">Idioma:</label>         <select id="languageSelect">           <option value="es">Español</option>           <option value="en">English</option>         </select>       </div>     </div>   </header>    <main class="container">     <section class="auth-section">       <div class="card">         <h1>Iniciar Sesión</h1>         <form id="loginForm">           <div class="form-group">             <label for="username">Usuario</label>             <input type="text" id="username" required>           </div>           <div class="form-group">             <label for="password">Contraseña</label>             <input type="password" id="password" required>           </div>           <button type="submit">Acceder al Sistema</button>         </form>       </div>        <div id="formSection" class="card" style="display: none;">         <h2>Registrar Nuevo Producto</h2>         <form id="productoForm">           <input type="text" id="nombre" placeholder="Nombre del producto" required>           <input type="text" id="descripcion" placeholder="Descripción" required>           <input type="number" id="precio" placeholder="Precio unitario" required>           <input type="number" id="stock" placeholder="Cantidad en stock" required>           <button type="submit">Guardar Producto</button>         </form>         <div id="statusMessage" class="status-message"></div>       </div>     </section>   </main>    <footer>     <div class="container">       <p>© 2025 Gestor de Inventario Electrónico</p>     </div>   </footer>    <script>     let authHeader = "";      function encodeBasicAuth(username, password) {       return btoa(username + ":" + password);     }      // Login     document.getElementById('loginForm').addEventListener('submit', function(e) {       e.preventDefault();       const user = document.getElementById('username').value;       const pass = document.getElementById('password').value;        authHeader = "Basic " + encodeBasicAuth(user, pass);       document.getElementById('formSection').style.display = 'block';       document.getElementById('loginForm').parentElement.style.display = 'none';     });      // Envío de producto con i18n     document.getElementById('productoForm').addEventListener('submit', async function(e) {       e.preventDefault();        const lang = document.getElementById('languageSelect').value;        const producto = {         nombre: document.getElementById('nombre').value,         descripcion: document.getElementById('descripcion').value,         precio: parseFloat(document.getElementById('precio').value),         stock: parseInt(document.getElementById('stock').value)       };        try {         const res = await fetch('http://localhost:8080/api/productos', {           method: 'POST',           headers: {             'Content-Type': 'application/json',             'Authorization': authHeader,             'Accept-Language': lang           },           body: JSON.stringify(producto)         });          const data = await res.json();         showStatus(data.message || 'Operación completada.', res.ok ? 'success' : 'error');         if (res.ok) document.getElementById('productoForm').reset();       } catch (err) {         showStatus('Error de conexión con el servidor', 'error');       }     });      function showStatus(message, type) {       const status = document.getElementById('statusMessage');       status.textContent = message;       status.className = 'status-message ' + type;       status.style.display = 'block';        setTimeout(() => {         status.style.display = 'none';       }, 5000);     }   </script> </body> </html>