295 lines
4.6 KiB
PHP
295 lines
4.6 KiB
PHP
<style>
|
|
.flight-image {
|
|
height: 260px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
.flight-image img {
|
|
transition: .6s ease;
|
|
}
|
|
|
|
|
|
.card:hover .flight-image img {
|
|
transform: scale(1.08);
|
|
}
|
|
|
|
|
|
.card.border-0.shadow-sm.rounded-4.overflow-hidden {
|
|
|
|
border-radius: 24px !important;
|
|
overflow: hidden;
|
|
position: relative;
|
|
background: #fff;
|
|
transition: .4s ease;
|
|
border: 1px solid #f1f1f1 !important;
|
|
|
|
}
|
|
|
|
|
|
.card.border-0.shadow-sm.rounded-4.overflow-hidden:hover {
|
|
|
|
transform: translateY(-8px);
|
|
|
|
box-shadow:
|
|
0 20px 45px rgba(0,0,0,.12)!important;
|
|
|
|
}
|
|
|
|
.card form {
|
|
|
|
position:absolute;
|
|
top:18px;
|
|
left:18px;
|
|
z-index:5;
|
|
|
|
}
|
|
|
|
|
|
.card form button {
|
|
|
|
border-radius:50px;
|
|
|
|
background:rgba(255,255,255,.9);
|
|
|
|
backdrop-filter:blur(8px);
|
|
|
|
border:none;
|
|
|
|
padding:10px 18px;
|
|
|
|
color:#e63946;
|
|
|
|
font-weight:600;
|
|
|
|
box-shadow:
|
|
0 8px 20px rgba(0,0,0,.15);
|
|
|
|
transition:.3s;
|
|
|
|
}
|
|
|
|
|
|
.card form button:hover {
|
|
|
|
background:#e63946;
|
|
|
|
color:white;
|
|
|
|
}
|
|
|
|
|
|
.flight-badge {
|
|
|
|
position:absolute;
|
|
|
|
right:20px;
|
|
|
|
bottom:20px;
|
|
|
|
background:white;
|
|
|
|
color:#0d6efd;
|
|
|
|
padding:8px 20px;
|
|
|
|
border-radius:50px;
|
|
|
|
font-size:14px;
|
|
|
|
font-weight:700;
|
|
|
|
box-shadow:
|
|
0 8px 20px rgba(0,0,0,.15);
|
|
|
|
}
|
|
|
|
.flight-image:after {
|
|
|
|
content:"";
|
|
|
|
position:absolute;
|
|
|
|
inset:0;
|
|
|
|
background:
|
|
linear-gradient(
|
|
transparent,
|
|
rgba(0,0,0,.45)
|
|
);
|
|
|
|
}
|
|
|
|
.card-body {
|
|
|
|
padding:28px !important;
|
|
|
|
}
|
|
|
|
|
|
.card-body h5 {
|
|
|
|
font-size:22px;
|
|
|
|
font-weight:800 !important;
|
|
|
|
color:#222;
|
|
|
|
}
|
|
|
|
.route {
|
|
|
|
display:flex;
|
|
|
|
justify-content:center;
|
|
|
|
align-items:center;
|
|
|
|
gap:15px;
|
|
|
|
margin:25px 0;
|
|
|
|
font-weight:700;
|
|
|
|
font-size:16px;
|
|
|
|
}
|
|
|
|
|
|
.route .line {
|
|
|
|
width:55px;
|
|
|
|
height:2px;
|
|
|
|
background:#dbe7ff;
|
|
|
|
position:relative;
|
|
|
|
}
|
|
|
|
|
|
.route .line:after {
|
|
|
|
content:"✈";
|
|
|
|
position:absolute;
|
|
|
|
top:50%;
|
|
left:50%;
|
|
|
|
transform:translate(-50%,-50%);
|
|
|
|
background:white;
|
|
|
|
padding:5px;
|
|
|
|
color:#0d6efd;
|
|
|
|
}
|
|
|
|
|
|
.card-body strong {
|
|
|
|
font-size:20px;
|
|
|
|
color:#0d6efd;
|
|
|
|
}
|
|
|
|
.card-body .btn-primary {
|
|
|
|
background:linear-gradient(
|
|
135deg,
|
|
#0062ff,
|
|
#00b7ff
|
|
);
|
|
|
|
border:none;
|
|
|
|
padding:11px 30px;
|
|
|
|
font-weight:700;
|
|
|
|
box-shadow:
|
|
0 10px 25px rgba(0,98,255,.3);
|
|
|
|
transition:.3s;
|
|
|
|
}
|
|
|
|
|
|
.card-body .btn-primary:hover {
|
|
|
|
transform:translateY(-3px);
|
|
|
|
box-shadow:
|
|
0 15px 30px rgba(0,98,255,.4);
|
|
|
|
}
|
|
</style>
|
|
|
|
<div class="col-md-4">
|
|
<div class="card border-0 shadow-sm rounded-4 overflow-hidden h-100">
|
|
<form action="{{ route('users.favorite.store') }}" method="POST">
|
|
|
|
@csrf
|
|
|
|
<input type="hidden" name="id" value="{{ $flight->id }}">
|
|
|
|
<input type="hidden"
|
|
name="type"
|
|
value="App\Models\Flight">
|
|
|
|
|
|
<button class="btn btn-outline-danger">
|
|
❤️ افزودن به علاقهمندی
|
|
</button>
|
|
|
|
</form>
|
|
|
|
<div class="flight-image">
|
|
<img src="{{ $flight->image ? asset('storage/'.$flight->image) : asset('assets/img/placeholder.jpg') }}"
|
|
class="w-100 h-100 object-fit-cover"
|
|
alt="{{ $flight->airline }}">
|
|
<span class="flight-badge">
|
|
پرواز
|
|
</span>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="card-body d-flex flex-column">
|
|
|
|
<h5 class="fw-bold">
|
|
{{ $flight->airline }}
|
|
</h5>
|
|
|
|
|
|
<div class="route">
|
|
<span>{{ $flight->origin }}</span>
|
|
|
|
<span class="line"></span>
|
|
|
|
<span>{{ $flight->destination }}</span>
|
|
</div>
|
|
|
|
|
|
<div class="mt-auto d-flex justify-content-between align-items-center">
|
|
|
|
<strong>
|
|
{{ number_format($flight->price) }} تومان
|
|
</strong>
|
|
|
|
<a href="{{ route('flights.show',$flight) }}"
|
|
class="btn btn-primary rounded-pill">
|
|
مشاهده
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div></div>
|