Spaces:
Running
Running
File size: 5,364 Bytes
0dba846 991fd66 0dba846 991fd66 0dba846 991fd66 0dba846 991fd66 0dba846 991fd66 0dba846 991fd66 0dba846 991fd66 0dba846 991fd66 0dba846 991fd66 0dba846 991fd66 0dba846 991fd66 0dba846 991fd66 0dba846 991fd66 0dba846 3943ff2 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 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 |
<!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-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> |