Hugging Face's logo

Spaces:
soiz1
/
image-editor
Running

App Files Community
soiz1 commited on
Commit
991fd66
·
verified ·
1 Parent(s): 33d2b7a

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +45 -50
index.html CHANGED
@@ -3,17 +3,20 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>画像編集ツール</title>
7
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
 
8
  <link rel="stylesheet" href="styles.css">
9
  </head>
10
  <body>
11
  <div class="container">
12
- <h1>画像編集ツール</h1>
13
 
14
  <div class="upload-section">
15
  <input type="file" id="image-upload" accept="image/*">
16
- <label for="image-upload" class="upload-btn">画像を選択</label>
 
 
17
  </div>
18
 
19
  <div class="editor-container">
@@ -23,90 +26,82 @@
23
 
24
  <div class="controls">
25
  <div class="control-group">
26
- <h3>基本調整</h3>
27
  <div class="slider-control">
28
- <label for="brightness">明るさ</label>
29
  <input type="range" id="brightness" min="-100" max="100" value="0">
30
  <span id="brightness-value">0</span>
31
  </div>
32
-
33
  <div class="slider-control">
34
- <label for="contrast">コントラスト</label>
35
  <input type="range" id="contrast" min="-100" max="100" value="0">
36
  <span id="contrast-value">0</span>
37
  </div>
38
-
39
  <div class="slider-control">
40
- <label for="saturation">飽和度</label>
41
  <input type="range" id="saturation" min="-100" max="100" value="0">
42
  <span id="saturation-value">0</span>
43
  </div>
44
  </div>
45
 
46
  <div class="control-group">
47
- <h3>トーン調整</h3>
48
  <div class="slider-control">
49
- <label for="shadows">シャドウ</label>
50
  <input type="range" id="shadows" min="-100" max="100" value="0">
51
  <span id="shadows-value">0</span>
52
  </div>
53
-
54
  <div class="slider-control">
55
- <label for="highlights">ハイライト</label>
56
  <input type="range" id="highlights" min="-100" max="100" value="0">
57
  <span id="highlights-value">0</span>
58
  </div>
59
  </div>
60
 
61
  <div class="control-group">
62
- <h3>HSL調整</h3>
63
- <div class="slider-control">
64
- <label for="hue">色相</label>
65
- <input type="range" id="hue" min="-180" max="180" value="0">
66
- <span id="hue-value">0</span>
67
- </div>
68
-
69
- <div class="slider-control">
70
- <label for="hue-saturation">HSL 飽和度</label>
71
- <input type="range" id="hue-saturation" min="-100" max="100" value="0">
72
- <span id="hue-saturation-value">0</span>
73
- </div>
74
-
75
- <div class="slider-control">
76
- <label for="lightness">HSL 明度</label>
77
- <input type="range" id="lightness" min="-100" max="100" value="0">
78
- <span id="lightness-value">0</span>
79
  </div>
80
  </div>
81
 
82
  <div class="control-group">
83
- <h3>RGBカーブ</h3>
84
- <div class="slider-control">
85
- <label for="red-curve">赤</label>
86
- <input type="range" id="red-curve" min="-100" max="100" value="0">
87
- <span id="red-curve-value">0</span>
88
- </div>
89
-
90
- <div class="slider-control">
91
- <label for="green-curve">緑</label>
92
- <input type="range" id="green-curve" min="-100" max="100" value="0">
93
- <span id="green-curve-value">0</span>
94
- </div>
95
-
96
- <div class="slider-control">
97
- <label for="blue-curve">青</label>
98
- <input type="range" id="blue-curve" min="-100" max="100" value="0">
99
- <span id="blue-curve-value">0</span>
100
  </div>
101
  </div>
102
 
103
- <button id="reset-btn" class="action-btn">リセット</button>
104
- <button id="download-btn" class="action-btn">ダウンロード</button>
 
 
105
  </div>
106
  </div>
107
  </div>
108
 
109
- <!-- CamanJSライブラリ -->
110
  <script src="https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js"></script>
