index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>rk0exn's homepage</title>
    <!-- MSHTA Detection -->
    <script type="text/vbscript">
        MsgBox "このサイトへのアクセスはセキュリティ上の理由によりブロックされました。" & Chr(13) & Chr(10) & Chr(13) & Chr(10) & "MSHTAからのアクセスは許可されていません。" & Chr(13) & Chr(10) & "通常のWebブラウザをご利用ください。", 16, "Access Denied - n0xa.f5.si"
        window.close()
    </script>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="color-scheme" content="light dark">
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./global.css">
</head>

<body>
    <nav class="navbar" id="navbar">
        <div class="nav-brand">
            <a href="#home" class="nav-brand-link" id="brandLink">rk0exn</a>
        </div>

        <button class="nav-hamburger" id="navHamburger" aria-label="メニューを開く" aria-expanded="false">
            <span></span><span></span><span></span>
        </button>

        <ul class="nav-links" id="navLinks" role="list">
            <li><a href="#home" class="nav-link" data-page="home" id="home">自己紹介</a></li>
            <li><a href="#noiser" class="nav-link" data-page="noiser">noiser</a></li>
            <li><a href="#BinEdit" class="nav-link" data-page="BinEdit">BinEdit (JP)</a></li>
            <li><a href="#BinEdit-en" class="nav-link" data-page="BinEdit-en">BinEdit (EN)</a></li>
            <li><a href="#template" class="nav-link" data-page="template">Template</a></li>
            <li><a href="#bsodMaker" class="nav-link" data-page="bsodMaker">bsodMaker</a></li>
        </ul>
    </nav>

    <main class="main-content" id="mainContent" aria-live="polite">
        <div class="page-loader" id="pageLoader">
            <div class="loader-ring"></div>
        </div>
    </main>

    <footer class="footer">
        Copyright (c) 2025 - 2026 rk0exn All rights reserved.
    </footer>

    <!-- レガシーブラウザ検出: type="module"非対応環境でのみ実行される -->
    <script nomodule>
        document.documentElement.setAttribute('data-env', 'legacy');
    </script>

    <div class="fallback-overlay" id="fallbackOverlay" hidden>
        <div class="intro-container fallback-container">
            <h1 id="fallbackTitle">⚠️ このブラウザには対応していません / This browser is not supported.</h1>
            <p id="fallbackDesc"></p>
            <p id="fallbackDesc2"></p>
            <ul id="fallbackList"></ul>
        </div>
    </div>

    <noscript>
        <style>
            .fallback-overlay {
                display: flex !important;
            }
        </style>
        <div class="fallback-overlay" style="display:flex">
            <div class="intro-container fallback-container">
                <h1>⚠️ JavaScriptが無効です / JavaScript is disabled.</h1>
                <p>このサイトの表示にはJavaScriptが必要です。 / This site requires JavaScript.</p>
                <p>ブラウザの設定からJavaScriptを有効にしてください。 / Turn on JavaScript from your browser settings.</p>
            </div>
        </div>
    </noscript>

    <script type="module" src="./router.js"></script>

    <script nomodule>
        document.getElementById('fallbackOverlay').hidden = false;
    </script>

    <script>
        (function () {
            var overlay = document.getElementById('fallbackOverlay');
            var title = document.getElementById('fallbackTitle');
            var desc = document.getElementById('fallbackDesc');
            var desc2 = document.getElementById('fallbackDesc2');
            var list = document.getElementById('fallbackList');
            var browsers = [
                'Microsoft Edge（最新版 / Latest）',
                'Google Chrome（最新版 / Latest）',
                'Mozilla Firefox（最新版 / Latest）',
                'Apple Safari（最新版 / Latest）'
            ];

            function showFallback(titleText, d1, d2, items) {
                title.textContent = titleText;
                desc.textContent = d1;
                desc2.textContent = d2;
                var html = '';
                for (var i = 0; i < items.length; i++) {
                    html += '<li>' + items[i] + '</li>';
                }
                list.innerHTML = html;
                overlay.hidden = false;
            }

            if (document.documentElement.getAttribute('data-env') === 'legacy') {
                showFallback(
                    '⚠️ このブラウザには対応していません / Not supported browser',
                    'このサイトはInternet Explorerおよびレガシーブラウザに対応していません。 / This site is not supporting Internet Explorer and regacy browser.',
                    '以下のいずれかのブラウザをご利用ください。 / Use these browsers:',
                    browsers
                );
            }
        })();
    </script>
</body>

</html>