feat: 図解ツールの初期コンテンツを追加

Made-with: Cursor
2026-03-05 17:11:54 +09:00
commit 02c1f9329c
13 changed files with 4997 additions and 0 deletions
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="robots" content="noindex, nofollow, noarchive, nosnippet, noimageindex">
+  <meta name="googlebot" content="noindex, nofollow">
+  <title>図解ライブラリ</title>
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='20' fill='%23FFFFFF'/><rect x='8' y='8' width='84' height='84' rx='14' fill='none' stroke='%233B82F6' stroke-width='4'/><circle cx='32' cy='40' r='10' fill='%233B82F6' opacity='0.8'/><circle cx='68' cy='40' r='10' fill='%2360A5FA' opacity='0.8'/><rect x='25' y='62' width='50' height='6' rx='3' fill='%2394A3B8' opacity='0.6'/><rect x='30' y='74' width='40' height='6' rx='3' fill='%2394A3B8' opacity='0.3'/></svg>">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap" rel="stylesheet">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          colors: {
+            ads: {
+              bg: '#FFFFFF',
+              surface: '#F8FAFC',
+              hover: '#F1F5F9',
+              border: '#E2E8F0',
+              accent: '#3B82F6',
+              'accent-light': '#2563EB',
+              text: '#1E293B',
+              muted: '#64748B',
+              dim: '#94A3B8',
+            }
+          },
+          fontFamily: {
+            sans: ['"Noto Sans JP"', '"Hiragino Sans"', '"Hiragino Kaku Gothic ProN"', '"Yu Gothic UI"', '"Meiryo"', 'sans-serif'],
+          }
+        }
+      }
+    }
+  </script>
+</head>
+<body class="bg-ads-bg text-slate-600 antialiased leading-relaxed border-t-4 border-ads-accent">
+  <main class="max-w-3xl mx-auto px-5 py-10 md:py-16">
+    <div class="text-center mb-12">
+      <h1 class="text-2xl md:text-3xl font-black text-slate-900 tracking-tight mb-3">図解ライブラリ</h1>
+      <p class="text-ads-muted">チャット欄で「○○を図解して」と依頼すると、ここに追加されます</p>
+    </div>
+
+    <div class="space-y-3">
+      <a href="git.html" class="block bg-ads-surface border border-ads-border rounded-xl p-5 hover:border-ads-accent/40 transition-colors">
+        <h2 class="font-bold text-slate-900 mb-1">Gitの仕組み</h2>
+        <p class="text-sm text-ads-muted">Gitの仕組みを、身近なたとえとビジュアルでわかりやすく図解します。</p>
+      </a>
+      <a href="llm.html" class="block bg-ads-surface border border-ads-border rounded-xl p-5 hover:border-ads-accent/40 transition-colors">
+        <h2 class="font-bold text-slate-900 mb-1">LLM（大規模言語モデル）の仕組み</h2>
+        <p class="text-sm text-ads-muted">LLMの仕組みを、身近な例とビジュアルでわかりやすく図解します。</p>
+      </a>
+      <a href="cursor.html" class="block bg-ads-surface border border-ads-border rounded-xl p-5 hover:border-ads-accent/40 transition-colors">
+        <h2 class="font-bold text-slate-900 mb-1">Cursorの仕組み</h2>
+        <p class="text-sm text-ads-muted">AIが組み込まれたコードエディタ「Cursor」の仕組みを、身近な例とビジュアルでわかりやすく図解します。</p>
+      </a>
+    </div>
+
+    <div class="mt-16 pt-8 border-t border-ads-border/30">
+      <p class="text-sm font-bold text-slate-900 mb-4">こんなことを聞いてみよう</p>
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm text-ads-muted">
+        <div class="bg-ads-surface rounded-lg px-4 py-2.5">「API とは何か、図解して」</div>
+        <div class="bg-ads-surface rounded-lg px-4 py-2.5">「Git の rebase と merge の違いを図解して」</div>
+        <div class="bg-ads-surface rounded-lg px-4 py-2.5">「クラウドとは何か、図解して」</div>
+        <div class="bg-ads-surface rounded-lg px-4 py-2.5">「KPI と KGI の違いを図解して」</div>
+        <div class="bg-ads-surface rounded-lg px-4 py-2.5">「HTML と CSS の関係を図解して」</div>
+        <div class="bg-ads-surface rounded-lg px-4 py-2.5">「UI と UX の違いを図解して」</div>
+      </div>
+    </div>
+  </main>
+  <footer class="max-w-3xl mx-auto px-5 pb-10 pt-6 border-t border-ads-border/30">
+    <p class="text-xs text-ads-dim text-center">AI-Driven School の図解ツールで作成</p>
+  </footer>
+</body>
+</html>