Skip to content

Commit 498eef8

Browse files
FigshFigsh
authored
Create builder.html
1 parent a5dba73 commit 498eef8

1 file changed

Lines changed: 228 additions & 0 deletions

File tree

‎builder.html‎

Lines changed: 228 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,228 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<title>Builder | devtemDesign Visual Page Builder</title><meta name="description" content="Create landing pages, portfolios, SaaS websites, documentation sites, and custom layouts visually with devtemDesign Builder. Design, preview, customize, and export production-ready configurations and code."><meta name="keywords" content="devtemDesign builder, visual page builder, landing page builder, portfolio website builder, website generator, frontend builder, configuration builder, UI builder, website designer, export HTML, export configuration, no code builder, low code website builder"><meta name="author" content="DevTemple">
8+
<meta name="robots" content="index, follow">
9+
<meta name="theme-color" content="#00ffff"><link rel="canonical" href="https://design.devtem.org/builder"><!-- Open Graph --><meta property="og:type" content="website">
10+
<meta property="og:site_name" content="devtemDesign">
11+
<meta property="og:title" content="Builder | devtemDesign Visual Page Builder">
12+
<meta property="og:description" content="Design landing pages, portfolios, SaaS websites, and custom layouts visually. Export production-ready configurations and code instantly.">
13+
<meta property="og:url" content="https://design.devtem.org/builder">
14+
<meta property="og:image" content="https://design.devtem.org/assets/images/og.jpg"><!-- Twitter --><meta name="twitter:card" content="summary_large_image">
15+
<meta name="twitter:title" content="Builder | devtemDesign">
16+
<meta name="twitter:description" content="Visual builder for creating landing pages, portfolios, documentation sites, and custom web experiences.">
17+
<meta name="twitter:image" content="https://design.devtem.org/assets/images/og.jpg"><!-- Structured Data --><script type="application/ld+json">
18+
{
19+
"@context": "https://schema.org",
20+
"@type": "WebApplication",
21+
"name": "devtemDesign Builder",
22+
"applicationCategory": "DeveloperApplication",
23+
"operatingSystem": "Web",
24+
"url": "https://design.devtem.org/builder",
25+
"image": "https://design.devtem.org/assets/images/og.jpg",
26+
"description": "Visual page builder for generating landing pages, portfolios, SaaS websites, and exportable devtemDesign configurations.",
27+
"creator": {
28+
"@type": "Organization",
29+
"name": "DevTemple"
30+
}
31+
}
32+
</script>
33+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
34+
<link rel="stylesheet" href="/css/builder.css">
35+
</head>
36+
<body>
37+
38+
<!-- HEADER -->
39+
<header class="app-header">
40+
<div class="brand"><i class="fas fa-cube" aria-hidden="true"></i> devtemDesign</div>
41+
<span class="sep">/</span>
42+
<span class="sub">Builder</span>
43+
<div class="header-right">
44+
<div class="header-links">
45+
<a href="https://design.devtem.org/docs" target="_blank" rel="noreferrer" title="Docs"><i class="fas fa-book"></i></a>
46+
<a href="https://www.npmjs.com/package/devtemdesign" target="_blank" rel="noreferrer" title="npm"><i class="fab fa-npm"></i></a>
47+
<a href="https://github.com/devtem-dev/devtemDesign" target="_blank" rel="noreferrer" title="GitHub"><i class="fab fa-github"></i></a>
48+
<a href="https://devtem.org" target="_blank" rel="noreferrer" title="DevTemple"><i class="fas fa-store"></i></a>
49+
</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>
53+
</div>
54+
</div>
55+
</header>
56+
57+
<!-- GENERATE BAR -->
58+
<div class="gen-bar">
59+
<div>
60+
<div class="field-label"><i class="fas fa-pen-fancy"></i> Description</div>
61+
<textarea id="desc" rows="2" placeholder="e.g. I'm a freelance UI designer specializing in SaaS dashboards…"></textarea>
62+
</div>
63+
<div>
64+
<div class="field-label"><i class="fas fa-file-alt"></i> Page type</div>
65+
<div class="toggle-group">
66+
<button class="toggle-btn active" data-type="landing"><i class="fas fa-landmark"></i> Landing</button>
67+
<button class="toggle-btn" data-type="portfolio"><i class="fas fa-briefcase"></i> Portfolio</button>
68+
</div>
69+
</div>
70+
<div>
71+
<div class="field-label"><i class="fas fa-palette"></i> Template</div>
72+
<div class="template-grid">
73+
<button class="tpl-btn active" data-tpl="figsh"><span class="tpl-name">Figsh</span><span class="tpl-desc">Glass · cyan/purple</span></button>
74+
<button class="tpl-btn" data-tpl="cyber"><span class="tpl-name">Cyber</span><span class="tpl-desc">Neon · cyan/magenta</span></button>
75+
<button class="tpl-btn" data-tpl="aurora"><span class="tpl-name">Aurora</span><span class="tpl-desc">Organic · emerald/violet</span></button>
76+
<button class="tpl-btn" data-tpl="monochrome"><span class="tpl-name">Mono</span><span class="tpl-desc">Minimal grayscale</span></button>
77+
</div>
78+
</div>
79+
<div class="gen-btn-wrap">
80+
<button id="generate-btn" disabled>
81+
<i class="fas fa-rocket"></i> Generate page
82+
</button>
83+
</div>
84+
</div>
85+
86+
<!-- ERROR -->
87+
<div id="error-box" role="alert"><i class="fas fa-circle-exclamation"></i><span id="error-text"></span></div>
88+
89+
<!-- APP BODY: sidebar + preview -->
90+
<div class="app-body">
91+
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;">
99+
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>
117+
</div>
118+
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>
133+
</div>
134+
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>
148+
</div>
149+
</div>
150+
</div>
151+
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>
161+
</div>
162+
</div>
163+
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>
177+
</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>
182+
</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>
187+
</div>
188+
</div>
189+
</div>
190+
191+
</div><!-- /editor-scroll -->
192+
</div><!-- /editor-sidebar -->
193+
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>
201+
</div>
202+
</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>
210+
211+
</div><!-- /app-body -->
212+
213+
<!-- FOOTER -->
214+
<footer class="app-footer">
215+
<a href="https://design.devtem.org/docs" target="_blank" rel="noreferrer"><i class="fas fa-book"></i> docs</a>
216+
<span class="fsep">·</span>
217+
<a href="https://www.npmjs.com/package/devtemdesign" target="_blank" rel="noreferrer"><i class="fab fa-npm"></i> npm</a>
218+
<span class="fsep">·</span>
219+
<a href="https://github.com/devtem-dev/devtemDesign" target="_blank" rel="noreferrer"><i class="fab fa-github"></i> GitHub</a>
220+
<span class="fsep">·</span>
221+
<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>
224+
</footer>
225+
226+
<script src="/js/builder.js"></script>
227+
</body>
228+
</html>

0 commit comments

Comments
 (0)