<!--
  このページはNEXUMのホームページとして作成されました。
  現在、以下の問題点が確認されており、早急に修正する必要があります。

  ■ 修正が必要な点：

  1. 検索機能を使用するときにカードの大きさが変わるバグ  
     - ユーザーが検索バーにキーワードを入力した際、一部のカードコンポーネントのサイズが意図せず変わる現象が発生します。  
     - おそらくCSSのflexやgridの設定、あるいは検索結果のフィルタリング時に適用されるスタイルに問題があります。  
     - レイアウトが崩れる原因を特定し、カードの大きさが一定に保たれるように修正する必要があります。

  2. レスポンシブ対応が不完全  
     - スマートフォンやタブレットなどの小さい画面サイズでの表示が崩れる箇所があります。  
     - ヘッダー、カード一覧、フッターなどが適切に縮小・折り返されるよう、メディアクエリやflexbox/gridレイアウトを見直す必要があります。  
     - ブレイクポイントの追加や、モバイルファーストの設計への切り替えも検討してください。

  ※ 上記の修正は、UX向上およびプロダクトの信頼性確保のため、優先的に対応することが望ましいです。
-->

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NEXUM</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      background-color: #f9f9f9;
      color: #333;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      padding-top: 70px; /* ヘッダー分の高さを上部に追加 */
      padding-bottom: 50px; /* フッター分の高さを下部に追加 */
    }

    /* ヘッダーを固定 */
    .header {
      background-color: #20232a;
      color: #fff;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1000; /* ヘッダーを他のコンテンツより前に表示 */
      padding: 10px 0; /* 少しのパディングを追加して見栄えを整える */
    }

    /* ヘッダー内のコンテナのレイアウト */
    .header .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 90%;
      margin: 0 auto;
      padding: 0 10px; /* 左右のパディングを調整 */
    }

    .header-h1 {
      font-size: 48px;
      cursor: pointer;
    }

    .search-box {
      display: flex;
      align-items: center;
      max-width: 500px;
      width: 200%;
      height: 40px;
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 20px;
      padding: 5px 15px;
    }

    .search-box input {
      flex: 1;
      border: none;
      font-size: 14px;
      outline: none;
      padding: 5px;
    }

    .search-box button {
      background: none;
      border: none;
      cursor: pointer;
      font-size: 16px;
      color: #007bff;
    }

    .sort-button {
      background: none;
      border: none;
      cursor: pointer;
      font-size: 16px;
      color: #007bff;
    }

    .create-button {
      background: none;
      cursor: pointer;
      font-size: 16px;
      color: #007bff;
      background-color: #ffffff; /* 薄いグレー背景 */
      border: solid 3px #6091d3; /* 線 */
      border-radius: 10px;
      width: 50%;
    }

    .separator {
      background: none;
      border: none;
      font-size: 16px;
      color: #007bff;
      margin-left: 10px;
      margin-right: 10px;
    }

    /* コンテンツエリア */
    .container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 20px;
      padding: 20px;
      max-width: 75%;
      margin: 20px auto;
    }

    /* メニューエリア */
    .menu { 
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 10%;
      max-width: 75%;
      margin-left: 200px;
      align-items: stretch;
      justify-items: center;
    }

    /* チャットカード */
    .Chat-card {
      display: flex;
      flex-direction: column;
      cursor: pointer;
      transition: transform 0.2s ease;
      border: solid 3px #6091d3; /* 線 */
      border-radius: 10px; /* 角の丸み */
    }

    .Chat-card:hover {
      transform: scale(1.03);
    }

    /* テキストのサムネイル */
    .thumbnail {
      width: 100%;
      height: 150px;
      display: flex;
      justify-content: left;
      font-size: 16px;
      color: #333;
      text-align: left;
      background-color: #f1f1f1; /* 薄いグレー背景 */
      border-radius: 10px;
      padding: 10px;
      line-break: anywhere;
    }

    .Chat-info {
      display: flex;
      margin-top: 10px;
      margin-left: 10px;
      margin-bottom: 10px;
    }

    .Chat-details {
      display: flex;
      flex-direction: column;
    }

    .Chat-title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 5px;
    }

    .Chat-channel,
    .access-date {  /* access-dateにChat-channelと同じスタイルを適用 */
      font-size: 14px;
      color: #606060;
    }

    /* フッターを固定 */
    .footer {
      background-color: #20232a;
      color: #fff;
      padding: 15px;
      text-align: center;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      z-index: 1000; /* フッターを他のコンテンツより前に表示 */
    }

    .footer-menu {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-bottom: 10px;
    }

    .footer-menu a {
      color: #fff;
      text-decoration: none;
      font-size: 14px;
      transition: color 0.3s;
    }

    .footer-menu a:hover {
      color: #007bff;
    }

    .footer-link {
      color: #fff;
      text-decoration: none;
      font-size: 14px;
      transition: color 0.3s;
    }

    .footer-link:hover {
      text-decoration: underline;
      color: #c6e3f4;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <header class="header">
    <div class="container">
      <div class="header-h1" onclick="load_home_page()">NEXUM</div>
      <div class="menu">
        <div class="search-box">
          <input type="text" id="searchInput" placeholder="チャットを検索...">
          <button onclick="searchChats()">検索</button>
          <div class="separator">|</div>
          <button class="sort-button" onclick="toggleSort()">並び替え</button>
        </div>
        <button class="create-button" onclick="load_create_page()">チャットを作成</button>
        <button class="create-button" onclick="load_my_page()">ユーザー</button>
      </div>
    </div>
  </header>

  <div class="container" id="ChatContainer">
    <!-- 動画カードが動的に生成される場所 -->
    <? for (var i = 0; i < title.length; i++) { ?>
      <div class="Chat-card" data-title="<?= title[i] ?>" data-date="<?= access[i] ?>" data-comments="<?= comment[i] ?>" data-final="<?= finalComment[i] ?>" onclick="open_chat(<?= i + 1 ?>)">
        <div class="thumbnail"><?= chat_date[i].length > 100 ? chat_date[i].substring(0, 100) + '...' : chat_date[i] ?></div>

        <div class="Chat-info">
          <div class="Chat-details">
            <div class="Chat-title"><?= title[i].length > 15 ? title[i].substring(0, 15) + '...' : title[i] ?></div>
            <div class="Chat-channel"><?= comment[i] ?> 件のコメント・作成日 <span class="access-date"><?= access[i] ?></span></div>
            <div class="Chat-channel">最終コメント <span class="access-date"><?= finalComment[i] ?></span></div>
          </div>
        </div>
      </div>
    <? } ?>
  </div>

  <footer class="footer">
    <div class="footer-menu">
      <div class="footer-link" onclick="load_explanation_page()">概要</div>
      <div class="footer-link" onclick="load_FAQ_page()">よくある質問</div>
      <div class="footer-link" onclick="load_policy_page()">ポリシー</div>
      <div class="footer-link" onclick="load_statistics_page()">統計情報</div>
      <div class="footer-link" onclick="load_terms_page()">利用規約</div>
      <div class="footer-link" onclick="load_job_page()">求人</div>
    </div>
    <p>&copy; 2025 NEXUM. All rights reserved.</p>
  </footer>

  <script>
    let currentSort = 'date'; // 初期の並び替え基準を「日付」に設定

    window.onload = function() {
      const spacing = '10px';
      const styles = `padding: ${spacing}; background-color: red; color: black; border: 1px solid black; font-size: 20px;`;
      console.log('%cここへコードを挿入、編集すると、ユーザーの情報が盗まれる、またはセッションが乗っ取られるリスクがあります。', styles);
    };

    function formatDate(dateInput) {
      const date = new Date(dateInput);
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      return `${year}/${month}/${day} ${hours}:${minutes}`;
    }

    document.querySelectorAll('.access-date').forEach(function(element) {
      const originalDate = element.innerText;
      const formattedDate = formatDate(originalDate);
      element.innerText = formattedDate;
    });

    function searchChats() {
      const searchQuery = document.getElementById('searchInput').value.toLowerCase();
      const ChatCards = document.querySelectorAll('.Chat-card');

      ChatCards.forEach(card => {
        const title = card.getAttribute('data-title').toLowerCase();
        if (title.includes(searchQuery)) {
          card.style.removeProperty('display'); // ← これでOK（グリッド表示維持）
        } else {
          card.style.display = 'none';
        }
      });
    }

    function toggleSort() {
      if (currentSort === 'date') {
        sortByComments(); // コメント数順で並び替え
        currentSort = 'comments'; // 次回クリックでコメント数順
      } else {
        sortByDate(); // 日付順で並び替え
        currentSort = 'date'; // 次回クリックで日付順
      }
    }

    function sortByComments() {
      const ChatCards = Array.from(document.querySelectorAll('.Chat-card'));
      ChatCards.sort((a, b) => {
        const commentsA = parseInt(a.getAttribute('data-comments'), 10);
        const commentsB = parseInt(b.getAttribute('data-comments'), 10);
        return commentsB - commentsA; // コメント数が多い順に並べ替え
      });

      ChatCards.forEach(card => {
        document.getElementById('ChatContainer').appendChild(card);
      });
    }

    function sortByDate() {
      const ChatCards = Array.from(document.querySelectorAll('.Chat-card'));
      ChatCards.sort((a, b) => {
        const dateA = new Date(a.getAttribute('data-date'));
        const dateB = new Date(b.getAttribute('data-date'));
        return dateB - dateA; // 最新順に並べ替え
      });

      ChatCards.forEach(card => {
        document.getElementById('ChatContainer').appendChild(card);
      });
    }
    
    function open_chat(n) {
      window.top.location.href = '<?= getAppUrl() ?>?page=chat&id=' + encodeURIComponent(n);
    }

    function load_home_page() {
      window.top.location.href = '<?= getAppUrl() ?>?page=home';
    }

    function load_explanation_page() {
      window.top.location.href = '<?= getAppUrl() ?>?page=explanation';
    }

    function load_job_page() {
      window.top.location.href = '<?= getAppUrl() ?>?page=job';
    }

    function load_create_page() {
      window.top.location.href = '<?= getAppUrl() ?>?page=create';
    }

    function load_terms_page() {
      window.top.location.href = '<?= getAppUrl() ?>?page=terms';
    }

    function load_statistics_page() {
      window.top.location.href = '<?= getAppUrl() ?>?page=statistics';
    }

    function load_policy_page() {
      window.top.location.href = '<?= getAppUrl() ?>?page=policy';
    }

    function load_FAQ_page() {
      window.top.location.href = '<?= getAppUrl() ?>?page=faq';
    }

    function load_my_page() {
      window.top.location.href = '<?= getAppUrl() ?>?page=mypage';
    }
  </script>
</body>
</html>