Notes
Notes - notes.io |
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atlas Koleji - Geleceğin Eğitim Ekosistemi</title>
<style>
/* ==========================================================================
1. CSS KÖK DEĞİŞKENLERİ VE TEMA AYARLARI
========================================================================== */
:root {
--primary: #4f46e5;
--primary-light: #818cf8;
--primary-dark: #3730a3;
--secondary: #06b6d4;
--accent: #f59e0b;
--bg-base: #f8fafc;
--bg-surface: #ffffff;
--bg-card: rgba(255, 255, 255, 0.85);
--text-main: #0f172a;
--text-muted: #475569;
--text-light: #f8fafc;
--border: #e2e8f0;
--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 24px;
--shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
--shadow-md: 0 10px 25px -5px rgba(0,0,0,0.05), 0 8px 10px -6px rgba(0,0,0,0.05);
--shadow-lg: 0 20px 25px -5px rgba(79, 70, 229, 0.1), 0 10px 10px -5px rgba(79, 70, 229, 0.04);
--glass-bg: rgba(255, 255, 255, 0.4);
--glass-border: rgba(255, 255, 255, 0.6);
--blur: 16px;
}
[data-theme="dark"] {
--bg-base: #020617;
--bg-surface: #0b1329;
--bg-card: rgba(11, 19, 41, 0.85);
--text-main: #f1f5f9;
--text-muted: #94a3b8;
--border: #1e293b;
--glass-bg: rgba(11, 19, 41, 0.4);
--glass-border: rgba(30, 41, 59, 0.6);
--shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5);
--shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.7);
}
/* ==========================================================================
2. SIFIRLAMA VE GENEL SIFIRLAMA KURALLARI
========================================================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
scroll-behavior: smooth;
}
body {
background-color: var(--bg-base);
color: var(--text-main);
overflow-x: hidden;
line-height: 1.6;
transition: background-color 0.4s, color 0.4s;
}
.container {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
}
a {
text-decoration: none;
color: inherit;
}
ul {
list-style: none;
}
img {
max-width: 100%;
height: auto;
display: block;
}
button, input, select, textarea {
background: none;
border: none;
font: inherit;
outline: none;
}
/* Özel Scrollbar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: var(--bg-base);
}
::-webkit-scrollbar-thumb {
background: var(--primary-light);
border-radius: var(--radius-sm);
}
::-webkit-scrollbar-thumb:hover {
background: var(--primary);
}
/* ==========================================================================
3. MODERN TIPOGRAFİ VE BAŞLIKLAR
========================================================================== */
.section-title-wrapper {
text-align: center;
margin-bottom: 4rem;
position: relative;
}
.section-title {
font-size: 2.75rem;
font-weight: 800;
letter-spacing: -1px;
background: linear-gradient(135deg, var(--primary), var(--secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 1rem;
display: inline-block;
}
.section-subtitle {
color: var(--text-muted);
font-size: 1.1rem;
max-width: 600px;
margin: 0 auto;
}
/* ==========================================================================
4. ÜST NAVİGASYON BARI (HEADER & NAVBAR)
========================================================================== */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background: var(--glass-bg);
backdrop-filter: blur(var(--blur));
-webkit-backdrop-filter: blur(var(--blur));
border-bottom: 1px solid var(--glass-border);
transition: all 0.3s ease;
}
header.scrolled {
box-shadow: var(--shadow-md);
background: var(--bg-surface);
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
height: 85px;
transition: height 0.3s;
}
header.scrolled .navbar {
height: 70px;
}
.logo {
font-size: 1.75rem;
font-weight: 800;
display: flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, var(--primary), var(--secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.nav-menu {
display: flex;
align-items: center;
gap: 2.5rem;
}
.nav-link {
font-weight: 600;
font-size: 0.95rem;
color: var(--text-main);
position: relative;
padding: 0.5rem 0;
cursor: pointer;
transition: color 0.2s;
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 3px;
background: linear-gradient(90deg, var(--primary), var(--secondary));
border-radius: 2px;
transition: width 0.3s ease;
}
.nav-link:hover::after,
.nav-link.active::after {
width: 100%;
}
.nav-right {
display: flex;
align-items: center;
gap: 1.25rem;
}
.btn {
padding: 0.75rem 1.5rem;
border-radius: var(--radius-md);
font-weight: 600;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: var(--shadow-sm);
}
.btn-primary {
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
color: white;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
filter: brightness(1.1);
}
.btn-outline {
border: 2px solid var(--primary);
color: var(--primary);
}
.btn-outline:hover {
background: var(--primary);
color: white;
}
.theme-toggle {
width: 44px;
height: 44px;
border-radius: var(--radius-md);
background: var(--border);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 1.25rem;
transition: background 0.2s;
color: var(--text-main);
}
.theme-toggle:hover {
filter: brightness(0.9);
}
.menu-burger {
display: none;
flex-direction: column;
gap: 6px;
cursor: pointer;
}
.menu-burger span {
width: 30px;
height: 3px;
background-color: var(--text-main);
border-radius: 2px;
transition: 0.3s;
}
/* ==========================================================================
5. HERO (GİRİŞ BÖLÜMÜ) ANİMASYONLU BÖLÜM
========================================================================== */
.hero-section {
min-height: 100vh;
display: flex;
align-items: center;
position: relative;
padding-top: 120px;
background: radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.15), transparent 40%),
radial-gradient(circle at 10% 80%, rgba(6, 182, 212, 0.12), transparent 45%);
overflow: hidden;
}
.hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.hero-content h1 {
font-size: 4rem;
line-height: 1.1;
font-weight: 900;
letter-spacing: -2px;
margin-bottom: 1.5rem;
}
.hero-content h1 span {
background: linear-gradient(135deg, var(--primary), var(--secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-content p {
font-size: 1.2rem;
color: var(--text-muted);
margin-bottom: 2.5rem;
max-width: 540px;
}
.hero-buttons {
display: flex;
gap: 1.5rem;
}
.hero-visual {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.hero-blob {
position: absolute;
width: 500px;
height: 500px;
background: linear-gradient(45deg, rgba(79, 70, 229, 0.4), rgba(6, 182, 212, 0.4));
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
filter: blur(40px);
animation: blobAnimation 12s infinite alternate ease-in-out;
z-index: 1;
}
.hero-card {
background: var(--bg-card);
border: 1px solid var(--glass-border);
backdrop-filter: blur(var(--blur));
-webkit-backdrop-filter: blur(var(--blur));
padding: 2.5rem;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
z-index: 2;
width: 100%;
max-width: 480px;
transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);
transition: transform 0.5s ease;
}
.hero-card:hover {
transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
}
.hero-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-top: 2rem;
text-align: center;
border-top: 1px solid var(--border);
padding-top: 1.5rem;
}
.stat-box h3 {
font-size: 1.75rem;
color: var(--primary);
font-weight: 800;
}
.stat-box p {
font-size: 0.85rem;
color: var(--text-muted);
}
@keyframes blobAnimation {
0% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; transform: scale(1); }
50% { border-radius: 50% 50% 30% 70% / 50% 60% 40% 60%; transform: scale(1.1) translate(20px, -20px); }
100% { border-radius: 60% 40% 60% 40% / 40% 50% 50% 65%; transform: scale(0.9) translate(-10px, 20px); }
}
/* ==========================================================================
6. AVANTAJLAR (FEATURES) BÖLÜMÜ
========================================================================== */
.features-section {
padding: 8rem 0;
background-color: var(--bg-surface);
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2.5rem;
}
.feature-card {
background: var(--bg-base);
padding: 3rem 2rem;
border-radius: var(--radius-lg);
border: 1px solid var(--border);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(90deg, var(--primary), var(--secondary));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.feature-card:hover::before {
transform: scaleX(1);
}
.feature-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
border-color: transparent;
}
.feature-icon {
width: 60px;
height: 60px;
background: rgba(79, 70, 229, 0.1);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.75rem;
color: var(--primary);
margin-bottom: 1.5rem;
}
.feature-card h3 {
font-size: 1.35rem;
font-weight: 700;
margin-bottom: 1rem;
}
.feature-card p {
color: var(--text-muted);
font-size: 0.95rem;
}
/* ==========================================================================
7. DERS PROGRAMI MODÜLÜ (DİNAMİK TABLO)
========================================================================== */
.schedule-section {
padding: 8rem 0;
}
.schedule-controls {
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 3rem;
}
.filter-btn {
padding: 0.6rem 1.5rem;
border-radius: var(--radius-sm);
background: var(--bg-surface);
border: 1px solid var(--border);
cursor: pointer;
font-weight: 600;
transition: all 0.2s;
color: var(--text-main);
}
.filter-btn.active, .filter-btn:hover {
background: var(--primary);
color: white;
border-color: var(--primary);
}
.table-responsive {
width: 100%;
overflow-x: auto;
box-shadow: var(--shadow-md);
border-radius: var(--radius-lg);
border: 1px solid var(--border);
background: var(--bg-surface);
}
.schedule-table {
width: 100%;
border-collapse: collapse;
text-align: left;
min-width: 800px;
}
.schedule-table th, .schedule-table td {
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--border);
}
.schedule-table th {
background-color: rgba(79, 70, 229, 0.05);
color: var(--primary);
font-weight: 700;
text-transform: uppercase;
font-size: 0.85rem;
letter-spacing: 0.5px;
}
.schedule-table tr:last-child td {
border-bottom: none;
}
.schedule-subject {
font-weight: 700;
color: var(--text-main);
}
.schedule-teacher {
font-size: 0.85rem;
color: var(--text-muted);
display: block;
}
.time-badge {
background: var(--border);
padding: 0.25rem 0.6rem;
border-radius: var(--radius-sm);
font-size: 0.8rem;
font-weight: 600;
}
/* ==========================================================================
8. AKADEMİK KADRO (TEACHERS CARD)
========================================================================== */
.teachers-section {
padding: 8rem 0;
background-color: var(--bg-surface);
}
.teachers-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 2.5rem;
}
.teacher-card {
background: var(--bg-base);
border-radius: var(--radius-lg);
border: 1px solid var(--border);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: all 0.3s ease;
}
.teacher-card:hover {
transform: scale(1.03);
box-shadow: var(--shadow-lg);
}
.teacher-img-wrapper {
height: 320px;
background: linear-gradient(135deg, var(--primary-light), var(--secondary));
position: relative;
overflow: hidden;
display: flex;
align-items: flex-end;
justify-content: center;
}
/* Avatar İllüstrasyonu - Harici görsel bağımlılığını azaltmak için CSS Sanatı */
.teacher-avatar {
width: 160px;
height: 160px;
background: #fff;
border-radius: 50%;
position: relative;
margin-bottom: 2rem;
box-shadow: var(--shadow-md);
overflow: hidden;
}
.teacher-avatar::before {
content: '';
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
width: 90px;
height: 90px;
background: var(--text-muted);
border-radius: 50%;
}
.teacher-avatar::after {
content: '';
position: absolute;
top: 30px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 50px;
background: var(--primary);
border-radius: 50%;
}
.teacher-info {
padding: 1.5rem;
text-align: center;
}
.teacher-info h3 {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.25rem;
}
.teacher-info span {
color: var(--primary);
font-size: 0.9rem;
font-weight: 600;
display: block;
margin-bottom: 1rem;
}
.teacher-socials {
display: flex;
justify-content: center;
gap: 1rem;
}
.social-icon {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
font-size: 0.9rem;
}
.social-icon:hover {
background-color: var(--primary);
color: white;
border-color: var(--primary);
}
/* ==========================================================================
9. ÖĞRENCİ / VELİ BİLGİ PANELİ SİMÜLASYONU (DASHBOARD)
========================================================================== */
.portal-section {
padding: 8rem 0;
}
.portal-box {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
overflow: hidden;
display: grid;
grid-template-columns: 280px 1fr;
min-height: 600px;
}
.portal-sidebar {
background-color: rgba(79, 70, 229, 0.03);
border-right: 1px solid var(--border);
padding: 2rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.portal-user-profile {
text-align: center;
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--border);
}
.portal-user-avatar {
width: 90px;
height: 90px;
background: linear-gradient(135deg, var(--primary), var(--secondary));
border-radius: 50%;
margin: 0 auto 1rem;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2rem;
font-weight: 700;
}
.portal-user-profile h4 {
font-weight: 700;
font-size: 1.1rem;
}
.portal-user-profile p {
font-size: 0.85rem;
color: var(--text-muted);
}
.portal-menu {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.portal-menu-item {
padding: 0.85rem 1.25rem;
border-radius: var(--radius-sm);
cursor: pointer;
font-weight: 600;
color: var(--text-muted);
transition: all 0.2s;
display: flex;
align-items: center;
gap: 12px;
}
.portal-menu-item:hover, .portal-menu-item.active {
background-color: var(--primary);
color: white;
}
.portal-content {
padding: 3rem;
background-color: var(--bg-card);
}
.portal-pane {
display: none;
}
.portal-pane.active {
display: block;
}
.portal-grid-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin-bottom: 3rem;
}
.portal-stat-card {
background: var(--bg-surface);
padding: 1.5rem;
border-radius: var(--radius-md);
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
}
.portal-stat-card h5 {
font-size: 0.9rem;
color: var(--text-muted);
margin-bottom: 0.5rem;
}
.portal-stat-card p {
font-size: 1.8rem;
font-weight: 800;
color: var(--primary);
}
/* Not Listesi Listeleme Yapısı */
.grade-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.grade-item {
background: var(--bg-surface);
padding: 1.25rem;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
}
.grade-title {
font-weight: 700;
}
.grade-badge {
background-color: rgba(6, 182, 212, 0.1);
color: var(--secondary);
padding: 0.4rem 1rem;
border-radius: var(--radius-sm);
font-weight: 700;
}
/* ==========================================================================
10. KAYIT BAŞVURU FORMU MODÜLÜ (ONLINE APPLICATION)
========================================================================== */
.apply-section {
padding: 8rem 0;
background-color: var(--bg-surface);
}
.apply-box {
display: grid;
grid-template-columns: 1fr 1.2fr;
background: var(--bg-base);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.apply-info {
background: linear-gradient(135deg, var(--primary-dark), var(--primary));
color: white;
padding: 4rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.apply-info h3 {
font-size: 2.25rem;
font-weight: 800;
margin-bottom: 1.5rem;
letter-spacing: -0.5px;
}
.apply-info p {
margin-bottom: 2rem;
opacity: 0.9;
}
.apply-form-wrapper {
padding: 4rem;
background: var(--bg-surface);
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group.full-width {
grid-column: 1 / -1;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
font-size: 0.9rem;
}
.form-control {
width: 100%;
padding: 0.85rem 1.25rem;
border: 2px solid var(--border);
border-radius: var(--radius-sm);
background-color: var(--bg-base);
color: var(--text-main);
font-size: 0.95rem;
transition: all 0.3s;
}
.form-control:focus {
border-color: var(--primary);
background-color: var(--bg-surface);
box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
}
textarea.form-control {
resize: vertical;
}
/* ==========================================================================
11. FOOTER (ALT BİLGİ ALANI)
========================================================================== */
footer {
background-color: var(--bg-nav);
color: #94a3b8;
padding: 5rem 0 2rem;
border-top: 1px solid var(--border);
background: #0b1329;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr repeat(3, 1fr);
gap: 4rem;
margin-bottom: 4rem;
}
.footer-brand h4 {
color: white;
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 1rem;
}
.footer-brand p {
max-width: 320px;
margin-bottom: 1.5rem;
font-size: 0.95rem;
}
.footer-col h5 {
color: white;
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 1.5rem;
position: relative;
}
.footer-links {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.footer-links a {
font-size: 0.95rem;
transition: color 0.2s;
}
.footer-links a:hover {
color: var(--primary-light);
}
.footer-bottom {
border-top: 1px solid #1e293b;
padding-top: 2rem;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.9rem;
}
/* ==========================================================================
12. TOAST BİLDİRİM SİSTEMİ (NOTIFICATION)
========================================================================== */
.toast-container {
position: fixed;
bottom: 2rem;
right: 2rem;
z-index: 10000;
}
.toast {
background: var(--bg-surface);
color: var(--text-main);
border-left: 5px solid var(--primary);
padding: 1.25rem 2rem;
border-radius: var(--radius-sm);
box-shadow: 0 20px 25px -5px rgba(0,0,0,0.15);
margin-top: 1rem;
transform: translateX(120%);
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
display: flex;
align-items: center;
gap: 12px;
font-weight: 600;
}
.toast.show {
transform: translateX(0);
}
.toast.success { border-left-color: var(--secondary); }
.toast.warning { border-left-color: var(--accent); }
/* ==========================================================================
13. RESPONSIVE MEDYA SORGULARI (MOBİL UYUMLULUK)
========================================================================== */
@media (max-width: 1024px) {
.hero-grid { grid-template-columns: 1fr; text-align: center; gap: 3rem; }
.hero-content p { margin: 0 auto 2.5rem; }
.hero-buttons { justify-content: center; }
.portal-box { grid-template-columns: 1fr; }
.portal-sidebar { border-right: none; border-bottom: 1px solid var(--border); }
.apply-box { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}
@media (max-width: 768px) {
.menu-burger { display: flex; }
.nav-menu {
position: fixed;
top: 85px;
left: -100%;
width: 100%;
height: calc(100vh - 85px);
background: var(--bg-surface);
flex-direction: column;
padding: 4rem 2rem;
gap: 2rem;
transition: left 0.4s ease;
box-shadow: var(--shadow-lg);
}
.nav-menu.open { left: 0; }
.nav-right { display: none; } /* Mobil tasarım sadeliği */
.section-title { font-size: 2.25rem; }
.form-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
.footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }
}
</style>
</head>
<body>
<!-- 4. ÜST NAVİGASYON BARI -->
<header id="mainHeader">
<div class="container navbar">
<a href="#" class="logo">
🌐 Atlas Koleji
</a>
<ul class="nav-menu" id="navMenu">
<li><span class="nav-link active" data-target="home">Anasayfa</span></li>
<li><span class="nav-link" data-target="features">Avantajlar</span></li>
<li><span class="nav-link" data-target="schedule">Ders Programı</span></li>
<li><span class="nav-link" data-target="teachers">Kadro</span></li>
<li><span class="nav-link" data-target="portal">Öğrenci Portalı</span></li>
<li><span class="nav-link" data-target="apply">Kayıt Başvurusu</span></li>
</ul>
<div class="nav-right">
<button class="theme-toggle" id="themeBtn" title="Temayı Değiştir">🌙</button>
<a href="#apply" class="btn btn-primary">Hemen Başvur</a>
</div>
<div class="menu-burger" id="menuBurger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</header>
<!-- 5. HERO GİRİŞ BÖLÜMÜ -->
<section class="hero-section" id="home">
<div class="container hero-grid">
<div class="hero-content">
<h1>Gelecek Nesil <span>Nitelikli Eğitim</span> Modeli</h1>
<p>Atlas Koleji, yapay zeka destekli eğitim müfredatı, modern laboratuvarları ve küresel vizyonuyla öğrencilerini geleceğin dünyasına hazırlar.</p>
<div class="hero-buttons">
<a href="#apply" class="btn btn-primary">Kayıt Süreci</a>
<a href="#portal" class="btn btn-outline">Portala Giriş</a>
</div>
</div>
<div class="hero-visual">
<div class="hero-blob"></div>
<div class="hero-card">
<h2 style="font-size: 1.5rem; margin-bottom: 1rem; font-weight:700;">Duyurular & Etkinlikler</h2>
<ul style="display:flex; flex-direction:column; gap:1rem;">
<li style="border-left: 3px solid var(--secondary); padding-left: 10px;">
<strong style="font-size:0.9rem; display:block;">Bilim Şenliği 2026</strong>
<span style="font-size:0.8rem; color:var(--text-muted)">25 Mayıs Pazartesi günü kampüsümüzde.</span>
</li>
<li style="border-left: 3px solid var(--accent); padding-left: 10px;">
<strong style="font-size:0.9rem; display:block;">Robotik Turnuvası Birinciliği</strong>
<span style="font-size:0.8rem; color:var(--text-muted)">Takımımız ulusal şampiyonada altın madalya kazandı!</span>
</li>
</ul>
<div class="hero-stats">
<div class="stat-box"><h3>%98</h3><p>Başarı Oranı</p></div>
<div class="stat-box"><h3>40+</h3><p>Atölye</p></div>
<div class="stat-box"><h3>15</h3><p>Yabancı Dil</p></div>
</div>
</div>
</div>
</div>
</section>
<!-- 6. AVANTAJLAR BÖLÜMÜ -->
<section class="features-section" id="features">
<div class="container">
<div class="section-title-wrapper">
<h2 class="section-title">Neden Atlas Koleji?</h2>
<p class="section-subtitle">Öğrencilerimize standart ezber kalıplarının ötesinde, keşfederek ve üreterek öğrenebilecekleri bir ekosistem sunuyoruz.</p>
</div>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">🤖</div>
<h3>Yapay Zeka Laboratuvarı</h3>
<p>Öğrencilerimiz erken yaşta Python, makine öğrenmesi ve veri analitiği temelleriyle tanışarak algoritma dünyasına adım atarlar.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🌍</div>
<h3>Çift Dil Entegrasyonu</h3>
<p>Cambridge müfredatıyla uyumlu İngilizce eğitim modelinin yanı sıra Almanca ve Fransızca seçmeli dil modülleri sunulmaktadır.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🎨</div>
<h3>Disiplinlerarası Sanat</h3>
<p>STEAM yaklaşımı kapsamında bilim ve teknolojiyi, görsel sanatlar ve müzik prodüksiyonu atölyelerimizle harmanlıyoruz.</p>
</div>
</div>
</div>
</section>
<!-- 7. DERS PROGRAMI MODÜLÜ -->
<section class="schedule-section" id="schedule">
<div class="container">
<div class="section-title-wrapper">
<h2 class="section-title">Haftalık Ders Programı</h2>
<p class="section-subtitle">Sınıf seviyelerine göre optimize edilmiş dinamik ve interaktif ders dağılım şeması.</p>
</div>
<div class="schedule-controls">
<button class="filter-btn active" data-grade="9">9. Sınıf</button>
<button class="filter-btn" data-grade="10">10. Sınıf</button>
<button class="filter-btn" data-grade="11">11. Sınıf</button>
</div>
<div class="table-responsive">
<table class="schedule-table" id="scheduleTable">
<thead>
<tr>
<th>Saat</th>
<th>Pazartesi</th>
<th>Salı</th>
<th>Çarşamba</th>
<th>Perşembe</th>
<th>Cuma</th>
</tr>
</thead>
<tbody id="scheduleBody">
<!-- JS Tarafından doldurulacaktır -->
</tbody>
</table>
</div>
</div>
</section>
<!-- 8. AKADEMİK KADRO -->
<section class="teachers-section" id="teachers">
<div class="container">
<div class="section-title-wrapper">
<h2 class="section-title">Akademik Kadromuz</h2>
<p class="section-subtitle">Alanında uzman, uluslararası tecrübeye sahip vizyoner eğitim kadromuzla tanışın.</p>
</div>
<div class="teachers-grid" id="teachersGrid">
<!-- Dinamik Öğretmen Kartları -->
</div>
</div>
</section>
<!-- 9. ÖĞRENCİ PANELİ SİMÜLASYONU -->
<section class="portal-section" id="portal">
<div class="container">
<div class="section-title-wrapper">
<h2 class="section-title">Öğrenci & Veli Bilgi Portalı</h2>
<p class="section-subtitle">Devamsızlık, not durumu ve ödev takibini yapabileceğiniz dijital kampüs uygulaması simülasyonu.</p>
</div>
<div class="portal-box">
<aside class="portal-sidebar">
<div>
<div class="portal-user-profile">
<div class="portal-user-avatar">AD</div>
<h4>Ali Demir</h4>
<p>Öğrenci No: #1024 - 10/A</p>
</div>
<nav class="portal-menu">
<div class="portal-menu-item active" data-pane="dashboard">📊 Genel Durum</div>
<div class="portal-menu-item" data-pane="grades">📝 Not Bilgisi</div>
<div class="portal-menu-item" data-pane="attendance">📅 Devamsızlık</div>
</nav>
</div>
<p style="font-size:0.75rem; text-align:center; color:var(--text-muted)">Güvenli Çıkış</p>
</aside>
<main class="portal-content">
<!-- Panel 1: Genel Durum -->
<div class="portal-pane active" id="pane-dashboard">
<h3 style="margin-bottom: 1.5rem; font-weight:700;">Hoş Geldin, Ali!</h3>
<div class="portal-grid-stats">
<div class="portal-stat-card"><h5>Dönem Ortalaması</h5><p>88.4</p></div>
<div class="portal-stat-card"><h5>Kalan Devamsızlık</h5><p>2.5 Gün</p></div>
<div class="portal-stat-card"><h5>Aktif Ödevler</h5><p>3 Adet</p></div>
</div>
<h4 style="margin-bottom:1rem;">Son Duyuru</h4>
<div style="background:var(--bg-base); padding:1.5rem; border-radius:var(--radius-md); border:1px solid var(--border)">
<p style="font-weight:600; font-size:0.95rem; margin-bottom:0.5rem;">Matematik Proje Ödevleri Hakkında</p>
<p style="font-size:0.85rem; color:var(--text-muted)">Proje teslim tarihi revize edilerek 1 Haziran 2026 tarihine kadar uzatılmıştır. Sisteme yüklemeyi unutmayınız.</p>
</div>
</div>
<!-- Panel 2: Notlar -->
<div class="portal-pane" id="pane-grades">
<h3 style="margin-bottom: 1.5rem; font-weight:700;">Akademik Not Detayları</h3>
<div class="grade-list">
<div class="grade-item"><span class="grade-title">İleri Matematik</span><span class="grade-badge">95 / 90</span></div>
<div class="grade-item"><span class="grade-title">Fizik Laboratuvarı</span><span class="grade-badge">85 / 100</span></div>
<div class="grade-item"><span class="grade-title">Robotik Kodlama</span><span class="grade-badge">100 / 95</span></div>
<div class="grade-item"><span class="grade-title">Edebiyat ve Kompozisyon</span><span class="grade-badge">78 / 82</span></div>
</div>
</div>
<!-- Panel 3: Devamsızlık -->
<div class="portal-pane" id="pane-attendance">
<h3 style="margin-bottom: 1.5rem; font-weight:700;">Devamsızlık Takip Grafiği</h3>
<p style="margin-bottom: 1.5rem; color:var(--text-muted)">Toplam Özürsüz Devamsızlık Sınırı: 10 Gün</p>
<div style="background:var(--bg-base); padding:2rem; border-radius:var(--radius-md); text-align:center; border:1px solid var(--border)">
<div style="width:120px; height:120px; border-radius:50%; border:10px solid var(--secondary); display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; font-size:1.5rem; font-weight:800; color:var(--secondary)">
2.5 Gün
</div>
<p style="font-weight:600; font-size:0.9rem;">Tebrikler! Devamsızlık durumunuz kritik sınırın oldukça altında.</p>
</div>
</div>
</main>
</div>
</div>
</section>
<!-- 10. KAYIT BAŞVURU FORMU -->
<section class="apply-section" id="apply">
<div class="container">
<div class="apply-box">
<div class="apply-info">
<h3>Geleceğe İlk Adımı Atın</h3>
<p>Ön kayıt başvuru formunu doldurarak rehberlik uzmanlarımızla tanışma randevusu organize edebilirsiniz.</p>
<ul style="display:flex; flex-direction:column; gap:1rem; font-size:0.95rem;">
<li>✔ Bireysel Gelişim Analizi</li>
<li>✔ Kampus Turu Organizasyonu</li>
<li>✔ Bursluluk Sınavı Takvimi</li>
</ul>
</div>
<div class="apply-form-wrapper">
<form id="schoolApplyForm">
<div class="form-grid">
<div class="form-group">
<label for="studentName">Öğrenci Adı Soyadı</label>
<input type="text" id="studentName" class="form-control" required placeholder="Örn: Ahmet Yılmaz">
</div>
<div class="form-group">
<label for="targetGrade">Hedef Sınıf Seviyesi</label>
<select id="targetGrade" class="form-control" required>
<option value="9">9. Sınıf (Lise 1)</option>
<option value="10">10. Sınıf (Lise 2)</option>
<option value="11">11. Sınıf (Lise 3)</option>
<option value="12">12. Sınıf (Lise 4)</option>
</select>
</div>
<div class="form-group">
<label for="parentName">Veli Adı Soyadı</label>
<input type="text" id="parentName" class="form-control" required placeholder="Örn: Mehmet Yılmaz">
</div>
<div class="form-group">
<label for="parentPhone">İletişim Telefonu</label>
<input type="tel" id="parentPhone" class="form-control" required placeholder="0555 XXX XX XX">
</div>
<div class="form-group full-width">
<label for="parentEmail">E-Posta Adresi</label>
<input type="email" id="parentEmail" class="form-control" required placeholder="[email protected]">
</div>
<div class="form-group full-width">
<label for="notes">Eklemek İstediğiniz Notlar (Opsiyonel)</label>
<textarea id="notes" class="form-control" rows="4" placeholder="Öğrencinin özel ilgi alanları, başarıları veya belirtmek istediğiniz durumlar..."></textarea>
</div>
</div>
<button type="submit" class="btn btn-primary" style="width: 100%; justify-content: center; margin-top: 1rem;">
Ön Kayıt Başvurusunu Gönder
</button>
</form>
</div>
</div>
</div>
</section>
<!-- 11. FOOTER -->
<footer>
<div class="container footer-grid">
<div class="footer-brand">
<h4>Atlas Koleji</h4>
<p>Kritik düşünebilen, teknoloji üreten ve evrensel etik değerlere sahip dünya vatandaşları yetiştiriyoruz.</p>
</div>
<div class="footer-col">
<h5>Hızlı Menü</h5>
<ul class="footer-links">
<li><a href="#home">Anasayfa</a></li>
<li><a href="#features">Avantajlarımız</a></li>
<li><a href="#schedule">Ders Programı</a></li>
</ul>
</div>
<div class="footer-col">
<h5>Kurumsal</h5>
<ul class="footer-links">
<li><a href="#">Vizyonumuz</a></li>
<li><a href="#">Başarılarımız</a></li>
<li><a href="#">İnsan Kaynakları</a></li>
</ul>
</div>
<div class="footer-col">
<h5>İletişim Bilgileri</h5>
<p style="font-size:0.9rem; margin-bottom:0.5rem; color:#f1f5f9;">📍 İnovasyon Vadisi No:12, Merkez</p>
<p style="font-size:0.9rem; margin-bottom:0.5rem; color:#f1f5f9;">📞 444 0 123</p>
<p style="font-size:0.9rem; color:#f1f5f9;">✉ [email protected]</p>
</div>
</div>
<div class="container footer-bottom">
<p>© 2026 Atlas Koleji. Tüm Hakları Saklıdır. Geleceğin Akademisi.</p>
<p>Powered by Modern Web Framework</p>
</div>
</footer>
<!-- TOAST BİLDİRİM KONTEYNERİ -->
<div class="toast-container" id="toastContainer"></div>
<!-- ==========================================================================
14. JAVASCRIPT PROGRAMLAMA VE ETKİLEŞİM KATMANI
========================================================================== -->
<script>
// --- DATA KATMANI (MOCK DATABASES) ---
const scheduleDatabase = {
"9": [
{ time: "09:00 - 09:45", mon: ["Matematik", "Dr. Arzu T."], tue: ["Fizik", "Yalçın K."], wed: ["Kimya", "Demet A."], thu: ["Edebiyat", "Selin Ö."], fri: ["Yapay Zeka", "Can B."] },
{ time: "10:00 - 10:45", mon: ["Matematik", "Dr. Arzu T."], tue: ["Fizik", "Yalçın K."], wed: ["Kimya", "Demet A."], thu: ["Edebiyat", "Selin Ö."], fri: ["Yapay Zeka", "Can B."] },
{ time: "11:00 - 11:45", mon: ["İngilizce", "Sarah W."], tue: ["Tarih", "Ahmet M."], wed: ["Biyoloji", "Merve K."], thu: ["Coğrafya", "Zeki B."], fri: ["Müzik Prod.", "Bora H."] },
{ time: "13:00 - 13:45", mon: ["Rehberlik", "Ebru S."], tue: ["Beden Eğt.", "Okan G."], wed: ["Felsefe", "Nihal Y."], thu: ["Almanca", "Hans G."], fri: ["Görsel San.", "Ayşe D."] }
],
"10": [
{ time: "09:00 - 09:45", mon: ["Fizik", "Yalçın K."], tue: ["Matematik", "Dr. Arzu T."], wed: ["Edebiyat", "Selin Ö."], thu: ["Yapay Zeka", "Can B."], fri: ["Kimya", "Demet A."] },
{ time: "10:00 - 10:45", mon: ["Fizik", "Yalçın K."], tue: ["Matematik", "Dr. Arzu T."], wed: ["Edebiyat", "Selin Ö."], thu: ["Yapay Zeka", "Can B."], fri: ["Kimya", "Demet A."] },
{ time: "11:00 - 11:45", mon: ["Biyoloji", "Merve K."], tue: ["İngilizce", "Sarah W."], wed: ["Tarih", "Ahmet M."], thu: ["Almanca", "Hans G."], fri: ["Felsefe", "Nihal Y."] },
{ time: "13:00 - 13:45", mon: ["Coğrafya", "Zeki B."], tue: ["Müzik Prod.", "Bora H."], wed: ["Beden Eğt.", "Okan G."], thu: ["Görsel San.", "Ayşe D."], fri: ["Analitik D.", "Can B."] }
],
"11": [
{ time: "09:00 - 09:45", mon: ["Kimya", "Demet A."], tue: ["Edebiyat", "Selin Ö."], wed: ["Matematik", "Dr. Arzu T."], thu: ["Fizik", "Yalçın K."], fri: ["İngilizce", "Sarah W."] },
{ time: "10:00 - 10:45", mon: ["Kimya", "Demet A."], tue: ["Edebiyat", "Selin Ö."], wed: ["Matematik", "Dr. Arzu T."], thu: ["Fizik", "Yalçın K."], fri: ["İngilizce", "Sarah W."] },
{ time: "11:00 - 11:45", mon: ["Yapay Zeka", "Can B."], tue: ["Biyoloji", "Merve K."], wed: ["Almanca", "Hans G."], thu: ["Tarih", "Ahmet M."], fri: ["Coğrafya", "Zeki B."] },
{ time: "13:00 - 13:45", mon: ["Felsefe", "Nihal Y."], tue: ["Sosyoloji", "Ebru S."], wed: ["Görsel San.", "Ayşe D."], thu: ["Beden Eğt.", "Okan G."], fri: ["Proje Sunum", "Tüm Kadro"] }
]
};
const teachersDatabase = [
{ name: "Dr. Arzu Topal", branch: "İleri Matematik Bölüm Başkanı", icon: "📐" },
{ name: "Can Bayraktar", branch: "Yapay Zeka & Robotik Uzmanı", icon: "🤖" },
{ name: "Sarah Walker", branch: "Yabancı Diller Koordinatörü", icon: "🇬🇧" },
{ name: "Yalçın Kaya", branch: "Deneysel Fizik Eğitmeni", icon: "⚛" }
];
// --- DOM ELEMENT SEÇİCİLERİ ---
const mainHeader = document.getElementById('mainHeader');
const navMenu = document.getElementById('navMenu');
const menuBurger = document.getElementById('menuBurger');
const themeBtn = document.getElementById('themeBtn');
const scheduleBody = document.getElementById('scheduleBody');
const teachersGrid = document.getElementById('teachersGrid');
const toastContainer = document.getElementById('toastContainer');
const schoolApplyForm = document.getElementById('schoolApplyForm');
// --- UYGULAMA BAŞLATICI (INITIALIZER) ---
document.addEventListener('DOMContentLoaded', () => {
renderSchedule("9");
renderTeachers();
setupTheme();
setupScrollSpy();
});
// --- SİLİK TEMA VE KARANLIK MOD AYARLARI ---
function setupTheme() {
const savedTheme = localStorage.getItem('school_theme') || 'light';
document.documentElement.setAttribute('data-theme', savedTheme);
themeBtn.textContent = savedTheme === 'dark' ? '☀️' : '🌙';
}
themeBtn.addEventListener('click', () => {
const currentTheme = document.documentElement.getAttribute('data-theme');
const targetTheme = currentTheme === 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-theme', targetTheme);
localStorage.setItem('school_theme', targetTheme);
themeBtn.textContent = targetTheme === 'dark' ? '☀️' : '🌙';
createToast("Tema başarıyla güncellendi.", "success");
});
// --- MOBIL BURGER MENU ETKİLEŞİMİ ---
menuBurger.addEventListener('click', () => {
navMenu.classList.toggle('open');
menuBurger.classList.toggle('active');
});
// --- SCROLL ANIMASYONLARI VE SCROLLSPY ---
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
mainHeader.classList.add('scrolled');
} else {
mainHeader.classList.remove('scrolled');
}
});
function setupScrollSpy() {
const links = document.querySelectorAll('.nav-link');
links.forEach(link => {
link.addEventListener('click', (e) => {
links.forEach(l => l.classList.remove('active'));
link.classList.add('active');
const targetId = link.getAttribute('data-target');
const targetSection = document.getElementById(targetId);
if (targetSection) {
window.scrollTo({
top: targetSection.offsetTop - 85,
behavior: 'smooth'
});
}
// Mobil menüyü otomatik kapat
navMenu.classList.remove('open');
menuBurger.classList.remove('active');
});
});
}
// --- DERS PROGRAMI OLUŞTURMA MOTORU ---
function renderSchedule(grade) {
const data = scheduleDatabase[grade];
scheduleBody.innerHTML = '';
data.forEach(row => {
const tr = document.createElement('tr');
tr.innerHTML = `
<td><span class="time-badge">${row.time}</span></td>
<td><span class="schedule-subject">${row.mon[0]}</span><span class="schedule-teacher">${row.mon[1]}</span></td>
<td><span class="schedule-subject">${row.tue[0]}</span><span class="schedule-teacher">${row.tue[1]}</span></td>
<td><span class="schedule-subject">${row.wed[0]}</span><span class="schedule-teacher">${row.wed[1]}</span></td>
<td><span class="schedule-subject">${row.thu[0]}</span><span class="schedule-teacher">${row.thu[1]}</span></td>
<td><span class="schedule-subject">${row.fri[0]}</span><span class="schedule-teacher">${row.fri[1]}</span></td>
`;
scheduleBody.appendChild(tr);
});
}
// Ders Programı Filtreleme Dinleyicisi
document.querySelectorAll('.filter-btn').forEach(button => {
button.addEventListener('click', (e) => {
document.querySelectorAll('.filter-btn').forEach(btn => btn.classList.remove('active'));
button.classList.add('active');
renderSchedule(button.getAttribute('data-grade'));
});
});
// --- AKADEMİK KADRO LİSTELEME MOTORU ---
function renderTeachers() {
teachersGrid.innerHTML = '';
teachersDatabase.forEach(teacher => {
const card = document.createElement('div');
card.className = 'teacher-card';
card.innerHTML = `
<div class="teacher-img-wrapper">
<div class="teacher-avatar"></div>
<div style="position:absolute; top:20px; right:20px; font-size:2rem;">${teacher.icon}</div>
</div>
<div class="teacher-info">
<h3>${teacher.name}</h3>
<span>${teacher.branch}</span>
<div class="teacher-socials">
<div class="social-icon">🎓</div>
<div class="social-icon">✉</div>
<div class="social-icon">🔗</div>
</div>
</div>
`;
teachersGrid.appendChild(card);
});
}
// --- ÖĞRENCİ PORTAL PANELLERİ GEÇİŞ SİSTEMİ ---
document.querySelectorAll('.portal-menu-item').forEach(item => {
item.addEventListener('click', () => {
document.querySelectorAll('.portal-menu-item').forEach(i => i.classList.remove('active'));
document.querySelectorAll('.portal-pane').forEach(p => p.classList.remove('active'));
item.classList.add('active');
const targetPane = item.getAttribute('data-pane');
document.getElementById(`pane-${targetPane}`).classList.add('active');
});
});
// --- FORMA KAYIT BAŞVURUSU & DOĞRULAMA SİSTEMİ ---
schoolApplyForm.addEventListener('submit', (e) => {
e.preventDefault();
const studentName = document.getElementById('studentName').value.trim();
const parentName = document.getElementById('parentName').value.trim();
if(studentName && parentName) {
createToast(`Sayın ${parentName}, ${studentName} isimli öğrencinizin ön kaydı başarıyla alındı!`, "success");
schoolApplyForm.reset();
} else {
createToast("Lütfen zorunlu alanları eksiksiz doldurun.", "warning");
}
});
// --- TOAST BİLDİRİM FABRİKASI ---
function createToast(message, type = "success") {
const toast = document.createElement('div');
toast.className = `toast ${type}`;
toast.innerHTML = `📢 <span>${message}</span>`;
toastContainer.appendChild(toast);
// Animasyon tetikleme gecikmesi
setTimeout(() => { toast.classList.add('show'); }, 10);
// 4 saniye sonra yok etme mekanizması
setTimeout(() => {
toast.classList.remove('show');
setTimeout(() => { toast.remove(); }, 400);
}, 4000);
}
</script>
</body>
</html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atlas Koleji - Geleceğin Eğitim Ekosistemi</title>
<style>
/* ==========================================================================
1. CSS KÖK DEĞİŞKENLERİ VE TEMA AYARLARI
========================================================================== */
:root {
--primary: #4f46e5;
--primary-light: #818cf8;
--primary-dark: #3730a3;
--secondary: #06b6d4;
--accent: #f59e0b;
--bg-base: #f8fafc;
--bg-surface: #ffffff;
--bg-card: rgba(255, 255, 255, 0.85);
--text-main: #0f172a;
--text-muted: #475569;
--text-light: #f8fafc;
--border: #e2e8f0;
--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 24px;
--shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
--shadow-md: 0 10px 25px -5px rgba(0,0,0,0.05), 0 8px 10px -6px rgba(0,0,0,0.05);
--shadow-lg: 0 20px 25px -5px rgba(79, 70, 229, 0.1), 0 10px 10px -5px rgba(79, 70, 229, 0.04);
--glass-bg: rgba(255, 255, 255, 0.4);
--glass-border: rgba(255, 255, 255, 0.6);
--blur: 16px;
}
[data-theme="dark"] {
--bg-base: #020617;
--bg-surface: #0b1329;
--bg-card: rgba(11, 19, 41, 0.85);
--text-main: #f1f5f9;
--text-muted: #94a3b8;
--border: #1e293b;
--glass-bg: rgba(11, 19, 41, 0.4);
--glass-border: rgba(30, 41, 59, 0.6);
--shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5);
--shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.7);
}
/* ==========================================================================
2. SIFIRLAMA VE GENEL SIFIRLAMA KURALLARI
========================================================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
scroll-behavior: smooth;
}
body {
background-color: var(--bg-base);
color: var(--text-main);
overflow-x: hidden;
line-height: 1.6;
transition: background-color 0.4s, color 0.4s;
}
.container {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
}
a {
text-decoration: none;
color: inherit;
}
ul {
list-style: none;
}
img {
max-width: 100%;
height: auto;
display: block;
}
button, input, select, textarea {
background: none;
border: none;
font: inherit;
outline: none;
}
/* Özel Scrollbar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: var(--bg-base);
}
::-webkit-scrollbar-thumb {
background: var(--primary-light);
border-radius: var(--radius-sm);
}
::-webkit-scrollbar-thumb:hover {
background: var(--primary);
}
/* ==========================================================================
3. MODERN TIPOGRAFİ VE BAŞLIKLAR
========================================================================== */
.section-title-wrapper {
text-align: center;
margin-bottom: 4rem;
position: relative;
}
.section-title {
font-size: 2.75rem;
font-weight: 800;
letter-spacing: -1px;
background: linear-gradient(135deg, var(--primary), var(--secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 1rem;
display: inline-block;
}
.section-subtitle {
color: var(--text-muted);
font-size: 1.1rem;
max-width: 600px;
margin: 0 auto;
}
/* ==========================================================================
4. ÜST NAVİGASYON BARI (HEADER & NAVBAR)
========================================================================== */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background: var(--glass-bg);
backdrop-filter: blur(var(--blur));
-webkit-backdrop-filter: blur(var(--blur));
border-bottom: 1px solid var(--glass-border);
transition: all 0.3s ease;
}
header.scrolled {
box-shadow: var(--shadow-md);
background: var(--bg-surface);
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
height: 85px;
transition: height 0.3s;
}
header.scrolled .navbar {
height: 70px;
}
.logo {
font-size: 1.75rem;
font-weight: 800;
display: flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, var(--primary), var(--secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.nav-menu {
display: flex;
align-items: center;
gap: 2.5rem;
}
.nav-link {
font-weight: 600;
font-size: 0.95rem;
color: var(--text-main);
position: relative;
padding: 0.5rem 0;
cursor: pointer;
transition: color 0.2s;
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 3px;
background: linear-gradient(90deg, var(--primary), var(--secondary));
border-radius: 2px;
transition: width 0.3s ease;
}
.nav-link:hover::after,
.nav-link.active::after {
width: 100%;
}
.nav-right {
display: flex;
align-items: center;
gap: 1.25rem;
}
.btn {
padding: 0.75rem 1.5rem;
border-radius: var(--radius-md);
font-weight: 600;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: var(--shadow-sm);
}
.btn-primary {
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
color: white;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
filter: brightness(1.1);
}
.btn-outline {
border: 2px solid var(--primary);
color: var(--primary);
}
.btn-outline:hover {
background: var(--primary);
color: white;
}
.theme-toggle {
width: 44px;
height: 44px;
border-radius: var(--radius-md);
background: var(--border);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 1.25rem;
transition: background 0.2s;
color: var(--text-main);
}
.theme-toggle:hover {
filter: brightness(0.9);
}
.menu-burger {
display: none;
flex-direction: column;
gap: 6px;
cursor: pointer;
}
.menu-burger span {
width: 30px;
height: 3px;
background-color: var(--text-main);
border-radius: 2px;
transition: 0.3s;
}
/* ==========================================================================
5. HERO (GİRİŞ BÖLÜMÜ) ANİMASYONLU BÖLÜM
========================================================================== */
.hero-section {
min-height: 100vh;
display: flex;
align-items: center;
position: relative;
padding-top: 120px;
background: radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.15), transparent 40%),
radial-gradient(circle at 10% 80%, rgba(6, 182, 212, 0.12), transparent 45%);
overflow: hidden;
}
.hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.hero-content h1 {
font-size: 4rem;
line-height: 1.1;
font-weight: 900;
letter-spacing: -2px;
margin-bottom: 1.5rem;
}
.hero-content h1 span {
background: linear-gradient(135deg, var(--primary), var(--secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-content p {
font-size: 1.2rem;
color: var(--text-muted);
margin-bottom: 2.5rem;
max-width: 540px;
}
.hero-buttons {
display: flex;
gap: 1.5rem;
}
.hero-visual {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.hero-blob {
position: absolute;
width: 500px;
height: 500px;
background: linear-gradient(45deg, rgba(79, 70, 229, 0.4), rgba(6, 182, 212, 0.4));
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
filter: blur(40px);
animation: blobAnimation 12s infinite alternate ease-in-out;
z-index: 1;
}
.hero-card {
background: var(--bg-card);
border: 1px solid var(--glass-border);
backdrop-filter: blur(var(--blur));
-webkit-backdrop-filter: blur(var(--blur));
padding: 2.5rem;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
z-index: 2;
width: 100%;
max-width: 480px;
transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);
transition: transform 0.5s ease;
}
.hero-card:hover {
transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
}
.hero-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-top: 2rem;
text-align: center;
border-top: 1px solid var(--border);
padding-top: 1.5rem;
}
.stat-box h3 {
font-size: 1.75rem;
color: var(--primary);
font-weight: 800;
}
.stat-box p {
font-size: 0.85rem;
color: var(--text-muted);
}
@keyframes blobAnimation {
0% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; transform: scale(1); }
50% { border-radius: 50% 50% 30% 70% / 50% 60% 40% 60%; transform: scale(1.1) translate(20px, -20px); }
100% { border-radius: 60% 40% 60% 40% / 40% 50% 50% 65%; transform: scale(0.9) translate(-10px, 20px); }
}
/* ==========================================================================
6. AVANTAJLAR (FEATURES) BÖLÜMÜ
========================================================================== */
.features-section {
padding: 8rem 0;
background-color: var(--bg-surface);
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2.5rem;
}
.feature-card {
background: var(--bg-base);
padding: 3rem 2rem;
border-radius: var(--radius-lg);
border: 1px solid var(--border);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(90deg, var(--primary), var(--secondary));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.feature-card:hover::before {
transform: scaleX(1);
}
.feature-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
border-color: transparent;
}
.feature-icon {
width: 60px;
height: 60px;
background: rgba(79, 70, 229, 0.1);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.75rem;
color: var(--primary);
margin-bottom: 1.5rem;
}
.feature-card h3 {
font-size: 1.35rem;
font-weight: 700;
margin-bottom: 1rem;
}
.feature-card p {
color: var(--text-muted);
font-size: 0.95rem;
}
/* ==========================================================================
7. DERS PROGRAMI MODÜLÜ (DİNAMİK TABLO)
========================================================================== */
.schedule-section {
padding: 8rem 0;
}
.schedule-controls {
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 3rem;
}
.filter-btn {
padding: 0.6rem 1.5rem;
border-radius: var(--radius-sm);
background: var(--bg-surface);
border: 1px solid var(--border);
cursor: pointer;
font-weight: 600;
transition: all 0.2s;
color: var(--text-main);
}
.filter-btn.active, .filter-btn:hover {
background: var(--primary);
color: white;
border-color: var(--primary);
}
.table-responsive {
width: 100%;
overflow-x: auto;
box-shadow: var(--shadow-md);
border-radius: var(--radius-lg);
border: 1px solid var(--border);
background: var(--bg-surface);
}
.schedule-table {
width: 100%;
border-collapse: collapse;
text-align: left;
min-width: 800px;
}
.schedule-table th, .schedule-table td {
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--border);
}
.schedule-table th {
background-color: rgba(79, 70, 229, 0.05);
color: var(--primary);
font-weight: 700;
text-transform: uppercase;
font-size: 0.85rem;
letter-spacing: 0.5px;
}
.schedule-table tr:last-child td {
border-bottom: none;
}
.schedule-subject {
font-weight: 700;
color: var(--text-main);
}
.schedule-teacher {
font-size: 0.85rem;
color: var(--text-muted);
display: block;
}
.time-badge {
background: var(--border);
padding: 0.25rem 0.6rem;
border-radius: var(--radius-sm);
font-size: 0.8rem;
font-weight: 600;
}
/* ==========================================================================
8. AKADEMİK KADRO (TEACHERS CARD)
========================================================================== */
.teachers-section {
padding: 8rem 0;
background-color: var(--bg-surface);
}
.teachers-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 2.5rem;
}
.teacher-card {
background: var(--bg-base);
border-radius: var(--radius-lg);
border: 1px solid var(--border);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: all 0.3s ease;
}
.teacher-card:hover {
transform: scale(1.03);
box-shadow: var(--shadow-lg);
}
.teacher-img-wrapper {
height: 320px;
background: linear-gradient(135deg, var(--primary-light), var(--secondary));
position: relative;
overflow: hidden;
display: flex;
align-items: flex-end;
justify-content: center;
}
/* Avatar İllüstrasyonu - Harici görsel bağımlılığını azaltmak için CSS Sanatı */
.teacher-avatar {
width: 160px;
height: 160px;
background: #fff;
border-radius: 50%;
position: relative;
margin-bottom: 2rem;
box-shadow: var(--shadow-md);
overflow: hidden;
}
.teacher-avatar::before {
content: '';
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
width: 90px;
height: 90px;
background: var(--text-muted);
border-radius: 50%;
}
.teacher-avatar::after {
content: '';
position: absolute;
top: 30px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 50px;
background: var(--primary);
border-radius: 50%;
}
.teacher-info {
padding: 1.5rem;
text-align: center;
}
.teacher-info h3 {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.25rem;
}
.teacher-info span {
color: var(--primary);
font-size: 0.9rem;
font-weight: 600;
display: block;
margin-bottom: 1rem;
}
.teacher-socials {
display: flex;
justify-content: center;
gap: 1rem;
}
.social-icon {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
font-size: 0.9rem;
}
.social-icon:hover {
background-color: var(--primary);
color: white;
border-color: var(--primary);
}
/* ==========================================================================
9. ÖĞRENCİ / VELİ BİLGİ PANELİ SİMÜLASYONU (DASHBOARD)
========================================================================== */
.portal-section {
padding: 8rem 0;
}
.portal-box {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
overflow: hidden;
display: grid;
grid-template-columns: 280px 1fr;
min-height: 600px;
}
.portal-sidebar {
background-color: rgba(79, 70, 229, 0.03);
border-right: 1px solid var(--border);
padding: 2rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.portal-user-profile {
text-align: center;
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--border);
}
.portal-user-avatar {
width: 90px;
height: 90px;
background: linear-gradient(135deg, var(--primary), var(--secondary));
border-radius: 50%;
margin: 0 auto 1rem;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2rem;
font-weight: 700;
}
.portal-user-profile h4 {
font-weight: 700;
font-size: 1.1rem;
}
.portal-user-profile p {
font-size: 0.85rem;
color: var(--text-muted);
}
.portal-menu {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.portal-menu-item {
padding: 0.85rem 1.25rem;
border-radius: var(--radius-sm);
cursor: pointer;
font-weight: 600;
color: var(--text-muted);
transition: all 0.2s;
display: flex;
align-items: center;
gap: 12px;
}
.portal-menu-item:hover, .portal-menu-item.active {
background-color: var(--primary);
color: white;
}
.portal-content {
padding: 3rem;
background-color: var(--bg-card);
}
.portal-pane {
display: none;
}
.portal-pane.active {
display: block;
}
.portal-grid-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin-bottom: 3rem;
}
.portal-stat-card {
background: var(--bg-surface);
padding: 1.5rem;
border-radius: var(--radius-md);
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
}
.portal-stat-card h5 {
font-size: 0.9rem;
color: var(--text-muted);
margin-bottom: 0.5rem;
}
.portal-stat-card p {
font-size: 1.8rem;
font-weight: 800;
color: var(--primary);
}
/* Not Listesi Listeleme Yapısı */
.grade-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.grade-item {
background: var(--bg-surface);
padding: 1.25rem;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
}
.grade-title {
font-weight: 700;
}
.grade-badge {
background-color: rgba(6, 182, 212, 0.1);
color: var(--secondary);
padding: 0.4rem 1rem;
border-radius: var(--radius-sm);
font-weight: 700;
}
/* ==========================================================================
10. KAYIT BAŞVURU FORMU MODÜLÜ (ONLINE APPLICATION)
========================================================================== */
.apply-section {
padding: 8rem 0;
background-color: var(--bg-surface);
}
.apply-box {
display: grid;
grid-template-columns: 1fr 1.2fr;
background: var(--bg-base);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.apply-info {
background: linear-gradient(135deg, var(--primary-dark), var(--primary));
color: white;
padding: 4rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.apply-info h3 {
font-size: 2.25rem;
font-weight: 800;
margin-bottom: 1.5rem;
letter-spacing: -0.5px;
}
.apply-info p {
margin-bottom: 2rem;
opacity: 0.9;
}
.apply-form-wrapper {
padding: 4rem;
background: var(--bg-surface);
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group.full-width {
grid-column: 1 / -1;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
font-size: 0.9rem;
}
.form-control {
width: 100%;
padding: 0.85rem 1.25rem;
border: 2px solid var(--border);
border-radius: var(--radius-sm);
background-color: var(--bg-base);
color: var(--text-main);
font-size: 0.95rem;
transition: all 0.3s;
}
.form-control:focus {
border-color: var(--primary);
background-color: var(--bg-surface);
box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
}
textarea.form-control {
resize: vertical;
}
/* ==========================================================================
11. FOOTER (ALT BİLGİ ALANI)
========================================================================== */
footer {
background-color: var(--bg-nav);
color: #94a3b8;
padding: 5rem 0 2rem;
border-top: 1px solid var(--border);
background: #0b1329;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr repeat(3, 1fr);
gap: 4rem;
margin-bottom: 4rem;
}
.footer-brand h4 {
color: white;
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 1rem;
}
.footer-brand p {
max-width: 320px;
margin-bottom: 1.5rem;
font-size: 0.95rem;
}
.footer-col h5 {
color: white;
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 1.5rem;
position: relative;
}
.footer-links {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.footer-links a {
font-size: 0.95rem;
transition: color 0.2s;
}
.footer-links a:hover {
color: var(--primary-light);
}
.footer-bottom {
border-top: 1px solid #1e293b;
padding-top: 2rem;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.9rem;
}
/* ==========================================================================
12. TOAST BİLDİRİM SİSTEMİ (NOTIFICATION)
========================================================================== */
.toast-container {
position: fixed;
bottom: 2rem;
right: 2rem;
z-index: 10000;
}
.toast {
background: var(--bg-surface);
color: var(--text-main);
border-left: 5px solid var(--primary);
padding: 1.25rem 2rem;
border-radius: var(--radius-sm);
box-shadow: 0 20px 25px -5px rgba(0,0,0,0.15);
margin-top: 1rem;
transform: translateX(120%);
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
display: flex;
align-items: center;
gap: 12px;
font-weight: 600;
}
.toast.show {
transform: translateX(0);
}
.toast.success { border-left-color: var(--secondary); }
.toast.warning { border-left-color: var(--accent); }
/* ==========================================================================
13. RESPONSIVE MEDYA SORGULARI (MOBİL UYUMLULUK)
========================================================================== */
@media (max-width: 1024px) {
.hero-grid { grid-template-columns: 1fr; text-align: center; gap: 3rem; }
.hero-content p { margin: 0 auto 2.5rem; }
.hero-buttons { justify-content: center; }
.portal-box { grid-template-columns: 1fr; }
.portal-sidebar { border-right: none; border-bottom: 1px solid var(--border); }
.apply-box { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}
@media (max-width: 768px) {
.menu-burger { display: flex; }
.nav-menu {
position: fixed;
top: 85px;
left: -100%;
width: 100%;
height: calc(100vh - 85px);
background: var(--bg-surface);
flex-direction: column;
padding: 4rem 2rem;
gap: 2rem;
transition: left 0.4s ease;
box-shadow: var(--shadow-lg);
}
.nav-menu.open { left: 0; }
.nav-right { display: none; } /* Mobil tasarım sadeliği */
.section-title { font-size: 2.25rem; }
.form-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
.footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }
}
</style>
</head>
<body>
<!-- 4. ÜST NAVİGASYON BARI -->
<header id="mainHeader">
<div class="container navbar">
<a href="#" class="logo">
🌐 Atlas Koleji
</a>
<ul class="nav-menu" id="navMenu">
<li><span class="nav-link active" data-target="home">Anasayfa</span></li>
<li><span class="nav-link" data-target="features">Avantajlar</span></li>
<li><span class="nav-link" data-target="schedule">Ders Programı</span></li>
<li><span class="nav-link" data-target="teachers">Kadro</span></li>
<li><span class="nav-link" data-target="portal">Öğrenci Portalı</span></li>
<li><span class="nav-link" data-target="apply">Kayıt Başvurusu</span></li>
</ul>
<div class="nav-right">
<button class="theme-toggle" id="themeBtn" title="Temayı Değiştir">🌙</button>
<a href="#apply" class="btn btn-primary">Hemen Başvur</a>
</div>
<div class="menu-burger" id="menuBurger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</header>
<!-- 5. HERO GİRİŞ BÖLÜMÜ -->
<section class="hero-section" id="home">
<div class="container hero-grid">
<div class="hero-content">
<h1>Gelecek Nesil <span>Nitelikli Eğitim</span> Modeli</h1>
<p>Atlas Koleji, yapay zeka destekli eğitim müfredatı, modern laboratuvarları ve küresel vizyonuyla öğrencilerini geleceğin dünyasına hazırlar.</p>
<div class="hero-buttons">
<a href="#apply" class="btn btn-primary">Kayıt Süreci</a>
<a href="#portal" class="btn btn-outline">Portala Giriş</a>
</div>
</div>
<div class="hero-visual">
<div class="hero-blob"></div>
<div class="hero-card">
<h2 style="font-size: 1.5rem; margin-bottom: 1rem; font-weight:700;">Duyurular & Etkinlikler</h2>
<ul style="display:flex; flex-direction:column; gap:1rem;">
<li style="border-left: 3px solid var(--secondary); padding-left: 10px;">
<strong style="font-size:0.9rem; display:block;">Bilim Şenliği 2026</strong>
<span style="font-size:0.8rem; color:var(--text-muted)">25 Mayıs Pazartesi günü kampüsümüzde.</span>
</li>
<li style="border-left: 3px solid var(--accent); padding-left: 10px;">
<strong style="font-size:0.9rem; display:block;">Robotik Turnuvası Birinciliği</strong>
<span style="font-size:0.8rem; color:var(--text-muted)">Takımımız ulusal şampiyonada altın madalya kazandı!</span>
</li>
</ul>
<div class="hero-stats">
<div class="stat-box"><h3>%98</h3><p>Başarı Oranı</p></div>
<div class="stat-box"><h3>40+</h3><p>Atölye</p></div>
<div class="stat-box"><h3>15</h3><p>Yabancı Dil</p></div>
</div>
</div>
</div>
</div>
</section>
<!-- 6. AVANTAJLAR BÖLÜMÜ -->
<section class="features-section" id="features">
<div class="container">
<div class="section-title-wrapper">
<h2 class="section-title">Neden Atlas Koleji?</h2>
<p class="section-subtitle">Öğrencilerimize standart ezber kalıplarının ötesinde, keşfederek ve üreterek öğrenebilecekleri bir ekosistem sunuyoruz.</p>
</div>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">🤖</div>
<h3>Yapay Zeka Laboratuvarı</h3>
<p>Öğrencilerimiz erken yaşta Python, makine öğrenmesi ve veri analitiği temelleriyle tanışarak algoritma dünyasına adım atarlar.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🌍</div>
<h3>Çift Dil Entegrasyonu</h3>
<p>Cambridge müfredatıyla uyumlu İngilizce eğitim modelinin yanı sıra Almanca ve Fransızca seçmeli dil modülleri sunulmaktadır.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🎨</div>
<h3>Disiplinlerarası Sanat</h3>
<p>STEAM yaklaşımı kapsamında bilim ve teknolojiyi, görsel sanatlar ve müzik prodüksiyonu atölyelerimizle harmanlıyoruz.</p>
</div>
</div>
</div>
</section>
<!-- 7. DERS PROGRAMI MODÜLÜ -->
<section class="schedule-section" id="schedule">
<div class="container">
<div class="section-title-wrapper">
<h2 class="section-title">Haftalık Ders Programı</h2>
<p class="section-subtitle">Sınıf seviyelerine göre optimize edilmiş dinamik ve interaktif ders dağılım şeması.</p>
</div>
<div class="schedule-controls">
<button class="filter-btn active" data-grade="9">9. Sınıf</button>
<button class="filter-btn" data-grade="10">10. Sınıf</button>
<button class="filter-btn" data-grade="11">11. Sınıf</button>
</div>
<div class="table-responsive">
<table class="schedule-table" id="scheduleTable">
<thead>
<tr>
<th>Saat</th>
<th>Pazartesi</th>
<th>Salı</th>
<th>Çarşamba</th>
<th>Perşembe</th>
<th>Cuma</th>
</tr>
</thead>
<tbody id="scheduleBody">
<!-- JS Tarafından doldurulacaktır -->
</tbody>
</table>
</div>
</div>
</section>
<!-- 8. AKADEMİK KADRO -->
<section class="teachers-section" id="teachers">
<div class="container">
<div class="section-title-wrapper">
<h2 class="section-title">Akademik Kadromuz</h2>
<p class="section-subtitle">Alanında uzman, uluslararası tecrübeye sahip vizyoner eğitim kadromuzla tanışın.</p>
</div>
<div class="teachers-grid" id="teachersGrid">
<!-- Dinamik Öğretmen Kartları -->
</div>
</div>
</section>
<!-- 9. ÖĞRENCİ PANELİ SİMÜLASYONU -->
<section class="portal-section" id="portal">
<div class="container">
<div class="section-title-wrapper">
<h2 class="section-title">Öğrenci & Veli Bilgi Portalı</h2>
<p class="section-subtitle">Devamsızlık, not durumu ve ödev takibini yapabileceğiniz dijital kampüs uygulaması simülasyonu.</p>
</div>
<div class="portal-box">
<aside class="portal-sidebar">
<div>
<div class="portal-user-profile">
<div class="portal-user-avatar">AD</div>
<h4>Ali Demir</h4>
<p>Öğrenci No: #1024 - 10/A</p>
</div>
<nav class="portal-menu">
<div class="portal-menu-item active" data-pane="dashboard">📊 Genel Durum</div>
<div class="portal-menu-item" data-pane="grades">📝 Not Bilgisi</div>
<div class="portal-menu-item" data-pane="attendance">📅 Devamsızlık</div>
</nav>
</div>
<p style="font-size:0.75rem; text-align:center; color:var(--text-muted)">Güvenli Çıkış</p>
</aside>
<main class="portal-content">
<!-- Panel 1: Genel Durum -->
<div class="portal-pane active" id="pane-dashboard">
<h3 style="margin-bottom: 1.5rem; font-weight:700;">Hoş Geldin, Ali!</h3>
<div class="portal-grid-stats">
<div class="portal-stat-card"><h5>Dönem Ortalaması</h5><p>88.4</p></div>
<div class="portal-stat-card"><h5>Kalan Devamsızlık</h5><p>2.5 Gün</p></div>
<div class="portal-stat-card"><h5>Aktif Ödevler</h5><p>3 Adet</p></div>
</div>
<h4 style="margin-bottom:1rem;">Son Duyuru</h4>
<div style="background:var(--bg-base); padding:1.5rem; border-radius:var(--radius-md); border:1px solid var(--border)">
<p style="font-weight:600; font-size:0.95rem; margin-bottom:0.5rem;">Matematik Proje Ödevleri Hakkında</p>
<p style="font-size:0.85rem; color:var(--text-muted)">Proje teslim tarihi revize edilerek 1 Haziran 2026 tarihine kadar uzatılmıştır. Sisteme yüklemeyi unutmayınız.</p>
</div>
</div>
<!-- Panel 2: Notlar -->
<div class="portal-pane" id="pane-grades">
<h3 style="margin-bottom: 1.5rem; font-weight:700;">Akademik Not Detayları</h3>
<div class="grade-list">
<div class="grade-item"><span class="grade-title">İleri Matematik</span><span class="grade-badge">95 / 90</span></div>
<div class="grade-item"><span class="grade-title">Fizik Laboratuvarı</span><span class="grade-badge">85 / 100</span></div>
<div class="grade-item"><span class="grade-title">Robotik Kodlama</span><span class="grade-badge">100 / 95</span></div>
<div class="grade-item"><span class="grade-title">Edebiyat ve Kompozisyon</span><span class="grade-badge">78 / 82</span></div>
</div>
</div>
<!-- Panel 3: Devamsızlık -->
<div class="portal-pane" id="pane-attendance">
<h3 style="margin-bottom: 1.5rem; font-weight:700;">Devamsızlık Takip Grafiği</h3>
<p style="margin-bottom: 1.5rem; color:var(--text-muted)">Toplam Özürsüz Devamsızlık Sınırı: 10 Gün</p>
<div style="background:var(--bg-base); padding:2rem; border-radius:var(--radius-md); text-align:center; border:1px solid var(--border)">
<div style="width:120px; height:120px; border-radius:50%; border:10px solid var(--secondary); display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; font-size:1.5rem; font-weight:800; color:var(--secondary)">
2.5 Gün
</div>
<p style="font-weight:600; font-size:0.9rem;">Tebrikler! Devamsızlık durumunuz kritik sınırın oldukça altında.</p>
</div>
</div>
</main>
</div>
</div>
</section>
<!-- 10. KAYIT BAŞVURU FORMU -->
<section class="apply-section" id="apply">
<div class="container">
<div class="apply-box">
<div class="apply-info">
<h3>Geleceğe İlk Adımı Atın</h3>
<p>Ön kayıt başvuru formunu doldurarak rehberlik uzmanlarımızla tanışma randevusu organize edebilirsiniz.</p>
<ul style="display:flex; flex-direction:column; gap:1rem; font-size:0.95rem;">
<li>✔ Bireysel Gelişim Analizi</li>
<li>✔ Kampus Turu Organizasyonu</li>
<li>✔ Bursluluk Sınavı Takvimi</li>
</ul>
</div>
<div class="apply-form-wrapper">
<form id="schoolApplyForm">
<div class="form-grid">
<div class="form-group">
<label for="studentName">Öğrenci Adı Soyadı</label>
<input type="text" id="studentName" class="form-control" required placeholder="Örn: Ahmet Yılmaz">
</div>
<div class="form-group">
<label for="targetGrade">Hedef Sınıf Seviyesi</label>
<select id="targetGrade" class="form-control" required>
<option value="9">9. Sınıf (Lise 1)</option>
<option value="10">10. Sınıf (Lise 2)</option>
<option value="11">11. Sınıf (Lise 3)</option>
<option value="12">12. Sınıf (Lise 4)</option>
</select>
</div>
<div class="form-group">
<label for="parentName">Veli Adı Soyadı</label>
<input type="text" id="parentName" class="form-control" required placeholder="Örn: Mehmet Yılmaz">
</div>
<div class="form-group">
<label for="parentPhone">İletişim Telefonu</label>
<input type="tel" id="parentPhone" class="form-control" required placeholder="0555 XXX XX XX">
</div>
<div class="form-group full-width">
<label for="parentEmail">E-Posta Adresi</label>
<input type="email" id="parentEmail" class="form-control" required placeholder="[email protected]">
</div>
<div class="form-group full-width">
<label for="notes">Eklemek İstediğiniz Notlar (Opsiyonel)</label>
<textarea id="notes" class="form-control" rows="4" placeholder="Öğrencinin özel ilgi alanları, başarıları veya belirtmek istediğiniz durumlar..."></textarea>
</div>
</div>
<button type="submit" class="btn btn-primary" style="width: 100%; justify-content: center; margin-top: 1rem;">
Ön Kayıt Başvurusunu Gönder
</button>
</form>
</div>
</div>
</div>
</section>
<!-- 11. FOOTER -->
<footer>
<div class="container footer-grid">
<div class="footer-brand">
<h4>Atlas Koleji</h4>
<p>Kritik düşünebilen, teknoloji üreten ve evrensel etik değerlere sahip dünya vatandaşları yetiştiriyoruz.</p>
</div>
<div class="footer-col">
<h5>Hızlı Menü</h5>
<ul class="footer-links">
<li><a href="#home">Anasayfa</a></li>
<li><a href="#features">Avantajlarımız</a></li>
<li><a href="#schedule">Ders Programı</a></li>
</ul>
</div>
<div class="footer-col">
<h5>Kurumsal</h5>
<ul class="footer-links">
<li><a href="#">Vizyonumuz</a></li>
<li><a href="#">Başarılarımız</a></li>
<li><a href="#">İnsan Kaynakları</a></li>
</ul>
</div>
<div class="footer-col">
<h5>İletişim Bilgileri</h5>
<p style="font-size:0.9rem; margin-bottom:0.5rem; color:#f1f5f9;">📍 İnovasyon Vadisi No:12, Merkez</p>
<p style="font-size:0.9rem; margin-bottom:0.5rem; color:#f1f5f9;">📞 444 0 123</p>
<p style="font-size:0.9rem; color:#f1f5f9;">✉ [email protected]</p>
</div>
</div>
<div class="container footer-bottom">
<p>© 2026 Atlas Koleji. Tüm Hakları Saklıdır. Geleceğin Akademisi.</p>
<p>Powered by Modern Web Framework</p>
</div>
</footer>
<!-- TOAST BİLDİRİM KONTEYNERİ -->
<div class="toast-container" id="toastContainer"></div>
<!-- ==========================================================================
14. JAVASCRIPT PROGRAMLAMA VE ETKİLEŞİM KATMANI
========================================================================== -->
<script>
// --- DATA KATMANI (MOCK DATABASES) ---
const scheduleDatabase = {
"9": [
{ time: "09:00 - 09:45", mon: ["Matematik", "Dr. Arzu T."], tue: ["Fizik", "Yalçın K."], wed: ["Kimya", "Demet A."], thu: ["Edebiyat", "Selin Ö."], fri: ["Yapay Zeka", "Can B."] },
{ time: "10:00 - 10:45", mon: ["Matematik", "Dr. Arzu T."], tue: ["Fizik", "Yalçın K."], wed: ["Kimya", "Demet A."], thu: ["Edebiyat", "Selin Ö."], fri: ["Yapay Zeka", "Can B."] },
{ time: "11:00 - 11:45", mon: ["İngilizce", "Sarah W."], tue: ["Tarih", "Ahmet M."], wed: ["Biyoloji", "Merve K."], thu: ["Coğrafya", "Zeki B."], fri: ["Müzik Prod.", "Bora H."] },
{ time: "13:00 - 13:45", mon: ["Rehberlik", "Ebru S."], tue: ["Beden Eğt.", "Okan G."], wed: ["Felsefe", "Nihal Y."], thu: ["Almanca", "Hans G."], fri: ["Görsel San.", "Ayşe D."] }
],
"10": [
{ time: "09:00 - 09:45", mon: ["Fizik", "Yalçın K."], tue: ["Matematik", "Dr. Arzu T."], wed: ["Edebiyat", "Selin Ö."], thu: ["Yapay Zeka", "Can B."], fri: ["Kimya", "Demet A."] },
{ time: "10:00 - 10:45", mon: ["Fizik", "Yalçın K."], tue: ["Matematik", "Dr. Arzu T."], wed: ["Edebiyat", "Selin Ö."], thu: ["Yapay Zeka", "Can B."], fri: ["Kimya", "Demet A."] },
{ time: "11:00 - 11:45", mon: ["Biyoloji", "Merve K."], tue: ["İngilizce", "Sarah W."], wed: ["Tarih", "Ahmet M."], thu: ["Almanca", "Hans G."], fri: ["Felsefe", "Nihal Y."] },
{ time: "13:00 - 13:45", mon: ["Coğrafya", "Zeki B."], tue: ["Müzik Prod.", "Bora H."], wed: ["Beden Eğt.", "Okan G."], thu: ["Görsel San.", "Ayşe D."], fri: ["Analitik D.", "Can B."] }
],
"11": [
{ time: "09:00 - 09:45", mon: ["Kimya", "Demet A."], tue: ["Edebiyat", "Selin Ö."], wed: ["Matematik", "Dr. Arzu T."], thu: ["Fizik", "Yalçın K."], fri: ["İngilizce", "Sarah W."] },
{ time: "10:00 - 10:45", mon: ["Kimya", "Demet A."], tue: ["Edebiyat", "Selin Ö."], wed: ["Matematik", "Dr. Arzu T."], thu: ["Fizik", "Yalçın K."], fri: ["İngilizce", "Sarah W."] },
{ time: "11:00 - 11:45", mon: ["Yapay Zeka", "Can B."], tue: ["Biyoloji", "Merve K."], wed: ["Almanca", "Hans G."], thu: ["Tarih", "Ahmet M."], fri: ["Coğrafya", "Zeki B."] },
{ time: "13:00 - 13:45", mon: ["Felsefe", "Nihal Y."], tue: ["Sosyoloji", "Ebru S."], wed: ["Görsel San.", "Ayşe D."], thu: ["Beden Eğt.", "Okan G."], fri: ["Proje Sunum", "Tüm Kadro"] }
]
};
const teachersDatabase = [
{ name: "Dr. Arzu Topal", branch: "İleri Matematik Bölüm Başkanı", icon: "📐" },
{ name: "Can Bayraktar", branch: "Yapay Zeka & Robotik Uzmanı", icon: "🤖" },
{ name: "Sarah Walker", branch: "Yabancı Diller Koordinatörü", icon: "🇬🇧" },
{ name: "Yalçın Kaya", branch: "Deneysel Fizik Eğitmeni", icon: "⚛" }
];
// --- DOM ELEMENT SEÇİCİLERİ ---
const mainHeader = document.getElementById('mainHeader');
const navMenu = document.getElementById('navMenu');
const menuBurger = document.getElementById('menuBurger');
const themeBtn = document.getElementById('themeBtn');
const scheduleBody = document.getElementById('scheduleBody');
const teachersGrid = document.getElementById('teachersGrid');
const toastContainer = document.getElementById('toastContainer');
const schoolApplyForm = document.getElementById('schoolApplyForm');
// --- UYGULAMA BAŞLATICI (INITIALIZER) ---
document.addEventListener('DOMContentLoaded', () => {
renderSchedule("9");
renderTeachers();
setupTheme();
setupScrollSpy();
});
// --- SİLİK TEMA VE KARANLIK MOD AYARLARI ---
function setupTheme() {
const savedTheme = localStorage.getItem('school_theme') || 'light';
document.documentElement.setAttribute('data-theme', savedTheme);
themeBtn.textContent = savedTheme === 'dark' ? '☀️' : '🌙';
}
themeBtn.addEventListener('click', () => {
const currentTheme = document.documentElement.getAttribute('data-theme');
const targetTheme = currentTheme === 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-theme', targetTheme);
localStorage.setItem('school_theme', targetTheme);
themeBtn.textContent = targetTheme === 'dark' ? '☀️' : '🌙';
createToast("Tema başarıyla güncellendi.", "success");
});
// --- MOBIL BURGER MENU ETKİLEŞİMİ ---
menuBurger.addEventListener('click', () => {
navMenu.classList.toggle('open');
menuBurger.classList.toggle('active');
});
// --- SCROLL ANIMASYONLARI VE SCROLLSPY ---
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
mainHeader.classList.add('scrolled');
} else {
mainHeader.classList.remove('scrolled');
}
});
function setupScrollSpy() {
const links = document.querySelectorAll('.nav-link');
links.forEach(link => {
link.addEventListener('click', (e) => {
links.forEach(l => l.classList.remove('active'));
link.classList.add('active');
const targetId = link.getAttribute('data-target');
const targetSection = document.getElementById(targetId);
if (targetSection) {
window.scrollTo({
top: targetSection.offsetTop - 85,
behavior: 'smooth'
});
}
// Mobil menüyü otomatik kapat
navMenu.classList.remove('open');
menuBurger.classList.remove('active');
});
});
}
// --- DERS PROGRAMI OLUŞTURMA MOTORU ---
function renderSchedule(grade) {
const data = scheduleDatabase[grade];
scheduleBody.innerHTML = '';
data.forEach(row => {
const tr = document.createElement('tr');
tr.innerHTML = `
<td><span class="time-badge">${row.time}</span></td>
<td><span class="schedule-subject">${row.mon[0]}</span><span class="schedule-teacher">${row.mon[1]}</span></td>
<td><span class="schedule-subject">${row.tue[0]}</span><span class="schedule-teacher">${row.tue[1]}</span></td>
<td><span class="schedule-subject">${row.wed[0]}</span><span class="schedule-teacher">${row.wed[1]}</span></td>
<td><span class="schedule-subject">${row.thu[0]}</span><span class="schedule-teacher">${row.thu[1]}</span></td>
<td><span class="schedule-subject">${row.fri[0]}</span><span class="schedule-teacher">${row.fri[1]}</span></td>
`;
scheduleBody.appendChild(tr);
});
}
// Ders Programı Filtreleme Dinleyicisi
document.querySelectorAll('.filter-btn').forEach(button => {
button.addEventListener('click', (e) => {
document.querySelectorAll('.filter-btn').forEach(btn => btn.classList.remove('active'));
button.classList.add('active');
renderSchedule(button.getAttribute('data-grade'));
});
});
// --- AKADEMİK KADRO LİSTELEME MOTORU ---
function renderTeachers() {
teachersGrid.innerHTML = '';
teachersDatabase.forEach(teacher => {
const card = document.createElement('div');
card.className = 'teacher-card';
card.innerHTML = `
<div class="teacher-img-wrapper">
<div class="teacher-avatar"></div>
<div style="position:absolute; top:20px; right:20px; font-size:2rem;">${teacher.icon}</div>
</div>
<div class="teacher-info">
<h3>${teacher.name}</h3>
<span>${teacher.branch}</span>
<div class="teacher-socials">
<div class="social-icon">🎓</div>
<div class="social-icon">✉</div>
<div class="social-icon">🔗</div>
</div>
</div>
`;
teachersGrid.appendChild(card);
});
}
// --- ÖĞRENCİ PORTAL PANELLERİ GEÇİŞ SİSTEMİ ---
document.querySelectorAll('.portal-menu-item').forEach(item => {
item.addEventListener('click', () => {
document.querySelectorAll('.portal-menu-item').forEach(i => i.classList.remove('active'));
document.querySelectorAll('.portal-pane').forEach(p => p.classList.remove('active'));
item.classList.add('active');
const targetPane = item.getAttribute('data-pane');
document.getElementById(`pane-${targetPane}`).classList.add('active');
});
});
// --- FORMA KAYIT BAŞVURUSU & DOĞRULAMA SİSTEMİ ---
schoolApplyForm.addEventListener('submit', (e) => {
e.preventDefault();
const studentName = document.getElementById('studentName').value.trim();
const parentName = document.getElementById('parentName').value.trim();
if(studentName && parentName) {
createToast(`Sayın ${parentName}, ${studentName} isimli öğrencinizin ön kaydı başarıyla alındı!`, "success");
schoolApplyForm.reset();
} else {
createToast("Lütfen zorunlu alanları eksiksiz doldurun.", "warning");
}
});
// --- TOAST BİLDİRİM FABRİKASI ---
function createToast(message, type = "success") {
const toast = document.createElement('div');
toast.className = `toast ${type}`;
toast.innerHTML = `📢 <span>${message}</span>`;
toastContainer.appendChild(toast);
// Animasyon tetikleme gecikmesi
setTimeout(() => { toast.classList.add('show'); }, 10);
// 4 saniye sonra yok etme mekanizması
setTimeout(() => {
toast.classList.remove('show');
setTimeout(() => { toast.remove(); }, 400);
}, 4000);
}
</script>
</body>
</html>
|
|
Notes is a web-based application for online taking notes. You can take your notes and share with others people. If you like taking long notes, notes.io is designed for you. To date, over 8,000,000,000+ notes created and continuing...
With notes.io;
- * You can take a note from anywhere and any device with internet connection.
- * You can share the notes in social platforms (YouTube, Facebook, Twitter, instagram etc.).
- * You can quickly share your contents without website, blog and e-mail.
- * You don't need to create any Account to share a note. As you wish you can use quick, easy and best shortened notes with sms, websites, e-mail, or messaging services (WhatsApp, iMessage, Telegram, Signal).
- * Notes.io has fabulous infrastructure design for a short link and allows you to share the note as an easy and understandable link.
Fast: Notes.io is built for speed and performance. You can take a notes quickly and browse your archive.
Easy: Notes.io doesn’t require installation. Just write and share note!
Short: Notes.io’s url just 8 character. You’ll get shorten link of your note when you want to share. (Ex: notes.io/q )
Free: Notes.io works for 14 years and has been free since the day it was started.
You immediately create your first note and start sharing with the ones you wish. If you want to contact us, you can use the following communication channels;
Email: [email protected]
Twitter: http://twitter.com/notesio
Instagram: http://instagram.com/notes.io
Facebook: http://facebook.com/notesio
Regards;
Notes.io Team
