Spaces:
Running
Running
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>高度な画像エディタ</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1><i class="fas fa-image"></i> 高度な画像エディタ</h1> | |
| <div class="upload-section"> | |
| <input type="file" id="image-upload" accept="image/*"> | |
| <label for="image-upload" class="upload-btn"> | |
| <i class="fas fa-cloud-upload-alt"></i> 画像を選択 | |
| </label> | |
| </div> | |
| <div class="editor-container"> | |
| <div class="image-preview"> | |
| <canvas id="image-canvas"></canvas> | |
| </div> | |
| <div class="controls"> | |
| <div class="control-group"> | |
| <h3><i class="fas fa-sliders-h"></i> 基本調整</h3> | |
| <div class="slider-control"> | |
| <label>明るさ</label> | |
| <input type="range" id="brightness" min="-100" max="100" value="0"> | |
| <span id="brightness-value">0</span> | |
| </div> | |
| <div class="slider-control"> | |
| <label>コントラスト</label> | |
| <input type="range" id="contrast" min="-100" max="100" value="0"> | |
| <span id="contrast-value">0</span> | |
| </div> | |
| <div class="slider-control"> | |
| <label>彩度</label> | |
| <input type="range" id="saturation" min="-100" max="100" value="0"> | |
| <span id="saturation-value">0</span> | |
| </div> | |
| </div> | |
| <div class="control-group"> | |
| <h3><i class="fas fa-adjust"></i> トーン調整</h3> | |
| <div class="slider-control"> | |
| <label>シャドウ</label> | |
| <input type="range" id="shadows" min="-100" max="100" value="0"> | |
| <span id="shadows-value">0</span> | |
| </div> | |
| <div class="slider-control"> | |
| <label>ハイライト</label> | |
| <input type="range" id="highlights" min="-100" max="100" value="0"> | |
| <span id="highlights-value">0</span> | |
| </div> | |
| </div> | |
| <div class="control-group"> | |
| <h3><i class="fas fa-palette"></i> HSL調整</h3> | |
| <div class="hsl-controls"> | |
| <div class="hsl-slider"> | |
| <label>色相 (赤)</label> | |
| <input type="range" id="hue-red" min="-100" max="100" value="0"> | |
| </div> | |
| <div class="hsl-slider"> | |
| <label>色相 (緑)</label> | |
| <input type="range" id="hue-green" min="-100" max="100" value="0"> | |
| </div> | |
| <div class="hsl-slider"> | |
| <label>色相 (青)</label> | |
| <input type="range" id="hue-blue" min="-100" max="100" value="0"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="control-group"> | |
| <h3><i class="fas fa-project-diagram"></i> RGBカーブ</h3> | |
| <div class="curve-controls"> | |
| <div class="curve-container"> | |
| <canvas id="red-curve" width="200" height="200"></canvas> | |
| <label>赤チャンネル</label> | |
| </div> | |
| <div class="curve-container"> | |
| <canvas id="green-curve" width="200" height="200"></canvas> | |
| <label>緑チャンネル</label> | |
| </div> | |
| <div class="curve-container"> | |
| <canvas id="blue-curve" width="200" height="200"></canvas> | |
| <label>青チャンネル</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="action-buttons"> | |
| <button id="reset-btn" class="btn"><i class="fas fa-undo"></i> リセット</button> | |
| <button id="apply-btn" class="btn primary"><i class="fas fa-check"></i> 適用</button> | |
| <button id="download-btn" class="btn"><i class="fas fa-download"></i> ダウンロード</button> | |
| </div> | |
| <!-- 読み込みアニメーション用の要素を追加 --> | |
| <div id="loading-overlay" class="loading-overlay"> | |
| <div class="loading-spinner"></div> | |
| <div class="loading-text">処理中...</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js"></script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |