<?php?>
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="SyunServer">
    <meta name="keywords" content="Minecraft,マインクラフト,マイクラ,アスレチック,統合版,サーバー,マルチ,アスレサーバー">
    <title>SyunServer</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" integrity="sha512-jnSuA4Ss2PkkikSOLtYs8BlYIeeIK1h99ty4YfvRPAlzr377vr3CXDb7sb7eEEBYjDtcYj+AjBH3FLv5uSJuXg==" crossorigin="anonymous" referrerpolicy="no-referrer">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer">
    <link href="assets/css/style.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg sticky-top navbar-light webnav">
        <div class="container">
            <a class="navbar-brand" href="/">Syunserver</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                    <a id="nav-li-home" class="nav-link" href="/index.php">Home</a>
                </li>
                <li class="nav-item">
                    <a id="nav-li-athletic" class="nav-link" href="/athletic.php">アスレチック紹介</a>
                </li>
                <li class="nav-item">
                    <a id="nav-li-rules" class="nav-link" href="/rules.php">ルール</a>
                </li>
                <li class="nav-item">
                    <a id="nav-li-qa" class="nav-link" href="/help.php">Q&A</a>
                </li>
                </ul>
                <ul class="navbar-nav justify-content-end">
                    <li class="nav-item ms-md-1">
                        <a class="nav-link" href="https://www.youtube.com/@syun919" target="_blank" rel="noopener">
                            <i class="fab fa-youtube fa-lg" aria-hidden="true" style="color: #FF0000;"></i>
                        </a>
                    </li>
                    <li class="nav-item ms-md-1">
                        <a class="nav-link" href="https://www.twitch.tv/syun919" target="_blank" rel="noopener">
                            <i class="fab fa-twitch fa-lg" aria-hidden="true" style="color:rgb(145, 70, 255);"></i>
                        </a>
                    </li>
                    <li class="nav-item ms-md-1">
                        <a class="nav-link" href="https://x.com/syun919_YT" target="_blank" rel="noopener">
                            <i class="fab fa-x-twitter fa-lg" aria-hidden="true" style="color: #1DA1F2;"></i>
                        </a>
                    </li>
                    <li class="nav-item ms-md-1">
                        <a class="nav-link" href="https://www.tiktok.com/@syun919_yt" target="_blank" rel="noopener">
                            <i class="fab fa-tiktok fa-lg" aria-hidden="true" style="color: #000000;"></i>
                        </a>
                    </li>
                    </li>
                    <li class="nav-item ms-md-1">
                        <a class="nav-link" href="https://discord.gg/qEUHtDdWnj" target="_blank" rel="noopener">
                            <i class="fab fa-discord fa-lg" aria-hidden="true" style="color:rgb(114, 137, 217);"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 画像をナビゲーションバーの下に配置 -->
<div class="container-fluid position-relative">
    <img src="\assets\images\lobby.webp" alt="Lobby Image" class="img-fluid w-100">
    <!-- テキストを画像の上に配置 -->
    <div class="position-absolute top-50 start-50 translate-middle text-center text-white">
        <h1>SyunServer</h1>
        <p class="fs-4">クロスプレイ対応アスレチックサーバー!</p>
    </div>
</div>

<!-- 今すぐプレイ！とサーバーアドレス -->
<div class="container mt-5 text-center">
    <h2 class="mb-3">今すぐプレイ！</h2>
    <div class="row justify-content-center">
        <!-- Java版サーバーアドレス -->
        <div class="col-md-6 mb-3">
            <div class="d-flex align-items-center justify-content-center border p-3 rounded bg-light" onclick="copyToClipboard('javaServerAddress')" style="cursor: pointer;">
                <span class="me-3 fw-bold">java版:</span>
                <span id="javaServerAddress" class="fw-bold">mc.syunserver.jp</span>
            </div>
        </div>
        <!-- 統合版サーバーアドレス -->
        <div class="col-md-6 mb-3">
            <div class="d-flex align-items-center justify-content-center border p-3 rounded bg-light" onclick="copyToClipboard('bedrockServerAddress')" style="cursor: pointer;">
                <span class="me-3 fw-bold">統合版:</span>
                <span id="bedrockServerAddress" class="fw-bold">bedrock.syunserver.com</span>
            </div>
        </div>
    </div>
