HTML - 長留裕平のブログ

ドメイン検索＆購入(フロントエンド)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>ドメイン検索＆購入</title>
  <style>
    body {
      font-family: sans-serif;
      background: #f9f9f9;
      padding: 2rem;
      margin: 0;
      display: flex;
      justify-content: center;
    }
    .container {
      max-width: 600px;
      width: 100%;
      background: white;
      padding: 2rem;
      border-radius: 12px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
    h1 {
      color: #e60033;
      text-align: center;
      margin-bottom: 1.5rem;
    }
    .form {
      display: flex;
      gap: 0.5rem;
      margin-bottom: 1rem;
    }
    input {
      flex: 1;
      padding: 0.8rem;
      border: 1px solid #ccc;
      border-radius: 8px;
      font-size: 1rem;
    }
    button {
      padding: 0.8rem 1rem;
      background-color: #e60033;
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
    }
    .result {
      margin-top: 1rem;
    }
    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #eee;
      padding: 0.5rem 0;
    }
    .available {
      color: green;
      font-weight: bold;
    }
    .unavailable {
      color: red;
      font-weight: bold;
    }
    .buy-btn {
      background-color: #0070f3;
      color: white;
      padding: 0.3rem 0.7rem;
      border-radius: 6px;
      text-decoration: none;
      font-size: 0.9rem;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>ドメイン検索</h1>
    <div class="form">
      <input type="text" id="domainInput" placeholder="例: mydomain" />
      <button onclick="search()">検索</button>
    </div>
    <div class="result" id="resultArea"></div>
  </div>

  <script>
    const takenDomains = ["example.com", "mydomain.net", "taken.jp"];
    const tlds = [".com", ".net", ".jp"];

    function search() {
      const name = document.getElementById("domainInput").value.trim().toLowerCase();
      const area = document.getElementById("resultArea");
      area.innerHTML = "";

      if (!name) {
        area.innerHTML = "<p>⚠ ドメイン名を入力してください。</p>";
        return;
      }

      tlds.forEach(tld => {
        const domain = name + tld;
        const available = !takenDomains.includes(domain);
        const item = document.createElement("div");
        item.className = "item";
        item.innerHTML = `
          <span>${domain}</span>
          ${available
            ? `<span class="available">取得可能</span>
               <a href="https://buy.stripe.com/test_checkout_link" class="buy-btn" target="_blank">購入する</a>`
            : `<span class="unavailable">登録済み</span>`}
        `;
        area.appendChild(item);
      });
    }
  </script>
</body>
</html>

ゲームBGM自動生成サービス.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>🎮 ゲームBGM自動生成サービス</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    :root {
      --bg: #121212;
      --card: #1e1e2e;
      --text: #ffffff;
      --accent: #ffd700;
      --shadow: rgba(0, 0, 0, 0.3);
      --button: #ffd700;
    }
    [data-theme='light'] {
      --bg: #f5f5f5;
      --card: #ffffff;
      --text: #111;
      --accent: #ff9800;
      --shadow: rgba(0, 0, 0, 0.1);
      --button: #ff9800;
    }

    body {
      margin: 0;
      font-family: 'Segoe UI', sans-serif;
      background: var(--bg);
      color: var(--text);
      transition: 0.3s;
      padding: 1rem;
    }

    header {
      text-align: center;
      margin-bottom: 1rem;
    }

    h1 {
      color: var(--accent);
      font-size: 2rem;
    }

    .container {
      max-width: 600px;
      margin: auto;
      background: var(--card);
      border-radius: 12px;
      box-shadow: 0 0 10px var(--shadow);
      padding: 1.5rem;
    }

    label {
      font-weight: bold;
      display: block;
      margin-top: 1rem;
    }

    select, button {
      width: 100%;
      padding: 0.6rem;
      margin-top: 0.5rem;
      border-radius: 8px;
      border: none;
      font-size: 1rem;
    }

    button {
      background: var(--button);
      color: #000;
      font-weight: bold;
      cursor: pointer;
      transition: 0.3s;
    }

    button:disabled {
      background: #999;
      cursor: not-allowed;
    }

    button:hover:enabled {
      opacity: 0.85;
    }

    .desc, .msg {
      margin-top: 1rem;
      font-size: 0.9rem;
      color: #ccc;
    }

    .result, .history {
      margin-top: 2rem;
    }

    audio {
      width: 100%;
      margin-top: 0.5rem;
    }

    .visualizer {
      width: 100%;
      height: 4px;
      background: linear-gradient(90deg, #ffd700, #ff9800);
      animation: pulse 2s infinite linear;
      opacity: 0;
    }

    .playing .visualizer {
      opacity: 1;
    }

    @keyframes pulse {
      0% { transform: scaleX(1); }
      50% { transform: scaleX(1.05); }
      100% { transform: scaleX(1); }
    }

    .toggle-theme {
      text-align: right;
      margin-bottom: 0.5rem;
    }

    .accordion {
      background: transparent;
      color: var(--accent);
      border: none;
      font-weight: bold;
      cursor: pointer;
      margin-top: 1rem;
      width: 100%;
      text-align: left;
      font-size: 1rem;
    }

    .accordion-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
    }

    .accordion.open + .accordion-content {
      max-height: 600px;
    }
  </style>
</head>
<body>

  <header>
    <h1>🎮 ゲームBGM自動生成</h1>
  </header>

  <div class="toggle-theme">
    <button onclick="toggleTheme()">🌓 テーマ切替</button>
  </div>

  <div class="container">
    <label for="genre">🎼 ジャンル</label>
    <select id="genre" onchange="updateDescription()">
      <option value="fantasy">ファンタジー</option>
      <option value="cyberpunk">サイバーパンク</option>
      <option value="horror">ホラー</option>
      <option value="symphonic">シンフォニック</option>
    </select>

    <label for="mood">🎭 雰囲気</label>
    <select id="mood" onchange="updateDescription()">
      <option value="mysterious">神秘的</option>
      <option value="sad">悲しい</option>
      <option value="heroic">勇ましい</option>
      <option value="fun">楽しい</option>
    </select>

    <div class="desc" id="descText">選択内容に応じてBGMを生成します。</div>

    <button id="generateBtn" onclick="generateBGM()">🎶 BGMを生成する</button>

    <div class="msg" id="msg"></div>

    <div class="result" id="result" style="display:none;">
      <h3>🎧 再生中のBGM</h3>
      <audio controls id="player" onplay="startVisualizer()" onpause="stopVisualizer()"></audio>
      <div class="visualizer" id="visualizer"></div>
    </div>

    <button class="accordion" onclick="toggleAccordion(this)">📜 再生履歴</button>
    <div class="accordion-content" id="historyList"></div>
  </div>

  <script>
    const descMap = {
      fantasy: "魔法の世界、冒険と伝説の音楽",
      cyberpunk: "近未来都市とテクノ感の融合",
      horror: "不安と恐怖を煽るBGM",
      symphonic: "壮大で感動的なオーケストラ風",
      mysterious: "謎解き、探検にぴったり",
      sad: "涙や喪失感を表現する旋律",
      heroic: "勇ましさ、戦い、勝利の象徴",
      fun: "軽快で明るいリズム"
    };

    const history = [];
    const maxHistory = 5;

    function updateDescription() {
      const g = document.getElementById('genre').value;
      const m = document.getElementById('mood').value;
      document.getElementById('descText').textContent = `🧠 ${descMap[g]} × ${descMap[m]}`;
    }

    function generateBGM() {
      const genre = document.getElementById('genre').value;
      const mood = document.getElementById('mood').value;
      const btn = document.getElementById('generateBtn');
      const player = document.getElementById('player');
      const msg = document.getElementById('msg');
      const result = document.getElementById('result');

      btn.disabled = true;
      msg.textContent = "⏳ BGMを生成中...";

      const url = `https://example.com/bgm/${genre}_${mood}_${Math.floor(Math.random()*3)+1}.mp3`;

      setTimeout(() => {
        msg.textContent = "✅ BGM生成完了！再生できます。";
        player.src = url;
        result.style.display = 'block';

        // 保存履歴
        history.unshift({ genre, mood, url });
        if (history.length > maxHistory) history.pop();
        renderHistory();
        btn.disabled = false;
      }, 1500);
    }

    function renderHistory() {
      const list = document.getElementById('historyList');
      list.innerHTML = "";
      history.forEach(item => {
        const div = document.createElement('div');
        div.innerHTML = `<strong>${item.genre} × ${item.mood}</strong><br><audio controls src="${item.url}"></audio><hr>`;
        list.appendChild(div);
      });
    }

    function toggleTheme() {
      const theme = document.documentElement.getAttribute("data-theme");
      document.documentElement.setAttribute("data-theme", theme === "light" ? "dark" : "light");
    }

    function toggleAccordion(el) {
      el.classList.toggle('open');
    }

    function startVisualizer() {
      document.getElementById('visualizer').style.opacity = '1';
    }

    function stopVisualizer() {
      document.getElementById('visualizer').style.opacity = '0';
    }

    // 初期設定
    document.documentElement.setAttribute("data-theme", "dark");
    updateDescription();
  </script>

</body>
</html>

MyAOS.html

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Site</title>
  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <section>
    <h1>記事一覧</h1>
    <article>
      <img src="forest.png" width="240" height="160" data-aos="my-animation">
      <div class="text">
        <h2>タイトル</h2>
        <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
      </div>
    </article>
    <article>
      <img src="forest.png" width="240" height="160">
      <div class="text">
        <h2>タイトル</h2>
        <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
      </div>
    </article>
    <article>
      <img src="forest.png" width="240" height="160">
      <div class="text">
        <h2>タイトル</h2>
        <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
      </div>
    </article>
  </section>

  <section>
    <h1>お客様の声</h1>
    <div class="voices">
      <section data-aos="fade-up">
        <h2>すばらしい</h2>
        <p>素晴らしいです。素晴らしいです。</p>
      </section>
      <section data-aos="fade-up" data-aos-delay="300">
        <h2>すばらしい</h2>
        <p>素晴らしいです。素晴らしいです。</p>
      </section>
      <section data-aos="fade-up" data-aos-delay="600">
        <h2>すばらしい</h2>
        <p>素晴らしいです。素晴らしいです。</p>
      </section>
    </div>
  </section>

  <footer id="footer">
    (c) dotinstall.com
  </footer>

  <a href="#" class="to-top" data-aos="fade-up" data-aos-anchor="#footer" data-aos-offset="0">先頭へ</a>

  <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>
</body>

</html>

style.css

@charset "utf-8";

body {
  margin: 0;
}

body>section {
  margin: 0 32px;
}

h1 {
  text-align: center;
  padding: 160px 0;
}

article {
  display: flex;
  gap: 16px;
  align-items: center;
}

article .text {
  flex: 1;
}

article h2 {
  margin: 0;
  font-size: 22px;
}

article+article {
  margin-top: 32px;
}

article:nth-child(even) {
  flex-direction: row-reverse;
}

.voices {
  display: flex;
  gap: 16px;
}

.voices>section {
  border-radius: 8px;
  border: 1px solid #ccc;
  padding: 16px 32px;
  text-align: center;
}

footer {
  margin-top: 160px;
  text-align: center;
  padding: 80px 0;
  background: #eee;
}

.to-top {
  position: fixed;
  bottom: 16px;
  right: 16px;
}

VRSNS

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>VR‑SNS Prototype v8 (Spatial Audio + PTT + エモート)</title>

<!-- Libraries -->
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/aframe-extras@6.1.1/dist/aframe-extras.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gun/gun.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/simple-peer@9.11.1/simplepeer.min.js"></script>

<style>
html,body{margin:0;padding:0;overflow:hidden;font-family:"Helvetica Neue",Arial,sans-serif;background:#111;color:#eee}
#ui{position:fixed;top:0;left:0;width:420px;height:100vh;overflow-y:auto;background:rgba(0,0,0,.9);backdrop-filter:blur(6px);padding:1rem;box-sizing:border-box;z-index:10;transition:transform .3s ease}
#ui.hidden{transform:translateX(-105%)}
#ui h1{font-size:1.5rem;margin:0 0 .8rem;text-align:center}
#ui label{display:block;font-size:.75rem;margin:.6rem 0 .15rem;color:#8fc}
#ui input,#ui select,#ui textarea{width:100%;box-sizing:border-box;margin-bottom:.7rem;padding:.56rem;border:none;border-radius:6px;font-size:.9rem;background:#222;color:#ddd}
#ui textarea{resize:vertical}
#ui button{width:100%;padding:.72rem;border:none;border-radius:6px;font-weight:bold;cursor:pointer;background:#06a;color:#fff;transition:background .2s}
#ui button:hover{background:#089}
#timeline{margin-top:1rem}
.post{background:#1a1a1a;border-radius:6px;padding:.75rem;margin-bottom:.75rem;word-break:break-word;font-size:.8rem;position:relative}
.post small{color:#999;font-size:.7rem}
.post img{max-width:100%;border-radius:4px;margin-top:.4rem}
.reactBar{display:flex;gap:5px;margin-top:.45rem}
.reactBtn{flex:1;background:#333;border:none;border-radius:4px;padding:3px 0;font-size:.75rem;cursor:pointer;color:#f88;display:flex;justify-content:center;align-items:center}
.reactBtn span{margin-left:4px;font-weight:bold;color:#ccc}
.hashTag{color:#6af;cursor:pointer}
#handle{position:absolute;top:50%;right:-18px;width:18px;height:80px;border-radius:0 6px 6px 0;background:#06a;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.7rem;transform:translateY(-50%)}
#tagFilter{margin-bottom:.8rem;width:100%;padding:.56rem;border:none;border-radius:6px;background:#222;color:#ddd}
#onlineCount{font-size:.75rem;margin-bottom:.8rem;color:#9f9}
#roomInput{width:70%;display:inline-block}
#roomBtn{width:28%;display:inline-block;margin-left:2%}
#ttsToggleLbl,#muteToggleLbl,#pttInfo{display:flex;align-items:center;font-size:.75rem;margin-bottom:.7rem;gap:.5rem}
.sysMsg{color:#8ff;font-style:italic}
.speaking{animation:pulse 1s infinite}
@keyframes pulse{0%{opacity:1}50%{opacity:.4}100%{opacity:1}}
.emote{position:absolute;left:50%;transform:translateX(-50%);top:-0.4m;font-size:0.4m}
</style>
</head>
<body>
<div id="ui">
  <div id="handle">⮜</div>
  <h1>VR‑SNS</h1>

  <label>ルーム ID</label>
  <input id="roomInput" value="lobby"/><button id="roomBtn">入室</button>
  <div id="onlineCount">オンライン: 0</div>

  <label>ユーザー名</label>
  <input id="usernameInput" placeholder="匿名" />

  <label>アバター色</label>
  <input id="avatarColor" type="color" value="#ff8800" />

  <label>環境テーマ</label>
  <select id="themeSelect"><option value="dusk">夕暮れ空</option><option value="midnight">真夜中</option><option value="day">晴れ昼</option></select>

  <label>ハッシュタグ絞り込み</label>
  <select id="tagFilter"><option value="all">すべて</option></select>

  <label id="ttsToggleLbl"><input type="checkbox" id="ttsToggle"/> 投稿読み上げ</label>
  <label id="muteToggleLbl"><input type="checkbox" id="muteToggle"/> マイク常時OFF</label>
  <div id="pttInfo">Push‑To‑Talk: <strong>Vキー</strong> 押下中のみ送信</div>

  <label>投稿</label>
  <textarea id="postText" rows="3"></textarea>
  <button id="postButton">ポスト</button>
  <button id="clearButton" style="background:#a00;margin-top:.3rem">ローカル履歴削除</button>

  <div id="timeline"></div>
</div>

<a-scene renderer="antialias:true" xr-mode-ui="true" background="color:#112" cursor="rayOrigin:mouse">
  <a-entity environment="preset: forest; ground:y"></a-entity>
  <a-entity id="ground" geometry="primitive:plane; width:150; height:150" rotation="-90 0 0" material="visible:false" static-body></a-entity>

  <a-entity id="rig" position="0 1.6 4" movement-controls="fly:false; speed:0.22">
    <a-entity id="head" camera look-controls></a-entity>
    <a-entity id="leftHand"  laser-controls="hand:left"  raycaster="objects:.interactive" teleport-controls="button:trigger; collisionEntities:#ground; cameraRig:#rig"></a-entity>
    <a-entity id="rightHand" laser-controls="hand:right" raycaster="objects:.interactive"></a-entity>
  </a-entity>
</a-scene>

<script>
(()=>{
const gun=Gun({peers:['https://gun-manhattan.herokuapp.com/gun']});
const myId=Gun.text.random();
let room='lobby',roomRef;
const $=id=>document.getElementById(id);
const ui=$('ui'),handle=$('handle');
const roomInput=$('roomInput'),roomBtn=$('roomBtn'),onlineCount=$('onlineCount');
const usernameInput=$('usernameInput'),avatarColorIn=$('avatarColor');
const themeSelect=$('themeSelect'),tagFilter=$('tagFilter');
const ttsToggle=$('ttsToggle'),muteToggle=$('muteToggle');
const postText=$('postText'),postBtn=$('postButton'),clearBtn=$('clearButton');
const timelineEl=$('timeline');
const scene=document.querySelector('a-scene');
const head=$('head'),leftHand=$('leftHand'),rightHand=$('rightHand');

const store={get:(k,d)=>JSON.parse(localStorage.getItem('vrsns_'+k)||JSON.stringify(d)),set:(k,v)=>localStorage.setItem('vrsns_'+k,JSON.stringify(v))};
usernameInput.value=store.get('user','');avatarColorIn.value=store.get('color','#ff8800');themeSelect.value=store.get('theme','dusk');ttsToggle.checked=store.get('tts',false);

const postsMap=new Map();const tags=new Set();const remoteAvatars=new Map();const remotePeers=new Map();let micStream=null,aCtx=null;let pushTalking=false;
let presenceRef,posRef,presenceInterval,posInterval;
applyTheme(themeSelect.value);createOrUpdateAvatar();setupMic();enterRoom(room);

handle.onclick=()=>ui.classList.toggle('hidden');scene.addEventListener('enter-vr',()=>ui.classList.add('hidden'));scene.addEventListener('exit-vr',()=>ui.classList.remove('hidden'));
roomBtn.onclick=()=>{const r=roomInput.value.trim();if(r){leaveRoom();enterRoom(r)}};
themeSelect.onchange=e=>{const v=e.target.value;store.set('theme',v);applyTheme(v)};avatarColorIn.oninput=createOrUpdateAvatar;
ttsToggle.onchange=e=>store.set('tts',e.target.checked);
muteToggle.onchange=e=>updateMicState();
postBtn.onclick=submitPost;clearBtn.onclick=()=>{if(confirm('ローカル履歴を削除しますか？')){localStorage.removeItem('vrsns_posts_'+room);timelineEl.innerHTML='';}};
tagFilter.onchange=filterTimeline;
window.addEventListener('keydown',e=>{if(e.key==='v'&&!pushTalking){pushTalking=true;updateMicState();}});
window.addEventListener('keyup',e=>{if(e.key==='v'){pushTalking=false;updateMicState();}});

async function setupMic(){try{aCtx=new (window.AudioContext||window.webkitAudioContext)();micStream=await navigator.mediaDevices.getUserMedia({audio:true});updateMicState();}catch(err){alert('マイク利用不可');}}
function updateMicState(){if(!micStream)return;const enabled=!muteToggle.checked&&(pushTalking||muteToggle.checked===false&&ttsToggle);micStream.getAudioTracks()[0].enabled=enabled;}

function enterRoom(r){room=r;roomRef=gun.get('vrsns').get(room);roomInput.value=room;timelineEl.innerHTML='';postsMap.clear();tags.clear();rebuildTagFilter();onlineCount.textContent='オンライン: 0';
roomRef.get('posts').map().on(onPost);roomRef.get('posts').map().get('reactions').map().on(onReaction);
presenceRef=roomRef.get('presence').get(myId);presenceRef.put({ts:Gun.state(),color:avatarColorIn.value});presenceInterval=setInterval(()=>presenceRef.put({ts:Gun.state(),color:avatarColorIn.value}),10000);roomRef.get('presence').map().on(updateOnline);
posRef=roomRef.get('pos').get(myId);sendPos();posInterval=setInterval(sendPos,100);
roomRef.get('pos').map().on(onRemotePos);roomRef.get('signal').map().on(onSignal);sysMsg(`[${room}] 入室しました`);} 
function leaveRoom(){clearInterval(presenceInterval);clearInterval(posInterval);presenceRef&&presenceRef.put(null);posRef&&posRef.put(null);roomRef.off();roomRef.get('signal').off();remoteAvatars.forEach(av=>av.remove());remoteAvatars.clear();remotePeers.forEach(p=>p.destroy());remotePeers.clear();}

function submitPost(){const user=usernameInput.value.trim()||'匿名',text=postText.value.trim();if(!text)return;store.set('user',user);store.set('color',avatarColorIn.value);const id=Gun.text.random();const post={id,user,text,time:Date.now(),color:avatarColorIn.value,reactions:{'❤':0,'😂':0,'😮':0,'😢':0},tags:extractTags(text)};roomRef.get('posts').get(id).put(post);postText.value='';if(ttsToggle.checked)speak(`${user} さん: ${text.replace(/#/g,'')}`);} 
function onPost(post){if(!post||postsMap.has(post.id))return;postsMap.set(post.id,post);collectTags(post);rebuildTagFilter();renderPost2D(post);renderPost3D(post);filterTimeline();}
function onReaction(v,field,key){const pid=field,emoji=key;const p=postsMap.get(pid);if(!p)return;p.reactions[emoji]=v;updatePostCard(pid,p);updatePost3D(pid,p);} 
function react(id,emo){roomRef.get('posts').get(id).get('reactions').get(emo).once(v=>roomRef.get('posts').get(id).get('reactions').get(emo).put((v||0)+1));}

function updateOnline(){let c=0;roomRef.get('presence').map().once(()=>c++);setTimeout(()=>onlineCount.textContent=`オンライン: ${c}`,200);} 
function sendPos(){const p=head.object3D.position,l=leftHand.object3D.position,r=rightHand.object3D.position;posRef.put({x:p.x,y:p.y,z:p.z,l:{x:l.x,y:l.y,z:l.z},r:{x:r.x,y:r.y,z:r.z},color:avatarColorIn.value,ts:Gun.state()});}

function onRemotePos(data,id){if(id===myId||!data)return;let av=remoteAvatars.get(id);if(!av){av=createAvatar(id,data.color);remoteAvatars.set(id,av);connectVoice(id);}av.setAttribute('position',`${data.x} 0 ${data.z}`);av.querySelectorAll('[geometry]').forEach(g=>g.setAttribute('color',data.color||'#fff'));['l','r'].forEach(h=>{let el=av.querySelector('.'+h);if(!el){el=document.createElement('a-sphere');el.classList.add(h);el.setAttribute('radius',0.05);av.appendChild(el);}const hp=data[h];if(hp)el.setAttribute('position',`${hp.x} ${hp.y} ${hp.z}`);});}

function createAvatar(id,color){const root=document.createElement('a-entity');root.id='av_'+id;root.innerHTML=`<a-sphere radius='0.25' color='${color||'#fff'}' position='0 1.6 0'></a-sphere><a-cylinder height='0.8' radius='0.2' color='${color||'#fff'}' position='0 1 0'></a-cylinder>`;scene.appendChild(root);return root;}

function connectVoice(rid){if(remotePeers.has(rid)||!micStream)return;const init=myId>rid;const peer=new SimplePeer({initiator:init,trickle:true,stream:micStream});remotePeers.set(rid,peer);peer.on('signal',d=>roomRef.get('signal').get(myId).get(rid).put(JSON.stringify(d)));roomRef.get('signal').get(rid).get(myId).on(sig=>sig&&peer.signal(JSON.parse(sig)));peer.on('stream',s=>{const av=remoteAvatars.get(rid);if(!av)return;const a=new Audio();a.srcObject=s;const src=aCtx.createMediaStreamSource(s);const panner=aCtx.createPanner();panner.panningModel='HRTF';panner.distanceModel='inverse';panner.maxDistance=20;src.connect(panner).connect(aCtx.destination);function upd(){if(!av.parentNode)return;const pos=av.object3D.position;panner.setPosition(pos.x,pos.y,pos.z);requestAnimationFrame(upd);}upd();a.play();});peer.on('close',()=>remotePeers.delete(rid));peer.on('error',()=>remotePeers.delete(rid));}

function onSignal(){}

function renderPost2D(p){const isImg=/\.(gif|jpe?g|png|webp)$/i.test(p.text.trim());const card=document.createElement('div');card.className='post';card.dataset.id=p.id;card.dataset.tags=p.tags.join(',');card.innerHTML=`<strong style='color:${p.color}'>${escapeHTML(p.user)}</strong>: ${isImg?`<img src='${escapeHTML(p.text)}'/>`:linkify(escapeHTML(p.text))}${p.tags.map(t=>` <span class='hashTag'>#${t}</span>`).join('')}<br><small>${new Date(p.time).toLocaleString()}</small>`;const bar=document.createElement('div');bar.className='reactBar';['❤','😂','😮','😢'].forEach(e=>{const b=document.createElement('button');b.className='reactBtn';b.dataset.e=e;b.innerHTML=`${e} <span>${p.reactions[e]||0}</span>`;b.onclick=()=>react(p.id,e);bar.appendChild(b);});card.appendChild(bar);card.querySelectorAll('.hashTag').forEach(el=>el.onclick=()=>{tagFilter.value=el.textContent.slice(1).toLowerCase();filterTimeline();});timelineEl.insertBefore(card,timelineEl.firstChild);} 
function updatePostCard(id,p){const card=document.querySelector(`.post[data-id='${id}']`);if(card)card.querySelectorAll('.reactBtn').forEach(btn=>btn.querySelector('span').textContent=p.reactions[btn.dataset.e]||0);} 
function format3D(p){const top=Object.entries(p.reactions||{}).sort((a,b)=>b[1]-a[1])[0];const r=top&&top[1]>0?` ${top[0]}×${top[1]}`:'';return `${p.user}${r}\n${p.text}`;}
function renderPost3D(p){const ent=document.createElement('a-entity');ent.classList.add('interactive');ent.id='p3d_'+p.id;ent.setAttribute('text',{value:format3D(p),align:'center',width:4,color:p.color});ent.onclick=()=>react(p.id,'❤');positionEntity(ent);scene.appendChild(ent);setTimeout(()=>ent.remove(),300000);if(/\.(gif|jpe?g|png|webp)$/i.test(p.text.trim())){const plane=document.createElement('a-plane');plane.setAttribute('src',p.text);plane.setAttribute('width',1.8);plane.setAttribute('height',1.2);plane.classList.add('interactive');positionEntity(plane,0.6);scene.appendChild(plane);setTimeout(()=>plane.remove(),300000);}}
function updatePost3D(id,p){const e=$('p3d_'+id);if(e)e.setAttribute('text','value',format3D(p));}

function positionEntity(e,y=0){const ang=Math.random()*Math.PI,rad=5+Math.random()*5;e.setAttribute('position',`${Math.cos(ang)*rad} ${2+y} ${-Math.sin(ang)*rad}`);} 
function collectTags(p){p.tags.forEach(t=>tags.add(t.toLowerCase()));}
function rebuildTagFilter(){const cur=tagFilter.value;tagFilter.innerHTML='<option value="all">すべて</option>'+[...tags].sort().map(t=>`<option value='${t}'>#${t}</option>`).join('');tagFilter.value=cur||'all';}
function filterTimeline(){const f=tagFilter.value;document.querySelectorAll('.post').forEach(el=>el.style.display=(f==='all'||el.dataset.tags.includes(f))?'':'none');}
function escapeHTML(s){return s.replace(/[&<>"']/g,ch=>({'&':'&amp;','<':'&lt;',">":"&gt;","\"":"&quot;","'":"&#39;"}[ch]));}
function extractTags(t){return(t.match(/#(\w+)/g)||[]).map(x=>x.slice(1).toLowerCase());}
function linkify(t){return t.replace(/https?:\/\/\S+/g,u=>`<a href='${u}' target='_blank'>${u}</a>`);} 
function applyTheme(t){let sky=scene.querySelector('a-sky');if(!sky){sky=document.createElement('a-sky');scene.appendChild(sky);}sky.setAttribute('color',t==='midnight'?'#000022':t==='day'?'#86cefa':'#112');}
function createOrUpdateAvatar(){const c=avatarColorIn.value;store.set('color',c);let av=$('myAvatar');const body=`<a-sphere radius='0.25' color='${c}' position='0 1.6 0'></a-sphere><a-cylinder height='0.8' radius='0.2' color='${c}' position='0 1 0'></a-cylinder>`;if(!av){av=document.createElement('a-entity');av.id='myAvatar';av.innerHTML=body;scene.appendChild(av);}else av.innerHTML=body;}
function speak(msg){speechSynthesis.speak(new SpeechSynthesisUtterance(msg));}
function sysMsg(t){const el=document.createElement('div');el.className='post sysMsg';el.textContent=t;timelineEl.insertBefore(el,timelineEl.firstChild);} 
})();
</script>
</body>
</html>

WEBOS

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>仮想OS Pro</title>
  <style>
    body {
      margin: 0;
      background: #2c3e50;
      font-family: 'Segoe UI', sans-serif;
      overflow: hidden;
    }
    #desktop {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 40px;
      background: linear-gradient(#2980b9, #34495e);
    }
    .icon {
      width: 70px;
      text-align: center;
      margin: 20px;
      cursor: pointer;
      color: white;
    }
    .window {
      position: absolute;
      width: 300px;
      height: 200px;
      background: white;
      border: 2px solid #555;
      display: none;
      box-shadow: 4px 4px 10px rgba(0,0,0,0.5);
    }
    .window-header {
      background: #3498db;
      padding: 5px;
      cursor: move;
      color: white;
    }
    .window-body {
      padding: 10px;
    }
    #taskbar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 40px;
      background: #2c3e50;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      color: white;
    }
  </style>
</head>
<body onload="playStartupSound(); updateClock(); setInterval(updateClock, 1000);">

  <div id="desktop">
    <div class="icon" onclick="openWindow('memo')">📝<br>メモ帳</div>
    <div class="icon" onclick="openWindow('calc')">🧮<br>電卓</div>
  </div>

  <div id="taskbar">
    <div>仮想OS Pro</div>
    <div id="clock"></div>
  </div>

  <!-- メモ帳 -->
  <div class="window" id="memo">
    <div class="window-header" onmousedown="dragWindow(event, this.parentElement)">メモ帳</div>
    <div class="window-body">
      <textarea style="width: 100%; height: 100px;">メモを入力してください</textarea>
    </div>
  </div>

  <!-- 電卓 -->
  <div class="window" id="calc">
    <div class="window-header" onmousedown="dragWindow(event, this.parentElement)">電卓</div>
    <div class="window-body">
      <input type="text" id="calcDisplay" style="width:100%; font-size: 1.2em;" />
      <button onclick="calculate()">計算</button>
    </div>
  </div>

  <!-- 起動音 -->
  <audio id="bootSound" src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Windows_95_startup.ogg" preload="auto"></audio>

  <script>
    function openWindow(id) {
      document.getElementById(id).style.display = 'block';
    }

    function dragWindow(e, el) {
      e.preventDefault();
      let offsetX = e.clientX - el.offsetLeft;
      let offsetY = e.clientY - el.offsetTop;

      function move(e) {
        el.style.left = (e.clientX - offsetX) + 'px';
        el.style.top = (e.clientY - offsetY) + 'px';
      }

      function stop() {
        document.removeEventListener('mousemove', move);
        document.removeEventListener('mouseup', stop);
      }

      document.addEventListener('mousemove', move);
      document.addEventListener('mouseup', stop);
    }

    function calculate() {
      let result;
      try {
        result = eval(document.getElementById('calcDisplay').value);
      } catch {
        result = "エラー";
      }
      document.getElementById('calcDisplay').value = result;
    }

    function playStartupSound() {
      document.getElementById("bootSound").play();
    }

    function updateClock() {
      const now = new Date();
      const time = now.toLocaleTimeString();
      document.getElementById("clock").textContent = time;
    }
  </script>
</body>
</html>

C#入門サイト

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="description" content="C# オールインワン入門サイト">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>オールインワン C# 入門サイト</title>

  <!-- ★ スタイル(CSS)をまとめて定義 ★ -->
  <style>
    /* ページ全体 */
    body {
      margin: 0;
      padding: 0;
      font-family: sans-serif;
      line-height: 1.6;
      background: #f9f9f9;
    }

    /* ヘッダー */
    header {
      background: #f0f0f0;
      padding: 10px;
    }

    header h1 {
      margin: 0;
      font-size: 1.5em;
    }

    /* ナビゲーション */
    nav ul {
      list-style: none;
      padding: 0;
      display: flex;
      gap: 10px;
      margin-top: 5px;
    }

    nav a {
      text-decoration: none;
      color: #333;
      font-weight: bold;
    }

    nav a:hover {
      text-decoration: underline;
    }

    /* メインコンテンツ */
    main {
      max-width: 900px;
      margin: 20px auto;
      padding: 20px;
      background: #fff;
      box-shadow: 0 0 4px rgba(0,0,0,0.1);
    }

    main h2 {
      margin-top: 0;
      border-left: 6px solid #333;
      padding-left: 8px;
      margin-bottom: 15px;
    }
    main h3 {
      margin-bottom: 5px;
    }

    /* コードブロック */
    pre {
      background: #fafafa;
      padding: 10px;
      overflow-x: auto;
    }
    code {
      font-family: Consolas, monospace;
    }

    /* フォームなど（クイズ用） */
    form section {
      margin-bottom: 20px;
    }
    #result {
      margin-top: 20px;
      background: #eef;
      padding: 10px;
      border: 1px solid #ccf;
      display: inline-block;
    }

    /* フッター */
    footer {
      text-align: center;
      padding: 10px;
      background: #f0f0f0;
      margin-top: 20px;
    }

    /* セクション間の余白調整 */
    section {
      margin-bottom: 40px;
    }
  </style>
</head>
<body>

  <!-- ★ ヘッダーとナビゲーション ★ -->
  <header>
    <h1>オールインワン C# 入門サイト</h1>
    <nav>
      <ul>
        <li><a href="#top">トップ</a></li>
        <li><a href="#environment">環境構築 &amp; .NET</a></li>
        <li><a href="#basics">C#の基本</a></li>
        <li><a href="#syntax">基本文法</a></li>
        <li><a href="#control-flow">条件分岐・ループ</a></li>
        <li><a href="#oop">オブジェクト指向</a></li>
        <li><a href="#advanced">応用トピック</a></li>
        <li><a href="#debugging">デバッグ &amp; テスト</a></li>
        <li><a href="#quiz">クイズ</a></li>
        <li><a href="#example">サンプル</a></li>
      </ul>
    </nav>
  </header>

  <!-- ★ メインコンテンツ ★ -->
  <main>
    <!-- トップ (id="top") -->
    <section id="top">
      <h2>このサイトについて</h2>
      <p>
        ここでは、C# を初めて学ぶ方や、基礎を復習したい方向けに、  
        C#と.NETの概要から開発環境構築、文法、オブジェクト指向、さらにデバッグやテスト、  
        一歩進んだ応用トピック(Generics, LINQ, 非同期など)まで幅広くカバーしています。  
      </p>
      <p>
        ページ上部のナビゲーションから各セクションへ移動できます。  
        一通り学習した後は、クイズに挑戦したり、サンプルプログラムを動かしてみましょう。
      </p>
    </section>

    <!-- 環境構築 (id="environment") -->
    <section id="environment">
      <h2>環境構築 &amp; .NET</h2>
      <article>
        <h3>.NETエコシステムの概要</h3>
        <p>
          C# は .NET 上で動作する言語です。  
          近年はクロスプラットフォーム対応の「.NET (Core)」が主流であり、  
          Windows だけでなく Mac や Linux でも利用可能です。
        </p>
      </article>
      <article>
        <h3>Windows での開発</h3>
        <p>
          <strong>Visual Studio</strong> (Community 版) または <strong>VS Code</strong> が一般的です。  
          <code>dotnet</code> CLI を使ってプロジェクト作成・ビルド・実行が可能です。
        </p>
<pre><code>
// 例: コンソールアプリプロジェクトの作成
dotnet new console -o MyApp
cd MyApp
dotnet run
</code></pre>
      </article>
      <article>
        <h3>Mac / Linux での開発</h3>
        <p>
          公式サイトから .NET SDK をインストールすることで、同様に C# を利用できます。  
          VS Code + C#拡張機能があればブレークポイントによるデバッグも可能です。
        </p>
      </article>
    </section>

    <!-- C#の基本 (id="basics") -->
    <section id="basics">
      <h2>C#の基本</h2>
      <article>
        <h3>C#とは？</h3>
        <p>
          C# (シーシャープ) は、マイクロソフトが開発したオブジェクト指向言語です。  
          Javaに似た構文を持ち、GenericsやLINQ、非同期などモダンな機能を数多く備えています。
        </p>
      </article>
      <article>
        <h3>Hello World</h3>
<pre><code class="language-csharp">
using System;

namespace HelloWorldApp
{
    class Program
    {
        static void Main(string[] args)
        {
            Console.WriteLine("Hello World!");
        }
    }
}
</code></pre>
        <p>このように、<code>Main</code> メソッドがエントリポイントとして呼び出されます。</p>
      </article>
    </section>

    <!-- 基本文法 (id="syntax") -->
    <section id="syntax">
      <h2>基本文法</h2>
      <article>
        <h3>変数とデータ型</h3>
<pre><code class="language-csharp">
int number = 10;
double pi = 3.14;
bool isActive = true;
string message = "Hello C#";
</code></pre>
        <p>
          C# は強い型付け言語であり、<code>var</code> キーワードで型推論も可能です。
        </p>
      </article>
      <article>
        <h3>演算子</h3>
        <p>
          算術演算子、比較演算子、論理演算子などを使用できます。
        </p>
<pre><code class="language-csharp">
int x = 5;
int y = 3;
Console.WriteLine(x + y); // 8
Console.WriteLine(x > y); // true
</code></pre>
      </article>
    </section>

    <!-- 条件分岐・ループ (id="control-flow") -->
    <section id="control-flow">
      <h2>条件分岐・ループ</h2>
      <article>
        <h3>if / else / else if</h3>
<pre><code class="language-csharp">
int score = 85;
if(score >= 80) {
    Console.WriteLine("Excellent!");
} else if(score >= 60) {
    Console.WriteLine("Good!");
} else {
    Console.WriteLine("Keep trying!");
}
</code></pre>
      </article>
      <article>
        <h3>switch</h3>
<pre><code class="language-csharp">
int dayOfWeek = 2;
switch(dayOfWeek)
{
    case 0:
        Console.WriteLine("日曜日");
        break;
    case 1:
        Console.WriteLine("月曜日");
        break;
    case 2:
        Console.WriteLine("火曜日");
        break;
    default:
        Console.WriteLine("不明な曜日");
        break;
}
</code></pre>
      </article>
      <article>
        <h3>for / while / do-while</h3>
<pre><code class="language-csharp">
// forループ
for(int i = 0; i < 5; i++) {
    Console.WriteLine(i);
}

// whileループ
int j = 0;
while(j < 5) {
    Console.WriteLine(j);
    j++;
}

// do-whileループ
int k = 0;
do {
    Console.WriteLine(k);
    k++;
} while(k < 5);
</code></pre>
      </article>
    </section>

    <!-- オブジェクト指向 (id="oop") -->
    <section id="oop">
      <h2>オブジェクト指向</h2>
      <article>
        <h3>クラスとオブジェクト</h3>
<pre><code class="language-csharp">
class Person
{
    public string Name;
    public int Age;

    public void Greet()
    {
        Console.WriteLine($"こんにちは、{Name}です。");
    }
}

class Program
{
    static void Main()
    {
        Person p = new Person();
        p.Name = "Taro";
        p.Age = 20;
        p.Greet();
    }
}
</code></pre>
      </article>
      <article>
        <h3>継承とポリモーフィズム</h3>
<pre><code class="language-csharp">
class Animal
{
    public string Name { get; set; }
    public virtual void Speak()
    {
        Console.WriteLine("何かを話す");
    }
}

class Dog : Animal
{
    public override void Speak()
    {
        Console.WriteLine("ワンワン");
    }
}
</code></pre>
      </article>
      <article>
        <h3>インターフェイス</h3>
<pre><code class="language-csharp">
interface IFlyable
{
    void Fly();
}

class Bird : IFlyable
{
    public void Fly()
    {
        Console.WriteLine("羽ばたいて飛ぶ");
    }
}
</code></pre>
      </article>
    </section>

    <!-- 応用トピック (id="advanced") -->
    <section id="advanced">
      <h2>応用トピック</h2>
      <article>
        <h3>Generics (ジェネリクス)</h3>
<pre><code class="language-csharp">
List<int> numbers = new List<int>();
numbers.Add(10);
numbers.Add(20);

class Box<T>
{
    public T Value { get; set; }
    public Box(T value)
    {
        Value = value;
    }
}
</code></pre>
      </article>
      <article>
        <h3>デリゲート・イベント</h3>
<pre><code class="language-csharp">
public delegate void MyDelegate(string msg);

public class Publisher
{
    public event MyDelegate OnPublish;

    public void Publish(string msg)
    {
        OnPublish?.Invoke(msg);
    }
}
</code></pre>
      </article>
      <article>
        <h3>LINQ</h3>
<pre><code class="language-csharp">
int[] data = {1,2,3,4,5,6};
var evens = from x in data
            where x % 2 == 0
            select x;
</code></pre>
      </article>
      <article>
        <h3>非同期 (async/await)</h3>
<pre><code class="language-csharp">
static async Task Main()
{
    Console.WriteLine("開始");
    await Task.Delay(1000);
    Console.WriteLine("終了");
}
</code></pre>
      </article>
    </section>

    <!-- デバッグ & テスト (id="debugging") -->
    <section id="debugging">
      <h2>デバッグ &amp; テスト</h2>
      <article>
        <h3>Visual Studioでのデバッグ</h3>
        <ol>
          <li>行番号の左をクリックしてブレークポイントを設定</li>
          <li>「デバッグ実行」ボタンで開始</li>
          <li>停止したらローカル変数やステップ実行を確認</li>
        </ol>
      </article>
      <article>
        <h3>例外処理</h3>
<pre><code class="language-csharp">
try
{
    int num = int.Parse("abc");
}
catch(FormatException fe)
{
    Console.WriteLine("フォーマットエラー: " + fe.Message);
}
finally
{
    Console.WriteLine("終了処理");
}
</code></pre>
      </article>
      <article>
        <h3>ユニットテスト</h3>
<pre><code class="language-csharp">
using Xunit;

public class CalcTests
{
    [Fact]
    public void AddTest()
    {
        int result = Calc.Add(2, 3);
        Assert.Equal(5, result);
    }
}

public static class Calc
{
    public static int Add(int x, int y) => x + y;
}
</code></pre>
        <p>
          xUnit、NUnit、MSTest などが有名です。<code>dotnet test</code> でテスト実行できます。
        </p>
      </article>
    </section>

    <!-- クイズ (id="quiz") -->
    <section id="quiz">
      <h2>C#クイズ</h2>
      <p>ラジオボタンで答えを選んで「採点する」ボタンを押してください。</p>

      <form id="quizForm">
        <article>
          <h3>Q1. C# コンソールアプリのエントリポイントは？</h3>
          <label>
            <input type="radio" name="q1" value="A">
            public static void start()
          </label><br>
          <label>
            <input type="radio" name="q1" value="B">
            private void main()
          </label><br>
          <label>
            <input type="radio" name="q1" value="C">
            static void Main(string[] args)
          </label><br>
          <label>
            <input type="radio" name="q1" value="D">
            run()
          </label>
        </article>

        <article>
          <h3>Q2. 次のうち整数型ではないのは？</h3>
          <label>
            <input type="radio" name="q2" value="A">
            int
          </label><br>
          <label>
            <input type="radio" name="q2" value="B">
            double
          </label><br>
          <label>
            <input type="radio" name="q2" value="C">
            long
          </label><br>
          <label>
            <input type="radio" name="q2" value="D">
            short
          </label>
        </article>

        <article>
          <h3>Q3. C# の例外処理に使われるキーワードの組み合わせは？</h3>
          <label>
            <input type="radio" name="q3" value="A">
            try / catch / else
          </label><br>
          <label>
            <input type="radio" name="q3" value="B">
            try / check / throw
          </label><br>
          <label>
            <input type="radio" name="q3" value="C">
            try / catch / finally
          </label><br>
          <label>
            <input type="radio" name="q3" value="D">
            try / except / ensure
          </label>
        </article>

        <button type="button" onclick="gradeQuiz()">採点する</button>
      </form>

      <!-- 採点結果を表示する領域 -->
      <div id="result"></div>
    </section>

    <!-- サンプル (id="example") -->
    <section id="example">
      <h2>サンプルプログラム</h2>

      <article>
        <h3>1. ユーザー入力を受け取る</h3>
<pre><code class="language-csharp">
using System;

namespace SampleApp
{
    class Program
    {
        static void Main()
        {
            Console.WriteLine("名前を入力してください:");
            string name = Console.ReadLine();
            Console.WriteLine($"こんにちは、{name}さん！");
        }
    }
}
</code></pre>
      </article>

      <article>
        <h3>2. 例外処理</h3>
<pre><code class="language-csharp">
using System;

namespace SampleApp
{
    class Program
    {
        static void Main()
        {
            Console.WriteLine("整数を入力してください:");
            try
            {
                int number = int.Parse(Console.ReadLine());
                Console.WriteLine("二乗:" + (number * number));
            }
            catch(Exception e)
            {
                Console.WriteLine("エラー:" + e.Message);
            }
        }
    }
}
</code></pre>
      </article>

      <article>
        <h3>3. LINQ を使ったフィルタリング</h3>
<pre><code class="language-csharp">
using System;
using System.Linq;
using System.Collections.Generic;

namespace SampleApp
{
    class Program
    {
        static void Main()
        {
            List<int> numbers = new List<int> { 1, 4, 7, 2, 9, 12 };
            var evenNumbers = numbers.Where(x => x % 2 == 0);

            Console.WriteLine("偶数のみ抽出:");
            foreach(var n in evenNumbers)
            {
                Console.WriteLine(n);
            }
        }
    }
}
</code></pre>
      </article>

      <article>
        <h3>4. 非同期処理</h3>
<pre><code class="language-csharp">
using System;
using System.Threading.Tasks;

namespace SampleApp
{
    class Program
    {
        static async Task Main()
        {
            Console.WriteLine("開始");
            await Task.Delay(2000);
            Console.WriteLine("2秒後に終了");
        }
    }
}
</code></pre>
      </article>
    </section>

  </main>

  <!-- フッター -->
  <footer>
    <p>&copy; 2025 C# Tutorial Site</p>
  </footer>

  <!-- ★ クイズ判定用JavaScriptをまとめて定義 ★ -->
  <script>
    // 正解のマッピング（q1,q2,q3,...）
    const correctAnswers = {
      q1: "C", // static void Main(string[] args)
      q2: "B", // doubleは整数型ではない
      q3: "C"  // try / catch / finally
    };

    function gradeQuiz() {
      const form = document.getElementById("quizForm");
      let score = 0;
      let total = Object.keys(correctAnswers).length;

      // 各問題について、ラジオボタンの選択値をチェック
      for(const [question, answer] of Object.entries(correctAnswers)) {
        const userAnswer = form.elements[question].value;
        if(userAnswer === answer) {
          score++;
        }
      }

      // 結果表示
      const resultDiv = document.getElementById("result");
      resultDiv.innerHTML = `
        <h3>採点結果: ${score} / ${total} 正解</h3>
        <p>${getComment(score, total)}</p>
      `;
    }

    // 点数に応じたコメントを返す
    function getComment(score, total) {
      if(score === total) {
        return "パーフェクト！素晴らしいです！";
      } else if(score >= total - 1) {
        return "惜しい！あともう少し！";
      } else {
        return "まだまだ勉強が必要です。がんばりましょう！";
      }
    }
  </script>

</body>
</html>

Gamestore

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>GameStore Ultra - Upload & Persist Data</title>
  <meta name="description" content="高度なインタラクションと洗練されたデザイン、アップロードデータの保持機能を実現したゲームストアサイト。">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /*────────────────────────────
      グローバルリセット＆変数設定
    ────────────────────────────*/
    :root {
      --primary: #ff6600;
      --accent: #e55a00;
      --secondary: #222;
      --light: #fff;
      --dark: #333;
      --text: #333;
      --shadow: 0 2px 8px rgba(0,0,0,0.15);
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { font-family: 'Helvetica Neue', Arial, sans-serif; background: #f8f8f8; color: var(--text); }
    a { text-decoration: none; color: inherit; }
    img { display: block; max-width: 100%; height: auto; }

    /*────────────────────────────
      ヘッダー＆ナビゲーション
    ────────────────────────────*/
    header {
      background: var(--secondary);
      color: var(--light);
      padding: 10px 20px;
      position: sticky;
      top: 0;
      z-index: 1000;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: var(--shadow);
    }
    .logo { display: flex; align-items: center; gap: 10px; }
    .logo img { width: 40px; height: 40px; }
    .logo h1 { font-size: 24px; }
    nav { background: var(--dark); }
    .nav-container {
      max-width: 1200px;
      margin: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px;
    }
    .nav-menu { list-style: none; display: flex; gap: 20px; }
    .nav-menu li { position: relative; }
    .nav-menu li a {
      color: var(--light);
      padding: 8px 10px;
      transition: background 0.3s;
    }
    .nav-menu li a:hover { background: #444; }
    /* ドロップダウン */
    .dropdown {
      position: absolute;
      top: 100%;
      left: 0;
      background: var(--dark);
      display: none;
      flex-direction: column;
      min-width: 150px;
    }
    .dropdown li a { padding: 8px 10px; }
    .nav-menu li:hover .dropdown { display: flex; }
    /* アップロードリンク（管理者向け） */
    .nav-menu li.upload-link { margin-left: auto; }
    /* ハンバーガーメニュー（モバイル） */
    .hamburger {
      display: none;
      flex-direction: column;
      gap: 4px;
      cursor: pointer;
    }
    .hamburger span { width: 25px; height: 3px; background: var(--light); }
    @media (max-width: 768px) {
      .nav-menu { display: none; flex-direction: column; width: 100%; }
      .nav-menu.active { display: flex; }
      .hamburger { display: flex; }
      .nav-container { flex-direction: column; align-items: flex-start; }
    }
    .search-container { position: relative; }
    .search-container input[type="text"] {
      padding: 6px 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    .search-container button {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      background: var(--primary);
      border: none;
      padding: 6px 10px;
      border-radius: 0 4px 4px 0;
      color: var(--light);
      cursor: pointer;
    }

    /*────────────────────────────
      ヒーロースライダー
    ────────────────────────────*/
    .hero-slider {
      position: relative;
      overflow: hidden;
      height: 600px;
    }
    .hero-slide {
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      opacity: 0;
      transition: opacity 1s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .hero-slide.active { opacity: 1; position: relative; }
    .hero-content {
      background: rgba(0, 0, 0, 0.6);
      padding: 20px 30px;
      border-radius: 8px;
      text-align: center;
      color: var(--light);
    }
    .hero-content h2 { font-size: 48px; margin-bottom: 15px; }
    .hero-content p { font-size: 20px; margin-bottom: 20px; }
    .hero-content .btn {
      background: var(--primary);
      padding: 12px 24px;
      border-radius: 4px;
      transition: background 0.3s;
    }
    .hero-content .btn:hover { background: var(--accent); }
    .hero-controls {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;
    }
    .hero-control {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--light);
      opacity: 0.5;
      cursor: pointer;
    }
    .hero-control.active { opacity: 1; }

    /*────────────────────────────
      スクロール時フェードインアニメーション
    ────────────────────────────*/
    .fade-in {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }
    .fade-in.visible { opacity: 1; transform: none; }

    /*────────────────────────────
      セクション共通スタイル
    ────────────────────────────*/
    section {
      padding: 60px 20px;
      max-width: 1200px;
      margin: auto;
    }
    .section-title {
      font-size: 32px;
      margin-bottom: 20px;
      border-left: 5px solid var(--primary);
      padding-left: 10px;
    }
    .section-description {
      font-size: 18px;
      margin-bottom: 30px;
      color: #666;
    }

    /*────────────────────────────
      ゲームカードグリッド
    ────────────────────────────*/
    .game-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px;
    }
    .game-card {
      background: var(--light);
      border-radius: 8px;
      box-shadow: var(--shadow);
      overflow: hidden;
      cursor: pointer;
      position: relative;
      transition: transform 0.3s;
    }
    .game-card:hover { transform: translateY(-5px); }
    .game-card img {
      width: 100%;
      height: 180px;
      object-fit: cover;
    }
    .game-card-content { padding: 15px; }
    .game-card-content h3 { font-size: 22px; margin-bottom: 10px; }
    .game-card-content p { font-size: 16px; color: #666; margin-bottom: 10px; }
    .game-card-content .price { font-size: 20px; color: var(--primary); }
    .card-overlay {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.3);
      opacity: 0;
      transition: opacity 0.3s;
    }
    .game-card:hover .card-overlay { opacity: 1; }

    /*────────────────────────────
      カテゴリセクション
    ────────────────────────────*/
    .categories {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 20px;
    }
    .category-card {
      position: relative;
      border-radius: 8px;
      overflow: hidden;
      cursor: pointer;
    }
    .category-card img {
      width: 100%;
      height: 150px;
      object-fit: cover;
      filter: brightness(70%);
      transition: filter 0.3s;
    }
    .category-card:hover img { filter: brightness(100%); }
    .category-card span {
      position: absolute;
      bottom: 10px;
      left: 10px;
      background: rgba(0,0,0,0.5);
      color: var(--light);
      padding: 8px 12px;
      border-radius: 4px;
      font-size: 18px;
    }

    /*────────────────────────────
      ユーザーレビュー・スライダー
    ────────────────────────────*/
    .reviews-slider {
      position: relative;
      overflow: hidden;
      padding: 20px 0;
    }
    .reviews-track {
      display: flex;
      gap: 20px;
      transition: transform 0.5s ease-in-out;
    }
    .review-card {
      background: var(--light);
      border-radius: 8px;
      box-shadow: var(--shadow);
      padding: 20px;
      min-width: 320px;
    }
    .review-card h4 { font-size: 20px; margin-bottom: 10px; }
    .review-card .rating { margin-bottom: 10px; }
    .review-card .rating span { color: gold; font-size: 22px; }
    .review-card p { font-size: 16px; color: #444; }

    /*────────────────────────────
      ブログセクション
    ────────────────────────────*/
    .blog-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;
    }
    .blog-card {
      background: var(--light);
      border-radius: 8px;
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    .blog-card img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }
    .blog-card-content { padding: 15px; }
    .blog-card-content h3 { font-size: 22px; margin-bottom: 10px; }
    .blog-card-content p { font-size: 16px; color: #666; margin-bottom: 10px; }
    .blog-card-content .btn {
      background: var(--primary);
      padding: 8px 16px;
      border-radius: 4px;
      transition: background 0.3s;
      font-size: 16px;
    }
    .blog-card-content .btn:hover { background: var(--accent); }

    /*────────────────────────────
      モーダル（商品詳細、ログイン、登録、カート、アップロード）
    ────────────────────────────*/
    .modal-overlay {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.6);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 2000;
    }
    .modal-overlay.active { display: flex; }
    .modal {
      background: var(--light);
      max-width: 600px;
      width: 90%;
      border-radius: 8px;
      overflow: hidden;
      animation: modalFade 0.3s;
      position: relative;
    }
    @keyframes modalFade {
      from { opacity: 0; transform: translateY(-20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .modal-header, .modal-footer { padding: 15px; background: var(--dark); color: var(--light); }
    .modal-body { padding: 20px; }
    .modal-close {
      position: absolute;
      top: 15px;
      right: 15px;
      font-size: 24px;
      cursor: pointer;
      color: var(--light);
    }

    /*────────────────────────────
      Back-to-Top ボタン
    ────────────────────────────*/
    #backToTop {
      position: fixed;
      bottom: 40px;
      right: 40px;
      background: var(--primary);
      color: var(--light);
      padding: 12px;
      border-radius: 50%;
      display: none;
      cursor: pointer;
      box-shadow: var(--shadow);
      transition: background 0.3s;
      z-index: 1500;
    }
    #backToTop:hover { background: var(--accent); }

    /*────────────────────────────
      フィルターサイドバー（デスクトップ）
    ────────────────────────────*/
    .filter-sidebar {
      position: fixed;
      top: 100px;
      left: 20px;
      width: 250px;
      background: var(--light);
      border: 1px solid #ccc;
      border-radius: 8px;
      padding: 20px;
      box-shadow: var(--shadow);
      z-index: 1200;
    }
    .filter-sidebar h3 { font-size: 20px; margin-bottom: 15px; }
    .filter-sidebar label { display: block; margin-bottom: 8px; font-size: 16px; }
    .filter-sidebar input, .filter-sidebar select {
      width: 100%;
      padding: 6px 8px;
      margin-bottom: 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    .filter-sidebar button {
      width: 100%;
      padding: 10px;
      background: var(--primary);
      border: none;
      color: var(--light);
      border-radius: 4px;
      font-size: 16px;
      transition: background 0.3s;
      cursor: pointer;
    }
    .filter-sidebar button:hover { background: var(--accent); }
    @media (max-width: 1024px) { .filter-sidebar { display: none; } }
  </style>
</head>
<body>
  <!--────────────────────────────
       ヘッダー
  ────────────────────────────-->
  <header>
    <div class="logo">
      <img src="images/logo.png" alt="GameStore Logo" loading="lazy">
      <h1>GameStore Ultra</h1>
    </div>
    <div class="hamburger" id="hamburger">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </header>

  <!--────────────────────────────
       ナビゲーション
  ────────────────────────────-->
  <nav>
    <div class="nav-container">
      <ul class="nav-menu" id="navMenu">
        <li><a href="#">ホーム</a></li>
        <li>
          <a href="#">新作</a>
          <ul class="dropdown">
            <li><a href="#">今週の新作</a></li>
            <li><a href="#">今月の新作</a></li>
          </ul>
        </li>
        <li>
          <a href="#">人気タイトル</a>
          <ul class="dropdown">
            <li><a href="#">ランキング</a></li>
            <li><a href="#">レビュー</a></li>
          </ul>
        </li>
        <li><a href="#">セール</a></li>
        <li><a href="#">ブログ</a></li>
        <li class="upload-link"><a href="#" id="uploadLink">アップロード</a></li>
      </ul>
      <div class="search-container">
        <input type="text" placeholder="ゲームを検索..." id="searchInput">
        <button id="searchButton">検索</button>
      </div>
    </div>
  </nav>

  <!--────────────────────────────
       フィルターサイドバー（デスクトップ用）
  ────────────────────────────-->
  <aside class="filter-sidebar" id="filterSidebar">
    <h3>フィルター</h3>
    <label for="filterGenre">ジャンル:</label>
    <select id="filterGenre">
      <option value="">すべて</option>
      <option value="アクション">アクション</option>
      <option value="RPG">RPG</option>
      <option value="シューティング">シューティング</option>
      <option value="パズル">パズル</option>
    </select>
    <label for="filterPrice">価格上限:</label>
    <input type="number" id="filterPrice" placeholder="例: 5000">
    <button id="applyFilter">フィルター適用</button>
  </aside>

  <!--────────────────────────────
       ヒーロースライダー
  ────────────────────────────-->
  <div class="hero-slider" id="heroSlider">
    <div class="hero-slide active" style="background-image: url('images/hero1.jpg');">
      <div class="hero-content">
        <h2>最新作が続々登場！</h2>
        <p>冒険、戦略、アクション…全てのゲームがここに。</p>
        <a href="#" class="btn">詳しく見る</a>
      </div>
    </div>
    <div class="hero-slide" style="background-image: url('images/hero2.jpg');">
      <div class="hero-content">
        <h2>セール開催中！</h2>
        <p>期間限定、最大50%OFF！</p>
        <a href="#" class="btn">セールを見る</a>
      </div>
    </div>
    <div class="hero-slide" style="background-image: url('images/hero3.jpg');">
      <div class="hero-content">
        <h2>ユーザーレビューで選ぶ</h2>
        <p>実際の評価を元に、あなたにピッタリのゲームを見つけよう。</p>
        <a href="#" class="btn">レビューを見る</a>
      </div>
    </div>
    <div class="hero-controls" id="heroControls"></div>
  </div>

  <!--────────────────────────────
       新作ゲームセクション
  ────────────────────────────-->
  <section id="new-releases" class="fade-in">
    <h2 class="section-title">新作ゲーム</h2>
    <p class="section-description">最新のゲームタイトルをチェック！</p>
    <div class="game-grid" id="newReleasesGrid">
      <div class="game-card" data-title="新作ゲーム1" data-genre="アクション" data-price="3500円" data-description="迫力のアクションと最新技術が融合した作品。">
        <img src="images/new1.jpg" alt="新作ゲーム1" loading="lazy">
        <div class="game-card-content">
          <h3>新作ゲーム1</h3>
          <p>ジャンル: アクション</p>
          <p class="price">3500円</p>
        </div>
        <div class="card-overlay"></div>
      </div>
      <div class="game-card" data-title="新作ゲーム2" data-genre="RPG" data-price="4200円" data-description="壮大な物語と美しい世界観が魅力。">
        <img src="images/new2.jpg" alt="新作ゲーム2" loading="lazy">
        <div class="game-card-content">
          <h3>新作ゲーム2</h3>
          <p>ジャンル: RPG</p>
          <p class="price">4200円</p>
        </div>
        <div class="card-overlay"></div>
      </div>
      <div class="game-card" data-title="新作ゲーム3" data-genre="シューティング" data-price="2900円" data-description="高速なアクションとリアルなグラフィックが特長。">
        <img src="images/new3.jpg" alt="新作ゲーム3" loading="lazy">
        <div class="game-card-content">
          <h3>新作ゲーム3</h3>
          <p>ジャンル: シューティング</p>
          <p class="price">2900円</p>
        </div>
        <div class="card-overlay"></div>
      </div>
      <div class="game-card" data-title="新作ゲーム4" data-genre="パズル" data-price="1500円" data-description="頭脳を刺激する独自のパズル体験。">
        <img src="images/new4.jpg" alt="新作ゲーム4" loading="lazy">
        <div class="game-card-content">
          <h3>新作ゲーム4</h3>
          <p>ジャンル: パズル</p>
          <p class="price">1500円</p>
        </div>
        <div class="card-overlay"></div>
      </div>
    </div>
  </section>

  <!--────────────────────────────
       注目特集セクション
  ────────────────────────────-->
  <section id="featured" class="fade-in">
    <h2 class="section-title">注目の特集</h2>
    <p class="section-description">今週の注目タイトルや特集記事をお届けします。</p>
    <div class="game-grid">
      <div class="game-card" data-title="特集タイトル1" data-genre="特集" data-price="記事を見る" data-description="最新トレンドを徹底解説。">
        <img src="images/featured1.jpg" alt="特集1" loading="lazy">
        <div class="game-card-content">
          <h3>特集タイトル1</h3>
          <p>期間限定特集：最新トレンド</p>
          <p class="price">特集記事を見る</p>
        </div>
        <div class="card-overlay"></div>
      </div>
      <div class="game-card" data-title="特集タイトル2" data-genre="特集" data-price="記事を見る" data-description="インディーゲームの革新を追う。">
        <img src="images/featured2.jpg" alt="特集2" loading="lazy">
        <div class="game-card-content">
          <h3>特集タイトル2</h3>
          <p>話題のインディーゲーム特集</p>
          <p class="price">特集記事を見る</p>
        </div>
        <div class="card-overlay"></div>
      </div>
    </div>
  </section>

  <!--────────────────────────────
       アップロード済みゲーム表示（管理者アップロードデータ）
  ────────────────────────────-->
  <section id="my-uploads" class="fade-in">
    <h2 class="section-title">アップロードしたゲーム</h2>
    <p class="section-description">管理者がアップロードしたゲームデータです。</p>
    <div class="game-grid" id="myUploadsGrid"></div>
  </section>

  <!--────────────────────────────
       ジャンル別セクション
  ────────────────────────────-->
  <section id="categories" class="fade-in">
    <h2 class="section-title">ジャンル別</h2>
    <p class="section-description">お気に入りのジャンルからゲームを探してみましょう。</p>
    <div class="categories">
      <a href="#" class="category-card">
        <img src="images/cat-action.jpg" alt="アクション" loading="lazy">
        <span>アクション</span>
      </a>
      <a href="#" class="category-card">
        <img src="images/cat-rpg.jpg" alt="RPG" loading="lazy">
        <span>RPG</span>
      </a>
      <a href="#" class="category-card">
        <img src="images/cat-shooting.jpg" alt="シューティング" loading="lazy">
        <span>シューティング</span>
      </a>
      <a href="#" class="category-card">
        <img src="images/cat-puzzle.jpg" alt="パズル" loading="lazy">
        <span>パズル</span>
      </a>
      <a href="#" class="category-card">
        <img src="images/cat-adventure.jpg" alt="アドベンチャー" loading="lazy">
        <span>アドベンチャー</span>
      </a>
    </div>
  </section>

  <!--────────────────────────────
       ユーザーレビューセクション
  ────────────────────────────-->
  <section id="reviews" class="fade-in">
    <h2 class="section-title">ユーザーレビュー</h2>
    <p class="section-description">実際にプレイしたユーザーの評価をチェック！</p>
    <div class="reviews-slider">
      <div class="reviews-track">
        <div class="review-card">
          <h4>最高のアクション体験！</h4>
          <div class="rating"><span>★★★★★</span></div>
          <p>アクションゲームの決定版。グラフィックも音楽も最高でした。</p>
        </div>
        <div class="review-card">
          <h4>壮大なストーリーに引き込まれる</h4>
          <div class="rating"><span>★★★★☆</span></div>
          <p>RPGの世界観が素晴らしく、ストーリーにのめり込みました。</p>
        </div>
        <div class="review-card">
          <h4>クセになる操作感！</h4>
          <div class="rating"><span>★★★★★</span></div>
          <p>シューティングゲームとして非常に爽快な操作感で、何度も挑戦しました。</p>
        </div>
      </div>
    </div>
  </section>

  <!--────────────────────────────
       ブログセクション
  ────────────────────────────-->
  <section id="blog" class="fade-in">
    <h2 class="section-title">最新ブログ</h2>
    <p class="section-description">ゲーム業界の最新情報や攻略記事をお届けします。</p>
    <div class="blog-grid">
      <div class="blog-card">
        <img src="images/blog1.jpg" alt="ブログ記事1" loading="lazy">
        <div class="blog-card-content">
          <h3>2025年の注目ゲームトレンド</h3>
          <p>今年注目すべきゲームの傾向と今後の展望について解説します。</p>
          <a href="#" class="btn">続きを読む</a>
        </div>
      </div>
      <div class="blog-card">
        <img src="images/blog2.jpg" alt="ブログ記事2" loading="lazy">
        <div class="blog-card-content">
          <h3>セール攻略：お得に買う方法</h3>
          <p>賢く買い物するための裏技やポイントを紹介します。</p>
          <a href="#" class="btn">続きを読む</a>
        </div>
      </div>
      <div class="blog-card">
        <img src="images/blog3.jpg" alt="ブログ記事3" loading="lazy">
        <div class="blog-card-content">
          <h3>レビューで選ぶ！おすすめタイトル</h3>
          <p>実際のユーザーレビューをもとに、人気タイトルをピックアップ。</p>
          <a href="#" class="btn">続きを読む</a>
        </div>
      </div>
    </div>
  </section>

  <!--────────────────────────────
       商品詳細モーダル
  ────────────────────────────-->
  <div class="modal-overlay" id="productModal">
    <div class="modal">
      <div class="modal-header">
        <h2 id="modalTitle">ゲーム詳細</h2>
        <span class="modal-close" id="modalClose">&times;</span>
      </div>
      <div class="modal-body" id="modalBody">
        <p id="modalDescription">詳細情報がここに表示されます。</p>
        <p><strong>ジャンル:</strong> <span id="modalGenre"></span></p>
        <p><strong>価格:</strong> <span id="modalPrice"></span></p>
      </div>
      <div class="modal-footer">
        <button class="btn" id="modalBuyButton">今すぐ購入</button>
      </div>
    </div>
  </div>

  <!--────────────────────────────
       ログインモーダル
  ────────────────────────────-->
  <div class="modal-overlay" id="loginModal">
    <div class="modal">
      <div class="modal-header">
        <h2>ログイン</h2>
        <span class="modal-close" id="loginClose">&times;</span>
      </div>
      <div class="modal-body">
        <form id="loginForm">
          <label for="loginUsername">ユーザー名:</label>
          <input type="text" id="loginUsername" required>
          <label for="loginPassword">パスワード:</label>
          <input type="password" id="loginPassword" required>
          <button class="btn" type="submit">ログイン</button>
        </form>
      </div>
    </div>
  </div>

  <!--────────────────────────────
       新規登録モーダル
  ────────────────────────────-->
  <div class="modal-overlay" id="registerModal">
    <div class="modal">
      <div class="modal-header">
        <h2>新規登録</h2>
        <span class="modal-close" id="registerClose">&times;</span>
      </div>
      <div class="modal-body">
        <form id="registerForm">
          <label for="registerUsername">ユーザー名:</label>
          <input type="text" id="registerUsername" required>
          <label for="registerEmail">メールアドレス:</label>
          <input type="email" id="registerEmail" required>
          <label for="registerPassword">パスワード:</label>
          <input type="password" id="registerPassword" required>
          <button class="btn" type="submit">登録</button>
        </form>
      </div>
    </div>
  </div>

  <!--────────────────────────────
       カートモーダル
  ────────────────────────────-->
  <div class="modal-overlay" id="cartModal">
    <div class="modal">
      <div class="modal-header">
        <h2>カート</h2>
        <span class="modal-close" id="cartClose">&times;</span>
      </div>
      <div class="modal-body" id="cartBody">
        <p>カートにアイテムはありません。</p>
      </div>
      <div class="modal-footer">
        <button class="btn" id="checkoutButton">チェックアウト</button>
      </div>
    </div>
  </div>

  <!--────────────────────────────
       アップロードモーダル（管理者向け）
  ────────────────────────────-->
  <div class="modal-overlay" id="uploadModal">
    <div class="modal">
      <div class="modal-header">
        <h2>ゲームアップロード</h2>
        <span class="modal-close" id="uploadClose">&times;</span>
      </div>
      <div class="modal-body">
        <form id="uploadForm" enctype="multipart/form-data">
          <label for="uploadTitle">ゲームタイトル:</label>
          <input type="text" id="uploadTitle" required>
          <label for="uploadGenre">ジャンル:</label>
          <input type="text" id="uploadGenre" required>
          <label for="uploadPrice">価格:</label>
          <input type="number" id="uploadPrice" required>
          <label for="uploadDescription">説明:</label>
          <textarea id="uploadDescription" rows="4" required></textarea>
          <label for="uploadFile">画像アップロード:</label>
          <input type="file" id="uploadFile" accept="image/*" required>
          <button class="btn" type="submit">アップロード</button>
        </form>
      </div>
    </div>
  </div>

  <!--────────────────────────────
       フローティングカートボタン
  ────────────────────────────-->
  <button id="cartButton" style="position: fixed; bottom: 100px; right: 40px; background: var(--primary); color: var(--light); padding:12px; border:none; border-radius:50%; box-shadow: var(--shadow); cursor:pointer; z-index:1500;">
    🛒
  </button>

  <!--────────────────────────────
       Back-to-Top ボタン
  ────────────────────────────-->
  <div id="backToTop">&#8679;</div>

  <!--────────────────────────────
       JavaScript（各種機能の実装）
  ────────────────────────────-->
  <script>
    // ハンバーガーメニューの切替
    const hamburger = document.getElementById('hamburger');
    const navMenu = document.getElementById('navMenu');
    hamburger.addEventListener('click', () => {
      navMenu.classList.toggle('active');
    });

    // ヒーロースライダー（自動・手動切替）
    const slides = document.querySelectorAll('.hero-slide');
    const heroControls = document.getElementById('heroControls');
    let currentSlide = 0;
    slides.forEach((_, index) => {
      const dot = document.createElement('div');
      dot.classList.add('hero-control');
      if(index === 0) dot.classList.add('active');
      dot.addEventListener('click', () => showSlide(index));
      heroControls.appendChild(dot);
    });
    function showSlide(index) {
      slides[currentSlide].classList.remove('active');
      heroControls.children[currentSlide].classList.remove('active');
      currentSlide = index;
      slides[currentSlide].classList.add('active');
      heroControls.children[currentSlide].classList.add('active');
    }
    setInterval(() => {
      let next = (currentSlide + 1) % slides.length;
      showSlide(next);
    }, 5000);

    // Back-to-Top ボタン表示
    const backToTop = document.getElementById('backToTop');
    window.addEventListener('scroll', () => {
      backToTop.style.display = window.scrollY > 300 ? 'block' : 'none';
    });
    backToTop.addEventListener('click', () => {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    });

    // IntersectionObserver によるフェードイン効果
    const faders = document.querySelectorAll('.fade-in');
    const appearOptions = { threshold: 0.1 };
    const appearOnScroll = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
        if(entry.isIntersecting) {
          entry.target.classList.add('visible');
          observer.unobserve(entry.target);
        }
      });
    }, appearOptions);
    faders.forEach(fader => appearOnScroll.observe(fader));

    // 商品詳細モーダル
    const gameCards = document.querySelectorAll('.game-card');
    const productModal = document.getElementById('productModal');
    const modalTitle = document.getElementById('modalTitle');
    const modalDescription = document.getElementById('modalDescription');
    const modalGenre = document.getElementById('modalGenre');
    const modalPrice = document.getElementById('modalPrice');
    const modalClose = document.getElementById('modalClose');
    gameCards.forEach(card => {
      card.addEventListener('click', () => {
        modalTitle.textContent = card.getAttribute('data-title');
        modalGenre.textContent = card.getAttribute('data-genre');
        modalPrice.textContent = card.getAttribute('data-price');
        modalDescription.textContent = card.getAttribute('data-description');
        productModal.classList.add('active');
      });
    });
    modalClose.addEventListener('click', () => productModal.classList.remove('active'));
    productModal.addEventListener('click', (e) => { if(e.target === productModal) productModal.classList.remove('active'); });

    // 検索フィルター
    const searchInput = document.getElementById('searchInput');
    const searchButton = document.getElementById('searchButton');
    searchButton.addEventListener('click', () => {
      const query = searchInput.value.toLowerCase();
      const cards = document.querySelectorAll('.game-card');
      cards.forEach(card => {
        const title = card.getAttribute('data-title').toLowerCase();
        const genre = card.getAttribute('data-genre').toLowerCase();
        card.style.display = (title.includes(query) || genre.includes(query)) ? 'block' : 'none';
      });
    });

    // フィルターサイドバー機能
    const filterGenre = document.getElementById('filterGenre');
    const filterPrice = document.getElementById('filterPrice');
    const applyFilter = document.getElementById('applyFilter');
    applyFilter.addEventListener('click', () => {
      const genreValue = filterGenre.value;
      const priceValue = filterPrice.value;
      const cards = document.querySelectorAll('.game-card');
      cards.forEach(card => {
        const cardGenre = card.getAttribute('data-genre');
        const cardPrice = parseInt(card.getAttribute('data-price')) || 0;
        let matchesGenre = genreValue === "" || cardGenre === genreValue;
        let matchesPrice = !priceValue || (cardPrice && cardPrice <= parseInt(priceValue));
        card.style.display = (matchesGenre && matchesPrice) ? 'block' : 'none';
      });
    });

    // ログインモーダル
    const loginModal = document.getElementById('loginModal');
    const loginClose = document.getElementById('loginClose');
    loginClose.addEventListener('click', () => loginModal.classList.remove('active'));
    loginModal.addEventListener('click', (e) => { if(e.target === loginModal) loginModal.classList.remove('active'); });

    // 新規登録モーダル
    const registerModal = document.getElementById('registerModal');
    const registerClose = document.getElementById('registerClose');
    registerClose.addEventListener('click', () => registerModal.classList.remove('active'));
    registerModal.addEventListener('click', (e) => { if(e.target === registerModal) registerModal.classList.remove('active'); });

    // カートモーダル
    const cartModal = document.getElementById('cartModal');
    const cartClose = document.getElementById('cartClose');
    const cartButton = document.getElementById('cartButton');
    cartButton.addEventListener('click', () => cartModal.classList.add('active'));
    cartClose.addEventListener('click', () => cartModal.classList.remove('active'));
    cartModal.addEventListener('click', (e) => { if(e.target === cartModal) cartModal.classList.remove('active'); });

    // アップロードモーダル（管理者向け）
    const uploadModal = document.getElementById('uploadModal');
    const uploadLink = document.getElementById('uploadLink');
    const uploadClose = document.getElementById('uploadClose');
    uploadLink.addEventListener('click', (e) => {
      e.preventDefault();
      uploadModal.classList.add('active');
    });
    uploadClose.addEventListener('click', () => uploadModal.classList.remove('active'));
    uploadModal.addEventListener('click', (e) => { if(e.target === uploadModal) uploadModal.classList.remove('active'); });

    // アップロードフォーム送信（アップロードデータをlocalStorageへ保存）
    const uploadForm = document.getElementById('uploadForm');
    uploadForm.addEventListener('submit', (e) => {
      e.preventDefault();
      const title = document.getElementById('uploadTitle').value;
      const genre = document.getElementById('uploadGenre').value;
      const price = document.getElementById('uploadPrice').value + "円";
      const description = document.getElementById('uploadDescription').value;
      const fileInput = document.getElementById('uploadFile');
      const file = fileInput.files[0];
      if(file) {
        const reader = new FileReader();
        reader.onload = function(event) {
          const imageData = event.target.result;
          const gameData = { title, genre, price, description, image: imageData };
          let uploadedGames = JSON.parse(localStorage.getItem('uploadedGames')) || [];
          uploadedGames.push(gameData);
          localStorage.setItem('uploadedGames', JSON.stringify(uploadedGames));
          loadUploadedGames();
          alert('アップロードが完了しました。');
          uploadModal.classList.remove('active');
          uploadForm.reset();
        };
        reader.readAsDataURL(file);
      }
    });

    // アップロード済みゲームを読み込み表示する（「アップロードしたゲーム」セクション）
    function loadUploadedGames() {
      const grid = document.getElementById('myUploadsGrid');
      let uploadedGames = JSON.parse(localStorage.getItem('uploadedGames')) || [];
      grid.innerHTML = "";
      uploadedGames.forEach(game => {
        const card = document.createElement('div');
        card.classList.add('game-card');
        card.setAttribute('data-title', game.title);
        card.setAttribute('data-genre', game.genre);
        card.setAttribute('data-price', game.price);
        card.setAttribute('data-description', game.description);
        card.innerHTML = `
          <img src="${game.image}" alt="${game.title}" loading="lazy">
          <div class="game-card-content">
            <h3>${game.title}</h3>
            <p>ジャンル: ${game.genre}</p>
            <p class="price">${game.price}</p>
          </div>
          <div class="card-overlay"></div>
        `;
        card.addEventListener('click', () => {
          modalTitle.textContent = game.title;
          modalGenre.textContent = game.genre;
          modalPrice.textContent = game.price;
          modalDescription.textContent = game.description;
          productModal.classList.add('active');
        });
        grid.appendChild(card);
      });
    }
    // ページ読み込み時にアップロード済みゲームを表示
    loadUploadedGames();
  </script>
</body>
<footer>
  <div class="footer-container">
    <div class="footer-col">
      <h4>会社情報</h4>
      <ul>
        <li><a href="#">企業理念</a></li>
        <li><a href="#">採用情報</a></li>
        <li><a href="#">プレスリリース</a></li>
      </ul>
    </div>
    <div class="footer-col">
      <h4>サポート</h4>
      <ul>
        <li><a href="#">お問い合わせ</a></li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">利用規約</a></li>
      </ul>
    </div>
    <div class="footer-col">
      <h4>ニュースレター</h4>
      <p>最新情報をメールで受け取る</p>
      <form class="subscribe-form">
        <input type="email" placeholder="メールアドレス" required>
        <button type="submit">登録</button>
      </form>
    </div>
  </div>
  <div class="footer-bottom">&copy; 2025 GameStore Ultra. All rights reserved.</div>
</footer>
</html>

QuestifyInfinity.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Questify Advanced Battle</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- レトロゲーム風フォント -->
  <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">

  <style>
    /* ========== 全体 ========== */
    body {
      background-color: #1a1a1a;
      color: #fff;
      font-family: 'Press Start 2P', cursive;
      margin: 0; padding: 0;
    }
    header, footer {
      background: #333; text-align: center; padding: 15px; border-bottom: 2px solid #555;
    }
    header h1 { font-size: 1.3rem; margin: 0; }
    main { max-width: 1200px; margin: 10px auto; padding-bottom: 80px; }

    .box {
      background: #2b2b2b; margin-bottom: 20px;
      border: 2px solid #555; padding: 20px; position: relative;
    }
    .section-title { font-size: 1.2rem; margin-bottom: 10px; }
    button {
      font-family: 'Press Start 2P', cursive;
      border: none; cursor: pointer; padding: 6px 10px; margin-right: 5px;
    }
    button:hover { opacity: 0.8; }
    .btn-primary { background: #006699; color: #fff; }
    .btn-delete { background: #bb3333; color: #fff; }

    /* ステータス表示 */
    .hero-info p { margin: 5px 0; }
    .xp-bar {
      background: #555; width: 100%; height: 20px; margin: 5px 0;
      position: relative; overflow: hidden;
    }
    .xp-fill {
      background: #00aa00; width: 0%; height: 100%;
      transition: width 0.3s ease;
    }

    /* パーティ */
    .party-member {
      background: #333; border: 2px solid #555;
      padding: 10px; margin-bottom: 10px;
    }

    /* スキルツリー */
    .skill-tree .skill {
      background: #333; border: 2px solid #555;
      padding: 10px; margin-bottom: 10px;
    }

    /* 装備・素材 */
    .equipment-info p { margin: 3px 0; }
    .craft-recipe {
      border: 1px dashed #999;
      margin-bottom: 10px; padding: 5px;
    }

    /* クエスト */
    .quest-list .quest {
      background: #333; border: 2px solid #555;
      padding: 10px; margin-bottom: 10px;
    }

    /* 実績 */
    .achievements .achievement {
      background: #333; border: 2px solid #555;
      padding: 10px; margin-bottom: 10px; position: relative;
    }
    .achievement.locked { opacity: 0.5; }
    .locked-label {
      position: absolute; top: 5px; right: 5px;
      background: #cc0000; padding: 3px 5px; font-size: 0.7rem;
    }

    /* バトルモーダル */
    .modal-bg {
      position: fixed; top: 0; left: 0; width: 100%; height: 100%;
      background: rgba(0,0,0,0.8);
      display: none; justify-content: center; align-items: center;
    }
    .modal {
      background: #2b2b2b; border: 2px solid #555;
      padding: 20px; max-width: 600px; width: 90%;
      position: relative;
    }
    .close-btn {
      position: absolute; top: 10px; right: 10px;
      background: #dd3333; color: #fff; padding: 5px 8px; border: none;
    }
    .battle-enemy-info, .battle-hero-info {
      margin-bottom: 10px;
    }
    #battleLog {
      border: 1px solid #555;
      min-height: 60px; padding: 5px;
      margin: 10px 0; max-height: 200px; overflow-y: auto;
    }
    .battle-action-buttons { margin-top: 10px; }
    .battle-action-buttons button { margin: 5px 5px 0 0; }
  </style>
</head>

<body>
<header>
  <h1>Questify Advanced Battle</h1>
</header>

<main>

  <!-- ===================== ヒーロー & パーティステータス ===================== -->
  <section class="box">
    <h2 class="section-title">冒険者ステータス</h2>
    <div class="hero-info">
      <p>勇者: <span id="heroNameDisplay">No Name</span></p>
      <p>職業: <span id="heroJobDisplay">未設定</span></p>
      <p>
        Lv.<span id="heroLevel">1</span>
        HP:<span id="heroHp">?</span>/<span id="heroMaxHp">?</span>
      </p>
      <div class="xp-bar">
        <div class="xp-fill" id="xpFill"></div>
      </div>
      <p>EXP: <span id="heroXp">0</span> / <span id="xpToNextLevel">100</span></p>
      <p>Gold: <span id="heroGold">0</span></p>
      <p>Skill Pts: <span id="heroSkillPts">0</span></p>
      <label>勇者名: <input type="text" id="heroNameInput" placeholder="アルス" /></label>
      <button onclick="changeHeroName()">変更</button>
    </div>
  </section>

  <section class="box">
    <h2 class="section-title">パーティメンバー</h2>
    <div id="partyList"></div>
    <button class="btn-primary" onclick="addPartyMember()">仲間を雇う (最大2人)</button>
  </section>

  <!-- ===================== スキルツリー ===================== -->
  <section class="box">
    <h2 class="section-title">職業 & スキルツリー</h2>
    <p>
      <button onclick="setJob('戦士')">戦士</button>
      <button onclick="setJob('魔法使い')">魔法使い</button>
      <button onclick="setJob('盗賊')">盗賊</button>
    </p>
    <div class="skill-tree" id="skillTree"></div>
  </section>

  <!-- ===================== 装備 & クラフト ===================== -->
  <section class="box">
    <h2 class="section-title">装備 & クラフト</h2>
    <div class="equipment-info" id="heroEquipment"></div>

    <h3>クラフトレシピ</h3>
    <div id="craftContainer"></div>
  </section>

  <!-- ===================== クエスト (デイリー/通常/ウィークリー) ===================== -->
  <section class="box">
    <h2 class="section-title">クエスト</h2>
    <div style="margin-bottom:10px;">
      <button class="btn-primary" onclick="switchQuestTab('daily')">デイリー</button>
      <button class="btn-primary" onclick="switchQuestTab('normal')">通常</button>
      <button class="btn-primary" onclick="switchQuestTab('weekly')">ウィークリー</button>
    </div>
    <div id="dailyQuests" class="quest-list"></div>
    <div id="normalQuests" class="quest-list" style="display:none;"></div>
    <div id="weeklyQuests" class="quest-list" style="display:none;"></div>
  </section>

  <!-- ===================== マップ & ボス戦 ===================== -->
  <section class="box">
    <h2 class="section-title">ワールドマップ</h2>
    <div id="mapAreaContainer"></div>
  </section>

  <!-- ===================== ランダムエンカウント ===================== -->
  <section class="box">
    <h2 class="section-title">ダンジョン潜入 (複数敵ランダムエンカウント)</h2>
    <p>ボタンを押すと **複数の敵** が出る場合も！</p>
    <button class="btn-primary" onclick="startRandomEncounter()">ダンジョンに潜る</button>
  </section>

  <!-- ===================== 実績 & ストーリー ===================== -->
  <section class="box achievements">
    <h2 class="section-title">実績(Achievements)</h2>
    <div id="achievementList"></div>
  </section>

  <section class="box">
    <h2 class="section-title">ストーリー進行</h2>
    <div id="storyProgress"></div>
  </section>

</main>

<footer>
  <p>© 2025 Questify Advanced Battle</p>
</footer>

<!-- ========== 個別ターン制バトルモーダル ========== -->
<div class="modal-bg" id="battleModalBg">
  <div class="modal" id="battleModal">
    <button class="close-btn" onclick="closeBattleModal()">×</button>
    <h2 id="battleTitle">バトル</h2>
    <p id="battleDesc"></p>

    <!-- 敵一覧表示 -->
    <div class="battle-enemy-info" id="battleEnemyInfo"></div>
    <!-- 味方一覧表示 -->
    <div class="battle-hero-info" id="battleHeroInfo"></div>

    <!-- 行動ログ -->
    <div id="battleLog"></div>

    <!-- プレイヤー操作ボタン (アクション選択) -->
    <div class="battle-action-buttons" id="battleActionButtons">
      <button onclick="chooseAttack()">攻撃</button>
      <button onclick="chooseSkill()">スキル</button>
      <button onclick="chooseItem()">アイテム</button>
      <button onclick="chooseDefend()">防御</button>
      <button onclick="chooseFlee()">逃げる</button>
    </div>
  </div>
</div>

<script>
/* =========================================
   1) データ構造 & ローカルストレージ
========================================= */
const STORAGE_KEY = "questify_battle_data";

let gameData = {
  hero: {
    name: "No Name",
    job: "未設定",
    level: 1,
    xp: 0,
    gold: 0,
    skillPts: 0,
    hp: 50,
    maxHp: 50,
    speed: 8,  // 追加: 素早さ
    equipment: { weapon: null, armor: null, accessory: null },
    materials: { wood: 0, ore: 0, magicCrystal: 0 },
    consumables: { potion: 2 },
    // アクティブスキル(例): 攻撃スキル
    activeSkills: [
      { id: "slash", name: "パワースラッシュ", baseDamage: 15 },
      // ここに追加スキルを増やす
    ]
  },
  party: [
    // 仲間も speed を持つ、activeSkills を持つなど拡張可能
    // { id, name, level, xp, hp, maxHp, speed, attack, equipment, activeSkills, ... }
  ],
  // 職業ごとのパッシブスキル
  skills: {
    warrior: [
      { id: 1, name: "剣術熟練", level: 0, maxLevel: 5, desc: "攻撃力+2/Lv" },
      { id: 2, name: "体力増強", level: 0, maxLevel: 5, desc: "HP+10/Lv" }
    ],
    mage: [
      { id: 1, name: "魔力増強", level: 0, maxLevel: 5, desc: "魔法攻撃力+3/Lv" },
      { id: 2, name: "精神集中", level: 0, maxLevel: 5, desc: "ボス戦追加ダメージ+5/Lv" }
    ],
    thief: [
      { id: 1, name: "素早さ強化", level: 0, maxLevel: 5, desc: "攻撃力+2/Lv" },
      { id: 2, name: "ゴールド盗み", level: 0, maxLevel: 5, desc: "討伐時Gold+5/Lv" }
    ]
  },
  // クラフトレシピ & クエスト & マップ & 実績 等は前回コードと同じ
  // …（省略なし、全て記載）…
  craftingRecipes: [
    {
      id: 1,
      result: { name: "回復薬", type: "consumable", itemKey: "potion", amount: 1, hpRestore: 30 },
      materialsRequired: { wood: 1, magicCrystal: 1 },
      desc: "木材1 & 魔力結晶1 で回復薬を1つ生成"
    }
  ],
  dailyQuests: [
    { id: 1, title: "【デイリー】部屋掃除", exp: 10, gold: 5, completed: false },
    { id: 2, title: "【デイリー】筋トレ15分", exp: 15, gold: 5, completed: false }
  ],
  normalQuests: [
    { id: 1, title: "HTML/CSSの学習", exp: 20, gold: 10, completed: false },
    { id: 2, title: "ランニング30分", exp: 25, gold: 10, completed: false }
  ],
  weeklyQuests: [
    { id: 1, title: "【ウィークリー】5日連続早起き", exp: 50, gold: 30, completed: false },
    { id: 2, title: "【ウィークリー】合計5時間の学習", exp: 60, gold: 40, completed: false }
  ],
  mapAreas: [
    { id: 1, name: "街", levelReq: 1, desc: "安全な街", boss: null },
    { id: 2, name: "森", levelReq: 3, desc: "木材が手に入るかも", boss: { name: "森の主", hp: 60, maxHp: 60, speed: 6, atk: 12, rewardExp: 50, rewardGold: 30 } },
    { id: 3, name: "洞窟", levelReq: 5, desc: "鉱石が眠る", boss: { name: "ゴーレム", hp: 100, maxHp: 100, speed: 4, atk: 20, rewardExp: 100, rewardGold: 80 } },
    { id: 4, name: "魔王城", levelReq: 10, desc: "魔王が支配する城", boss: { name: "魔王", hp: 200, maxHp: 200, speed: 10, atk: 35, rewardExp: 300, rewardGold: 200 } }
  ],
  achievements: [
    { id: 1, title: "初クエスト達成", desc: "クエストを1回完了", type: "questCount", target: 1, unlocked: false },
    { id: 2, title: "レベル10到達", desc: "Lv.10になる", type: "level", target: 10, unlocked: false },
    { id: 3, title: "森の主撃破", desc: "森の主を倒す", type: "bossKill", bossName: "森の主", unlocked: false },
    { id: 4, title: "魔王撃破", desc: "魔王を倒す", type: "bossKill", bossName: "魔王", unlocked: false },
    { id: 5, title: "金持ち", desc: "ゴールドが100を超える", type: "gold", target: 100, unlocked: false }
  ],
  story: [
    { bossName: "森の主", text: "森の主を倒し、森に平穏が戻った…！" },
    { bossName: "ゴーレム", text: "洞窟のゴーレムを粉砕し、鉱山への道が開けた。" },
    { bossName: "魔王", text: "魔王を倒し、世界に平和が訪れた。あなたは真の勇者！" }
  ],
  enemies: [
    { name: "森の狼", hp: 30, maxHp: 30, speed: 7, atk: 8, exp: 15, gold: 5, dropMat: { wood: 1 } },
    { name: "洞窟コウモリ", hp: 35, maxHp: 35, speed: 9, atk: 10, exp: 20, gold: 8, dropMat: { ore: 1 } },
    { name: "ゴブリン", hp: 40, maxHp: 40, speed: 5, atk: 12, exp: 25, gold: 10, dropMat: { wood: 1, ore: 1 } }
  ],
  lastDailyReset: null,
  lastWeeklyReset: null
};

function loadData() {
  const saved = localStorage.getItem(STORAGE_KEY);
  if (saved) {
    gameData = JSON.parse(saved);
  }
}
function saveData() {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(gameData));
}

/* =========================================
   2) 初期化処理
========================================= */
window.addEventListener("load", () => {
  loadData();
  dailyQuestResetCheck();
  weeklyQuestResetCheck();
  applySkillPassive();
  updateAllUI();
});

/* =========================================
   3) ユーティリティ & ステータス系
========================================= */
function xpNeededForLevel(level) {
  return level * 100;
}
function checkLevelUp() {
  while (gameData.hero.xp >= xpNeededForLevel(gameData.hero.level)) {
    gameData.hero.xp -= xpNeededForLevel(gameData.hero.level);
    gameData.hero.level++;
    gameData.hero.skillPts++;
    applySkillPassive();
    alert(`レベルアップ！Lv.${gameData.hero.level} になった。スキルポイント+1`);
  }
}
function gainExp(amount) {
  gameData.hero.xp += amount;
  checkLevelUp();
  saveData();
  updateHeroUI();
  checkAchievements();
}
function gainGold(amount) {
  gameData.hero.gold += amount;
  saveData();
  updateHeroUI();
  checkAchievements();
}
function updateHeroUI() {
  const h = gameData.hero;
  document.getElementById("heroNameDisplay").textContent = h.name;
  document.getElementById("heroJobDisplay").textContent = h.job;
  document.getElementById("heroLevel").textContent = h.level;
  document.getElementById("heroHp").textContent = h.hp;
  document.getElementById("heroMaxHp").textContent = h.maxHp;
  document.getElementById("heroXp").textContent = h.xp;
  document.getElementById("xpToNextLevel").textContent = xpNeededForLevel(h.level);
  document.getElementById("heroGold").textContent = h.gold;
  document.getElementById("heroSkillPts").textContent = h.skillPts;

  const ratio = (h.xp / xpNeededForLevel(h.level)) * 100;
  document.getElementById("xpFill").style.width = ratio + "%";

  updateHeroEquipmentUI();
}
function changeHeroName() {
  const input = document.getElementById("heroNameInput");
  const newName = input.value.trim();
  if (!newName) return;
  gameData.hero.name = newName;
  input.value = "";
  saveData();
  updateHeroUI();
}
function applySkillPassive() {
  const hero = gameData.hero;
  hero.maxHp = 50 + (hero.level - 1) * 5;
  let skillList = [];
  if (hero.job === "戦士") skillList = gameData.skills.warrior;
  if (hero.job === "魔法使い") skillList = gameData.skills.mage;
  if (hero.job === "盗賊") skillList = gameData.skills.thief;
  skillList.forEach(s => {
    if (s.name === "体力増強") {
      hero.maxHp += (s.level * 10);
    }
  });
  if (hero.hp > hero.maxHp) hero.hp = hero.maxHp;
}

/* =========================================
   4) パーティ管理
========================================= */
function addPartyMember() {
  if (gameData.party.length >= 2) {
    alert("仲間は最大2人までです。");
    return;
  }
  const newMem = {
    id: Date.now(),
    name: `仲間${gameData.party.length + 1}`,
    level: 1,
    xp: 0,
    hp: 40,
    maxHp: 40,
    speed: 5,
    attack: 5,
    equipment: { weapon: null, armor: null, accessory: null },
    activeSkills: [
      // 例: 仲間専用スキルを入れたければここに
    ]
  };
  gameData.party.push(newMem);
  alert(`${newMem.name} を雇いました！`);
  saveData();
  updateAllUI();
}

function updatePartyUI() {
  const container = document.getElementById("partyList");
  container.innerHTML = "";
  if (gameData.party.length === 0) {
    container.innerHTML = "<p>仲間はいません</p>";
    return;
  }
  gameData.party.forEach(m => {
    const div = document.createElement("div");
    div.className = "party-member";
    div.innerHTML = `<p>${m.name} (Lv.${m.level}) HP:${m.hp}/${m.maxHp} 攻:${m.attack}</p>`;
    const leaveBtn = document.createElement("button");
    leaveBtn.className = "btn-delete";
    leaveBtn.textContent = "離脱";
    leaveBtn.onclick = () => {
      if (confirm(`${m.name}を外しますか？`)) {
        gameData.party = gameData.party.filter(x => x.id !== m.id);
        saveData();
        updateAllUI();
      }
    };
    div.appendChild(leaveBtn);
    container.appendChild(div);
  });
}

function distributePartyExp(amount) {
  gameData.party.forEach(m => {
    m.xp += amount;
    while (m.xp >= m.level * 50) {
      m.xp -= m.level * 50;
      m.level++;
      m.attack += 2;
      m.maxHp += 5;
      m.hp += 5;
    }
  });
}

/* =========================================
   5) 職業 & スキルツリー
========================================= */
function setJob(job) {
  gameData.hero.job = job;
  alert(`職業を「${job}」に変更しました。`);
  saveData();
  applySkillPassive();
  updateAllUI();
}
function updateSkillTreeUI() {
  const container = document.getElementById("skillTree");
  container.innerHTML = "";
  const job = gameData.hero.job;
  if (job === "未設定") {
    container.innerHTML = "<p>職業を選択してください</p>";
    return;
  }
  let skillList = [];
  if (job === "戦士") skillList = gameData.skills.warrior;
  if (job === "魔法使い") skillList = gameData.skills.mage;
  if (job === "盗賊") skillList = gameData.skills.thief;

  skillList.forEach(s => {
    const skillDiv = document.createElement("div");
    skillDiv.className = "skill";
    skillDiv.innerHTML = `
      <h4>${s.name} (Lv.${s.level}/${s.maxLevel})</h4>
      <p>${s.desc}</p>
    `;
    const btn = document.createElement("button");
    btn.className = "btn-primary";
    if (s.level >= s.maxLevel) {
      btn.textContent = "MAX";
      btn.disabled = true;
    } else {
      btn.textContent = "強化";
      btn.onclick = () => {
        if (gameData.hero.skillPts <= 0) {
          alert("スキルポイントが足りません");
          return;
        }
        s.level++;
        gameData.hero.skillPts--;
        saveData();
        applySkillPassive();
        updateAllUI();
      };
    }
    skillDiv.appendChild(btn);
    container.appendChild(skillDiv);
  });
}

/* =========================================
   6) 装備 & クラフト(簡易化)
========================================= */
function updateHeroEquipmentUI() {
  const eqDiv = document.getElementById("heroEquipment");
  const h = gameData.hero;
  eqDiv.innerHTML = `
    <p>武器: ${h.equipment.weapon ? h.equipment.weapon.name : "なし"}</p>
    <p>防具: ${h.equipment.armor ? h.equipment.armor.name : "なし"}</p>
    <p>アクセ: ${h.equipment.accessory ? h.equipment.accessory.name : "なし"}</p>
    <p>素材: 木材(${h.materials.wood}), 鉱石(${h.materials.ore}), 結晶(${h.materials.magicCrystal})</p>
    <p>回復薬: ${h.consumables.potion || 0}個</p>
  `;
}
function updateCraftUI() {
  const cDiv = document.getElementById("craftContainer");
  cDiv.innerHTML = "";
  gameData.craftingRecipes.forEach(r => {
    const div = document.createElement("div");
    div.className = "craft-recipe";
    let matText = Object.keys(r.materialsRequired).map(m => {
      return `${m}:${r.materialsRequired[m]}`;
    }).join(", ");
    div.innerHTML = `
      <strong>${r.result.name}</strong> → 必要素材 ${matText}<br>
      ${r.desc}
    `;
    const btn = document.createElement("button");
    btn.textContent = "クラフト";
    btn.onclick = () => craftItem(r);
    div.appendChild(btn);
    cDiv.appendChild(div);
  });
}
function craftItem(recipe) {
  for (let mat in recipe.materialsRequired) {
    if ((gameData.hero.materials[mat] || 0) < recipe.materialsRequired[mat]) {
      alert("素材が足りません！");
      return;
    }
  }
  for (let mat in recipe.materialsRequired) {
    gameData.hero.materials[mat] -= recipe.materialsRequired[mat];
  }
  if (recipe.result.type === "consumable") {
    const key = recipe.result.itemKey;
    gameData.hero.consumables[key] = (gameData.hero.consumables[key] || 0) + recipe.result.amount;
    alert(`${recipe.result.name} を${recipe.result.amount}個、作成しました！`);
  }
  saveData();
  updateAllUI();
}

/* =========================================
   7) クエスト関連 (デイリー/通常/ウィークリー)
========================================= */
function switchQuestTab(tab) {
  document.getElementById("dailyQuests").style.display = (tab === "daily") ? "" : "none";
  document.getElementById("normalQuests").style.display = (tab === "normal") ? "" : "none";
  document.getElementById("weeklyQuests").style.display = (tab === "weekly") ? "" : "none";
}
function updateQuestsUI() {
  renderQuestList("dailyQuests", gameData.dailyQuests, completeDailyQuest);
  renderQuestList("normalQuests", gameData.normalQuests, completeNormalQuest);
  renderQuestList("weeklyQuests", gameData.weeklyQuests, completeWeeklyQuest);
}
function renderQuestList(containerId, questArr, completeFn) {
  const container = document.getElementById(containerId);
  container.innerHTML = "";
  questArr.forEach(q => {
    const div = document.createElement("div");
    div.className = "quest";
    const h4 = document.createElement("h4");
    h4.textContent = q.completed ? `【達成済】${q.title}` : q.title;
    const p = document.createElement("p");
    p.textContent = `EXP:${q.exp} Gold:${q.gold}`;
    const btn = document.createElement("button");
    btn.className = "btn-primary";
    if (q.completed) {
      btn.textContent = "完了済";
      btn.disabled = true;
    } else {
      btn.textContent = "達成";
      btn.onclick = () => completeFn(q.id);
    }
    div.appendChild(h4);
    div.appendChild(p);
    div.appendChild(btn);
    container.appendChild(div);
  });
}
function completeDailyQuest(id) {
  const q = gameData.dailyQuests.find(x => x.id === id);
  if (!q || q.completed) return;
  q.completed = true;
  alert(`${q.title} を達成！\nEXP+${q.exp}, Gold+${q.gold}`);
  gainExp(q.exp);
  gainGold(q.gold);
  saveData();
  updateAllUI();
}
function completeNormalQuest(id) {
  const q = gameData.normalQuests.find(x => x.id === id);
  if (!q || q.completed) return;
  q.completed = true;
  alert(`${q.title} を達成！\nEXP+${q.exp}, Gold+${q.gold}`);
  gainExp(q.exp);
  gainGold(q.gold);
  saveData();
  updateAllUI();
}
function completeWeeklyQuest(id) {
  const q = gameData.weeklyQuests.find(x => x.id === id);
  if (!q || q.completed) return;
  q.completed = true;
  alert(`${q.title} を達成！\nEXP+${q.exp}, Gold+${q.gold}`);
  gainExp(q.exp);
  gainGold(q.gold);
  saveData();
  updateAllUI();
}
function dailyQuestResetCheck() {
  const now = new Date();
  const todayStr = now.toDateString();
  if (gameData.lastDailyReset !== todayStr) {
    gameData.dailyQuests.forEach(q => q.completed = false);
    gameData.lastDailyReset = todayStr;
    alert("デイリークエストをリセットしました！");
    saveData();
  }
}
function weeklyQuestResetCheck() {
  const now = new Date();
  const year = now.getFullYear();
  const weekNum = Math.floor((now.getDate() - now.getDay() + 10) / 7);
  const currentWeekKey = `${year}-W${weekNum}`;
  if (gameData.lastWeeklyReset !== currentWeekKey) {
    gameData.weeklyQuests.forEach(q => q.completed = false);
    gameData.lastWeeklyReset = currentWeekKey;
    alert("ウィークリークエストをリセットしました！");
    saveData();
  }
}

/* =========================================
   8) ワールドマップ & ボス(複数ターン制)
========================================= */
function updateMapUI() {
  const container = document.getElementById("mapAreaContainer");
  container.innerHTML = "";
  const heroLevel = gameData.hero.level;
  gameData.mapAreas.forEach(area => {
    const areaDiv = document.createElement("div");
    areaDiv.className = "map-area";
    if (heroLevel < area.levelReq) {
      areaDiv.classList.add("locked-area");
    }
    areaDiv.innerHTML = `<h3>${area.name} (Lv.${area.levelReq}～)</h3><p>${area.desc}</p>`;
    if (area.boss && heroLevel >= area.levelReq) {
      const btn = document.createElement("button");
      btn.className = "btn-primary";
      btn.textContent = `${area.boss.name} と戦う`;
      btn.onclick = () => {
        // ボスも enemies配列扱い
        const boss = JSON.parse(JSON.stringify(area.boss));
        startBattle([boss], `ボス戦: ${boss.name}`, true);
      };
      areaDiv.appendChild(btn);
    }
    container.appendChild(areaDiv);
  });
}

/* =========================================
   9) ランダムエンカウント (複数敵対応)
========================================= */
function startRandomEncounter() {
  // ランダムに1～2体の敵を出す
  const n = Math.random() < 0.5 ? 1 : 2;
  let chosenEnemies = [];
  for (let i = 0; i < n; i++) {
    const e = gameData.enemies[Math.floor(Math.random() * gameData.enemies.length)];
    chosenEnemies.push(JSON.parse(JSON.stringify(e)));
  }
  startBattle(chosenEnemies, "ダンジョン潜入 - 複数敵が出現！");
}

/* =========================================
   10) 個別ターン制バトルロジック
========================================= */
let battleState = {
  combatants: [], // 全ユニット(勇者/仲間/敵)
  turnIndex: 0,
  log: [],
  battleOver: false,
  isBossFight: false
};

function startBattle(enemyList, title, isBoss=false) {
  battleState.combatants = [];
  battleState.turnIndex = 0;
  battleState.log = [];
  battleState.battleOver = false;
  battleState.isBossFight = isBoss;

  // 味方(勇者)
  const hero = gameData.hero;
  battleState.combatants.push({
    unitType: "hero",
    name: hero.name,
    hp: hero.hp,
    maxHp: hero.maxHp,
    speed: hero.speed,
    isDown: false,
    ref: hero,
    activeSkills: hero.activeSkills || []
  });
  // 仲間
  gameData.party.forEach(m => {
    battleState.combatants.push({
      unitType: "party",
      name: m.name,
      hp: m.hp,
      maxHp: m.maxHp,
      speed: m.speed || 5,
      isDown: false,
      ref: m,
      activeSkills: m.activeSkills || []
    });
  });
  // 敵
  enemyList.forEach(e => {
    battleState.combatants.push({
      unitType: "enemy",
      name: e.name,
      hp: e.hp,
      maxHp: e.maxHp,
      speed: e.speed || 5,
      atk: e.atk || 5,
      exp: e.exp || 0,
      gold: e.gold || 0,
      dropMat: e.dropMat || null,
      rewardExp: e.rewardExp,
      rewardGold: e.rewardGold,
      isDown: false
    });
  });

  // ソート(速度降順)
  battleState.combatants.sort((a,b) => b.speed - a.speed);

  document.getElementById("battleTitle").textContent = title;
  document.getElementById("battleDesc").textContent = isBoss ? "ボス戦だ！" : "敵が現れた！";
  openBattleModal();
  updateBattleUI();
  battleState.log.push("バトル開始！");
  // 行動者チェック
  checkCurrentTurn();
}

function openBattleModal() {
  document.getElementById("battleModalBg").style.display = "flex";
}
function closeBattleModal() {
  document.getElementById("battleModalBg").style.display = "none";
  updateAllUI();
}
function updateBattleUI() {
  // 敵一覧
  let enemyText = "<h3>敵ユニット</h3>";
  battleState.combatants
    .filter(c => c.unitType === "enemy")
    .forEach(c => {
      if (!c.isDown) {
        enemyText += `<p>${c.name} HP:${c.hp}/${c.maxHp}</p>`;
      } else {
        enemyText += `<p>${c.name} (撃破)</p>`;
      }
    });
  document.getElementById("battleEnemyInfo").innerHTML = enemyText;

  // 味方一覧
  let allyText = "<h3>味方ユニット</h3>";
  battleState.combatants
    .filter(c => c.unitType==="hero" || c.unitType==="party")
    .forEach(c => {
      if (!c.isDown) {
        allyText += `<p>${c.name} HP:${c.hp}/${c.maxHp}</p>`;
      } else {
        allyText += `<p>${c.name} (戦闘不能)</p>`;
      }
    });
  document.getElementById("battleHeroInfo").innerHTML = allyText;

  // ログ
  document.getElementById("battleLog").innerHTML = battleState.log.join("<br>");
}

/* 行動者確認 */
function checkCurrentTurn() {
  if (battleState.battleOver) return;
  if (battleState.turnIndex >= battleState.combatants.length) {
    battleState.turnIndex = 0;
  }
  let currentUnit = battleState.combatants[battleState.turnIndex];
  if (currentUnit.isDown) {
    // 次へ
    battleState.turnIndex++;
    checkBattleEnd();
    checkCurrentTurn();
    return;
  }

  if (currentUnit.unitType === "hero" || currentUnit.unitType === "party") {
    // プレイヤー(味方)行動
    battleState.log.push(`[${currentUnit.name} のターン]`);
    updateBattleUI();
    // ボタン操作で行動を待つ
  } else {
    // 敵行動
    battleState.log.push(`[${currentUnit.name} のターン(敵)]`);
    updateBattleUI();
    setTimeout(() => {
      enemyAction(currentUnit);
    }, 600);
  }
}

/* プレイヤー行動系 */
// 今どのキャラが行動中か
function getCurrentUnit() {
  if (battleState.turnIndex < battleState.combatants.length) {
    return battleState.combatants[battleState.turnIndex];
  }
  return null;
}

// 攻撃
function chooseAttack() {
  const currentUnit = getCurrentUnit();
  if (!currentUnit) return;
  if (currentUnit.unitType==="enemy") return; // 敵は自動行動

  // ターゲット: 生存している敵
  const aliveEnemies = battleState.combatants.filter(c => c.unitType==="enemy" && !c.isDown);
  if (aliveEnemies.length === 0) return; // 敵がいない
  const target = aliveEnemies[0]; // 仮に先頭を攻撃(本当は選択UIを用意してもOK)

  doAttack(currentUnit, target);
}
function doAttack(attacker, defender) {
  battleState.log.push(`${attacker.name}の攻撃！`);
  const dmg = calcDamage(attacker, defender, false);
  defender.hp -= dmg;
  battleState.log.push(`→ ${defender.name} に ${dmg} ダメージ！`);
  if (defender.hp<=0) {
    defender.hp=0;
    defender.isDown=true;
    battleState.log.push(`${defender.name}は倒れた！`);
  }
  endPlayerAction();
}

// スキル
function chooseSkill() {
  const currentUnit = getCurrentUnit();
  if (!currentUnit) return;
  if (currentUnit.activeSkills.length === 0) {
    alert("スキルがありません！");
    return;
  }
  // 例: 1つだけスキルがあるなら即使用 or promptで選択
  const skill = currentUnit.activeSkills[0];
  // ターゲット選択(敵)
  const aliveEnemies = battleState.combatants.filter(c => c.unitType==="enemy" && !c.isDown);
  if (aliveEnemies.length === 0) {
    alert("敵がいません");
    return;
  }
  const target = aliveEnemies[0]; // 簡易: 先頭
  battleState.log.push(`${currentUnit.name}は${skill.name}を発動！`);
  const dmg = skill.baseDamage + Math.floor(Math.random()*3);
  target.hp -= dmg;
  battleState.log.push(`→ ${target.name} に ${dmg} ダメージ！`);
  if (target.hp<=0) {
    target.hp=0;
    target.isDown=true;
    battleState.log.push(`${target.name}は倒れた！`);
  }
  endPlayerAction();
}

// アイテム
function chooseItem() {
  const currentUnit = getCurrentUnit();
  if (!currentUnit) return;
  if (currentUnit.unitType!=="hero") {
    alert("このキャラはアイテムを使えません。");
    return;
  }
  const hero = currentUnit.ref;
  if ((hero.consumables.potion || 0) <1) {
    alert("回復薬がありません。");
    return;
  }
  // 対象を自分に限定(簡易)
  hero.consumables.potion--;
  const heal=30;
  currentUnit.hp += heal;
  if(currentUnit.hp>currentUnit.maxHp) currentUnit.hp=currentUnit.maxHp;
  battleState.log.push(`${currentUnit.name}は回復薬を使用 → HP+${heal}`);
  endPlayerAction();
}

// 防御
function chooseDefend() {
  const currentUnit = getCurrentUnit();
  if (!currentUnit) return;
  currentUnit.isDefending=true; // 被ダメ半減など
  battleState.log.push(`${currentUnit.name}は身を守っている！(被ダメ軽減)`);
  endPlayerAction();
}

// 逃げる
function chooseFlee() {
  battleState.log.push("逃げ出した！");
  endBattle(false);
}

// プレイヤー行動終了
function endPlayerAction() {
  battleState.turnIndex++;
  checkBattleEnd();
  setTimeout(() => {
    checkCurrentTurn();
    updateBattleUI();
  }, 400);
}

// 敵行動
function enemyAction(enemyUnit) {
  // ターゲット: 生存している味方( hero/party )
  const aliveAllies = battleState.combatants.filter(c => (c.unitType==="hero"||c.unitType==="party") && !c.isDown);
  if (aliveAllies.length===0) {
    checkBattleEnd();
    return;
  }
  const target = aliveAllies[Math.floor(Math.random()*aliveAllies.length)];
  battleState.log.push(`${enemyUnit.name}の攻撃 → ${target.name}`);
  const dmg = calcDamage(enemyUnit, target, target.isDefending);
  target.hp -= dmg;
  if (target.isDefending) {
    battleState.log.push("(防御中で被ダメ軽減)");
  }
  battleState.log.push(`→ ${target.name}に${dmg}ダメージ！`);
  target.isDefending=false; // 防御は1ターンのみ

  if (target.hp<=0) {
    target.hp=0;
    target.isDown=true;
    battleState.log.push(`${target.name}は倒れた…`);
  }

  battleState.turnIndex++;
  checkBattleEnd();
  setTimeout(() => {
    checkCurrentTurn();
    updateBattleUI();
  }, 400);
}

/* ダメージ計算 */
function calcDamage(attacker, defender, defenderIsDefending) {
  let baseAtk=0;
  if (attacker.unitType==="hero"||attacker.unitType==="party") {
    // 味方の攻撃力
    // (装備や職業スキルなどは未細分化。下のcalcPlayerTotalAttackを簡易流用でもOK)
    baseAtk=10;
    if(attacker.ref && attacker.ref.job==="戦士") {
      const wSkills=gameData.skills.warrior;
      wSkills.forEach(s => {
        if(s.name==="剣術熟練") baseAtk+=(s.level*2);
      });
    }
    if(attacker.ref && attacker.ref.job==="魔法使い") {
      const mSkills=gameData.skills.mage;
      mSkills.forEach(s => {
        if(s.name==="魔力増強") baseAtk+=(s.level*3);
        if(s.name==="精神集中" && battleState.isBossFight) baseAtk+=(s.level*5);
      });
    }
    if(attacker.ref && attacker.ref.job==="盗賊") {
      const tSkills=gameData.skills.thief;
      tSkills.forEach(s=>{
        if(s.name==="素早さ強化") baseAtk+=(s.level*2);
      });
    }
    // 装備
    if(attacker.ref && attacker.ref.equipment.weapon) {
      baseAtk += (attacker.ref.equipment.weapon.attack||0);
    }
    if(attacker.ref && attacker.ref.equipment.armor) {
      baseAtk += (attacker.ref.equipment.armor.attack||0);
    }
    if(attacker.ref && attacker.ref.equipment.accessory) {
      baseAtk += (attacker.ref.equipment.accessory.attack||0);
    }
    // さらに仲間の場合はattackプロパティ？
    if(attacker.unitType==="party") {
      baseAtk += attacker.ref.attack; // m.attack
    }
  } else {
    // 敵
    baseAtk=attacker.atk||5;
  }
  // 防御中なら半減
  let finalDmg = baseAtk + Math.floor(Math.random()*3);
  if(defenderIsDefending) {
    finalDmg = Math.floor(finalDmg/2);
  }
  return finalDmg;
}

/* 勝利/敗北判定 */
function checkBattleEnd() {
  // 味方生存
  const aliveAllies = battleState.combatants.filter(c => (c.unitType==="hero"||c.unitType==="party") && !c.isDown);
  if(aliveAllies.length===0) {
    // 敗北
    battleState.log.push("味方は全滅した…");
    doLoseBattle();
    return true;
  }
  // 敵生存
  const aliveEnemies= battleState.combatants.filter(c => c.unitType==="enemy" && !c.isDown);
  if(aliveEnemies.length===0) {
    // 勝利
    battleState.log.push("敵を全て倒した！ 勝利！");
    doWinBattle();
    return true;
  }
  return false;
}

function doWinBattle() {
  battleState.battleOver=true;
  // ボス or 雑魚敵全体のEXP/Gold
  let totalExp=0, totalGold=0;
  battleState.combatants.forEach(c=>{
    if(c.unitType==="enemy") {
      if(c.rewardExp) totalExp += c.rewardExp; else totalExp += (c.exp||0);
      if(c.rewardGold) totalGold += c.rewardGold; else totalGold += (c.gold||0);
    }
  });
  // 盗賊スキルでGoldボーナス
  if(gameData.hero.job==="盗賊"){
    const tSkills=gameData.skills.thief;
    tSkills.forEach(s=>{
      if(s.name==="ゴールド盗み") {
        totalGold+=(s.level*5);
      }
    });
  }
  gainExp(totalExp);
  gainGold(totalGold);
  battleState.log.push(`報酬 → EXP:${totalExp}, Gold:${totalGold}`);

  // 倒れた味方をHP1で復帰
  battleState.combatants.forEach(c=>{
    if((c.unitType==="hero"||c.unitType==="party") && c.isDown){
      c.isDown=false; c.hp=1;
      if(c.ref) c.ref.hp=1;
    } else {
      if(c.ref) c.ref.hp=c.hp; // HPを反映
    }
  });
  setTimeout(()=>{
    endBattle(true);
  },800);
}

function doLoseBattle() {
  battleState.battleOver=true;
  // ゴールド半減
  gameData.hero.gold = Math.floor(gameData.hero.gold/2);
  battleState.log.push("所持Goldが半分になった…");
  // 全員HP1で復帰
  battleState.combatants.forEach(c=>{
    if(c.unitType==="hero"||c.unitType==="party"){
      c.isDown=false;
      c.hp=1;
      if(c.ref) c.ref.hp=1;
    }
  });
  setTimeout(()=>{
    endBattle(false);
  },800);
}

function endBattle(win) {
  battleState.log.push(win ? "(勝利) バトル終了" : "(終了) バトル終了");
  updateBattleUI();
  setTimeout(()=>{
    closeBattleModal();
  },1000);
}

function calcPlayerTotalAttack(){
  // ※ 旧の一斉攻撃計算用は使わなくなったが、参考に残しておく
  return 10;
}

/* ボス撃破時の実績 & ストーリー */
function onBossDefeated(bossName) {
  gameData.achievements.forEach(a => {
    if(a.type==="bossKill" && a.bossName===bossName && !a.unlocked){
      unlockAchievement(a);
    }
  });
  const st= gameData.story.find(x=>x.bossName===bossName);
  if(st){
    battleState.log.push(st.text);
  }
  saveData();
}

/* =========================================
   11) 実績 & ストーリー
========================================= */
function updateAchievementsUI() {
  const listEl = document.getElementById("achievementList");
  listEl.innerHTML = "";
  gameData.achievements.forEach(a => {
    const div = document.createElement("div");
    div.className = "achievement";
    if(!a.unlocked) div.classList.add("locked");
    const h4 = document.createElement("h4");
    h4.textContent = a.title;
    const p = document.createElement("p");
    p.textContent = a.desc;
    if(!a.unlocked){
      const lockedLabel=document.createElement("div");
      lockedLabel.className="locked-label";
      lockedLabel.textContent="Locked";
      div.appendChild(lockedLabel);
    }
    div.appendChild(h4);
    div.appendChild(p);
    listEl.appendChild(div);
  });
}
function checkAchievements() {
  const hero=gameData.hero;
  const totalQuestCompleted= gameData.dailyQuests.filter(q=>q.completed).length
    + gameData.normalQuests.filter(q=>q.completed).length
    + gameData.weeklyQuests.filter(q=>q.completed).length;
  gameData.achievements.forEach(a=>{
    if(a.unlocked) return;
    switch(a.type){
      case "questCount":
        if(totalQuestCompleted>=a.target){
          unlockAchievement(a);
        }
        break;
      case "level":
        if(hero.level>=a.target){
          unlockAchievement(a);
        }
        break;
      case "bossKill":
        // boss討伐時に individually check
        break;
      case "gold":
        if(hero.gold>=a.target){
          unlockAchievement(a);
        }
        break;
    }
  });
}
function unlockAchievement(a) {
  a.unlocked=true;
  alert(`実績解除！「${a.title}」`);
  saveData();
  updateAchievementsUI();
}
function updateStoryProgress(){
  let text="";
  const bossKills= gameData.achievements.filter(a=>a.type==="bossKill"&&a.unlocked).map(a=>a.bossName);
  bossKills.forEach(bn=>{
    const st=gameData.story.find(x=>x.bossName===bn);
    if(st){
      text+=`<p>【${bn}】<br>${st.text}</p>`;
    }
  });
  if(!text) text="<p>まだ大きなストーリーは進んでいません。</p>";
  document.getElementById("storyProgress").innerHTML=text;
}

/* =========================================
   12) UIの一括更新
========================================= */
function updateAllUI(){
  updateHeroUI();
  updatePartyUI();
  updateSkillTreeUI();
  updateCraftUI();
  updateQuestsUI();
  updateMapUI();
  updateAchievementsUI();
  updateStoryProgress();
}
</script>
</body>
</html>

サブスク自動整理・管理サービス

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>SUBS Management - サブスク自動整理・管理サービス</title>
  <meta name="description" content="複数の定額サービスを一括管理・整理し、解約し忘れを防止して家計を賢くするプラットフォーム">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ==========================
       外部ライブラリ (CDN)
  ========================== -->
  <!-- GSAP + ScrollTrigger -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"
    integrity="sha512-xxxx" 
    crossorigin="anonymous" 
    referrerpolicy="no-referrer">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"
    integrity="sha512-xxxx" 
    crossorigin="anonymous" 
    referrerpolicy="no-referrer">
  </script>
  <!-- Three.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r152/three.min.js"
    integrity="sha512-xxxx" 
    crossorigin="anonymous" 
    referrerpolicy="no-referrer">
  </script>

  <style>
    /* ==========================
       ベーススタイル
    ========================== */
    * {
      box-sizing: border-box;
    }
    html, body {
      margin: 0; 
      padding: 0;
      font-family: sans-serif;
      color: #333;
      background-color: #f9f9f9;
      line-height: 1.6;
      scroll-behavior: smooth; /* スムーズスクロール */
    }
    a {
      text-decoration: none;
      color: #0078d7;
      transition: color 0.2s ease;
    }
    a:hover {
      color: #005bb5;
    }
    h1, h2, h3, h4 {
      margin: 0;
      font-weight: normal;
    }
    p {
      margin: 0 0 1em;
    }
    ul {
      margin: 0; 
      padding: 0; 
      list-style: none;
    }
    img {
      max-width: 100%;
      display: block;
    }

    /* ==========================
       カラー変数
    ========================== */
    :root {
      --color-primary: #0078d7;
      --color-accent: #ffcc00;
      --color-bg: #f9f9f9;
      --color-white: #ffffff;
      --color-border: #eee;
      --color-text: #333;
    }

    /* ==========================
       全体のレイアウト用コンテナ
    ========================== */
    .container {
      width: 90%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 60px 0;
    }

    /* ==========================
       ヘッダー
    ========================== */
    header {
      position: sticky;
      top: 0;
      z-index: 998;
      background: var(--color-white);
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 60px;
      width: 90%;
      max-width: 1200px;
      margin: 0 auto;
    }
    .header-logo {
      font-size: 1.5rem;
      color: var(--color-primary);
      font-weight: bold;
    }
    nav ul {
      display: flex;
      gap: 30px;
    }
    nav a {
      color: var(--color-text);
      font-size: 0.95rem;
      font-weight: bold;
    }
    nav a:hover {
      color: var(--color-primary);
    }
    .hamburger {
      display: none;
      font-size: 1.5rem;
      cursor: pointer;
    }
    .mobile-nav {
      display: none;
      position: absolute;
      top: 60px; right: 0;
      width: 100%;
      max-width: 300px;
      background: var(--color-white);
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
      z-index: 999;
    }
    .mobile-nav ul {
      display: flex; 
      flex-direction: column;
      gap: 20px; 
      padding: 20px;
    }
    .mobile-nav a {
      font-size: 1rem; 
      color: var(--color-text);
    }

    /* ==========================
       Three.js 背景キャンバス
    ========================== */
    #three-bg {
      position: fixed;
      top: 0; left: 0;
      width: 100vw; height: 100vh;
      z-index: -1;
      background: #000; /* 読み込み時の仮色 */
    }

    /* ==========================
       ヒーローセクション
    ========================== */
    .hero {
      position: relative;
      min-height: 80vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #fff;
      padding: 100px 20px;
      overflow: hidden;
    }
    .hero h1 {
      font-size: 2.5rem;
      margin-bottom: 20px;
      line-height: 1.2;
      transform: translateY(50px);
      opacity: 0;
    }
    .hero p {
      font-size: 1.1rem;
      margin-bottom: 30px;
      transform: translateY(50px);
      opacity: 0;
    }
    .hero .cta-btn {
      background: var(--color-accent);
      color: #333;
      padding: 15px 30px;
      border-radius: 6px;
      font-size: 1rem;
      font-weight: bold;
      transition: background-color 0.2s ease;
      transform: translateY(50px);
      opacity: 0;
    }
    .hero .cta-btn:hover {
      background: #e6b800;
    }

    /* ==========================
       Statsセクション (数値カウンター)
    ========================== */
    .stats-section {
      background: var(--color-bg);
      text-align: center;
      padding: 60px 20px;
    }
    .stats-section h2 {
      color: var(--color-primary);
      margin-bottom: 40px;
    }
    .stats-grid {
      display: flex; 
      flex-wrap: wrap; 
      gap: 40px; 
      justify-content: center;
    }
    .stat-item {
      flex: 1 1 200px;
      max-width: 250px;
      background: var(--color-white);
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      padding: 20px;
      transition: transform 0.3s ease;
    }
    .stat-item:hover { transform: translateY(-5px); }
    .stat-number {
      font-size: 2rem;
      color: var(--color-primary);
      font-weight: bold;
      margin-bottom: 10px;
    }
    .stat-label {
      font-size: 0.95rem;
      color: #666;
    }

    /* ==========================
       Testimonials (カルーセル)
    ========================== */
    .testimonials-section {
      background: var(--color-white);
      padding: 60px 20px;
    }
    .testimonials-section h2 {
      text-align: center;
      color: var(--color-primary);
      margin-bottom: 40px;
    }
    .carousel-container {
      max-width: 800px; 
      margin: 0 auto; 
      position: relative;
      overflow: hidden;
    }
    .carousel-track {
      display: flex; 
      transition: transform 0.5s ease;
    }
    .carousel-slide {
      min-width: 100%;
      background: var(--color-bg);
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      margin: 0 10px;
      padding: 30px;
      text-align: center;
    }
    .carousel-text {
      font-size: 1rem;
      font-style: italic;
      color: #555;
      margin-bottom: 10px;
    }
    .carousel-author {
      font-weight: bold;
      color: #333;
      font-size: 0.9rem;
    }
    .carousel-buttons {
      text-align: center;
      margin-top: 20px;
    }
    .carousel-btn {
      background: var(--color-primary);
      color: #fff;
      border: none;
      padding: 8px 12px;
      border-radius: 4px;
      margin: 0 5px;
      cursor: pointer;
      font-size: 1rem;
    }
    .carousel-btn:hover {
      background: #005bb5;
    }

    /* ==========================
       フォームセクション (リアルタイムバリデーション)
    ========================== */
    .form-section {
      background: var(--color-accent);
      padding: 60px 20px;
    }
    .form-section h2 {
      text-align: center;
      color: var(--color-primary);
      margin-bottom: 40px;
    }
    .signup-form {
      max-width: 600px;
      margin: 0 auto;
      background: var(--color-white);
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      padding: 30px;
    }
    .form-group {
      margin-bottom: 20px;
    }
    .form-group label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
    }
    .form-group input {
      width: 100%;
      padding: 10px;
      border-radius: 4px;
      border: 1px solid #ccc;
      font-size: 1rem;
    }
    .error-message {
      font-size: 0.85rem;
      color: red;
      display: none;
    }
    .signup-submit {
      background: var(--color-primary);
      color: #fff;
      border: none;
      padding: 12px 24px;
      border-radius: 4px;
      font-size: 1rem;
      cursor: pointer;
      transition: background 0.2s ease;
    }
    .signup-submit:hover {
      background: #005bb5;
    }

    /* ==========================
       フッター
    ========================== */
    footer {
      background: #f0f0f0; 
      padding: 20px; 
      text-align: center;
      margin-top: 60px;
    }
    footer .footer-note {
      font-size: 0.9rem;
      color: #666;
      margin-top: 10px;
    }

    /* ==========================
       レスポンシブ
    ========================== */
    @media (max-width: 768px) {
      .header-inner {
        justify-content: space-between;
      }
      nav ul { display: none; }
      .hamburger { display: block; }

      .stats-grid { display: block; }
      .stat-item { margin: 0 auto 20px; }

      .carousel-slide { margin: 0 5px; }
    }
  </style>
</head>
<body>

  <!-- Three.js 背景キャンバス -->
  <canvas id="three-bg" aria-hidden="true"></canvas>

  <!-- ヘッダー -->
  <header>
    <div class="header-inner">
      <div class="header-logo">SUBS Management</div>
      <nav>
        <ul id="navLinks">
          <li><a href="#hero">Home</a></li>
          <li><a href="#stats">Stats</a></li>
          <li><a href="#testimonials">Reviews</a></li>
          <li><a href="#signup">SignUp</a></li>
        </ul>
      </nav>
      <!-- ハンバーガーメニュー -->
      <div class="hamburger" id="hamburger">&#9776;</div>
    </div>
    <!-- モバイル用ナビ -->
    <div class="mobile-nav" id="mobileNav">
      <ul>
        <li><a href="#hero">Home</a></li>
        <li><a href="#stats">Stats</a></li>
        <li><a href="#testimonials">Reviews</a></li>
        <li><a href="#signup">SignUp</a></li>
      </ul>
    </div>
  </header>

  <!-- ヒーローセクション -->
  <section class="hero" id="hero">
    <h1>サブスクを一括管理して、賢く節約</h1>
    <p>
      使っていないサブスクを一元化・解約サポート。<br>
      無駄な出費を削減し、あなたの家計をスリムにしませんか？
    </p>
    <a href="#signup" class="cta-btn">今すぐ始める</a>
  </section>

  <!-- Statsセクション (数値カウンター) -->
  <section class="stats-section" id="stats">
    <div class="container">
      <h2>導入実績・成果</h2>
      <div class="stats-grid">
        <div class="stat-item">
          <div class="stat-number" data-target="12000">0</div>
          <div class="stat-label">累計ユーザー</div>
        </div>
        <div class="stat-item">
          <div class="stat-number" data-target="9800">0</div>
          <div class="stat-label">解約サポート実行</div>
        </div>
        <div class="stat-item">
          <div class="stat-number" data-target="95">0</div>
          <div class="stat-label">満足度(%)</div>
        </div>
        <div class="stat-item">
          <div class="stat-number" data-target="1500000">0</div>
          <div class="stat-label">総節約額(円)</div>
        </div>
      </div>
    </div>
  </section>

  <!-- Testimonials (カルーセル) -->
  <section class="testimonials-section" id="testimonials">
    <h2>利用者の声</h2>
    <div class="carousel-container">
      <div class="carousel-track" id="carouselTrack">
        <!-- Slide1 -->
        <div class="carousel-slide">
          <p class="carousel-text">
            「いくつもの動画配信サービスを契約していたのですが、まとめて管理できるから凄く楽になりました！」
          </p>
          <p class="carousel-author">- 田中さん (30代 / 会社員)</p>
        </div>
        <!-- Slide2 -->
        <div class="carousel-slide">
          <p class="carousel-text">
            「解約リマインドが来るので本当に助かります。<br>
             先月だけで2,000円以上も節約できました！」
          </p>
          <p class="carousel-author">- 佐藤さん (40代 / 主婦)</p>
        </div>
        <!-- Slide3 -->
        <div class="carousel-slide">
          <p class="carousel-text">
            「支払い情報が一元化されるのは最高。<br>
             何よりUIがシンプルで使いやすいです！」
          </p>
          <p class="carousel-author">- 鈴木さん (20代 / フリーランス)</p>
        </div>
      </div>
      <div class="carousel-buttons">
        <button class="carousel-btn" id="prevSlide">＜</button>
        <button class="carousel-btn" id="nextSlide">＞</button>
      </div>
    </div>
  </section>

  <!-- フォームセクション (リアルタイムバリデーション) -->
  <section class="form-section" id="signup">
    <div class="container">
      <h2>新規登録 (無料)</h2>
      <div class="signup-form" id="signupForm">
        <div class="form-group">
          <label for="signupEmail">メールアドレス</label>
          <input type="email" id="signupEmail" aria-required="true" placeholder="example@example.com">
          <p class="error-message" id="emailError">正しいメールアドレスを入力してください</p>
        </div>
        <div class="form-group">
          <label for="signupPassword">パスワード (8文字以上)</label>
          <input type="password" id="signupPassword" aria-required="true" placeholder="8文字以上で入力">
          <p class="error-message" id="passwordError">パスワードは8文字以上で入力してください</p>
        </div>
        <button class="signup-submit" id="signupSubmitBtn">登録</button>
      </div>
    </div>
  </section>

  <!-- フッター -->
  <footer>
    <p class="footer-note">
      &copy; 2025 SUBS Management. All rights reserved.
    </p>
  </footer>

  <script>
    /*************************************************************
     * 1. Three.js 背景 
     *************************************************************/
    let scene, camera, renderer;
    const canvas = document.getElementById('three-bg');
    let objects = [];

    function initThreeBG() {
      scene = new THREE.Scene();
      camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );
      camera.position.z = 250;

      renderer = new THREE.WebGLRenderer({ canvas: canvas, alpha: true });
      renderer.setSize(window.innerWidth, window.innerHeight);

      // ライト
      const ambient = new THREE.AmbientLight(0xffffff, 0.7);
      scene.add(ambient);
      const pointLight = new THREE.PointLight(0xffffff, 0.8);
      pointLight.position.set(50, 50, 50);
      scene.add(pointLight);

      // いくつかのオブジェクトをランダム配置
      const geometryTypes = [
        new THREE.TorusGeometry(10, 3, 16, 100),
        new THREE.SphereGeometry(8, 32, 32),
        new THREE.BoxGeometry(12, 12, 12)
      ];

      for(let i=0; i<30; i++){
        const geo = geometryTypes[Math.floor(Math.random() * geometryTypes.length)];
        const material = new THREE.MeshStandardMaterial({
          color: 0xffffff
        });
        // 色相をランダム化
        material.color.setHSL(Math.random(), 0.5, 0.5);

        const mesh = new THREE.Mesh(geo, material);
        mesh.position.x = (Math.random() - 0.5) * 400;
        mesh.position.y = (Math.random() - 0.5) * 400;
        mesh.position.z = (Math.random() - 0.5) * 400;
        mesh.rotation.x = Math.random() * Math.PI;
        mesh.rotation.y = Math.random() * Math.PI;
        scene.add(mesh);
        objects.push(mesh);
      }
    }

    function animateThreeBG() {
      requestAnimationFrame(animateThreeBG);
      objects.forEach(obj => {
        obj.rotation.x += 0.001;
        obj.rotation.y += 0.001;
      });
      camera.position.z += Math.sin(Date.now() * 0.0005) * 0.05; // カメラ揺らし
      renderer.render(scene, camera);
    }

    /*************************************************************
     * 2. ハンバーガーメニュー
     *************************************************************/
    const hamburger = document.getElementById('hamburger');
    const mobileNav = document.getElementById('mobileNav');
    let navOpen = false;
    hamburger.addEventListener('click', () => {
      navOpen = !navOpen;
      mobileNav.style.display = navOpen ? 'block' : 'none';
    });

    /*************************************************************
     * 3. GSAP + ScrollTrigger
     *    - Heroセクションのタイトルやボタンをアニメ
     *    - 他のセクションもスクロールでフェードイン
     *************************************************************/
    window.addEventListener('DOMContentLoaded', () => {
      gsap.registerPlugin(ScrollTrigger);

      // Heroアニメ
      gsap.to('.hero h1', {
        duration: 1, y: 0, opacity: 1, ease: 'power2.out'
      });
      gsap.to('.hero p', {
        duration: 1, y: 0, opacity: 1, delay: 0.2, ease: 'power2.out'
      });
      gsap.to('.hero .cta-btn', {
        duration: 1, y: 0, opacity: 1, delay: 0.4, ease: 'power2.out'
      });

      // Statsセクション
      gsap.from('#stats .stats-grid', {
        scrollTrigger: {
          trigger: '#stats',
          start: 'top 80%',
        },
        y: 50, opacity: 0, duration: 1, ease: 'power2.out'
      });

      // Testimonials
      gsap.from('#testimonials .carousel-container', {
        scrollTrigger: {
          trigger: '#testimonials',
          start: 'top 80%',
        },
        y: 50, opacity: 0, duration: 1, ease: 'power2.out'
      });

      // SignUpフォーム
      gsap.from('#signupForm', {
        scrollTrigger: {
          trigger: '#signupForm',
          start: 'top 80%',
        },
        y: 50, opacity: 0, duration: 1, ease: 'power2.out'
      });
    });

    /*************************************************************
     * 4. Stats カウンター (Intersection Observer)
     *************************************************************/
    const statNumbers = document.querySelectorAll('.stat-number');
    const statsObserver = new IntersectionObserver((entries, obs) => {
      entries.forEach(entry => {
        if(entry.isIntersecting) {
          const el = entry.target;
          const targetVal = parseInt(el.getAttribute('data-target'), 10);
          let currentVal = 0;
          const increment = Math.ceil(targetVal / 100);

          const timer = setInterval(() => {
            currentVal += increment;
            if(currentVal >= targetVal) {
              currentVal = targetVal;
              clearInterval(timer);
            }
            el.textContent = currentVal.toLocaleString();
          }, 20);

          obs.unobserve(el);
        }
      });
    }, { threshold: 0.5 });

    statNumbers.forEach(num => statsObserver.observe(num));

    /*************************************************************
     * 5. Testimonials カルーセル
     *************************************************************/
    const carouselTrack = document.getElementById('carouselTrack');
    const prevSlideBtn = document.getElementById('prevSlide');
    const nextSlideBtn = document.getElementById('nextSlide');
    let currentSlideIndex = 0;
    const slides = Array.from(document.querySelectorAll('.carousel-slide'));

    function updateCarousel() {
      carouselTrack.style.transform = `translateX(${-100 * currentSlideIndex}%)`;
    }

    prevSlideBtn.addEventListener('click', () => {
      currentSlideIndex = (currentSlideIndex === 0) ? slides.length - 1 : currentSlideIndex - 1;
      updateCarousel();
    });
    nextSlideBtn.addEventListener('click', () => {
      currentSlideIndex = (currentSlideIndex === slides.length - 1) ? 0 : currentSlideIndex + 1;
      updateCarousel();
    });

    /*************************************************************
     * 6. リアルタイム・フォームバリデーション
     *************************************************************/
    const signupEmail = document.getElementById('signupEmail');
    const signupPassword = document.getElementById('signupPassword');
    const emailError = document.getElementById('emailError');
    const passwordError = document.getElementById('passwordError');
    const signupSubmitBtn = document.getElementById('signupSubmitBtn');

    function validateEmail(email) {
      return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
    }
    function validatePassword(pass) {
      return pass.length >= 8;
    }

    signupEmail.addEventListener('input', () => {
      if(!validateEmail(signupEmail.value.trim())) {
        emailError.style.display = 'block';
      } else {
        emailError.style.display = 'none';
      }
    });
    signupPassword.addEventListener('input', () => {
      if(!validatePassword(signupPassword.value.trim())) {
        passwordError.style.display = 'block';
      } else {
        passwordError.style.display = 'none';
      }
    });

    signupSubmitBtn.addEventListener('click', () => {
      const emailVal = signupEmail.value.trim();
      const passVal = signupPassword.value.trim();

      let hasError = false;
      if(!validateEmail(emailVal)) {
        emailError.style.display = 'block';
        hasError = true;
      }
      if(!validatePassword(passVal)) {
        passwordError.style.display = 'block';
        hasError = true;
      }
      if(hasError) return;

      alert('登録ありがとうございました！');
      // フォームリセット例
      signupEmail.value = '';
      signupPassword.value = '';
      emailError.style.display = 'none';
      passwordError.style.display = 'none';
    });

    /*************************************************************
     * 7. 画面リサイズ時のThree.js再設定
     *************************************************************/
    window.addEventListener('resize', () => {
      renderer.setSize(window.innerWidth, window.innerHeight);
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
    });

    /*************************************************************
     * 8. ページ読み込み完了時に Three.js 初期化 & アニメ開始
     *************************************************************/
    window.addEventListener('load', () => {
      initThreeBG();
      animateThreeBG();
    });
  </script>
</body>
</html>

Voogle.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Voogle</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
  <style>
    /* 全体の基本設定 */
    body {
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      margin: 0;
      padding: 0;
      background: #f7f7f7;
      color: #333;
      line-height: 1.6;
    }
    header {
      background: #003d66;
      color: #fff;
      padding: 20px;
      text-align: center;
    }
    header h1 {
      margin: 0;
      font-size: 2.5em;
    }
    nav {
      margin-top: 10px;
    }
    nav a {
      color: #fff;
      margin: 0 15px;
      text-decoration: none;
      font-size: 1em;
    }
    /* レイアウトコンテナ */
    .container {
      display: flex;
      max-width: 1200px;
      margin: 20px auto;
      padding: 0 20px;
    }
    /* サイドバー */
    .sidebar {
      flex: 0 0 250px;
      background: #fff;
      padding: 20px;
      margin-right: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      height: fit-content;
    }
    .sidebar h2 {
      font-size: 1.3em;
      margin-top: 0;
      border-bottom: 1px solid #eee;
      padding-bottom: 5px;
    }
    .sidebar section {
      margin-bottom: 20px;
    }
    .sidebar label {
      display: block;
      margin-bottom: 5px;
    }
    .sidebar input[type="date"],
    .sidebar select {
      width: 100%;
      padding: 8px;
      margin-bottom: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    .sidebar .checkbox-group label {
      display: inline-block;
      margin-right: 10px;
      font-size: 0.9em;
    }
    .sidebar ul {
      list-style: none;
      padding-left: 0;
    }
    .sidebar li {
      padding: 5px 0;
      cursor: pointer;
      color: #005fa3;
    }
    .sidebar li:hover {
      text-decoration: underline;
    }
    /* メインコンテンツ */
    .main-content {
      flex: 1;
      background: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    /* 検索フォーム */
    .search-section {
      position: relative;
      margin-bottom: 20px;
    }
    .search-form {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .search-form input[type="text"] {
      flex: 1;
      padding: 12px;
      font-size: 1.1em;
      border: 1px solid #ccc;
      border-radius: 4px;
      outline: none;
    }
    .search-form button {
      padding: 12px 20px;
      font-size: 1.1em;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    #searchButton {
      background: #005fa3;
      color: #fff;
    }
    #searchButton:hover {
      background: #00407a;
    }
    /* オートサジェスト */
    .suggestions {
      list-style: none;
      margin: 0;
      padding: 0;
      position: absolute;
      width: calc(100% - 20px);
      background: #fff;
      border: 1px solid #ccc;
      border-top: none;
      z-index: 10;
      max-height: 200px;
      overflow-y: auto;
    }
    .suggestions li {
      padding: 8px 10px;
      cursor: pointer;
    }
    .suggestions li:hover {
      background: #f0f8ff;
    }
    /* ローディングスピナー */
    .spinner {
      display: none;
      margin: 20px auto;
      width: 50px;
      height: 50px;
      border: 6px solid rgba(0,0,0,0.1);
      border-top-color: #005fa3;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    /* 検索結果カード */
    .results {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 20px;
    }
    .result-item {
      background: #fafafa;
      border: 1px solid #eee;
      padding: 15px;
      border-radius: 8px;
      transition: box-shadow 0.2s;
    }
    .result-item:hover {
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }
    .result-title {
      font-size: 1.2em;
      color: #005fa3;
      margin: 0 0 5px 0;
    }
    .result-title a {
      text-decoration: none;
      color: inherit;
    }
    .result-url {
      font-size: 0.85em;
      color: #888;
      margin-bottom: 8px;
      word-break: break-all;
    }
    .result-snippet {
      font-size: 0.95em;
      margin-bottom: 10px;
    }
    .result-meta {
      font-size: 0.8em;
      color: #666;
    }
    /* ページネーション */
    .pagination {
      text-align: center;
      margin: 30px 0;
    }
    .pagination a {
      margin: 0 5px;
      text-decoration: none;
      color: #005fa3;
      padding: 8px 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
      cursor: pointer;
    }
    .pagination a.active {
      background: #005fa3;
      color: #fff;
      border-color: #005fa3;
    }
    .pagination a:hover {
      background: #f0f8ff;
    }
    /* 「さらに読み込む」ボタン */
    .load-more {
      display: block;
      width: 200px;
      margin: 20px auto;
      padding: 12px;
      text-align: center;
      background: #005fa3;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    .load-more:hover {
      background: #00407a;
    }
    /* フッター */
    footer {
      text-align: center;
      padding: 15px;
      font-size: 0.8em;
      color: #aaa;
      background: #f7f7f7;
      margin-top: 20px;
    }
    /* レスポンシブ対応 */
    @media (max-width: 800px) {
      .container {
        flex-direction: column;
      }
      .sidebar {
        margin-right: 0;
        margin-bottom: 20px;
      }
    }
  </style>
</head>
<body>
  <header>
    <h1>Voogle検索エンジン</h1>
    <nav>
      <a href="#">ホーム</a>
      <a href="#">使い方</a>
      <a href="#">お問い合わせ</a>
    </nav>
  </header>

  <div class="container">
    <!-- サイドバー：フィルター・ソート・検索履歴 -->
    <aside class="sidebar">
      <section>
        <h2>フィルター</h2>
        <form id="filterForm">
          <label for="startDate">開始日:</label>
          <input type="date" id="startDate">
          <label for="endDate">終了日:</label>
          <input type="date" id="endDate">
          <label>コンテンツタイプ:</label>
          <div class="checkbox-group">
            <!-- Wikipedia検索結果用として追加 -->
            <label><input type="checkbox" name="contentType" value="wikipedia" checked> Wikipedia</label>
            <!-- 他の項目は将来的な拡張用 -->
            <label><input type="checkbox" name="contentType" value="news" checked> ニュース</label>
            <label><input type="checkbox" name="contentType" value="blog" checked> ブログ</label>
            <label><input type="checkbox" name="contentType" value="forum" checked> フォーラム</label>
          </div>
          <label for="sortOrder">ソート順:</label>
          <select id="sortOrder">
            <option value="relevance">関連順</option>
            <option value="date">新着順</option>
          </select>
          <button type="submit" style="margin-top:10px; padding:8px 12px; background:#005fa3; color:#fff; border:none; border-radius:4px; cursor:pointer;">適用</button>
        </form>
      </section>
      <section>
        <h2>検索履歴</h2>
        <ul id="searchHistory">
          <!-- 最近の検索キーワードを表示 -->
        </ul>
      </section>
    </aside>

    <!-- メインコンテンツ：検索フォーム＆結果 -->
    <main class="main-content">
      <div class="search-section">
        <form id="searchForm" class="search-form">
          <input type="text" id="searchInput" placeholder="検索キーワードを入力" autocomplete="off">
          <button type="submit" id="searchButton">検索</button>
        </form>
        <!-- オートサジェスト -->
        <ul id="suggestions" class="suggestions"></ul>
      </div>
      <!-- ローディングスピナー -->
      <div id="spinner" class="spinner"></div>
      <!-- 検索結果カード -->
      <div id="results" class="results">
        <!-- 結果はJavaScriptで動的レンダリング -->
      </div>
      <!-- ページネーション -->
      <div id="pagination" class="pagination"></div>
      <!-- Load More ボタン（ページネーションの代替） -->
      <button id="loadMore" class="load-more">さらに読み込む</button>
    </main>
  </div>

  <footer>
    &copy; 2025 Voogle. All rights reserved.
  </footer>

  <script>
    // --- オートサジェスト用のサンプル候補 ---
    const suggestionsData = [
      "JavaScript", "HTML", "CSS", "クローラー", "検索エンジン", "Web開発", "React", "Node.js", "Python", "データスクレイピング"
    ];

    const searchInput = document.getElementById('searchInput');
    const suggestionsList = document.getElementById('suggestions');

    searchInput.addEventListener('input', function() {
      const query = this.value.toLowerCase();
      suggestionsList.innerHTML = '';
      if(query.length === 0) return;
      const filtered = suggestionsData.filter(item => item.toLowerCase().includes(query));
      filtered.forEach(item => {
        const li = document.createElement('li');
        li.textContent = item;
        li.addEventListener('click', () => {
          searchInput.value = item;
          suggestionsList.innerHTML = '';
        });
        suggestionsList.appendChild(li);
      });
    });

    // --- 検索履歴管理 ---
    const searchHistoryEl = document.getElementById('searchHistory');
    function updateSearchHistory(query) {
      let history = JSON.parse(localStorage.getItem('searchHistory')) || [];
      if (!history.includes(query)) {
        history.unshift(query);
        if(history.length > 5) history.pop();
        localStorage.setItem('searchHistory', JSON.stringify(history));
        renderSearchHistory();
      }
    }
    function renderSearchHistory() {
      let history = JSON.parse(localStorage.getItem('searchHistory')) || [];
      searchHistoryEl.innerHTML = '';
      history.forEach(item => {
        const li = document.createElement('li');
        li.textContent = item;
        li.addEventListener('click', () => {
          searchInput.value = item;
          performSearch(item);
        });
        searchHistoryEl.appendChild(li);
      });
    }
    renderSearchHistory();

    // --- Wikipedia検索結果のレンダリング ---
    function renderResults(page, results) {
      const resultsContainer = document.getElementById('results');
      // 結果カードはすべて再レンダリング（Load Moreの場合は追記可能に変更も検討）
      resultsContainer.innerHTML = '';
      const startIndex = (page - 1) * resultsPerPage;
      const endIndex = startIndex + resultsPerPage;
      const pageResults = results.slice(startIndex, endIndex);
      if(pageResults.length === 0) {
        resultsContainer.innerHTML = '<p>該当する検索結果がありません。</p>';
        return;
      }
      pageResults.forEach(result => {
        const div = document.createElement('div');
        div.className = 'result-item';
        div.innerHTML = `
          <h2 class="result-title"><a href="${result.url}" target="_blank">${result.title}</a></h2>
          <div class="result-url">${result.url}</div>
          <p class="result-snippet">${result.snippet}</p>
          <div class="result-meta">投稿日: ${result.date} | タイプ: ${result.contentType}</div>
        `;
        resultsContainer.appendChild(div);
      });
    }

    // --- ページネーションのレンダリング ---
    function renderPagination(page, totalResults) {
      const paginationContainer = document.getElementById('pagination');
      paginationContainer.innerHTML = '';
      const totalPages = Math.ceil(totalResults / resultsPerPage);
      // 前へ
      const prev = document.createElement('a');
      prev.textContent = '«';
      prev.addEventListener('click', () => {
        if(page > 1) {
          currentPage--;
          renderResults(currentPage, filteredResults);
          renderPagination(currentPage, filteredResults.length);
        }
      });
      paginationContainer.appendChild(prev);
      // ページ番号
      for(let i = 1; i <= totalPages; i++) {
        const pageLink = document.createElement('a');
        pageLink.textContent = i;
        if(i === page) pageLink.classList.add('active');
        pageLink.addEventListener('click', () => {
          currentPage = i;
          renderResults(currentPage, filteredResults);
          renderPagination(currentPage, filteredResults.length);
        });
        paginationContainer.appendChild(pageLink);
      }
      // 次へ
      const next = document.createElement('a');
      next.textContent = '»';
      next.addEventListener('click', () => {
        if(page < totalPages) {
          currentPage++;
          renderResults(currentPage, filteredResults);
          renderPagination(currentPage, filteredResults.length);
        }
      });
      paginationContainer.appendChild(next);
    }

    // --- 定数・変数 ---
    let filteredResults = []; // Wikipedia APIから取得した結果を格納
    let currentPage = 1;
    const resultsPerPage = 10;
    const spinner = document.getElementById('spinner');

    // --- Wikipedia APIを利用した検索実行 ---
    const searchForm = document.getElementById('searchForm');
    searchForm.addEventListener('submit', function(e) {
      e.preventDefault();
      const query = searchInput.value.trim();
      performSearch(query);
    });
    function performSearch(query) {
      updateSearchHistory(query);
      spinner.style.display = 'block';
      // Wikipedia APIエンドポイント（origin=* を指定してクロスオリジン対応）
      const url = "https://ja.wikipedia.org/w/api.php?action=query&list=search&format=json&origin=*&srsearch=" + encodeURIComponent(query) + "&srlimit=20";
      fetch(url)
        .then(response => response.json())
        .then(data => {
          spinner.style.display = 'none';
          if (data.query && data.query.search && data.query.search.length > 0) {
            // APIから取得した各項目のtimestampを日付文字列に変換
            filteredResults = data.query.search.map(item => {
              return {
                title: item.title,
                snippet: item.snippet,
                url: "https://ja.wikipedia.org/?curid=" + item.pageid,
                date: new Date(item.timestamp).toISOString().split('T')[0],
                contentType: "wikipedia"
              };
            });
            currentPage = 1;
            renderResults(currentPage, filteredResults);
            renderPagination(currentPage, filteredResults.length);
          } else {
            document.getElementById('results').innerHTML = '<p>該当する検索結果がありません。</p>';
          }
        })
        .catch(error => {
          spinner.style.display = 'none';
          console.error('Error:', error);
          document.getElementById('results').innerHTML = '<p>検索結果の取得に失敗しました。</p>';
        });
    }

    // --- サイドバーのフィルター処理 ---
    const filterForm = document.getElementById('filterForm');
    filterForm.addEventListener('submit', function(e) {
      e.preventDefault();
      applySidebarFilters();
      currentPage = 1;
      renderResults(currentPage, filteredResults);
      renderPagination(currentPage, filteredResults.length);
    });
    function applySidebarFilters() {
      // フィルター設定の取得
      const startDate = document.getElementById('startDate').value;
      const endDate = document.getElementById('endDate').value;
      const sortOrder = document.getElementById('sortOrder').value;
      const checkboxes = document.querySelectorAll('input[name="contentType"]:checked');
      const types = Array.from(checkboxes).map(cb => cb.value);
      // 現在のfilteredResultsに対してさらにフィルタリング
      filteredResults = filteredResults.filter(result => {
        let valid = true;
        if(startDate && result.date < startDate) valid = false;
        if(endDate && result.date > endDate) valid = false;
        if(types.length && !types.includes(result.contentType)) valid = false;
        return valid;
      });
      // ソート処理：日付の降順（新着順）の場合
      if(sortOrder === "date") {
        filteredResults.sort((a,b) => new Date(b.date) - new Date(a.date));
      }
    }

    // --- Load More ボタン ---
    const loadMoreBtn = document.getElementById('loadMore');
    loadMoreBtn.addEventListener('click', () => {
      const totalPages = Math.ceil(filteredResults.length / resultsPerPage);
      if(currentPage < totalPages) {
        currentPage++;
        // 既存の結果に追記する方式
        const resultsContainer = document.getElementById('results');
        const startIndex = (currentPage - 1) * resultsPerPage;
        const endIndex = startIndex + resultsPerPage;
        const pageResults = filteredResults.slice(startIndex, endIndex);
        pageResults.forEach(result => {
          const div = document.createElement('div');
          div.className = 'result-item';
          div.innerHTML = `
            <h2 class="result-title"><a href="${result.url}" target="_blank">${result.title}</a></h2>
            <div class="result-url">${result.url}</div>
            <p class="result-snippet">${result.snippet}</p>
            <div class="result-meta">投稿日: ${result.date} | タイプ: ${result.contentType}</div>
          `;
          resultsContainer.appendChild(div);
        });
        renderPagination(currentPage, filteredResults.length);
      }
    });
  </script>
</body>
</html>