111
  <script src="script.js"></script>
112
  </body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>高度な画像エディタ</title>
7
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
9
  <link rel="stylesheet" href="styles.css">
10
  </head>
11
  <body>
12
  <div class="container">
13
+ <h1><i class="fas fa-image"></i> 高度な画像エディタ</h1>
14
 
15
  <div class="upload-section">
16
  <input type="file" id="image-upload" accept="image/*">
17
+ <label for="image-upload" class="upload-btn">
18
+ <i class="fas fa-cloud-upload-alt"></i> 画像を選択
19
+ </label>
20
  </div>
21
 
22
  <div class="editor-container">
 
26
 
27
  <div class="controls">
28
  <div class="control-group">
29
+ <h3><i class="fas fa-sliders-h"></i> 基本調整</h3>
30
  <div class="slider-control">
31
+ <label>明るさ</label>
32
  <input type="range" id="brightness" min="-100" max="100" value="0">
33
  <span id="brightness-value">0</span>
34
  </div>
 
35
  <div class="slider-control">
36
+ <label>コントラスト</label>
37
  <input type="range" id="contrast" min="-100" max="100" value="0">
38
  <span id="contrast-value">0</span>
39
  </div>
 
40
  <div class="slider-control">
41
+ <label>彩度</label>
42
  <input type="range" id="saturation" min="-100" max="100" value="0">
43
  <span id="saturation-value">0</span>
44
  </div>
45
  </div>
46
 
47
  <div class="control-group">
48
+ <h3><i class="fas fa-adjust"></i> トーン調整</h3>
49
  <div class="slider-control">
50
+ <label>シャドウ</label>
51
  <input type="range" id="shadows" min="-100" max="100" value="0">
52
  <span id="shadows-value">0</span>
53
  </div>
 
54
  <div class="slider-control">
55
+ <label>ハイライト</label>
56
  <input type="range" id="highlights" min="-100" max="100" value="0">
57
  <span id="highlights-value">0</span>
58
  </div>
59
  </div>
60
 
61
  <div class="control-group">
62
+ <h3><i class="fas fa-palette"></i> HSL調整</h3>
63
+ <div class="hsl-controls">
64
+ <div class="hsl-slider">
65
+ <label>色相 (赤)</label>
66
+ <input type="range" id="hue-red" min="-100" max="100" value="0">
67
+ </div>
68
+ <div class="hsl-slider">
69
+ <label>色相 (緑)</label>
70
+ <input type="range" id="hue-green" min="-100" max="100" value="0">
71
+ </div>
72
+ <div class="hsl-slider">
73
+ <label>色相 (青)</label>
74
+ <input type="range" id="hue-blue" min="-100" max="100" value="0">
75
+ </div>
 
 
 
76
  </div>
77
  </div>
78
 
79
  <div class="control-group">
80
+ <h3><i class="fas fa-project-diagram"></i> RGBカーブ</h3>
81
+ <div class="curve-controls">
82
+ <div class="curve-container">
83
+ <canvas id="red-curve" width="200" height="200"></canvas>
84
+ <label>赤チャンネル</label>
85
+ </div>
86
+ <div class="curve-container">
87
+ <canvas id="green-curve" width="200" height="200"></canvas>
88
+ <label>緑チャンネル</label>
89
+ </div>
90
+ <div class="curve-container">
91
+ <canvas id="blue-curve" width="200" height="200"></canvas>
92
+ <label>青チャンネル</label>
93
+ </div>
 
 
 
94
  </div>
95
  </div>
96
 
97
+ <div class="action-buttons">
98
+ <button id="reset-btn" class="btn"><i class="fas fa-undo"></i> リセット</button>
99
+ <button id="download-btn" class="btn primary"><i class="fas fa-download"></i> ダウンロード</button>
100
+ </div>
101
  </div>
102
  </div>
103
  </div>
104
 
 
105
  <script src="https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js"></script>
106
  <script src="script.js"></script>
107
  </body>