</div>

<!-- コピー機能のスクリプト -->
<script>
    function copyToClipboard(elementId) {
        const textToCopy = document.getElementById(elementId).innerText;
        navigator.clipboard.writeText(textToCopy)
            .then(() => {
                showToast(); // トースト通知を表示
            })
            .catch(err => console.error('コピーに失敗しました: ', err));
    }

    function showToast() {
        const toast = document.getElementById('toast');
        toast.style.display = 'block';
        setTimeout(() => {
            toast.style.display = 'none';
        }, 4000); // 4秒後に非表示
    }

    function hideToast() {
        const toast = document.getElementById('toast');
        toast.style.display = 'none';
    }
</script>

<!-- トースト通知 -->
<div id="toast" class="toast align-items-center text-white bg-success border-0 position-fixed bottom-0 end-0 p-3" style="display: none; z-index: 1055;">
    <div class="d-flex">
        <div class="toast-body">
            サーバーアドレスをコピーしました！
        </div>
        <button type="button" class="btn-close btn-close-white me-2 m-auto" aria-label="Close" onclick="hideToast()"></button>
    </div>
</div>

<!-- カードを追加 -->
<div class="container mt-5">
    <div class="row">
        <!-- 参加方法カード -->
        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-body text-center">
                    <h5 class="card-title">参加方法</h5>
                    <p class="card-text">サーバーへの参加方法はこちらをご覧ください。</p>
                    <a href="/howtojoin.php" class="btn btn-primary">詳細を見る</a>
                </div>
            </div>
        </div>
        <!-- アスレチックカード -->
        <div class="col-md-6 mb-4">
            <div class="card">
                <img src="\assets\images\athletic.webp" class="card-img-top" alt="アスレチック">
                <div class="card-body text-center">
                    <h5 class="card-title">アスレチック</h5>
                    <p class="card-text">アスレチックの詳細はこちらをご覧ください。</p>
                    <a href="/athletic.php" class="btn btn-primary">詳細を見る</a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- お知らせ欄 -->
<div class="container mt-5">
    <div class="card notice">
        <div class="card-body">
            <h5 class="card-title">お知らせ</h5>
            <div class="card mt-3">
                <div class="card-body">
                    <h6 class="card-title">サイトオープン！</h6>
                    <p class="card-text">SyunServerの公式サイトがオープンしました！</p>
                    <p class="text-end text-muted">2025年4月22日</p>
                </div>
            </div>
            <div class="card mt-3">
                <div class="card-body">
                    <h6 class="card-title">新しいアスレチック追加！</h6>
                    <p class="card-text">新しいアスレチックコースが追加されました。ぜひ挑戦してみてください！</p>
                    <p class="text-end text-muted">2025年4月20日</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- コピー機能のスクリプト -->
<script>
    function copyServerAddress() {
        const serverAddress = document.getElementById('serverAddress');
        serverAddress.select();
        serverAddress.setSelectionRange(0, 99999); // モバイル対応
        navigator.clipboard.writeText(serverAddress.value)
            .then(() => alert('サーバーアドレスをコピーしました！'))
            .catch(err => alert('コピーに失敗しました: ' + err));
    }
</script>

<footer>
    <p>&copy; 2025 yuyuka / SyunServer. All Rights Reserved.</p>
    <h2>利用しているソフトウェアのライセンスについて</h2>

<h3>Bootstrap</h3>
<p>Bootstrap は MIT ライセンスの下で提供されています。詳細なライセンス条文は <a href="https://opensource.org/licenses/MIT">こちら</a> をご覧ください。</p>
<h3>Font Awesome</h3>
<p>Font Awesome のライセンスはバージョンや種類によって異なります。詳細は <a href="https://fontawesome.com/license">こちら</a> をご覧ください。</p>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>
</body>
</html>