Lizandro GuarnizoandClaude Sonnet 4.6
492dc5436c
- Agrega menú móvil funcional con panel deslizable y animación hamburger - Corrige hero stat "150 N / Day St" confuso por "$3.50/lb (flete)" - Arregla bug CSS `flex-wrap: gap` inválido en footer-bottom - Corrige links "Carga Pesada" en nav y footer para apuntar a #cotizacion - Agrega acción al botón de pre-alerta con validación - Limpia address del footer (eliminado placeholder "Suite EC-" vacío) - Agrega favicon, OG tags y theme-color a las 4 páginas - Consolida event listeners para evitar conflictos móvil/WhatsApp Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
685 lines
45 KiB
HTML
685 lines
45 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="es">
|
||
<head>
|
||
<meta charset="UTF-8"/>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<title>Mi Casillero — Moraworld Imports</title>
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📦</text></svg>" />
|
||
<meta name="theme-color" content="#0057FF" />
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet"/>
|
||
<style>
|
||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||
:root{
|
||
--primary:#0057FF;--primary-d:#003FC7;--primary-l:#EEF3FF;
|
||
--accent:#FF6B00;--dark:#0D1117;--green:#10B981;--red:#EF4444;
|
||
--yellow:#F59E0B;--purple:#8B5CF6;
|
||
--gray-900:#111827;--gray-800:#1F2937;--gray-700:#374151;
|
||
--gray-600:#4B5563;--gray-500:#6B7280;--gray-400:#9CA3AF;
|
||
--gray-300:#D1D5DB;--gray-200:#E5E7EB;--gray-100:#F3F4F6;
|
||
--white:#fff;--sidebar-w:260px;
|
||
--font-mono:'JetBrains Mono',monospace;
|
||
}
|
||
body{font-family:'Inter',sans-serif;background:var(--gray-100);color:var(--gray-900);display:flex;min-height:100vh}
|
||
a{text-decoration:none;color:inherit}
|
||
|
||
/* SIDEBAR */
|
||
aside{
|
||
width:var(--sidebar-w);min-width:var(--sidebar-w);
|
||
background:var(--dark);position:fixed;top:0;left:0;bottom:0;
|
||
overflow-y:auto;z-index:100;display:flex;flex-direction:column;
|
||
border-right:1px solid rgba(255,255,255,.06);
|
||
}
|
||
.sb-logo{padding:24px 20px 20px;border-bottom:1px solid rgba(255,255,255,.07)}
|
||
.sb-logo .name{font-size:1rem;font-weight:800;color:#fff}
|
||
.sb-logo .name span{color:var(--accent)}
|
||
.sb-logo .tag{font-size:.68rem;color:rgba(255,255,255,.3);margin-top:4px;font-family:var(--font-mono)}
|
||
.sb-user{padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;gap:12px;align-items:center}
|
||
.sb-avatar{width:36px;height:36px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;color:#fff;flex-shrink:0}
|
||
.sb-user-info .uname{font-size:.85rem;font-weight:600;color:#fff}
|
||
.sb-user-info .urole{font-size:.7rem;color:rgba(255,255,255,.35)}
|
||
.sb-section{padding:20px 16px 8px;font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.25)}
|
||
.sb-link{display:flex;align-items:center;gap:10px;padding:9px 20px;font-size:.82rem;color:rgba(255,255,255,.55);cursor:pointer;border-left:3px solid transparent;transition:all .15s}
|
||
.sb-link:hover{color:#fff;background:rgba(255,255,255,.04);border-left-color:rgba(255,255,255,.15)}
|
||
.sb-link.active{color:#fff;background:rgba(0,87,255,.12);border-left-color:var(--primary)}
|
||
.sb-link .ico{font-size:.9rem;flex-shrink:0;width:16px;text-align:center}
|
||
.sb-link .badge{margin-left:auto;background:var(--accent);color:#fff;font-size:.62rem;font-weight:700;padding:1px 7px;border-radius:999px}
|
||
.sb-suite{
|
||
margin:12px 16px;background:rgba(0,87,255,.12);border:1px solid rgba(0,87,255,.25);
|
||
border-radius:10px;padding:14px 16px;
|
||
}
|
||
.sb-suite .st-label{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.35);margin-bottom:8px}
|
||
.sb-suite .st-addr{font-family:var(--font-mono);font-size:.75rem;color:#A5B4FC;line-height:1.7}
|
||
.sb-suite .st-suite{color:var(--accent);font-weight:700;font-size:.82rem}
|
||
.sb-suite .copy-btn{display:flex;align-items:center;gap:6px;margin-top:10px;background:rgba(0,87,255,.2);color:#7AADFF;border:none;border-radius:6px;padding:6px 10px;font-size:.72rem;font-weight:600;cursor:pointer;width:100%;justify-content:center;font-family:inherit;transition:background .2s}
|
||
.sb-suite .copy-btn:hover{background:rgba(0,87,255,.35)}
|
||
.sb-footer{margin-top:auto;padding:16px 20px;border-top:1px solid rgba(255,255,255,.07)}
|
||
.sb-footer a{font-size:.78rem;color:rgba(255,255,255,.3);display:flex;align-items:center;gap:8px;padding:6px 0}
|
||
.sb-footer a:hover{color:#fff}
|
||
|
||
/* MAIN */
|
||
main{margin-left:var(--sidebar-w);flex:1;min-width:0}
|
||
|
||
/* TOPBAR */
|
||
.topbar{
|
||
position:sticky;top:0;z-index:90;background:rgba(255,255,255,.92);
|
||
backdrop-filter:blur(12px);border-bottom:1px solid var(--gray-200);
|
||
display:flex;align-items:center;justify-content:space-between;
|
||
padding:0 32px;height:56px;gap:16px;
|
||
}
|
||
.topbar-title{font-size:.95rem;font-weight:700;color:var(--gray-900)}
|
||
.topbar-right{display:flex;align-items:center;gap:12px}
|
||
.notif-btn{position:relative;width:36px;height:36px;border-radius:8px;border:1px solid var(--gray-200);background:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem}
|
||
.notif-dot{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--accent);border:2px solid #fff}
|
||
.tb-avatar{width:34px;height:34px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;color:#fff;cursor:pointer}
|
||
|
||
/* CONTENT */
|
||
.content{padding:32px;max-width:1100px}
|
||
|
||
/* STAT CARDS */
|
||
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px}
|
||
.stat-card{background:var(--white);border:1px solid var(--gray-200);border-radius:12px;padding:20px 22px}
|
||
.stat-card .sc-label{font-size:.78rem;color:var(--gray-500);font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:6px}
|
||
.stat-card .sc-val{font-size:1.7rem;font-weight:800;color:var(--gray-900);margin-bottom:2px}
|
||
.stat-card .sc-sub{font-size:.75rem;color:var(--gray-400)}
|
||
.stat-card .sc-icon{font-size:1.4rem}
|
||
|
||
/* SECTION TITLE */
|
||
.section-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
|
||
.section-hd h2{font-size:1rem;font-weight:700;color:var(--gray-900)}
|
||
.btn-sm{padding:8px 16px;border-radius:7px;font-size:.8rem;font-weight:600;border:none;cursor:pointer;font-family:inherit;transition:all .2s}
|
||
.btn-primary{background:var(--primary);color:#fff}
|
||
.btn-primary:hover{background:var(--primary-d)}
|
||
.btn-outline{background:transparent;border:1.5px solid var(--gray-200);color:var(--gray-700)}
|
||
.btn-outline:hover{border-color:var(--primary);color:var(--primary)}
|
||
.btn-green{background:var(--green);color:#fff}
|
||
|
||
/* PACKAGES TABLE */
|
||
.pkg-table{width:100%;border-collapse:collapse;font-size:.83rem}
|
||
.pkg-table th{text-align:left;padding:10px 14px;background:var(--gray-900);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
|
||
.pkg-table th:first-child{border-radius:8px 0 0 0}
|
||
.pkg-table th:last-child{border-radius:0 8px 0 0}
|
||
.pkg-table td{padding:12px 14px;border-bottom:1px solid var(--gray-200);color:var(--gray-700);vertical-align:middle}
|
||
.pkg-table tr:last-child td{border-bottom:none}
|
||
.pkg-table tr:hover td{background:var(--gray-100)}
|
||
.pkg-table .tid{font-family:var(--font-mono);font-size:.78rem;color:var(--primary);font-weight:600}
|
||
.pkg-table .desc{font-weight:600;color:var(--gray-900)}
|
||
.pkg-table .store{font-size:.75rem;color:var(--gray-500);margin-top:2px}
|
||
|
||
/* STATUS BADGES */
|
||
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:.72rem;font-weight:700}
|
||
.b-gray{background:#F3F4F6;color:#6B7280}
|
||
.b-yellow{background:#FEF3C7;color:#92400E}
|
||
.b-blue{background:#DBEAFE;color:#1D4ED8}
|
||
.b-purple{background:#EDE9FE;color:#6D28D9}
|
||
.b-green{background:#D1FAE5;color:#065F46}
|
||
.b-orange{background:#FFEDD5;color:#C2410C}
|
||
.b-red{background:#FEE2E2;color:#991B1B}
|
||
.b-teal{background:#CCFBF1;color:#0F766E}
|
||
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
|
||
|
||
/* ACTION BTNS */
|
||
.action-wrap{display:flex;gap:6px}
|
||
.act-btn{padding:5px 10px;border-radius:6px;border:1px solid var(--gray-200);background:var(--white);font-size:.75rem;font-weight:600;cursor:pointer;color:var(--gray-700);font-family:inherit;transition:all .2s}
|
||
.act-btn:hover{background:var(--primary);border-color:var(--primary);color:#fff}
|
||
|
||
/* MODAL */
|
||
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;display:none;align-items:center;justify-content:center;padding:20px}
|
||
.modal-overlay.show{display:flex}
|
||
.modal{background:var(--white);border-radius:14px;padding:32px;width:100%;max-width:540px;max-height:90vh;overflow-y:auto;position:relative}
|
||
.modal h3{font-size:1.15rem;font-weight:700;margin-bottom:20px}
|
||
.modal-close{position:absolute;top:16px;right:16px;background:none;border:none;font-size:1.2rem;cursor:pointer;color:var(--gray-500);padding:4px}
|
||
.modal-close:hover{color:var(--gray-900)}
|
||
.form-group{margin-bottom:16px}
|
||
.form-group label{display:block;font-size:.83rem;font-weight:600;color:var(--gray-700);margin-bottom:5px}
|
||
.form-group input,.form-group select,.form-group textarea{width:100%;padding:11px 14px;border:2px solid var(--gray-200);border-radius:8px;font-size:.9rem;font-family:inherit;outline:none;transition:border-color .2s}
|
||
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--primary)}
|
||
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
|
||
.upload-box{border:2px dashed var(--gray-200);border-radius:8px;padding:20px;text-align:center;cursor:pointer;transition:border-color .2s}
|
||
.upload-box:hover{border-color:var(--primary)}
|
||
.upload-box p{font-size:.82rem;color:var(--gray-500);margin-top:6px}
|
||
.tab-pills{display:flex;gap:4px;background:var(--gray-100);padding:4px;border-radius:8px;margin-bottom:20px}
|
||
.tab-pill{flex:1;padding:8px 12px;border:none;border-radius:6px;font-size:.82rem;font-weight:600;cursor:pointer;font-family:inherit;color:var(--gray-600);background:transparent;transition:all .2s}
|
||
.tab-pill.active{background:var(--white);color:var(--primary);box-shadow:0 1px 4px rgba(0,0,0,.08)}
|
||
.tab-content{display:none}
|
||
.tab-content.active{display:block}
|
||
|
||
/* TRACKING PANEL */
|
||
.tracking-wrap{background:var(--white);border:1px solid var(--gray-200);border-radius:12px;padding:24px}
|
||
.tl{display:flex;flex-direction:column;gap:0}
|
||
.tl-item{display:flex;gap:14px}
|
||
.tl-line{display:flex;flex-direction:column;align-items:center}
|
||
.tl-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--gray-200);background:var(--gray-200);flex-shrink:0}
|
||
.tl-dot.done{background:var(--green);border-color:var(--green)}
|
||
.tl-dot.active{background:var(--primary);border-color:var(--primary);box-shadow:0 0 0 4px rgba(0,87,255,.15)}
|
||
.tl-connector{width:2px;flex:1;background:var(--gray-200);min-height:20px}
|
||
.tl-connector.done{background:var(--green)}
|
||
.tl-body{padding:0 0 18px 0}
|
||
.tl-body strong{font-size:.87rem;display:block;margin-bottom:2px}
|
||
.tl-body span{font-size:.78rem;color:var(--gray-500)}
|
||
|
||
/* EMPTY STATE */
|
||
.empty-state{text-align:center;padding:60px 20px;color:var(--gray-500)}
|
||
.empty-state .es-icon{font-size:3rem;margin-bottom:12px}
|
||
.empty-state p{font-size:.9rem}
|
||
|
||
/* ALERT TOAST */
|
||
.toast{position:fixed;bottom:24px;right:24px;z-index:500;background:var(--green);color:#fff;padding:12px 20px;border-radius:10px;font-size:.85rem;font-weight:600;display:flex;gap:10px;align-items:center;transform:translateY(80px);opacity:0;transition:all .3s;pointer-events:none}
|
||
.toast.show{transform:translateY(0);opacity:1}
|
||
|
||
/* PANEL PAGES */
|
||
.panel-page{display:none}
|
||
.panel-page.active{display:block}
|
||
|
||
/* RESPONSIVE */
|
||
@media(max-width:900px){
|
||
aside{display:none}
|
||
main{margin-left:0}
|
||
.stats-row{grid-template-columns:1fr 1fr}
|
||
.content{padding:20px}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ═══ SIDEBAR ═══ -->
|
||
<aside>
|
||
<div class="sb-logo">
|
||
<div class="name">Moraworld<span>.</span>Imports</div>
|
||
<div class="tag">Portal del Cliente</div>
|
||
</div>
|
||
<div class="sb-user">
|
||
<div class="sb-avatar">JP</div>
|
||
<div class="sb-user-info">
|
||
<div class="uname">Juan Pérez</div>
|
||
<div class="urole">Cliente · Suite EC-04512</div>
|
||
</div>
|
||
</div>
|
||
<div class="sb-suite">
|
||
<div class="st-label">Tu dirección en EE.UU.</div>
|
||
<div class="st-addr">
|
||
<div>150 N Day St,</div>
|
||
<div class="st-suite">Suite EC-04512,</div>
|
||
<div>City of Orange, NJ 07050</div>
|
||
<div>United States 🇺🇸</div>
|
||
</div>
|
||
<button class="copy-btn" onclick="copySuite()">📋 Copiar dirección</button>
|
||
</div>
|
||
|
||
<div class="sb-section">Principal</div>
|
||
<div class="sb-link active" onclick="showPage('dashboard',this)"><span class="ico">🏠</span>Dashboard</div>
|
||
<div class="sb-link" onclick="showPage('paquetes',this)"><span class="ico">📦</span>Mis paquetes<span class="badge">3</span></div>
|
||
<div class="sb-link" onclick="showPage('prealerta',this)"><span class="ico">📬</span>Pre-alertas</div>
|
||
<div class="sb-link" onclick="showPage('tracking',this)"><span class="ico">🔍</span>Tracking</div>
|
||
|
||
<div class="sb-section">Registro</div>
|
||
<div class="sb-link" onclick="openModal('modal-compra')"><span class="ico">➕</span>Registrar compra</div>
|
||
<div class="sb-link" onclick="openModal('modal-prealerta')"><span class="ico">📝</span>Nueva pre-alerta</div>
|
||
|
||
<div class="sb-section">Mi cuenta</div>
|
||
<div class="sb-link" onclick="showPage('historial',this)"><span class="ico">📋</span>Historial</div>
|
||
<div class="sb-link" onclick="showPage('calculadora',this)"><span class="ico">💰</span>Calculadora</div>
|
||
<div class="sb-link" onclick="showPage('perfil',this)"><span class="ico">👤</span>Mi perfil</div>
|
||
|
||
<div class="sb-footer">
|
||
<a href="index.html">← Ir al sitio web</a>
|
||
<a href="login.html">🚪 Cerrar sesión</a>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- ═══ MAIN ═══ -->
|
||
<main>
|
||
<div class="topbar">
|
||
<div class="topbar-title" id="topbar-title">Dashboard</div>
|
||
<div class="topbar-right">
|
||
<button class="notif-btn" onclick="showToast('No hay notificaciones nuevas')">🔔<div class="notif-dot"></div></button>
|
||
<div class="tb-avatar">JP</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content">
|
||
|
||
<!-- ══ DASHBOARD ══ -->
|
||
<div class="panel-page active" id="page-dashboard">
|
||
<div class="stats-row">
|
||
<div class="stat-card">
|
||
<div class="sc-label"><span class="sc-icon">📦</span>En tránsito a bodega</div>
|
||
<div class="sc-val">2</div>
|
||
<div class="sc-sub">paquetes en camino a NJ</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="sc-label"><span class="sc-icon">🔵</span>En bodega NJ</div>
|
||
<div class="sc-val">1</div>
|
||
<div class="sc-sub">recibido, en verificación</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="sc-label"><span class="sc-icon">✈️</span>En tránsito a Ecuador</div>
|
||
<div class="sc-val">0</div>
|
||
<div class="sc-sub">en camino a Ecuador</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="sc-label"><span class="sc-icon">✅</span>Entregados</div>
|
||
<div class="sc-val">7</div>
|
||
<div class="sc-sub">paquetes entregados</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px">
|
||
<!-- Recent packages -->
|
||
<div style="background:var(--white);border:1px solid var(--gray-200);border-radius:12px;padding:20px">
|
||
<div class="section-hd">
|
||
<h2>Paquetes recientes</h2>
|
||
<button class="btn-sm btn-outline" onclick="showPage('paquetes', null)">Ver todos</button>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;gap:10px">
|
||
<div style="display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--gray-100)">
|
||
<div style="font-size:1.4rem">📱</div>
|
||
<div style="flex:1">
|
||
<div style="font-size:.85rem;font-weight:600">Auriculares Sony WH-1000XM5</div>
|
||
<div style="font-size:.75rem;color:var(--gray-500)">EC-20260510-014523</div>
|
||
</div>
|
||
<span class="badge b-yellow"><span class="dot"></span>En tránsito</span>
|
||
</div>
|
||
<div style="display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--gray-100)">
|
||
<div style="font-size:1.4rem">👟</div>
|
||
<div style="flex:1">
|
||
<div style="font-size:.85rem;font-weight:600">Zapatillas Nike Air Max</div>
|
||
<div style="font-size:.75rem;color:var(--gray-500)">EC-20260508-009821</div>
|
||
</div>
|
||
<span class="badge b-blue"><span class="dot"></span>En bodega</span>
|
||
</div>
|
||
<div style="display:flex;gap:12px;align-items:center;padding:10px 0">
|
||
<div style="font-size:1.4rem">💻</div>
|
||
<div style="flex:1">
|
||
<div style="font-size:.85rem;font-weight:600">Laptop Dell XPS 13</div>
|
||
<div style="font-size:.75rem;color:var(--gray-500)">EC-20260501-078234</div>
|
||
</div>
|
||
<span class="badge b-green"><span class="dot"></span>Entregado</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Quick actions -->
|
||
<div style="background:var(--white);border:1px solid var(--gray-200);border-radius:12px;padding:20px">
|
||
<div class="section-hd"><h2>Acciones rápidas</h2></div>
|
||
<div style="display:flex;flex-direction:column;gap:10px">
|
||
<button onclick="openModal('modal-compra')" style="display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--primary-l);border:1px solid #C7D7FF;border-radius:10px;cursor:pointer;text-align:left;font-family:inherit;transition:all .2s" onmouseover="this.style.background='#DEEAFF'" onmouseout="this.style.background='var(--primary-l)'">
|
||
<span style="font-size:1.3rem">➕</span>
|
||
<div><div style="font-size:.88rem;font-weight:700;color:var(--primary)">Registrar nueva compra</div><div style="font-size:.75rem;color:var(--gray-500)">Por enlace URL o ingreso manual</div></div>
|
||
</button>
|
||
<button onclick="openModal('modal-prealerta')" style="display:flex;align-items:center;gap:12px;padding:14px 16px;background:#F0FDF4;border:1px solid #A7F3D0;border-radius:10px;cursor:pointer;text-align:left;font-family:inherit;transition:all .2s" onmouseover="this.style.background='#DCFCE7'" onmouseout="this.style.background='#F0FDF4'">
|
||
<span style="font-size:1.3rem">📬</span>
|
||
<div><div style="font-size:.88rem;font-weight:700;color:var(--green)">Crear pre-alerta</div><div style="font-size:.75rem;color:var(--gray-500)">Avísanos antes de que llegue tu paquete</div></div>
|
||
</button>
|
||
<button onclick="showPage('tracking',null)" style="display:flex;align-items:center;gap:12px;padding:14px 16px;background:#FFF3E8;border:1px solid #FED7AA;border-radius:10px;cursor:pointer;text-align:left;font-family:inherit;transition:all .2s" onmouseover="this.style.background='#FFE4C7'" onmouseout="this.style.background='#FFF3E8'">
|
||
<span style="font-size:1.3rem">🔍</span>
|
||
<div><div style="font-size:.88rem;font-weight:700;color:var(--accent)">Rastrear paquete</div><div style="font-size:.75rem;color:var(--gray-500)">Ingresa tu Tracking ID</div></div>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Notifications -->
|
||
<div style="background:var(--white);border:1px solid var(--gray-200);border-radius:12px;padding:20px">
|
||
<div class="section-hd"><h2>Notificaciones recientes</h2></div>
|
||
<div style="display:flex;flex-direction:column;gap:0">
|
||
<div style="display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--gray-100);align-items:flex-start">
|
||
<div style="width:36px;height:36px;border-radius:10px;background:#D1FAE5;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0">✅</div>
|
||
<div><div style="font-size:.85rem;font-weight:600">Paquete verificado en bodega</div><div style="font-size:.78rem;color:var(--gray-500)">EC-20260508-009821 · Nike Air Max · Peso confirmado: 2.3 lbs</div><div style="font-size:.72rem;color:var(--gray-400);margin-top:2px">Hace 2 horas</div></div>
|
||
</div>
|
||
<div style="display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--gray-100);align-items:flex-start">
|
||
<div style="width:36px;height:36px;border-radius:10px;background:#DBEAFE;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0">📦</div>
|
||
<div><div style="font-size:.85rem;font-weight:600">Paquete recibido en bodega NJ</div><div style="font-size:.78rem;color:var(--gray-500)">EC-20260508-009821 · Recibido en 150 N Day St, Orange NJ</div><div style="font-size:.72rem;color:var(--gray-400);margin-top:2px">Ayer a las 11:30 AM</div></div>
|
||
</div>
|
||
<div style="display:flex;gap:12px;padding:12px 0;align-items:flex-start">
|
||
<div style="width:36px;height:36px;border-radius:10px;background:#FEF3C7;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0">🚚</div>
|
||
<div><div style="font-size:.85rem;font-weight:600">Paquete en tránsito hacia la bodega</div><div style="font-size:.78rem;color:var(--gray-500)">EC-20260510-014523 · Auriculares Sony · UPS tracking: 1Z999AA10123456784</div><div style="font-size:.72rem;color:var(--gray-400);margin-top:2px">Hace 3 días</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ MIS PAQUETES ══ -->
|
||
<div class="panel-page" id="page-paquetes">
|
||
<div class="section-hd" style="margin-bottom:20px">
|
||
<h2>Mis paquetes</h2>
|
||
<button class="btn-sm btn-primary" onclick="openModal('modal-compra')">+ Registrar compra</button>
|
||
</div>
|
||
<div style="background:var(--white);border:1px solid var(--gray-200);border-radius:12px;overflow:hidden">
|
||
<table class="pkg-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Tracking ID</th>
|
||
<th>Producto</th>
|
||
<th>Tienda</th>
|
||
<th>Peso</th>
|
||
<th>Valor</th>
|
||
<th>Estado</th>
|
||
<th>Acciones</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><div class="tid">EC-20260510-014523</div></td>
|
||
<td><div class="desc">Auriculares Sony WH-1000XM5</div></td>
|
||
<td><div class="store">Amazon</div></td>
|
||
<td>0.6 lbs</td>
|
||
<td>$349.99</td>
|
||
<td><span class="badge b-yellow"><span class="dot"></span>En tránsito a bodega</span></td>
|
||
<td><div class="action-wrap"><button class="act-btn" onclick="showPkgDetail('EC-20260510-014523')">Ver</button><button class="act-btn">Fotos</button></div></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div class="tid">EC-20260508-009821</div></td>
|
||
<td><div class="desc">Zapatillas Nike Air Max 270</div></td>
|
||
<td><div class="store">Nike.com</div></td>
|
||
<td>2.3 lbs</td>
|
||
<td>$129.00</td>
|
||
<td><span class="badge b-purple"><span class="dot"></span>En verificación</span></td>
|
||
<td><div class="action-wrap"><button class="act-btn" onclick="showPkgDetail('EC-20260508-009821')">Ver</button><button class="act-btn">📸 Fotos</button></div></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div class="tid">EC-20260503-061004</div></td>
|
||
<td><div class="desc">Cámara GoPro HERO12</div></td>
|
||
<td><div class="store">Best Buy</div></td>
|
||
<td>1.8 lbs</td>
|
||
<td>$399.99</td>
|
||
<td><span class="badge b-orange"><span class="dot"></span>En tránsito a Ecuador</span></td>
|
||
<td><div class="action-wrap"><button class="act-btn" onclick="showPkgDetail('EC-20260503-061004')">Ver</button></div></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div class="tid">EC-20260501-078234</div></td>
|
||
<td><div class="desc">Laptop Dell XPS 13</div></td>
|
||
<td><div class="store">Dell.com</div></td>
|
||
<td>4.4 lbs</td>
|
||
<td>$1,299.00</td>
|
||
<td><span class="badge b-green"><span class="dot"></span>Entregado</span></td>
|
||
<td><div class="action-wrap"><button class="act-btn">Ver</button></div></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ PRE-ALERTAS ══ -->
|
||
<div class="panel-page" id="page-prealerta">
|
||
<div class="section-hd" style="margin-bottom:20px">
|
||
<h2>Pre-alertas de paquetes</h2>
|
||
<button class="btn-sm btn-primary" onclick="openModal('modal-prealerta')">+ Nueva pre-alerta</button>
|
||
</div>
|
||
<div style="background:#EFF6FF;border:1px solid #BFDBFE;border-radius:10px;padding:14px 18px;margin-bottom:20px;font-size:.85rem;color:#1D4ED8;display:flex;gap:10px">
|
||
<span>💡</span>
|
||
<span>Envíanos una pre-alerta antes de que llegue tu paquete a la bodega. El operador lo buscará y asignará a tu Suite más rápido.</span>
|
||
</div>
|
||
<div style="background:var(--white);border:1px solid var(--gray-200);border-radius:12px;overflow:hidden">
|
||
<table class="pkg-table">
|
||
<thead>
|
||
<tr><th>Fecha</th><th>Tienda</th><th>Tracking vendedor</th><th>Descripción</th><th>Valor declarado</th><th>Estado</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>10 may 2026</td>
|
||
<td>Amazon</td>
|
||
<td><span style="font-family:var(--font-mono);font-size:.78rem">1Z999AA10123456784</span></td>
|
||
<td>Auriculares Sony WH-1000XM5</td>
|
||
<td>$349.99</td>
|
||
<td><span class="badge b-yellow"><span class="dot"></span>En espera</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ TRACKING ══ -->
|
||
<div class="panel-page" id="page-tracking">
|
||
<h2 style="font-size:1rem;font-weight:700;margin-bottom:20px">Rastrear paquete</h2>
|
||
<div style="background:var(--white);border:1px solid var(--gray-200);border-radius:12px;padding:24px">
|
||
<div style="display:flex;gap:0;max-width:500px;margin-bottom:28px">
|
||
<input type="text" id="track-input" placeholder="Ej: EC-20260510-014523" style="flex:1;padding:13px 16px;border:2px solid var(--gray-200);border-right:none;border-radius:8px 0 0 8px;font-size:.93rem;font-family:inherit;outline:none;transition:border-color .2s" onfocus="this.style.borderColor='var(--primary)'" onblur="this.style.borderColor='var(--gray-200)'"/>
|
||
<button onclick="doTracking()" style="padding:13px 24px;background:var(--primary);color:#fff;border:none;border-radius:0 8px 8px 0;font-weight:700;font-size:.9rem;cursor:pointer;font-family:inherit;transition:background .2s" onmouseover="this.style.background='var(--primary-d)'" onmouseout="this.style.background='var(--primary)'">Rastrear</button>
|
||
</div>
|
||
<div id="tracking-result" style="display:none">
|
||
<div style="font-size:.9rem;font-weight:700;color:var(--gray-900);margin-bottom:20px">📦 <span id="t-id">EC-20260508-009821</span> — <span style="color:var(--primary)">En verificación en bodega NJ</span></div>
|
||
<div class="tl">
|
||
<div class="tl-item"><div class="tl-line"><div class="tl-dot done"></div><div class="tl-connector done"></div></div><div class="tl-body"><strong>✅ Registrado</strong><span>08 may 2026, 09:14 AM ECT</span></div></div>
|
||
<div class="tl-item"><div class="tl-line"><div class="tl-dot done"></div><div class="tl-connector done"></div></div><div class="tl-body"><strong>✅ En tránsito a bodega NJ</strong><span>09 may 2026, 10:00 AM EST</span></div></div>
|
||
<div class="tl-item"><div class="tl-line"><div class="tl-dot done"></div><div class="tl-connector done"></div></div><div class="tl-body"><strong>✅ Recibido en bodega NJ</strong><span>10 may 2026, 11:30 AM EST</span></div></div>
|
||
<div class="tl-item"><div class="tl-line"><div class="tl-dot active"></div><div class="tl-connector"></div></div><div class="tl-body"><strong style="color:var(--primary)">🔵 En verificación</strong><span>Operador verificando peso y dimensiones</span></div></div>
|
||
<div class="tl-item"><div class="tl-line"><div class="tl-dot"></div><div class="tl-connector"></div></div><div class="tl-body"><strong style="color:var(--gray-400)">⏳ Declaración SENAE</strong><span>Pendiente</span></div></div>
|
||
<div class="tl-item"><div class="tl-line"><div class="tl-dot"></div><div class="tl-connector"></div></div><div class="tl-body"><strong style="color:var(--gray-400)">⏳ En tránsito a Ecuador</strong><span>Pendiente</span></div></div>
|
||
<div class="tl-item"><div class="tl-line"><div class="tl-dot"></div></div><div class="tl-body"><strong style="color:var(--gray-400)">⏳ Entregado</strong><span>Pendiente</span></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ HISTORIAL ══ -->
|
||
<div class="panel-page" id="page-historial">
|
||
<h2 style="font-size:1rem;font-weight:700;margin-bottom:20px">Historial de envíos</h2>
|
||
<div style="background:var(--white);border:1px solid var(--gray-200);border-radius:12px;overflow:hidden">
|
||
<table class="pkg-table">
|
||
<thead><tr><th>Tracking ID</th><th>Producto</th><th>Fecha entrega</th><th>Peso</th><th>Total pagado</th><th>Estado</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><div class="tid">EC-20260501-078234</div></td><td>Laptop Dell XPS 13</td><td>15 may 2026</td><td>4.4 lbs</td><td>$78.50</td><td><span class="badge b-green"><span class="dot"></span>Entregado</span></td></tr>
|
||
<tr><td><div class="tid">EC-20260420-045001</div></td><td>Auriculares Bose 700</td><td>05 may 2026</td><td>0.8 lbs</td><td>$23.40</td><td><span class="badge b-green"><span class="dot"></span>Entregado</span></td></tr>
|
||
<tr><td><div class="tid">EC-20260410-033210</div></td><td>Cargador iPhone 15 Pro</td><td>25 abr 2026</td><td>0.2 lbs</td><td>$8.90</td><td><span class="badge b-green"><span class="dot"></span>Entregado</span></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ CALCULADORA ══ -->
|
||
<div class="panel-page" id="page-calculadora">
|
||
<h2 style="font-size:1rem;font-weight:700;margin-bottom:20px">Calculadora de envío</h2>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px">
|
||
<div style="background:var(--white);border:1px solid var(--gray-200);border-radius:12px;padding:24px">
|
||
<h3 style="font-size:1rem;font-weight:700;margin-bottom:20px">📊 Datos del producto</h3>
|
||
<div class="form-group"><label>Peso (lbs)</label><input type="number" id="cc-w" placeholder="Ej: 2.5" step="0.1"/></div>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
|
||
<div class="form-group"><label>Largo (cm)</label><input type="number" id="cc-l" placeholder="30"/></div>
|
||
<div class="form-group"><label>Ancho (cm)</label><input type="number" id="cc-a" placeholder="20"/></div>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
|
||
<div class="form-group"><label>Alto (cm)</label><input type="number" id="cc-h" placeholder="15"/></div>
|
||
<div class="form-group"><label>Valor ($USD)</label><input type="number" id="cc-v" placeholder="150"/></div>
|
||
</div>
|
||
<div class="form-group"><label>Categoría SENAE</label>
|
||
<select id="cc-cat">
|
||
<option value="4x4">4x4 — Sin arancel (máx $400, 4 kg)</option>
|
||
<option value="B">Cat. B — Consumo general (10%)</option>
|
||
<option value="C">Cat. C — Textiles, calzado (20%)</option>
|
||
<option value="D">Cat. D — Electrónicos (10%)</option>
|
||
</select>
|
||
</div>
|
||
<button onclick="calcPortal()" style="width:100%;padding:12px;background:var(--primary);color:#fff;border:none;border-radius:8px;font-weight:700;cursor:pointer;font-family:inherit;font-size:.9rem">Calcular →</button>
|
||
</div>
|
||
<div style="background:var(--white);border:1px solid var(--gray-200);border-radius:12px;padding:24px">
|
||
<h3 style="font-size:1rem;font-weight:700;margin-bottom:20px">💰 Desglose estimado</h3>
|
||
<div style="display:flex;flex-direction:column;gap:0">
|
||
<div style="display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--gray-100);font-size:.87rem"><span style="color:var(--gray-500)">Peso a cobrar</span><span id="cc-r-peso" style="font-weight:600">—</span></div>
|
||
<div style="display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--gray-100);font-size:.87rem"><span style="color:var(--gray-500)">Flete ($3.50/lb)</span><span id="cc-r-flete" style="font-weight:600">$0.00</span></div>
|
||
<div style="display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--gray-100);font-size:.87rem"><span style="color:var(--gray-500)">Seguro (2%)</span><span id="cc-r-seg" style="font-weight:600">$0.00</span></div>
|
||
<div style="display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--gray-100);font-size:.87rem"><span style="color:var(--gray-500)">FODINFA (0.5%)</span><span id="cc-r-fod" style="font-weight:600">$0.00</span></div>
|
||
<div style="display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--gray-100);font-size:.87rem"><span style="color:var(--gray-500)">Arancel</span><span id="cc-r-ara" style="font-weight:600">$0.00</span></div>
|
||
<div style="display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--gray-100);font-size:.87rem"><span style="color:var(--gray-500)">IVA (15%)</span><span id="cc-r-iva" style="font-weight:600">$0.00</span></div>
|
||
</div>
|
||
<div style="background:linear-gradient(135deg,var(--primary),var(--primary-d));border-radius:10px;padding:18px 20px;margin-top:16px;display:flex;justify-content:space-between;align-items:center">
|
||
<span style="color:rgba(255,255,255,.8);font-size:.88rem;font-weight:600">TOTAL ESTIMADO</span>
|
||
<span id="cc-r-total" style="color:#fff;font-size:1.4rem;font-weight:800">$0.00</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ PERFIL ══ -->
|
||
<div class="panel-page" id="page-perfil">
|
||
<h2 style="font-size:1rem;font-weight:700;margin-bottom:20px">Mi perfil</h2>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px">
|
||
<div style="background:var(--white);border:1px solid var(--gray-200);border-radius:12px;padding:24px">
|
||
<h3 style="font-size:.95rem;font-weight:700;margin-bottom:20px">Datos personales</h3>
|
||
<div class="form-group"><label>Nombre completo</label><input type="text" value="Juan Pérez"/></div>
|
||
<div class="form-group"><label>Correo electrónico</label><input type="email" value="juan.perez@ejemplo.com"/></div>
|
||
<div class="form-group"><label>Teléfono WhatsApp</label><input type="tel" value="+593 99 123 4567"/></div>
|
||
<div class="form-group"><label>Ciudad</label><input type="text" value="Cuenca, Ecuador"/></div>
|
||
<div class="form-group"><label>Cédula / Pasaporte</label><input type="text" value="0102030405"/></div>
|
||
<button class="btn-sm btn-primary" style="width:100%">Guardar cambios</button>
|
||
</div>
|
||
<div style="background:var(--white);border:1px solid var(--gray-200);border-radius:12px;padding:24px">
|
||
<h3 style="font-size:.95rem;font-weight:700;margin-bottom:20px">Mi Suite asignada</h3>
|
||
<div style="background:var(--dark);border-radius:10px;padding:18px 20px;font-family:var(--font-mono);font-size:.85rem;color:#A5B4FC;line-height:2;border:1px solid rgba(0,87,255,.3);margin-bottom:16px">
|
||
<div style="color:#fff;font-weight:700">Juan Pérez</div>
|
||
<div>150 N Day St,</div>
|
||
<div style="color:var(--accent);font-weight:700;font-size:.95rem">Suite EC-04512,</div>
|
||
<div>City of Orange, NJ 07050</div>
|
||
<div>United States 🇺🇸</div>
|
||
</div>
|
||
<button onclick="copySuite()" style="width:100%;padding:12px;background:var(--primary-l);color:var(--primary);border:1px solid #C7D7FF;border-radius:8px;font-weight:700;font-size:.88rem;cursor:pointer;font-family:inherit">📋 Copiar dirección completa</button>
|
||
<div style="margin-top:20px">
|
||
<h3 style="font-size:.95rem;font-weight:700;margin-bottom:16px">Seguridad</h3>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--gray-100);font-size:.85rem"><span>Contraseña</span><button class="btn-sm btn-outline">Cambiar</button></div>
|
||
<div style="display:flex;align-items:center;justify-content:space-between;padding:12px 0;font-size:.85rem"><span>MFA (autenticación 2 pasos)</span><span style="background:#D1FAE5;color:#065F46;font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:999px">Activo ✓</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div><!-- /content -->
|
||
</main>
|
||
|
||
<!-- ═══ MODAL: REGISTRAR COMPRA ═══ -->
|
||
<div class="modal-overlay" id="modal-compra">
|
||
<div class="modal">
|
||
<button class="modal-close" onclick="closeModal('modal-compra')">✕</button>
|
||
<h3>➕ Registrar nueva compra</h3>
|
||
<div class="tab-pills">
|
||
<button class="tab-pill active" onclick="switchTab('tab-url','tab-manual',this)">🔗 Por enlace URL</button>
|
||
<button class="tab-pill" onclick="switchTab('tab-manual','tab-url',this)">✏️ Ingreso manual</button>
|
||
</div>
|
||
<div class="tab-content active" id="tab-url">
|
||
<div class="form-group">
|
||
<label>Pega el enlace del producto (Amazon, eBay, etc.)</label>
|
||
<div style="display:flex;gap:8px">
|
||
<input type="url" id="url-input" placeholder="https://www.amazon.com/dp/..." style="flex:1;padding:11px 14px;border:2px solid var(--gray-200);border-radius:8px;font-family:inherit;font-size:.9rem;outline:none" onfocus="this.style.borderColor='var(--primary)'" onblur="this.style.borderColor='var(--gray-200)'"/>
|
||
<button onclick="scanUrl()" style="padding:11px 16px;background:var(--primary);color:#fff;border:none;border-radius:8px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap">Escanear</button>
|
||
</div>
|
||
</div>
|
||
<div id="url-preview" style="display:none;background:var(--gray-100);border-radius:10px;padding:16px;margin-bottom:16px">
|
||
<div style="font-size:.85rem;font-weight:700;margin-bottom:4px" id="url-prod-name">Auriculares Sony WH-1000XM5</div>
|
||
<div style="font-size:.8rem;color:var(--gray-500)">Amazon · $349.99 · ~0.6 lbs</div>
|
||
</div>
|
||
</div>
|
||
<div class="tab-content" id="tab-manual">
|
||
<div class="form-group"><label>Nombre del producto</label><input type="text" placeholder="Ej: Auriculares Sony WH-1000XM5"/></div>
|
||
<div class="form-group"><label>Tienda / Plataforma</label><select><option>Amazon</option><option>eBay</option><option>Walmart</option><option>Shein</option><option>Otra</option></select></div>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
|
||
<div class="form-group"><label>Valor ($USD)</label><input type="number" placeholder="349.99"/></div>
|
||
<div class="form-group"><label>Peso estimado (lbs)</label><input type="number" placeholder="0.6"/></div>
|
||
</div>
|
||
<div class="form-group"><label>Categoría SENAE</label><select><option>4x4 — Sin arancel</option><option>Cat. B — 10%</option><option>Cat. C — 20%</option><option>Cat. D — 10%</option></select></div>
|
||
<div class="form-group"><label>Cantidad</label><input type="number" value="1" min="1"/></div>
|
||
</div>
|
||
<button onclick="submitCompra()" style="width:100%;padding:13px;background:var(--primary);color:#fff;border:none;border-radius:8px;font-weight:700;font-size:.95rem;cursor:pointer;font-family:inherit;margin-top:8px">Registrar compra →</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══ MODAL: PRE-ALERTA ═══ -->
|
||
<div class="modal-overlay" id="modal-prealerta">
|
||
<div class="modal">
|
||
<button class="modal-close" onclick="closeModal('modal-prealerta')">✕</button>
|
||
<h3>📬 Nueva pre-alerta</h3>
|
||
<div class="form-group"><label>Tienda / Plataforma</label><select><option>Amazon</option><option>eBay</option><option>Walmart</option><option>Shein</option><option>Otra</option></select></div>
|
||
<div class="form-group"><label>Número de tracking del vendedor</label><input type="text" placeholder="Ej: 1Z999AA10123456784 (UPS)"/></div>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
|
||
<div class="form-group"><label>Valor declarado ($USD)</label><input type="number" placeholder="120"/></div>
|
||
<div class="form-group"><label>Peso estimado (lbs)</label><input type="number" placeholder="1.5"/></div>
|
||
</div>
|
||
<div class="form-group"><label>Descripción del producto</label><input type="text" placeholder="Ej: Auriculares Bluetooth Sony"/></div>
|
||
<div class="form-group"><label>Fecha estimada de llegada a NJ</label><input type="date"/></div>
|
||
<div class="form-group">
|
||
<label>Factura comercial (PDF o imagen)</label>
|
||
<div class="upload-box" onclick="document.getElementById('factura-file').click()">
|
||
<div style="font-size:1.8rem">📎</div>
|
||
<p>Haz clic para subir la factura de Amazon o la tienda</p>
|
||
<input type="file" id="factura-file" style="display:none" accept=".pdf,image/*"/>
|
||
</div>
|
||
</div>
|
||
<button onclick="submitPrealerta()" style="width:100%;padding:13px;background:var(--green);color:#fff;border:none;border-radius:8px;font-weight:700;font-size:.95rem;cursor:pointer;font-family:inherit">Enviar pre-alerta →</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- TOAST -->
|
||
<div class="toast" id="toast">✅ <span id="toast-msg"></span></div>
|
||
|
||
<script>
|
||
// Page navigation
|
||
function showPage(id, el){
|
||
document.querySelectorAll('.panel-page').forEach(p=>p.classList.remove('active'));
|
||
document.getElementById('page-'+id).classList.add('active');
|
||
document.querySelectorAll('.sb-link').forEach(l=>l.classList.remove('active'));
|
||
if(el) el.classList.add('active');
|
||
const titles={dashboard:'Dashboard',paquetes:'Mis paquetes',prealerta:'Pre-alertas',tracking:'Tracking',historial:'Historial de envíos',calculadora:'Calculadora de envío',perfil:'Mi perfil'};
|
||
document.getElementById('topbar-title').textContent = titles[id]||id;
|
||
}
|
||
// Modals
|
||
function openModal(id){ document.getElementById(id).classList.add('show'); document.body.style.overflow='hidden'; }
|
||
function closeModal(id){ document.getElementById(id).classList.remove('show'); document.body.style.overflow=''; }
|
||
document.querySelectorAll('.modal-overlay').forEach(o=>{ o.addEventListener('click',function(e){ if(e.target===this) this.classList.remove('show'),document.body.style.overflow=''; }); });
|
||
// Tabs
|
||
function switchTab(show, hide, btn){
|
||
document.getElementById(show).classList.add('active');
|
||
document.getElementById(hide).classList.remove('active');
|
||
btn.closest('.tab-pills').querySelectorAll('.tab-pill').forEach(b=>b.classList.remove('active'));
|
||
btn.classList.add('active');
|
||
}
|
||
// Copy suite
|
||
function copySuite(){
|
||
const addr = 'Juan Pérez\n150 N Day St, Suite EC-04512\nCity of Orange, NJ 07050\nUnited States';
|
||
navigator.clipboard.writeText(addr).catch(()=>{});
|
||
showToast('¡Dirección copiada al portapapeles!');
|
||
}
|
||
// Tracking
|
||
function doTracking(){
|
||
const v = document.getElementById('track-input').value.trim();
|
||
if(!v){ alert('Ingresa un Tracking ID'); return; }
|
||
document.getElementById('t-id').textContent = v;
|
||
document.getElementById('tracking-result').style.display='block';
|
||
}
|
||
// Scan URL (demo)
|
||
function scanUrl(){
|
||
const url = document.getElementById('url-input').value.trim();
|
||
if(!url){ return; }
|
||
document.getElementById('url-preview').style.display='block';
|
||
}
|
||
// Calc
|
||
function calcPortal(){
|
||
const w=parseFloat(document.getElementById('cc-w').value)||0;
|
||
const l=parseFloat(document.getElementById('cc-l').value)||0;
|
||
const a=parseFloat(document.getElementById('cc-a').value)||0;
|
||
const h=parseFloat(document.getElementById('cc-h').value)||0;
|
||
const v=parseFloat(document.getElementById('cc-v').value)||0;
|
||
const cat=document.getElementById('cc-cat').value;
|
||
const volW=(l*a*h)/139;
|
||
const pf=Math.max(w,volW);
|
||
const aranceles={'4x4':0,'B':.10,'C':.20,'D':.10};
|
||
const flete=pf*3.5,seg=v*.02,fod=v*.005,ara=v*(aranceles[cat]||0),iva=(v+fod+ara)*.15;
|
||
const total=flete+seg+fod+ara+iva;
|
||
const f=n=>'$'+n.toFixed(2);
|
||
document.getElementById('cc-r-peso').textContent=pf.toFixed(2)+' lbs';
|
||
document.getElementById('cc-r-flete').textContent=f(flete);
|
||
document.getElementById('cc-r-seg').textContent=f(seg);
|
||
document.getElementById('cc-r-fod').textContent=f(fod);
|
||
document.getElementById('cc-r-ara').textContent=f(ara)+(cat==='4x4'?' (exento)':'');
|
||
document.getElementById('cc-r-iva').textContent=f(iva);
|
||
document.getElementById('cc-r-total').textContent=f(total);
|
||
}
|
||
function submitCompra(){ closeModal('modal-compra'); showToast('¡Compra registrada con éxito! Tracking ID asignado.'); }
|
||
function submitPrealerta(){ closeModal('modal-prealerta'); showToast('¡Pre-alerta enviada a la bodega NJ!'); }
|
||
function showToast(msg){
|
||
const t=document.getElementById('toast');
|
||
document.getElementById('toast-msg').textContent=msg;
|
||
t.classList.add('show');
|
||
setTimeout(()=>t.classList.remove('show'),3000);
|
||
}
|
||
function showPkgDetail(tid){ showToast('Abriendo detalle de '+tid); }
|
||
</script>
|
||
</body>
|
||
</html>
|