README_en.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CC Directory Generator</title>
<style>
  :root {
    --bg: #0d1117; --surface: #161b22; --border: #30363d;
    --text: #e6edf3; --text-dim: #8b949e;
    --accent: #58a6ff; --accent2: #bc8cff; --accent3: #7ee787;
    --gradient: linear-gradient(135deg, #58a6ff 0%, #bc8cff 50%, #f778ba 100%);
    --card-shadow: 0 8px 32px rgba(0,0,0,.4);
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { font-family: 'Segoe UI', -apple-system, sans-serif; background: var(--bg); color: var(--text); line-height: 1.7; }

  .hero { position: relative; text-align: center; padding: 40px 20px 40px; overflow: hidden; }
  .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(88,166,255,.15) 0%, transparent 70%), radial-gradient(ellipse at 80% 100%, rgba(188,140,255,.1) 0%, transparent 50%); pointer-events: none; }
  .hero img.banner { width: 100%; max-width: 800px; border-radius: 12px; margin-bottom: 20px; }
  .hero h1 { font-size: 2.8rem; font-weight: 800; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -1px; margin-bottom: 8px; }
  .hero .subtitle { font-size: 1.1rem; color: var(--text-dim); max-width: 600px; margin: 0 auto; }
  .badge-row { margin-top: 20px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
  .badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 20px; font-size: .82rem; font-weight: 600; border: 1px solid var(--border); background: var(--surface); }
  .badge .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
  .dot-blue { background: var(--accent); } .dot-purple { background: var(--accent2); } .dot-green { background: var(--accent3); }

  .container { max-width: 960px; margin: 0 auto; padding: 0 24px 60px; }
  section { margin-top: 48px; }
  section h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 20px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }

  .features { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
  .card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 24px; transition: transform .2s, box-shadow .2s; }
  .card:hover { transform: translateY(-4px); box-shadow: var(--card-shadow); }
  .card h3 { font-size: 1.05rem; margin-bottom: 8px; }
  .card p { color: var(--text-dim); font-size: .92rem; }

  .screenshot { text-align: center; margin: 24px 0; }
  .screenshot img { max-width: 700px; width: 100%; border-radius: 10px; border: 1px solid var(--border); }
  .briefing { text-align: center; margin: 24px 0; }
  .briefing img { max-width: 500px; width: 100%; border-radius: 10px; }

  .code-block { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 20px 24px; font-family: 'Cascadia Code', 'Consolas', monospace; font-size: .88rem; overflow-x: auto; position: relative; margin: 12px 0; }
  .code-block .lang-tag { position: absolute; top: 8px; right: 12px; font-size: .7rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; }
  .code-block pre { white-space: pre; }
  .dim { color: var(--text-dim); } .hl { color: var(--accent); }

  table { width: 100%; border-collapse: collapse; margin: 12px 0; }
  th, td { text-align: left; padding: 10px 16px; border-bottom: 1px solid var(--border); font-size: .92rem; }
  th { color: var(--text-dim); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .5px; }
  tr:last-child td { border-bottom: none; }
  td code { background: rgba(88,166,255,.1); color: var(--accent); padding: 2px 7px; border-radius: 4px; font-size: .85rem; }

  .tree { line-height: 1.9; }
  .tree .folder { color: var(--accent); font-weight: 600; }
  .tree .file { color: var(--text); }
  .tree .note { color: var(--text-dim); font-style: italic; }

  footer { text-align: center; padding: 40px 20px; color: var(--text-dim); font-size: .85rem; border-top: 1px solid var(--border); }
  footer img { max-width: 250px; border-radius: 12px; margin-bottom: 16px; }
  footer em { display: block; margin-top: 8px; }
</style>
</head>
<body>

<!-- HERO -->
<div class="hero">
  <img class="banner" src="images/01_Banner.png" alt="CC Directory Generator">
  <h1>CC Directory Generator</h1>
  <p class="subtitle">A GUI tool for creating, managing, and normalizing Claude Code project folders.</p>
  <div class="badge-row">
    <span class="badge"><span class="dot dot-blue"></span>Python + tkinter</span>
    <span class="badge"><span class="dot dot-green"></span>No extra packages</span>
    <span class="badge"><span class="dot dot-purple"></span>Windows 10/11</span>
  </div>
</div>

<div class="container">

<!-- SCREENSHOT -->
<section>
  <h2>&#128187; Main Window</h2>
  <div class="screenshot">
    <img src="images/04_CCDG_Main.png" alt="CCDG Main Window">
  </div>
</section>

