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="styles.css"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>画像編集ツール</h1> | |
| <div class="upload-section"> | |
| <input type="file" id="image-upload" accept="image/*"> | |
| <label for="image-upload" class="upload-btn">画像を選択</label> | |
| </div> | |
| <div class="editor-container"> | |
| <div class="image-preview"> | |
| <canvas id="image-canvas"></canvas> | |
| </div> | |
| <div class="controls"> | |
| <div class="control-group"> | |
| <h3>基本調整</h3> | |
| <div class="slider-control"> | |
| <label for="brightness">明るさ</label> | |
| <input type="range" id="brightness" min="-100" max="100" value="0"> | |
| <span id="brightness-value">0</span> | |
| </div> | |
| <div class="slider-control"> | |
| <label for="contrast">コントラスト</label> | |
| <input type="range" id="contrast" min="-100" max="100" value="0"> | |
| <span id="contrast-value">0</span> | |
| </div> | |
| <div class="slider-control"> | |
| <label for="saturation">飽和度</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>トーン調整</h3> | |
| <div class="slider-control"> | |
| <label for="shadows">シャドウ</label> | |
| <input type="range" id="shadows" min="-100" max="100" value="0"> | |
| <span id="shadows-value">0</span> | |
| </div> | |
| <div class="slider-control"> | |
| <label for="highlights">ハイライト</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>HSL調整</h3> | |
| <div class="slider-control"> | |
| <label for="hue">色相</label> | |
| <input type="range" id="hue" min="-180" max="180" value="0"> | |
| <span id="hue-value">0</span> | |
| </div> | |
| <div class="slider-control"> | |
| <label for="hue-saturation">HSL 飽和度</label> | |
| <input type="range" id="hue-saturation" min="-100" max="100" value="0"> | |
| <span id="hue-saturation-value">0</span> | |
| </div> | |
| <div class="slider-control"> | |
| <label for="lightness">HSL 明度</label> | |
| <input type="range" id="lightness" min="-100" max="100" value="0"> | |
| <span id="lightness-value">0</span> | |
| </div> | |
| </div> | |
| <div class="control-group"> | |
| <h3>RGBカーブ</h3> | |
| <div class="slider-control"> | |
| <label for="red-curve">赤</label> | |
| <input type="range" id="red-curve" min="-100" max="100" value="0"> | |
| <span id="red-curve-value">0</span> | |
| </div> | |
| <div class="slider-control"> | |
| <label for="green-curve">緑</label> | |
| <input type="range" id="green-curve" min="-100" max="100" value="0"> | |
| <span id="green-curve-value">0</span> | |
| </div> | |
| <div class="slider-control"> | |
| <label for="blue-curve">青</label> | |
| <input type="range" id="blue-curve" min="-100" max="100" value="0"> | |
| <span id="blue-curve-value">0</span> | |
| </div> | |
| </div> | |
| <button id="reset-btn" class="action-btn">リセット</button> | |
| <button id="download-btn" class="action-btn">ダウンロード</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CamanJSライブラリ --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js"></script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |