Hugging Face's logo

Spaces:
SenY
/
LogoMaker
Running

App Files Community
SenY commited on
Commit
1387b4f
·
1 Parent(s): 7d03026

postprocessのUI整理

Browse files
Files changed (2) hide show
  1. index.html +110 -90
  2. styles.css +39 -0
index.html CHANGED
@@ -1,91 +1,111 @@
1
- <!DOCTYPE html>
2
- <html lang="ja">
3
-
4
- <head>
5
- <meta charset="UTF-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>ロゴジェネレーター</title>
8
- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
9
- <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP" rel="stylesheet">
10
- <link href="styles.css" rel="stylesheet">
11
- <script type="module" src="effects.js"></script>
12
- <script type="module" src="index.js"></script>
13
- </head>
14
-
15
- <body>
16
- <div class="container py-5">
17
- <div class="row justify-content-center">
18
- <div class="col-md-8">
19
- <div class="card">
20
- <div class="card-header">
21
- <h2 class="h4 mb-0">ロゴジェネレーター</h2>
22
- </div>
23
- <div class="card-body">
24
- <div class="mb-3">
25
- <label for="textInput" class="form-label">テキスト</label>
26
- <textarea class="form-control" id="textInput" rows="3" placeholder="テキストを入力してください">プレビュー</textarea>
27
- </div>
28
-
29
- <div class="mb-3">
30
- <label for="googleFontInput" class="form-label">フォント</label>
31
- <div class="row g-2 mb-2">
32
- <div class="col">
33
- <div class="btn-group w-100 flex-wrap gap-1" role="group" id="fontTagFilter">
34
- <!-- フィルターボタンはJavaScriptで動的に生成されます -->
35
- </div>
36
- </div>
37
- </div>
38
- <div id="noFontsMessage" class="alert alert-danger mb-2" style="display: none;">
39
- 選択した条件に一致するフォントが見つかりませんでした
40
- </div>
41
- <select name="googleFontInput" class="form-select" id="googleFontInput">
42
- </select>
43
- </div>
44
-
45
- <div class="mb-3 d-none">
46
- <label for="fontSize" class="form-label">フォントサイズ</label>
47
- <input type="number" class="form-control" id="fontSize" value="128" min="8" max="128">
48
- </div>
49
-
50
- <div class="mb-3 form-switch">
51
- <input type="checkbox" class="form-check-input" id="verticalText" role="switch">
52
- <label class="form-check-label" for="verticalText">縦書き</label>
53
- </div>
54
-
55
- <div class="mb-3" id="verticalSpacingContainer" style="display: none;">
56
- <label for="verticalSpacing" class="form-label">文字間隔</label>
57
- <input type="range" class="form-range" id="verticalSpacing" min="1" max="2" step="0.1" value="1.3">
58
- <div class="text-center">
59
- <span id="verticalSpacingValue">1.3</span>
60
- </div>
61
- </div>
62
-
63
- <div class="mb-3">
64
- <label class="form-label">ポストプロセス</label>
65
- <div class="btn-group w-100 flex-wrap gap-1" role="group" id="postProcessContainer">
66
- <div class="btn-check-wrapper">
67
- <input type="checkbox" class="btn-check" name="postProcess" id="postProcessDummy" value="dummy">
68
- <label class="btn btn-outline-success" for="postProcessDummy">
69
- ダミー
70
- </label>
71
- </div>
72
- <div class="btn-check-wrapper">
73
- <input type="checkbox" class="btn-check" name="postProcess" id="postProcessInvert" value="invert">
74
- <label class="btn btn-outline-success" for="postProcessInvert">
75
- 色反転
76
- </label>
77
- </div>
78
- </div>
79
- </div>
80
-
81
- <div class="effect-grid">
82
- <!-- プリセットギャラリーはJavaScriptで動的に追加されます -->
83
- </div>
84
- </div>
85
- </div>
86
- </div>
87
- </div>
88
- </div>
89
- </body>
90
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
91
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="ja">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>ロゴジェネレーター</title>
8
+ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
9
+ <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP" rel="stylesheet">
10
+ <link href="styles.css" rel="stylesheet">
11
+ <script type="module" src="effects.js"></script>
12
+ <script type="module" src="index.js"></script>
13
+ </head>
14
+
15
+ <body>
16
+ <div class="container py-5">
17
+ <div class="row justify-content-center">
18
+ <div class="col-md-8">
19
+ <div class="card">
20
+ <div class="card-header">
21
+ <h2 class="h4 mb-0">ロゴジェネレーター</h2>
22
+ </div>
23
+ <div class="card-body">
24
+ <div class="mb-3">
25
+ <label for="textInput" class="form-label">テキスト</label>
26
+ <textarea class="form-control" id="textInput" rows="3" placeholder="テキストを入力してください">プレビュー</textarea>
27
+ </div>
28
+
29
+ <div class="mb-3">
30
+ <label for="googleFontInput" class="form-label">フォント</label>
31
+ <div class="row g-2 mb-2">
32
+ <div class="col">
33
+ <div class="btn-group w-100 flex-wrap gap-1" role="group" id="fontTagFilter">
34
+ <!-- フィルターボタンはJavaScriptで動的に生成されます -->
35
+ </div>
36
+ </div>
37
+ </div>
38
+ <div id="noFontsMessage" class="alert alert-danger mb-2" style="display: none;">
39
+ 選択した条件に一致するフォントが見つかりませんでした
40
+ </div>
41
+ <select name="googleFontInput" class="form-select" id="googleFontInput">
42
+ </select>
43
+ </div>
44
+
45
+ <div class="mb-3 d-none">
46
+ <label for="fontSize" class="form-label">フォントサイズ</label>
47
+ <input type="number" class="form-control" id="fontSize" value="128" min="8" max="128">
48
+ </div>
49
+
50
+ <div class="mb-3 form-switch">
51
+ <input type="checkbox" class="form-check-input" id="verticalText" role="switch">
52
+ <label class="form-check-label" for="verticalText">縦書き</label>
53
+ </div>
54
+
55
+ <div class="mb-3" id="verticalSpacingContainer" style="display: none;">
56
+ <label for="verticalSpacing" class="form-label">文字間隔</label>
57
+ <input type="range" class="form-range" id="verticalSpacing" min="1" max="2" step="0.1" value="1.3">
58
+ <div class="text-center">
59
+ <span id="verticalSpacingValue">1.3</span>
60
+ </div>
61
+ </div>
62
+
63
+ <div class="mb-3">
64
+ <label class="form-label">ポストプロセス</label>
65
+ <div class="row g-2" id="postProcessContainer">
66
+ <!-- ダミー -->
67
+ <div class="col-md-6 col-lg-4">
68
+ <div class="card h-100">
69
+ <div class="card-header d-flex align-items-center">
70
+ <div class="form-check mb-0">
71
+ <input type="checkbox" class="form-check-input" name="postProcess" id="postProcessDummy" value="dummy">
72
+ <label class="form-check-label" for="postProcessDummy">
73
+ ダミー
74
+ </label>
75
+ </div>
76
+ </div>
77
+ <div class="card-body">
78
+ <p class="text-muted mb-0"><small>設定はありません</small></p>
79
+ </div>
80
+ </div>
81
+ </div>
82
+ <!-- 色反転 -->
83
+ <div class="col-md-6 col-lg-4">
84
+ <div class="card h-100">
85
+ <div class="card-header d-flex align-items-center">
86
+ <div class="form-check mb-0">
87
+ <input type="checkbox" class="form-check-input" name="postProcess" id="postProcessInvert" value="invert">
88
+ <label class="form-check-label" for="postProcessInvert">
89
+ 色反転
90
+ </label>
91
+ </div>
92
+ </div>
93
+ <div class="card-body">
94
+ <p class="text-muted mb-0"><small>設定はありません</small></p>
95
+ </div>
96
+ </div>
97
+ </div>
98
+ </div>
99
+ </div>
100
+
101
+ <div class="effect-grid">
102
+ <!-- プリセットギャラリーはJavaScriptで動的に追加されます -->
103
+ </div>
104
+ </div>
105
+ </div>
106
+ </div>
107
+ </div>
108
+ </div>
109
+ </body>
110
+
111
  </html>
