-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
1550 lines (1459 loc) · 118 KB
/
Copy pathindex.html
File metadata and controls
1550 lines (1459 loc) · 118 KB
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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ㄚ亮笑長的內容創作助手</title>
<link rel="icon" href="images/Aliang.png" type="image/png">
<script src="https://cdn.tailwindcss.com"></script>
<!-- ########## NEW: QUILL.JS EDITOR LIBS ########## -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<!-- ########## END NEW ########## -->
<link rel="stylesheet" href="css/style.css">
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
</head>
<body class="font-sans flex flex-col min-h-screen">
<!-- 歡迎頁面入口 -->
<div id="welcome-portal" class="welcome-portal flex flex-col items-center justify-center min-h-screen p-4 select-none">
<!-- 背景漸層發光特效 -->
<div class="portal-bg-glow glow-1"></div>
<div class="portal-bg-glow glow-2"></div>
<div class="portal-container w-full max-w-4xl text-center z-10 flex flex-col items-center gap-6">
<!-- 品牌 Branding -->
<div class="flex items-center justify-center gap-4 mb-2">
<div class="h-20 w-20 bg-white rounded-2xl flex items-center justify-center p-1.5 shadow-2xl shrink-0">
<img src="images/Aliang.png" alt="ㄚ亮笑長 Logo" class="h-full w-full rounded-xl object-contain">
</div>
<h1 class="text-2xl md:text-4xl lg:text-5xl font-extrabold tracking-wide text-white whitespace-nowrap">
ㄚ亮笑長的內容創作助手
</h1>
</div>
<p class="text-lg text-gray-300 max-w-2xl leading-relaxed mb-4">
歡迎使用全方位 AI 數位內容創作助手！一鍵將影片字幕稿整理為部落格文章、社群貼文、電子報、輪播圖與資訊圖表規劃，大幅提升您的創作效率。
</p>
<!-- API 金鑰狀態卡片 -->
<div id="portal-key-status-box" class="portal-key-card p-3 rounded-xl border flex items-center justify-center gap-3 transition-all duration-300 border-red-500/20 bg-red-500/5 text-red-300 text-sm">
<span class="inline-block w-2.5 h-2.5 rounded-full bg-red-500 shrink-0"></span>
<span id="portal-key-status-text" class="font-bold">金鑰尚未設定，請先進行設定以啟用 AI 功能</span>
<button id="portal-key-setting-btn" class="py-1 px-3 rounded text-xs bg-red-500/25 hover:bg-red-500/40 text-red-200 border border-red-500/30 transition-all">
設定金鑰
</button>
</div>
<!-- 六大特色導覽網格 -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 w-full mt-4">
<div class="portal-card p-5 rounded-xl border border-white/5 bg-white/5 text-left flex flex-col gap-2">
<div class="flex items-center gap-2">
<span class="text-2xl text-[#f97316]">📝</span>
<h3 class="font-bold text-white text-base">逐字稿整理與優化</h3>
</div>
<p class="text-xs text-gray-400 leading-normal">智慧修正錯字、補全標點符號、合併段落，並快速產生影片摘要與精緻章節。</p>
</div>
<div class="portal-card p-5 rounded-xl border border-white/5 bg-white/5 text-left flex flex-col gap-2">
<div class="flex items-center gap-2">
<span class="text-2xl text-[#3b82f6]">✍️</span>
<h3 class="font-bold text-white text-base">部落格文章生成</h3>
</div>
<p class="text-xs text-gray-400 leading-normal">將逐字稿一鍵轉換為符合 SEO 的結構化部落格文章，支援進階內部連結與關鍵字分析。</p>
</div>
<div class="portal-card p-5 rounded-xl border border-white/5 bg-white/5 text-left flex flex-col gap-2">
<div class="flex items-center gap-2">
<span class="text-2xl text-[#22c55e]">📱</span>
<h3 class="font-bold text-white text-base">多平台社群貼文</h3>
</div>
<p class="text-xs text-gray-400 leading-normal">針對 Facebook、Instagram、Threads、LinkedIn 平台風格生成合適的社群文案與風格。</p>
</div>
<div class="portal-card p-5 rounded-xl border border-white/5 bg-white/5 text-left flex flex-col gap-2">
<div class="flex items-center gap-2">
<span class="text-2xl text-[#a855f7]">✉️</span>
<h3 class="font-bold text-white text-base">行銷電子報 (EDM)</h3>
</div>
<p class="text-xs text-gray-400 leading-normal">自動精煉文章精華，生成具備點擊誘因的主旨與精緻 HTML 電子報版型文案。</p>
</div>
<div class="portal-card p-5 rounded-xl border border-white/5 bg-white/5 text-left flex flex-col gap-2">
<div class="flex items-center gap-2">
<span class="text-2xl text-[#eab308]">🎨</span>
<h3 class="font-bold text-white text-base">社群輪播圖提示詞</h3>
</div>
<p class="text-xs text-gray-400 leading-normal">自動為輪播圖的多個頁面規劃視覺構圖、文字內容與 AI 繪圖提示詞 (Prompt)。</p>
</div>
<div class="portal-card p-5 rounded-xl border border-white/5 bg-white/5 text-left flex flex-col gap-2">
<div class="flex items-center gap-2">
<span class="text-2xl text-[#f43f5e]">📊</span>
<h3 class="font-bold text-white text-base">資訊圖表規劃結構</h3>
</div>
<p class="text-xs text-gray-400 leading-normal">深度分析文稿，為您規劃出適合製作成 Infographic 的資訊結構報告與繪圖提示詞。</p>
</div>
</div>
<!-- 下方主要動作按鈕區 -->
<div id="portal-cta-group" class="flex flex-col md:flex-row gap-3 mt-6">
<button id="portal-start-btn" class="font-bold py-3 px-8 rounded-xl bg-[#f97316] text-[#341100] hover:brightness-110 shadow-lg text-base transition-all duration-200">
開始全新創作
</button>
<button id="portal-resume-btn" class="font-bold py-3 px-8 rounded-xl bg-white/10 hover:bg-white/20 text-white border border-white/10 shadow-lg text-base transition-all duration-200 hidden">
繼續上次編輯
</button>
</div>
</div>
</div>
<!-- 主應用容器 -->
<div id="main-app-container" class="hidden">
<div class="container mx-auto p-4 md:p-8 flex-grow">
<header class="relative flex flex-col items-center justify-center mb-8">
<div class="flex items-center justify-center">
<img src="images/Aliang.png" alt="丫亮笑長 Logo" class="h-20 w-20 mr-4 flex-shrink-0">
<h1 class="text-5xl font-bold heading-color">ㄚ亮笑長的內容創作助手<sup
class="text-2xl align-super text-[var(--link-color)] blink-effect">AI</sup></h1>
</div>
<p class="mt-2 text-base">您的全方位數位內容創作夥伴</p>
<div class="header-actions">
<p id="api-key-status" class="text-sm">狀態：尚未設定</p>
<button id="api-key-btn" class="header-icon-btn" title="API Key 設定">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H5v-2H3v-2H1v-4a6 6 0 0110.257-4.257" />
</svg>
</button>
</div>
</header>
<div class="w-full rounded-lg shadow-lg main-card">
<div class="flex border-b border-[var(--card-border)]">
<button id="tab1-btn" class="tab-btn active" data-tab="tab1">1. 內容整理與優化</button>
<button id="tab2-btn" class="tab-btn" data-tab="tab2" title="請先在分頁 1 輸入內容並設定 API Key">2.
部落格文章生成<span id="tab2-dot" class="notification-dot hidden"></span></button>
<button id="tab3-btn" class="tab-btn" data-tab="tab3" title="請先在分頁 1 輸入內容並設定 API Key">3.
社群貼文生成<span id="tab3-dot" class="notification-dot hidden"></span></button>
<button id="tab4-btn" class="tab-btn" data-tab="tab4" title="請先在分頁 1 輸入內容並設定 API Key">4.
電子報內容生成<span id="tab4-dot" class="notification-dot hidden"></span></button>
<button id="tab5-btn" class="tab-btn" data-tab="tab5" title="請先在分頁 1 輸入內容並設定 API Key">5.
社群輪播圖提示詞<span id="tab5-dot" class="notification-dot hidden"></span></button>
<button id="tab6-btn" class="tab-btn" data-tab="tab6" title="請先在分頁 1 輸入內容並設定 API Key">6.
資訊圖表提示詞<span id="tab6-dot" class="notification-dot hidden"></span></button>
</div>
<div class="p-6">
<div id="tab1" class="tab-content">
<div class="flex flex-col space-y-4">
<div class="flex flex-col h-[400px]">
<div class="flex items-baseline flex-shrink-0 mb-2">
<h3 class="text-lg font-semibold heading-color">原始內容</h3>
<button id="toggle-subtitle-help-btn"
class="text-sm ml-2 text-[var(--link-color)] hover:underline flex items-center focus:outline-none">
<span>如何取得字幕？</span>
<svg xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 ml-1 transition-transform duration-200" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 9l-7 7-7-7" />
</svg>
</button>
</div>
<!-- 字幕教學折疊面板 -->
<div id="subtitle-help-panel"
class="hidden bg-[var(--gray-bg)] p-4 rounded-md border border-[var(--card-border)] mb-3 text-sm shadow-inner transition-all duration-300">
<!-- 方法一：DownSub -->
<div class="mb-3">
<div class="flex items-center mb-1">
<span
class="bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">推薦</span>
<strong class="text-[var(--heading-color)]">方法一：使用 DownSub 下載</strong>
</div>
<ol class="list-decimal list-inside text-[var(--body-text)] space-y-1 ml-1">
<li>複製您的 YouTube 影片網址。</li>
<li>前往 <a href="https://downsub.com/" target="_blank" rel="noopener"
class="text-blue-600 hover:text-blue-800 underline font-bold">DownSub.com</a>。
</li>
<li>貼上網址搜尋，下載時請選擇 <strong>SRT</strong> 格式。</li>
</ol>
</div>
<hr class="border-[var(--card-border)] my-3">
<!-- 方法二：Faster Whisper -->
<div>
<div class="flex items-center mb-1">
<span
class="bg-purple-100 text-purple-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">進階</span>
<strong class="text-[var(--heading-color)]">方法二：使用 Faster Whisper
(無字幕時)</strong>
</div>
<p class="text-[var(--gray-text)] mb-2 ml-1">如果影片本身沒有 CC 字幕，可使用此工具進行 AI 語音轉文字。</p>
<a href="https://tinyurl.com/gsyan-faster-whisper" target="_blank" rel="noopener"
class="ml-1 text-purple-600 hover:text-purple-800 underline font-bold flex items-center">
<span>👉 前往雄哥的 Faster Whisper 工具</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 ml-1" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
</svg>
</a>
</div>
</div>
<div id="view-toggle-header"
class="flex justify-between items-center mb-2 border-b border-[var(--card-border)] hidden flex-shrink-0">
<div class="flex">
<button class="view-btn" data-view="original">原始內容</button>
<button class="view-btn" data-view="processed">處理結果</button>
</div>
<button id="return-to-edit-btn"
class="font-bold py-1 px-3 rounded btn-secondary text-sm">返回編輯</button>
</div>
<div id="smart-area-container"
class="relative flex-grow border border-[var(--card-border)] rounded bg-[var(--gray-bg)]">
<textarea id="smart-area"
class="w-full h-full rounded p-3 bg-transparent focus:outline-none resize-none leading-relaxed"></textarea>
<div id="display-original"
class="view-content p-3 overflow-y-auto font-mono whitespace-pre-wrap hidden leading-relaxed">
</div>
<div id="display-processed"
class="view-content p-3 overflow-y-auto whitespace-pre-wrap hidden leading-relaxed">
</div>
<div id="tab1-empty-state" class="hidden">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-16 w-16 mb-4 opacity-50 text-gray-500" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="1">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
<p class="font-semibold text-lg text-gray-500">原始內容</p>
<div class="text-center mt-2 text-sm text-gray-500">
<span>✍️ 貼上內容或拖曳檔案，也可以</span>
<label for="file-input"
class="text-[var(--link-color)] hover:underline cursor-pointer font-bold ml-1">點擊此處上傳
.srt 檔案</label>
<input type="file" id="file-input" accept=".srt,.txt" class="hidden">
</div>
</div>
</div>
<div class="flex justify-end mt-1">
<span id="char-count-display" class="font-mono text-xs text-gray-500">字數: 0</span>
</div>
</div>
<div id="settings-toolbar"
class="p-3 rounded-md bg-[var(--gray-bg)] flex flex-wrap items-center gap-x-6 gap-y-3">
<div class="flex items-center gap-2">
<label for="max-chars-per-line" class="font-semibold whitespace-nowrap"
title="設定字幕每行的最大字元數">單行字數:</label>
<span id="max-chars-value" class="font-bold w-6 text-center">27</span>
<input type="range" id="max-chars-per-line" min="10" max="50" value="27" class="w-24">
</div>
<div class="flex items-center gap-2">
<label for="merge-short-lines-threshold" class="font-semibold whitespace-nowrap"
title="當一行字幕的字數小於或等於此數值時，將會自動與下一行合併">合併字數:</label>
<span id="merge-short-lines-value" class="font-bold w-6 text-center">3</span>
<input type="range" id="merge-short-lines-threshold" min="0" max="10" value="3"
class="w-24">
</div>
<div class="flex items-center">
<input type="checkbox" id="keep-punctuation" checked
class="form-checkbox h-5 w-5 rounded">
<label for="keep-punctuation" class="ml-2" title="勾選此項以保留字幕中的所有標點符號">保留標點</label>
</div>
<div class="border-l border-gray-400 h-6 mx-2"></div>
<div class="flex items-center gap-2">
<label for="timeline-shift" class="font-semibold whitespace-nowrap"
title="對所有字幕的時間戳進行整體平移，可輸入正數（延後）或負數（提前）">時間平移(ms):</label>
<input type="number" id="timeline-shift" value="0" placeholder="例如: -500"
class="w-24 rounded p-1 text-center">
</div>
<div class="border-l border-gray-400 h-6 mx-2"></div>
<div class="flex items-center gap-2">
<input type="checkbox" id="fix-timestamps" checked
class="form-checkbox h-5 w-5 rounded">
<label for="fix-timestamps" class="whitespace-nowrap">修復小於</label>
<input type="number" id="timestamp-threshold" value="100"
class="w-20 rounded p-1 text-center">
<label for="timestamp-threshold" class="whitespace-nowrap">ms 的間隔</label>
</div>
</div>
</div>
<hr class="my-8">
<div class="flex flex-wrap items-center justify-center gap-4 pt-4">
<button id="process-srt-btn" class="font-bold py-3 px-6 rounded-lg text-lg btn-primary">🚀
開始整理</button>
<button id="export-srt-btn" class="font-bold py-2 px-4 rounded btn-disabled" disabled>匯出 SRT
檔案</button>
<div class="border-l border-gray-300 h-8 mx-2"></div>
<button id="batch-replace-btn" class="font-bold py-2 px-4 rounded btn-secondary">批次取代</button>
<button id="generate-summary-btn" class="font-bold py-2 px-4 rounded btn-disabled" disabled
title="請先輸入內容並設定 API Key">生成摘要</button>
<button id="generate-chapters-btn" class="font-bold py-2 px-4 rounded btn-disabled" disabled
title="請先輸入內容並設定 API Key">生成章節</button>
<div class="border-l border-gray-300 h-8 mx-2"></div>
<button id="reset-app-btn" class="font-bold py-2 px-4 rounded btn-danger">重置頁面</button>
</div>
</div>
<div id="tab2" class="tab-content hidden">
<div class="grid grid-cols-1 md:grid-cols-10 gap-8">
<div class="md:col-span-3 flex flex-col">
<div class="flex-grow">
<div
class="flex justify-between items-center border-b-2 border-[var(--heading-color)] pb-2">
<h3 class="text-xl font-bold heading-color">文章生成設定</h3>
<button id="open-prompt-wizard-btn" class="header-icon-btn" title="AI 寫作風格客製化精靈">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</button>
</div>
<div class="stepper-container my-6">
<div id="stepper-step-1" class="stepper-item">
<div class="stepper-circle">
<span class="stepper-number">1</span>
<svg class="stepper-check" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3"
d="M5 13l4 4L19 7" />
</svg>
</div>
<p class="stepper-label">準備素材</p>
</div>
<div class="stepper-line"></div>
<div id="stepper-step-2" class="stepper-item">
<div class="stepper-circle">
<span class="stepper-number">2</span>
<svg class="stepper-check" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3"
d="M5 13l4 4L19 7" />
</svg>
</div>
<p class="stepper-label">AI 優化</p>
</div>
<div class="stepper-line"></div>
<div id="stepper-step-3" class="stepper-item">
<div class="stepper-circle">
<span class="stepper-number">3</span>
<svg class="stepper-check" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3"
d="M5 13l4 4L19 7" />
</svg>
</div>
<p class="stepper-label">生成文章</p>
</div>
</div>
<div class="space-y-6">
<div class="p-3 rounded-md border border-[var(--card-border)] bg-[var(--gray-bg)]">
<p id="blog-source-status"
class="text-sm font-semibold text-[var(--heading-color)] mb-2"><span
id="blog-status-icon" class="hidden">✔️ </span>內容來源：字幕原始檔</p>
<button id="optimize-text-for-blog-btn"
class="w-full font-bold py-2 px-4 rounded btn-disabled" disabled>優化文本
(建議)</button>
</div>
<div class="space-y-4">
<div>
<label for="blog-title" class="font-semibold">文章標題</label>
<input type="text" id="blog-title" placeholder="請輸入您的文章主標題"
class="w-full mt-1 p-2 rounded">
</div>
<div>
<label for="blog-yt-id" class="font-semibold">YouTube 影片 ID 或網址</label>
<input type="text" id="blog-yt-id" placeholder="可在此貼上完整 YouTube 網址或影片 ID"
class="w-full mt-1 p-2 rounded">
</div>
</div>
<div>
<button id="ai-style-toggle-btn" class="accordion-toggle">
<span>AI 風格設定</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd" />
</svg>
</button>
<div id="ai-style-panel" class="accordion-panel">
<div class="accordion-content">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label for="blog-persona"
class="font-semibold text-sm">寫作人稱</label>
<select id="blog-persona"
class="w-full mt-1 p-2 rounded bg-[var(--gray-bg)] border border-[var(--card-border)]"></select>
</div>
<div>
<label for="blog-word-count"
class="font-semibold text-sm">寫作字數</label>
<select id="blog-word-count"
class="w-full mt-1 p-2 rounded bg-[var(--gray-bg)] border border-[var(--card-border)]"></select>
</div>
<div class="col-span-1 sm:col-span-2">
<label for="blog-tone"
class="font-semibold text-sm">寫作語氣</label>
<select id="blog-tone"
class="w-full mt-1 p-2 rounded bg-[var(--gray-bg)] border border-[var(--card-border)]"></select>
</div>
</div>
</div>
</div>
</div>
<div>
<button id="seo-toggle-btn" class="accordion-toggle">
<span>SEO 與宣傳</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd" />
</svg>
</button>
<div id="seo-panel" class="accordion-panel">
<div class="accordion-content space-y-4">
<div>
<label class="font-semibold text-sm">文章標籤 (Tags)</label>
<div id="tag-container" class="tag-container mt-1">
<input type="text" id="tag-input" class="tag-input"
placeholder="輸入標籤後按 Enter...">
</div>
<div id="tag-suggestions" class="tag-suggestions mt-2"></div>
<div class="text-right mt-2">
<button id="save-tags-btn"
class="font-bold py-1 px-3 rounded btn-secondary text-sm">儲存自訂標籤</button>
</div>
</div>
<div>
<label for="cta-preset-select" class="font-semibold text-sm">宣傳語句
(CTA)</label>
<select id="cta-preset-select"
class="w-full mt-1 p-2 rounded bg-[var(--gray-bg)] border border-[var(--card-border)] mb-2"></select>
<textarea id="blog-cta" placeholder="可在此自訂 CTA，或選擇上方預設"
class="w-full p-2 rounded" rows="5"></textarea>
<div class="flex justify-end gap-2 mt-2">
<button id="delete-cta-btn"
class="font-bold py-1 px-3 rounded btn-danger text-sm hidden">刪除此
CTA</button>
<button id="save-cta-btn"
class="font-bold py-1 px-3 rounded btn-secondary text-sm hidden">儲存此自訂
CTA</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex items-center gap-2 mt-4">
<button id="generate-blog-btn"
class="w-full font-bold py-3 px-6 rounded-lg text-lg btn-primary">生成部落格文章</button>
<button id="generate-blog-variation-btn"
class="font-bold py-2 px-4 rounded-lg btn-secondary text-sm whitespace-nowrap"
disabled title="生成不同風格的版本">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block"
viewBox="0 0 20 20" fill="currentColor">
<path
d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z" />
</svg>
另一版本
</button>
</div>
</div>
<div class="md:col-span-7">
<div id="blog-versions-tabs-container"
class="flex border-b border-[var(--card-border)] mb-2">
</div>
<div class="flex border-b border-[var(--card-border)] mb-4">
<button class="blog-view-btn active" data-blog-view="preview">文章預覽</button>
<button class="blog-view-btn" data-blog-view="html">HTML 原始碼</button>
<button class="blog-view-btn" data-blog-view="markdown">Markdown 原始碼</button>
<button class="blog-view-btn" data-blog-view="seo">SEO 建議</button>
</div>
<div id="blog-output-container" class="hidden">
<!-- ########## REFACTORED: BLOG PREVIEW TO EDITOR ########## -->
<div id="blog-view-preview" class="blog-view-content">
<div class="relative">
<div class="absolute top-2 right-2 space-x-2 z-20">
<button id="download-html-btn"
class="font-bold py-1 px-3 rounded btn-secondary text-sm">HTML</button>
<button id="download-md-btn"
class="font-bold py-1 px-3 rounded btn-secondary text-sm">MD</button>
</div>
<div id="blog-editor-container" class="rounded-lg">
<!-- Quill Editor will be initialized here -->
</div>
</div>
</div>
<div id="blog-view-html" class="blog-view-content hidden">
<div class="relative h-[80vh]">
<button class="source-copy-btn absolute top-2 right-2 z-10"
data-copy-target="html-source-preview" title="複製原始碼">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
</button>
<textarea id="html-source-preview" readonly
class="w-full h-full rounded p-3 bg-[var(--gray-bg)] border border-[var(--card-border)] focus:outline-none resize-none font-mono text-sm"></textarea>
</div>
</div>
<div id="blog-view-markdown" class="blog-view-content hidden">
<div class="relative h-[80vh]">
<button class="source-copy-btn absolute top-2 right-2 z-10"
data-copy-target="markdown-source-preview" title="複製原始碼">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
</button>
<textarea id="markdown-source-preview" readonly
class="w-full h-full rounded p-3 bg-[var(--gray-bg)] border border-[var(--card-border)] focus:outline-none resize-none font-mono text-sm"></textarea>
</div>
</div>
<div id="blog-view-seo" class="blog-view-content hidden">
<div class="p-4 border rounded-lg border-[var(--card-border)] bg-[var(--gray-bg)]">
<h4 class="text-lg font-semibold mb-2 heading-color">SEO 建議</h4>
<div id="blog-seo-suggestions" class="space-y-3 text-sm">
<div class="flex items-start gap-2">
<strong class="w-20 inline-block flex-shrink-0">SEO 標題:</strong>
<span id="seo-title-text" class="flex-grow">...</span>
<button class="seo-copy-btn" data-copy-target="seo-title-text"
title="複製"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg></button>
</div>
<div class="flex items-start gap-2">
<strong class="w-20 inline-block flex-shrink-0">搜尋描述:</strong>
<span id="seo-description-text" class="flex-grow">...</span>
<button class="seo-copy-btn" data-copy-target="seo-description-text"
title="複製"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg></button>
</div>
<div class="flex items-start gap-2">
<strong class="w-20 inline-block flex-shrink-0">固定網址:</strong>
<span id="seo-permalink-text" class="flex-grow">...</span>
<button class="seo-copy-btn" data-copy-target="seo-permalink-text"
title="複製"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg></button>
</div>
<div class="flex items-start gap-2">
<strong class="w-20 inline-block flex-shrink-0">標籤:</strong>
<span id="seo-tags-text" class="flex-grow">...</span>
<button class="seo-copy-btn" data-copy-target="seo-tags-text"
title="複製"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg></button>
</div>
</div>
</div>
<div class="mt-6">
<button id="advanced-seo-toggle-btn" class="accordion-toggle">
<span>🚀 進階 SEO 分析 (AI)</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd" />
</svg>
</button>
<div id="advanced-seo-panel" class="accordion-panel">
<div class="accordion-content space-y-6">
<div>
<h5 class="font-semibold mb-2 heading-color">關鍵字建議</h5>
<button id="analyze-keywords-btn"
class="font-bold py-2 px-4 rounded btn-secondary w-full"
disabled>分析關鍵字</button>
<div id="keywords-loader"
class="text-center p-4 hidden text-sm text-[var(--gray-text)]">
<div class="flex items-center justify-center"><svg
class="animate-spin -ml-1 mr-3 h-5 w-5"
xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10"
stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
</path>
</svg><span>AI 分析中...</span></div>
</div>
<div id="keywords-result-container"
class="mt-2 p-3 bg-[var(--bg-color)] rounded-md hidden">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<strong class="block text-sm">核心關鍵字:</strong>
<ul id="seo-keywords-core"
class="list-disc list-inside mt-1 text-sm space-y-1">
</ul>
</div>
<div>
<strong class="block text-sm">長尾關鍵字:</strong>
<ul id="seo-keywords-longtail"
class="list-disc list-inside mt-1 text-sm space-y-1">
</ul>
</div>
</div>
</div>
</div>
<div>
<h5 class="font-semibold mb-2 heading-color">內部連結建議</h5>
<div>
<label for="internal-links-source" class="text-sm">貼上您網站的文章列表
(一行一個，格式：標題, 網址)</label>
<textarea id="internal-links-source" rows="5"
class="w-full mt-1 p-2 rounded"
placeholder="例如： AI寫作技巧, https://example.com/ai-writing 影片剪輯教學, https://example.com/video-editing"></textarea>
</div>
<button id="analyze-internal-links-btn"
class="font-bold py-2 px-4 rounded btn-secondary w-full mt-2"
disabled>分析內部連結機會</button>
<div id="internal-links-loader"
class="text-center p-4 hidden text-sm text-[var(--gray-text)]">
<div class="flex items-center justify-center"><svg
class="animate-spin -ml-1 mr-3 h-5 w-5"
xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10"
stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
</path>
</svg><span>AI 分析中...</span></div>
</div>
<div id="internal-links-result-container" class="mt-2 space-y-3">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="blog-placeholder"
class="text-center py-20 text-[var(--gray-text)] flex flex-col items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mb-4 opacity-50" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
<p class="font-semibold text-lg">準備好將您的影片轉為文章了嗎？</p>
<p class="mt-2 text-sm">請先在左側完成設定，<br>點擊「生成部落格文章」按鈕，成果將會顯示於此處。</p>
</div>
</div>
</div>
</div>
<div id="tab3" class="tab-content hidden">
<div class="grid grid-cols-1 md:grid-cols-10 gap-8">
<div class="md:col-span-3 space-y-4">
<div
class="flex justify-between items-center border-b-2 border-[var(--heading-color)] pb-2">
<h3 class="text-xl font-bold heading-color">貼文生成設定</h3>
<button id="open-social-wizard-btn" class="header-icon-btn" title="AI 社群風格客製化精靈">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</button>
</div>
<div class="p-3 rounded-md border border-[var(--card-border)] bg-[var(--gray-bg)] mt-4">
<p id="social-source-status"
class="text-sm font-semibold text-[var(--heading-color)] mb-2"><span
id="social-status-icon" class="hidden">✔️ </span>內容來源：字幕原始檔</p>
<button id="social-go-to-optimize-btn"
class="w-full font-bold py-2 px-4 rounded btn-secondary">🚀 前往優化文本 (建議)</button>
</div>
<div>
<label for="social-objective" class="font-semibold">貼文目標</label>
<select id="social-objective"
class="w-full mt-1 p-2 rounded bg-[var(--gray-bg)] border border-[var(--card-border)]"></select>
</div>
<div>
<label for="social-length" class="font-semibold">貼文長度</label>
<select id="social-length"
class="w-full mt-1 p-2 rounded bg-[var(--gray-bg)] border border-[var(--card-border)]"></select>
</div>
<div>
<label for="social-tone-select" class="font-semibold">寫作語氣</label>
<select id="social-tone-select"
class="w-full mt-1 p-2 rounded bg-[var(--gray-bg)] border border-[var(--card-border)]"></select>
</div>
<div>
<label for="social-hashtags" class="font-semibold">指定 Hashtags</label>
<input type="text" id="social-hashtags" placeholder="例如：#AI #社群行銷"
class="w-full mt-1 p-2 rounded">
</div>
<div>
<label for="social-cta" class="font-semibold">行動呼籲 (CTA)</label>
<textarea id="social-cta" rows="3" placeholder="例如：留言分享你的看法！"
class="w-full mt-1 p-2 rounded"></textarea>
</div>
<div class="flex items-center gap-2">
<button id="generate-social-btn"
class="w-full font-bold py-3 px-6 rounded-lg text-lg btn-disabled"
disabled>生成社群貼文</button>
<button id="generate-social-variation-btn"
class="font-bold py-2 px-4 rounded-lg btn-secondary text-sm whitespace-nowrap"
disabled title="生成不同風格的版本">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block"
viewBox="0 0 20 20" fill="currentColor">
<path
d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z" />
</svg>
另一版本
</button>
</div>
</div>
<div class="md:col-span-7 relative">
<div id="social-versions-tabs-container" class="flex border-b border-[var(--card-border)]">
</div>
<div class="flex border-b border-[var(--card-border)]">
<button class="social-tab-btn active" data-social-tab="facebook">Facebook</button>
<button class="social-tab-btn" data-social-tab="instagram">Instagram</button>
<button class="social-tab-btn" data-social-tab="line">Line</button>
<button id="social-copy-btn"
class="ml-auto font-bold py-1 px-3 my-1 rounded btn-secondary text-sm z-10 hidden">複製內容</button>
</div>
<div id="social-output-container"
class="relative mt-2 border border-[var(--card-border)] rounded bg-[var(--gray-bg)] h-[600px]">
<div id="facebook-post-output" class="social-post-content p-4"></div>
<div id="instagram-post-output" class="social-post-content p-4 hidden"></div>
<div id="line-post-output" class="social-post-content p-4 hidden"></div>
<div id="social-placeholder"
class="flex items-center justify-center h-full text-center text-gray-500">
<div class="flex flex-col items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mb-4 opacity-50"
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
<path stroke-linecap="round" stroke-linejoin="round"
d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a2 2 0 01-2-2V7a2 2 0 012-2h2.586a1 1 0 01.707.293l2.414 2.414a1 1 0 00.707.293H17z" />
</svg>
<p class="font-semibold text-lg">一鍵生成，多平台發布</p>
<p class="mt-2 text-sm">AI 將為您生成多平台社群貼文，<br>設定完成後，點擊按鈕即可預覽成果。</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="tab4" class="tab-content hidden">
<div class="grid grid-cols-1 md:grid-cols-10 gap-8">
<div class="md:col-span-3 space-y-4">
<div class="border-b-2 border-[var(--heading-color)] pb-2">
<h3 class="text-xl font-bold heading-color">電子報設定</h3>
</div>
<div class="p-3 rounded-md border border-[var(--card-border)] bg-[var(--gray-bg)]">
<p id="edm-source-status"
class="text-sm font-semibold text-[var(--heading-color)] mb-2">內容來源：字幕原始檔</p>
<button id="edm-go-to-optimize-btn"
class="w-full font-bold py-2 px-4 rounded btn-secondary">🚀 前往優化文本 (建議)</button>
</div>
<div>
<label for="edm-audience" class="font-semibold">目標讀者</label>
<select id="edm-audience"
class="w-full mt-1 p-2 rounded bg-[var(--gray-bg)] border border-[var(--card-border)]"></select>
</div>
<div>
<label for="edm-style" class="font-semibold">寫作風格</label>
<select id="edm-style"
class="w-full mt-1 p-2 rounded bg-[var(--gray-bg)] border border-[var(--card-border)]"></select>
</div>
<div class="flex items-center gap-2">
<button id="generate-edm-btn"
class="w-full font-bold py-3 px-6 rounded-lg text-lg btn-primary">生成電子報內容</button>
<button id="generate-edm-variation-btn"
class="font-bold py-2 px-4 rounded-lg btn-secondary text-sm whitespace-nowrap"
disabled title="生成不同風格的版本">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block"
viewBox="0 0 20 20" fill="currentColor">
<path
d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z" />
</svg>
另一版本
</button>
</div>
</div>
<div class="md:col-span-7 relative">
<div id="edm-versions-tabs-container" class="flex border-b border-[var(--card-border)]">
</div>
<div class="flex border-b border-[var(--card-border)] items-center mb-2">
<h4 class="text-lg font-semibold heading-color px-4 py-2">電子報內容預覽</h4>
<button id="copy-edm-html-btn"
class="ml-auto font-bold py-1 px-3 my-1 mr-2 rounded btn-secondary text-sm z-10 hidden">複製
HTML</button>
</div>
<div id="edm-output-container"
class="relative border border-[var(--card-border)] rounded bg-white h-[70vh] p-4 overflow-y-auto hidden">
<div id="edm-preview" class="prose max-w-none">
</div>
</div>
<div id="edm-placeholder"
class="flex items-center justify-center h-[70vh] text-center text-gray-500 border border-dashed border-[var(--card-border)] rounded">
<div class="flex flex-col items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mb-4 opacity-50"
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
<p class="font-semibold text-lg">將您的內容轉化為引人入勝的電子報</p>
<p class="mt-2 text-sm max-w-sm">
為了獲得最佳生成效果，AI 會優先使用您已生成的「部落格文章」或「優化文本」。
<br>
您可以點擊左側的「優化文本」按鈕來提升內容品質，或直接開始生成。
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Tab 5: 社群輪播圖提示詞 -->
<div id="tab5" class="tab-content hidden">
<div class="grid grid-cols-1 md:grid-cols-10 gap-8">
<!-- Left panel: Settings (3 cols) -->
<div class="md:col-span-3 space-y-4">
<div class="border-b-2 border-[var(--heading-color)] pb-2">
<h3 class="text-xl font-bold heading-color">輪播圖設定</h3>
</div>
<!-- Source Status -->
<div class="p-3 rounded-md border border-[var(--card-border)] bg-[var(--gray-bg)]">
<p id="carousel-source-status"
class="text-sm font-semibold text-[var(--heading-color)] mb-2">內容來源：字幕原始檔</p>
<button id="carousel-go-to-optimize-btn"
class="w-full font-bold py-2 px-4 rounded btn-secondary">🚀 優化文本以提升品質</button>
</div>
<!-- Roles Configuration -->
<div class="space-y-2">
<div class="flex items-center justify-between">
<label class="font-semibold text-sm">自備素材/角色設定 (最多 4 個)</label>
<button id="carousel-add-role-btn"
class="text-xs font-semibold py-1 px-2 rounded btn-secondary">+ 新增角色</button>
</div>
<div id="carousel-roles-container" class="space-y-2">
<!-- Dynamic role input fields will be rendered here -->
</div>
</div>
<!-- Include Logo Toggle -->
<div class="flex items-center gap-2 pt-1">
<input type="checkbox" id="carousel-include-logo"
class="form-checkbox h-4 w-4 rounded text-[var(--link-color)]">
<label for="carousel-include-logo" class="font-semibold text-sm select-none">提示詞中加入Logo
圖示</label>
</div>
<!-- Carousel Caption Length Dropdown -->
<div>
<label for="carousel-caption-length" class="font-semibold text-sm">輪播圖說明文字</label>
<select id="carousel-caption-length"
class="w-full mt-1 p-2 rounded bg-[var(--gray-bg)] border border-[var(--card-border)]">
<option value="short">少 (大約 50 字以內)</option>
<option value="medium" selected>適中 (大約 100 字以內)</option>
<option value="long">多 (大約 150 字以內)</option>
</select>
</div>
<!-- Carousel Layout Style Dropdown -->
<div>
<label for="carousel-layout-style" class="font-semibold text-sm">內容頁排版樣式</label>
<select id="carousel-layout-style"
class="w-full mt-1 p-2 rounded bg-[var(--gray-bg)] border border-[var(--card-border)]">
<option value="classic-layout">經典內容排版</option>
<option value="auto" selected>AI 智慧混搭 (系統推薦)</option>
<option value="golden-sentence">統一金句型 (版型 A - 大字無條列)</option>
<option value="progression-steps">統一步驟流程型 (版型 B - 數字 123)</option>
<option value="transparent-card">統一卡片條列型 (版型 C - 卡片配圓點)</option>
<option value="dialog-bubble">統一對話氣泡型 (版型 D - 對話想法框)</option>
<option value="pure-background">純文字融入背景 (無裝飾框與符號)</option>
</select>
<p id="layout-style-preview" class="mt-2 text-sm text-[var(--gray-text)]"></p>
</div>
<!-- Image Style Dropdown -->
<div>
<label for="carousel-style" class="font-semibold text-sm">圖片風格</label>
<select id="carousel-style"
class="w-full mt-1 p-2 rounded bg-[var(--gray-bg)] border border-[var(--card-border)]">
<option value="auto" selected>AI 參考內容自動決定風格 (推薦)</option>
<option value="warm-cute-chibi">溫慢可愛Q版教育風</option>
<option value="modern-minimalist-flat">現代極簡插畫風</option>
<option value="realistic-watercolor">寫實手繪水彩風</option>
<option value="minimalist">現代極簡幾何風</option>
<option value="3d-clay">3D 黏土/擬物風</option>
<option value="neo-brutalism">高對比新醜風</option>
<option value="flat-business">扁平商業插畫</option>
<option value="doodle">手繪塗鴉風</option>
<option value="custom">自訂風格</option>
</select>
</div>
<!-- Custom Style Input Container -->
<div id="carousel-custom-style-container" class="hidden space-y-1 mt-2">
<label for="carousel-custom-style"
class="font-semibold text-xs text-[var(--gray-text)]">自訂風格提示詞</label>
<textarea id="carousel-custom-style"
class="w-full p-2 text-sm rounded bg-[var(--gray-bg)] border border-[var(--card-border)] h-20 resize-y"
placeholder="例如：復古美式插畫風格，採用高飽和度色彩、乾淨線條與微粒效果..."></textarea>
</div>
<!-- Action buttons -->
<div class="flex items-center gap-2">
<button id="generate-carousel-btn"
class="w-full font-bold py-3 px-6 rounded-lg text-lg btn-primary">生成提示詞</button>
<button id="generate-carousel-variation-btn"
class="font-bold py-2 px-4 rounded-lg btn-secondary text-sm whitespace-nowrap"
disabled title="生成不同風格的版本">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block"
viewBox="0 0 20 20" fill="currentColor">
<path
d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z" />
</svg>
另一版本
</button>
</div>
</div>
<!-- Right panel: Preview (7 cols) -->
<div class="md:col-span-7 flex flex-col space-y-4">
<!-- Versions switcher tabs -->
<div id="carousel-versions-tabs-container"
class="flex border-b border-[var(--card-border)]">
<!-- Version tabs (e.g. Version 1, Version 2) -->
</div>
<!-- Title and Copy buttons -->
<div class="flex border-b border-[var(--card-border)] items-center">
<h4 class="text-lg font-semibold heading-color px-4 py-2">提示詞預覽</h4>
<button id="copy-all-carousel-prompts-btn"
class="ml-auto font-bold py-1 px-3 my-1 mr-2 rounded btn-secondary text-sm hidden">複製全部提示詞</button>
</div>
<!-- Main Content Display -->
<div id="carousel-output-container" class="flex flex-col flex-grow hidden">
<div id="carousel-individual-copy-container" class="flex flex-wrap gap-2 mb-2"></div>
<textarea id="carousel-prompt-textarea" readonly
class="w-full rounded p-4 bg-[var(--gray-bg)] border border-[var(--card-border)] focus:outline-none resize-none font-mono text-sm leading-relaxed h-[70vh] select-text text-[var(--text-color)]"
placeholder="生成提示詞後會顯示於此..."></textarea>
</div>
<!-- Placeholder when no data is generated -->
<div id="carousel-placeholder"
class="flex items-center justify-center h-[70vh] text-center text-gray-500 border border-dashed border-[var(--card-border)] rounded">
<div class="flex flex-col items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mb-4 opacity-50"
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
<path stroke-linecap="round" stroke-linejoin="round"
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
<p class="font-semibold text-lg">為您的內容生成社群輪播圖提示詞</p>
<p class="mt-2 text-sm max-w-sm">
AI 會將您的精華內容轉化為 4 張連貫的故事輪播圖提示詞，並設計好相應的標題文案。
<br>