Skip to content

Commit 6dec0e9

Browse files
ayutazclaude
ayutaz
and
claude
committed
Create standalone version for static deployment
- Added index.html at root for GitHub Pages - Created single-file app.js with all functionality - Simplified deployment without webpack build process - Direct static file serving for GitHub Pages 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 33b1437 commit 6dec0e9

3 files changed

Lines changed: 10299 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Image to Pixel Art Converter</title>
7+
<link rel="stylesheet" href="src/css/main.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<header class="header">
12+
<h1 class="title">Image to Pixel Art</h1>
13+
<p class="subtitle">画像をピクセルアート風に変換</p>
14+
</header>
15+
16+
<main class="main-content">
17+
<!-- ファイルアップロードエリア -->
18+
<section class="upload-section">
19+
<div class="upload-area" id="uploadArea">
20+
<div class="upload-content">
21+
<svg class="upload-icon" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
22+
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
23+
<polyline points="17 8 12 3 7 8"></polyline>
24+
<line x1="12" y1="3" x2="12" y2="15"></line>
25+
</svg>
26+
<p class="upload-text">画像をドラッグ&ドロップ<br>または</p>
27+
<button class="upload-button" id="uploadButton">ファイルを選択</button>
28+
<input type="file" id="fileInput" class="file-input" accept="image/*" hidden>
29+
<p class="upload-info">対応形式: JPEG, PNG, GIF, WebP</p>
30+
</div>
31+
</div>
32+
</section>
33+
34+
<!-- 設定パネル -->
35+
<section class="settings-section" id="settingsSection" style="display: none;">
36+
<h2 class="section-title">変換設定</h2>
37+
<div class="settings-grid">
38+
<div class="setting-group">
39+
<label class="setting-label">色数</label>
40+
<div class="setting-control">
41+
<input type="range" id="colorCount" class="slider" min="2" max="256" value="8">
42+
<span class="slider-value" id="colorCountValue">8</span>
43+
</div>
44+
</div>
45+
46+
<div class="setting-group">
47+
<label class="setting-label">ピクセルサイズ</label>
48+
<div class="setting-control">
49+
<input type="range" id="pixelSize" class="slider" min="1" max="32" value="8">
50+
<span class="slider-value" id="pixelSizeValue">8</span>
51+
</div>
52+
</div>
53+
54+
<div class="setting-group">
55+
<label class="setting-label">出力幅 (px)</label>
56+
<div class="setting-control">
57+
<input type="number" id="outputWidth" class="number-input" min="32" max="2048" value="512">
58+
</div>
59+
</div>
60+
61+
<div class="setting-group">
62+
<label class="setting-label">ディザリング</label>
63+
<div class="setting-control">
64+
<select id="dithering" class="select">
65+
<option value="none">なし</option>
66+
<option value="floyd-steinberg">Floyd-Steinberg</option>
67+
<option value="ordered">Ordered (Bayer)</option>
68+
<option value="atkinson">Atkinson</option>
69+
</select>
70+
</div>
71+
</div>
72+
</div>
73+
74+
<div class="button-group">
75+
<button class="btn btn-primary" id="convertButton">変換開始</button>
76+
<button class="btn btn-secondary" id="resetButton">リセット</button>
77+
</div>
78+
</section>
79+
80+
<!-- プレビューエリア -->
81+
<section class="preview-section" id="previewSection" style="display: none;">
82+
<h2 class="section-title">変換結果</h2>
83+
<div class="preview-container">
84+
<div class="preview-box">
85+
<h3 class="preview-title">元の画像</h3>
86+
<canvas id="originalCanvas" class="preview-canvas"></canvas>
87+
</div>
88+
<div class="preview-box">
89+
<h3 class="preview-title">変換後</h3>
90+
<canvas id="resultCanvas" class="preview-canvas"></canvas>
91+
<div class="preview-actions">
92+
<button class="btn btn-success" id="downloadButton">ダウンロード</button>
93+
</div>
94+
</div>
95+
</div>
96+
</section>
97+
98+
<!-- プログレス表示 -->
99+
<div class="progress-overlay" id="progressOverlay" style="display: none;">
100+
<div class="progress-content">
101+
<div class="spinner"></div>
102+
<p class="progress-text">変換処理中...</p>
103+
<div class="progress-bar">
104+
<div class="progress-fill" id="progressBar"></div>
105+
</div>
106+
</div>
107+
</div>
108+
</main>
109+
110+
<footer class="footer">
111+
<p>&copy; 2024 Image to Pixel Art Converter</p>
112+
</footer>
113+
</div>
114+
115+
<script src="src/js/app.js"></script>
116+
</body>
117+
</html>

0 commit comments

Comments
 (0)