Spaces:
Running
Running
File size: 4,738 Bytes
0dba846 991fd66 0dba846 991fd66 0dba846 991fd66 0dba846 991fd66 0dba846 16d69bd 0dba846 991fd66 0dba846 991fd66 0dba846 991fd66 0dba846 991fd66 0dba846 991fd66 0dba846 16d69bd 0dba846 16d69bd 0dba846 16d69bd 991fd66 16d69bd 0dba846 16d69bd 0dba846 16d69bd 0dba846 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
<!DOCTYPE html>
<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> |