Refactor shuttle and route management: price separation, premium preview design, and simplified route creation form
This commit is contained in:
@ -209,62 +209,85 @@ async function saveShuttle() {
|
||||
<h2>Previsualización en Directo</h2>
|
||||
</div>
|
||||
|
||||
<div class="preview-container">
|
||||
<!-- LA TARJETA TAL CUAL LA IMAGEN DEL USUARIO -->
|
||||
<div class="shuttle-card-preview" :style="{ backgroundImage: `url(${shuttleForm.image_url})` }">
|
||||
<div class="card-header">
|
||||
<div class="company-badge">
|
||||
<span class="material-icons">business</span>
|
||||
{{ shuttleForm.company_name }}
|
||||
</div>
|
||||
<div class="price-badge-top">
|
||||
${{ shuttleForm.price_per_person }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="route-display">
|
||||
<span class="city">{{ shuttleForm.origin }}</span>
|
||||
<span class="material-icons arrow">arrow_forward</span>
|
||||
<span class="city">{{ shuttleForm.destination }}</span>
|
||||
</div>
|
||||
|
||||
<div class="vehicle-tag">
|
||||
<span class="material-icons">directions_bus</span>
|
||||
{{ shuttleForm.vehicle_type }}
|
||||
</div>
|
||||
|
||||
<div class="card-details-box">
|
||||
<div class="detail-item">
|
||||
<span class="material-icons icon-yellow">schedule</span>
|
||||
<div class="texts">
|
||||
<span class="label">DURACIÓN ESTIMADA</span>
|
||||
<span class="val">{{ shuttleForm.estimated_duration }}</span>
|
||||
<!-- PREVIEW PANEL -->
|
||||
<div class="shuttle-card-preview" :class="{ expanded: true }" :style="{ backgroundImage: `url(${previewImageUrl})` }">
|
||||
<div class="shuttle-main-info">
|
||||
<div class="shuttle-header-mini">
|
||||
<div class="company-badge">
|
||||
<span class="material-icons">business</span>
|
||||
{{ shuttleForm.company_name }}
|
||||
</div>
|
||||
<div class="price-pill">
|
||||
<span class="currency">$</span>
|
||||
<span class="amount">{{ shuttleForm.price_per_person }}</span>
|
||||
<span class="price-pill-label">/p</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="material-icons icon-yellow">calendar_today</span>
|
||||
<div class="texts">
|
||||
<span class="label">SALIDAS</span>
|
||||
<span class="val">{{ shuttleForm.departure_times }}</span>
|
||||
|
||||
<div class="shuttle-route-compact">
|
||||
<span class="route-text">{{ shuttleForm.origin }}</span>
|
||||
<span class="material-icons route-arrow">arrow_forward</span>
|
||||
<span class="route-text">{{ shuttleForm.destination }}</span>
|
||||
</div>
|
||||
|
||||
<div class="shuttle-tags">
|
||||
<div class="vehicle-tag-mini">
|
||||
<span class="material-icons">directions_bus</span>
|
||||
{{ shuttleForm.vehicle_type }}
|
||||
</div>
|
||||
<div class="expand-indicator">
|
||||
<span class="material-icons">expand_less</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-footer-preview">
|
||||
<div class="price-info">
|
||||
<span class="main-price">${{ shuttleForm.price_per_person }} <small>por persona</small></span>
|
||||
<div class="lang-indicator" v-if="shuttleForm.english_speaking">
|
||||
<span class="material-icons">g_translate</span>
|
||||
ENGLISH
|
||||
<!-- EXPANDED CONTENT PREVIEW -->
|
||||
<div class="shuttle-details">
|
||||
<div class="shuttle-separator"></div>
|
||||
|
||||
<div class="shuttle-body">
|
||||
<div class="info-row">
|
||||
<span class="material-icons">schedule</span>
|
||||
<div>
|
||||
<p class="label">DURACIÓN ESTIMADA</p>
|
||||
<p class="value">{{ shuttleForm.estimated_duration }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="material-icons">event</span>
|
||||
<div>
|
||||
<p class="label">SALIDAS</p>
|
||||
<p class="value">{{ shuttleForm.departure_times }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-row" v-if="shuttleForm.english_speaking">
|
||||
<span class="material-icons">g_translate</span>
|
||||
<div>
|
||||
<p class="label">IDIOMA</p>
|
||||
<p class="value">Español · English</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-actions">
|
||||
<div class="mini-contact-btn phone">
|
||||
<span class="material-icons">phone</span>
|
||||
|
||||
<!-- Precios prominentes -->
|
||||
<div class="price-block">
|
||||
<div class="price-row-main">
|
||||
<span class="price-amount-big">${{ shuttleForm.price_per_person }}</span>
|
||||
<span class="price-label-big">por persona</span>
|
||||
</div>
|
||||
<div class="mini-contact-btn wa">
|
||||
<div class="price-row-secondary" v-if="shuttleForm.price_private_trip">
|
||||
<span class="material-icons price-icon-secondary">directions_car</span>
|
||||
<span class="price-amount-secondary">${{ shuttleForm.price_private_trip }}</span>
|
||||
<span class="price-label-secondary">viaje privado</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Botones de contacto -->
|
||||
<div class="contact-buttons-preview">
|
||||
<button class="btn-whatsapp-preview">
|
||||
<span class="material-icons">chat</span>
|
||||
</div>
|
||||
WhatsApp
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -486,18 +509,17 @@ async function saveShuttle() {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* SHUTTLE PREVIEW CARD STYLES */
|
||||
/* SHUTTLE PREVIEW CARD PREMIUM STYLES */
|
||||
.shuttle-card-preview {
|
||||
width: 100%;
|
||||
aspect-ratio: 1.2;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255,255,255,0.12);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
border-radius: 24px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
box-shadow: 0 30px 60px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
@ -505,125 +527,214 @@ async function saveShuttle() {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.4) 100%);
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
rgba(0, 0, 0, 0.93) 0%,
|
||||
rgba(0, 0, 0, 0.65) 55%,
|
||||
rgba(0, 0, 0, 0.30) 100%
|
||||
);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.card-header, .route-display, .vehicle-tag, .card-details-box, .card-footer-preview {
|
||||
.shuttle-card-preview.expanded {
|
||||
border: 2px solid #FEE715;
|
||||
}
|
||||
|
||||
.shuttle-card-preview.expanded::before {
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
rgba(0, 0, 0, 0.97) 0%,
|
||||
rgba(0, 0, 0, 0.80) 45%,
|
||||
rgba(0, 0, 0, 0.40) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.shuttle-main-info,
|
||||
.shuttle-details {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 18px 20px;
|
||||
}
|
||||
|
||||
.company-badge {
|
||||
background: rgba(254, 231, 21, 0.2);
|
||||
backdrop-filter: blur(8px);
|
||||
color: #fee715;
|
||||
padding: 6px 12px;
|
||||
border-radius: 8px;
|
||||
display: inline-flex;
|
||||
.shuttle-main-info {
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
|
||||
.shuttle-header-mini {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.shuttle-card-preview .company-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 0.8rem;
|
||||
background: rgba(0, 0, 0, 0.60);
|
||||
color: #FEE715;
|
||||
padding: 5px 11px;
|
||||
border-radius: 10px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 800;
|
||||
border: 1px solid rgba(254, 231, 21, 0.3);
|
||||
border: 1px solid rgba(254, 231, 21, 0.45);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.price-badge-top {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: #fee715;
|
||||
.price-pill {
|
||||
background: #FEE715;
|
||||
color: #101820;
|
||||
padding: 8px 16px;
|
||||
border-radius: 12px;
|
||||
padding: 5px 11px;
|
||||
border-radius: 10px;
|
||||
font-weight: 900;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.route-display {
|
||||
margin-top: 20px;
|
||||
font-size: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 900;
|
||||
align-items: baseline;
|
||||
gap: 1px;
|
||||
box-shadow: 0 4px 12px rgba(254, 231, 21, 0.35);
|
||||
}
|
||||
|
||||
.route-display .arrow {
|
||||
color: #fee715;
|
||||
}
|
||||
.price-pill .currency { font-size: 0.8rem; }
|
||||
.price-pill .amount { font-size: 1rem; }
|
||||
.price-pill-label { font-size: 0.7rem; font-weight: 700; opacity: 0.75; }
|
||||
|
||||
.vehicle-tag {
|
||||
margin-top: 12px;
|
||||
background: rgba(0,0,0,0.6);
|
||||
padding: 8px 16px;
|
||||
border-radius: 12px;
|
||||
display: inline-flex;
|
||||
.shuttle-route-compact {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: fit-content;
|
||||
font-weight: 700;
|
||||
font-size: 0.9rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 900;
|
||||
color: #ffffff;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.card-details-box {
|
||||
margin-top: auto;
|
||||
margin-bottom: 20px;
|
||||
.route-arrow {
|
||||
color: #FEE715;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.shuttle-tags {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.vehicle-tag-mini {
|
||||
padding: 5px 10px;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border-radius: 8px;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: #ffffff;
|
||||
border: 1px solid rgba(255, 255, 255, 0.20);
|
||||
}
|
||||
|
||||
.vehicle-tag-mini .material-icons { font-size: 15px; color: #FEE715; }
|
||||
.expand-indicator { color: #FEE715; }
|
||||
|
||||
.shuttle-separator {
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, transparent, rgba(255,255,255,0.25), transparent);
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
.shuttle-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
gap: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.icon-yellow { color: #fee715; font-size: 20px; }
|
||||
.info-row .material-icons { color: #FEE715; font-size: 22px; }
|
||||
|
||||
.lang-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
background: rgba(254, 231, 21, 0.2);
|
||||
color: #fee715;
|
||||
padding: 2px 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.6rem;
|
||||
font-weight: 800;
|
||||
margin-top: 4px;
|
||||
width: fit-content;
|
||||
.info-row .label {
|
||||
font-size: 0.65rem;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.lang-indicator .material-icons { font-size: 10px; }
|
||||
.info-row .value {
|
||||
font-size: 0.95rem;
|
||||
color: #ffffff;
|
||||
margin: 2px 0 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.card-footer-preview {
|
||||
.price-block {
|
||||
padding: 14px 0;
|
||||
border-top: 1px solid rgba(255,255,255,0.08);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.08);
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.price-row-main {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.price-amount-big {
|
||||
font-size: 2rem;
|
||||
font-weight: 900;
|
||||
color: #FEE715;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.price-label-big {
|
||||
font-size: 0.85rem;
|
||||
color: rgba(255,255,255,0.75);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.price-row-secondary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.price-icon-secondary { font-size: 16px; color: rgba(255,255,255,0.55); }
|
||||
.price-amount-secondary { font-size: 1rem; font-weight: 800; color: rgba(255,255,255,0.85); }
|
||||
.price-label-secondary { font-size: 0.75rem; color: rgba(255,255,255,0.5); }
|
||||
|
||||
.contact-buttons-preview {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.contact-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.mini-contact-btn {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 16px;
|
||||
.btn-whatsapp-preview {
|
||||
width: 100%;
|
||||
background: #25d366;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 14px;
|
||||
border-radius: 12px;
|
||||
font-weight: 800;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s;
|
||||
gap: 8px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.mini-contact-btn.phone { background: rgba(255,255,255,0.1); color: white; border: 1px solid rgba(255,255,255,0.2); }
|
||||
.mini-contact-btn.wa { background: #25d366; color: white; box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3); }
|
||||
|
||||
.mini-contact-btn .material-icons { font-size: 24px; }
|
||||
.preview-hint {
|
||||
text-align: center;
|
||||
color: #94a3b8;
|
||||
font-size: 0.85rem;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.toggle-container {
|
||||
display: flex;
|
||||
@ -677,13 +788,6 @@ async function saveShuttle() {
|
||||
.nexus-switch input:checked + .slider { background-color: #fee715; }
|
||||
.nexus-switch input:checked + .slider:before { transform: translateX(20px); background-color: #101820; }
|
||||
|
||||
.preview-hint {
|
||||
text-align: center;
|
||||
color: #94a3b8;
|
||||
font-size: 0.85rem;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.message {
|
||||
text-align: center;
|
||||
padding: 12px;
|
||||
|
||||
Reference in New Issue
Block a user