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

    <!-- SEO Meta Tags -->
    <title>
      CLI Tips - Windows Linux Git PowerShell コマンドラインチートシート
    </title>
    <meta
      name="description"
      content="Windows、Linux、Git、PowerShellのコマンドライン操作を効率化するチートシート。リアルタイム検索、詳細説明、ワンクリックコピー機能で開発者の作業を支援します。"
    />
    <meta
      name="keywords"
      content="CLI,コマンドライン,Windows,Linux,Git,PowerShell,チートシート,開発者,ターミナル,コマンド,プログラミング,開発ツール"
    />
    <meta name="author" content="saka" />
    <meta name="robots" content="index, follow" />

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://clitips.sakamotostore.site/" />
    <meta property="og:title" content="CLI Tips - コマンドラインチートシート" />
    <meta
      property="og:description"
      content="Windows、Linux、Git、PowerShellのコマンドを素早く検索・参照できるWebアプリ。開発者必携のチートシート。"
    />
    <meta
      property="og:image"
      content="https://clitips.sakamotostore.site/og-image.png"
    />
    <meta property="og:locale" content="ja_JP" />

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:url" content="https://clitips.sakamotostore.site/" />
    <meta
      name="twitter:title"
      content="CLI Tips - コマンドラインチートシート"
    />
    <meta
      name="twitter:description"
      content="Windows、Linux、Git、PowerShellのコマンドを素早く検索・参照できるWebアプリ。"
    />
    <meta
      name="twitter:image"
      content="https://clitips.sakamotostore.site/og-image.png"
    />

    <!-- Favicon -->
    <link rel="apple-touch-icon" sizes="180x180" href="/logo.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/logo.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/logo.png" />

    <!-- Canonical URL -->
    <link rel="canonical" href="https://clitips.sakamotostore.site/" />

    <!-- Preload Critical Resources -->
    <link rel="preload" href="css/styles.css" as="style" />
    <link rel="preload" href="js/app.js" as="script" />
    <link
      rel="preload"
      href="data/commands.json"
      as="fetch"
      type="application/json"
      crossorigin
    />

    <!-- Stylesheet -->
    <link rel="stylesheet" href="css/styles.css" />

    <!-- Structured Data -->
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "WebApplication",
        "name": "CLI Tips",
        "url": "https://clitips.sakamotostore.site/",
        "description": "Windows、Linux、Git、PowerShellのコマンドライン操作チートシート",
        "applicationCategory": "DeveloperApplication",
        "operatingSystem": "Any",
        "offers": {
          "@type": "Offer",
          "price": "0",
          "priceCurrency": "JPY"
        },
        "author": {
          "@type": "Person",
          "name": "saka"
        },
        "publisher": {
          "@type": "Organization",
          "name": "CLI Tips"
        },
        "inLanguage": "ja",
        "keywords": "CLI,コマンドライン,Windows,Linux,Git,PowerShell,チートシート"
      }
    </script>
    <meta
      name="google-site-verification"
      content="7KdNF5tkYEHrVFD1UChi-GMS6Y-YaDdAe1_2uiQEc4w"
    />
    <script
      async
      src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8626080480388550"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <header>
      <h1>CLI Tips - コマンドラインチートシート</h1>
      <p>Windows・Linux・Git・PowerShell のコマンドを素早く検索</p>
    </header>

    <main>
      <!-- 検索とフィルタセクション -->
      <section class="search-section" aria-label="検索とフィルタ">
        <div class="search-container">
          <label for="search-input" class="visually-hidden">コマンド検索</label>
          <input
            type="text"
            id="search-input"
            placeholder="コマンド名、説明で検索..."
            aria-describedby="search-help"
          />
          <div id="search-help" class="visually-hidden">
            コマンド名や説明の一部を入力してリアルタイム検索
          </div>
        </div>

        <div class="filter-container">
          <fieldset>
            <legend>OS・ツール フィルタ</legend>
            <label class="checkbox-label windows">
              <input type="checkbox" id="filter-windows" checked />
              <span>Windows</span>
            </label>
            <label class="checkbox-label linux">
              <input type="checkbox" id="filter-linux" checked />
              <span>Linux</span>
            </label>
            <label class="checkbox-label git">
              <input type="checkbox" id="filter-git" checked />
              <span>Git</span>
            </label>
            <label class="checkbox-label powershell">
              <input type="checkbox" id="filter-powershell" checked />
              <span>PowerShell</span>
            </label>
          </fieldset>
        </div>
      </section>

      <!-- コマンド一覧セクション -->
      <section class="commands-section" aria-label="コマンド一覧">
        <div id="loading" class="loading" aria-live="polite">
          データを読み込み中...
        </div>

        <div
          id="commands-container"
          class="commands-container"
          aria-live="polite"
        >
          <!-- コマンドがここに動的に表示される -->
        </div>

        <div
          id="no-results"
          class="no-results"
          style="display: none"
          aria-live="polite"
        >
          <p>該当するコマンドが見つかりませんでした。</p>
          <p>検索条件やOSフィルタを変更してみてください。</p>
        </div>
      </section>
    </main>

    <footer>
      <nav aria-label="フッターナビゲーション">
        <p>&copy; 2024 CLI Tips. All rights reserved.</p>
        <div class="footer-links">
          <a href="#" rel="noopener" aria-label="プライバシーポリシー"
            >プライバシーポリシー</a
          >
          <a href="#" rel="noopener" aria-label="利用規約">利用規約</a>
          <a
            href="https://github.com/yourname/cli-tips"
            rel="noopener"
            aria-label="GitHubリポジトリ"
            >GitHub</a
          >
        </div>
      </nav>
    </footer>

    <!-- フロートボタン -->
    <button id="float-button" class="float-button" title="全コマンド一覧">
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M3 12h18M3 6h18M3 18h18"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
        />
      </svg>
    </button>

    <!-- オーバーレイモーダル -->
    <div id="overlay-modal" class="overlay-modal">
      <div class="modal-content">
        <div class="modal-header">
          <h2>全コマンド一覧</h2>
          <button id="close-modal" class="close-button">×</button>
        </div>
        <div class="modal-body">
          <div id="command-list" class="command-list">
            <!-- JavaScript で動的に生成 -->
          </div>
        </div>
      </div>
    </div>

    <script src="js/app.js"></script>
  </body>
</html>