index.html

<!DOCTYPE html>

<html lang="zh-TW">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>DAI Music</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <div class="background"></div>

    <div class="content">

        <h1>DAI MUSIC</h1>

        <p>Explore the unknown through music.</p>

        <button id="enterBtn">ENTER</button>

    </div>

    <script src="script.js"></script>

</body>

</html>

style.css

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

body{

    font-family:Arial,sans-serif;

    background:#050505;

    color:white;

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}

.background{

    position:fixed;

    width:100%;

    height:100%;

    background:

        radial-gradient(circle at center,#4b008244 0%,transparent 60%),

        #050505;

    animation:pulse 8s infinite alternate;

}

.content{

    position:relative;

    text-align:center;

    z-index:1;

}

h1{

    font-size:64px;

    letter-spacing:8px;

    color:#b46cff;

    text-shadow:0 0 20px #8a2be2;

}

p{

    margin:20px 0 40px;

    color:#cccccc;

}

button{

    padding:15px 45px;

    border:2px solid #8a2be2;

    background:transparent;

    color:white;

    cursor:pointer;

    font-size:18px;

    transition:.3s;

}

button:hover{

    background:#8a2be2;

    box-shadow:0 0 25px #8a2be2;

}

@keyframes pulse{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.2);

    }

}

script.js

document.getElementById("enterBtn").addEventListener("click", () => {

    alert("歡迎來到 DAI MUSIC！");

});