<!-- Bootstrap 4 CSS ve JS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
.member-card {
border: none;
border-radius: 1rem;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
height: 100%;
margin-bottom: 1.5rem;
}
.member-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 30px rgba(0,0,0,0.12);
}
.card-img-top {
height: 280px;
object-fit: cover;
background: linear-gradient(135deg, #d4e0e8, #c0cfda);
}
.member-role-badge {
position: absolute;
top: 1rem;
right: 1rem;
background: #2c7a5e;
color: white;
padding: 0.3rem 0.8rem;
border-radius: 50px;
0.7rem;
font-weight: 600;
z-index: 1;
}
.meeting-card {
border: none;
border-radius: 1rem;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
height: 100%;
margin-bottom: 1.5rem;
}
.meeting-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}
.meeting-date-badge {
background: #2c7a5e;
color: white;
padding: 0.3rem 1rem;
border-radius: 50px;
0.8rem;
font-weight: 600;
display: inline-block;
}
.meeting-type-badge {
background: #f0e6d2;
color: #8a6e3b;
padding: 0.3rem 1rem;
border-radius: 50px;
0.75rem;
font-weight: 600;
}
.share-buttons .btn {
border-radius: 50px;
padding: 0.3rem 1rem;
0.75rem;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
}
.update-note {
background: linear-gradient(135deg, #e8f4f0 0%, #d4e8e2 100%);
border-left: 5px solid #2c7a5e;
border-radius: 1rem;
padding: 1.2rem;
margin: 2rem 0;
}
.section-title {
position: relative;
margin: 2rem 0 1.5rem 0;
padding-bottom: 0.75rem;
font-weight: 700;
color: #1e4a3b;
border-bottom: 2px solid #e9ecef;
}
.section-title:after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 60px;
height: 4px;
background: linear-gradient(90deg, #2c7a5e, #4cae8c);
border-radius: 2px;
}
@media (max-width: 768px) {
.card-img-top {
height: 220px;
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.member-card, .meeting-card {
animation: fadeInUp 0.5s ease-out;
}
.hero-mini {
background: linear-gradient(135deg, #0f3b2c 0%, #1d6b4e 100%);
color: white;
padding: 2rem 0;
border-radius: 0 0 1rem 1rem;
margin-bottom: 2rem;
text-align: center;
}
.btn-success-custom {
background-color: #2c7a5e;
border-color: #2c7a5e;
}
.btn-success-custom:hover {
background-color: #1e5a48;
border-color: #1e5a48;
}
</style>
<div class="hero-mini">
<div class="container text-center">
<i class="fas fa-chalkboard-user fa-3x mb-3"></i>
<h3 class="fw-bold mb-2">Danışma Kurulu</h3>
<p class="mb-0">Isparta Uygulamalı Bilimler Üniversitesi - Teknik Bilimler MYO</p>
<small class="d-block mt-2">Güncel Kurul Listesi | Mart 2026</small>
</div>
</div>
<div class="container">
<!-- Danışma Kurulu Üyeleri Bölümü -->
<div class="section-title">
<h5 class="mb-0">
<i class="fas fa-users me-2 text-success"></i>Danışma Kurulu Üyeleri
</h5>
<small class="text-muted">Kısa özgeçmiş ve görev bilgileri</small>
</div>
<div id="boardMembersContainer" class="row">
<!-- JS ile dinamik doldurulacak -->
</div>
<!-- Toplantılar ve Duyurular -->
<div class="section-title mt-4">
<h5 class="mb-0">
<i class="fas fa-calendar-alt me-2 text-success"></i>Toplantılar & Duyurular
</h5>
<small class="text-muted">Web ve sosyal medya paylaşımları</small>
</div>
<div id="meetingsContainer" class="row">
<!-- JS ile dinamik toplantılar -->
</div>
<!-- Yönetim / Güncelleme notu -->
<div class="update-note d-flex justify-content-between align-items-center flex-wrap" id="updateNoteArea">
<div>
<i class="fas fa-sync-alt text-success me-2"></i>
<strong>Teknik Bilimler MYO Danışma Kurulu</strong> — Güncel üye listesi, kısa özgeçmişler ve toplantı duyuruları aşağıdadır.
</div>
<button class="btn btn-success btn-sm" id="refreshBoardBtn">
<i class="fas fa-refresh me-1"></i> Kurul Bilgilerini Yenile
</button>
</div>
<p class="text-muted small mt-3 text-center">
<i class="fas fa-info-circle me-1"></i> Kurul üyelerinin kısa özgeçmiş ve fotoğrafları web sayfamızda paylaşılmıştır.
Toplantı duyuruları sosyal medya hesaplarımızdan da takip edilebilir.
</p>
</div>
<script>
// --- ISPARTA UYGULAMALI BİLİMLER ÜNİVERSİTESİ TEKNİK BİLİMLER MYO DANIŞMA KURULU VERİLERİ ---
const boardData = {
boardMembers: [
{
id: 1,
name: "Dr. Öğr. Üyesi Hakan YÜKSEL",
title: "Teknik Bilimler MYO Müdürü",
role: "Kurul Başkanı",
bio: "Isparta Uygulamalı Bilimler Üniversitesi Teknik Bilimler MYO Müdürü. Makine mühendisliği alanında uzman, endüstriyel otomasyon ve üretim teknolojileri konularında akademik çalışmalar yürütmektedir. MYO'nun kalite süreçleri ve sektör işbirliklerini koordine etmektedir.",
photo: "images/hakan-yuksel.jpg"
},
{
id: 2,
name: "Yurdun YILDIRIM",
title: "KOSGEB Isparta İl Müdürü",
role: "Kurul Üyesi",
bio: "KOSGEB Isparta İl Müdürü olarak görev yapmaktadır. KOBİ'lerin gelişimi, yenilikçilik ve girişimcilik ekosisteminin güçlendirilmesi konularında deneyimlidir. Üniversite-sanayi işbirliği projelerine destek vermektedir.",
photo: "images/yurdun-yildirim.jpg"
},
{
id: 3,
name: "Mustafa HÖKE",
title: "Isparta Çalışma ve İş Kurumu İl Müdürü",
role: "Kurul Üyesi",
bio: "İŞKUR Isparta İl Müdürü. İstihdam politikaları, mesleki eğitim programları ve işgücü piyasası analizleri alanında uzman. Öğrencilerin iş dünyasına entegrasyonu ve staj süreçlerinde aktif rol oynamaktadır.",
photo: "images/mustafa-hoke.jpg"
},
{
id: 4,
name: "Süleyman ÖZÇOBAN",
title: "Makine Teknikeri",
role: "Kurul Üyesi - Sektör Temsilcisi",
bio: "Hassel Endüstri Ürünleri Tic. Ltd. Şti.'nde üretim ve kalite kontrol süreçlerinde görev almaktadır. Makine teknolojileri alanında 15+ yıl sektör deneyimi. MYO öğrencilerinin uygulamalı eğitimine katkı sağlamaktadır.",
photo: "images/suleyman-ozcoban.jpg"
},
{
id: 5,
name: "Fethi YAZICIOĞLU",
title: "İnşaat Mühendisi",
role: "Kurul Üyesi - Sektör Temsilcisi",
bio: "Metin Çelik İnşaat'ta proje koordinatörü olarak görev yapmaktadır. İnşaat sektöründe 20 yılı aşkın deneyim, şantiye yönetimi ve yapı teknolojileri konularında uzmandır. Öğrencilerin saha deneyimi kazanmasına destek olmaktadır.",
photo: "images/fethi-yazicioglu.jpg"
},
{
id: 6,
name: "Yiğit YURDAARMAĞAN",
title: "Öğrenci Kalite Temsilcisi",
role: "Kurul Üyesi - Öğrenci Temsilcisi",
bio: "Teknik Bilimler MYO öğrencisi ve kalite temsilcisi. Öğrenci görüşlerinin kurul kararlarına yansıtılması, akademik ve sosyal süreçlerin iyileştirilmesi konularında aktif rol almaktadır. Öğrenci-okul iletişiminde köprü görevi üstlenmektedir.",
photo: "images/yigit-yurdarmagan.jpg"
}
],
meetings: [
{
id: 1,
date: "15 Mart 2026",
type: "2026 1. Dönem Olağan Kurul Toplantısı",
title: "Akademik Yıl Değerlendirmesi ve Stratejik Hedefler",
desc: "MYO eğitim kalitesi, sektör işbirlikleri ve öğrenci istihdamı konuları görüşüldü. KOSGEB ve İŞKUR işbirliği ile yeni projeler değerlendirildi.",
shareUrl: "https://isparta.edu.tr/teknikbilimler/kurul-toplantisi-mart2026"
},
{
id: 2,
date: "10 Nisan 2026",
type: "Sektör Buluşması & İstişare Toplantısı",
title: "Üniversite-Sanayi İşbirliği Çalıştayı",
desc: "Hassel Endüstri ve Metin Çelik İnşaat temsilcileri ile ortak projeler, staj olanakları ve mezun takip sistemi değerlendirildi. Toplantı raporu web sitesinde yayınlandı.",
shareUrl: "https://isparta.edu.tr/teknikbilimler/sektor-bulusmasi"
},
{
id: 3,
date: "5 Mayıs 2026",
type: "Kalite Komisyonu & Öğrenci Görüşleri",
title: "Kalite Süreçleri ve Öğrenci Memnuniyeti Değerlendirmesi",
desc: "Öğrenci Kalite Temsilcisi Yiğit Yurdarmağan'ın sunumu ile öğrenci geri bildirimleri ele alındı. Eğitim ortamlarının iyileştirilmesine yönelik kararlar alındı.",
shareUrl: "https://isparta.edu.tr/teknikbilimler/kalite-top"
},
{
id: 4,
date: "28 Mayıs 2026 (Planlanan)",
type: "Danışma Kurulu Yıl Sonu Değerlendirmesi",
title: "2025-2026 Akademik Yılı Değerlendirmesi ve Gelecek Planlaması",
desc: "Yıl boyunca yapılan çalışmalar, öğrenci başarıları, mezun istihdam oranları ve yeni dönem hedefleri görüşülecektir. Tüm kurul üyelerinin katılımıyla yapılacaktır.",
shareUrl: "https://isparta.edu.tr/teknikbilimler/yilsonu-kurul"
}
]
};
// DOM elementleri
const boardContainer = document.getElementById('boardMembersContainer');
const meetingsContainer = document.getElementById('meetingsContainer');
let refreshBtn = document.getElementById('refreshBoardBtn');
const updateNoteArea = document.getElementById('updateNoteArea');
let currentBoardMembers = [...boardData.boardMembers];
let currentMeetings = [...boardData.meetings];
// --- Sosyal medya paylaşım simülasyonu
function shareOnSocial(platform, meetingTitle, shareUrl) {
let shareText = `📢 ${meetingTitle} - Teknik Bilimler MYO Danışma Kurulu Toplantısı hakkında detaylar: ${shareUrl}`;
const shareMessages = {
facebook: `🔵 Facebook'ta paylaşıldı:\n${shareText}\n\n#TeknikBilimlerMYO #IspartaUygulamalıBilimlerÜniversitesi #DanışmaKurulu`,
twitter: `🐦 Twitter'da paylaşıldı:\n${shareText}\n\n #ISUBU #TeknikMYO #DanışmaKurulu`,
linkedin: `🔗 LinkedIn'de paylaşıldı:\n${shareText}\n\nProfesyonel ağınızla paylaşabilirsiniz.`,
web: `🌐 Web sayfasında yayınlandı: "${meetingTitle}"\nDetay link: ${shareUrl}\n(Toplantı duyurusu ana sayfada gösteriliyor.)`
};
alert(shareMessages[platform] || shareMessages.web);
console.log(`[Paylaşım] ${platform} üzerinden "${meetingTitle}" paylaşıldı. URL: ${shareUrl}`);
}
// Toplantı kartlarını oluştur
function renderMeetings() {
if (!meetingsContainer) return;
meetingsContainer.innerHTML = '';
if (currentMeetings.length === 0) {
meetingsContainer.innerHTML = `
<div class="col-12">
<div class="alert alert-info text-center">
<i class="fas fa-info-circle me-2"></i>Henüz toplantı duyurusu bulunmamaktadır.
</div>
</div>`;
return;
}
currentMeetings.forEach(meeting => {
const col = document.createElement('div');
col.className = 'col-md-6 col-lg-6';
col.innerHTML = `
<div class="card meeting-card h-100">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap">
<span class="meeting-date-badge mb-2 mb-md-0">
<i class="fas fa-calendar-day me-1"></i>${escapeHtml(meeting.date)}
</span>
<span class="meeting-type-badge">
<i class="fas fa-tag me-1"></i>${escapeHtml(meeting.type)}
</span>
</div>
<h5 class="card-title text-success mb-3">
<i class="fas fa-chalkboard me-2"></i>${escapeHtml(meeting.title)}
</h5>
<p class="card-text text-secondary">${escapeHtml(meeting.desc)}</p>
<div class="share-buttons mt-3">
<button class="btn btn-primary btn-sm share-btn" data-platform="facebook" data-title="${escapeAttr(meeting.title)}" data-url="${escapeAttr(meeting.shareUrl)}">
<i class="fab fa-facebook-f me-1"></i>Facebook
</button>
<button class="btn btn-info btn-sm text-white share-btn" data-platform="twitter" data-title="${escapeAttr(meeting.title)}" data-url="${escapeAttr(meeting.shareUrl)}">
<i class="fab fa-twitter me-1"></i>Twitter
</button>
<button class="btn btn-secondary btn-sm share-btn" data-platform="linkedin" data-title="${escapeAttr(meeting.title)}" data-url="${escapeAttr(meeting.shareUrl)}">
<i class="fab fa-linkedin-in me-1"></i>LinkedIn
</button>
<button class="btn btn-outline-success btn-sm share-btn" data-platform="web" data-title="${escapeAttr(meeting.title)}" data-url="${escapeAttr(meeting.shareUrl)}">
<i class="fas fa-globe me-1"></i>Web
</button>
</div>
</div>
</div>
`;
meetingsContainer.appendChild(col);
});
// Paylaşım butonlarına event listener ekle
document.querySelectorAll('.share-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
e.stopPropagation();
const platform = btn.getAttribute('data-platform');
const title = btn.getAttribute('data-title');
const url = btn.getAttribute('data-url');
shareOnSocial(platform, title, url);
});
});
}
// Danışma kurulu üyelerini render et
function renderBoardMembers() {
if (!boardContainer) return;
boardContainer.innerHTML = '';
if (currentBoardMembers.length === 0) {
boardContainer.innerHTML = `
<div class="col-12">
<div class="alert alert-warning text-center">
<i class="fas fa-exclamation-triangle me-2"></i>Danışma kurulu üyesi bulunmamaktadır.
</div>
</div>`;
return;
}
currentBoardMembers.forEach(member => {
const col = document.createElement('div');
col.className = 'col-md-6 col-lg-4';
const imgSrc = member.photo && member.photo.trim() !== '' ? member.photo : 'https://via.placeholder.com/400x300?text=Fotoğraf+Yok';
col.innerHTML = `
<div class="card member-card h-100 position-relative">
<div class="member-role-badge">
<i class="fas fa-star me-1"></i>${escapeHtml(member.role)}
</div>
<img src="${imgSrc}" class="card-img-top" alt="${escapeHtml(member.name)}"
onerror="this.onerror=null;this.src='https://via.placeholder.com/400x300?text=Fotoğraf+Yüklenemedi';">
<div class="card-body">
<h5 class="card-title mb-2">${escapeHtml(member.name)}</h5>
<h6 class="card-subtitle mb-2 text-success">
<i class="fas fa-briefcase me-1"></i>${escapeHtml(member.title)}
</h6>
<p class="card-text small text-secondary mt-3">
<i class="fas fa-file-alt me-2 text-success"></i>${escapeHtml(member.bio)}
</p>
</div>
</div>
`;
boardContainer.appendChild(col);
});
}
// Güncelleme işlemi
function refreshData() {
currentBoardMembers = [...boardData.boardMembers];
currentMeetings = [...boardData.meetings];
renderBoardMembers();
renderMeetings();
if(updateNoteArea){
updateNoteArea.innerHTML = `
<div>
<i class="fas fa-check-circle text-success me-2"></i>
<strong>Danışma kurulu bilgileri başarıyla yenilendi!</strong> Güncel üye listesi, özgeçmişler ve toplantı duyuruları web'de yayında.
</div>
<button class="btn btn-success btn-sm" id="refreshBoardBtn">
<i class="fas fa-refresh me-1"></i> Son Durumu Yenile
</button>
`;
const newBtn = document.getElementById('refreshBoardBtn');
if(newBtn) newBtn.addEventListener('click', refreshData);
}
// Bildirim göster
const alertHtml = `
<div class="alert alert-success alert-dismissible fade show position-fixed" style="bottom: 20px; right: 20px; z-index: 9999; min-width: 250px;">
<i class="fas fa-check-circle me-2"></i>Danışma kurulu bilgileri güncellendi!
<button type="button" class="close" data-dismiss="alert">×</button>
</div>
`;
document.body.insertAdjacentHTML('beforeend', alertHtml);
setTimeout(() => {
const alert = document.querySelector('.alert');
if(alert) alert.remove();
}, 3000);
}
// escape fonksiyonları
function escapeHtml(str) {
if (!str) return '';
return str.replace(/[&<>]/g, function(m) {
if (m === '&') return '&';
if (m === '<') return '<';
if (m === '>') return '>';
return m;
});
}
function escapeAttr(str) {
if (!str) return '';
return str.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
}
// İlk yükleme
function init() {
renderBoardMembers();
renderMeetings();
if(refreshBtn) {
refreshBtn.addEventListener('click', refreshData);
}
}
init();
</script>