248 lines
7.9 KiB
PHP
248 lines
7.9 KiB
PHP
@extends('siswa.layouts.app')
|
|
|
|
@section('title', 'Challenge')
|
|
|
|
@push('styles')
|
|
<style>
|
|
.page-title {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
color: #1e293b;
|
|
margin-bottom: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.page-title img { width: 32px; height: 32px; object-fit: contain; }
|
|
.page-subtitle { font-size: 14px; color: #64748b; margin-bottom: 24px; }
|
|
|
|
.challenge-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
|
|
/* Hapus ::before emoji — diganti dengan badge gambar */
|
|
.challenge-card {
|
|
background: white;
|
|
border-radius: 20px;
|
|
border: 2px solid #e5e5e5;
|
|
padding: 22px;
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.challenge-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
|
|
.challenge-card.sudah { border-color: #a5e6ba; background: linear-gradient(135deg, #f0fdf4, #fff); }
|
|
.challenge-card.lewat { border-color: #fecaca; background: #fffafa; opacity: 0.85; }
|
|
|
|
/* Watermark pojok kanan atas via img absolut */
|
|
.card-watermark {
|
|
position: absolute;
|
|
top: 14px; right: 14px;
|
|
width: 36px; height: 36px;
|
|
object-fit: contain;
|
|
opacity: 0.12;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.card-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
padding: 3px 10px;
|
|
border-radius: 99px;
|
|
margin-bottom: 12px;
|
|
}
|
|
.card-badge img { width: 13px; height: 13px; object-fit: contain; }
|
|
|
|
.badge-aktif { background: #dcfce7; color: #16a34a; }
|
|
.badge-sudah { background: #e0f2fe; color: #0369a1; }
|
|
.badge-lewat { background: #fee2e2; color: #dc2626; }
|
|
|
|
.card-title { font-size: 16px; font-weight: 700; color: #1e293b; margin-bottom: 8px; line-height: 1.4; }
|
|
.card-desc { font-size: 13px; color: #64748b; margin-bottom: 14px; line-height: 1.6; }
|
|
|
|
.card-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
|
|
|
|
.meta-item {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
background: #f8fafc;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 99px;
|
|
padding: 4px 10px;
|
|
font-size: 12px;
|
|
color: #475569;
|
|
font-weight: 500;
|
|
}
|
|
.meta-item img { width: 14px; height: 14px; object-fit: contain; }
|
|
.meta-item.exp { background: #fef9c3; color: #b45309; border-color: #fde68a; }
|
|
|
|
.btn-kerjakan {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 7px;
|
|
background: linear-gradient(135deg, #667eea, #764ba2);
|
|
color: white;
|
|
border-radius: 12px;
|
|
padding: 10px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
transition: opacity 0.2s;
|
|
}
|
|
.btn-kerjakan img { width: 16px; height: 16px; object-fit: contain; }
|
|
.btn-kerjakan:hover { opacity: 0.9; color: white; }
|
|
|
|
.btn-lihat-hasil {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 7px;
|
|
background: #e0f2fe;
|
|
color: #0369a1;
|
|
border-radius: 12px;
|
|
padding: 10px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
}
|
|
.btn-lihat-hasil img { width: 16px; height: 16px; object-fit: contain; }
|
|
.btn-lihat-hasil:hover { background: #bae6fd; color: #0369a1; }
|
|
|
|
.btn-disabled {
|
|
display: block;
|
|
text-align: center;
|
|
background: #f1f5f9;
|
|
color: #94a3b8;
|
|
border-radius: 12px;
|
|
padding: 10px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.empty-state { text-align: center; padding: 60px 20px; color: #94a3b8; }
|
|
.empty-state img { width: 56px; height: 56px; object-fit: contain; margin-bottom: 16px; }
|
|
|
|
.alert-error {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: #fee2e2;
|
|
color: #991b1b;
|
|
border-radius: 12px;
|
|
padding: 12px 16px;
|
|
margin-bottom: 20px;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
}
|
|
.alert-error img { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }
|
|
</style>
|
|
@endpush
|
|
|
|
@section('content')
|
|
|
|
<h3 class="page-title">
|
|
<img src="{{ asset('images/icon/siswac/piala.png') }}" alt="Ikon piala">
|
|
Challenge
|
|
</h3>
|
|
<p class="page-subtitle">Kerjakan challenge untuk mendapatkan EXP dan naik peringkat di leaderboard!</p>
|
|
|
|
@if(session('error'))
|
|
<div class="alert-error">
|
|
<img src="{{ asset('images/icon/siswac/x.png') }}" alt="Error">
|
|
{{ session('error') }}
|
|
</div>
|
|
@endif
|
|
|
|
@if($challenges->isEmpty())
|
|
<div class="empty-state">
|
|
<img src="{{ asset('images/icon/siswac/target.png') }}" alt="Belum ada challenge">
|
|
<p style="font-size:16px;font-weight:600;color:#475569">Belum ada challenge untuk kelasmu.</p>
|
|
<p style="font-size:13px">Tunggu admin membuat challenge baru!</p>
|
|
</div>
|
|
@else
|
|
<div class="challenge-grid">
|
|
@foreach($challenges as $ch)
|
|
@php
|
|
$isLewat = \Carbon\Carbon::parse($ch->tenggat_waktu)->isPast();
|
|
$isSudah = in_array($ch->id_challenge, $sudahDikerjakan);
|
|
$cardClass = $isSudah ? 'sudah' : ($isLewat ? 'lewat' : '');
|
|
|
|
// Watermark pojok kanan atas sesuai status
|
|
if ($isSudah) {
|
|
$watermarkSrc = asset('images/icon/siswac/v.png');
|
|
$watermarkAlt = 'Sudah dikerjakan';
|
|
} elseif ($isLewat) {
|
|
$watermarkSrc = asset('images/icon/siswac/alarm.png');
|
|
$watermarkAlt = 'Tenggat lewat';
|
|
} else {
|
|
$watermarkSrc = asset('images/icon/siswac/piala.png');
|
|
$watermarkAlt = 'Challenge aktif';
|
|
}
|
|
@endphp
|
|
<div class="challenge-card {{ $cardClass }}">
|
|
|
|
{{-- Watermark pengganti ::before emoji --}}
|
|
<img class="card-watermark" src="{{ $watermarkSrc }}" alt="{{ $watermarkAlt }}">
|
|
|
|
@if($isSudah)
|
|
<span class="card-badge badge-sudah">
|
|
<img src="{{ asset('images/icon/siswac/v.png') }}" alt="Centang"> Sudah Dikerjakan
|
|
</span>
|
|
@elseif($isLewat)
|
|
<span class="card-badge badge-lewat">
|
|
<img src="{{ asset('images/icon/siswac/alarm.png') }}" alt="Alarm"> Tenggat Lewat
|
|
</span>
|
|
@else
|
|
<span class="card-badge badge-aktif">
|
|
<img src="{{ asset('images/icon/siswac/api.png') }}" alt="Api aktif"> Aktif
|
|
</span>
|
|
@endif
|
|
|
|
<div class="card-title">{{ $ch->judul_challenge }}</div>
|
|
@if($ch->deskripsi)
|
|
<div class="card-desc">{{ Str::limit($ch->deskripsi, 80) }}</div>
|
|
@endif
|
|
|
|
<div class="card-meta">
|
|
<span class="meta-item">
|
|
<img src="{{ asset('images/icon/siswac/buku1.png') }}" alt="Jumlah soal">
|
|
{{ $ch->soal_count }} soal
|
|
</span>
|
|
<span class="meta-item exp">
|
|
<img src="{{ asset('images/icon/siswac/star.png') }}" alt="EXP">
|
|
{{ $ch->exp }} EXP
|
|
</span>
|
|
<span class="meta-item">
|
|
<img src="{{ asset('images/icon/siswac/alarm.png') }}" alt="Tenggat waktu">
|
|
{{ \Carbon\Carbon::parse($ch->tenggat_waktu)->format('d M Y, H:i') }}
|
|
</span>
|
|
</div>
|
|
|
|
@if($isSudah)
|
|
<a href="{{ route('siswa.challenge.hasil', $ch->id_challenge) }}" class="btn-lihat-hasil">
|
|
<img src="{{ asset('images/icon/siswac/lb.png') }}" alt="Lihat hasil">
|
|
Lihat Hasil
|
|
</a>
|
|
@elseif($isLewat)
|
|
<span class="btn-disabled">Tenggat sudah lewat</span>
|
|
@else
|
|
<a href="{{ route('siswa.challenge.kerjakan', $ch->id_challenge) }}" class="btn-kerjakan">
|
|
<img src="{{ asset('images/icon/siswac/rocket.png') }}" alt="Kerjakan">
|
|
Kerjakan Sekarang
|
|
</a>
|
|
@endif
|
|
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
|
|
@endsection |