Skip to content

Commit 348b771

Browse files
FigshFigsh
authored
Refactor header and sidebar structure in builder.html
1 parent 55437db commit 348b771

1 file changed

Lines changed: 133 additions & 107 deletions

File tree

‎builder.html‎

Lines changed: 133 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -37,19 +37,23 @@
3737

3838
<!-- HEADER -->
3939
<header class="app-header">
40-
<div class="brand"><i class="fas fa-cube" aria-hidden="true"></i> devtemDesign</div>
40+
<div class="brand"><i class="fas fa-cube"></i> devtemDesign</div>
4141
<span class="sep">/</span>
4242
<span class="sub">Builder</span>
4343
<div class="header-right">
44+
<a class="proj-toggle-btn" href="projects" title="Your saved projects">
45+
<i class="fas fa-folder-open"></i> Projects
46+
<span class="proj-count" id="proj-count">0</span>
47+
</a>
4448
<div class="header-links">
4549
<a href="https://design.devtem.org/docs" target="_blank" rel="noreferrer" title="Docs"><i class="fas fa-book"></i></a>
4650
<a href="https://www.npmjs.com/package/devtemdesign" target="_blank" rel="noreferrer" title="npm"><i class="fab fa-npm"></i></a>
4751
<a href="https://github.com/devtem-dev/devtemDesign" target="_blank" rel="noreferrer" title="GitHub"><i class="fab fa-github"></i></a>
4852
<a href="https://devtem.org" target="_blank" rel="noreferrer" title="DevTemple"><i class="fas fa-store"></i></a>
4953
</div>
50-
<div class="theme-toggle" role="group" aria-label="Theme">
51-
<button class="theme-btn active" id="btn-dark" title="Dark mode"><i class="fas fa-moon"></i></button>
52-
<button class="theme-btn" id="btn-light" title="Light mode"><i class="fas fa-sun"></i></button>
54+
<div class="theme-toggle">
55+
<button class="theme-btn active" id="btn-dark" title="Dark"><i class="fas fa-moon"></i></button>
56+
<button class="theme-btn" id="btn-light" title="Light"><i class="fas fa-sun"></i></button>
5357
</div>
5458
</div>
5559
</header>
@@ -86,130 +90,153 @@
8690
<!-- ERROR -->
8791
<div id="error-box" role="alert"><i class="fas fa-circle-exclamation"></i><span id="error-text"></span></div>
8892

89-
<!-- APP BODY: sidebar + preview -->
93+
<!-- APP BODY -->
9094
<div class="app-body">
9195

92-
<!-- EDITOR SIDEBAR -->
93-
<div class="editor-sidebar" id="editor-sidebar">
94-
<div class="sidebar-placeholder" id="sidebar-placeholder">
95-
<i class="fas fa-wand-magic-sparkles"></i>
96-
<span>Generate a page to start editing</span>
97-
</div>
98-
<div class="editor-scroll" id="editor-scroll" style="display:none;">
96+
<!-- WORK AREA -->
97+
<div class="work-area">
9998

100-
<!-- HERO -->
101-
<div class="ed-section open" id="sec-hero">
102-
<div class="ed-head" data-sec="hero">
103-
<div class="ed-title"><i class="fas fa-display"></i> Hero</div>
104-
<i class="fas fa-chevron-down ed-chevron"></i>
105-
</div>
106-
<div class="ed-body">
107-
<div class="f-row"><label>Logo name</label><input id="e-logoName" type="text"></div>
108-
<div class="f-row"><label>Logo image URL</label><input id="e-logoUrl" type="text" placeholder="https://..."></div>
109-
<div class="f-row"><label>Tagline</label><input id="e-heroTag" type="text"></div>
110-
<div class="f-row"><label>Title line 1</label><input id="e-heroLine1" type="text"></div>
111-
<div class="f-row"><label>Title line 2</label><input id="e-heroLine2" type="text"></div>
112-
<div class="f-row"><label>Subtitle</label><textarea id="e-heroSubtitle" rows="2"></textarea></div>
113-
<div class="f-row"><label>Primary button</label><input id="e-primaryBtn" type="text"></div>
114-
<div class="f-row"><label>Secondary button</label><input id="e-secondaryBtn" type="text"></div>
115-
<div class="f-row"><label>Nav CTA text</label><input id="e-ctaText" type="text"></div>
116-
</div>
99+
<!-- EDITOR SIDEBAR -->
100+
<div class="editor-sidebar">
101+
<div class="sidebar-toolbar">
102+
<span class="st-label">Editor</span>
103+
<!-- save btn shown once cfg exists -->
104+
<button class="btn-save" id="save-btn" style="display:none;" title="Save project">
105+
<i class="fas fa-floppy-disk"></i> Save project
106+
</button>
117107
</div>
118108

