change main screen

This commit is contained in:
Ghassan Yusuf 2026-01-29 16:24:14 +03:00
parent 026a23ade1
commit ec2a6facc0
2 changed files with 73 additions and 31 deletions

View File

@ -70,6 +70,42 @@
margin-right: 0.5rem; margin-right: 0.5rem;
} }
.dropdown-menu {
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 10px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
max-height: 300px;
overflow-y: auto;
}
.dropdown-item {
padding: 0.75rem 1rem;
transition: all 0.2s ease;
}
.dropdown-item:hover {
background: rgba(102, 126, 234, 0.1);
color: #667eea;
}
.venue-option.selected {
background: rgba(102, 126, 234, 0.2);
color: #667eea;
font-weight: 600;
}
.btn-outline-light {
border-color: rgba(255, 255, 255, 0.3);
color: white;
}
.btn-outline-light:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.5);
color: white;
}
.form-control:focus { .form-control:focus {
border-color: #667eea; border-color: #667eea;
box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25); box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
@ -126,37 +162,43 @@
</p> </p>
<h6 class="mb-3">Select Your Venue</h6> <h6 class="mb-3">Select Your Venue</h6>
<div id="venueSelector"> <div class="dropdown">
<div class="venue-card selected" data-venue="seven"> <button class="btn btn-outline-light dropdown-toggle w-100 text-start d-flex align-items-center" type="button" id="venueDropdown" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-hotel"></i> Seven Hotel <i class="fas fa-hotel me-2"></i>
</div> <span id="selectedVenueText">Seven Hotel</span>
<div class="venue-card" data-venue="city_center"> </button>
<i class="fas fa-building"></i> City Center Hotel <ul class="dropdown-menu w-100" aria-labelledby="venueDropdown">
</div> <li><a class="dropdown-item d-flex align-items-center venue-option selected" href="#" data-venue="seven">
<div class="venue-card" data-venue="coral_bay"> <i class="fas fa-hotel me-2"></i> Seven Hotel
<i class="fas fa-umbrella-beach"></i> Coral Bay Resort </a></li>
</div> <li><a class="dropdown-item d-flex align-items-center venue-option" href="#" data-venue="city_center">
<div class="venue-card" data-venue="la_taverna"> <i class="fas fa-building me-2"></i> City Center Hotel
<i class="fas fa-utensils"></i> La Taverna </a></li>
</div> <li><a class="dropdown-item d-flex align-items-center venue-option" href="#" data-venue="coral_bay">
<div class="venue-card" data-venue="rayes"> <i class="fas fa-umbrella-beach me-2"></i> Coral Bay Resort
<i class="fas fa-moon"></i> Rayes </a></li>
</div> <li><a class="dropdown-item d-flex align-items-center venue-option" href="#" data-venue="la_taverna">
<div class="venue-card" data-venue="taiga_sky"> <i class="fas fa-utensils me-2"></i> La Taverna
<i class="fas fa-glass-martini-alt"></i> Taiga Sky </a></li>
</div> <li><a class="dropdown-item d-flex align-items-center venue-option" href="#" data-venue="rayes">
<div class="venue-card" data-venue="trabouche"> <i class="fas fa-moon me-2"></i> Rayes
<i class="fas fa-water"></i> Trabouche </a></li>
</div> <li><a class="dropdown-item d-flex align-items-center venue-option" href="#" data-venue="taiga_sky">
<div class="venue-card" data-venue="coral_bay_beach"> <i class="fas fa-glass-martini-alt me-2"></i> Taiga Sky
<i class="fas fa-sun"></i> Coral Bay Beach </a></li>
</div> <li><a class="dropdown-item d-flex align-items-center venue-option" href="#" data-venue="trabouche">
<div class="venue-card" data-venue="coral_bay_pool"> <i class="fas fa-water me-2"></i> Trabouche
<i class="fas fa-swimming-pool"></i> Coral Bay Pool </a></li>
</div> <li><a class="dropdown-item d-flex align-items-center venue-option" href="#" data-venue="coral_bay_beach">
<div class="venue-card" data-venue="jetskis"> <i class="fas fa-sun me-2"></i> Coral Bay Beach
<i class="fas fa-ship"></i> Jetskis </a></li>
</div> <li><a class="dropdown-item d-flex align-items-center venue-option" href="#" data-venue="coral_bay_pool">
<i class="fas fa-swimming-pool me-2"></i> Coral Bay Pool
</a></li>
<li><a class="dropdown-item d-flex align-items-center venue-option" href="#" data-venue="jetskis">
<i class="fas fa-ship me-2"></i> Jetskis
</a></li>
</ul>
</div> </div>
</div> </div>
</div> </div>