<!-- FEATURES -->
<section>
  <h2>&#9889; Features</h2>
  <div class="briefing">
    <img src="images/02_Breafing.png" alt="Feature Overview">
  </div>
  <div class="features">
    <div class="card"><h3>&#128194; Generate</h3><p>Create project folders with standard numbered PascalCase structure. Automatically places a CLAUDE.md hardlink.</p></div>
    <div class="card"><h3>&#9999;&#65039; Update Master</h3><p>Safely update the master CLAUDE.md without breaking hardlinks. Auto-creates timestamped backups.</p></div>
    <div class="card"><h3>&#9989; Check Links</h3><p>Verify CLAUDE.md hardlink health across all registered projects using inode comparison.</p></div>
    <div class="card"><h3>&#128269; Detect Links</h3><p>Auto-detect CLAUDE.md files under a root folder. Batch-register unregistered projects with one click.</p></div>
    <div class="card"><h3>&#128260; Normalize</h3><p>Batch-rename inconsistent folder names under _Prompt. Includes a dry-run preview before execution.</p></div>
    <div class="card"><h3>&#9654; CC / Open</h3><p>Launch Claude Code in the selected project. Or open the folder in Windows Explorer.</p></div>
    <div class="card"><h3>&#9888;&#65039; Dangerous Option</h3><p>When checked, launches Claude Code with <code>--dangerously-skip-permissions</code>. Setting is persisted.</p></div>
    <div class="card"><h3>&#9881;&#65039; Config</h3><p>Manage master CLAUDE.md path, default parent path, and options.</p></div>
  </div>
</section>

<!-- OPERATIONS -->
<section>
  <h2>&#128203; Registered Projects</h2>
  <table>
    <tr><th>Action</th><th>Description</th></tr>
    <tr><td><strong>&#9654; CC</strong></td><td>Launch Claude Code in the selected project (double-click also works)</td></tr>
    <tr><td><strong>Open</strong></td><td>Open project folder in Windows Explorer</td></tr>
    <tr><td><strong>Remove</strong></td><td>Remove from registry (folder is not deleted)</td></tr>
    <tr><td><strong>Detect Links</strong></td><td>Auto-detect and batch-register unregistered projects</td></tr>
    <tr><td><strong>Check Links</strong></td><td>Verify CLAUDE.md hardlink health</td></tr>
    <tr><td><strong>Normalize</strong></td><td>Batch-rename with dry-run preview</td></tr>
    <tr><td><strong>Dangerous Option</strong></td><td>When ON, launches <code>claude --dangerously-skip-permissions</code></td></tr>
  </table>
</section>

<!-- FOLDER STRUCTURE -->
<section>
  <h2>&#128193; Generated Folder Structure</h2>
  <div class="code-block tree">
    <pre><span class="folder">{ProjectName}/</span>
<span class="file">├── CLAUDE.md</span>                <span class="note">Hardlink to master</span>
<span class="folder">└── _Prompt/</span>
    <span class="folder">├── 00_FromDesignAi/</span>     <span class="note">Design AI instructions</span>
    <span class="folder">│   └── _Specs/</span>
    <span class="folder">├── 01_FromBuilderAi/</span>    <span class="note">Builder AI reports</span>
    <span class="folder">│   └── _Research/</span>       <span class="note">Research reports</span>
    <span class="folder">├── 02_Prj/</span>              <span class="note">Project definition</span>
    <span class="folder">├── 03_Specs/</span>            <span class="note">Interface specs</span>
    <span class="folder">└── 99_Tmp/</span></pre>
  </div>
</section>

<!-- LINK METHOD -->
<section>
  <h2>&#128279; CLAUDE.md Link Method</h2>
  <table>
    <tr><th>Method</th><th>Default</th><th>Notes</th></tr>
    <tr><td><strong>Hardlink</strong></td><td>Yes</td><td>No admin rights or Developer Mode needed</td></tr>
    <tr><td>Symlink</td><td>Fallback</td><td>Used when hardlink creation fails</td></tr>
  </table>
</section>

<!-- QUICKSTART -->
<section>
  <h2>&#128640; Quick Start</h2>
  <p style="color:var(--text-dim); margin-bottom: 12px;">Double-click <code>Run_CCDirGen.bat</code>, or:</p>
  <div class="code-block"><span class="lang-tag">cmd</span><pre><span class="dim">$</span> <span class="hl">python</span> main.py</pre></div>
  <div class="code-block"><span class="lang-tag">powershell</span><pre><span class="dim">PS&gt;</span> <span class="hl">.\Run_CCDirGen.ps1</span></pre></div>
</section>

<!-- CONFIG FILES -->
<section>
  <h2>&#128221; Configuration Files</h2>
  <table>
    <tr><th>File</th><th>Purpose</th></tr>
    <tr><td><code>config.json</code></td><td>App settings (master path, default parent path, dangerous option)</td></tr>
    <tr><td><code>projects.json</code></td><td>Project registry (auto-generated)</td></tr>
    <tr><td><code>folder_template.json</code></td><td>Folder structure template (customizable)</td></tr>
    <tr><td><code>constants.json</code></td><td>UI layout values and rename mappings</td></tr>
  </table>
</section>

</div>

<footer>
  <img src="images/03_GiveYou.png" alt="Here you go!">
  <br>
  <strong>Here you go! Made with care.</strong>
  <em>CC Directory Generator</em>
</footer>

</body>
</html>