load.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>로딩 페이지</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@500;700&display=swap');
        body {
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: #ffffff;
            height: 100vh;
            overflow: hidden; /* 화면 스크롤 방지 */
        }

        .content {
            width: 100%;
            background-color: #ffffff;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 15vw; /* 상대적인 크기 사용 */
            font-weight: bold;
            text-align: center;
            padding: 10px;
            font-family: 'League Spartan', sans-serif;
        }

        @keyframes fade-in {
          0% {
            opacity: 0;
          }
          100% {
            opacity: 1;
          }
        }

        @keyframes fade-out {
          0% {
            opacity: 1;
          }
          100% {
            opacity: 0;
          }
        }

        .fade-in-out {
          animation: fade-in 1s ease-in forwards;
          animation-delay: 0s; 
        }

        .fade-out {
          animation: fade-out 1s ease-out forwards;
          animation-delay: 2s; 
        }

        /* 화면 고정 스타일 */
        .fixed-screen {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        /* 320px * 643px 화면 크기에 대한 미디어 쿼리 */
        @media (max-width: 320px) and (max-height: 643px) {
            body {
                justify-content: flex-start;
            }

            .content {
                font-size: 13vh; /* 원하는 크기로 조정 */
            }
        }
    </style>
</head>
<body>
    <div class="content fixed-screen"> <!-- .fixed-screen 클래스 추가 -->
        <p id="loading-text" class="fade-in-out">Play_Us.</p>
    </div>

    <script>
        setTimeout(function () {
            var loadingText = document.getElementById("loading-text");
            loadingText.classList.add("fade-out");

            setTimeout(function () {
                window.location.href = "https://play-us.netlify.app/login.html";
            }, 3000);
        }, 3000);
    </script>
</body>
</html>