<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>英単語 POPI　スタンダード</title>
    <link rel="stylesheet" href="レベル.css"> <!-- 外部CSSファイルを適用 -->
</head>
<body>
<div class="stars">
    <div class="star" style="top: 10%; left: 10%; width: 4px; height: 4px;"></div>
    <div class="star" style="top: 20%; left: 30%; width: 2px; height: 2px;"></div>
    <div class="star" style="top: 5%; left: 50%; width: 3px; height: 3px;"></div>
    <div class="star" style="top: 30%; left: 70%; width: 5px; height: 5px;"></div>
    <div class="star" style="top: 50%; left: 90%; width: 6px; height: 6px;"></div>
    <div class="star" style="top: 40%; left: 80%; width: 4px; height: 4px;"></div>
    <div class="star" style="top: 60%; left: 20%; width: 3px; height: 3px;"></div>
    <div class="star" style="top: 80%; left: 40%; width: 7px; height: 7px;"></div>
    <div class="star" style="top: 70%; left: 60%; width: 5px; height: 5px;"></div>
    <div class="star" style="top: 90%; left: 80%; width: 6px; height: 6px;"></div>
</div>

<div class="center">
    <div class="top-row">
        <a href="#" id="beginnerBtn"><img src="../ノーマル/レベル/初級.jpg" alt="初級"></a>
        <a href="#" id="intermediateBtn"><img src="../ノーマル/レベル/中級.jpg" alt="中級"></a>
    </div>
    <div class="bottom-row">
        <a href="#" id="advancedBtn"><img src="../ノーマル/レベル/上級.jpg" alt="上級"></a>
        <a href="#" id="mixedBtn"><img src="../ノーマル/レベル/ミックス.jpg" alt="ミックス"></a>
    </div>
    <div class="bottom-row">
        <a href="../メイン画面/問題選択.html"><img src="../共有/戻る.jpg" alt="戻る"></a>
    </div>
</div>

<div class="overlay" id="overlay">
    <div class="buttons">
        <div class="svg-wrapper">
            <svg height="70" width="250" xmlns="http://www.w3.org/2000/svg">
                <rect id="shape" height="70" width="250" />
                <div id="text">
                    <a href="#" id="startBtn"><span class="spot"></span>始める</a>
                </div>
            </svg>
        </div>
        <div class="svg-wrapper">
            <svg height="70" width="250" xmlns="http://www.w3.org/2000/svg">
                <rect id="shape" height="70" width="250" />
                <div id="text">
                    <a href="../ノーマル/出題問題.html"><span class="spot"></span>出題内容を確認</a>
                </div>
            </svg>
        </div>
        <div class="svg-wrapper">
            <svg height="70" width="250" xmlns="http://www.w3.org/2000/svg">
                <rect id="shape" height="70" width="250" />
                <div id="text">
                    <a href="#" id="closeOverlay"><span class="spot"></span>戻る</a>
                </div>
            </svg>
        </div>
    </div>
</div>
<script>
const beginnerBtn = document.getElementById('beginnerBtn');
const intermediateBtn = document.getElementById('intermediateBtn');
const advancedBtn = document.getElementById('advancedBtn');
const mixedBtn = document.getElementById('mixedBtn');
const startBtn = document.getElementById('startBtn');

beginnerBtn.addEventListener('click', function(event) {
    event.preventDefault();
    document.getElementById('overlay').style.display = 'flex';
    document.body.classList.add('overlay-active');
    startBtn.href = "初級.html";
});

intermediateBtn.addEventListener('click', function(event) {
    event.preventDefault();
    document.getElementById('overlay').style.display = 'flex';
    document.body.classList.add('overlay-active');
    startBtn.href = "中級.html";
});

advancedBtn.addEventListener('click', function(event) {
    event.preventDefault();
    document.getElementById('overlay').style.display = 'flex';
    document.body.classList.add('overlay-active');
    startBtn.href = "上級.html";
});

mixedBtn.addEventListener('click', function(event) {
    event.preventDefault();
    document.getElementById('overlay').style.display = 'flex';
    document.body.classList.add('overlay-active');
    startBtn.href = "ミックス.html";
});


document.getElementById('closeOverlay').addEventListener('click', function(event) {
    event.preventDefault();
    document.getElementById('overlay').style.display = 'none';
    document.body.classList.remove('overlay-active');
});


document.getElementById('overlay').addEventListener('click', function(event) {
    if (event.target === this) {
        this.style.display = 'none';
        document.body.classList.remove('overlay-active');
    }
});
</script>
</body>
</html>