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

refactor: redesign intern journal timeline component with modernized animations and styles

Browse Source
This commit is contained in:
Ümit Tunç
2026-06-06 01:36:11 +03:00
parent b776ebbd26
commit aa4a4b3e27
2 changed files with 233 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/filament/components/intern-journal-timeline.blade.php
+115 -44
View File
@@ -123,86 +123,157 @@
this.activeDayIndex = index; this.activeDayIndex = index;
} }
}" }"
class="mt-4" style="margin-top: 1rem; font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;"
> >
<style>
.jt-day-btn {
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}
.jt-day-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}
.jt-arrow-btn {
transition: all 0.2s ease;
}
.jt-arrow-btn:hover:not(:disabled) {
transform: scale(1.08);
background: #eff6ff !important;
border-color: #93c5fd !important;
}
.jt-arrow-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.jt-event-card {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.jt-event-card:hover {
transform: translateY(-2px) translateX(3px);
box-shadow: 0 12px 24px -8px rgba(59, 130, 246, 0.12);
border-color: #bfdbfe !important;
background: #ffffff !important;
}
.jt-timeline-dot {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.jt-event-row:hover .jt-timeline-dot {
transform: scale(1.2);
background-color: #3b82f6 !important;
box-shadow: 0 0 0 5px rgba(59, 130, 246, 0.18);
}
.jt-event-row:hover .jt-timeline-dot-inner {
background-color: #ffffff !important;
}
.jt-sha-link {
transition: all 0.25s ease;
}
.jt-sha-link:hover {
background: #3b82f6 !important;
color: #ffffff !important;
border-color: #3b82f6 !important;
}
.jt-paginator-scroll::-webkit-scrollbar {
height: 4px;
}
.jt-paginator-scroll::-webkit-scrollbar-track {
background: transparent;
}
.jt-paginator-scroll::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 9999px;
}
.jt-paginator-scroll {
scrollbar-width: thin;
scrollbar-color: #cbd5e1 transparent;
}
@keyframes jt-spin {
to { transform: rotate(360deg); }
}
@keyframes jt-fadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.jt-fade-in {
animation: jt-fadeIn 0.4s ease-out;
}
</style>
{{-- Loader --}} {{-- Loader --}}
<div x-show="loading" x-cloak class="py-8 flex flex-col items-center justify-center"> <div x-show="loading" x-cloak style="padding: 3rem 0; display: flex; flex-direction: column; align-items: center; justify-content: center;">
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600 mb-2"></div> <div style="width: 2.5rem; height: 2.5rem; border: 2px solid #e2e8f0; border-top-color: #3b82f6; border-radius: 50%; animation: jt-spin 0.8s linear infinite; margin-bottom: 0.75rem;"></div>
<span class="text-xs text-gray-500 font-semibold">GitHub'dan commitler yükleniyor...</span> <span style="font-size: 0.75rem; color: #94a3b8; font-weight: 600; letter-spacing: 0.025em;">Commit geçmişi yükleniyor...</span>
</div> </div>
{{-- Error --}} {{-- Error --}}
<div x-show="errorMsg" x-cloak class="p-4 rounded-xl bg-danger-50 border border-danger-200 text-danger-600 text-xs font-semibold" x-text="errorMsg"></div> <div x-show="errorMsg" x-cloak x-text="errorMsg" style="padding: 1rem 1.25rem; border-radius: 1rem; background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; font-size: 0.75rem; font-weight: 700;"></div>
{{-- Empty --}} {{-- Empty --}}
<div x-show="isEmpty && !loading" x-cloak class="p-6 rounded-2xl border border-gray-200 text-center text-gray-400 italic text-sm"> <div x-show="isEmpty && !loading" x-cloak style="padding: 2rem; border-radius: 1.5rem; border: 1px solid #f1f5f9; background: #ffffff; text-align: center; color: #94a3b8; font-style: italic; font-size: 0.875rem;">
Henüz hiç commit bulunamadı veya stajyerin deposu tanımlanmadı. Henüz hiçbir commit verisi bulunamadı veya depo adresi yapılandırılmadı.
</div> </div>
{{-- Day Paginator --}} {{-- Day Paginator --}}
<div x-show="commitDays.length > 0" x-cloak class="flex items-center justify-between gap-4 p-3 bg-gray-50 border border-gray-100 rounded-2xl mb-6 select-none"> <div x-show="commitDays.length > 0" x-cloak style="display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem; background: rgba(255,255,255,0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid #e2e8f0; border-radius: 1.5rem; margin-bottom: 1.75rem; user-select: none; box-shadow: 0 1px 3px rgba(0,0,0,0.04);">
<button type="button" @click="navigateDay(-1)" :disabled="activeDayIndex === 0" :class="{ 'opacity-40 cursor-not-allowed': activeDayIndex === 0 }" class="w-10 h-10 rounded-xl bg-white hover:bg-gray-100 text-gray-600 border border-gray-200 flex items-center justify-center transition-all shadow-sm"> <button type="button" @click="navigateDay(-1)" :disabled="activeDayIndex === 0" class="jt-arrow-btn" style="width: 2.75rem; height: 2.75rem; border-radius: 0.875rem; background: #ffffff; color: #64748b; border: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; box-shadow: 0 1px 2px rgba(0,0,0,0.04);">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-5 h-5"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
</svg>
</button> </button>
<div class="flex-grow overflow-x-auto py-1" style="-ms-overflow-style: none; scrollbar-width: none;"> <div class="jt-paginator-scroll" style="flex: 1; overflow-x: auto; padding: 0.375rem 0;">
<div class="flex gap-2 justify-start sm:justify-center min-w-max px-2"> <div style="display: flex; gap: 0.625rem; justify-content: center; min-width: max-content; padding: 0 0.5rem;">
<template x-for="(day, index) in commitDays" :key="day.date"> <template x-for="(day, index) in commitDays" :key="day.date">
<button type="button" @click="selectDay(index)" :class="index === activeDayIndex ? 'text-primary-700 bg-primary-50 border-primary-200 font-extrabold shadow-sm' : 'bg-white hover:bg-gray-50 text-gray-600 border-gray-200 font-semibold hover:text-primary-600'" class="px-5 py-2 rounded-xl transition-all flex flex-col items-center justify-center border"> <button type="button" @click="selectDay(index)" class="jt-day-btn" :style="index === activeDayIndex
<span class="text-xs" x-text="day.dayNum + '. Gün'"></span> ? 'padding: 0.5rem 1.25rem; border-radius: 0.875rem; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1.5px solid #93c5fd; background: linear-gradient(135deg, #eff6ff, #dbeafe); color: #1d4ed8; font-weight: 800; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);'
<span class="text-[9px] mt-0.5 opacity-70 font-medium" x-text="day.formattedDate"></span> : 'padding: 0.5rem 1.25rem; border-radius: 0.875rem; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #e2e8f0; background: #ffffff; color: #64748b; font-weight: 600;'">
<span style="font-size: 0.75rem; line-height: 1.2;" x-text="day.dayNum + '. Gün'"></span>
<span style="font-size: 0.6rem; margin-top: 0.125rem; opacity: 0.7; font-weight: 500;" x-text="day.formattedDate"></span>
</button> </button>
</template> </template>
</div> </div>
</div> </div>
<button type="button" @click="navigateDay(1)" :disabled="activeDayIndex === commitDays.length - 1" :class="{ 'opacity-40 cursor-not-allowed': activeDayIndex === commitDays.length - 1 }" class="w-10 h-10 rounded-xl bg-white hover:bg-gray-100 text-gray-600 border border-gray-200 flex items-center justify-center transition-all shadow-sm"> <button type="button" @click="navigateDay(1)" :disabled="activeDayIndex === commitDays.length - 1" class="jt-arrow-btn" style="width: 2.75rem; height: 2.75rem; border-radius: 0.875rem; background: #ffffff; color: #64748b; border: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; box-shadow: 0 1px 2px rgba(0,0,0,0.04);">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-5 h-5"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</button> </button>
</div> </div>
{{-- Active Day Card --}} {{-- Active Day Card --}}
<div x-show="activeDay" x-cloak class="bg-white dark:bg-gray-950 border border-gray-100 dark:border-gray-800 rounded-2xl p-6 shadow-sm"> <div x-show="activeDay" x-cloak class="jt-fade-in" :key="activeDayIndex" style="background: #ffffff; border: 1px solid #f1f5f9; border-radius: 1.5rem; padding: 1.75rem 2rem; box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.06);">
{{-- Day Header --}} {{-- Day Header --}}
<div class="flex items-center justify-between mb-8 pb-4 border-b border-gray-100 dark:border-gray-800"> <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.75rem; padding-bottom: 1.25rem; border-bottom: 1px solid #f1f5f9;">
<div class="flex items-center gap-3"> <div style="display: flex; align-items: center; gap: 0.875rem;">
<span class="text-base font-extrabold text-primary-600 bg-primary-50 dark:bg-primary-950/20 px-4 py-1.5 rounded-full" x-text="activeDay ? activeDay.dayNum + '. Gün' : ''"></span> <span style="font-size: 0.875rem; font-weight: 800; color: #2563eb; background: linear-gradient(135deg, #eff6ff, #dbeafe); padding: 0.5rem 1.125rem; border-radius: 1rem; box-shadow: 0 1px 3px rgba(37, 99, 235, 0.1);" x-text="activeDay ? activeDay.dayNum + '. Gün' : ''"></span>
<span class="text-sm font-semibold text-gray-400 flex items-center gap-1"> <span style="font-size: 0.8125rem; font-weight: 600; color: #94a3b8; display: flex; align-items: center; gap: 0.375rem;">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 mr-1"> <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: #60a5fa;"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" />
</svg>
<span x-text="activeDay ? activeDay.formattedDate : ''"></span> <span x-text="activeDay ? activeDay.formattedDate : ''"></span>
</span> </span>
</div> </div>
<span class="text-xs font-bold text-gray-400 bg-gray-50 dark:bg-gray-900 border border-gray-100 dark:border-gray-800 px-2.5 py-1 rounded-lg" x-text="activeDay ? activeDay.commits.length + ' Commit' : ''"></span> <span style="font-size: 0.6875rem; font-weight: 700; color: #94a3b8; background: #f8fafc; border: 1px solid #f1f5f9; padding: 0.375rem 0.875rem; border-radius: 0.625rem;" x-text="activeDay ? activeDay.commits.length + ' Commit' : ''"></span>
</div> </div>
{{-- Timeline --}} {{-- Timeline --}}
<div class="relative pl-6 sm:pl-8" style="position: relative;"> <div style="position: relative; padding-left: 2.25rem;">
<div style="content: ''; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background-color: rgb(241 245 249);"></div> {{-- Gradient Timeline Line --}}
<div class="space-y-6"> <div style="position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, #3b82f6 0%, #818cf8 40%, #c7d2fe 100%); border-radius: 2px;"></div>
<div style="display: flex; flex-direction: column; gap: 1.25rem;">
<template x-for="(commit, ci) in (activeDay ? activeDay.commits : [])" :key="ci"> <template x-for="(commit, ci) in (activeDay ? activeDay.commits : [])" :key="ci">
<div class="relative group"> <div class="jt-event-row" style="position: relative;">
{{-- Timeline Dot --}} {{-- Timeline Dot --}}
<div class="absolute top-1.5 w-6 h-6 rounded-full bg-white border-2 border-primary-500 flex items-center justify-center transition-all group-hover:bg-primary-500" style="left: -31px;"> <div class="jt-timeline-dot" style="position: absolute; left: -32px; top: 6px; width: 24px; height: 24px; border-radius: 50%; background: #ffffff; border: 2.5px solid #3b82f6; display: flex; align-items: center; justify-content: center; z-index: 1;">
<div class="w-2 h-2 rounded-full bg-primary-500 group-hover:bg-white transition-all"></div> <div class="jt-timeline-dot-inner" style="width: 8px; height: 8px; border-radius: 50%; background: #3b82f6;"></div>
</div> </div>
{{-- Event Card --}} {{-- Event Card --}}
<div class="p-4 bg-gray-50/50 hover:bg-primary-50/10 border border-gray-200 hover:border-primary-100 rounded-2xl transition-all shadow-sm"> <div class="jt-event-card" style="padding: 1.125rem 1.25rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.03);">
<div class="flex items-center justify-between gap-4 mb-2"> <div style="display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.625rem;">
<span class="text-xs font-bold text-gray-400 flex items-center gap-1"> <span style="font-size: 0.75rem; font-weight: 700; color: #94a3b8; display: flex; align-items: center; gap: 0.375rem;">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-3.5 h-3.5"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#60a5fa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span x-text="commit.time"></span> <span x-text="commit.time"></span>
</span> </span>
<a :href="commit.url" target="_blank" class="text-xs font-mono font-bold text-primary-600 hover:text-primary-700 bg-primary-50 hover:bg-primary-100 px-2.5 py-0.5 rounded-lg border border-primary-100 transition-colors" x-text="commit.sha"></a> <a :href="commit.url" target="_blank" class="jt-sha-link" x-text="commit.sha" style="font-size: 0.6875rem; font-family: 'SF Mono', 'Fira Code', monospace; font-weight: 700; color: #2563eb; background: #eff6ff; padding: 0.25rem 0.75rem; border-radius: 0.5rem; border: 1px solid #bfdbfe; text-decoration: none;"></a>
</div> </div>
<p class="text-sm font-bold text-gray-700 leading-relaxed whitespace-pre-line" x-text="commit.message"></p> <p style="font-size: 0.8125rem; font-weight: 600; color: #334155; line-height: 1.6; white-space: pre-line; margin: 0;" x-text="commit.message"></p>
</div> </div>
</div> </div>
</template> </template>
resources/views/livewire/intern-journal-timeline.blade.php
+118 -36
View File
@@ -103,75 +103,157 @@
this.activeDayIndex = i; this.activeDayIndex = i;
} }
}" }"
class="mt-4" style="margin-top: 1rem; font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;"
> >
<style>
.jt-day-btn {
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}
.jt-day-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}
.jt-arrow-btn {
transition: all 0.2s ease;
}
.jt-arrow-btn:hover:not(:disabled) {
transform: scale(1.08);
background: #eff6ff;
border-color: #93c5fd;
}
.jt-arrow-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.jt-event-card {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.jt-event-card:hover {
transform: translateY(-2px) translateX(3px);
box-shadow: 0 12px 24px -8px rgba(59, 130, 246, 0.12);
border-color: #bfdbfe !important;
background: #ffffff !important;
}
.jt-timeline-dot {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.jt-event-row:hover .jt-timeline-dot {
transform: scale(1.2);
background-color: #3b82f6 !important;
box-shadow: 0 0 0 5px rgba(59, 130, 246, 0.18);
}
.jt-event-row:hover .jt-timeline-dot-inner {
background-color: #ffffff !important;
}
.jt-sha-link {
transition: all 0.25s ease;
}
.jt-sha-link:hover {
background: #3b82f6 !important;
color: #ffffff !important;
border-color: #3b82f6 !important;
}
.jt-paginator-scroll::-webkit-scrollbar {
height: 4px;
}
.jt-paginator-scroll::-webkit-scrollbar-track {
background: transparent;
}
.jt-paginator-scroll::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 9999px;
}
.jt-paginator-scroll {
scrollbar-width: thin;
scrollbar-color: #cbd5e1 transparent;
}
@keyframes jt-spin {
to { transform: rotate(360deg); }
}
@keyframes jt-fadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.jt-fade-in {
animation: jt-fadeIn 0.4s ease-out;
}
</style>
{{-- Loader --}} {{-- Loader --}}
<div x-show="loading" x-cloak class="py-8 flex flex-col items-center justify-center"> <div x-show="loading" x-cloak style="padding: 3rem 0; display: flex; flex-direction: column; align-items: center; justify-content: center;">
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600 mb-2"></div> <div style="width: 2.5rem; height: 2.5rem; border: 2px solid #e2e8f0; border-top-color: #3b82f6; border-radius: 50%; animation: jt-spin 0.8s linear infinite; margin-bottom: 0.75rem;"></div>
<span class="text-xs text-gray-500 font-semibold">GitHub'dan commitler yükleniyor...</span> <span style="font-size: 0.75rem; color: #94a3b8; font-weight: 600; letter-spacing: 0.025em;">Commit geçmişi yükleniyor...</span>
</div> </div>
{{-- Error --}} {{-- Error --}}
<div x-show="errorMsg" x-cloak class="p-4 rounded-xl bg-danger-50 border border-danger-200 text-danger-600 text-xs font-semibold" x-text="errorMsg"></div> <div x-show="errorMsg" x-cloak x-text="errorMsg" style="padding: 1rem 1.25rem; border-radius: 1rem; background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; font-size: 0.75rem; font-weight: 700;"></div>
{{-- Empty --}} {{-- Empty --}}
<div x-show="isEmpty && !loading" x-cloak class="p-6 rounded-2xl border border-gray-200 text-center text-gray-400 italic text-sm"> <div x-show="isEmpty && !loading" x-cloak style="padding: 2rem; border-radius: 1.5rem; border: 1px solid #f1f5f9; background: #ffffff; text-align: center; color: #94a3b8; font-style: italic; font-size: 0.875rem;">
Henüz hiç commit bulunamadı veya stajyerin deposu tanımlanmadı. Henüz hiçbir commit verisi bulunamadı veya depo adresi yapılandırılmadı.
</div> </div>
{{-- Day Paginator --}} {{-- Day Paginator --}}
<div x-show="commitDays.length > 0" x-cloak class="flex items-center justify-between gap-4 p-3 bg-gray-50 border border-gray-100 rounded-2xl mb-6 select-none"> <div x-show="commitDays.length > 0" x-cloak style="display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem; background: rgba(255,255,255,0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid #e2e8f0; border-radius: 1.5rem; margin-bottom: 1.75rem; user-select: none; box-shadow: 0 1px 3px rgba(0,0,0,0.04);">
<button type="button" @click="navigateDay(-1)" :disabled="activeDayIndex === 0" :class="{ 'opacity-40 cursor-not-allowed': activeDayIndex === 0 }" class="w-10 h-10 rounded-xl bg-white hover:bg-gray-100 text-gray-600 border border-gray-200 flex items-center justify-center transition-all shadow-sm"> <button type="button" @click="navigateDay(-1)" :disabled="activeDayIndex === 0" class="jt-arrow-btn" style="width: 2.75rem; height: 2.75rem; border-radius: 0.875rem; background: #ffffff; color: #64748b; border: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; box-shadow: 0 1px 2px rgba(0,0,0,0.04);">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" /></svg> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
</button> </button>
<div class="flex-grow overflow-x-auto py-1" style="-ms-overflow-style: none; scrollbar-width: none;"> <div class="jt-paginator-scroll" style="flex: 1; overflow-x: auto; padding: 0.375rem 0;">
<div class="flex gap-2 justify-start sm:justify-center min-w-max px-2"> <div style="display: flex; gap: 0.625rem; justify-content: center; min-width: max-content; padding: 0 0.5rem;">
<template x-for="(day, index) in commitDays" :key="day.date"> <template x-for="(day, index) in commitDays" :key="day.date">
<button type="button" @click="selectDay(index)" :class="index === activeDayIndex ? 'text-primary-700 bg-primary-50 border-primary-200 font-extrabold shadow-sm' : 'bg-white hover:bg-gray-50 text-gray-600 border-gray-200 font-semibold hover:text-primary-600'" class="px-5 py-2 rounded-xl transition-all flex flex-col items-center justify-center border"> <button type="button" @click="selectDay(index)" class="jt-day-btn" :style="index === activeDayIndex
<span class="text-xs" x-text="day.dayNum + '. Gün'"></span> ? 'padding: 0.5rem 1.25rem; border-radius: 0.875rem; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1.5px solid #93c5fd; background: linear-gradient(135deg, #eff6ff, #dbeafe); color: #1d4ed8; font-weight: 800; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);'
<span class="text-[9px] mt-0.5 opacity-70 font-medium" x-text="day.formattedDate"></span> : 'padding: 0.5rem 1.25rem; border-radius: 0.875rem; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #e2e8f0; background: #ffffff; color: #64748b; font-weight: 600;'">
<span style="font-size: 0.75rem; line-height: 1.2;" x-text="day.dayNum + '. Gün'"></span>
<span style="font-size: 0.6rem; margin-top: 0.125rem; opacity: 0.7; font-weight: 500;" x-text="day.formattedDate"></span>
</button> </button>
</template> </template>
</div> </div>
</div> </div>
<button type="button" @click="navigateDay(1)" :disabled="activeDayIndex === commitDays.length - 1" :class="{ 'opacity-40 cursor-not-allowed': activeDayIndex === commitDays.length - 1 }" class="w-10 h-10 rounded-xl bg-white hover:bg-gray-100 text-gray-600 border border-gray-200 flex items-center justify-center transition-all shadow-sm"> <button type="button" @click="navigateDay(1)" :disabled="activeDayIndex === commitDays.length - 1" class="jt-arrow-btn" style="width: 2.75rem; height: 2.75rem; border-radius: 0.875rem; background: #ffffff; color: #64748b; border: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; box-shadow: 0 1px 2px rgba(0,0,0,0.04);">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" /></svg> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
</button> </button>
</div> </div>
{{-- Active Day Card --}} {{-- Active Day Card --}}
<div x-show="activeDay" x-cloak class="bg-white dark:bg-gray-950 border border-gray-100 dark:border-gray-800 rounded-2xl p-6 shadow-sm"> <div x-show="activeDay" x-cloak class="jt-fade-in" :key="activeDayIndex" style="background: #ffffff; border: 1px solid #f1f5f9; border-radius: 1.5rem; padding: 1.75rem 2rem; box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.06);">
<div class="flex items-center justify-between mb-8 pb-4 border-b border-gray-100 dark:border-gray-800"> {{-- Day Header --}}
<div class="flex items-center gap-3"> <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.75rem; padding-bottom: 1.25rem; border-bottom: 1px solid #f1f5f9;">
<span class="text-base font-extrabold text-primary-600 bg-primary-50 dark:bg-primary-950/20 px-4 py-1.5 rounded-full" x-text="activeDay ? activeDay.dayNum + '. Gün' : ''"></span> <div style="display: flex; align-items: center; gap: 0.875rem;">
<span class="text-sm font-semibold text-gray-400 flex items-center gap-1"> <span style="font-size: 0.875rem; font-weight: 800; color: #2563eb; background: linear-gradient(135deg, #eff6ff, #dbeafe); padding: 0.5rem 1.125rem; border-radius: 1rem; box-shadow: 0 1px 3px rgba(37, 99, 235, 0.1);" x-text="activeDay ? activeDay.dayNum + '. Gün' : ''"></span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 mr-1"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" /></svg> <span style="font-size: 0.8125rem; font-weight: 600; color: #94a3b8; display: flex; align-items: center; gap: 0.375rem;">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: #60a5fa;"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
<span x-text="activeDay ? activeDay.formattedDate : ''"></span> <span x-text="activeDay ? activeDay.formattedDate : ''"></span>
</span> </span>
</div> </div>
<span class="text-xs font-bold text-gray-400 bg-gray-50 dark:bg-gray-900 border border-gray-100 dark:border-gray-800 px-2.5 py-1 rounded-lg" x-text="activeDay ? activeDay.commits.length + ' Commit' : ''"></span> <span style="font-size: 0.6875rem; font-weight: 700; color: #94a3b8; background: #f8fafc; border: 1px solid #f1f5f9; padding: 0.375rem 0.875rem; border-radius: 0.625rem;" x-text="activeDay ? activeDay.commits.length + ' Commit' : ''"></span>
</div> </div>
{{-- Timeline --}} {{-- Timeline --}}
<div class="relative pl-6 sm:pl-8"> <div style="position: relative; padding-left: 2.25rem;">
<div style="position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background-color: rgb(229, 231, 235);"></div> {{-- Gradient Timeline Line --}}
<div class="space-y-6"> <div style="position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, #3b82f6 0%, #818cf8 40%, #c7d2fe 100%); border-radius: 2px;"></div>
<div style="display: flex; flex-direction: column; gap: 1.25rem;">
<template x-for="(commit, ci) in (activeDay ? activeDay.commits : [])" :key="ci"> <template x-for="(commit, ci) in (activeDay ? activeDay.commits : [])" :key="ci">
<div class="relative group"> <div class="jt-event-row" style="position: relative;">
<div class="absolute top-1.5 w-6 h-6 rounded-full bg-white border-2 border-primary-500 flex items-center justify-center transition-all group-hover:bg-primary-500" style="left: -31px;"> {{-- Timeline Dot --}}
<div class="w-2 h-2 rounded-full bg-primary-500 group-hover:bg-white transition-all"></div> <div class="jt-timeline-dot" style="position: absolute; left: -32px; top: 6px; width: 24px; height: 24px; border-radius: 50%; background: #ffffff; border: 2.5px solid #3b82f6; display: flex; align-items: center; justify-content: center; z-index: 1;">
<div class="jt-timeline-dot-inner" style="width: 8px; height: 8px; border-radius: 50%; background: #3b82f6;"></div>
</div> </div>
<div class="p-4 bg-gray-50/50 hover:bg-primary-50/10 border border-gray-200 hover:border-primary-100 rounded-2xl transition-all shadow-sm"> {{-- Event Card --}}
<div class="flex items-center justify-between gap-4 mb-2"> <div class="jt-event-card" style="padding: 1.125rem 1.25rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.03);">
<span class="text-xs font-bold text-gray-400 flex items-center gap-1"> <div style="display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.625rem;">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-3.5 h-3.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg> <span style="font-size: 0.75rem; font-weight: 700; color: #94a3b8; display: flex; align-items: center; gap: 0.375rem;">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#60a5fa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
<span x-text="commit.time"></span> <span x-text="commit.time"></span>
</span> </span>
<a :href="commit.url" target="_blank" class="text-xs font-mono font-bold text-primary-600 hover:text-primary-700 bg-primary-50 hover:bg-primary-100 px-2.5 py-0.5 rounded-lg border border-primary-100 transition-colors" x-text="commit.sha"></a> <a :href="commit.url" target="_blank" class="jt-sha-link" x-text="commit.sha" style="font-size: 0.6875rem; font-family: 'SF Mono', 'Fira Code', monospace; font-weight: 700; color: #2563eb; background: #eff6ff; padding: 0.25rem 0.75rem; border-radius: 0.5rem; border: 1px solid #bfdbfe; text-decoration: none;"></a>
</div> </div>
<p class="text-sm font-bold text-gray-700 leading-relaxed whitespace-pre-line" x-text="commit.message"></p> <p style="font-size: 0.8125rem; font-weight: 600; color: #334155; line-height: 1.6; white-space: pre-line; margin: 0;" x-text="commit.message"></p>
</div> </div>
</div> </div>
</template> </template>