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-project-diagram"></i> γγ£γ³γγ«γ«γΌγ</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 class="curve-container"> | |
| <canvas id="luminance-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> | |
| </div> | |
| </div> | |
| <div id="loading-overlay" class="loading-overlay"> | |
| <div class="loading-spinner"></div> | |
| <div class="loading-text">ε¦ηδΈ...</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> |