Implement Phase 3: Multiple file support and batch processing

Features implemented:
- Multiple file upload (up to 20 files)
- File list management with thumbnails
- Web Worker for parallel processing
- Batch conversion with progress tracking
- JSZip integration for bulk download
- Individual and ZIP download options
- Dithering algorithms (Floyd-Steinberg, Ordered, Atkinson)
- Enhanced UI for multiple files

UI improvements:
- File list section with status indicators
- Grid layout for preview items
- Progress bar with percentage
- Download section with multiple options

Technical changes:
- Created app-v2.js for enhanced version
- Added batchProcessor.js for queue management
- Implemented imageProcessor.worker.js
- Added CDN links for JSZip and FileSaver.js

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: ayutaz

index.html

@@ -25,8 +25,8 @@ <h1 class="title">Image to Pixel Art</h1>
                         </svg>
                         <p class="upload-text">画像をドラッグ&ドロップ<br>または</p>
                         <button class="upload-button" id="uploadButton">ファイルを選択</button>
-                        <input type="file" id="fileInput" class="file-input" accept="image/*" hidden>
-                        <p class="upload-info">対応形式: JPEG, PNG, GIF, WebP</p>
+                        <input type="file" id="fileInput" class="file-input" accept="image/*" multiple hidden>
+                        <p class="upload-info">対応形式: JPEG, PNG, GIF, WebP<br>最大20ファイルまで選択可能</p>
                     </div>
                 </div>
             </section>
@@ -77,21 +77,21 @@ <h2 class="section-title">変換設定</h2>
                 </div>
             </section>
 
+            <!-- ファイルリスト -->
+            <section class="file-list-section" id="fileListSection" style="display: none;">
+                <h2 class="section-title">選択されたファイル (<span id="fileCount">0</span>/20)</h2>
+                <div class="file-list" id="fileList"></div>
+            </section>
+
             <!-- プレビューエリア -->
             <section class="preview-section" id="previewSection" style="display: none;">
                 <h2 class="section-title">変換結果</h2>
-                <div class="preview-container">
-                    <div class="preview-box">
-                        <h3 class="preview-title">元の画像</h3>
-                        <canvas id="originalCanvas" class="preview-canvas"></canvas>
-                    </div>
-                    <div class="preview-box">
-                        <h3 class="preview-title">変換後</h3>
-                        <canvas id="resultCanvas" class="preview-canvas"></canvas>
-                        <div class="preview-actions">
-                            <button class="btn btn-success" id="downloadButton">ダウンロード</button>
-                        </div>
-                    </div>
+                <div class="preview-container" id="previewContainer">
+                    <!-- 動的に生成 -->
+                </div>
+                <div class="download-section" id="downloadSection" style="display: none;">
+                    <button class="btn btn-success" id="downloadAllButton">すべてダウンロード (ZIP)</button>
+                    <button class="btn btn-primary" id="downloadSingleButton">個別ダウンロード</button>
                 </div>
             </section>
 
@@ -112,6 +112,11 @@ <h3 class="preview-title">変換後</h3>
         </footer>
     </div>
 
-    <script src="src/js/app.js"></script>
+    <!-- External Libraries -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
+    
+    <!-- Main Application -->
+    <script src="src/js/app-v2.js"></script>
 </body>
 </html>

src/css/main.css

@@ -243,15 +243,160 @@ body {
     box-shadow: 0 4px 12px rgba(72, 187, 120, 0.4);
 }
 
+/* File List Section */
+.file-list-section {
+    margin-bottom: 40px;
+}
+
+.file-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 16px;
+    max-height: 400px;
+    overflow-y: auto;
+    padding: 16px;
+    background: #f7fafc;
+    border-radius: 8px;
+}
+
+.file-item {
+    background: white;
+    border: 2px solid #e2e8f0;
+    border-radius: 8px;
+    padding: 12px;
+    position: relative;
+    transition: all 0.3s;
+}
+
+.file-item:hover {
+    border-color: #667eea;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+
+.file-item-name {
+    font-size: 14px;
+    color: #2d3748;
+    margin-bottom: 8px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.file-item-size {
+    font-size: 12px;
+    color: #a0aec0;
+    margin-bottom: 8px;
+}
+
+.file-item-status {
+    font-size: 12px;
+    font-weight: 600;
+    padding: 4px 8px;
+    border-radius: 4px;
+    text-align: center;
+}
+
+.file-item-status.pending {
+    background: #e2e8f0;
+    color: #4a5568;
+}
+
+.file-item-status.processing {
+    background: #fef5e7;
+    color: #f39c12;
+}
+
+.file-item-status.completed {
+    background: #d5f4e6;
+    color: #27ae60;
+}
+
+.file-item-status.error {
+    background: #ffeaa7;
+    color: #d63031;
+}
+
+.file-item-remove {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    width: 20px;
+    height: 20px;
+    border: none;
+    background: #e74c3c;
+    color: white;
+    border-radius: 50%;
+    cursor: pointer;
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s;
+}
+
+.file-item-remove:hover {
+    background: #c0392b;
+    transform: scale(1.1);
+}
+
+.file-item-thumbnail {
+    width: 100%;
+    height: 120px;
+    object-fit: cover;
+    border-radius: 4px;
+    margin-bottom: 8px;
+}
+
 /* Preview Section */
 .preview-section {
     margin-bottom: 40px;
 }
 
 .preview-container {
     display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 32px;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 24px;
+    max-height: 600px;
+    overflow-y: auto;
+    padding: 16px;
+    background: #f7fafc;
+    border-radius: 8px;
+}
+
+.preview-item {
+    background: white;
+    border-radius: 8px;
+    padding: 16px;
+    text-align: center;
+}
+
+.preview-item-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: #2d3748;
+    margin-bottom: 12px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.preview-item-canvas {
+    width: 100%;
+    max-width: 200px;
+    height: auto;
+    border: 2px solid #e2e8f0;
+    border-radius: 4px;
+    margin-bottom: 12px;
+}
+
+/* Download Section */
+.download-section {
+    margin-top: 24px;
+    text-align: center;
+    display: flex;
+    gap: 16px;
+    justify-content: center;
 }
 
 .preview-box {