git commit "add comments and fix tour comments display"
This commit is contained in:
@@ -1,161 +1,424 @@
|
||||
<style>
|
||||
.flight-detail-page {
|
||||
padding: 70px 0;
|
||||
background: #f5f7fb;
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.flight-detail-card {
|
||||
background: #fff;
|
||||
border-radius: 25px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
gap: 0;
|
||||
box-shadow: 0 15px 50px rgba(0,0,0,.12);
|
||||
.flight-detail-page{
|
||||
padding:80px 0;
|
||||
background:
|
||||
linear-gradient(135deg,#eef5ff,#f9fbff);
|
||||
direction:rtl;
|
||||
}
|
||||
|
||||
|
||||
.flight-detail-image {
|
||||
width: 40%;
|
||||
min-height: 450px;
|
||||
}
|
||||
/* کارت اصلی */
|
||||
.flight-detail-card{
|
||||
|
||||
.flight-detail-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
background:rgba(255,255,255,.85);
|
||||
backdrop-filter:blur(15px);
|
||||
|
||||
border-radius:35px;
|
||||
|
||||
overflow:hidden;
|
||||
|
||||
display:flex;
|
||||
|
||||
box-shadow:
|
||||
0 25px 70px rgba(0,0,0,.12);
|
||||
|
||||
transition:.4s;
|
||||
}
|
||||
|
||||
|
||||
.flight-detail-content {
|
||||
width: 60%;
|
||||
padding: 45px;
|
||||
.flight-detail-card:hover{
|
||||
|
||||
transform:translateY(-8px);
|
||||
|
||||
box-shadow:
|
||||
0 35px 90px rgba(25,118,210,.25);
|
||||
|
||||
}
|
||||
|
||||
|
||||
.flight-detail-content h1 {
|
||||
font-size: 34px;
|
||||
font-weight: 800;
|
||||
color: #102a43;
|
||||
margin: 0;
|
||||
|
||||
/* تصویر */
|
||||
|
||||
.flight-detail-image{
|
||||
|
||||
width:42%;
|
||||
min-height:600px;
|
||||
|
||||
position:relative;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.flight-badge-show {
|
||||
background: #1976d2;
|
||||
color: white;
|
||||
padding: 8px 22px;
|
||||
border-radius: 50px;
|
||||
font-size: 14px;
|
||||
.flight-detail-image:after{
|
||||
|
||||
content:"";
|
||||
|
||||
position:absolute;
|
||||
|
||||
inset:0;
|
||||
|
||||
background:
|
||||
linear-gradient(
|
||||
180deg,
|
||||
transparent,
|
||||
rgba(0,0,0,.35)
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
|
||||
.route-box {
|
||||
margin: 35px 0;
|
||||
padding: 25px;
|
||||
border-radius: 20px;
|
||||
background: #f8fafc;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.flight-detail-image img{
|
||||
|
||||
|
||||
.route-box div {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.route-box small {
|
||||
display: block;
|
||||
color: #78909c;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
|
||||
.route-box strong {
|
||||
font-size: 22px;
|
||||
color: #102a43;
|
||||
}
|
||||
|
||||
|
||||
.route-line {
|
||||
font-size: 30px;
|
||||
color: #f4b400;
|
||||
}
|
||||
|
||||
|
||||
.flight-info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2,1fr);
|
||||
gap: 20px;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
|
||||
.flight-info-grid div {
|
||||
background: #f8fafc;
|
||||
padding: 18px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
|
||||
.flight-info-grid span {
|
||||
display:block;
|
||||
color:#78909c;
|
||||
font-size:13px;
|
||||
margin-bottom:8px;
|
||||
}
|
||||
|
||||
|
||||
.flight-info-grid b {
|
||||
font-size:18px;
|
||||
color:#102a43;
|
||||
}
|
||||
|
||||
|
||||
.buy-flight-btn {
|
||||
display:inline-block;
|
||||
width:100%;
|
||||
text-align:center;
|
||||
background:#1976d2;
|
||||
height:100%;
|
||||
|
||||
object-fit:cover;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* محتوا */
|
||||
|
||||
.flight-detail-content{
|
||||
|
||||
width:58%;
|
||||
|
||||
padding:55px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.flight-detail-content h1{
|
||||
|
||||
font-size:38px;
|
||||
|
||||
font-weight:900;
|
||||
|
||||
color:#102a43;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* badge */
|
||||
|
||||
.flight-badge-show{
|
||||
|
||||
background:
|
||||
linear-gradient(135deg,#1976d2,#42a5f5);
|
||||
|
||||
color:white;
|
||||
padding:15px;
|
||||
border-radius:15px;
|
||||
text-decoration:none;
|
||||
font-weight:700;
|
||||
|
||||
padding:10px 30px;
|
||||
|
||||
border-radius:50px;
|
||||
|
||||
font-weight:bold;
|
||||
|
||||
box-shadow:
|
||||
0 10px 25px rgba(25,118,210,.35);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* مسیر */
|
||||
|
||||
|
||||
.route-box{
|
||||
|
||||
|
||||
margin:40px 0;
|
||||
|
||||
padding:35px;
|
||||
|
||||
border-radius:25px;
|
||||
|
||||
background:#fff;
|
||||
|
||||
display:flex;
|
||||
|
||||
justify-content:space-around;
|
||||
|
||||
align-items:center;
|
||||
|
||||
|
||||
box-shadow:
|
||||
inset 0 0 20px rgba(0,0,0,.04);
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.route-box small{
|
||||
|
||||
color:#90a4ae;
|
||||
|
||||
font-size:14px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.route-box strong{
|
||||
|
||||
display:block;
|
||||
|
||||
margin-top:8px;
|
||||
|
||||
font-size:28px;
|
||||
|
||||
color:#102a43;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.route-line{
|
||||
|
||||
font-size:45px;
|
||||
|
||||
color:#f4b400;
|
||||
|
||||
animation:fly 2s infinite alternate;
|
||||
|
||||
}
|
||||
|
||||
|
||||
@keyframes fly{
|
||||
|
||||
from{
|
||||
transform:translateX(-10px);
|
||||
}
|
||||
|
||||
to{
|
||||
transform:translateX(10px);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* اطلاعات */
|
||||
|
||||
.flight-info-grid{
|
||||
|
||||
|
||||
display:grid;
|
||||
|
||||
grid-template-columns:repeat(2,1fr);
|
||||
|
||||
gap:20px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.flight-info-grid div{
|
||||
|
||||
background:#fff;
|
||||
|
||||
padding:22px;
|
||||
|
||||
border-radius:20px;
|
||||
|
||||
border:1px solid #edf2f7;
|
||||
|
||||
transition:.3s;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.buy-flight-btn:hover {
|
||||
background:#125ca8;
|
||||
color:white;
|
||||
.flight-info-grid div:hover{
|
||||
|
||||
transform:translateY(-5px);
|
||||
|
||||
box-shadow:
|
||||
0 15px 35px rgba(0,0,0,.08);
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media(max-width:768px){
|
||||
|
||||
.flight-info-grid span{
|
||||
|
||||
color:#78909c;
|
||||
|
||||
font-size:14px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.flight-info-grid b,
|
||||
.flight-info-grid strong{
|
||||
|
||||
display:block;
|
||||
|
||||
margin-top:10px;
|
||||
|
||||
color:#102a43;
|
||||
|
||||
font-size:20px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* فرم کامنت */
|
||||
|
||||
|
||||
.flight-comments{
|
||||
|
||||
|
||||
margin-top:45px;
|
||||
|
||||
background:#fff;
|
||||
|
||||
padding:35px;
|
||||
|
||||
border-radius:30px;
|
||||
|
||||
box-shadow:
|
||||
0 15px 40px rgba(0,0,0,.08);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.flight-comments h3{
|
||||
|
||||
font-weight:900;
|
||||
|
||||
color:#102a43;
|
||||
|
||||
margin-bottom:25px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.flight-comments textarea{
|
||||
|
||||
|
||||
border-radius:20px;
|
||||
|
||||
border:2px solid #edf2f7;
|
||||
|
||||
padding:20px;
|
||||
|
||||
resize:none;
|
||||
|
||||
transition:.3s;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.flight-comments textarea:focus{
|
||||
|
||||
border-color:#1976d2;
|
||||
|
||||
box-shadow:
|
||||
0 0 0 5px rgba(25,118,210,.12);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.flight-comments button{
|
||||
|
||||
|
||||
width:100%;
|
||||
|
||||
padding:16px;
|
||||
|
||||
border-radius:20px;
|
||||
|
||||
border:none;
|
||||
|
||||
font-weight:800;
|
||||
|
||||
font-size:18px;
|
||||
|
||||
|
||||
background:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
#1976d2,
|
||||
#42a5f5
|
||||
);
|
||||
|
||||
|
||||
box-shadow:
|
||||
0 15px 30px rgba(25,118,210,.35);
|
||||
|
||||
|
||||
transition:.3s;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.flight-comments button:hover{
|
||||
|
||||
transform:translateY(-4px);
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* موبایل */
|
||||
|
||||
@media(max-width:900px){
|
||||
|
||||
.flight-detail-card{
|
||||
|
||||
flex-direction:column;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.flight-detail-image,
|
||||
.flight-detail-content{
|
||||
|
||||
width:100%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.flight-detail-image{
|
||||
height:280px;
|
||||
|
||||
height:300px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.flight-detail-content{
|
||||
|
||||
padding:30px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.flight-info-grid{
|
||||
|
||||
grid-template-columns:1fr;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.route-box{
|
||||
|
||||
flex-direction:column;
|
||||
|
||||
gap:25px;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
</style>
|
||||
|
||||
<section class="flight-detail-page">
|
||||
<div class="container">
|
||||
@@ -221,6 +484,109 @@
|
||||
<b>{{ number_format($flight->price) }} تومان</b>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span>تعداد مشاهده</span>
|
||||
|
||||
<strong>
|
||||
{{ $flight->views ?? 0 }}
|
||||
بازدید
|
||||
</strong>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="flight-comments mt-5">
|
||||
|
||||
<h3>
|
||||
ثبت نظر درباره این پرواز
|
||||
</h3>
|
||||
|
||||
<form action="{{ route('users.comments.store') }}" method="POST">
|
||||
|
||||
@csrf
|
||||
|
||||
<input
|
||||
type="hidden"
|
||||
name="flight_id"
|
||||
value="{{ $flight->id }}"
|
||||
>
|
||||
|
||||
<div class="mb-3">
|
||||
|
||||
<label for="rating">
|
||||
امتیاز
|
||||
</label>
|
||||
|
||||
<select name="rating" id="rating" class="form-control">
|
||||
|
||||
<option value="5">★★★★★</option>
|
||||
<option value="4">★★★★</option>
|
||||
<option value="3">★★★</option>
|
||||
<option value="2">★★</option>
|
||||
<option value="1">★</option>
|
||||
|
||||
</select>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
|
||||
<label for="comment">
|
||||
نظر شما
|
||||
</label>
|
||||
|
||||
<textarea
|
||||
name="comment"
|
||||
id="comment"
|
||||
rows="5"
|
||||
class="form-control"
|
||||
placeholder="نظر خود را درباره این پرواز بنویسید..."
|
||||
></textarea>
|
||||
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary">
|
||||
ثبت نظر
|
||||
</button>
|
||||
|
||||
</form>
|
||||
<div class="comments-list mt-5">
|
||||
|
||||
<h3 class="mb-4">
|
||||
نظرات کاربران
|
||||
</h3>
|
||||
|
||||
@forelse($comments as $comment)
|
||||
|
||||
<div class="card p-4 mb-3 shadow-sm">
|
||||
|
||||
<div class="d-flex justify-content-between">
|
||||
|
||||
<strong>
|
||||
{{ $comment->user->name }}
|
||||
</strong>
|
||||
|
||||
<small>
|
||||
{{ $comment->created_at->diffForHumans() }}
|
||||
</small>
|
||||
|
||||
</div>
|
||||
|
||||
<p class="mt-3 mb-0">
|
||||
{{ $comment->comment }}
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
@empty
|
||||
|
||||
<div class="alert alert-secondary">
|
||||
هنوز نظری ثبت نشده است.
|
||||
</div>
|
||||
|
||||
@endforelse
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user