Hugging Face's logo

Spaces:
soiz1
/
format-code
Running

App Files Community
soiz1 commited on
Commit
c506a44
·
verified ·
1 Parent(s): ab258cd

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +784 -19
index.html CHANGED
@@ -1,19 +1,784 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ja">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>js-beautify 設定エディタ</title>
7
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.4/beautify.min.js"></script>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.4/beautify-css.min.js"></script>
9
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.4/beautify-html.min.js"></script>
10
+ <div id="google_translate_element" style="float:left; margin-left:2px; margin-top:-8px; width:158px; border:0px solid #fff;"></div>
11
+ <script type="text/javascript">function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: 'ja', includedLanguages: 'ar,bg,cs,da,de,el,en,es,fa,fi,fr,hi,hu,id,it,iw,ja,ko,ms,nl,no,pl,pt,ro,ru,sl,sv,th,tl,tr,uk,ur,vi,zh-CN,zh-TW', layout:google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');} </script>
12
+ <script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" async></script>
13
+ <style>
14
+ :root {
15
+ --primary-color: #4a6fa5;
16
+ --secondary-color: #f8f9fa;
17
+ --border-color: #dee2e6;
18
+ --hover-color: #e9ecef;
19
+ }
20
+
21
+ body {
22
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
23
+ line-height: 1.6;
24
+ color: #333;
25
+ max-width: 1200px;
26
+ margin: 0 auto;
27
+ padding: 20px;
28
+ background-color: #f5f5f5;
29
+ }
30
+
31
+ h1, h2, h3 {
32
+ color: var(--primary-color);
33
+ }
34
+
35
+ .container {
36
+ display: grid;
37
+ grid-template-columns: 1fr 1fr;
38
+ gap: 20px;
39
+ }
40
+
41
+ .panel {
42
+ background: white;
43
+ border-radius: 8px;
44
+ padding: 20px;
45
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
46
+ }
47
+
48
+ .section {
49
+ margin-bottom: 25px;
50
+ border-bottom: 1px solid var(--border-color);
51
+ padding-bottom: 15px;
52
+ }
53
+
54
+ .section:last-child {
55
+ border-bottom: none;
56
+ }
57
+
58
+ .form-group {
59
+ margin-bottom: 15px;
60
+ display: flex;
61
+ align-items: center;
62
+ }
63
+
64
+ label {
65
+ flex: 1;
66
+ margin-right: 10px;
67
+ font-size: 14px;
68
+ }
69
+
70
+ input, select {
71
+ padding: 8px;
72
+ border: 1px solid var(--border-color);
73
+ border-radius: 4px;
74
+ width: 100px;
75
+ }
76
+
77
+ .checkbox-group {
78
+ display: flex;
79
+ align-items: center;
80
+ }
81
+
82
+ .checkbox-group input {
83
+ width: auto;
84
+ margin-right: 5px;
85
+ }
86
+
87
+ .help-icon {
88
+ display: inline-block;
89
+ width: 18px;
90
+ height: 18px;
91
+ background-color: var(--primary-color);
92
+ color: white;
93
+ border-radius: 50%;
94
+ text-align: center;
95
+ line-height: 18px;
96
+ font-size: 12px;
97
+ margin-left: 8px;
98
+ cursor: help;
99
+ position: relative;
100
+ }
101
+
102
+ .tooltip {
103
+ position: absolute;
104
+ background-color: #333;
105
+ color: white;
106
+ padding: 8px;
107
+ border-radius: 4px;
108
+ font-size: 12px;
109
+ width: 250px;
110
+ z-index: 100;
111
+ bottom: 100%;
112
+ left: 50%;
113
+ transform: translateX(-50%);
114
+ margin-bottom: 5px;
115
+ visibility: hidden;
116
+ opacity: 0;
117
+ transition: opacity 0.3s;
118
+ }
119
+
120
+ .help-icon:hover .tooltip {
121
+ visibility: visible;
122
+ opacity: 1;
123
+ }
124
+
125
+ button {
126
+ background-color: var(--primary-color);
127
+ color: white;
128
+ border: none;
129
+ padding: 10px 15px;
130
+ border-radius: 4px;
131
+ cursor: pointer;
132
+ font-size: 14px;
133
+ transition: background-color 0.3s;
134
+ }
135
+
136
+ button:hover {
137
+ background-color: #3a5a80;
138
+ }
139
+
140
+ textarea {
141
+ width: 100%;
142
+ height: 300px;
143
+ padding: 10px;
144
+ border: 1px solid var(--border-color);
145
+ border-radius: 4px;
146
+ font-family: monospace;
147
+ resize: vertical;
148
+ }
149
+
150
+ .tab-container {
151
+ display: flex;
152
+ margin-bottom: 15px;
153
+ }
154
+
155
+ .tab {
156
+ padding: 8px 15px;
157
+ background-color: var(--secondary-color);
158
+ border: 1px solid var(--border-color);
159
+ border-bottom: none;
160
+ cursor: pointer;
161
+ border-radius: 4px 4px 0 0;
162
+ margin-right: 5px;
163
+ }
164
+
165
+ .tab.active {
166
+ background-color: white;
167
+ border-bottom: 1px solid white;
168
+ margin-bottom: -1px;
169
+ }
170
+
171
+ .tab-content {
172
+ display: none;
173
+ }
174
+
175
+ .tab-content.active {
176
+ display: block;
177
+ }
178
+
179
+ .json-viewer {
180
+ background-color: #f8f8f8;
181
+ padding: 10px;
182
+ border-radius: 4px;
183
+ border: 1px solid var(--border-color);
184
+ font-family: monospace;
185
+ white-space: pre-wrap;
186
+ max-height: 300px;
187
+ overflow-y: auto;
188
+ }
189
+
190
+ @media (max-width: 768px) {
191
+ .container {
192
+ grid-template-columns: 1fr;
193
+ }
194
+ }
195
+ </style>
196
+ </head>
197
+ <body>
198
+ <h1>js-beautify 設定エディタ <small>v1.15.4</small></h1>
199
+
200
+ <div class="container">
201
+ <div class="panel">
202
+ <h2>設定オプション</h2>
203
+
204
+ <div class="tab-container">
205
+ <div class="tab active" data-tab="common">共通オプション</div>
206
+ <div class="tab" data-tab="js">JavaScript</div>
207
+ <div class="tab" data-tab="css">CSS</div>
208
+ <div class="tab" data-tab="html">HTML</div>
209
+ </div>
210
+
211
+ <div id="common" class="tab-content active">
212
+ <div class="section">
213
+ <h3>基本設定</h3>
214
+
215
+ <div class="form-group">
216
+ <label>
217
+ indent_size (インデントのスペース数)
218
+ <span class="help-icon">?
219
+ <span class="tooltip">インデントに使用するスペースの数。デフォルトは4。</span>
220
+ </span>
221
+ </label>
222
+ <input type="number" id="indent_size" value="4" min="1" max="8">
223
+ </div>
224
+
225
+ <div class="form-group">
226
+ <label>
227
+ indent_char (インデント文字)
228
+ <span class="help-icon">?
229
+ <span class="tooltip">インデントに使用する文字（スペースまたはタブ）。デフォルトはスペース。</span>
230
+ </span>
231
+ </label>
232
+ <select id="indent_char">
233
+ <option value=" " selected>スペース</option>
234
+ <option value="\t">タブ</option>
235
+ </select>
236
+ </div>
237
+
238
+ <div class="form-group">
239
+ <label>
240
+ indent_with_tabs (タブでインデント)
241
+ <span class="help-icon">?
242
+ <span class="tooltip">trueにするとタブでインデントします。デフォルトはfalse。</span>
243
+ </span>
244
+ </label>
245
+ <div class="checkbox-group">
246
+ <input type="checkbox" id="indent_with_tabs">
247
+ </div>
248
+ </div>
249
+
250
+ <div class="form-group">
251
+ <label>
252
+ editorconfig (.editorconfig 参照)
253
+ <span class="help-icon">?
254
+ <span class="tooltip">trueにすると.editorconfigファイルを参照します。デフォルトはfalse。</span>
255
+ </span>
256
+ </label>
257
+ <div class="checkbox-group">
258
+ <input type="checkbox" id="editorconfig">
259
+ </div>
260
+ </div>
261
+
262
+ <div class="form-group">
263
+ <label>
264
+ eol (改行文字)
265
+ <span class="help-icon">?
266
+ <span class="tooltip">使用する改行文字（例: "\n"）。デフォルトは"\n"。</span>
267
+ </span>
268
+ </label>
269
+ <select id="eol">
270
+ <option value="\n" selected>\n (LF)</option>
271
+ <option value="\r\n">\r\n (CRLF)</option>
272
+ </select>
273
+ </div>
274
+
275
+ <div class="form-group">
276
+ <label>
277
+ end_with_newline (ファイル末尾に改行追加)
278
+ <span class="help-icon">?
279
+ <span class="tooltip">trueにするとファイルの最後に改行を追加します。デフォルトはfalse。</span>
280
+ </span>
281
+ </label>
282
+ <div class="checkbox-group">
283
+ <input type="checkbox" id="end_with_newline">
284
+ </div>
285
+ </div>
286
+ </div>
287
+
288
+ <div class="section">
289
+ <h3>改行設定</h3>
290
+
291
+ <div class="form-group">
292
+ <label>
293
+ preserve_newlines (元の改行保持)
294
+ <span class="help-icon">?
295
+ <span class="tooltip">trueにすると元の改行を保持します。デフォルトはtrue。</span>
296
+ </span>
297
+ </label>
298
+ <div class="checkbox-group">
299
+ <input type="checkbox" id="preserve_newlines" checked>
300
+ </div>
301
+ </div>
302
+
303
+ <div class="form-group">
304
+ <label>
305
+ max_preserve_newlines (改行の最大保持数)
306
+ <span class="help-icon">?
307
+ <span class="tooltip">連続する改行の最大保持数。デフォルトは10。</span>
308
+ </span>
309
+ </label>
310
+ <input type="number" id="max_preserve_newlines" value="10" min="1" max="100">
311
+ </div>
312
+
313
+ <div class="form-group">
314
+ <label>
315
+ indent_empty_lines (空行にもインデント付加)
316
+ <span class="help-icon">?
317
+ <span class="tooltip">trueにすると空行にもインデントを追加します。デフォルトはfalse。</span>
318
+ </span>
319
+ </label>
320
+ <div class="checkbox-group">
321
+ <input type="checkbox" id="indent_empty_lines">
322
+ </div>
323
+ </div>
324
+ </div>
325
+
326
+ <div class="section">
327
+ <h3>スペース設定</h3>
328
+
329
+ <div class="form-group">
330
+ <label>
331
+ space_in_paren (括弧内スペース)
332
+ <span class="help-icon">?
333
+ <span class="tooltip">trueにすると括弧内にスペースを追加します。デフォルトはfalse。</span>
334
+ </span>
335
+ </label>
336
+ <div class="checkbox-group">
337
+ <input type="checkbox" id="space_in_paren">
338
+ </div>
339
+ </div>
340
+
341
+ <div class="form-group">
342
+ <label>
343
+ space_in_empty_paren (空括弧内スペース)
344
+ <span class="help-icon">?
345
+ <span class="tooltip">trueにすると空の括弧内にスペースを追加します。デフォルトはfalse。</span>
346
+ </span>
347
+ </label>
348
+ <div class="checkbox-group">
349
+ <input type="checkbox" id="space_in_empty_paren">
350
+ </div>
351
+ </div>
352
+
353
+ <div class="form-group">
354
+ <label>
355
+ space_after_anon_function (無名関数の後にスペース)
356
+ <span class="help-icon">?
357
+ <span class="tooltip">trueにすると無名関数の後にスペースを追加します。デフォルトはfalse。</span>
358
+ </span>
359
+ </label>
360
+ <div class="checkbox-group">
361
+ <input type="checkbox" id="space_after_anon_function">
362
+ </div>
363
+ </div>
364
+
365
+ <div class="form-group">
366
+ <label>
367
+ space_after_named_function (名前付き関数の後にスペース)
368
+ <span class="help-icon">?
369
+ <span class="tooltip">trueにすると名前付き関数の後にスペースを追加します。デフォルトはfalse。</span>
370
+ </span>
371
+ </label>
372
+ <div class="checkbox-group">
373
+ <input type="checkbox" id="space_after_named_function">
374
+ </div>
375
+ </div>
376
+ </div>
377
+
378
+ <div class="section">
379
+ <h3>その他の設定</h3>
380
+
381
+ <div class="form-group">
382
+ <label>
383
+ jslint_happy (JSLint互換フォーマット)
384
+ <span class="help-icon">?
385
+ <span class="tooltip">trueにするとJSLint互換のフォーマットになります。デフォルトはfalse。</span>
386
+ </span>
387
+ </label>
388
+ <div class="checkbox-group">
389
+ <input type="checkbox" id="jslint_happy">
390
+ </div>
391
+ </div>
392
+
393
+ <div class="form-group">
394
+ <label>
395
+ unescape_strings (文字列のエスケープ解除)
396
+ <span class="help-icon">?
397
+ <span class="tooltip">trueにすると文字列のエスケープを解除します。デフォルトはfalse。</span>
398
+ </span>
399
+ </label>
400
+ <div class="checkbox-group">
401
+ <input type="checkbox" id="unescape_strings">
402
+ </div>
403
+ </div>
404
+
405
+ <div class="form-group">
406
+ <label>
407
+ wrap_line_length (1行の最大長)
408
+ <span class="help-icon">?
409
+ <span class="tooltip">1行の最大文字数。0は無制限。デフォルトは0。</span>
410
+ </span>
411
+ </label>
412
+ <input type="number" id="wrap_line_length" value="0" min="0" max="500">
413
+ </div>
414
+
415
+ <div class="form-group">
416
+ <label>
417
+ comma_first (カンマを行頭に移動)
418
+ <span class="help-icon">?
419
+ <span class="tooltip">trueにするとカンマを行頭に移動します。デフォルトはfalse。</span>
420
+ </span>
421
+ </label>
422
+ <div class="checkbox-group">
423
+ <input type="checkbox" id="comma_first">
424
+ </div>
425
+ </div>
426
+ </div>
427
+ </div>
428
+
429
+ <div id="js" class="tab-content">
430
+ <div class="section">
431
+ <h3>JavaScript 設定</h3>
432
+
433
+ <div class="form-group">
434
+ <label>
435
+ brace_style ({} のスタイル)
436
+ <span class="help-icon">?
437
+ <span class="tooltip">"collapse" (デフォルト), "expand", "end-expand", "none" のいずれか</span>
438
+ </span>
439
+ </label>
440
+ <select id="js_brace_style">
441
+ <option value="collapse" selected>collapse</option>
442
+ <option value="expand">expand</option>
443
+ <option value="end-expand">end-expand</option>
444
+ <option value="none">none</option>
445
+ </select>
446
+ </div>
447
+
448
+ <div class="form-group">
449
+ <label>
450
+ unindent_chained_methods (チェーンメソッドのインデント抑制)
451
+ <span class="help-icon">?
452
+ <span class="tooltip">trueにするとチェーンメソッドのインデントを抑制します。デフォルトはfalse。</span>
453
+ </span>
454
+ </label>
455
+ <div class="checkbox-group">
456
+ <input type="checkbox" id="unindent_chained_methods">
457
+ </div>
458
+ </div>
459
+
460
+ <div class="form-group">
461
+ <label>
462
+ break_chained_methods (チェーンメソッドを改行)
463
+ <span class="help-icon">?
464
+ <span class="tooltip">trueにするとチェーンメソッドを改���します。デフォルトはfalse。</span>
465
+ </span>
466
+ </label>
467
+ <div class="checkbox-group">
468
+ <input type="checkbox" id="break_chained_methods">
469
+ </div>
470
+ </div>
471
+
472
+ <div class="form-group">
473
+ <label>
474
+ keep_array_indentation (配列のインデントを保持)
475
+ <span class="help-icon">?
476
+ <span class="tooltip">trueにすると配列のインデントを保持します。デフォルトはfalse。</span>
477
+ </span>
478
+ </label>
479
+ <div class="checkbox-group">
480
+ <input type="checkbox" id="keep_array_indentation">
481
+ </div>
482
+ </div>
483
+
484
+ <div class="form-group">
485
+ <label>
486
+ operator_position (演算子の配置)
487
+ <span class="help-icon">?
488
+ <span class="tooltip">"before-newline" (デフォルト), "after-newline", "preserve-newline" のいずれか</span>
489
+ </span>
490
+ </label>
491
+ <select id="operator_position">
492
+ <option value="before-newline" selected>before-newline</option>
493
+ <option value="after-newline">after-newline</option>
494
+ <option value="preserve-newline">preserve-newline</option>
495
+ </select>
496
+ </div>
497
+ </div>
498
+ </div>
499
+
500
+ <div id="css" class="tab-content">
501
+ <div class="section">
502
+ <h3>CSS 設定</h3>
503
+
504
+ <div class="form-group">
505
+ <label>
506
+ brace_style ({} の配置)
507
+ <span class="help-icon">?
508
+ <span class="tooltip">CSS用の{}配置スタイル</span>
509
+ </span>
510
+ </label>
511
+ <select id="css_brace_style">
512
+ <option value="collapse" selected>collapse</option>
513
+ <option value="expand">expand</option>
514
+ </select>
515
+ </div>
516
+
517
+ <div class="form-group">
518
+ <label>
519
+ selector_separator_newline (セレクタ間の改行)
520
+ <span class="help-icon">?
521
+ <span class="tooltip">trueにするとセレクタ間で改行します。デフォルトはtrue。</span>
522
+ </span>
523
+ </label>
524
+ <div class="checkbox-group">
525
+ <input type="checkbox" id="selector_separator_newline" checked>
526
+ </div>
527
+ </div>
528
+
529
+ <div class="form-group">
530
+ <label>
531
+ newline_between_rules (ルール間の改行)
532
+ <span class="help-icon">?
533
+ <span class="tooltip">trueにするとCSSルール間で改行します。デフォルトはtrue。</span>
534
+ </span>
535
+ </label>
536
+ <div class="checkbox-group">
537
+ <input type="checkbox" id="newline_between_rules" checked>
538
+ </div>
539
+ </div>
540
+ </div>
541
+ </div>
542
+
543
+ <div id="html" class="tab-content">
544
+ <div class="section">
545
+ <h3>HTML 設定</h3>
546
+
547
+ <div class="form-group">
548
+ <label>
549
+ indent_inner_html (&lt;body&gt;内のインデント)
550
+ <span class="help-icon">?
551
+ <span class="tooltip">trueにするとbodyタグ内をインデントします。デフォルトはfalse。</span>
552
+ </span>
553
+ </label>
554
+ <div class="checkbox-group">
555
+ <input type="checkbox" id="indent_inner_html">
556
+ </div>
557
+ </div>
558
+
559
+ <div class="form-group">
560
+ <label>
561
+ indent_scripts (スクリプトのインデント方法)
562
+ <span class="help-icon">?
563
+ <span class="tooltip>"normal", "keep", "separate" のいずれか</span>
564
+ </span>
565
+ </label>
566
+ <select id="indent_scripts">
567
+ <option value="normal" selected>normal</option>
568
+ <option value="keep">keep</option>
569
+ <option value="separate">separate</option>
570
+ </select>
571
+ </div>
572
+
573
+ <div class="form-group">
574
+ <label>
575
+ wrap_attributes (属性の折り返し)
576
+ <span class="help-icon">?
577
+ <span class="tooltip>"auto", "force", "force-aligned", "force-expand-multiline", "aligned-multiple", "preserve", "preserve-aligned" のいずれか</span>
578
+ </span>
579
+ </label>
580
+ <select id="wrap_attributes">
581
+ <option value="auto" selected>auto</option>
582
+ <option value="force">force</option>
583
+ <option value="force-aligned">force-aligned</option>
584
+ <option value="force-expand-multiline">force-expand-multiline</option>
585
+ <option value="aligned-multiple">aligned-multiple</option>
586
+ <option value="preserve">preserve</option>
587
+ <option value="preserve-aligned">preserve-aligned</option>
588
+ </select>
589
+ </div>
590
+
591
+ <div class="form-group">
592
+ <label>
593
+ wrap_attributes_min_attrs (折り返し最小属性数)
594
+ <span class="help-icon">?
595
+ <span class="tooltip">この数以上の属性がある場合に折り返します。デフォルトは2。</span>
596
+ </span>
597
+ </label>
598
+ <input type="number" id="wrap_attributes_min_attrs" value="2" min="1" max="10">
599
+ </div>
600
+
601
+ <div class="form-group">
602
+ <label>
603
+ extra_liners (改行追加対象タグ)
604
+ <span class="help-icon">?
605
+ <span class="tooltip">これらのタグの前後に改行を追加します。カンマ区切りで指定。</span>
606
+ </span>
607
+ </label>
608
+ <input type="text" id="extra_liners" value="head,body,/html">
609
+ </div>
610
+ </div>
611
+ </div>
612
+
613
+ <button id="generate-json">設定を生成</button>
614
+ <button id="reset-settings">リセット</button>
615
+ </div>
616
+
617
+ <div class="panel">
618
+ <h2>設定プレビュー</h2>
619
+
620
+ <div class="section">
621
+ <h3>生成された設定JSON</h3>
622
+ <div id="json-preview" class="json-viewer">設定を生成してください...</div>
623
+ </div>
624
+
625
+ <div class="section">
626
+ <h3>コードテスト</h3>
627
+ <label for="test-code">テストコード:</label>
628
+ <textarea id="test-code" placeholder="ここにテストコードを入力..."></textarea>
629
+
630
+ <div class="form-group">
631
+ <label for="test-type">コードタイプ:</label>
632
+ <select id="test-type">
633
+ <option value="js">JavaScript</option>
634
+ <option value="css">CSS</option>
635
+ <option value="html">HTML</option>
636
+ </select>
637
+ <button id="test-beautify">整形テスト</button>
638
+ </div>
639
+
640
+ <label for="test-result">結果:</label>
641
+ <textarea id="test-result" readonly></textarea>
642
+ </div>
643
+ </div>
644
+ </div>
645
+
646
+ <script>
647
+ // タブ切り替え
648
+ document.querySelectorAll('.tab').forEach(tab => {
649
+ tab.addEventListener('click', () => {
650
+ document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
651
+ document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
652
+
653
+ tab.classList.add('active');
654
+ document.getElementById(tab.dataset.tab).classList.add('active');
655
+ });
656
+ });
657
+
658
+ // 設定生成
659
+ document.getElementById('generate-json').addEventListener('click', () => {
660
+ const options = {
661
+ indent_size: parseInt(document.getElementById('indent_size').value),
662
+ indent_char: document.getElementById('indent_char').value,
663
+ indent_with_tabs: document.getElementById('indent_with_tabs').checked,
664
+ editorconfig: document.getElementById('editorconfig').checked,
665
+ eol: document.getElementById('eol').value,
666
+ end_with_newline: document.getElementById('end_with_newline').checked,
667
+ preserve_newlines: document.getElementById('preserve_newlines').checked,
668
+ max_preserve_newlines: parseInt(document.getElementById('max_preserve_newlines').value),
669
+ indent_empty_lines: document.getElementById('indent_empty_lines').checked,
670
+ space_in_paren: document.getElementById('space_in_paren').checked,
671
+ space_in_empty_paren: document.getElementById('space_in_empty_paren').checked,
672
+ jslint_happy: document.getElementById('jslint_happy').checked,
673
+ space_after_anon_function: document.getElementById('space_after_anon_function').checked,
674
+ space_after_named_function: document.getElementById('space_after_named_function').checked,
675
+ unescape_strings: document.getElementById('unescape_strings').checked,
676
+ wrap_line_length: parseInt(document.getElementById('wrap_line_length').value),
677
+ comma_first: document.getElementById('comma_first').checked,
678
+ operator_position: document.getElementById('operator_position').value,
679
+
680
+ js: {
681
+ brace_style: document.getElementById('js_brace_style').value,
682
+ unindent_chained_methods: document.getElementById('unindent_chained_methods').checked,
683
+ break_chained_methods: document.getElementById('break_chained_methods').checked,
684
+ keep_array_indentation: document.getElementById('keep_array_indentation').checked
685
+ },
686
+
687
+ css: {
688
+ brace_style: document.getElementById('css_brace_style').value,
689
+ selector_separator_newline: document.getElementById('selector_separator_newline').checked,
690
+ newline_between_rules: document.getElementById('newline_between_rules').checked
691
+ },
692
+
693
+ html: {
694
+ indent_inner_html: document.getElementById('indent_inner_html').checked,
695
+ indent_scripts: document.getElementById('indent_scripts').value,
696
+ wrap_attributes: document.getElementById('wrap_attributes').value,
697
+ wrap_attributes_min_attrs: parseInt(document.getElementById('wrap_attributes_min_attrs').value),
698
+ extra_liners: document.getElementById('extra_liners').value.split(',').map(s => s.trim())
699
+ }
700
+ };
701
+
702
+ document.getElementById('json-preview').textContent = JSON.stringify(options, null, 2);
703
+ });
704
+
705
+ // リセット
706
+ document.getElementById('reset-settings').addEventListener('click', () => {
707
+ // 共通オプション
708
+ document.getElementById('indent_size').value = 4;
709
+ document.getElementById('indent_char').value = ' ';
710
+ document.getElementById('indent_with_tabs').checked = false;
711
+ document.getElementById('editorconfig').checked = false;
712
+ document.getElementById('eol').value = '\n';
713
+ document.getElementById('end_with_newline').checked = false;
714
+ document.getElementById('preserve_newlines').checked = true;
715
+ document.getElementById('max_preserve_newlines').value = 10;
716
+ document.getElementById('indent_empty_lines').checked = false;
717
+ document.getElementById('space_in_paren').checked = false;
718
+ document.getElementById('space_in_empty_paren').checked = false;
719
+ document.getElementById('jslint_happy').checked = false;
720
+ document.getElementById('space_after_anon_function').checked = false;
721
+ document.getElementById('space_after_named_function').checked = false;
722
+ document.getElementById('unescape_strings').checked = false;
723
+ document.getElementById('wrap_line_length').value = 0;
724
+ document.getElementById('comma_first').checked = false;
725
+ document.getElementById('operator_position').value = 'before-newline';
726
+
727
+ // JSオプション
728
+ document.getElementById('js_brace_style').value = 'collapse';
729
+ document.getElementById('unindent_chained_methods').checked = false;
730
+ document.getElementById('break_chained_methods').checked = false;
731
+ document.getElementById('keep_array_indentation').checked = false;
732
+
733
+ // CSSオプション
734
+ document.getElementById('css_brace_style').value = 'collapse';
735
+ document.getElementById('selector_separator_newline').checked = true;
736
+ document.getElementById('newline_between_rules').checked = true;
737
+
738
+ // HTMLオプション
739
+ document.getElementById('indent_inner_html').checked = false;
740
+ document.getElementById('indent_scripts').value = 'normal';
741
+ document.getElementById('wrap_attributes').value = 'auto';
742
+ document.getElementById('wrap_attributes_min_attrs').value = 2;
743
+ document.getElementById('extra_liners').value = 'head,body,/html';
744
+
745
+ document.getElementById('json-preview').textContent = '設定をリセットしました。再度生成してください...';
746
+ });
747
+
748
+ // 整形テスト
749
+ document.getElementById('test-beautify').addEventListener('click', () => {
750
+ const code = document.getElementById('test-code').value;
751
+ const type = document.getElementById('test-type').value;
752
+
753
+ if (!code.trim()) {
754
+ alert('テストコードを入力してください');
755
+ return;
756
+ }
757
+
758
+ try {
759
+ const options = JSON.parse(document.getElementById('json-preview').textContent);
760
+ let result;
761
+
762
+ switch (type) {
763
+ case 'js':
764
+ result = js_beautify(code, options);
765
+ break;
766
+ case 'css':
767
+ result = css_beautify(code, options);
768
+ break;
769
+ case 'html':
770
+ result = html_beautify(code, options);
771
+ break;
772
+ default:
773
+ result = '無効なコードタイプ';
774
+ }
775
+
776
+ document.getElementById('test-result').value = result;
777
+ } catch (e) {
778
+ alert('まず設定を生成してください');
779
+ console.error(e);
780
+ }
781
+ });
782
+ </script>
783
+ </body>
784
+ </html>