119-
<!-- BRANDS -->
120-
<div class="ed-section" id="sec-brands">
121-
<div class="ed-head" data-sec="brands">
122-
<div class="ed-title"><i class="fas fa-building"></i> Brands</div>
123-
<i class="fas fa-chevron-down ed-chevron"></i>
124-
</div>
125-
<div class="ed-body">
126-
<div class="f-row"><label>Ticker subtitle</label><input id="e-brandsSubtitle" type="text"></div>
127-
<div class="f-row">
128-
<label>Brand names <span class="f-hint">(click name to edit)</span></label>
129-
<div class="list-wrap" id="brandsList"></div>
130-
<button class="btn-add" id="addBrandBtn"><i class="fas fa-plus"></i> Add brand</button>
131-
</div>
132-
</div>
109+
<div class="sidebar-placeholder" id="sidebar-placeholder">
110+
<i class="fas fa-wand-magic-sparkles"></i>
111+
<span>Generate a page to start editing</span>
133112
</div>
134113

135-
<!-- FEATURES -->
136-
<div class="ed-section" id="sec-features">
137-
<div class="ed-head" data-sec="features">
138-
<div class="ed-title"><i class="fas fa-star"></i> Features / Cards</div>
139-
<i class="fas fa-chevron-down ed-chevron"></i>
140-
</div>
141-
<div class="ed-body">
142-
<div class="f-row"><label>Section label</label><input id="e-featuresLabel" type="text"></div>
143-
<div class="f-row"><label>Section title</label><input id="e-featuresTitle" type="text"></div>
144-
<div class="f-row">
145-
<label>Cards</label>
146-
<div class="list-wrap" id="featuresList"></div>
147-
<button class="btn-add" id="addFeatureBtn"><i class="fas fa-plus"></i> Add card</button>
114+
<div class="editor-scroll" id="editor-scroll" style="display:none;">
115+
116+
<!-- HERO -->
117+
<div class="ed-section open" id="sec-hero">
118+
<div class="ed-head"><div class="ed-title"><i class="fas fa-display"></i> Hero</div><i class="fas fa-chevron-down ed-chevron"></i></div>
119+
<div class="ed-body">
120+
<div class="f-row"><label>Logo name</label><input id="e-logoName" type="text"></div>
121+
<div class="f-row"><label>Logo URL</label><input id="e-logoUrl" type="text" placeholder="https://..."></div>
122+
<div class="f-row"><label>Tagline</label><input id="e-heroTag" type="text"></div>
123+
<div class="f-row"><label>Title line 1</label><input id="e-heroLine1" type="text"></div>
124+
<div class="f-row"><label>Title line 2</label><input id="e-heroLine2" type="text"></div>
125+
<div class="f-row"><label>Subtitle</label><textarea id="e-heroSubtitle" rows="2"></textarea></div>
126+
<div class="f-row"><label>Primary button</label><input id="e-primaryBtn" type="text"></div>
127+
<div class="f-row"><label>Secondary button</label><input id="e-secondaryBtn" type="text"></div>
128+
<div class="f-row"><label>Nav CTA</label><input id="e-ctaText" type="text"></div>
148129
</div>
149130
</div>
150-
</div>
151131

152-
<!-- PANELS -->
153-
<div class="ed-section" id="sec-panels">
154-
<div class="ed-head" data-sec="panels">
155-
<div class="ed-title"><i class="fas fa-layer-group"></i> Panels</div>
156-
<i class="fas fa-chevron-down ed-chevron"></i>
157-
</div>
158-
<div class="ed-body">
159-
<div class="list-wrap" id="panelsList"></div>
160-
<button class="btn-add" id="addPanelBtn"><i class="fas fa-plus"></i> Add panel</button>
132+
<!-- BRANDS -->
133+
<div class="ed-section" id="sec-brands">
134+
<div class="ed-head"><div class="ed-title"><i class="fas fa-building"></i> Brands</div><i class="fas fa-chevron-down ed-chevron"></i></div>
135+
<div class="ed-body">
136+
<div class="f-row"><label>Ticker subtitle</label><input id="e-brandsSubtitle" type="text"></div>
137+
<div class="f-row">
138+
<label>Brand names</label>
139+
<div class="list-wrap" id="brandsList"></div>
140+
<button class="btn-add" id="addBrandBtn"><i class="fas fa-plus"></i> Add brand</button>
141+
</div>
142+
</div>
161143
</div>
162-
</div>
163144

