327 lines
11 KiB
PHP
327 lines
11 KiB
PHP
@if (isset($activeIncentive) && $activeIncentive)
|
|
<div class="d-flex col-xl-12 align-items-stretch">
|
|
<div class="w-100 mb-4 inc-dash-widget">
|
|
|
|
{{-- Hero-Bild mit Overlay --}}
|
|
@if ($activeIncentive->image)
|
|
<div class="inc-dash-hero">
|
|
<img src="{{ asset('img/incentive/' . $activeIncentive->image) }}" alt="{{ $activeIncentive->name }}">
|
|
<div class="inc-dash-hero-overlay"></div>
|
|
<div class="inc-dash-hero-content">
|
|
<span class="inc-dash-badge">
|
|
<i class="ion ion-md-trophy mr-1"></i> Incentive VIP
|
|
</span>
|
|
<h4 class="inc-dash-title">
|
|
{{ $activeIncentive->getLang('name') ?: $activeIncentive->name }}
|
|
</h4>
|
|
@if ($activeIncentive->getLang('subtitle'))
|
|
<p class="inc-dash-subtitle">{{ $activeIncentive->getLang('subtitle') }}</p>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@else
|
|
<div class="inc-dash-header-plain">
|
|
<span class="inc-dash-badge">
|
|
<i class="ion ion-md-trophy mr-1"></i> Incentive VIP
|
|
</span>
|
|
<h4 class="font-weight-bold mb-1">
|
|
{{ $activeIncentive->getLang('name') ?: $activeIncentive->name }}
|
|
</h4>
|
|
@if ($activeIncentive->getLang('subtitle'))
|
|
<p class="text-muted mb-0">{{ $activeIncentive->getLang('subtitle') }}</p>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Inhaltsbereich --}}
|
|
<div class="inc-dash-body">
|
|
|
|
{{-- Status-Leiste (nur fuer Teilnehmer) --}}
|
|
@if ($incentiveParticipant)
|
|
<div class="inc-dash-stats">
|
|
@if ($incentiveParticipant->rank)
|
|
<div class="inc-dash-stat">
|
|
<span class="inc-dash-stat-value">{{ $incentiveParticipant->rank }}</span>
|
|
<span class="inc-dash-stat-label">{{ __('incentive.your_rank') }}</span>
|
|
</div>
|
|
@endif
|
|
<div class="inc-dash-stat">
|
|
<span
|
|
class="inc-dash-stat-value">{{ number_format($incentiveParticipant->total_points, 0, ',', '.') }}</span>
|
|
<span class="inc-dash-stat-label">{{ __('incentive.points_short') }}</span>
|
|
</div>
|
|
<div class="inc-dash-stat">
|
|
@if ($incentiveParticipant->is_qualified)
|
|
<span class="inc-dash-qual-yes">{{ __('incentive.qualified') }}</span>
|
|
@else
|
|
<span class="inc-dash-qual-no">{{ __('incentive.open') }}</span>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Bilder-Leiste --}}
|
|
@php
|
|
$dashGallery = [];
|
|
$galleryDir = public_path('img/incentive');
|
|
if (is_dir($galleryDir)) {
|
|
$galleryFiles = glob($galleryDir . '/*.{jpg,jpeg,png,webp}', GLOB_BRACE) ?: [];
|
|
$heroImg = $activeIncentive->image;
|
|
foreach ($galleryFiles as $gf) {
|
|
$bn = basename($gf);
|
|
if ($bn !== $heroImg) {
|
|
$dashGallery[] = 'img/incentive/' . $bn;
|
|
}
|
|
}
|
|
sort($dashGallery);
|
|
$dashGallery = array_slice($dashGallery, 0, 4);
|
|
}
|
|
@endphp
|
|
@if (count($dashGallery) > 0)
|
|
<div class="inc-dash-gallery">
|
|
@foreach ($dashGallery as $gi)
|
|
<div class="inc-dash-gallery-thumb">
|
|
<img src="{{ asset($gi) }}" alt="Impression" loading="lazy">
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Buttons --}}
|
|
<div class="inc-dash-actions">
|
|
<a href="{{ route('user_incentive_teaser', [$activeIncentive->slug]) }}"
|
|
class="btn inc-dash-btn-primary">
|
|
<i class="ion ion-md-trophy mr-1"></i>
|
|
{{ __('incentive.dashboard_btn_teaser') }}
|
|
</a>
|
|
<a href="{{ route('user_incentive_show', [$activeIncentive->slug]) }}"
|
|
class="btn inc-dash-btn-secondary">
|
|
<i class="ion ion-md-list mr-1"></i>
|
|
{{ __('incentive.dashboard_btn_ranking') }}
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.inc-dash-widget {
|
|
border-radius: .75rem;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
|
|
background: #fff;
|
|
}
|
|
|
|
.inc-dash-hero {
|
|
position: relative;
|
|
height: 180px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.inc-dash-hero img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
.inc-dash-hero-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(to bottom,
|
|
rgba(0, 0, 0, 0.05) 0%,
|
|
rgba(0, 0, 0, 0.20) 40%,
|
|
rgba(0, 0, 0, 0.70) 100%);
|
|
}
|
|
|
|
.inc-dash-hero-content {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
padding: 1.5rem 2rem;
|
|
z-index: 2;
|
|
}
|
|
|
|
.inc-dash-badge {
|
|
display: inline-block;
|
|
background: rgba(215, 215, 0, 0.92);
|
|
color: #333;
|
|
font-weight: 700;
|
|
padding: .25rem .8rem;
|
|
border-radius: 50px;
|
|
font-size: .75rem;
|
|
letter-spacing: .04em;
|
|
text-transform: uppercase;
|
|
margin-bottom: .6rem;
|
|
}
|
|
|
|
.inc-dash-title {
|
|
color: #fff;
|
|
font-weight: 800;
|
|
font-size: 1.6rem;
|
|
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
|
|
margin: 0 0 .25rem 0;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.inc-dash-subtitle {
|
|
color: rgba(255, 255, 255, 0.88);
|
|
font-size: .95rem;
|
|
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
|
|
margin: 0;
|
|
}
|
|
|
|
.inc-dash-header-plain {
|
|
background: linear-gradient(135deg, #6b7758 0%, #4a5340 100%);
|
|
color: #fff;
|
|
padding: 1.5rem 2rem;
|
|
}
|
|
|
|
.inc-dash-header-plain h4 {
|
|
color: #fff;
|
|
}
|
|
|
|
.inc-dash-body {
|
|
padding: 1.2rem 1.5rem 1.5rem;
|
|
}
|
|
|
|
.inc-dash-stats {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.5rem;
|
|
padding: .8rem 1rem;
|
|
margin-bottom: 1rem;
|
|
background: #f4f5f0;
|
|
border-radius: .5rem;
|
|
}
|
|
|
|
.inc-dash-stat {
|
|
text-align: center;
|
|
}
|
|
|
|
.inc-dash-stat-value {
|
|
display: block;
|
|
font-size: 1.4rem;
|
|
font-weight: 800;
|
|
color: #6b7758;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.inc-dash-stat-label {
|
|
font-size: .7rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: .04em;
|
|
color: #888;
|
|
}
|
|
|
|
.inc-dash-qual-yes {
|
|
display: inline-block;
|
|
background: linear-gradient(135deg, #b8b800, #d7d700);
|
|
color: #333;
|
|
font-weight: 700;
|
|
padding: .3rem .8rem;
|
|
border-radius: 50px;
|
|
font-size: .78rem;
|
|
}
|
|
|
|
.inc-dash-qual-no {
|
|
display: inline-block;
|
|
background: #e8e8e8;
|
|
color: #777;
|
|
font-weight: 600;
|
|
padding: .3rem .8rem;
|
|
border-radius: 50px;
|
|
font-size: .78rem;
|
|
}
|
|
|
|
.inc-dash-gallery {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: .4rem;
|
|
margin-bottom: 1rem;
|
|
border-radius: .5rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.inc-dash-gallery-thumb {
|
|
aspect-ratio: 16/10;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.inc-dash-gallery-thumb img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
transition: transform .3s ease;
|
|
}
|
|
|
|
.inc-dash-gallery-thumb:hover img {
|
|
transform: scale(1.06);
|
|
}
|
|
|
|
.inc-dash-actions {
|
|
display: flex;
|
|
gap: .6rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.inc-dash-btn-primary {
|
|
background: linear-gradient(135deg, #6b7758, #4a5340);
|
|
color: #fff !important;
|
|
border: none;
|
|
border-radius: 50px;
|
|
padding: .55rem 1.8rem;
|
|
font-weight: 700;
|
|
font-size: .9rem;
|
|
transition: transform .2s, box-shadow .2s;
|
|
}
|
|
|
|
.inc-dash-btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 14px rgba(107, 119, 88, 0.35);
|
|
color: #fff !important;
|
|
}
|
|
|
|
.inc-dash-btn-secondary {
|
|
background: transparent;
|
|
color: #6b7758 !important;
|
|
border: 2px solid #6b7758;
|
|
border-radius: 50px;
|
|
padding: .55rem 1.8rem;
|
|
font-weight: 600;
|
|
font-size: .9rem;
|
|
transition: background .2s, color .2s;
|
|
}
|
|
|
|
.inc-dash-btn-secondary:hover {
|
|
background: #6b7758;
|
|
color: #fff !important;
|
|
}
|
|
|
|
@media (max-width: 575px) {
|
|
.inc-dash-hero {
|
|
height: 200px;
|
|
}
|
|
|
|
.inc-dash-hero-content {
|
|
padding: 1rem 1.2rem;
|
|
}
|
|
|
|
.inc-dash-title {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.inc-dash-gallery {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.inc-dash-stats {
|
|
gap: .8rem;
|
|
}
|
|
}
|
|
</style>
|
|
@endif
|