<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自己紹介</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap" rel="stylesheet">
    <style>
        .rain {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none; /* インタラクションを防ぐ */
            overflow: hidden;
            z-index: 9998;
        }

        .raindrop {
            position: absolute;
            bottom: 100%; /* 画面の上から始める */
            width: 2px;
            height: 50px;
            background: rgba(255, 255, 255, 0.2); /* 雨粒の色と透明度 */
            animation: fall 1s linear infinite;
        }

        @keyframes fall {
            to {
                transform: translateY(100vh); /* 画面の下まで落ちる */
            }
        }

        .mosaic-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 2rem;
            z-index: 9999;
            background-size: cover;
            background-position: center;
        }


        .mosaic-overlay.fade-out {
            animation: slideDown 1s forwards; /* アニメーションを1秒間かけて動かす */
        }

        @keyframes slideDown {
            0% {
                transform: translateY(0); /* 初期位置 */
                opacity: 1; /* 透明度100% */
            }
            100% {
                transform: translateY(100%); /* 下に移動 */
                opacity: 0; /* 透明度0% */
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- モザイクオーバーレイ -->
        <div class="mosaic-overlay" id="mosaic-overlay">
            <div class="overlay-text">クリックして表示</div> <!-- モザイク中央の文字 -->
        </div>

        <!-- コンテンツ -->
        <div class="content">
            <header>
                <div class="profile-picture">
                    <img src="amo9791.jpg" alt="Amoのプロフィール写真">
                </div>
                <h1>Amo</h1>
                <p>16yo <br> discordでよく通話してるよ</p>
            </header>
            <section class="links">
                <ul>
                    <li><a href="https://open.spotify.com/" target="_blank">Spotify</a></li>
                    <li><a href="https://discord.com/" target="_blank">Discord</a></li>
                    <li><a href="https://github.com/amo_9791" target="_blank">GitHub</a></li>
                </ul>
            </section>
            <section class="music-player">
                <p>my favorite song</p>
                <audio id="music-player" controls loop>
                    <source src="ろくでなし宇宙.mp3" type="audio/mp3">
                    Your browser does not support the audio element.
                </audio>
            </section>
        </div>


        <div class="rain" id="rain"></div>

        <script>

            document.getElementById('mosaic-overlay').addEventListener('click', () => {
                const mosaicOverlay = document.getElementById('mosaic-overlay');
                

                mosaicOverlay.classList.add('fade-out');
                

                setTimeout(() => {
                    mosaicOverlay.style.display = 'none';
                }, 1000); // 1秒後に非表示
                

                const audio = document.getElementById('music-player');
                audio.play().catch(error => {
                    console.log('Audio playback was prevented by browser policy.', error);
                });
            });

            // 背景画像を設定する関数
            function setBackgroundImage(imageUrl) {
                document.body.style.backgroundImage = `url('${imageUrl}')`;
                document.body.style.backgroundSize = 'cover';
                document.body.style.backgroundPosition = 'center';
            }

            // モザイク画像を設定する関数
            function setMosaicImage(imageUrl) {
                const mosaicOverlay = document.getElementById('mosaic-overlay');
                mosaicOverlay.style.backgroundImage = `url('${imageUrl}')`;
            }


            const defaultBackgroundImage = '背景.jpg';
            setBackgroundImage(defaultBackgroundImage);
            setMosaicImage(defaultBackgroundImage); // モザイク画像もデフォルトの背景に設定


            function createRain() {
                const rainContainer = document.getElementById('rain');
                const numberOfRaindrops = 100; 
                for (let i = 0; i < numberOfRaindrops; i++) {
                    const raindrop = document.createElement('div');
                    raindrop.classList.add('raindrop');
                    raindrop.style.left = Math.random() * 100 + 'vw'; 
                    raindrop.style.animationDuration = (Math.random() * 0.5 + 0.75) + 's'; 
                    rainContainer.appendChild(raindrop);
                }
            }


            createRain();
        </script>
    </div>
</body>
</html>