654 lines
21 KiB
HTML
654 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Section Builder — Project Friction</title>
|
|
<link rel="stylesheet" href="main.css">
|
|
<link rel="stylesheet" href="components.css">
|
|
<link rel="stylesheet" href="blocks.css">
|
|
<style>
|
|
/* ── Builder Layout ─────────────────────────────────────────────── */
|
|
body {
|
|
overflow: auto;
|
|
height: auto;
|
|
background: #f0f2f5;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
}
|
|
|
|
.builder-header {
|
|
background: linear-gradient(135deg, #2c3e50, #34495e);
|
|
color: #fff;
|
|
padding: 0 1.5rem;
|
|
height: 54px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 200;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.25);
|
|
}
|
|
|
|
.builder-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.builder-brand .logo {
|
|
width: 32px;
|
|
height: 32px;
|
|
background: #c0392b;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.builder-header-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.builder-header-nav a,
|
|
.builder-header-nav button {
|
|
background: rgba(255,255,255,0.15);
|
|
color: #fff;
|
|
border: none;
|
|
padding: 0.4rem 0.9rem;
|
|
border-radius: 20px;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.3rem;
|
|
transition: background 0.15s;
|
|
}
|
|
|
|
.builder-header-nav a:hover,
|
|
.builder-header-nav button:hover {
|
|
background: rgba(255,255,255,0.28);
|
|
}
|
|
|
|
.builder-header-nav .btn-save-header {
|
|
background: #27ae60;
|
|
}
|
|
|
|
.builder-header-nav .btn-save-header:hover {
|
|
background: #219a52;
|
|
}
|
|
|
|
/* ── Main layout ─────────────────────────────────────────────────── */
|
|
.builder-layout {
|
|
display: flex;
|
|
height: calc(100vh - 54px);
|
|
}
|
|
|
|
/* ── Sidebar ─────────────────────────────────────────────────────── */
|
|
.builder-sidebar {
|
|
width: 220px;
|
|
background: #fff;
|
|
border-right: 1px solid #dde3ea;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-y: auto;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.palette-section {
|
|
padding: 1rem;
|
|
border-bottom: 1px solid #eef0f3;
|
|
}
|
|
|
|
.palette-title {
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.8px;
|
|
color: #8a96a3;
|
|
margin-bottom: 0.6rem;
|
|
}
|
|
|
|
.section-tab {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
width: 100%;
|
|
padding: 0.55rem 0.75rem;
|
|
background: #f8f9fb;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 6px;
|
|
margin-bottom: 0.35rem;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
text-align: left;
|
|
transition: all 0.15s;
|
|
border-left: 3px solid var(--tab-color, #ccc);
|
|
}
|
|
|
|
.section-tab:hover {
|
|
background: #f0f3f7;
|
|
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
.section-tab.active {
|
|
background: #fff;
|
|
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
|
|
border-left-width: 4px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tab-icon { font-size: 16px; }
|
|
|
|
/* ── Block Palette ───────────────────────────────────────────────── */
|
|
.palette-blocks {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.35rem;
|
|
transition: box-shadow 0.3s;
|
|
}
|
|
|
|
.palette-blocks.palette-highlight {
|
|
box-shadow: 0 0 0 3px #3498db;
|
|
border-radius: 6px;
|
|
padding: 4px;
|
|
}
|
|
|
|
.palette-block {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 0.65rem;
|
|
background: #f8f9fb;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
text-align: left;
|
|
transition: all 0.15s;
|
|
width: 100%;
|
|
}
|
|
|
|
.palette-block:hover {
|
|
background: #e8f4fd;
|
|
border-color: #3498db;
|
|
color: #1a5276;
|
|
}
|
|
|
|
/* ── Sidebar footer actions ──────────────────────────────────────── */
|
|
.sidebar-actions {
|
|
padding: 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.4rem;
|
|
margin-top: auto;
|
|
}
|
|
|
|
.sidebar-actions button {
|
|
width: 100%;
|
|
padding: 0.5rem;
|
|
border: 1px solid #dde3ea;
|
|
border-radius: 6px;
|
|
background: #f8f9fb;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
transition: background 0.15s;
|
|
}
|
|
|
|
.sidebar-actions button:hover { background: #e8ecf0; }
|
|
|
|
.sidebar-actions .btn-reset {
|
|
color: #c0392b;
|
|
border-color: #f5b7b1;
|
|
}
|
|
|
|
/* ── Canvas Area ─────────────────────────────────────────────────── */
|
|
.builder-canvas-area {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: #f0f2f5;
|
|
}
|
|
|
|
.canvas-header {
|
|
background: #fff;
|
|
border-bottom: 1px solid #dde3ea;
|
|
padding: 0.9rem 1.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 50;
|
|
}
|
|
|
|
.canvas-header h2 {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #2c3e50;
|
|
margin: 0;
|
|
}
|
|
|
|
.canvas-badge {
|
|
padding: 0.2rem 0.6rem;
|
|
border-radius: 12px;
|
|
font-size: 11px;
|
|
color: #fff;
|
|
font-weight: 600;
|
|
}
|
|
|
|
#builderCanvas {
|
|
padding: 1.5rem;
|
|
max-width: 720px;
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
}
|
|
|
|
.canvas-empty {
|
|
text-align: center;
|
|
color: #8a96a3;
|
|
padding: 3rem 1rem;
|
|
border: 2px dashed #dde3ea;
|
|
border-radius: 10px;
|
|
background: #fff;
|
|
font-size: 15px;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
/* ── Canvas Block Card ───────────────────────────────────────────── */
|
|
.canvas-block {
|
|
background: #fff;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 8px;
|
|
margin-bottom: 0.5rem;
|
|
overflow: hidden;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
|
|
transition: box-shadow 0.15s;
|
|
}
|
|
|
|
.canvas-block:hover {
|
|
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.canvas-block-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0.4rem 0.75rem;
|
|
background: #f8f9fb;
|
|
border-bottom: 1px solid #eef0f3;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.block-type-badge {
|
|
background: #e2e8f0;
|
|
color: #4a5568;
|
|
padding: 0.15rem 0.5rem;
|
|
border-radius: 10px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.block-actions {
|
|
display: flex;
|
|
gap: 0.3rem;
|
|
}
|
|
|
|
.block-actions button {
|
|
padding: 0.25rem 0.5rem;
|
|
border: 1px solid #dde3ea;
|
|
border-radius: 4px;
|
|
background: #fff;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.block-actions button:hover:not(:disabled) { background: #f0f3f7; }
|
|
.block-actions button:disabled { opacity: 0.35; cursor: default; }
|
|
.block-actions .btn-edit { color: #2980b9; border-color: #aed6f1; }
|
|
.block-actions .btn-edit:hover { background: #eaf4fb; }
|
|
.block-actions .btn-delete { color: #c0392b; border-color: #f5b7b1; }
|
|
.block-actions .btn-delete:hover { background: #fdf2f0; }
|
|
|
|
.canvas-block-preview {
|
|
padding: 1rem 1.25rem;
|
|
pointer-events: none;
|
|
max-height: 280px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.canvas-block-preview::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0; left: 0; right: 0;
|
|
height: 30px;
|
|
background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.8));
|
|
}
|
|
|
|
/* ── Insert Strip ────────────────────────────────────────────────── */
|
|
.canvas-insert {
|
|
text-align: center;
|
|
padding: 0.15rem 0;
|
|
opacity: 0;
|
|
transition: opacity 0.15s;
|
|
}
|
|
|
|
.canvas-block:hover + .canvas-block .canvas-insert,
|
|
.canvas-block:hover .canvas-insert,
|
|
.canvas-insert-bottom {
|
|
opacity: 1;
|
|
}
|
|
|
|
.canvas-insert-bottom { opacity: 1; margin-top: 0.5rem; }
|
|
|
|
.insert-btn {
|
|
background: none;
|
|
border: 1px dashed #3498db;
|
|
border-radius: 20px;
|
|
color: #3498db;
|
|
font-size: 12px;
|
|
padding: 0.2rem 1rem;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.insert-btn:hover {
|
|
background: #eaf4fb;
|
|
}
|
|
|
|
/* ── Modal ───────────────────────────────────────────────────────── */
|
|
.builder-modal {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 1000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.builder-modal.hidden { display: none; }
|
|
|
|
.modal-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(0,0,0,0.45);
|
|
}
|
|
|
|
.modal-dialog {
|
|
position: relative;
|
|
background: #fff;
|
|
border-radius: 10px;
|
|
box-shadow: 0 12px 40px rgba(0,0,0,0.25);
|
|
width: 560px;
|
|
max-width: 95vw;
|
|
max-height: 85vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 1rem 1.25rem;
|
|
border-bottom: 1px solid #eef0f3;
|
|
background: #f8f9fb;
|
|
}
|
|
|
|
.modal-header h3 {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
#modalClose {
|
|
background: none;
|
|
border: none;
|
|
font-size: 20px;
|
|
cursor: pointer;
|
|
color: #8a96a3;
|
|
line-height: 1;
|
|
padding: 0 0.2rem;
|
|
}
|
|
|
|
#modalClose:hover { color: #2c3e50; }
|
|
|
|
.modal-body {
|
|
padding: 1.25rem;
|
|
overflow-y: auto;
|
|
flex: 1;
|
|
}
|
|
|
|
.modal-footer {
|
|
padding: 0.75rem 1.25rem;
|
|
border-top: 1px solid #eef0f3;
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
justify-content: flex-end;
|
|
background: #f8f9fb;
|
|
}
|
|
|
|
/* ── Form Styles ─────────────────────────────────────────────────── */
|
|
.form-group {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: #4a5568;
|
|
margin-bottom: 0.3rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.4px;
|
|
}
|
|
|
|
.form-group input[type="text"],
|
|
.form-group input[type="number"],
|
|
.form-group textarea,
|
|
.form-group select {
|
|
width: 100%;
|
|
padding: 0.55rem 0.75rem;
|
|
border: 1px solid #dde3ea;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
font-family: inherit;
|
|
background: #fff;
|
|
transition: border-color 0.15s;
|
|
}
|
|
|
|
.form-group input:focus,
|
|
.form-group textarea:focus,
|
|
.form-group select:focus {
|
|
outline: none;
|
|
border-color: #3498db;
|
|
box-shadow: 0 0 0 2px rgba(52,152,219,0.15);
|
|
}
|
|
|
|
.form-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
/* Gallery / Stats item rows */
|
|
.item-row {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.4rem;
|
|
margin-bottom: 0.5rem;
|
|
padding: 0.5rem;
|
|
background: #f8f9fb;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.item-row-fields { flex: 1; display: flex; flex-direction: column; gap: 0.3rem; }
|
|
|
|
.item-row input[type="text"] {
|
|
padding: 0.35rem 0.55rem;
|
|
border: 1px solid #dde3ea;
|
|
border-radius: 4px;
|
|
font-size: 13px;
|
|
width: 100%;
|
|
}
|
|
|
|
.btn-remove-item {
|
|
background: none;
|
|
border: 1px solid #f5b7b1;
|
|
border-radius: 4px;
|
|
color: #c0392b;
|
|
cursor: pointer;
|
|
padding: 0.25rem 0.4rem;
|
|
font-size: 13px;
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.btn-remove-item:hover { background: #fdf2f0; }
|
|
|
|
.add-item-btn {
|
|
margin-top: 0.5rem;
|
|
background: none;
|
|
border: 1px dashed #3498db;
|
|
border-radius: 20px;
|
|
color: #3498db;
|
|
font-size: 12px;
|
|
padding: 0.3rem 1rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.add-item-btn:hover { background: #eaf4fb; }
|
|
|
|
/* ── Buttons ─────────────────────────────────────────────────────── */
|
|
.btn { padding: 0.5rem 1.1rem; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; font-family: inherit; }
|
|
.btn-primary { background: #3498db; color: #fff; }
|
|
.btn-primary:hover { background: #2980b9; }
|
|
.btn-secondary { background: #e2e8f0; color: #2c3e50; }
|
|
.btn-secondary:hover { background: #cdd3da; }
|
|
|
|
/* ── Toast ───────────────────────────────────────────────────────── */
|
|
.builder-toast {
|
|
position: fixed;
|
|
bottom: 1.5rem;
|
|
right: 1.5rem;
|
|
background: #2c3e50;
|
|
color: #fff;
|
|
padding: 0.7rem 1.25rem;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
|
opacity: 0;
|
|
transform: translateY(8px);
|
|
transition: all 0.25s;
|
|
z-index: 2000;
|
|
}
|
|
|
|
.builder-toast.show {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* ── Preview block overrides (keep things legible at small size) ── */
|
|
.canvas-block-preview .block-heading-1 { font-size: 18px; }
|
|
.canvas-block-preview .block-heading-2 { font-size: 15px; }
|
|
.canvas-block-preview .block-paragraph { font-size: 13px; margin: 0; }
|
|
.canvas-block-preview .quote-text { font-size: 13px; }
|
|
.canvas-block-preview .block-stats-grid { grid-template-columns: repeat(4, 1fr); }
|
|
.canvas-block-preview .gallery-item img { height: 80px; }
|
|
.canvas-block-preview .grid4-item img { height: 70px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Top Bar -->
|
|
<header class="builder-header">
|
|
<div class="builder-brand">
|
|
<div class="logo">PF</div>
|
|
<span>Section Builder</span>
|
|
</div>
|
|
<nav class="builder-header-nav">
|
|
<a href="index.html">👁 View Site</a>
|
|
<button id="exportBtn">⬇ Export JSON</button>
|
|
<button id="importBtn">⬆ Import JSON</button>
|
|
<input type="file" id="importFile" accept=".json" style="display:none">
|
|
<button id="saveBtn" class="btn-save-header">💾 Save Section</button>
|
|
</nav>
|
|
</header>
|
|
|
|
<div class="builder-layout">
|
|
|
|
<!-- ── Sidebar ───────────────────────────────────────────────────── -->
|
|
<aside class="builder-sidebar">
|
|
|
|
<!-- Section Tabs -->
|
|
<div class="palette-section">
|
|
<div class="palette-title">Sections</div>
|
|
<div id="sectionTabs"></div>
|
|
</div>
|
|
|
|
<!-- Block Palette -->
|
|
<div class="palette-section">
|
|
<div class="palette-title">Add Block</div>
|
|
<div class="palette-blocks">
|
|
<button class="palette-block" data-type="heading"> H Heading</button>
|
|
<button class="palette-block" data-type="paragraph"> ¶ Paragraph</button>
|
|
<button class="palette-block" data-type="image"> 🖼 Image</button>
|
|
<button class="palette-block" data-type="quote"> " Quote</button>
|
|
<button class="palette-block" data-type="gallery"> ⊞ Gallery</button>
|
|
<button class="palette-block" data-type="grid4"> ▦ 4-Image Grid</button>
|
|
<button class="palette-block" data-type="statistics"> # Statistics</button>
|
|
<button class="palette-block" data-type="map-button"> 📍 Map Button</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div class="sidebar-actions">
|
|
<button id="resetBtn" class="btn-reset">↩ Reset to Default</button>
|
|
</div>
|
|
|
|
</aside>
|
|
|
|
<!-- ── Canvas ────────────────────────────────────────────────────── -->
|
|
<main class="builder-canvas-area">
|
|
<div class="canvas-header">
|
|
<h2 id="canvasSectionTitle">Loading…</h2>
|
|
<span class="canvas-badge" id="canvasBadge"></span>
|
|
</div>
|
|
<div id="builderCanvas"></div>
|
|
</main>
|
|
|
|
</div>
|
|
|
|
<!-- ── Edit Modal ────────────────────────────────────────────────────── -->
|
|
<div id="builderModal" class="builder-modal hidden">
|
|
<div class="modal-overlay"></div>
|
|
<div class="modal-dialog">
|
|
<div class="modal-header">
|
|
<h3 id="modalTitle">Edit Block</h3>
|
|
<button id="modalClose" title="Close">✕</button>
|
|
</div>
|
|
<div class="modal-body" id="modalBody"></div>
|
|
<div class="modal-footer">
|
|
<button id="modalSave" class="btn btn-primary">Save Block</button>
|
|
<button id="modalCancel" class="btn btn-secondary">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/block-renderer.js"></script>
|
|
<script src="js/builder.js"></script>
|
|
</body>
|
|
</html>
|
|
|