feat: add internship workflow guide modal to dashboards and visualize current date in Gantt chart

This commit is contained in:
Ümit Tunç
2026-06-26 16:42:24 +03:00
parent aa6858bc0f
commit 32c556a87b
5 changed files with 170 additions and 1 deletions
@@ -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>