164-
<!-- FOOTER -->
165-
<div class="ed-section" id="sec-footer">
166-
<div class="ed-head" data-sec="footer">
167-
<div class="ed-title"><i class="fas fa-print"></i> Footer</div>
168-
<i class="fas fa-chevron-down ed-chevron"></i>
169-
</div>
170-
<div class="ed-body">
171-
<div class="f-row"><label>Tagline</label><input id="e-footerTagline" type="text"></div>
172-
<div class="f-row"><label>Copyright</label><input id="e-footerCopy" type="text"></div>
173-
<div class="f-row">
174-
<label>Columns</label>
175-
<div class="list-wrap" id="footerColumnsList"></div>
176-
<button class="btn-add" id="addColumnBtn"><i class="fas fa-plus"></i> Add column</button>
145+
<!-- FEATURES -->
146+
<div class="ed-section" id="sec-features">
147+
<div class="ed-head"><div class="ed-title"><i class="fas fa-star"></i> Features / Cards</div><i class="fas fa-chevron-down ed-chevron"></i></div>
148+
<div class="ed-body">
149+
<div class="f-row"><label>Section label</label><input id="e-featuresLabel" type="text"></div>
150+
<div class="f-row"><label>Section title</label><input id="e-featuresTitle" type="text"></div>
151+
<div class="f-row">
152+
<label>Cards</label>
153+
<div class="list-wrap" id="featuresList"></div>
154+
<button class="btn-add" id="addFeatureBtn"><i class="fas fa-plus"></i> Add card</button>
155+
</div>
177156
</div>
178-
<div class="f-row">
179-
<label>Social links</label>
180-
<div class="list-wrap" id="socialLinksList"></div>
181-
<button class="btn-add" id="addSocialBtn"><i class="fas fa-plus"></i> Add social</button>
157+
</div>
158+
159+
<!-- PANELS -->
160+
<div class="ed-section" id="sec-panels">
161+
<div class="ed-head"><div class="ed-title"><i class="fas fa-layer-group"></i> Panels</div><i class="fas fa-chevron-down ed-chevron"></i></div>
162+
<div class="ed-body">
163+
<div class="list-wrap" id="panelsList"></div>
164+
<button class="btn-add" id="addPanelBtn"><i class="fas fa-plus"></i> Add panel</button>
182165
</div>
183-
<div class="f-row">
184-
<label>Legal links</label>
185-
<div class="list-wrap" id="legalLinksList"></div>
186-
<button class="btn-add" id="addLegalBtn"><i class="fas fa-plus"></i> Add legal link</button>
166+
</div>
167+
168+
<!-- FOOTER -->
169+
<div class="ed-section" id="sec-footer">
170+
<div class="ed-head"><div class="ed-title"><i class="fas fa-print"></i> Footer</div><i class="fas fa-chevron-down ed-chevron"></i></div>
171+
<div class="ed-body">
172+
<div class="f-row"><label>Tagline</label><input id="e-footerTagline" type="text"></div>
173+
<div class="f-row"><label>Copyright</label><input id="e-footerCopy" type="text"></div>
174+
<div class="f-row">
175+
<label>Columns</label>
176+
<div class="list-wrap" id="footerColumnsList"></div>
177+
<button class="btn-add" id="addColumnBtn"><i class="fas fa-plus"></i> Add column</button>
178+
</div>
179+
<div class="f-row">
180+
<label>Social links</label>
181+
<div class="list-wrap" id="socialLinksList"></div>
182+
<button class="btn-add" id="addSocialBtn"><i class="fas fa-plus"></i> Add social</button>
183+
</div>
184+
<div class="f-row">
185+
<label>Legal links</label>
186+
<div class="list-wrap" id="legalLinksList"></div>
187+
<button class="btn-add" id="addLegalBtn"><i class="fas fa-plus"></i> Add legal</button>
188+
</div>
187189
</div>
188190
</div>
189-
</div>
190191

