<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Değer Verdiklerim</title>
    <link rel="stylesheet" href="deger-verdiklerim.css">
</head>
<body>
    <!-- Hoş geldin ekranı -->
    <div class="welcome-screen" id="welcome-screen">
        <div class="welcome-content">
            <button id="start-btn">Siteyi Görmek İçin Tıklayın</button>
        </div>
    </div>

    <!-- Arka plan videosu -->
    <div class="video-background" id="video-background">
        <video id="background-video" autoplay loop muted>
            <source src="background1.mp4" type="video/mp4">
            Tarayıcınız video etiketini desteklemiyor.
        </video>
    </div>

    <!-- Profil kutularını içeren büyük şeffaf alan -->
    <div class="container" id="container" style="display: none;">
        <div class="content">
            <div class="item">
                <img src="logo1.gif" alt="Logo 1">
                <p>Adaşah</p>
            </div>
            <div class="item">
                <img src="logo3.png" alt="Logo 3">
                <p>Sarp</p>
            </div>
            <div class="item">
                <img src="logo4.gif" alt="Logo 4">
                <p>Eyşan</p>
            </div>
            <div class="item">
                <img src="logo6.png" alt="Logo 6">
                <p>Emre</p>
            </div>
        </div>
    </div>

    <!-- Menü -->
    <div class="menu">
        <button class="menu-btn">&#9776;</button> <!-- Üç yatay çizgi simgesi -->
        <div class="menu-content">
            <a href="index.html">Ana Sayfa</a>
        </div>
    </div>

    <!-- Arka plan sesi -->
    <audio id="background-audio" src="background1.mp3" preload="auto" loop>
        Tarayıcınız ses etiketini desteklemiyor.
    </audio>

    <!-- JavaScript ile video ve sesi başlatma -->
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const video = document.getElementById('background-video');
            const audio = document.getElementById('background-audio');

            // Videoyu ilk frame'de dondur
            video.addEventListener('loadeddata', () => {
                if (video.readyState >= 2) {
                    video.pause();
                    video.currentTime = 0; // Videoyu ilk frame'de dondur
                }
            });

            document.getElementById('start-btn').addEventListener('click', () => {
                // Hoş geldin ekranını gizle
                document.getElementById('welcome-screen').style.display = 'none';

                // Arka plan videosunu ve içerik alanını göster
                document.getElementById('video-background').style.display = 'block';
                document.getElementById('container').style.display = 'flex';

                // Video ve sesi başlat
                video.play();
                audio.play().catch(error => {
                    console.log("Oynatma hatası: ", error);
                });
            });

            document.querySelector('.menu-btn').addEventListener('click', () => {
                const menuContent = document.querySelector('.menu-content');
                menuContent.style.display = menuContent.style.display === 'block' ? 'none' : 'block';
            });
        });
    </script>
</body>
</html>
