MrOcto/

Octo_with_a_glasses

<!-- Arkaplan Kabarcıkları -->
<div id="bubbles-container"></div>

<!-- Navigasyon -->
<nav class="p-6 flex justify-between items-center bg-white shadow-md sticky top-0 z-50">
    <div class="flex items-center gap-3">
        <div class="w-12 h-12 bg-cyan-500 rounded-full flex items-center justify-center text-white text-2xl">
            <i class="fas fa-octopus-deploy">🐙</i>
        </div>
        <h1 class="text-2xl font-bold text-cyan-600">Mr. Octopus</h1>
    </div>
    <div class="flex gap-4">
        <button onclick="showTab('students')" class="hover:text-cyan-500 font-semibold">Öğrenciler</button>
        <button onclick="showTab('schedule')" class="hover:text-cyan-500 font-semibold">Program</button>
        <button onclick="showTab('announcements')" class="hover:text-cyan-500 font-semibold">Duyurular</button>
    </div>
</nav>

<!-- Ana İçerik -->
<main class="container mx-auto p-4 mt-6">
    
    <!-- Öğrenci Listesi -->
    <section id="students-tab" class="tab-content">
        <div class="flex justify-between items-center mb-6">
            <h2 class="text-3xl font-bold text-indigo-700">Sınıf Listesi</h2>
            <button onclick="addPointToAll()" class="btn-action">
                <i class="fas fa-star mr-2"></i>Herkes +1 Puan
            </button>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="student-grid">
            <!-- Öğrenci kartları JS ile eklenecek -->
        </div>
    </section>

    <!-- Ders Programı -->
    <section id="schedule-tab" class="tab-content hidden">
        <h2 class="text-3xl font-bold text-indigo-700 mb-6">Bugünkü Program</h2>
        <div class="octopus-card p-6">
            <div class="space-y-4">
                <div class="flex items-center p-3 border-l-4 border-cyan-500 bg-cyan-50">
                    <span class="w-20 font-bold">09:00</span>
                    <span class="flex-grow">Matematik: Ahtapot Sayıları</span>
                    <span class="status-badge">Tamamlandı</span>
                </div>
                <div class="flex items-center p-3 border-l-4 border-orange-400 bg-orange-50">
                    <span class="w-20 font-bold">10:30</span>
                    <span class="flex-grow">Sanat: Deniz Altı Boyama</span>
                    <span class="status-badge">Şimdi</span>
                </div>
                <div class="flex items-center p-3 border-l-4 border-purple-400 bg-purple-50">
                    <span class="w-20 font-bold">12:00</span>
                    <span class="flex-grow">Öğle Yemeği Molası</span>
                    <span class="text-gray-400">Bekliyor</span>
                </div>
            </div>
        </div>
    </section>

    <!-- Duyurular -->
    <section id="announcements-tab" class="tab-content hidden">
        <h2 class="text-3xl font-bold text-indigo-700 mb-6">Öğretmen Masası</h2>
        <div class="octopus-card p-6 mb-6">
            <textarea id="announcement-input" class="w-full p-4 border-2 border-gray-200 rounded-xl focus:border-cyan-500 outline-none" placeholder="Sınıfa bir mesaj bırak..."></textarea>
            <button onclick="postAnnouncement()" class="mt-4 btn-action w-full">Duyuru Yayınla</button>
        </div>
        <div id="announcements-list" class="space-y-4">
            <!-- Duyurular buraya gelecek -->
        </div>
    </section>

</main>

<!-- Bildirim Kutusu -->
<div id="toast" class="fixed bottom-10 right-10 bg-white border-2 border-cyan-500 p-4 rounded-xl shadow-2xl transform translate-y-32 transition-transform duration-300 z-[100]">
    <p id="toast-msg" class="font-bold"></p>
</div>

