Repository navigation
Expand file tree
/
Copy pathStudioApp.html
More file actions
1240 lines (1165 loc) · 81 KB
/
Copy pathStudioApp.html
File metadata and controls
1240 lines (1165 loc) · 81 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="en">
<head>
<base target="_top">
<meta charset="utf-8">
<title>UnScriptly Design Studio</title>
<meta name="html-studio-build" content="<?= BUILD_ID ?>">
<?!= studioIncludeRequired_('StudioStyles'); ?>
<script>window.__HTML_STUDIO_CONFIG = <?!= APP_CONFIG_JSON ?>;</script>
</head>
<body>
<div id="app" class="app-shell">
<header class="topbar">
<div class="brand-group">
<button class="icon-btn" id="pagesToggleBtn" type="button" aria-label="Toggle workspace panel" title="Toggle workspace">☰</button>
<div class="brand-mark" aria-hidden="true">U</div>
<div>
<div class="brand-name">Design Studio</div>
<div class="brand-sub">UnScriptly™ <span class="build-badge starting" id="buildStatusBadge" data-build="<?= BUILD_ID ?>">v8.14.0 · STARTING</span></div>
</div>
</div>
<div class="topbar-center studio-mode-center">
<div class="studio-mode-switch" role="group" aria-label="Design Studio mode">
<button id="htmlStudioModeBtn" class="seg-btn active" type="button" aria-pressed="true">HTML</button>
<button id="diagramStudioModeBtn" class="seg-btn" type="button" aria-pressed="false">Diagram</button>
</div>
</div>
<div class="topbar-actions global-topbar-actions">
<button class="icon-btn" id="settingsBtn" type="button" aria-label="Global styles and settings" title="Global styles and settings">⚙</button>
<button class="icon-btn mobile-only" id="inspectorToggleBtn" type="button" aria-label="Open inspector" title="Open inspector">▥</button>
</div>
</header>
<main class="workspace">
<aside class="sidebar left-panel" id="leftPanel">
<div class="panel-heading library-heading">
<div>
<div class="eyebrow">Workspace</div>
<h2 id="libraryPanelTitle">Pages</h2>
</div>
<div class="workspace-heading-actions">
<button class="workspace-notes-btn" id="notesLauncherBtn" type="button" data-library-view="notes" aria-label="Open editor notes" title="Editor notes">
<span>Notes</span><span class="notes-count-badge" id="notesCountBadge">0</span>
</button>
<button class="icon-btn" id="addPageBtn" type="button" title="Add blank page">＋</button>
</div>
</div>
<div class="project-strip" id="projectStrip">
<button class="project-selector" id="projectBrowserBtn" type="button" title="Open projects saved in Google Drive">
<span class="project-selector-copy">
<span class="project-name" id="currentProjectName">Untitled Project</span>
<span class="project-save-status" id="projectSaveStatus">Not saved to Drive</span>
</span>
<span class="project-selector-caret" aria-hidden="true">⌄</span>
</button>
<button class="button secondary project-save-btn" id="projectQuickSaveBtn" type="button" title="Save project to Google Drive">Save</button>
</div>
<div class="library-tabs" role="tablist" aria-label="Workspace tools">
<button class="library-tab active" type="button" data-library-view="pages" role="tab" aria-selected="true">Pages</button>
<button class="library-tab" type="button" data-library-view="layers" role="tab" aria-selected="false">Layers</button>
<button class="library-tab" type="button" data-library-view="elements" role="tab" aria-selected="false">Elements</button>
<button class="library-tab" type="button" data-library-view="media" role="tab" aria-selected="false">Media</button>
<button class="library-tab studio-mode-legacy-map-tab hidden" type="button" data-library-view="diagrams" role="tab" aria-selected="false" tabindex="-1">Maps</button>
</div>
<div class="library-view" id="pagesLibraryView" data-library-panel="pages">
<div class="import-actions">
<label class="button secondary file-button">
Upload HTML / TXT
<input id="fileInput" type="file" accept=".html,.htm,.txt,text/html,text/plain" multiple hidden>
</label>
<button class="button secondary" id="pasteBtn" data-action="open-paste-html" type="button">Paste HTML</button>
</div>
<div class="page-list" id="pageList"></div>
<div class="panel-section analysis-section">
<div class="section-title-row">
<h3>Analysis</h3>
<span class="status-dot" id="analysisStatus" title="Analysis status"></span>
</div>
<div class="stats-grid" id="analysisStats"></div>
<div class="issue-list" id="analysisIssues"></div>
</div>
</div>
<div class="library-view hidden layers-library-view" id="layersLibraryView" data-library-panel="layers">
<div class="library-controls sticky-library-controls layers-controls">
<div class="layers-title-row">
<div>
<label class="field-label no-margin" for="layerSearchInput">Layer structure</label>
<div class="field-help">Top layers paint in front. Drag the handle to reorder or nest inside frames/groups.</div>
</div>
<button class="icon-btn compact-icon-btn" id="refreshLayersBtn" type="button" title="Refresh layers">↻</button>
</div>
<input id="layerSearchInput" class="field" type="search" placeholder="Search layers…" autocomplete="off">
<div class="layers-toolbar-row">
<button class="button ghost mini-button" id="expandLayersBtn" type="button">Expand all</button>
<button class="button ghost mini-button" id="collapseLayersBtn" type="button">Collapse all</button>
</div>
</div>
<div class="layers-empty" id="layersEmptyState">Import a page to inspect its layer tree.</div>
<div class="layers-tree" id="layersTree" role="tree" aria-label="Page layers"></div>
<div class="layers-drop-help">
<strong>Drag behavior</strong>
<span>Drop above/below to change stacking order. Drop onto a Frame or Group to nest the layer.</span>
</div>
</div>
<div class="library-view hidden notes-library-view" id="notesLibraryView" data-library-panel="notes">
<div class="library-controls sticky-library-controls notes-controls">
<div class="notes-title-row">
<div>
<label class="field-label no-margin">Editor notes</label>
<div class="field-help">Attach feedback to exact page elements. Notes stay in the project and can be included in review exports.</div>
</div>
<button class="button secondary mini-button" id="addNoteBtn" type="button">+ Add note</button>
</div>
<div class="notes-toolbar-row">
<label class="check-row"><input id="showNotesInput" type="checkbox" checked> Show notes on canvas</label>
<select id="notesFilterInput" class="field compact-field" aria-label="Filter notes">
<option value="all">All notes</option>
<option value="open">Open</option>
<option value="resolved">Resolved</option>
</select>
</div>
</div>
<div class="notes-empty" id="notesEmptyState">Import or open a page to add editor notes.</div>
<div class="notes-list" id="notesList"></div>
<div class="notes-help"><strong>Tip</strong><span>Select an element first, then Add note—or click Add note and choose an element directly on the canvas.</span></div>
</div>
<div class="library-view hidden" id="elementsLibraryView" data-library-panel="elements">
<div class="library-controls sticky-library-controls">
<label class="field-label" for="insertPositionInput">Add elements</label>
<select id="insertPositionInput" class="field">
<option value="smart">Smart placement</option>
<option value="inside">Inside selected element</option>
<option value="after">After selected element</option>
<option value="before">Before selected element</option>
<option value="body">End of page</option>
</select>
<input id="elementSearchInput" class="field" type="search" placeholder="Search elements…" autocomplete="off">
<div class="field-help">Select an element in the preview to control where new content is inserted.</div>
</div>
<div class="element-catalog" id="elementCatalog">
<section class="element-group">
<div class="element-group-title">Layout</div>
<div class="element-grid">
<button class="element-tile" type="button" data-element="frame" data-search="frame artboard container nesting layout"><span class="element-glyph">▣</span><span>Frame</span></button>
<button class="element-tile" type="button" data-element="group" data-search="group nested layers bundle layout"><span class="element-glyph">⌗</span><span>Group</span></button>
<button class="element-tile" type="button" data-element="section" data-search="section block layout"><span class="element-glyph">▤</span><span>Section</span></button>
<button class="element-tile" type="button" data-element="container" data-search="container wrapper box"><span class="element-glyph">▭</span><span>Container</span></button>
<button class="element-tile" type="button" data-element="columns2" data-search="two columns grid layout"><span class="element-glyph">▥</span><span>2 Columns</span></button>
<button class="element-tile" type="button" data-element="columns3" data-search="three columns grid layout"><span class="element-glyph">▦</span><span>3 Columns</span></button>
<button class="element-tile" type="button" data-element="stack" data-search="stack vertical layout"><span class="element-glyph">☷</span><span>Stack</span></button>
<button class="element-tile" type="button" data-element="row" data-search="row horizontal flex layout"><span class="element-glyph">⇥</span><span>Row</span></button>
</div>
</section>
<section class="element-group">
<div class="element-group-title">Blocks & Shapes</div>
<div class="element-grid">
<button class="element-tile" type="button" data-element="box" data-search="box rectangle shape"><span class="element-glyph">□</span><span>Box</span></button>
<button class="element-tile" type="button" data-element="card" data-search="card panel block"><span class="element-glyph">▣</span><span>Card</span></button>
<button class="element-tile" type="button" data-element="circle" data-search="circle round shape"><span class="element-glyph">○</span><span>Circle</span></button>
<button class="element-tile" type="button" data-element="divider" data-search="divider line horizontal rule"><span class="element-glyph">━</span><span>Divider</span></button>
<button class="element-tile" type="button" data-element="spacer" data-search="spacer whitespace gap"><span class="element-glyph">↕</span><span>Spacer</span></button>
</div>
</section>
<section class="element-group">
<div class="element-group-title">Text & Actions</div>
<div class="element-grid">
<button class="element-tile" type="button" data-element="heading" data-search="heading title h2 text"><span class="element-glyph">H</span><span>Heading</span></button>
<button class="element-tile" type="button" data-element="paragraph" data-search="paragraph body copy text"><span class="element-glyph">¶</span><span>Paragraph</span></button>
<button class="element-tile" type="button" data-element="label" data-search="label eyebrow small text"><span class="element-glyph">Aa</span><span>Label</span></button>
<button class="element-tile" type="button" data-element="quote" data-search="quote blockquote text"><span class="element-glyph">“</span><span>Quote</span></button>
<button class="element-tile" type="button" data-element="button" data-search="button call to action cta"><span class="element-glyph">▰</span><span>Button</span></button>
<button class="element-tile" type="button" data-element="link" data-search="link anchor text"><span class="element-glyph">↗</span><span>Link</span></button>
</div>
</section>
<section class="element-group">
<div class="element-group-title">Media</div>
<div class="element-grid">
<button class="element-tile" type="button" data-element="image" data-search="image photo picture media"><span class="element-glyph">▧</span><span>Image</span></button>
<button class="element-tile" type="button" data-element="video" data-search="video movie media"><span class="element-glyph">▶</span><span>Video</span></button>
<button class="element-tile" type="button" data-element="audio" data-search="audio sound music media"><span class="element-glyph">♫</span><span>Audio</span></button>
<button class="element-tile" type="button" data-element="icon" data-search="icon material symbol"><span class="element-glyph">★</span><span>Icon</span></button>
</div>
</section>
</div>
</div>
<div class="library-view hidden diagrams-library-view" id="diagramsLibraryView" data-library-panel="diagrams">
<div class="library-controls sticky-library-controls diagrams-controls">
<div class="section-title-row compact-title-row">
<div>
<label class="field-label no-margin" for="diagramTypeInput">Diagram builder</label>
<div class="field-help">Create IA, user flows, journey maps, sitemaps, service blueprints, and custom process maps.</div>
</div>
</div>
<label class="field-label" for="diagramNameInput">Diagram name</label>
<input id="diagramNameInput" class="field" type="text" placeholder="e.g. Student onboarding flow">
<label class="field-label" for="diagramTypeInput">Template</label>
<select id="diagramTypeInput" class="field" aria-label="Diagram template">
<option value="ia">Information Architecture</option>
<option value="user-flow">User Flow</option>
<option value="journey-map">Journey Map</option>
<option value="sitemap">Sitemap</option>
<option value="service-blueprint">Service Blueprint</option>
<option value="blank">Blank Diagram</option>
</select>
<div class="diagram-create-row">
<button class="button primary" id="createDiagramBtn" type="button">New diagram</button>
<button class="button secondary" id="duplicateDiagramBtn" type="button">Duplicate</button>
</div>
</div>
<div class="diagram-section">
<div class="element-group-title">Diagrams</div>
<div id="diagramList" class="diagram-list"></div>
</div>
<div class="diagram-section">
<div class="element-group-title">Drag elements</div>
<div class="diagram-palette-grid" id="diagramPalette">
<button class="diagram-palette-item" draggable="true" type="button" data-diagram-node="screen"><span>▭</span><b>Page / Screen</b></button>
<button class="diagram-palette-item" draggable="true" type="button" data-diagram-node="section"><span>▤</span><b>Section</b></button>
<button class="diagram-palette-item" draggable="true" type="button" data-diagram-node="action"><span>→</span><b>Action</b></button>
<button class="diagram-palette-item" draggable="true" type="button" data-diagram-node="decision"><span>◇</span><b>Decision</b></button>
<button class="diagram-palette-item" draggable="true" type="button" data-diagram-node="terminal"><span>●</span><b>Start / End</b></button>
<button class="diagram-palette-item" draggable="true" type="button" data-diagram-node="stage"><span>▰</span><b>Journey Stage</b></button>
<button class="diagram-palette-item" draggable="true" type="button" data-diagram-node="touchpoint"><span>◎</span><b>Touchpoint</b></button>
<button class="diagram-palette-item" draggable="true" type="button" data-diagram-node="pain"><span>!</span><b>Pain Point</b></button>
<button class="diagram-palette-item" draggable="true" type="button" data-diagram-node="opportunity"><span>+</span><b>Opportunity</b></button>
<button class="diagram-palette-item" draggable="true" type="button" data-diagram-node="note"><span>≡</span><b>Note</b></button>
</div>
<div class="field-help">Drag an element onto the diagram canvas, or tap an element to add it near the center.</div>
</div>
<div class="diagram-section">
<div class="element-group-title">Canvas layout</div>
<div class="diagram-toolbar-grid">
<button class="button secondary" id="diagramAutoTdBtn" type="button">Auto TD</button>
<button class="button secondary" id="diagramAutoLrBtn" type="button">Auto LR</button>
<button class="button secondary" id="diagramAutoGridBtn" type="button">Grid</button>
<button class="button secondary" id="diagramFitBtn" type="button">Fit</button>
</div>
<label class="check-row"><input id="diagramSnapInput" type="checkbox" checked> Snap nodes to 20px grid</label>
</div>
<div class="diagram-section">
<div class="section-title-row compact-title-row">
<div class="element-group-title no-margin">Mermaid.js</div>
<span class="safe-pill">Flowchart TD</span>
</div>
<textarea id="diagramMermaidOutput" class="field diagram-mermaid-output" rows="12" spellcheck="false" placeholder="Paste flowchart TD here to generate or edit the diagram in real time…"></textarea>
<div class="field-help diagram-mermaid-help">Paste or edit <code>flowchart TD</code>. Valid changes are applied to the visual canvas automatically.</div>
<div class="diagram-mermaid-status" id="diagramMermaidStatus" aria-live="polite">Live sync ready.</div>
<div class="diagram-toolbar-grid">
<button class="button secondary" id="copyDiagramMermaidBtn" type="button">Copy Mermaid</button>
<button class="button secondary" id="downloadDiagramMermaidBtn" type="button">Download .mmd</button>
<button class="button secondary" id="downloadDiagramJsonBtn" type="button">Export JSON</button>
<button class="button danger" id="deleteDiagramBtn" type="button">Delete</button>
</div>
</div>
</div>
<div class="library-view hidden" id="mediaLibraryView" data-library-panel="media">
<div class="media-drive-box">
<div class="element-group-title">Google Drive Media</div>
<div class="field-grid two media-folder-grid">
<select id="mediaFolderInput" class="field" aria-label="Media folder"></select>
<button class="button secondary" id="createMediaFolderBtn" type="button">New folder</button>
</div>
<div class="media-drive-actions">
<a class="button secondary hidden" id="openMediaDriveBtn" href="#" target="_blank" rel="noopener">Open Drive folder</a>
<button class="button secondary" id="refreshMediaLibraryBtn" type="button">Refresh</button>
</div>
<div class="field-help" id="mediaStorageSummary">Loading your shared Drive media library…</div>
</div>
<div class="media-upload-zone">
<label class="button primary file-button full-width-button">
Upload to Drive
<input id="mediaFileInput" type="file" accept="image/*,video/*,audio/*,.svg,image/svg+xml" multiple hidden>
</label>
<div class="field-help">Media is stored in Google Drive and shared across all UnScriptly projects. UnScriptly does not persist media file bytes in browser or app state.</div>
<div class="field-help media-operation-status" id="mediaOperationStatus"></div>
</div>
<div class="media-url-box">
<div class="field-grid two media-url-grid">
<select id="mediaUrlKindInput" class="field" aria-label="Media URL type">
<option value="image">Image</option>
<option value="video">Video</option>
<option value="audio">Audio</option>
</select>
<button class="button secondary" id="addMediaUrlBtn" type="button">Save URL to Drive</button>
</div>
<input id="mediaUrlInput" class="field" type="url" placeholder="https://example.com/image.jpg">
<div class="field-help">Hosted media URLs are downloaded server-side and saved into the selected Drive folder. The original remote URL is not used as library storage.</div>
</div>
<div class="media-library-head">
<div>
<div class="element-group-title">Media Library</div>
<div class="field-help" id="mediaLibrarySummary">Loading media…</div>
</div>
</div>
<div class="media-grid" id="mediaGrid"></div>
</div>
</aside>
<section class="canvas-area">
<div class="canvas-toolbar html-mode-toolbar" id="htmlModeToolbar">
<div class="canvas-title-wrap html-mode-title">
<span class="safe-pill">SANDBOXED</span>
<span id="currentPageLabel">No page loaded</span>
</div>
<div class="mode-toolbar-controls html-mode-controls">
<div class="mode-switch" role="group" aria-label="Preview interaction mode">
<button id="selectModeBtn" class="seg-btn active" type="button">Select</button>
<button id="interactModeBtn" class="seg-btn" type="button">Interact</button>
</div>
<div class="toolbar-separator"></div>
<div class="device-switch" role="group" aria-label="Device preview">
<button class="icon-btn device-btn active" data-device="desktop" type="button" title="Desktop">▱</button>
<button class="icon-btn device-btn" data-device="tablet" type="button" title="Tablet">▯</button>
<button class="icon-btn device-btn" data-device="mobile" type="button" title="Mobile">▯</button>
</div>
<button class="icon-btn" id="undoBtn" type="button" title="Undo" disabled>↶</button>
<button class="icon-btn" id="redoBtn" type="button" title="Redo" disabled>↷</button>
<button class="button ghost" id="previewModeBtn" type="button" title="Preview page without editor chrome">Preview</button>
<button class="button ghost" id="wireframeToggleBtn" type="button" aria-pressed="false" title="Toggle structural skeleton wireframe view">Wireframe</button>
<button class="button ghost" id="codeBtn" type="button">Code</button>
<button class="button ghost hide-small" id="copyBtn" type="button">Copy HTML</button>
<button class="button primary" id="exportBtn" type="button">Export</button>
</div>
<div class="canvas-meta html-mode-meta">
<span id="viewportLabel">Responsive desktop</span>
<button class="text-btn" id="refreshBtn" type="button">Refresh</button>
</div>
</div>
<div class="canvas-toolbar diagram-mode-toolbar hidden" id="diagramModeToolbar">
<div class="canvas-title-wrap diagram-mode-title">
<span class="safe-pill">DIAGRAM</span>
<strong id="diagramCanvasTitle">Untitled Diagram</strong>
<span id="diagramCanvasType">Information Architecture</span>
</div>
<div class="mode-toolbar-controls diagram-mode-controls">
<div class="diagram-zoom-controls" role="group" aria-label="Diagram zoom">
<button class="icon-btn" id="diagramZoomOutBtn" type="button" title="Zoom out">−</button>
<button class="diagram-zoom-label" id="diagramZoomLabel" type="button" title="Reset zoom to 100%">100%</button>
<button class="icon-btn" id="diagramZoomInBtn" type="button" title="Zoom in">＋</button>
</div>
<button class="button secondary" id="diagramFitToolbarBtn" type="button">Fit</button>
<button class="button secondary" id="diagramExportPngBtn" type="button">Export PNG</button>
<button class="button secondary" id="diagramAddNodeBtn" type="button">+ Node</button>
<button class="button secondary" id="diagramConnectBtn" type="button">Connect</button>
<button class="button secondary hidden" id="diagramCancelConnectBtn" type="button">Cancel connect</button>
</div>
<div class="canvas-meta diagram-mode-meta">
<span id="diagramCanvasMeta">No-code canvas</span>
<button class="text-btn" id="diagramInspectorToolbarBtn" type="button">Inspector</button>
</div>
</div>
<div class="canvas-stage" id="canvasStage">
<div class="empty-state" id="emptyState">
<div class="empty-icon"></></div>
<h1>Bring in your HTML.</h1>
<p>Upload HTML or TXT files containing HTML, or paste markup to begin editing visually.</p>
<div class="empty-actions">
<button class="button primary" id="emptyUploadBtn" type="button">Upload HTML / TXT</button>
<button class="button secondary" id="emptyPasteBtn" data-action="open-paste-html" type="button">Paste HTML</button>
</div>
<div class="feature-strip">
<span>Click-to-edit</span><span>Multi-page</span><span>Responsive preview</span><span>Export-ready</span>
</div>
</div>
<div class="preview-shell hidden" id="previewShell" data-device="desktop">
<div class="preview-frame-wrap">
<iframe
id="previewFrame"
title="HTML live preview"
sandbox="allow-scripts allow-forms allow-modals"
referrerpolicy="no-referrer"
></iframe>
<div class="review-notes-overlay hidden" id="reviewNotesOverlay" aria-label="Editor note markers"></div>
</div>
</div>
<div class="diagram-workspace hidden" id="diagramWorkspace" aria-label="No-code diagram canvas">
<div class="diagram-board-scroll" id="diagramBoardScroll">
<div class="diagram-board-zoom" id="diagramBoardZoom">
<div class="diagram-board" id="diagramBoard" tabindex="0">
<svg class="diagram-edge-layer" id="diagramEdgeLayer" aria-hidden="true"></svg>
<div class="diagram-node-layer" id="diagramNodeLayer"></div>
<div class="diagram-empty-hint" id="diagramEmptyHint">Drag nodes here to start mapping.</div>
</div>
</div>
</div>
</div>
<div class="loading-overlay hidden" id="loadingOverlay">
<div class="spinner"></div>
<span>Rendering preview…</span>
</div>
</div>
</section>
<aside class="sidebar inspector-panel" id="inspectorPanel">
<div class="panel-heading inspector-heading">
<div>
<div class="eyebrow">Inspector</div>
<h2 id="selectedElementTitle">Nothing selected</h2>
</div>
<button class="icon-btn" id="inspectorCloseBtn" type="button" aria-label="Collapse inspector" title="Collapse inspector">×</button>
</div>
<div id="inspectorEmpty" class="inspector-empty">
<div class="cursor-glyph">↖</div>
<p>Choose <strong>Select</strong>, then click an element in the preview.</p>
</div>
<div id="inspectorContent" class="inspector-content hidden">
<div class="selection-path" id="selectionPath"></div>
<section class="control-section" id="contentSection">
<button class="section-toggle" type="button" data-toggle="contentControls">
<span>Content</span><span>⌃</span>
</button>
<div class="section-body" id="contentControls">
<label class="field-label" for="textContentInput">Text</label>
<textarea id="textContentInput" class="field textarea" rows="3" placeholder="Element text"></textarea>
<div class="field-help">Changing text replaces the selected element's child content.</div>
<div id="linkControls" class="conditional-controls hidden">
<label class="field-label" for="hrefInput">Link URL</label>
<input id="hrefInput" class="field" type="text" placeholder="https://… or page.html">
<label class="check-row"><input id="newTabInput" type="checkbox"> Open in new tab</label>
</div>
<div id="imageControls" class="conditional-controls hidden">
<label class="field-label" for="srcInput">Image source</label>
<input id="srcInput" class="field" type="text" placeholder="https://…">
<label class="field-label" for="altInput">Alt text</label>
<input id="altInput" class="field" type="text" placeholder="Describe the image">
</div>
<div id="mediaElementControls" class="conditional-controls hidden">
<label class="field-label" for="mediaSrcInput">Media source</label>
<input id="mediaSrcInput" class="field" type="text" placeholder="https://… or data:…">
<div class="field-grid two">
<label class="check-row"><input id="mediaControlsInput" type="checkbox"> Controls</label>
<label class="check-row"><input id="mediaLoopInput" type="checkbox"> Loop</label>
<label class="check-row"><input id="mediaAutoplayInput" type="checkbox"> Autoplay</label>
<label class="check-row"><input id="mediaMutedInput" type="checkbox"> Muted</label>
</div>
</div>
<div id="iconControls" class="conditional-controls hidden">
<div class="section-title-row compact-title-row">
<label class="field-label no-margin" for="iconNameInput">Material Symbol</label>
<button class="text-btn" id="openIconPickerBtn" type="button">Browse icons</button>
</div>
<input id="iconNameInput" class="field" type="text" placeholder="home, search, star…">
<div class="field-grid two">
<div>
<label class="field-label" for="iconWeightInput">Icon weight</label>
<select id="iconWeightInput" class="field">
<option value="100">100</option><option value="200">200</option><option value="300">300</option>
<option value="400" selected>400</option><option value="500">500</option><option value="600">600</option><option value="700">700</option>
</select>
</div>
<label class="check-row icon-fill-row"><input id="iconFillInput" type="checkbox"> Filled icon</label>
</div>
</div>
</div>
</section>
<section class="control-section">
<button class="section-toggle" type="button" data-toggle="typographyControls">
<span>Typography</span><span>⌃</span>
</button>
<div class="section-body" id="typographyControls">
<label class="field-label" for="fontFamilyInput">Font family</label>
<select id="fontFamilyInput" class="field font-family-select">
<optgroup label="System fonts">
<option value="__inherit__">Inherit / current</option>
<option value="Arial">Arial</option>
<option value="Georgia">Georgia</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Verdana">Verdana</option>
<option value="Courier New">Courier New</option>
</optgroup>
<optgroup label="Google Fonts">
<option value="Inter" data-google-font="1">Inter</option>
<option value="Roboto" data-google-font="1">Roboto</option>
<option value="Open Sans" data-google-font="1">Open Sans</option>
<option value="Lato" data-google-font="1">Lato</option>
<option value="Montserrat" data-google-font="1">Montserrat</option>
<option value="Poppins" data-google-font="1">Poppins</option>
<option value="DM Sans" data-google-font="1">DM Sans</option>
<option value="Manrope" data-google-font="1">Manrope</option>
<option value="Plus Jakarta Sans" data-google-font="1">Plus Jakarta Sans</option>
<option value="Space Grotesk" data-google-font="1">Space Grotesk</option>
<option value="IBM Plex Sans" data-google-font="1">IBM Plex Sans</option>
<option value="Nunito Sans" data-google-font="1">Nunito Sans</option>
<option value="Work Sans" data-google-font="1">Work Sans</option>
<option value="Source Sans 3" data-google-font="1">Source Sans 3</option>
<option value="Merriweather" data-google-font="1">Merriweather</option>
<option value="Playfair Display" data-google-font="1">Playfair Display</option>
<option value="Libre Baskerville" data-google-font="1">Libre Baskerville</option>
<option value="Roboto Mono" data-google-font="1">Roboto Mono</option>
<option value="Space Mono" data-google-font="1">Space Mono</option>
</optgroup>
<option value="__custom__">Custom Google Font…</option>
</select>
<div id="customFontControls" class="conditional-controls hidden">
<label class="field-label" for="customFontInput">Google Font family name</label>
<div class="inline-field-action">
<input id="customFontInput" class="field" type="text" placeholder="e.g. Archivo Black">
<button id="applyCustomFontBtn" class="button secondary" type="button">Apply</button>
</div>
</div>
<div class="field-grid two">
<div>
<label class="field-label" for="fontSizeInput">Size</label>
<div class="unit-field"><input id="fontSizeInput" class="field" type="number" step="1" min="0"><span>px</span></div>
</div>
<div>
<label class="field-label" for="fontWeightInput">Weight</label>
<select id="fontWeightInput" class="field">
<option value="">Auto</option>
<option value="300">Light</option>
<option value="400">Regular</option>
<option value="500">Medium</option>
<option value="600">Semi-bold</option>
<option value="700">Bold</option>
<option value="800">Extra-bold</option>
<option value="900">Black</option>
</select>
</div>
</div>
<div class="field-grid two">
<div>
<label class="field-label" for="lineHeightInput">Line height</label>
<input id="lineHeightInput" class="field" type="text" placeholder="normal / 1.5 / 32px">
</div>
<div>
<label class="field-label" for="letterSpacingInput">Letter spacing</label>
<input id="letterSpacingInput" class="field" type="text" placeholder="normal / -0.02em">
</div>
</div>
<label class="field-label">Text color</label>
<div class="color-field">
<input id="textColorPicker" type="color" value="#111111">
<input id="textColorInput" class="field" type="text" placeholder="#111111">
</div>
<label class="field-label" for="textAlignInput">Alignment</label>
<div class="segmented full" id="textAlignInput">
<button type="button" data-align="left">Left</button>
<button type="button" data-align="center">Center</button>
<button type="button" data-align="right">Right</button>
<button type="button" data-align="justify">Justify</button>
</div>
</div>
</section>
<section class="control-section">
<button class="section-toggle" type="button" data-toggle="fillControls">
<span>Fill & Border</span><span>⌃</span>
</button>
<div class="section-body" id="fillControls">
<label class="field-label">Background</label>
<div class="color-field">
<input id="backgroundColorPicker" type="color" value="#ffffff">
<input id="backgroundColorInput" class="field" type="text" placeholder="transparent or #ffffff">
</div>
<div class="field-grid two">
<div>
<label class="field-label" for="borderRadiusInput">Radius</label>
<div class="unit-field"><input id="borderRadiusInput" class="field" type="number" min="0"><span>px</span></div>
</div>
<div>
<label class="field-label" for="opacityInput">Opacity</label>
<input id="opacityInput" class="field" type="number" min="0" max="1" step="0.05">
</div>
</div>
<div class="field-grid three compact-grid">
<div>
<label class="field-label" for="borderWidthInput">Border</label>
<div class="unit-field"><input id="borderWidthInput" class="field" type="number" min="0"><span>px</span></div>
</div>
<div>
<label class="field-label" for="borderStyleInput">Style</label>
<select id="borderStyleInput" class="field">
<option value="none">None</option>
<option value="solid">Solid</option>
<option value="dashed">Dashed</option>
<option value="dotted">Dotted</option>
</select>
</div>
<div>
<label class="field-label" for="borderColorInput">Color</label>
<input id="borderColorInput" class="field" type="color" value="#111111">
</div>
</div>
</div>
</section>
<section class="control-section">
<button class="section-toggle" type="button" data-toggle="layoutControls">
<span>Size & Spacing</span><span>⌃</span>
</button>
<div class="section-body" id="layoutControls">
<div class="field-grid two">
<div>
<label class="field-label" for="widthInput">Width</label>
<input id="widthInput" class="field" type="text" placeholder="auto / 320px / 100%">
</div>
<div>
<label class="field-label" for="heightInput">Height</label>
<input id="heightInput" class="field" type="text" placeholder="auto / 200px">
</div>
</div>
<div class="field-grid two">
<div>
<label class="field-label" for="paddingInput">Padding</label>
<input id="paddingInput" class="field" type="text" placeholder="16px or 8px 16px">
</div>
<div>
<label class="field-label" for="marginInput">Margin</label>
<input id="marginInput" class="field" type="text" placeholder="0 auto">
</div>
</div>
<label class="field-label" for="displayInput">Display</label>
<select id="displayInput" class="field">
<option value="">Auto</option>
<option value="block">Block</option>
<option value="inline">Inline</option>
<option value="inline-block">Inline block</option>
<option value="flex">Flex</option>
<option value="grid">Grid</option>
<option value="none">Hidden</option>
</select>
</div>
</section>
<section class="control-section compact-actions">
<div class="action-row">
<button class="button secondary grow" id="duplicateElementBtn" type="button">Duplicate</button>
<button class="button danger grow" id="deleteElementBtn" type="button">Delete</button>
</div>
</section>
</div>
<div id="diagramInspector" class="diagram-inspector hidden">
<div id="diagramInspectorEmpty" class="inspector-empty compact-diagram-empty">
<div class="cursor-glyph">↖</div>
<p>Select a node or connection to customize its content, style, page assignment, or relationship.</p>
</div>
<div id="diagramNodeInspector" class="hidden">
<section class="control-section">
<div class="section-body diagram-inspector-body">
<label class="field-label" for="diagramNodeTitleInput">Node title</label>
<input id="diagramNodeTitleInput" class="field" type="text" placeholder="Node title">
<label class="field-label" for="diagramNodeSubtitleInput">Description</label>
<textarea id="diagramNodeSubtitleInput" class="field" rows="3" placeholder="Optional supporting text"></textarea>
<label class="field-label" for="diagramNodePageInput">Assigned page / screen</label>
<select id="diagramNodePageInput" class="field"><option value="">No page assigned</option></select>
<button class="button secondary full-width-button" id="diagramOpenPageBtn" type="button">Open assigned page</button>
</div>
</section>
<section class="control-section">
<button class="section-toggle" type="button" data-toggle="diagramNodeStyleControls"><span>Node style</span><span>⌃</span></button>
<div class="section-body" id="diagramNodeStyleControls">
<label class="field-label" for="diagramNodeShapeInput">Shape</label>
<select id="diagramNodeShapeInput" class="field">
<option value="rounded">Rounded</option><option value="rectangle">Rectangle</option><option value="pill">Pill</option><option value="diamond">Diamond</option><option value="circle">Circle</option>
</select>
<div class="field-grid two">
<div><label class="field-label" for="diagramNodeFillInput">Fill</label><input id="diagramNodeFillInput" type="color" value="#ffffff"></div>
<div><label class="field-label" for="diagramNodeTextInput">Text</label><input id="diagramNodeTextInput" type="color" value="#111111"></div>
</div>
<div class="field-grid two">
<div><label class="field-label" for="diagramNodeBorderInput">Border</label><input id="diagramNodeBorderInput" type="color" value="#111111"></div>
<div><label class="field-label" for="diagramNodeWidthInput">Width</label><input id="diagramNodeWidthInput" class="field" type="number" min="100" max="420" step="10"></div>
</div>
<div class="field-grid two">
<div><label class="field-label" for="diagramNodeRadiusInput">Radius</label><input id="diagramNodeRadiusInput" class="field" type="number" min="0" max="999"></div>
<div><label class="field-label" for="diagramNodeFontInput">Font size</label><input id="diagramNodeFontInput" class="field" type="number" min="9" max="30"></div>
</div>
<label class="check-row"><input id="diagramNodeBoldInput" type="checkbox" checked> Bold title</label>
</div>
</section>
<section class="control-section compact-actions">
<div class="action-row"><button class="button secondary grow" id="duplicateDiagramNodeBtn" type="button">Duplicate</button><button class="button danger grow" id="deleteDiagramNodeBtn" type="button">Delete</button></div>
</section>
</div>
<div id="diagramEdgeInspector" class="hidden">
<section class="control-section">
<div class="section-body diagram-inspector-body">
<label class="field-label" for="diagramEdgeLabelInput">Connection label</label>
<input id="diagramEdgeLabelInput" class="field" type="text" placeholder="e.g. Yes, Next, Submit">
<label class="field-label" for="diagramEdgeStyleInput">Line style</label>
<select id="diagramEdgeStyleInput" class="field"><option value="solid">Solid</option><option value="dashed">Dashed</option></select>
<label class="field-label" for="diagramEdgeColorInput">Color</label>
<input id="diagramEdgeColorInput" type="color" value="#777777">
<label class="check-row"><input id="diagramEdgeArrowInput" type="checkbox" checked> Arrow head</label>
</div>
</section>
<section class="control-section compact-actions"><button class="button danger full-width-button" id="deleteDiagramEdgeBtn" type="button">Delete connection</button></section>
</div>
</div>
</aside>
</main>
</div>
<button class="panel-reopen panel-reopen-left" id="workspaceReopenBtn" type="button" aria-label="Show workspace">☰ <span>Workspace</span></button>
<button class="panel-reopen panel-reopen-right" id="inspectorReopenBtn" type="button" aria-label="Show inspector">Inspector</button>
<div class="preview-mode-bar hidden" id="previewModeBar">
<div class="preview-mode-identity">
<span class="safe-pill inverse">PREVIEW</span>
<strong id="previewModePageName">Page preview</strong>
<span>Interactive mode</span>
</div>
<button class="button primary" id="previewExitBtn" type="button">Exit preview</button>
</div>
<div class="drawer-backdrop hidden" id="drawerBackdrop"></div>
<section class="code-drawer" id="codeDrawer" aria-hidden="true">
<div class="code-drawer-head">
<div>
<div class="eyebrow">Source</div>
<h2 id="codeDrawerTitle">HTML</h2>
</div>
<div class="code-actions">
<span class="code-status" id="codeStatus">In sync</span>
<button class="button secondary" id="formatCodeBtn" type="button">Format</button>
<button class="button secondary" id="applyCodeBtn" type="button">Apply changes</button>
<button class="icon-btn" id="closeCodeBtn" type="button">×</button>
</div>
</div>
<textarea id="codeEditor" class="code-editor" spellcheck="false" aria-label="HTML source code"></textarea>
</section>
<div class="modal-backdrop hidden" id="pasteModal">
<div class="modal-card large">
<div class="modal-head">
<div>
<div class="eyebrow">Import</div>
<h2>Paste HTML</h2>
</div>
<button class="icon-btn modal-close" data-close-modal="pasteModal" type="button">×</button>
</div>
<div class="modal-body">
<label class="field-label" for="pastePageName">Page name</label>
<input id="pastePageName" class="field" type="text" value="index.html">
<label class="field-label" for="pasteHtmlInput">HTML</label>
<textarea id="pasteHtmlInput" class="field paste-area" rows="18" placeholder="<!DOCTYPE html>…"></textarea>
</div>
<div class="modal-foot">
<button class="button secondary modal-close" data-close-modal="pasteModal" type="button">Cancel</button>
<button class="button primary" id="importPasteBtn" data-action="import-pasted-html" type="button">Import page</button>
</div>
</div>
</div>
<div class="modal-backdrop hidden" id="projectsModal">
<div class="modal-card large projects-card">
<div class="modal-head">
<div>
<div class="eyebrow">Google Drive</div>
<h2>Projects</h2>
</div>
<button class="icon-btn modal-close" id="projectsCloseBtn" data-close-modal="projectsModal" type="button">×</button>
</div>
<div class="modal-body projects-body">
<section class="project-current-card">
<div class="project-current-copy">
<div class="eyebrow">Current workspace</div>
<strong id="projectModalCurrentName">Untitled Project</strong>
<span id="projectModalCurrentStatus">Not saved to Google Drive</span>
</div>
<div class="project-current-actions">
<button class="button secondary" id="newProjectBtn" type="button">New project</button>
<button class="button secondary" id="saveAsProjectBtn" type="button">Save as…</button>
<button class="button primary" id="projectModalSaveBtn" type="button">Save</button>
</div>
</section>
<section class="project-save-as hidden" id="projectSaveAsPanel">
<label class="field-label" for="projectNameInput">Project name</label>
<div class="project-name-row">
<input id="projectNameInput" class="field" type="text" maxlength="120" placeholder="My HTML project" autocomplete="off">
<button class="button primary" id="confirmSaveAsProjectBtn" type="button">Save to Drive</button>
<button class="button secondary" id="cancelSaveAsProjectBtn" type="button">Cancel</button>
</div>
<div class="field-help">A project folder containing a manifest and individual HTML page files will be created in Google Drive.</div>
</section>
<section class="project-assets-card">
<div class="project-assets-copy">
<div class="eyebrow">Project assets</div>
<strong>Archive remote images</strong>
<span>When saving, download HTTP/HTTPS image URLs into this project's private Drive <code>assets/images</code> folder. Original HTML URLs stay unchanged.</span>
</div>
<label class="switch-row project-image-archive-toggle">
<input id="archiveProjectImagesInput" type="checkbox" checked>
<span>Save remote images to Drive</span>
</label>
<div class="project-asset-status" id="projectAssetStatus">No archived image assets yet.</div>
</section>
<div class="projects-list-head">
<div><div class="eyebrow">Saved projects</div><h3>Your Drive projects</h3></div>
<button class="button ghost" id="refreshProjectsBtn" type="button">Refresh</button>
</div>
<div class="projects-loading hidden" id="projectsLoading">Loading projects…</div>
<div class="projects-list" id="projectsList"></div>
<div class="project-storage-note">
<span>Projects continue to use the legacy <strong>My Drive / UnScriptly HTML Studio / Projects</strong> storage path so existing projects remain compatible with Design Studio.</span>
<a id="projectStorageLink" href="#" target="_blank" rel="noopener" class="text-link hidden">Open folder in Drive ↗</a>
</div>
</div>
</div>
</div>
<div class="modal-backdrop hidden" id="exportModal">
<div class="modal-card">
<div class="modal-head">
<div>
<div class="eyebrow">Export</div>
<h2>Take your HTML with you</h2>
</div>
<button class="icon-btn modal-close" data-close-modal="exportModal" type="button">×</button>
</div>
<div class="modal-body export-options">
<button class="export-option" id="exportCurrentBtn" type="button">
<span class="export-icon">⇩</span>
<span><strong>Current page</strong><small>Download the active page as an .html file.</small></span>
</button>
<button class="export-option" id="exportAllBtn" type="button">
<span class="export-icon">▦</span>
<span><strong>All pages</strong><small>Package every page in the workspace into a ZIP.</small></span>
</button>
<button class="export-option" id="exportPngCurrentBtn" type="button">
<span class="export-icon">▧</span>
<span><strong>Current page as PNG</strong><small>Render the active page as a full-page PNG image.</small></span>
</button>
<button class="export-option" id="exportPngAllBtn" type="button">
<span class="export-icon">▦</span>
<span><strong>All pages as PNG</strong><small>Render every loaded page and package the PNG files into a ZIP.</small></span>
</button>
<div class="export-group-label">Review exports</div>
<button class="export-option" id="exportWireframeCurrentBtn" type="button">
<span class="export-icon">▤</span>
<span><strong>Current wireframe HTML</strong><small>Download the active page as a structural skeleton wireframe with placeholder content.</small></span>
</button>
<button class="export-option" id="exportWireframePngBtn" type="button">
<span class="export-icon">▧</span>
<span><strong>Current wireframe PNG</strong><small>Render the structural skeleton wireframe as a full-page PNG.</small></span>
</button>
<button class="export-option" id="exportWireframeAllBtn" type="button">
<span class="export-icon">▦</span>
<span><strong>All wireframes</strong><small>Package every loaded page as wireframe HTML in a ZIP.</small></span>
</button>
<button class="export-option" id="exportCompareWidgetBtn" type="button">
<span class="export-icon">↔</span>
<span><strong>Wireframe → Hi-Fi widget</strong><small>Export an interactive before/after comparison, with optional editor notes.</small></span>
</button>
<div class="export-group-label">Source</div>
<button class="export-option" id="exportCopyBtn" type="button">
<span class="export-icon">⧉</span>
<span><strong>Copy HTML</strong><small>Copy the active page source to your clipboard.</small></span>
</button>
</div>
</div>
</div>
<div class="modal-backdrop hidden" id="settingsModal">
<div class="modal-card large settings-card">
<div class="modal-head">
<div>
<div class="eyebrow">Settings</div>
<h2>Global styles & editor settings</h2>
</div>
<button class="icon-btn modal-close" id="settingsCloseBtn" data-close-modal="settingsModal" type="button">×</button>
</div>
<div class="modal-body settings-body">
<div class="settings-intro">
<div>
<strong>Apply design changes in bulk</strong>
<p>Global styles are exported with your HTML as a small override stylesheet. Only enabled settings are changed.</p>
</div>
<div>
<label class="field-label" for="globalScopeInput">Scope</label>
<select id="globalScopeInput" class="field">
<option value="current">Current page</option>
<option value="all">All loaded pages</option>
</select>
</div>
</div>
<section class="settings-section">
<div class="settings-section-head"><div><div class="eyebrow">Typography</div><h3>Fonts & type rhythm</h3></div></div>
<div class="settings-grid two-col">
<div><label class="field-label" for="globalBodyFontInput">Base font</label><select id="globalBodyFontInput" class="field global-font-select">
<option value="__keep__">Keep current</option><option>Inter</option><option>Roboto</option><option>Open Sans</option><option>Lato</option><option>Montserrat</option><option>Poppins</option><option>DM Sans</option><option>Manrope</option><option>Plus Jakarta Sans</option><option>Space Grotesk</option><option>IBM Plex Sans</option><option>Nunito Sans</option><option>Work Sans</option><option>Source Sans 3</option><option>Merriweather</option><option>Playfair Display</option><option>Libre Baskerville</option><option>Arial</option><option>Georgia</option><option>Times New Roman</option><option>Verdana</option><option>Courier New</option>
</select></div>
<div><label class="field-label" for="globalHeadingFontInput">Heading font</label><select id="globalHeadingFontInput" class="field global-font-select">
<option value="__keep__">Keep current</option><option>Inter</option><option>Roboto</option><option>Open Sans</option><option>Lato</option><option>Montserrat</option><option>Poppins</option><option>DM Sans</option><option>Manrope</option><option>Plus Jakarta Sans</option><option>Space Grotesk</option><option>IBM Plex Sans</option><option>Nunito Sans</option><option>Work Sans</option><option>Source Sans 3</option><option>Merriweather</option><option>Playfair Display</option><option>Libre Baskerville</option><option>Arial</option><option>Georgia</option><option>Times New Roman</option><option>Verdana</option><option>Courier New</option>
</select></div>
<div><label class="field-label" for="globalFontSizeInput">Base size <span class="label-muted">px · blank keeps current</span></label><input id="globalFontSizeInput" class="field" type="number" min="8" max="48" placeholder="Unchanged"></div>
<div><label class="field-label" for="globalLineHeightInput">Line height</label><input id="globalLineHeightInput" class="field" type="text" placeholder="Unchanged · e.g. 1.6"></div>
<div><label class="field-label" for="globalHeadingWeightInput">Heading weight</label><select id="globalHeadingWeightInput" class="field"><option value="__keep__">Keep current</option><option value="400">400</option><option value="500">500</option><option value="600">600</option><option value="700">700</option><option value="800">800</option><option value="900">900</option></select></div>
</div>
</section>
<section class="settings-section">
<div class="settings-section-head"><div><div class="eyebrow">Color scheme</div><h3>Page & brand colors</h3></div></div>
<div class="color-setting-grid">
<label class="color-setting"><input id="globalUseBackground" type="checkbox"><span>Page background</span><input id="globalBackgroundColor" type="color" value="#ffffff"></label>
<label class="color-setting"><input id="globalUseText" type="checkbox"><span>Body text</span><input id="globalTextColor" type="color" value="#222222"></label>
<label class="color-setting"><input id="globalUseHeading" type="checkbox"><span>Headings</span><input id="globalHeadingColor" type="color" value="#111111"></label>
<label class="color-setting"><input id="globalUseAccent" type="checkbox"><span>Accent / primary</span><input id="globalAccentColor" type="color" value="#111111"></label>
<label class="color-setting"><input id="globalUseSurface" type="checkbox"><span>Cards / panels</span><input id="globalSurfaceColor" type="color" value="#f7f7f5"></label>
<label class="color-setting"><input id="globalUseBorder" type="checkbox"><span>Borders</span><input id="globalBorderColor" type="color" value="#dddddd"></label>
</div>
<div class="settings-inline-checks">
<label class="check-row"><input id="globalStyleLinks" type="checkbox" checked> Use accent for links</label>
<label class="check-row"><input id="globalStyleButtons" type="checkbox"> Use accent for buttons</label>
<label class="mini-color-field">Button text <input id="globalButtonTextColor" type="color" value="#ffffff"></label>
</div>
</section>
<section class="settings-section">
<div class="settings-section-head"><div><div class="eyebrow">Element details</div><h3>Shape & depth</h3></div></div>
<div class="settings-grid four-col">
<div><label class="field-label" for="globalButtonRadiusInput">Button radius</label><input id="globalButtonRadiusInput" class="field" type="number" min="0" max="100" placeholder="Unchanged"></div>
<div><label class="field-label" for="globalCardRadiusInput">Card radius</label><input id="globalCardRadiusInput" class="field" type="number" min="0" max="100" placeholder="Unchanged"></div>
<div><label class="field-label" for="globalMediaRadiusInput">Media radius</label><input id="globalMediaRadiusInput" class="field" type="number" min="0" max="100" placeholder="Unchanged"></div>
<div><label class="field-label" for="globalControlRadiusInput">Input radius</label><input id="globalControlRadiusInput" class="field" type="number" min="0" max="100" placeholder="Unchanged"></div>
<div><label class="field-label" for="globalShadowInput">Card shadow</label><select id="globalShadowInput" class="field"><option value="keep">Keep current</option><option value="none">None</option><option value="soft">Soft</option><option value="medium">Medium</option></select></div>
</div>
</section>
<section class="settings-section interface-settings">
<div><div class="eyebrow">Editor</div><h3>Interface</h3></div>
<label class="check-row"><input id="showCanvasGridInput" type="checkbox" checked> Show canvas grid</label>
</section>
<section class="settings-section github-settings-section" id="githubSettingsSection">
<div class="settings-section-head github-settings-head">
<div><div class="eyebrow">Integration</div><h3>GitHub</h3><p>Connect a repository to import HTML, commit edited pages, and publish Drive media to GitHub-hosted URLs.</p></div>
<span class="github-connection-badge disconnected" id="githubConnectionBadge">Not connected</span>
</div>
<div class="github-account-row">
<div class="field-help" id="githubAccountSummary">Connect a fine-grained personal access token. The token is stored server-side in Apps Script UserProperties.</div>
<button class="button secondary small hidden" id="githubDisconnectBtn" type="button">Disconnect</button>
</div>
<div class="github-connect-block" id="githubConnectBlock">
<label class="field-label" for="githubTokenInput">Personal access token</label>
<div class="github-inline-row">
<input id="githubTokenInput" class="field" type="password" autocomplete="off" placeholder="github_pat_… or ghp_…">
<button class="button primary" id="githubConnectBtn" type="button">Connect GitHub</button>
</div>
<div class="field-help">Recommended: a fine-grained token restricted to the repository you want to use, with repository Contents read/write permission.</div>
</div>
<div class="github-repository-block hidden" id="githubRepositoryBlock">
<div class="settings-grid two-col">
<div>
<label class="field-label" for="githubRepoSelect">Accessible repositories</label>
<div class="github-inline-row">
<select id="githubRepoSelect" class="field"><option value="">Choose accessible repository…</option></select>
<button class="button secondary small" id="githubRefreshReposBtn" type="button">Refresh</button>
</div>
</div>
<div><label class="field-label" for="githubRepoInput">Repository <span class="label-muted">owner/repository</span></label><input id="githubRepoInput" class="field" type="text" placeholder="owner/repository"></div>
<div><label class="field-label" for="githubBranchInput">Branch</label><input id="githubBranchInput" class="field" type="text" value="main" placeholder="main"></div>