root/cleargame
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lots of progress

Browse Source
This commit is contained in:
root
2025-04-12 17:18:33 +03:00
parent 8d230e8e67
commit 3d4260d57e
44 changed files with 2590 additions and 2883 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/reviews/_form.blade.php
+206
View File
@@ -0,0 +1,206 @@
@csrf
<div class="mb-4">
<label for="content" class="form-label">Review</label>
<textarea name="content" id="content" rows="5"
class="form-control bg-dark text-white @error('content') is-invalid @enderror"
required>{{ old('content', $review->content ?? '') }}</textarea>
@error('content')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<div class="mb-4">
<label class="form-label">Rating</label>
<div class="rating-container">
<div class="rating-stars d-flex gap-1">
@for($i = 1; $i <= 10; $i++)
<div class="rating-item" data-rating="{{ $i }}">
<input type="radio" name="rating" id="rating{{ $i }}" value="{{ $i }}"
class="rating-input" {{ old('rating', $review->rating ?? '') == $i ? 'checked' : '' }}>
<label for="rating{{ $i }}" class="rating-star">
<i class="fas fa-star"></i>
</label>
<span class="rating-number">{{ $i }}</span>
</div>
@endfor
</div>
<div class="rating-value mt-2 text-muted">
<span class="current-rating">{{ old('rating', $review->rating ?? '0') }}</span>/10
</div>
</div>
@error('rating')
<div class="invalid-feedback d-block">{{ $message }}</div>
@enderror
</div>
<div class="mb-4">
<label class="form-label">Recommendation</label>
<div class="recommendation-buttons d-flex gap-3">
<input type="radio" name="recommended" id="recommended1" value="1" class="recommendation-input"
{{ old('recommended', $review->recommended ?? '') == 1 ? 'checked' : '' }}>
<label for="recommended1" class="recommendation-button btn btn-outline-success">
<i class="fas fa-thumbs-up me-2"></i> Recommended
</label>
<input type="radio" name="recommended" id="recommended0" value="0" class="recommendation-input"
{{ old('recommended', $review->recommended ?? '') == 0 ? 'checked' : '' }}>
<label for="recommended0" class="recommendation-button btn btn-outline-danger">
<i class="fas fa-thumbs-down me-2"></i> Not Recommended
</label>
</div>
@error('recommended')
<div class="invalid-feedback d-block">{{ $message }}</div>
@enderror
</div>
<button type="submit" class="btn btn-gradient">
<i class="fas fa-paper-plane me-2"></i> {{ isset($review) ? 'Update Review' : 'Post Review' }}
</button>
@push('styles')
<style>
.rating-container {
display: flex;
flex-direction: column;
align-items: center;
}
.rating-stars {
font-size: 1.5rem;
position: relative;
}
.rating-item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.rating-input {
display: none;
}
.rating-star {
color: #6c757d;
cursor: pointer;
transition: color 0.2s;
}
.rating-number {
position: absolute;
top: -20px;
font-size: 0.8rem;
color: #6c757d;
opacity: 0;
transition: opacity 0.2s;
}
.rating-item:hover .rating-number {
opacity: 1;
}
.rating-item:hover .rating-star,
.rating-item:hover ~ .rating-item .rating-star,
.rating-input:checked ~ .rating-item .rating-star {
color: #ffc107;
}
.rating-input:checked + .rating-star {
color: #ffc107;
}
.rating-value {
font-size: 1rem;
font-weight: 500;
}
.recommendation-input {
display: none;
}
.recommendation-button {
flex: 1;
text-align: center;
transition: all 0.2s;
}
.recommendation-button:hover {
transform: scale(1.05);
}
.recommendation-input:checked + .recommendation-button {
background-color: var(--bs-btn-bg);
color: var(--bs-btn-color);
}
#recommended1:checked + .recommendation-button {
background-color: var(--bs-success);
border-color: var(--bs-success);
}
#recommended0:checked + .recommendation-button {
background-color: var(--bs-danger);
border-color: var(--bs-danger);
}
</style>
@endpush
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
const ratingContainer = document.querySelector('.rating-stars');
const currentRating = document.querySelector('.current-rating');
const ratingInputs = document.querySelectorAll('.rating-input');
ratingContainer.addEventListener('mouseover', function(e) {
const ratingItem = e.target.closest('.rating-item');
if (!ratingItem) return;
const rating = ratingItem.dataset.rating;
currentRating.textContent = rating;
// Highlight stars up to the hovered rating
const stars = document.querySelectorAll('.rating-star');
stars.forEach((star, index) => {
if (index < rating) {
star.style.color = '#ffc107';
} else {
star.style.color = '#6c757d';
}
});
});
ratingContainer.addEventListener('mouseout', function() {
const checkedInput = document.querySelector('.rating-input:checked');
if (checkedInput) {
currentRating.textContent = checkedInput.value;
// Restore the checked state colors
const stars = document.querySelectorAll('.rating-star');
stars.forEach((star, index) => {
if (index < checkedInput.value) {
star.style.color = '#ffc107';
} else {
star.style.color = '#6c757d';
}
});
} else {
currentRating.textContent = '0';
// Reset all stars to default color
const stars = document.querySelectorAll('.rating-star');
stars.forEach(star => {
star.style.color = '#6c757d';
});
}
});
// Update current rating when a star is clicked
ratingInputs.forEach(input => {
input.addEventListener('change', function() {
currentRating.textContent = this.value;
});
});
});
</script>
@endpush