<style> :root { –primary: #2271b1; –primary-hover: #135e96; –success: #46b450; –warning: #ffb900; –error: #dc3232; –gray: #f6f7f7; –border: #ccd0d4; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Oxygen, Ubuntu, Cantarell, ‘Open Sans’, ‘Helvetica Neue’, sans-serif; line-height: 1.5; color: #333; background-color: #f1f1f1; padding: 20px; } .container { max-width: 1200px; margin: 0 auto; background: white; border: 1px solid var(–border); border-radius: 4px; box-shadow: 0 1px 1px rgba(0,0,0,0.04); } header { background: var(–gray); padding: 20px; border-bottom: 1px solid var(–border); display: flex; justify-content: space-between; align-items: center; } h1 { font-size: 23px; font-weight: 400; color: #23282d; } .logo { font-weight: bold; color: var(–primary); font-size: 20px; } .content { padding: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 768px) { .content { grid-template-columns: 1fr; } } .card { background: white; border: 1px solid var(–border); border-radius: 4px; padding: 20px; } .card-title { font-size: 16px; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid var(–border); } .form-group { margin-bottom: 15px; } label { display: block; margin-bottom: 5px; font-weight: 500; } input[type=»text»], select { width: 100%; padding: 8px; border: 1px solid var(–border); border-radius: 4px; font-size: 14px; } .checkbox-group { margin-top: 10px; } .checkbox-group label { display: flex; align-items: center; font-weight: normal; margin-bottom: 8px; } .checkbox-group input { margin-right: 8px; } .button { background: var(–primary); color: white; border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer; font-size: 14px; transition: background 0.2s; } .button:hover { background: var(–primary-hover); } .button-success { background: var(–success); } .button-success:hover { background: #3a9442; } .button-warning { background: var(–warning); color: #000; } .button-warning:hover { background: #e6a400; } .progress-container { margin: 20px 0; background: var(–gray); border-radius: 4px; overflow: hidden; } .progress-bar { height: 20px; background: var(–primary); width: 0%; transition: width 0.3s; text-align: center; color: white; font-size: 12px; line-height: 20px; } .log-container { height: 300px; overflow-y: auto; background: #2a3138; color: #fff; padding: 15px; border-radius: 4px; font-family: monospace; font-size: 13px; } .log-entry { margin-bottom: 8px; padding-left: 10px; border-left: 3px solid transparent; } .log-success { border-left-color: var(–success); color: #9ee7a3; } .log-error { border-left-color: var(–error); color: #ffabaf; } .log-warning { border-left-color: var(–warning); color: #ffd567; } .log-info { border-left-color: var(–primary); color: #9ec2e6; } .status-indicators { display: flex; gap: 15px; margin: 20px 0; flex-wrap: wrap; } .status-item { display: flex; align-items: center; } .status-color { width: 15px; height: 15px; border-radius: 50%; margin-right: 8px; } .status-imported { background: var(–success); } .status-updated { background: var(–primary); } .status-error { background: var(–error); } .status-skipped { background: var(–warning); } .stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; margin: 20px 0; } .stat-card { background: var(–gray); padding: 15px; border-radius: 4px; text-align: center; } .stat-value { font-size: 24px; font-weight: bold; margin-bottom: 5px; } .stat-label { font-size: 13px; color: #666; } .diagnostic-section { margin-top: 30px; padding: 20px; background-color: #fff8e1; border-left: 4px solid #ffb900; } .config-section { background: #f8f9fa; padding: 15px; border-radius: 4px; margin-bottom: 20px; } .config-title { font-weight: 500; margin-bottom: 10px; color: #555; } .action-buttons { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; } .missing-data-panel { margin-top: 20px; border: 1px solid var(–warning); border-radius: 4px; overflow: hidden; } .missing-data-header { background: var(–warning); color: #000; padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; } .missing-data-content { max-height: 200px; overflow-y: auto; padding: 15px; } .missing-data-item { padding: 10px; border-bottom: 1px solid var(–border); display: flex; justify-content: space-between; align-items: center; } .missing-data-item:last-child { border-bottom: none; } .missing-details { font-size: 13px; } </style></head><body> <div class=»container»> <header> <h1>Importador de Productos CDo- Campos Flexibles</h1> <div class=»logo»>CDO IMPORTER FLEX</div> </header> <div class=»content»> <div class=»card»> <h2 class=»card-title»>Configuración de la API</h2> <div class=»form-group»> <label for=»api-token»>Token API</label> <input type=»text» id=»api-token» value=»G6pAgrQKu3PTn836BfyZHQ»> </div> <div class=»form-group»> <label for=»api-url»>URL API</label> <input type=»text» id=»api-url» value=»http://api.chile.cdopromocionales.com/v2/products»> </div> <h2 class=»card-title»>Configuración de Importación</h2> <div class=»config-section»> <div class=»config-title»>Manejo de Campos Faltantes</div> <div class=»checkbox-group»> <label><input type=»checkbox» name=»import-options» value=»force-import» checked> Forzar importación incluso con campos faltantes</label> <label><input type=»checkbox» name=»import-options» value=»auto-generate-sku» checked> Generar SKU automáticamente si falta</label> <label><input type=»checkbox» name=»import-options» value=»use-default-price» checked> Usar precio por defecto ($0) si falta</label> <label><input type=»checkbox» name=»import-options» value=»create-missing-categories» checked> Crear categorías automáticamente</label> </div> </div> <div class=»config-section»> <div class=»config-title»>Valores por Defecto</div> <div class=»form-group»> <label for=»default-price»>Precio por defecto ($)</label> <input type=»text» id=»default-price» value=»0″> </div> <div class=»form-group»> <label for=»default-status»>Estado de inventario por defecto</label> <select id=»default-status»> <option value=»in_stock»>En stock</option> <option value=»out_of_stock» selected>Sin stock</option> <option value=»on_backorder»>Bajo pedido</option> </select> </div> </div> <button class=»button» id=»save-settings»>Guardar Configuración</button> </div> <div class=»card»> <h2 class=»card-title»>Importación de Productos</h2> <p>El sistema importará productos incluso cuando falten campos obligatorios, usando valores por defecto.</p> <div class=»stats»> <div class=»stat-card»> <div class=»stat-value» id=»total-products»>0</div> <div class=»stat-label»>Productos Totales</div> </div> <div class=»stat-card»> <div class=»stat-value» id=»processed-products»>0</div> <div class=»stat-label»>Procesados</div> </div> <div class=»stat-card»> <div class=»stat-value» id=»missing-data»>0</div> <div class=»stat-label»>Con datos faltantes</div> </div> </div> <div class=»progress-container»> <div class=»progress-bar» id=»import-progress»>0%</div> </div> <div class=»action-buttons»> <button class=»button button-success» id=»start-import»>Iniciar Importación</button> <button class=»button button-warning» id=»reset-import» disabled>Reiniciar Importación</button> </div> <div class=»status-indicators»> <div class=»status-item»> <div class=»status-color status-imported»></div> <span>Importados</span> </div> <div class=»status-item»> <div class=»status-color status-updated»></div> <span>Actualizados</span> </div> <div class=»status-item»> <div class=»status-color status-error»></div> <span>Con error</span> </div> <div class=»status-item»> <div class=»status-color status-skipped»></div> <span>Datos faltantes</span> </div> </div> <h3 class=»card-title»>Registro de Importación</h3> <div class=»log-container» id=»import-log»> <div class=»log-entry log-info»>Sistema listo para importar productos. Los productos con campos faltantes se importarán con valores por defecto.</div> </div>