Elige un mueble para personalizar

Recepción Base
Recepción Argos
Bench Ensambla
Mesa de Juntas Argos
app/script.js 0000644 1305210 1305210 00000001556 15015413503 010422 0 ustar app/style.css 0000644 1305210 1305210 00000005056 15013716150 010433 0 ustar /* General body styling */ body { font-family: "Century Gothic", sans-serif; text-align: center; margin: 0; padding: 20px; background-color: #f4f4f4; color: #333; } h1, h2 { margin: 10px 0; } /* Configurator container */ .configurador { display: flex; flex-direction: column; align-items: center; } /* Image display area */ .vista-escritorio { position: relative; width: 600px; aspect-ratio: 3 / 2; margin-bottom: 30px; max-width: 100%; } .vista-escritorio img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; } /* Layer control */ #recepcion-superior { z-index: 2; } #recepcion-patas { z-index: 1; } /* --- Added: Mesa de Juntas Argos Layering --- */ #mesa-superior { z-index: 2; } #mesa-base { z-index: 1; } /* ------------------------------------------- */ /* Controls */ .controles { display: flex; flex-direction: column; gap: 15px; align-items: center; width: 100%; max-width: 300px; } label { font-size: 16px; } /* Styled dropdowns */ select { background-color: #000; color: #fff; border: 1px solid #333; border-radius: 6px; padding: 10px 20px; font-size: 18px; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%204%205'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20fill='%23fff'%20d='M2%205L0%200h4z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 0.65rem auto; padding-right: 2rem; cursor: pointer; } /* Responsive styles */ @media (max-width: 768px) { .configurador { padding: 0 10px; } .vista-escritorio { aspect-ratio: 3 / 2; margin-bottom: 20px; } .controles { width: 90%; } label { font-size: 18px; } select { font-size: 20px; padding: 12px 24px; border-radius: 8px; } } .medidas { margin-top: 30px; background-color: #f0f0f0; padding: 20px; border-radius: 12px; max-width: 600px; margin-left: auto; margin-right: auto; text-align: left; } .medidas h3 { margin-top: 0; font-size: 1.2em; color: #444; } .medidas ul { columns: 3; -webkit-columns: 3; -moz-columns: 3; padding-left: 20px; column-gap: 30px; } .medidas li { line-height: 1.6; } .logo-container { text-align: center; margin-bottom: 30px; } .logo { max-width: 120px; width: 100%; height: auto; object-fit: contain; } /* Responsive adjustments */ @media (max-width: 768px) { .logo { max-width: 80px; } }