<!DOCTYPE html>
<!-- 各自の自己紹介のWebページを作成せよ。-->
<!-- 日本語 -->
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <!-- キャッシュの呪文 -->
    <!-- メモ : HTML5では、使用不可になった
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store">
    <meta http-equiv="Expires" content="0">
    -->
    <!-- JS開始 -->
    <!-- JQuery読み込み -->
    <script>
        const jquerylink = "js/jquery-3.7.1.min.js" + "?time=" + new Date().getTime();
        document.write('<script src="' + jquerylink + '"><\/script>');
    </script>
    <!-- JS終了 -->
    <!-- タイトル -->
    <title> 田中　太郎</title>
</head>

<body style="background-color: white;margin: 0;padding:0;text-align: center;display: flex;flex-direction: column;">
    <!-- 伸縮率の呪文 -->
    <div style="flex: 1;padding-bottom: 3rem;">
        <!--ヘッダー開始-->
        <header>
            <div style="background-color: #333333;color: white;">
                <h1 style="margin: 0;">田中　太郎のページ</h1>
                <script>
                    // Home
                    const homelink = "./index.html" + "?time=" + new Date().getTime();
                    document.write('<a href="' + homelink + '" style="color: white; margin-right: 20px;">Home</a>');
                    // 趣味や特技
                    const specialtylink = "./index.html#specialty" + "?time=" + new Date().getTime();
                    document.write('<a href="' + specialtylink + '" style="color: white; margin-left: 20px;margin-right: 20px;">趣味や特技</a>');
                    // 悩み事
                    const worrylink = "./index.html#worry" + "?time=" + new Date().getTime();
                    document.write('<a href="' + worrylink + '" style="color: white; margin-left: 20px;">悩み事</a>');
                </script>
            </div>
        </header>
        <!--ヘッダー終了-->
        <!--メイン開始-->
        <main style="margin-top: 1rem;margin: 0 10%;">
            <!-- 自己紹介文 左に文章 右に画像で丸 -->
            <div style="display: flex;justify-content: space-between;">
                <div style="width: 50%;text-align: center;">
                    <p style="font-size: 300%;"><ruby>田中<rt></rt></ruby>　<ruby>太郎<rt></rt></ruby></p>
                    <p style="font-size: 120%;">大阪工業大学 情報科学部 ネットワークデザイン学科 学部3年</p>
                </div>
                <div style="width: auto;text-align: center;margin-top: 30px">
                    <div id="noclick">
                    <!-- 画像を表示（base64） -->
                    <img id="logoid" style="border-radius: 50%;width: 50%;border: 5px solid #333;">
                    </div>
                </div>
            </div>
            <hr>
            <!-- About me -->
            <div>
                <h2 id="aboutme">About me</h2>
                <p>日本出身の大学生です。</p>
                <p>好物は、ラーメン。</p>
                <p>最近、<a href="https://developers.cloudflare.com/cloudflare-one/" target="_blank" rel="noopener noreferrer" style="color: black;">Cloudflare Zero Trust</a>で遊んでいます。</p>
            </div>
            <hr>
            <!-- 趣味や特技 -->
            <div>
                <h2 id="specialty">趣味や特技</h2>
                <table style="width: 100%; border-collapse: collapse; margin-top: 1rem; text-align: center;">
                    <thead>
                        <tr style="background-color: #000000; color: white;">
                            <th style="padding: 10px; border: 1px solid #ddd;">趣味</th>
                            <th style="padding: 10px; border: 1px solid #ddd;">特技</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td style="padding: 10px; border: 1px solid #ddd;">動画鑑賞</td>
                            <td style="padding: 10px; border: 1px solid #ddd;">珠算</td>
                        </tr>
                        <tr>
                            <td style="padding: 10px; border: 1px solid #ddd;">散歩</td>
                            <td style="padding: 10px; border: 1px solid #ddd;">水泳</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <hr>
            <!-- 悩み事 -->
            <div>
                <h2 id="worry">悩み事</h2>
                <p>ノートパソコンのカメラが壊れました。</p>
            </div>
        </main>
        <!--メイン終了-->
    </div>
    <!--フッター開始-->
    <footer style="position: fixed;bottom: 0;width: 100%;">
        <div style="background-color: #333333;color: white;">
            <p style="margin: 0;"> 田中　太郎</p>
        </div>
    </footer>
    <!--フッター終了-->
    <!--JS開始-->
    <script>
        // ロゴをbase64で表示（CORSで失敗することを考慮してfail処理も行う）
        $.get("img/hito.txt" + "?time=" + new Date().getTime(), function (data) {
            $("#logoid").attr("src", "data:image/png;base64," + data);
        }).fail(function () {
            $("#logoid").attr("src", "img/noimage.svg" + "?time=" + new Date().getTime()).attr("style", "").attr("width", "50%").attr("alt", "画像がありません").attr("style", "display: block;margin-left: auto;margin-right: auto;margin-top: 10%;margin-bottom: 10%;");
        });
        // 右クリック禁止
        $("#noclick").attr("onselectstart", "return false;").attr("oncontextmenu", "return false;").attr("ondragstart", "return false").attr("style", "user-drag: none; -webkit-user-drag: none; -moz-user-select: none;");
    </script>
    <!--JS終了-->
</body>

</html>