styles.css CHANGED
@@ -177,4 +177,43 @@
177
  .btn-check:checked + .btn-outline-primary .tag-count,
178
  .btn-outline-primary:hover .tag-count {
179
  opacity: 1;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
180
  }
 
177
  .btn-check:checked + .btn-outline-primary .tag-count,
178
  .btn-outline-primary:hover .tag-count {
179
  opacity: 1;
180
+ }
181
+
182
+ /* ポストプロセスのスタイル */
183
+ #postProcessContainer .card {
184
+ border: 1px solid rgba(0,0,0,.125);
185
+ transition: border-color 0.2s ease-in-out;
186
+ }
187
+
188
+ #postProcessContainer .card:hover {
189
+ border-color: rgba(0,0,0,.3);
190
+ }
191
+
192
+ #postProcessContainer .card-header {
193
+ background-color: rgba(0,0,0,.03);
194
+ padding: 0.75rem 1rem;
195
+ }
196
+
197
+ #postProcessContainer .card-body {
198
+ padding: 1rem;
199
+ }
200
+
201
+ #postProcessContainer .form-check {
202
+ width: 100%;
203
+ }
204
+
205
+ #postProcessContainer .form-check-label {
206
+ font-weight: 500;
207
+ cursor: pointer;
208
+ }
209
+
210
+ #postProcessContainer .form-range {
211
+ margin-top: 0.5rem;
212
+ }
213
+
214
+ #postProcessContainer .range-value {
215
+ text-align: center;
216
+ font-size: 0.875rem;
217
+ color: #6c757d;
218
+ margin-top: 0.25rem;
219
  }