2026-02-28 19:25:42 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>Site Builder</title>
|
|
|
|
|
|
|
|
|
|
<!-- GrapesJS Core -->
|
|
|
|
|
<link rel="stylesheet" href="vendor/grapes.min.css">
|
|
|
|
|
|
|
|
|
|
<!-- Font Awesome for block icons -->
|
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
|
|
|
|
|
|
|
|
|
|
<!-- Custom Editor Styles -->
|
|
|
|
|
<link rel="stylesheet" href="css/editor.css">
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<!-- Top Navigation Bar -->
|
|
|
|
|
<nav class="editor-nav">
|
|
|
|
|
<div class="nav-left">
|
|
|
|
|
<span class="logo">Site Builder</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="nav-center">
|
|
|
|
|
<button id="device-desktop" class="device-btn active" title="Desktop">
|
|
|
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
|
|
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
|
|
|
|
|
<line x1="8" y1="21" x2="16" y2="21"></line>
|
|
|
|
|
<line x1="12" y1="17" x2="12" y2="21"></line>
|
|
|
|
|
</svg>
|
|
|
|
|
</button>
|
|
|
|
|
<button id="device-tablet" class="device-btn" title="Tablet">
|
|
|
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
|
|
<rect x="4" y="2" width="16" height="20" rx="2" ry="2"></rect>
|
|
|
|
|
<line x1="12" y1="18" x2="12" y2="18"></line>
|
|
|
|
|
</svg>
|
|
|
|
|
</button>
|
|
|
|
|
<button id="device-mobile" class="device-btn" title="Mobile">
|
|
|
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
|
|
<rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect>
|
|
|
|
|
<line x1="12" y1="18" x2="12" y2="18"></line>
|
|
|
|
|
</svg>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="nav-right">
|
|
|
|
|
<button id="btn-undo" class="nav-btn" title="Undo">
|
|
|
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
|
|
<path d="M3 7v6h6"></path>
|
|
|
|
|
<path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"></path>
|
|
|
|
|
</svg>
|
|
|
|
|
</button>
|
|
|
|
|
<button id="btn-redo" class="nav-btn" title="Redo">
|
|
|
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
|
|
<path d="M21 7v6h-6"></path>
|
|
|
|
|
<path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3L21 13"></path>
|
|
|
|
|
</svg>
|
|
|
|
|
</button>
|
|
|
|
|
<span class="divider"></span>
|
|
|
|
|
<button id="btn-clear" class="nav-btn" title="Clear Canvas">
|
|
|
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
|
|
<polyline points="3 6 5 6 21 6"></polyline>
|
|
|
|
|
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
|
|
|
|
|
</svg>
|
|
|
|
|
</button>
|
|
|
|
|
<button id="btn-templates" class="nav-btn" title="Templates">
|
|
|
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
|
|
<rect x="3" y="3" width="7" height="7"></rect>
|
|
|
|
|
<rect x="14" y="3" width="7" height="7"></rect>
|
|
|
|
|
<rect x="14" y="14" width="7" height="7"></rect>
|
|
|
|
|
<rect x="3" y="14" width="7" height="7"></rect>
|
|
|
|
|
</svg>
|
|
|
|
|
<span>Templates</span>
|
|
|
|
|
</button>
|
|
|
|
|
<span class="divider"></span>
|
|
|
|
|
<button id="btn-export" class="nav-btn" title="Export HTML/CSS">
|
|
|
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
|
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
|
|
|
|
<polyline points="7 10 12 15 17 10"></polyline>
|
|
|
|
|
<line x1="12" y1="15" x2="12" y2="3"></line>
|
|
|
|
|
</svg>
|
|
|
|
|
<span>Export</span>
|
|
|
|
|
</button>
|
|
|
|
|
<button id="btn-view-code" class="nav-btn" title="View Page HTML">
|
|
|
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
|
|
<polyline points="16 18 22 12 16 6"></polyline>
|
|
|
|
|
<polyline points="8 6 2 12 8 18"></polyline>
|
|
|
|
|
</svg>
|
|
|
|
|
<span>Code</span>
|
|
|
|
|
</button>
|
|
|
|
|
<button id="btn-preview" class="nav-btn primary" title="Preview">
|
|
|
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
|
|
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
|
|
|
|
|
<circle cx="12" cy="12" r="3"></circle>
|
|
|
|
|
</svg>
|
|
|
|
|
<span>Preview</span>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</nav>
|
|
|
|
|
|
|
|
|
|
<!-- Main Editor Container -->
|
|
|
|
|
<div class="editor-container">
|
|
|
|
|
<!-- Left Panel - Blocks -->
|
|
|
|
|
<div class="panel-left">
|
|
|
|
|
<div class="panel-header">
|
|
|
|
|
<button class="panel-tab active" data-panel="blocks">Blocks</button>
|
|
|
|
|
<button class="panel-tab" data-panel="pages">Pages</button>
|
|
|
|
|
<button class="panel-tab" data-panel="layers">Layers</button>
|
|
|
|
|
<button class="panel-tab" data-panel="assets">Assets</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="blocks-container" class="panel-content"></div>
|
|
|
|
|
<div id="pages-container" class="panel-content" style="display: none;">
|
|
|
|
|
<div class="pages-header">
|
|
|
|
|
<button id="add-page-btn" class="add-page-btn">
|
|
|
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
|
|
<line x1="12" y1="5" x2="12" y2="19"></line>
|
|
|
|
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
|
|
|
</svg>
|
|
|
|
|
Add Page
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="pages-list" class="pages-list">
|
|
|
|
|
<!-- Pages will be added here dynamically -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="layers-container" class="panel-content" style="display: none;"></div>
|
|
|
|
|
<div id="assets-container" class="panel-content" style="display: none;">
|
|
|
|
|
<div class="assets-header" style="padding:12px;">
|
|
|
|
|
<div style="display:flex;gap:8px;margin-bottom:12px;">
|
|
|
|
|
<input type="file" id="asset-upload-input" multiple accept="image/*,video/*,application/pdf,.doc,.docx,.xls,.xlsx" style="display:none;">
|
|
|
|
|
<button id="asset-upload-btn" class="add-page-btn" style="width:100%;">
|
|
|
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
|
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
|
|
|
|
<polyline points="17 8 12 3 7 8"></polyline>
|
|
|
|
|
<line x1="12" y1="3" x2="12" y2="15"></line>
|
|
|
|
|
</svg>
|
|
|
|
|
Upload Files
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<input type="text" id="asset-url-input" class="guided-input" placeholder="Or paste URL..." style="margin-bottom:8px;">
|
|
|
|
|
<button id="asset-add-url-btn" class="add-page-btn" style="width:100%;">Add URL</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="assets-grid" class="assets-grid" style="padding:0 12px;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;overflow-y:auto;">
|
|
|
|
|
<!-- Assets will be populated here -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Center - Canvas -->
|
|
|
|
|
<div class="editor-canvas">
|
|
|
|
|
<div id="gjs"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Right Panel - Styles -->
|
|
|
|
|
<div class="panel-right">
|
|
|
|
|
<div class="panel-header">
|
|
|
|
|
<button class="panel-tab active" data-panel="styles">Styles</button>
|
|
|
|
|
<button class="panel-tab" data-panel="traits">Settings</button>
|
|
|
|
|
<button class="panel-tab" data-panel="head">Head</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Style Mode Toggle -->
|
|
|
|
|
<div class="style-mode-toggle">
|
|
|
|
|
<button id="mode-guided" class="mode-btn active">Guided</button>
|
|
|
|
|
<button id="mode-advanced" class="mode-btn">Advanced</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="styles-container" class="panel-content">
|
|
|
|
|
<!-- Guided Styles -->
|
|
|
|
|
<div id="guided-styles" class="guided-panel">
|
|
|
|
|
<!-- No Selection Message -->
|
|
|
|
|
<div id="no-selection-msg" class="guided-section">
|
|
|
|
|
<p class="no-selection-text">Select an element on the canvas to edit its styles</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Link Settings (for links/buttons) -->
|
|
|
|
|
<div id="section-link" class="guided-section context-section" style="display:none;">
|
|
|
|
|
<label>Link Type</label>
|
|
|
|
|
<select id="link-type-select" class="guided-select" style="margin-bottom:8px;">
|
|
|
|
|
<option value="url">External URL</option>
|
|
|
|
|
<option value="page">Page Link</option>
|
|
|
|
|
<option value="anchor">Anchor on Page</option>
|
|
|
|
|
</select>
|
|
|
|
|
<div id="link-url-group">
|
|
|
|
|
<label>URL</label>
|
|
|
|
|
<input type="text" id="link-url-input" class="guided-input" placeholder="https://example.com">
|
|
|
|
|
</div>
|
|
|
|
|
<div id="link-page-group" style="display:none;">
|
|
|
|
|
<label>Page</label>
|
|
|
|
|
<select id="link-page-select" class="guided-select"></select>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="link-anchor-group" style="display:none;">
|
|
|
|
|
<label>Anchor</label>
|
|
|
|
|
<select id="link-anchor-select" class="guided-select">
|
|
|
|
|
<option value="">-- Select Anchor --</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="link-options">
|
|
|
|
|
<label class="checkbox-label">
|
|
|
|
|
<input type="checkbox" id="link-new-tab"> Open in new tab
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Text Color (for text elements) -->
|
|
|
|
|
<div id="section-text-color" class="guided-section context-section" style="display:none;">
|
|
|
|
|
<label>Text Color</label>
|
|
|
|
|
<div class="color-presets" data-target="text">
|
|
|
|
|
<button class="color-preset text-color" data-color="#1f2937" style="background:#1f2937"></button>
|
|
|
|
|
<button class="color-preset text-color" data-color="#374151" style="background:#374151"></button>
|
|
|
|
|
<button class="color-preset text-color" data-color="#6b7280" style="background:#6b7280"></button>
|
|
|
|
|
<button class="color-preset text-color" data-color="#ffffff" style="background:#ffffff; border: 1px solid #ccc"></button>
|
|
|
|
|
<button class="color-preset text-color" data-color="#3b82f6" style="background:#3b82f6"></button>
|
|
|
|
|
<button class="color-preset text-color" data-color="#10b981" style="background:#10b981"></button>
|
|
|
|
|
<button class="color-preset text-color" data-color="#ef4444" style="background:#ef4444"></button>
|
|
|
|
|
<button class="color-preset text-color" data-color="#f59e0b" style="background:#f59e0b"></button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Heading Level (for headings) -->
|
|
|
|
|
<div id="section-heading-level" class="guided-section context-section" style="display:none;">
|
|
|
|
|
<label>Heading Level</label>
|
|
|
|
|
<div class="heading-level-buttons">
|
|
|
|
|
<button class="heading-level-btn" data-level="h1">H1</button>
|
|
|
|
|
<button class="heading-level-btn" data-level="h2">H2</button>
|
|
|
|
|
<button class="heading-level-btn" data-level="h3">H3</button>
|
|
|
|
|
<button class="heading-level-btn" data-level="h4">H4</button>
|
|
|
|
|
<button class="heading-level-btn" data-level="h5">H5</button>
|
|
|
|
|
<button class="heading-level-btn" data-level="h6">H6</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- HTML Editor Toggle Button -->
|
|
|
|
|
<div id="section-html-editor-toggle" class="guided-section context-section" style="display:none;">
|
|
|
|
|
<button id="html-editor-toggle-btn" class="guided-button secondary" style="width:100%;">
|
|
|
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align:middle;margin-right:6px;">
|
|
|
|
|
<polyline points="16 18 22 12 16 6"></polyline>
|
|
|
|
|
<polyline points="8 6 2 12 8 18"></polyline>
|
|
|
|
|
</svg>
|
|
|
|
|
Edit HTML
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- HTML Editor (hidden by default) -->
|
|
|
|
|
<div id="section-html-editor" class="guided-section context-section" style="display:none;">
|
|
|
|
|
<div style="margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;">
|
|
|
|
|
<label style="margin:0;">HTML Editor</label>
|
|
|
|
|
<button id="html-editor-close" class="guided-button secondary" style="padding:4px 8px;font-size:11px;">Close</button>
|
|
|
|
|
</div>
|
|
|
|
|
<textarea id="html-editor-textarea" class="html-editor-textarea" rows="10" placeholder="HTML code will appear here..."></textarea>
|
|
|
|
|
<div style="margin-top:8px;display:flex;gap:8px;">
|
|
|
|
|
<button id="html-editor-apply" class="guided-button">Apply Changes</button>
|
|
|
|
|
<button id="html-editor-cancel" class="guided-button secondary">Cancel</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Background Color (for containers/sections) -->
|
|
|
|
|
<div id="section-bg-color" class="guided-section context-section" style="display:none;">
|
|
|
|
|
<label>Background Color</label>
|
|
|
|
|
<div class="color-presets" data-target="background">
|
|
|
|
|
<button class="color-preset bg-color" data-color="#ffffff" style="background:#ffffff; border: 1px solid #ccc"></button>
|
|
|
|
|
<button class="color-preset bg-color" data-color="#f9fafb" style="background:#f9fafb; border: 1px solid #ccc"></button>
|
|
|
|
|
<button class="color-preset bg-color" data-color="#1f2937" style="background:#1f2937"></button>
|
|
|
|
|
<button class="color-preset bg-color" data-color="#111827" style="background:#111827"></button>
|
|
|
|
|
<button class="color-preset bg-color" data-color="#3b82f6" style="background:#3b82f6"></button>
|
|
|
|
|
<button class="color-preset bg-color" data-color="#10b981" style="background:#10b981"></button>
|
|
|
|
|
<button class="color-preset bg-color" data-color="#8b5cf6" style="background:#8b5cf6"></button>
|
|
|
|
|
<button class="color-preset bg-color" data-color="#ec4899" style="background:#ec4899"></button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Background Gradient (for containers/sections) -->
|
|
|
|
|
<div id="section-bg-gradient" class="guided-section context-section" style="display:none;">
|
|
|
|
|
<label>Background Gradient</label>
|
|
|
|
|
<div class="gradient-presets">
|
|
|
|
|
<button class="gradient-preset" data-gradient="linear-gradient(135deg, #667eea 0%, #764ba2 100%)" style="background:linear-gradient(135deg, #667eea 0%, #764ba2 100%)" title="Purple Dream"></button>
|
|
|
|
|
<button class="gradient-preset" data-gradient="linear-gradient(135deg, #f093fb 0%, #f5576c 100%)" style="background:linear-gradient(135deg, #f093fb 0%, #f5576c 100%)" title="Pink Sunset"></button>
|
|
|
|
|
<button class="gradient-preset" data-gradient="linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)" style="background:linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)" title="Ocean Blue"></button>
|
|
|
|
|
<button class="gradient-preset" data-gradient="linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)" style="background:linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)" title="Green Teal"></button>
|
|
|
|
|
<button class="gradient-preset" data-gradient="linear-gradient(135deg, #fa709a 0%, #fee140 100%)" style="background:linear-gradient(135deg, #fa709a 0%, #fee140 100%)" title="Warm Sunrise"></button>
|
|
|
|
|
<button class="gradient-preset" data-gradient="linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)" style="background:linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)" title="Soft Pastel"></button>
|
|
|
|
|
<button class="gradient-preset" data-gradient="linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)" style="background:linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)" title="Peach"></button>
|
|
|
|
|
<button class="gradient-preset" data-gradient="linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)" style="background:linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)" title="Warm Sand"></button>
|
|
|
|
|
<button class="gradient-preset" data-gradient="linear-gradient(180deg, #0f0c29 0%, #302b63 50%, #24243e 100%)" style="background:linear-gradient(180deg, #0f0c29 0%, #302b63 50%, #24243e 100%)" title="Dark Purple"></button>
|
|
|
|
|
<button class="gradient-preset" data-gradient="linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)" style="background:linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)" title="Dark Blue"></button>
|
|
|
|
|
<button class="gradient-preset" data-gradient="linear-gradient(135deg, #232526 0%, #414345 100%)" style="background:linear-gradient(135deg, #232526 0%, #414345 100%)" title="Dark Gray"></button>
|
|
|
|
|
<button class="gradient-preset" data-gradient="none" style="background:#2d2d3a; border: 1px dashed #71717a" title="Remove Gradient">
|
|
|
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
|
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
|
|
|
</svg>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Divider Color -->
|
|
|
|
|
<div id="section-divider-color" class="guided-section context-section" style="display:none;">
|
|
|
|
|
<label>Divider Color</label>
|
|
|
|
|
<div class="color-presets" data-target="divider">
|
|
|
|
|
<button class="color-preset divider-color" data-color="#e5e7eb" style="background:#e5e7eb"></button>
|
|
|
|
|
<button class="color-preset divider-color" data-color="#d1d5db" style="background:#d1d5db"></button>
|
|
|
|
|
<button class="color-preset divider-color" data-color="#9ca3af" style="background:#9ca3af"></button>
|
|
|
|
|
<button class="color-preset divider-color" data-color="#1f2937" style="background:#1f2937"></button>
|
|
|
|
|
<button class="color-preset divider-color" data-color="#3b82f6" style="background:#3b82f6"></button>
|
|
|
|
|
<button class="color-preset divider-color" data-color="#10b981" style="background:#10b981"></button>
|
|
|
|
|
<button class="color-preset divider-color" data-color="#ef4444" style="background:#ef4444"></button>
|
|
|
|
|
<button class="color-preset divider-color" data-color="#f59e0b" style="background:#f59e0b"></button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Font Family -->
|
|
|
|
|
<div id="section-font" class="guided-section context-section" style="display:none;">
|
|
|
|
|
<label>Font Family</label>
|
|
|
|
|
<div class="font-presets">
|
|
|
|
|
<button class="font-preset" data-font="Inter, sans-serif">Inter</button>
|
|
|
|
|
<button class="font-preset" data-font="Roboto, sans-serif">Roboto</button>
|
|
|
|
|
<button class="font-preset" data-font="Open Sans, sans-serif">Open Sans</button>
|
|
|
|
|
<button class="font-preset" data-font="Poppins, sans-serif">Poppins</button>
|
|
|
|
|
<button class="font-preset" data-font="Montserrat, sans-serif">Montserrat</button>
|
|
|
|
|
<button class="font-preset" data-font="Playfair Display, serif">Playfair</button>
|
|
|
|
|
<button class="font-preset" data-font="Merriweather, serif">Merriweather</button>
|
|
|
|
|
<button class="font-preset" data-font="Source Code Pro, monospace">Monospace</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Text Size -->
|
|
|
|
|
<div id="section-text-size" class="guided-section context-section" style="display:none;">
|
|
|
|
|
<label>Text Size</label>
|
|
|
|
|
<div class="size-presets">
|
|
|
|
|
<button class="size-preset" data-size="12px">XS</button>
|
|
|
|
|
<button class="size-preset" data-size="14px">S</button>
|
|
|
|
|
<button class="size-preset" data-size="16px">M</button>
|
|
|
|
|
<button class="size-preset" data-size="20px">L</button>
|
|
|
|
|
<button class="size-preset" data-size="24px">XL</button>
|
|
|
|
|
<button class="size-preset" data-size="32px">2XL</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Font Weight -->
|
|
|
|
|
<div id="section-font-weight" class="guided-section context-section" style="display:none;">
|
|
|
|
|
<label>Font Weight</label>
|
|
|
|
|
<div class="weight-presets">
|
|
|
|
|
<button class="weight-preset" data-weight="300">Light</button>
|
|
|
|
|
<button class="weight-preset" data-weight="400">Normal</button>
|
|
|
|
|
<button class="weight-preset" data-weight="500">Medium</button>
|
|
|
|
|
<button class="weight-preset" data-weight="600">Semi</button>
|
|
|
|
|
<button class="weight-preset" data-weight="700">Bold</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Spacing (for containers) -->
|
|
|
|
|
<div id="section-spacing" class="guided-section context-section" style="display:none;">
|
|
|
|
|
<label>Padding</label>
|
|
|
|
|
<div class="spacing-presets">
|
|
|
|
|
<button class="spacing-preset" data-padding="0">None</button>
|
|
|
|
|
<button class="spacing-preset" data-padding="8px">S</button>
|
|
|
|
|
<button class="spacing-preset" data-padding="16px">M</button>
|
|
|
|
|
<button class="spacing-preset" data-padding="24px">L</button>
|
|
|
|
|
<button class="spacing-preset" data-padding="32px">XL</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Border Radius -->
|
|
|
|
|
<div id="section-radius" class="guided-section context-section" style="display:none;">
|
|
|
|
|
<label>Border Radius</label>
|
|
|
|
|
<div class="radius-presets">
|
|
|
|
|
<button class="radius-preset" data-radius="0">None</button>
|
|
|
|
|
<button class="radius-preset" data-radius="4px">S</button>
|
|
|
|
|
<button class="radius-preset" data-radius="8px">M</button>
|
|
|
|
|
<button class="radius-preset" data-radius="16px">L</button>
|
|
|
|
|
<button class="radius-preset" data-radius="9999px">Full</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Line Thickness (Dividers only) -->
|
|
|
|
|
<div id="section-thickness" class="guided-section context-section" style="display:none;">
|
|
|
|
|
<label>Line Thickness</label>
|
|
|
|
|
<div class="thickness-presets">
|
|
|
|
|
<button class="thickness-preset" data-thickness="1px">1px</button>
|
|
|
|
|
<button class="thickness-preset" data-thickness="2px">2px</button>
|
|
|
|
|
<button class="thickness-preset" data-thickness="3px">3px</button>
|
|
|
|
|
<button class="thickness-preset" data-thickness="4px">4px</button>
|
|
|
|
|
<button class="thickness-preset" data-thickness="6px">6px</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Button Style -->
|
|
|
|
|
<div id="section-button-style" class="guided-section context-section" style="display:none;">
|
|
|
|
|
<label>Button Color</label>
|
|
|
|
|
<div class="color-presets" data-target="button-bg">
|
|
|
|
|
<button class="color-preset btn-bg-color" data-color="#3b82f6" style="background:#3b82f6"></button>
|
|
|
|
|
<button class="color-preset btn-bg-color" data-color="#10b981" style="background:#10b981"></button>
|
|
|
|
|
<button class="color-preset btn-bg-color" data-color="#8b5cf6" style="background:#8b5cf6"></button>
|
|
|
|
|
<button class="color-preset btn-bg-color" data-color="#ec4899" style="background:#ec4899"></button>
|
|
|
|
|
<button class="color-preset btn-bg-color" data-color="#f59e0b" style="background:#f59e0b"></button>
|
|
|
|
|
<button class="color-preset btn-bg-color" data-color="#ef4444" style="background:#ef4444"></button>
|
|
|
|
|
<button class="color-preset btn-bg-color" data-color="#1f2937" style="background:#1f2937"></button>
|
|
|
|
|
<button class="color-preset btn-bg-color" data-color="#ffffff" style="background:#ffffff; border: 1px solid #ccc"></button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Background Image -->
|
|
|
|
|
<div id="section-bg-image" class="guided-section context-section" style="display:none;">
|
|
|
|
|
<label>Background Image</label>
|
|
|
|
|
<input type="text" id="bg-image-url" class="guided-input" placeholder="https://example.com/image.jpg">
|
|
|
|
|
<div class="bg-image-controls">
|
|
|
|
|
<select id="bg-size" class="guided-select">
|
|
|
|
|
<option value="cover">Cover</option>
|
|
|
|
|
<option value="contain">Contain</option>
|
|
|
|
|
<option value="auto">Auto</option>
|
|
|
|
|
</select>
|
|
|
|
|
<select id="bg-position" class="guided-select">
|
|
|
|
|
<option value="center">Center</option>
|
|
|
|
|
<option value="top">Top</option>
|
|
|
|
|
<option value="bottom">Bottom</option>
|
|
|
|
|
<option value="left">Left</option>
|
|
|
|
|
<option value="right">Right</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
<button id="remove-bg-image" class="guided-btn-secondary">Remove Image</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Overlay Color -->
|
|
|
|
|
<div id="section-overlay" class="guided-section context-section" style="display:none;">
|
|
|
|
|
<label>Overlay Color & Opacity</label>
|
|
|
|
|
<div class="overlay-controls">
|
|
|
|
|
<div class="color-presets overlay-color-row" data-target="overlay">
|
|
|
|
|
<button class="color-preset overlay-color" data-color="0,0,0" style="background:#000000" title="Black"></button>
|
|
|
|
|
<button class="color-preset overlay-color" data-color="255,255,255" style="background:#ffffff; border: 1px solid #ccc" title="White"></button>
|
|
|
|
|
<button class="color-preset overlay-color" data-color="59,130,246" style="background:#3b82f6" title="Blue"></button>
|
|
|
|
|
<button class="color-preset overlay-color" data-color="16,185,129" style="background:#10b981" title="Green"></button>
|
|
|
|
|
<button class="color-preset overlay-color" data-color="139,92,246" style="background:#8b5cf6" title="Purple"></button>
|
|
|
|
|
<button class="color-preset overlay-color" data-color="31,41,55" style="background:#1f2937" title="Dark Gray"></button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="opacity-slider-row">
|
|
|
|
|
<label class="opacity-label">Opacity</label>
|
|
|
|
|
<input type="range" id="overlay-opacity" class="opacity-slider" min="0" max="100" value="50">
|
|
|
|
|
<span id="overlay-opacity-value" class="opacity-value">50%</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Navigation Links -->
|
|
|
|
|
<div id="section-nav-links" class="guided-section context-section" style="display:none;">
|
|
|
|
|
<label>Navigation Links</label>
|
|
|
|
|
<div class="nav-links-controls">
|
|
|
|
|
<button id="sync-nav-pages" class="guided-btn-primary">
|
|
|
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
|
|
<path d="M23 4v6h-6"></path>
|
|
|
|
|
<path d="M1 20v-6h6"></path>
|
|
|
|
|
<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
|
|
|
|
|
</svg>
|
|
|
|
|
Sync with Pages
|
|
|
|
|
</button>
|
|
|
|
|
<button id="add-nav-link" class="guided-btn-secondary">
|
|
|
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
|
|
<line x1="12" y1="5" x2="12" y2="19"></line>
|
|
|
|
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
|
|
|
</svg>
|
|
|
|
|
Add Link
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="nav-links-list" class="nav-links-list">
|
|
|
|
|
<!-- Links will be populated dynamically -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- Advanced Styles (GrapesJS default) -->
|
|
|
|
|
<div id="advanced-styles" style="display: none;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="traits-container" class="panel-content" style="display: none;"></div>
|
|
|
|
|
<!-- Head Elements Panel (shown via Settings tab) -->
|
|
|
|
|
<div id="head-elements-container" class="panel-content" style="display:none;padding:12px;">
|
|
|
|
|
<div style="margin-bottom:12px;">
|
|
|
|
|
<label style="display:block;margin-bottom:6px;font-size:12px;font-weight:600;color:#a1a1aa;">Page <head> Code</label>
|
|
|
|
|
<textarea id="head-code-textarea" class="html-editor-textarea" rows="6" placeholder="Add scripts, styles, meta tags... e.g. <script src='...'></script>"></textarea>
|
|
|
|
|
<button id="head-code-apply" class="guided-button" style="margin-top:8px;width:100%;">Save Head Code</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<label style="display:block;margin-bottom:6px;font-size:12px;font-weight:600;color:#a1a1aa;">Site-wide CSS</label>
|
|
|
|
|
<textarea id="sitewide-css-textarea" class="html-editor-textarea" rows="6" placeholder="CSS that applies to all pages..."></textarea>
|
|
|
|
|
<button id="sitewide-css-apply" class="guided-button" style="margin-top:8px;width:100%;">Save Site-wide CSS</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Save Status -->
|
|
|
|
|
<div id="save-status" class="save-status">
|
|
|
|
|
<span class="status-dot"></span>
|
|
|
|
|
<span class="status-text">Saved</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Page Settings Modal -->
|
|
|
|
|
<div id="page-modal" class="modal-overlay">
|
|
|
|
|
<div class="modal">
|
|
|
|
|
<div class="modal-header">
|
|
|
|
|
<h3 class="modal-title" id="modal-title">Add New Page</h3>
|
|
|
|
|
<button class="modal-close" id="modal-close">
|
|
|
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
|
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
|
|
|
</svg>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="modal-body">
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<label for="page-name">Page Name</label>
|
|
|
|
|
<input type="text" id="page-name" placeholder="e.g., About Us">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<label for="page-slug">Page Slug (URL)</label>
|
|
|
|
|
<input type="text" id="page-slug" placeholder="e.g., about-us">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="modal-footer">
|
|
|
|
|
<button class="modal-btn modal-btn-secondary" id="modal-cancel">Cancel</button>
|
|
|
|
|
<button class="modal-btn modal-btn-danger" id="modal-delete" style="display:none;">Delete</button>
|
|
|
|
|
<button class="modal-btn modal-btn-primary" id="modal-save">Save Page</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Context Menu -->
|
|
|
|
|
<div id="context-menu" class="context-menu">
|
|
|
|
|
<div class="context-menu-item" data-action="edit">
|
|
|
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
|
|
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
|
|
|
|
|
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
|
|
|
|
|
</svg>
|
|
|
|
|
<span>Edit Content</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="context-menu-item" data-action="duplicate">
|
|
|
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
|
|
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
|
|
|
|
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
|
|
|
|
</svg>
|
|
|
|
|
<span>Duplicate</span>
|
|
|
|
|
<span class="shortcut">Ctrl+D</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="context-menu-divider"></div>
|
|
|
|
|
<div class="context-menu-item" data-action="copy">
|
|
|
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
|
|
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
|
|
|
|
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
|
|
|
|
</svg>
|
|
|
|
|
<span>Copy</span>
|
|
|
|
|
<span class="shortcut">Ctrl+C</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="context-menu-item" data-action="paste">
|
|
|
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
|
|
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
|
|
|
|
|
<rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
|
|
|
|
|
</svg>
|
|
|
|
|
<span>Paste</span>
|
|
|
|
|
<span class="shortcut">Ctrl+V</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="context-menu-divider"></div>
|
|
|
|
|
<div class="context-menu-item" data-action="move-up">
|
|
|
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
|
|
<polyline points="18 15 12 9 6 15"></polyline>
|
|
|
|
|
</svg>
|
|
|
|
|
<span>Move Up</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="context-menu-item" data-action="move-down">
|
|
|
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
|
|
<polyline points="6 9 12 15 18 9"></polyline>
|
|
|
|
|
</svg>
|
|
|
|
|
<span>Move Down</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="context-menu-divider"></div>
|
|
|
|
|
<div class="context-menu-item" data-action="select-parent">
|
|
|
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
|
|
<polyline points="15 18 9 12 15 6"></polyline>
|
|
|
|
|
</svg>
|
|
|
|
|
<span>Select Parent</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="context-menu-item" data-action="wrap">
|
|
|
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
|
|
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
|
|
|
|
<rect x="7" y="7" width="10" height="10" rx="1" ry="1"></rect>
|
|
|
|
|
</svg>
|
|
|
|
|
<span>Wrap in Container</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="context-menu-divider"></div>
|
|
|
|
|
<div class="context-menu-item danger" data-action="delete">
|
|
|
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
|
|
<polyline points="3 6 5 6 21 6"></polyline>
|
|
|
|
|
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
|
|
|
|
|
</svg>
|
|
|
|
|
<span>Delete</span>
|
|
|
|
|
<span class="shortcut">Del</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="context-menu-item danger" data-action="delete-section">
|
|
|
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
|
|
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
|
|
|
|
<line x1="9" y1="9" x2="15" y2="15"></line>
|
|
|
|
|
<line x1="15" y1="9" x2="9" y2="15"></line>
|
|
|
|
|
</svg>
|
|
|
|
|
<span>Delete Section</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Templates Browser Modal -->
|
|
|
|
|
<div id="templates-browser-modal" class="modal-overlay">
|
|
|
|
|
<div class="modal export-modal">
|
|
|
|
|
<div class="modal-header">
|
|
|
|
|
<h3 class="modal-title">Templates</h3>
|
|
|
|
|
<button class="modal-close" id="templates-browser-close">
|
|
|
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
|
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
|
|
|
</svg>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="modal-body">
|
|
|
|
|
<p class="export-description">Choose a template to start your design. All templates are fully customizable.</p>
|
|
|
|
|
<div class="templates-browser">
|
|
|
|
|
<div class="templates-filter">
|
|
|
|
|
<button class="template-filter-btn active" data-category="all">All</button>
|
|
|
|
|
<button class="template-filter-btn" data-category="Business">Business</button>
|
|
|
|
|
<button class="template-filter-btn" data-category="Portfolio">Portfolio</button>
|
|
|
|
|
<button class="template-filter-btn" data-category="Personal">Personal</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="templates-grid" class="templates-grid">
|
|
|
|
|
<!-- Templates loaded dynamically -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Template Confirmation Modal -->
|
|
|
|
|
<div id="template-modal" class="modal-overlay">
|
|
|
|
|
<div class="modal">
|
|
|
|
|
<div class="modal-header">
|
|
|
|
|
<h3 class="modal-title" id="template-modal-title">Load Template</h3>
|
|
|
|
|
<button class="modal-close" id="template-modal-close">
|
|
|
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
|
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
|
|
|
</svg>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="modal-body">
|
|
|
|
|
<p id="template-modal-desc" style="color:#a1a1aa;font-size:14px;line-height:1.6;margin-bottom:16px;"></p>
|
|
|
|
|
<div style="padding:16px;background:#2d2d3a;border-radius:8px;border:1px solid #3f3f50;">
|
Add templates, tests, and miscellaneous project files
Includes new page templates (fitness-gym, nonprofit, online-course,
photography-studio, real-estate, startup-company, travel-blog,
wedding-invitation) with thumbnail SVGs, test specs, documentation
files, and minor updates to index.html, router.php, and playwright config.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-01 14:15:58 -08:00
|
|
|
<p id="template-modal-warning" style="color:#fbbf24;font-size:13px;font-weight:500;">⚠️ This will replace all content on your current page.</p>
|
2026-02-28 19:25:42 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="modal-footer">
|
|
|
|
|
<button class="modal-btn modal-btn-secondary" id="template-modal-cancel">Cancel</button>
|
|
|
|
|
<button class="modal-btn modal-btn-primary" id="template-modal-confirm">Use Template</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Page HTML Editor Modal -->
|
|
|
|
|
<div id="page-code-modal" class="modal-overlay">
|
|
|
|
|
<div class="modal export-modal">
|
|
|
|
|
<div class="modal-header">
|
|
|
|
|
<h3 class="modal-title">Page HTML</h3>
|
|
|
|
|
<button class="modal-close" id="page-code-modal-close">
|
|
|
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
|
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
|
|
|
</svg>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="modal-body">
|
|
|
|
|
<p class="export-description">View and edit the HTML of your entire page. Changes will replace all content on the canvas.</p>
|
|
|
|
|
<textarea id="page-code-textarea" class="html-editor-textarea" rows="20" style="width:100%;min-height:400px;"></textarea>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="modal-footer">
|
|
|
|
|
<button class="modal-btn modal-btn-secondary" id="page-code-cancel">Cancel</button>
|
|
|
|
|
<button class="modal-btn modal-btn-primary" id="page-code-apply">Apply Changes</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Export Modal -->
|
|
|
|
|
<div id="export-modal" class="modal-overlay">
|
|
|
|
|
<div class="modal export-modal">
|
|
|
|
|
<div class="modal-header">
|
|
|
|
|
<h3 class="modal-title">Export Site</h3>
|
|
|
|
|
<button class="modal-close" id="export-modal-close">
|
|
|
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
|
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
|
|
|
</svg>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="modal-body">
|
|
|
|
|
<p class="export-description">Download your site as HTML/CSS files. Each page will be exported as a separate HTML file with embedded styles.</p>
|
|
|
|
|
<div class="export-options">
|
|
|
|
|
<label class="checkbox-label">
|
|
|
|
|
<input type="checkbox" id="export-minify"> Minify CSS
|
|
|
|
|
</label>
|
|
|
|
|
<label class="checkbox-label">
|
|
|
|
|
<input type="checkbox" id="export-include-fonts" checked> Include Google Fonts
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="export-pages-list" id="export-pages-list">
|
|
|
|
|
<!-- Pages will be listed here -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="modal-footer">
|
|
|
|
|
<button class="modal-btn modal-btn-secondary" id="export-modal-cancel">Cancel</button>
|
|
|
|
|
<button class="modal-btn modal-btn-secondary" id="export-copy-html" title="Copy HTML to clipboard (bypasses Windows security warnings)">
|
|
|
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
|
|
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
|
|
|
|
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
|
|
|
|
</svg>
|
|
|
|
|
Copy HTML
|
|
|
|
|
</button>
|
|
|
|
|
<button class="modal-btn modal-btn-primary" id="export-download">
|
|
|
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
|
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
|
|
|
|
<polyline points="7 10 12 15 17 10"></polyline>
|
|
|
|
|
<line x1="12" y1="15" x2="12" y2="3"></line>
|
|
|
|
|
</svg>
|
|
|
|
|
Download ZIP
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- GrapesJS Core -->
|
|
|
|
|
<script src="vendor/grapes.min.js"></script>
|
|
|
|
|
|
|
|
|
|
<!-- GrapesJS Plugins -->
|
|
|
|
|
<script src="vendor/grapesjs-blocks-basic.min.js"></script>
|
|
|
|
|
<script src="vendor/grapesjs-preset-webpage.min.js"></script>
|
|
|
|
|
<script src="vendor/grapesjs-plugin-forms.min.js"></script>
|
|
|
|
|
<script src="vendor/grapesjs-style-gradient.min.js"></script>
|
|
|
|
|
|
|
|
|
|
<!-- Editor Initialization -->
|
|
|
|
|
<script src="js/editor.js"></script>
|
|
|
|
|
|
|
|
|
|
<!-- Asset Management & Deploy -->
|
|
|
|
|
<script src="js/assets.js"></script>
|
|
|
|
|
|
|
|
|
|
<!-- WHP Integration (optional - only if hosted in WHP) -->
|
|
|
|
|
<script src="js/whp-integration.js"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