<script>
    // Örnek Veriler
    const students = [
        { id: 1, name: "Ali", points: 12, emoji: "🐡" },
        { id: 2, name: "Ayşe", points: 15, emoji: "🐠" },
        { id: 3, name: "Deniz", points: 10, emoji: "🐙" },
        { id: 4, name: "Zeynep", points: 18, emoji: "🐬" },
        { id: 5, name: "Can", points: 8, emoji: "🦀" },
        { id: 6, name: "Mert", points: 14, emoji: "🐳" }
    ];

    // Sayfa Yüklendiğinde
    window.onload = () => {
        renderStudents();
        createBubbles();
        addInitialAnnouncements();
    };

    // Öğrencileri Ekrana Bas
    function renderStudents() {
        const grid = document.getElementById('student-grid');
        grid.innerHTML = '';
        students.forEach(student => {
            grid.innerHTML += `
                <div class="octopus-card p-6 flex items-center justify-between">
                    <div class="flex items-center gap-4">
                        <span class="text-4xl">${student.emoji}</span>
                        <div>
                            <h3 class="text-xl font-bold">${student.name}</h3>
                            <p class="text-cyan-600 font-semibold" id="pts-${student.id}">${student.points} Yıldız</p>
                        </div>
                    </div>
                    <div class="flex flex-col gap-2">
                        <button onclick="changePoints(${student.id}, 1)" class="bg-green-100 text-green-600 p-2 rounded-lg hover:bg-green-200">
                            <i class="fas fa-plus"></i>
                        </button>
                        <button onclick="changePoints(${student.id}, -1)" class="bg-red-100 text-red-600 p-2 rounded-lg hover:bg-red-200">
                            <i class="fas fa-minus"></i>
                        </button>
                    </div>
                </div>
            `;
        });
    }

    // Puan Değiştirme
    function changePoints(id, amount) {
        const student = students.find(s => s.id === id);
        if (student) {
            student.points += amount;
            if (student.points < 0) student.points = 0;
            document.getElementById(`pts-${id}`).innerText = `${student.points} Yıldız`;
            
            if (amount > 0) {
                showToast(`${student.name} harika bir iş çıkardı! +1 Yıldız 🌟`);
            }
        }
    }

    function addPointToAll() {
        students.forEach(s => s.points++);
        renderStudents();
        showToast("Tüm sınıf birer yıldız kazandı! 🐙✨");
    }

    // Sekme Değiştirme
    function showTab(tabName) {
        document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
        document.getElementById(`${tabName}-tab`).classList.remove('hidden');
    }

    // Duyuru Sistemi
    function postAnnouncement() {
        const input = document.getElementById('announcement-input');
        const text = input.value.trim();
        if (text === "") return;

        const list = document.getElementById('announcements-list');
        const date = new Date().toLocaleTimeString('tr-TR', { hour: '2-digit', minute: '2-digit' });
        
        const div = document.createElement('div');
        div.className = "octopus-card p-4 bg-white";
        div.innerHTML = `
            <div class="flex justify-between items-start mb-2">
                <span class="font-bold text-purple-600">Öğretmen</span>
                <span class="text-xs text-gray-400">${date}</span>
            </div>
            <p>${text}</p>
        `;
        list.prepend(div);
        input.value = "";
        showToast("Mesaj sınıf duvarına asıldı! 🐚");
    }

    function addInitialAnnouncements() {
        const list = document.getElementById('announcements-list');
        list.innerHTML = `
            <div class="octopus-card p-4 bg-white opacity-75">
                <div class="flex justify-between items-start mb-2">
                    <span class="font-bold text-purple-600">Sistem</span>
                    <span class="text-xs text-gray-400">08:30</span>
                </div>
                <p>Bugün deniz altı maceraları günü! Kitaplarınızı getirmeyi unutmayın.</p>
            </div>
        `;
    }

    // Toast Mesajı
    function showToast(msg) {
        const toast = document.getElementById('toast');
        document.getElementById('toast-msg').innerText = msg;
        toast.style.transform = "translateY(0)";
        setTimeout(() => {
            toast.style.transform = "translateY(150px)";
        }, 3000);
    }

    // Kabarcık Efekti
    function createBubbles() {
        const container = document.getElementById('bubbles-container');
        setInterval(() => {
            const bubble = document.createElement('div');
            bubble.className = 'bubble';
            const size = Math.random() * 40 + 10 + 'px';
            bubble.style.width = size;
            bubble.style.height = size;
            bubble.style.left = Math.random() * 100 + 'vw';
            bubble.style.animationDuration = Math.random() * 3 + 2 + 's';
            container.appendChild(bubble);
            
            setTimeout(() => bubble.remove(), 5000);
        }, 1000);
    }
</script>