191-
</div><!-- /editor-scroll -->
192-
</div><!-- /editor-sidebar -->
192+
</div><!-- /editor-scroll -->
193+
</div><!-- /editor-sidebar -->
193194

194-
<!-- PREVIEW PANE -->
195-
<div class="preview-pane">
196-
<div class="preview-toolbar">
197-
<span class="pt-label"><i class="fas fa-eye"></i> Live preview</span>
198-
<div style="display:flex;gap:8px;">
199-
<button class="btn-ghost" id="copy-btn"><i class="fas fa-copy"></i> Copy HTML</button>
200-
<button class="btn-solid" id="export-btn"><i class="fas fa-download"></i> Export HTML</button>
195+
<!-- PREVIEW PANE -->
196+
<div class="preview-pane">
197+
<div class="preview-toolbar">
198+
<span class="pt-label"><i class="fas fa-eye"></i> Live preview</span>
199+
<div class="pt-actions">
200+
<button class="btn-ghost" id="copy-btn"><i class="fas fa-copy"></i> Copy HTML</button>
201+
<button class="btn-solid" id="export-btn"><i class="fas fa-download"></i> Export</button>
202+
</div>
201203
</div>
204+
<div class="preview-empty" id="preview-empty">
205+
<i class="fas fa-display"></i>
206+
<span>Your page will appear here</span>
207+
<span class="pe-hint">Fill in the description above and hit Generate page</span>
208+
</div>
209+
<iframe id="preview-frame" sandbox="allow-scripts allow-same-origin" title="Live preview"></iframe>
202210
</div>
203-
<div class="preview-empty" id="preview-empty">
204-
<i class="fas fa-display"></i>
205-
<span>Your page will appear here</span>
206-
<span class="pe-hint">Fill in the description above and hit Generate page</span>
207-
</div>
208-
<iframe id="preview-frame" sandbox="allow-scripts allow-same-origin" title="Live preview" style="display:none;"></iframe>
209-
</div>
210211

212+
</div><!-- /work-area -->
211213
</div><!-- /app-body -->
212214

215+
<!-- PREVIEW MODAL -->
216+
<div class="preview-modal" id="preview-modal">
217+
<div class="modal-bar">
218+
<span class="modal-title" id="modal-title">Preview</span>
219+
<button class="btn-ghost" id="modal-export-btn"><i class="fas fa-download"></i> Export</button>
220+
<button class="modal-close" id="modal-close"><i class="fas fa-times"></i> Close</button>
221+
</div>
222+
<iframe id="modal-frame" sandbox="allow-scripts allow-same-origin" title="Project preview"></iframe>
223+
</div>
224+
225+
<!-- SAVE DIALOG -->
226+
<div class="save-dialog" id="save-dialog">
227+
<div class="save-box">
228+
<h3><i class="fas fa-floppy-disk"></i> &nbsp;Save project</h3>
229+
<div>
230+
<label>Project name</label>
231+
<input id="save-name-input" type="text" placeholder="e.g. My Portfolio" style="margin-top:5px;">
232+
</div>
233+
<div class="save-box-actions">
234+
<button class="save-cancel" id="save-cancel">Cancel</button>
235+
<button class="save-confirm" id="save-confirm">Save</button>
236+
</div>
237+
</div>
238+
</div>
239+
213240
<!-- FOOTER -->
214241
<footer class="app-footer">
215242
<a href="https://design.devtem.org/docs" target="_blank" rel="noreferrer"><i class="fas fa-book"></i> docs</a>
@@ -219,10 +246,9 @@
219246
<a href="https://github.com/devtem-dev/devtemDesign" target="_blank" rel="noreferrer"><i class="fab fa-github"></i> GitHub</a>
220247
<span class="fsep">·</span>
221248
<a href="https://devtem.org" target="_blank" rel="noreferrer"><i class="fas fa-store"></i> DevTemple</a>
222-
<span class="fsep">·</span>
223-
<span style="color:var(--border)">MIT</span>
224249
</footer>
225250

226251
<script src="/js/builder.js"></script>
227252
</body>
228253
</html>
254+

0 commit comments

Comments
 (0)