truncgit/citrus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement dark mode support for the project hero and progress section

Browse Source
This commit is contained in:
Ümit Tunç
2026-08-07 14:32:45 +03:00
parent bba1393db5
commit 76dd1395d5
1 changed files with 17 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/projects/show.blade.php
+17 -17
View File
@@ -332,37 +332,37 @@
@endif @endif
<!-- Hero Section & Progress Banner --> <!-- Hero Section & Progress Banner -->
<div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-slate-900 via-slate-800 to-orange-950 text-white p-6 sm:p-10 shadow-2xl border border-slate-800"> <div class="relative overflow-hidden rounded-3xl bg-white dark:bg-slate-900 text-slate-900 dark:text-white p-6 sm:p-10 shadow-xl border border-slate-200 dark:border-slate-800">
<div class="absolute -top-24 -right-24 w-96 h-96 bg-orange-600/20 rounded-full blur-3xl pointer-events-none"></div> <div class="absolute -top-24 -right-24 w-96 h-96 bg-orange-500/10 dark:bg-orange-600/20 rounded-full blur-3xl pointer-events-none"></div>
<div class="relative z-10 grid grid-cols-1 lg:grid-cols-12 gap-8 items-center"> <div class="relative z-10 grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
<!-- Left: Title & Info --> <!-- Left: Title & Info -->
<div class="lg:col-span-8 space-y-4"> <div class="lg:col-span-8 space-y-4">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-orange-500/20 border border-orange-500/30 text-orange-300 text-xs font-bold uppercase tracking-wider"> <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-orange-500/10 dark:bg-orange-500/20 border border-orange-500/20 dark:border-orange-500/30 text-orange-600 dark:text-orange-300 text-xs font-bold uppercase tracking-wider">
<span class="w-2 h-2 rounded-full bg-orange-400 animate-ping"></span> <span class="w-2 h-2 rounded-full bg-orange-500 animate-ping"></span>
<span>CANLI PROJE YÖNETİM & TAKİP EKRANI</span> <span>CANLI PROJE YÖNETİM & TAKİP EKRANI</span>
</div> </div>
<h1 class="text-2xl sm:text-4xl font-extrabold font-display leading-tight text-white"> <h1 class="text-2xl sm:text-4xl font-extrabold font-display leading-tight text-slate-900 dark:text-white">
{{ $project->title }} {{ $project->title }}
</h1> </h1>
<p class="text-sm sm:text-base text-slate-300 font-medium"> <p class="text-sm sm:text-base text-slate-600 dark:text-slate-300 font-medium">
Bu ekran, <strong>{{ $project->client_name }}</strong> projesine ait iş takvimini, modül durumlarını ve canlı Kanban panosunu izleyebileceğiniz portal ekranıdır. Bu ekran, <strong>{{ $project->client_name }}</strong> projesine ait iş takvimini, modül durumlarını ve canlı Kanban panosunu izleyebileceğiniz portal ekranıdır.
</p> </p>
<!-- Meta Tags --> <!-- Meta Tags -->
<div class="flex flex-wrap items-center gap-4 text-xs font-semibold pt-2 text-slate-300"> <div class="flex flex-wrap items-center gap-4 text-xs font-semibold pt-2 text-slate-600 dark:text-slate-300">
@if($project->start_date) @if($project->start_date)
<div class="flex items-center gap-1.5 bg-slate-800/80 px-3 py-1.5 rounded-xl border border-slate-700"> <div class="flex items-center gap-1.5 bg-slate-100 dark:bg-slate-800/80 px-3.5 py-2 rounded-xl border border-slate-200 dark:border-slate-700">
<i data-lucide="calendar" class="w-3.5 h-3.5 text-orange-400"></i> <i data-lucide="calendar" class="w-3.5 h-3.5 text-orange-600 dark:text-orange-400"></i>
<span>Başlangıç: {{ $project->start_date->format('d.m.Y') }}</span> <span>Başlangıç: {{ $project->start_date->format('d.m.Y') }}</span>
</div> </div>
@endif @endif
@if($project->target_date) @if($project->target_date)
<div class="flex items-center gap-1.5 bg-slate-800/80 px-3 py-1.5 rounded-xl border border-slate-700"> <div class="flex items-center gap-1.5 bg-slate-100 dark:bg-slate-800/80 px-3.5 py-2 rounded-xl border border-slate-200 dark:border-slate-700">
<i data-lucide="flag" class="w-3.5 h-3.5 text-rose-400"></i> <i data-lucide="flag" class="w-3.5 h-3.5 text-rose-600 dark:text-rose-400"></i>
<span>Hedef Bitiş: {{ $project->target_date->format('d.m.Y') }}</span> <span>Hedef Bitiş: {{ $project->target_date->format('d.m.Y') }}</span>
</div> </div>
@endif @endif
@@ -370,18 +370,18 @@
</div> </div>
<!-- Right: Progress Meter --> <!-- Right: Progress Meter -->
<div class="lg:col-span-4 flex flex-col items-center justify-center p-6 bg-slate-800/60 backdrop-blur-md rounded-2xl border border-slate-700/60 shadow-inner"> <div class="lg:col-span-4 flex flex-col items-center justify-center p-6 bg-slate-50 dark:bg-slate-800/60 backdrop-blur-md rounded-2xl border border-slate-200 dark:border-slate-700/60 shadow-sm">
<span class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-2">GENEL PROJE İLERLEMESİ</span> <span class="text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest mb-2">GENEL PROJE İLERLEMESİ</span>
<div id="progress-percent-val" class="text-5xl font-extrabold font-display text-transparent bg-clip-text bg-gradient-to-r from-orange-400 to-rose-400 mb-3"> <div id="progress-percent-val" class="text-5xl font-extrabold font-display text-orange-600 dark:text-transparent dark:bg-clip-text dark:bg-gradient-to-r dark:from-orange-400 dark:to-rose-400 mb-3">
%{{ $project->progress_percent }} %{{ $project->progress_percent }}
</div> </div>
<div class="w-full bg-slate-700 h-3 rounded-full overflow-hidden mb-3"> <div class="w-full bg-slate-200 dark:bg-slate-700 h-3 rounded-full overflow-hidden mb-3">
<div id="progress-bar-fill" class="bg-gradient-to-r from-orange-500 to-rose-500 h-full rounded-full transition-all duration-700 shadow-lg shadow-orange-500/50" style="width: {{ $project->progress_percent }}%"></div> <div id="progress-bar-fill" class="bg-gradient-to-r from-orange-500 to-rose-500 h-full rounded-full transition-all duration-700 shadow-md shadow-orange-500/40" style="width: {{ $project->progress_percent }}%"></div>
</div> </div>
<span id="progress-status-text" class="text-xs text-slate-300 font-medium text-center"> <span id="progress-status-text" class="text-xs text-slate-700 dark:text-slate-300 font-semibold text-center">
@if($project->progress_percent >= 100) @if($project->progress_percent >= 100)
🎉 Proje %100 Başarıyla Tamamlandı! 🎉 Proje %100 Başarıyla Tamamlandı!
@elseif($project->progress_percent >= 50) @elseif($project->progress_percent >= 50)