<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🏝️ トモダチわくわくプロフィールメーカー</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <style>
        :root {
            --nintendo-yellow: #fff100;
            --player-red: #ff4b4b;
            --friend-blue: #4b80ff;
        }

        body {
            font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
            background-color: var(--nintendo-yellow);
            margin: 0; padding: 10px; color: #333; min-height: 100vh; position: relative;
        }

        body::before {
            content: "🏝️"; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
            font-size: 50vw; opacity: 0.15; z-index: -1; pointer-events: none;
        }

        .container {
            max-width: 700px; margin: 0 auto; background: rgba(255, 255, 255, 0.95);
            padding: 20px; border-radius: 25px; box-shadow: 0 8px 20px rgba(0,0,0,0.1);
        }

        header { text-align: center; margin-bottom: 25px; }
        h1 { font-size: 1.4rem; color: #d40000; margin-bottom: 5px; }
        .subtitle { font-size: 0.85rem; font-weight: bold; }

        .nav-btn {
            display: block; width: 100%; padding: 12px; background: #444; color: white;
            border: none; border-radius: 10px; font-size: 1rem; font-weight: bold; cursor: pointer; margin-bottom: 20px;
        }

        .form-group { margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px; }
        label { display: block; font-weight: bold; margin-bottom: 8px; font-size: 0.95rem; }
        input[type="text"], input[type="number"], select, textarea {
            width: 100%; padding: 10px; border: 2px solid #ddd; border-radius: 8px; box-sizing: border-box; font-size: 1rem;
        }

        .personality-input-section { background: #fdfdfd; padding: 15px; border-radius: 15px; border: 2px solid var(--friend-blue); margin: 20px 0; }
        .p-row { display: grid; grid-template-columns: 70px 1fr 70px; align-items: center; gap: 5px; margin-bottom: 12px; }
        .p-row-title { font-weight: bold; color: #333; margin-bottom: 5px; grid-column: 1 / 4; }
        .p-label { font-size: 0.75rem; color: #666; }
        .p-options { display: flex; justify-content: space-between; }
        .p-options input[type="radio"] { appearance: none; width: 20px; height: 20px; border: 2px solid #999; border-radius: 4px; background: white; cursor: pointer; margin: 0; }
        .p-options input[type="radio"]:checked { border-color: #d40000; background: #fff; position: relative; }
        .p-options input[type="radio"]:checked::after { content: "✔"; color: #d40000; position: absolute; top: -4px; left: 1px; font-size: 16px; font-weight: bold; }

        .preview-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 20px 0; }
        #preview-card {
            width: 500px; background: white; border: 8px solid var(--nintendo-yellow); border-radius: 20px; padding: 20px; box-sizing: border-box; position: relative; margin: 0 auto;
        }
        .card-header { text-align: center; border-bottom: 2px solid #eee; padding-bottom: 10px; margin-bottom: 10px; font-weight: bold; font-size: 1.2rem; }
        .card-main { display: flex; gap: 15px; }
        .card-info { flex: 1; font-size: 0.85rem; line-height: 1.4; }
        .card-photo-area { 
            width: auto; 
            max-width: 120px; 
            text-align: center; 
            border: 2px solid #eee; 
            border-radius: 8px; 
            background: #fafafa; 
            padding: 5px; 
            box-sizing: border-box; 
        }
        #card-photo { 
            width: 100%; 
            max-width: 100px; 
            height: auto; 
            border: none; 
            border-radius: 0; 
            background: none; 
            display: block; 
            margin: 0 auto; 
        }
        #card-memo-out { 
            width: 100px; 
            font-size: 0.7rem; 
            color: #666; 
            word-break: break-all; 
            margin-top: 5px; 
            line-height: 1.2; 
            text-align: left; 
        }

        .card-personality-visual { margin-top: 15px; background: #fff; padding: 10px; border-radius: 10px; border-top: 1px solid #eee; }
        .p-visual-header { color: #d40000; font-weight: bold; font-size: 0.85rem; margin-bottom: 5px; }
        .p-visual-row { display: grid; grid-template-columns: 85px 45px 1fr 45px; align-items: center; margin-bottom: 4px; font-size: 0.65rem; }
        .p-visual-title { text-align: right; font-weight: bold; color: #333; padding-right: 5px; }
        .p-visual-label { color: #666; text-align: center; }
        .p-visual-boxes { display: flex; justify-content: space-between; padding: 0 5px; }
        .v-box { width: 12px; height: 12px; border: 1px solid #333; position: relative; background: #fff; }
        .v-box.checked { background: var(--player-red); border-color: var(--player-red); }
        .v-box.checked::after { content: ""; position: absolute; top: 2px; left: 2px; width: 6px; height: 6px; background: white; border-radius: 50%; }

        .save-btn { display: block; width: 100%; padding: 15px; background: #28a745; color: white; border: none; border-radius: 10px; font-size: 1.2rem; font-weight: bold; cursor: pointer; margin-top: 20px; }

        footer { margin-top: 40px; text-align: center; font-size: 0.85rem; border-top: 2px solid #eee; padding-top: 20px; }
        .owner-box { background: #fff; padding: 15px; border-radius: 15px; margin-bottom: 15px; border: 1px solid #ddd; text-align: center; }
        .owner-box a { color: #0066cc; text-decoration: none; font-weight: bold; }

        .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 2000; overflow-y: auto; }
        .modal-content { background: white; width: 85%; max-width: 600px; margin: 20px auto; padding: 25px; border-radius: 20px; position: relative; text-align: left; }
        .close { position: absolute; top: 10px; right: 20px; font-size: 30px; cursor: pointer; }
        .player-text { color: var(--player-red); font-weight: bold; }
        .friend-text { color: var(--friend-blue); font-weight: bold; }
        .copy-btn { background: var(--player-red); color: white; border: none; padding: 8px 15px; border-radius: 5px; cursor: pointer; margin: 5px 0; font-weight: bold; width: auto; }
    </style>
</head>
<body>

<div class="container">
    <header>
        <h1>🏝️ トモダチわくわくプロフィールメーカー</h1>
        <p class="subtitle">お友達にURLを送って、あなたの島に招待してみよう！</p>
    </header>

    <button class="nav-btn" onclick="openModal('about-modal')">🏝️ このサイトについて / つかいかた</button>

    <div class="form-group">
        <label>ニックネーム</label>
        <input type="text" id="in-nickname" oninput="updateCard()">
    </div>

    <div class="form-group">
        <label>お誕生日（年は空欄でもOK）</label>
        <div style="display:flex; gap:5px; align-items:center;">
            <input type="number" id="in-year" placeholder="年" style="flex:1.5;" oninput="validateDate()"> 年 
            <input type="number" id="in-month" min="1" max="12" placeholder="月" style="flex:1;" oninput="validateDate()"> 月 
            <input type="number" id="in-day" min="1" max="31" placeholder="日" style="flex:1;" oninput="validateDate()"> 日
        </div>
    </div>

    <div class="form-group">
        <label>性別</label>
        <select id="in-gender" onchange="updateCard()">
            <option value="">選択してね</option>
            <option value="男">男</option>
            <option value="女">女</option>
            <option value="その他">その他</option>
        </select>
    </div>

    <div class="form-group">
        <label>あなたの顔を教えてください<br><span style="font-size:0.8rem; font-weight:normal; color:#666;">（作ってもらいたいMiiのもとになるイラスト、アイコン、顔写真等をアップロードして下さい）</span></label>
        <input type="file" accept="image/*" onchange="loadImage(this)">
    </div>

    <div class="form-group">
        <label>身長・体型情報・その他見た目の補足メモ</label>
        <textarea id="in-memo" placeholder="身長170㎝です、Xのアイコンにしている画像です、○○のキャラがベースです等" oninput="updateCard()"></textarea>
    </div>

    <div class="form-group"><label>自分のよび方（ぼく・わたし等）</label><input type="text" id="in-call" oninput="updateCard()"></div>
    <div class="form-group"><label>声の大きさ</label><select id="in-voice" onchange="updateCard()"><option value="">選択してね</option><option>大きい</option><option>ふつう</option><option>小さい</option></select></div>
    <div class="form-group"><label>寝相</label><select id="in-sleep" onchange="updateCard()"><option value="">選択してね</option><option>よい</option><option>わるい</option></select></div>
    <div class="form-group"><label>食欲</label><select id="in-eat" onchange="updateCard()"><option value="">選択してね</option><option>大食い</option><option>ふつう</option><option>少食</option></select></div>
    <div class="form-group"><label>口ぐせ（複数OK・たくさん書いてね）</label><input type="text" id="in-phrase" oninput="updateCard()"></div>
    <div class="form-group"><label>恋愛対象</label><select id="in-love" onchange="updateCard()"><option value="">選択してね</option><option>異性</option><option>同性</option><option>異性+同性</option><option>恋愛なし</option></select></div>
    <div class="form-group"><label>海に向かって叫びたい言葉</label><input type="text" id="in-shout" oninput="updateCard()"></div>

    <div class="personality-input-section">
        <label>性格 当てはまるところに☑（8段階）</label>
        <div id="p-inputs"></div>
    </div>

    <div class="preview-wrapper">
        <div id="preview-card">
            <div class="card-header">🏝️ トモダチわくわくプロフィール</div>
            <div class="card-main">
                <div class="card-info" id="card-text-info"></div>
                <div class="card-photo-area">
                    <img id="card-photo" src="">
                    <div id="card-memo-out"></div>
                </div>
            </div>
            <div class="card-personality-visual" id="p-visual-area"></div>
        </div>
    </div>

    <button class="save-btn" onclick="saveImage()">🖼️ 画像を保存する</button>

    <button class="share-btn" onclick="shareX()" style="display: block; width: 100%; padding: 15px; background: #000; color: white; border: none; border-radius: 10px; font-size: 1.2rem; font-weight: bold; cursor: pointer; margin-top: 10px;">𝕏 このサイトをシェアする</button>

    <footer>
            <div class="owner-box">
                運営者: たけだーく<br>
                X : <a href="https://x.com/takedark_labo" target="_blank">@takedark_labo</a> ／ YouTube : <a href="https://www.youtube.com/@%E3%81%9F%E3%81%91%E3%81%A0%E3%83%BC%E3%81%8Flab1126" target="_blank">たけだーく LAB</a> <br>
                フォロー・チャンネル登録お願いします

                <div style="text-align: center; margin-top: 20px;">
                    <a href="https://ko-fi.com/takedark" target="_blank">
                        <img height="36" style="border:0px;height:36px;" src="https://storage.ko-fi.com/cdn/kofi3.png?v=3" border="0" alt="Ko-fi" />
                        <br>
                        <span style="font-size: 12px; color: #666;">サイト維持にご協力ください</span>
                    </a>
                </div>
            </div>

        <p><span style="text-decoration:underline; cursor:pointer;" onclick="openModal('policy-modal')">プライバシーポリシー 兼 ご利用規約</span></p>
        <p>© 2026 🏝️ トモダチわくわくプロフィールメーカー</p>
    </footer>
</div>

<div id="about-modal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal('about-modal')">&times;</span>
        <h2>【このサイトについて】</h2>
        <p>Nintendo Switch ソフト『トモダチコレクション わくわく生活』で、新しい住人（Mii）を登録する際に必要なプロフィールや性格の情報を、お友達からスムーズに集めるためのプロフィールカード作成ツールです。</p>
        <h2>【つかいかた】</h2>
        <p class="player-text">・プレイヤーは、このサイトのURLをお友達に送ります。下のボタンでURLをコピーして送ってください。<br><span style="color: #d40000; font-size: 0.8rem;">※LINE等のアプリ内ブラウザでは画像保存ができない場合があるため、SafariやChrome等のブラウザで開くよう伝えてください。</span></p>
        <button class="copy-btn" onclick="copyURL()">🏝 URLをコピーしてブラウザで開く</button>
        <p class="friend-text">・URLを教えられた友達はパソコンまたはスマホからこのサイトにアクセスし、プロフィールを入力して画像を生成します。</p>
        <p class="friend-text">・生成されたプロフィール画像を、URLを教えてくれた友達に送信します。</p>
        <p class="player-text">・友達から届いたプロフィール画像をもとにプレイヤーはmiiを作成し、新しい住人を迎え入れましょう！</p>
        <h2>【ご利用にあたって】</h2>
        <p>・自由に使ってね！<br>完成したプロフィールカードは、SNSでの自己紹介投稿など、個人利用の範囲で自由にお使いいただけます。</p>
        <p>・データは安心！<br>入力した名前やアップロードした画像は、あなたのブラウザ内だけで処理されます。サーバーに送信・保存されることは一切ありません。</p>
        <h2>【運営者情報】</h2>
        <p>このサイトは たけだーくが個人のファン活動として運営しています。<br>
        運営者: たけだーく<br>
        X : <a href="https://x.com/takedark_labo" target="_blank">@takedark_labo</a><br>
        YouTube : <a href="https://www.youtube.com/@%E3%81%9F%E3%81%91%E3%81%A0%E3%83%BC%E3%81%8Flab1126" target="_blank">たけだーく LAB</a></p>
    </div>
</div>

<div id="policy-modal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal('policy-modal')">&times;</span>
        <h2>📋 プライバシーポリシー 兼 ご利用規約</h2>
        <p><strong>1. データの取り扱いについて</strong><br>本サービスは、利用者が入力したプロフィール情報やアップロードした画像を、サーバーへ送信・保存することはありません。すべてブラウザ上で完結します。</p>
        <p><strong>2. 知的財産権および免責事項</strong><br>・本サービスは個人による非公式のファンツールです。任天堂株式会社とは一切関係ありません。使用されている著作物の権利は各権利所有者に帰属します。<br>・本サービスを利用して作成された画像に関するトラブルや損害について、運営者は一切の責任を負いません。<br>・他人を傷つける内容や、嫌がらせ・公序良俗に反する目的での利用を禁止します。</p>
        <p><strong>3. 外部サービスと広告について</strong><br>・サイトの配信（Netlify）、統計（Google Analytics）、広告配信（AdSense）等を利用する場合があります。<br>・Amazonアソシエイト等のアフィリエイトプログラムに参加し、適格販売により収入を得る場合があります。</p>
        <p><strong>4. 任意の支援（Ko-fi）について</strong><br>・運営維持費の支援として任意の支援（チップ）を受け付ける場合があります。支援は任意であり、支援の有無で機能差は発生しません。性質上、返金には応じかねます。</p>
    </div>
</div>

<script>
    const pItems = [
        { t: "行動は…", l: "ゆっくり", r: "きびきび" },
        { t: "ことばは…", l: "やんわり", r: "きっぱり" },
        { t: "表情は…", l: "クール", r: "ゆたか" },
        { t: "考え方は…", l: "マジメ", r: "お気楽" },
        { t: "はっきりいって", l: "常識人", r: "個性的" }
    ];

    function init() {
        let html = "";
        pItems.forEach((item, i) => {
            html += `<div class="p-row-title">${item.t}</div><div class="p-row"><span class="p-label">${item.l}</span><div class="p-options">`;
            for(let j=0; j<8; j++) html += `<input type="radio" name="p${i}" value="${j}" onchange="updateCard()">`;
            html += `</div><span class="p-label">${item.r}</span></div>`;
        });
        document.getElementById('p-inputs').innerHTML = html;
        updateCard();
    }

    function updateCard() {
        const y = document.getElementById('in-year').value;
        const m = document.getElementById('in-month').value;
        const d = document.getElementById('in-day').value;
        const birthdayText = (y ? y + "年" : "") + (m ? m + "月" : "") + (d ? d + "日" : "");

        const info = `<strong>ニックネーム:</strong> ${document.getElementById('in-nickname').value}<br>` +
                     `<strong>お誕生日:</strong> ${birthdayText}<br>` +
                     `<strong>性別:</strong> ${document.getElementById('in-gender').value}<br>` +
                     `<strong>よび方:</strong> ${document.getElementById('in-call').value}<br>` +
                     `<strong>声:</strong> ${document.getElementById('in-voice').value} / <strong>寝相:</strong> ${document.getElementById('in-sleep').value}<br>` +
                     `<strong>食欲:</strong> ${document.getElementById('in-eat').value}<br>` +
                     `<strong>口ぐせ:</strong> ${document.getElementById('in-phrase').value}<br>` +
                     `<strong>恋愛対象:</strong> ${document.getElementById('in-love').value}<br>` +
                     `<strong>叫び:</strong> ${document.getElementById('in-shout').value}`;
        document.getElementById('card-text-info').innerHTML = info;
        document.getElementById('card-memo-out').innerText = document.getElementById('in-memo').value;

        let vHtml = `<div class="p-visual-header">【性格】</div>`;
        pItems.forEach((item, i) => {
            const selected = document.querySelector(`input[name="p${i}"]:checked`)?.value;
            vHtml += `<div class="p-visual-row"><span class="p-visual-title">${item.t}</span><span class="p-visual-label">${item.l}</span><div class="p-visual-boxes">`;
            for(let j=0; j<8; j++) vHtml += `<div class="v-box ${selected == j ? 'checked' : ''}"></div>`;
            vHtml += `</div><span class="p-visual-label">${item.r}</span></div>`;
        });
        document.getElementById('p-visual-area').innerHTML = vHtml;
    }

    function loadImage(input) {
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = e => { document.getElementById('card-photo').src = e.target.result; };
            reader.readAsDataURL(input.files[0]);
        }
    }

    function validateDate() {
        const yInput = document.getElementById('in-year');
        const mInput = document.getElementById('in-month');
        const dInput = document.getElementById('in-day');
        let y = parseInt(yInput.value) || 2026;
        let m = parseInt(mInput.value);
        let d = parseInt(dInput.value);
        if (mInput.value) { if (m < 1) m = 1; if (m > 12) m = 12; mInput.value = m; }
        if (dInput.value && mInput.value) {
            const lastDay = new Date(y, m, 0).getDate();
            if (d < 1) d = 1; if (d > lastDay) d = lastDay;
            dInput.value = d;
        }
        updateCard();
    }

    function saveImage() {
        const card = document.getElementById('preview-card');
        html2canvas(card, {scale: 2, backgroundColor: "#ffffff"}).then(canvas => {
            const a = document.createElement('a'); a.download = 'tomodachi-profile.png';
            a.href = canvas.toDataURL("image/png"); a.click();
        });
    }

    function openModal(id) { document.getElementById(id).style.display = 'block'; }
    function closeModal(id) { document.getElementById(id).style.display = 'none'; }
    function copyURL() { navigator.clipboard.writeText(window.location.href).then(() => alert("URLコピーしました！")); }

    function shareX() {
        const text = "#トモダチコレクション #わくわくプロフィールメーカー\n";
        const url = window.location.href;
        const xUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(url)}`;
        window.open(xUrl, '_blank');
    }

    init();
</script>
</body>
</html>