feat: add internship workflow guide modal to dashboards and visualize current date in Gantt chart
This commit is contained in:
@@ -20,4 +20,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@include('front.career.partials.guide_modal')
|
||||
@endsection
|
||||
|
||||
@@ -21,6 +21,23 @@
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Stajyer Çalışma Rehberi Callout -->
|
||||
<div class="bg-gradient-to-r from-blue-600 to-indigo-600 rounded-3xl p-6 shadow-xl text-white mb-8 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 rounded-2xl bg-white/10 backdrop-blur-md flex items-center justify-center text-2xl text-white flex-shrink-0">
|
||||
<i class="uil uil-info-circle"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-extrabold text-base tracking-tight">Stajyer Çalışma & Git Workflow Rehberi</h4>
|
||||
<p class="text-xs text-blue-100 font-medium mt-1">GitHub reposu oluşturma, günlük commitler ve toplantı kuralları hakkında bilgi edinin.</p>
|
||||
</div>
|
||||
</div>
|
||||
<button onclick="toggleGuideModal(true)" class="px-5 py-3 bg-white text-blue-600 hover:bg-blue-50 font-extrabold text-sm rounded-xl transition-all shadow-md flex items-center gap-2 self-stretch sm:self-auto justify-center">
|
||||
<i class="uil uil-book-open"></i>
|
||||
<span>Rehberi İncele</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Session & Validation Alerts -->
|
||||
@if(session('success'))
|
||||
<div class="bg-green-50 border border-green-200 text-green-700 px-6 py-4 rounded-3xl mb-8 flex items-center gap-3 shadow-sm">
|
||||
@@ -1079,4 +1096,6 @@
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@include('front.career.partials.guide_modal')
|
||||
@endsection
|
||||
|
||||
@@ -25,6 +25,13 @@
|
||||
<!-- DevExtreme Gantt CSS Dependencies -->
|
||||
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/23.2.5/css/dx.fluent.blue.light.css">
|
||||
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/23.2.5/css/dx-gantt.min.css">
|
||||
<style>
|
||||
.current-time-line {
|
||||
background-color: rgba(239, 68, 68, 0.4) !important;
|
||||
border-left: 2px dashed #ef4444 !important;
|
||||
width: 2px !important;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
tailwind = {
|
||||
config: {
|
||||
@@ -93,6 +100,11 @@
|
||||
}],
|
||||
scaleType: 'days',
|
||||
taskListWidth: 420,
|
||||
stripLines: [{
|
||||
title: 'Bugün',
|
||||
start: new Date(),
|
||||
cssClass: 'current-time-line'
|
||||
}],
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,132 @@
|
||||
<!-- Stajyer Rehberi Modal -->
|
||||
<div id="guideModal" class="fixed inset-0 z-[9999] hidden flex items-center justify-center p-4">
|
||||
<!-- Backdrop -->
|
||||
<div class="absolute inset-0 bg-slate-900/60 backdrop-blur-md transition-opacity duration-300" onclick="toggleGuideModal(false)"></div>
|
||||
|
||||
<!-- Modal Content Card -->
|
||||
<div class="relative bg-white rounded-3xl w-full max-w-2xl max-h-[85vh] overflow-y-auto shadow-2xl border border-slate-100/50 transform scale-95 opacity-0 transition-all duration-300 flex flex-col" id="guideModalCard">
|
||||
|
||||
<!-- Modal Header -->
|
||||
<div class="sticky top-0 bg-white z-10 px-6 py-5 border-b border-slate-100 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-xl bg-red-50 text-[#e31e24] flex items-center justify-center text-xl">
|
||||
<i class="uil uil-book-open"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-slate-800 text-lg">Stajyer Çalışma & Git Workflow Rehberi</h3>
|
||||
<p class="text-xs text-slate-400 font-semibold mt-0.5">Başarılı bir staj süreci için uymanız gereken kurallar</p>
|
||||
</div>
|
||||
</div>
|
||||
<button onclick="toggleGuideModal(false)" class="w-8 h-8 rounded-lg bg-slate-50 hover:bg-slate-100 text-slate-400 hover:text-slate-600 flex items-center justify-center transition-colors">
|
||||
<i class="uil uil-times text-xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Modal Body -->
|
||||
<div class="p-6 md:p-8 space-y-6">
|
||||
|
||||
<!-- Bullet 1: GitHub Public Repo -->
|
||||
<div class="flex gap-4 items-start">
|
||||
<div class="w-8 h-8 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center flex-shrink-0 mt-1 font-bold text-xs">
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-extrabold text-slate-800 text-sm">GitHub Public Repo Oluşturma</h4>
|
||||
<p class="text-xs text-slate-500 mt-1 leading-relaxed">
|
||||
Staj süresince geliştireceğiniz projeler için GitHub üzerinde <strong>public (herkese açık)</strong> bir repository oluşturmanız ve bu repo bağlantısını stajyer panelinize kaydetmeniz gerekmektedir.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bullet 2: Implementation Plan -->
|
||||
<div class="flex gap-4 items-start">
|
||||
<div class="w-8 h-8 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center flex-shrink-0 mt-1 font-bold text-xs">
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-extrabold text-slate-800 text-sm">İlk Adım: Implementation Plan</h4>
|
||||
<p class="text-xs text-slate-500 mt-1 leading-relaxed">
|
||||
Deponuzu oluşturduktan sonra ilk commit olarak ana dizinde <code>implementation_plan.md</code> adında bir dosya hazırlamalısınız. Bu plan, projenizin mimarisini, hedeflerinizi ve yapacağınız işlerin genel haritasını içermelidir.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bullet 3: Daily Commits & Intern Journal -->
|
||||
<div class="flex gap-4 items-start">
|
||||
<div class="w-8 h-8 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center flex-shrink-0 mt-1 font-bold text-xs">
|
||||
3
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-extrabold text-slate-800 text-sm">Günlük Commit Zorunluluğu (Staj Defteri)</h4>
|
||||
<p class="text-xs text-slate-500 mt-1 leading-relaxed">
|
||||
Projeyi geliştirirken yaptığınız günlük commitler otomatik olarak staj günlüğünüze işlenir ve staj defterinizin içeriğini oluşturur. <strong>Eğer o gün commit gönderilmemişse, o gün çalışılmamış sayılacaktır.</strong>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bullet 4: Daily Standup Meetings -->
|
||||
<div class="flex gap-4 items-start">
|
||||
<div class="w-8 h-8 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center flex-shrink-0 mt-1 font-bold text-xs">
|
||||
4
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-extrabold text-slate-800 text-sm">Daily Standup Toplantıları</h4>
|
||||
<p class="text-xs text-slate-500 mt-1 leading-relaxed">
|
||||
Her iş günü düzenli olarak daily standup (günlük durum değerlendirme) toplantısı yapılacaktır. Toplantılarda dünün özeti, bugünün planları ve karşılaşılan engeller paylaşılır. <strong>Tüm stajyerlerin katılımı zorunludur.</strong>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bullet 5: Git Workflow & Commit Culture -->
|
||||
<div class="flex gap-4 items-start">
|
||||
<div class="w-8 h-8 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center flex-shrink-0 mt-1 font-bold text-xs">
|
||||
5
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-extrabold text-slate-800 text-sm">Git Workflow & Temiz Kod Kültürü</h4>
|
||||
<p class="text-xs text-slate-500 mt-1 leading-relaxed">
|
||||
Anlamlı commit mesajları yazmaya özen gösterin (örn. <code>feat: add login validation</code>). Kodlarınızı mantıksal parçalara ayırarak commit atın ve Git versiyon kontrol standartlarına uyun.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Modal Footer -->
|
||||
<div class="sticky bottom-0 bg-slate-50 z-10 px-6 py-4 border-t border-slate-100/50 flex items-center justify-end gap-3 rounded-b-3xl">
|
||||
<button onclick="toggleGuideModal(false)" class="px-5 py-2.5 bg-slate-850 hover:bg-slate-900 text-white font-extrabold rounded-xl text-xs transition-colors shadow-md shadow-slate-800/10">
|
||||
Anladım, Kapat
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleGuideModal(show) {
|
||||
const modal = document.getElementById('guideModal');
|
||||
const card = document.getElementById('guideModalCard');
|
||||
if (!modal || !card) return;
|
||||
|
||||
if (show) {
|
||||
modal.classList.remove('hidden');
|
||||
setTimeout(() => {
|
||||
card.classList.remove('scale-95', 'opacity-0');
|
||||
card.classList.add('scale-100', 'opacity-100');
|
||||
}, 10);
|
||||
} else {
|
||||
card.classList.remove('scale-100', 'opacity-100');
|
||||
card.classList.add('scale-95', 'opacity-0');
|
||||
setTimeout(() => {
|
||||
modal.classList.add('hidden');
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
|
||||
// Handle ESC key
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape') {
|
||||
toggleGuideModal(false);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -5,7 +5,11 @@
|
||||
<h1 class="text-3xl font-extrabold text-slate-900 tracking-tight mt-3">Hoş Geldiniz, Yöneticimiz</h1>
|
||||
<p class="text-sm text-slate-500 mt-1">Stajyer başvurularını, takvimlerini ve proje depolarını buradan takip edebilirsiniz.</p>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<div class="flex gap-3 flex-wrap">
|
||||
<button onclick="toggleGuideModal(true)" class="px-5 py-3 rounded-xl bg-blue-50 hover:bg-blue-100 text-blue-600 font-extrabold text-sm transition-all flex items-center gap-2 border border-blue-100">
|
||||
<i class="uil uil-book-open text-lg"></i>
|
||||
<span>Stajyer Rehberi</span>
|
||||
</button>
|
||||
<a href="{{ route('homepage') }}" class="px-5 py-3 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-600 font-bold text-sm transition-all flex items-center gap-2 border border-slate-200/50">
|
||||
<i class="uil uil-home text-lg"></i>
|
||||
<span>Ana Sayfa</span>
|
||||
|
||||
Reference in New Issue
Block a user