878 lines
39 KiB
HTML
878 lines
39 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Customizer New - {{ site_name }}</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=Source+Serif+4:wght@400;500;700&display=swap" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--bg: #e4dccb;
|
|
--bg-2: #f3ecde;
|
|
--panel: #fff8eb;
|
|
--panel-2: #f2e7cd;
|
|
--canvas: #ece3d1;
|
|
--text: #1f1b17;
|
|
--muted: #6e6458;
|
|
--accent: #9b2f16;
|
|
--accent-2: #2d5e4c;
|
|
--border: rgba(31, 27, 23, 0.14);
|
|
--shadow-soft: 0 12px 28px rgba(31, 27, 23, 0.14);
|
|
--shadow-panel: 0 20px 42px rgba(31, 27, 23, 0.16);
|
|
--fx-blur: 8px;
|
|
--fx-radius: 12px;
|
|
--topbar-a: rgba(45, 94, 76, 0.96);
|
|
--topbar-b: rgba(31, 27, 23, 0.88);
|
|
}
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body {
|
|
font-family: "Source Serif 4", serif;
|
|
color: var(--text);
|
|
background: radial-gradient(circle at 10% 0%, #f7f1e2 0%, var(--bg) 46%, #d6c6a5 100%);
|
|
}
|
|
.topbar {
|
|
height: 52px; display: flex; align-items: center; justify-content: space-between;
|
|
padding: 0 16px;
|
|
border-bottom: 1px solid var(--border);
|
|
background: linear-gradient(120deg, var(--topbar-a), var(--topbar-b));
|
|
box-shadow: var(--shadow-soft);
|
|
}
|
|
.brand {
|
|
font-family: "Oswald", sans-serif;
|
|
letter-spacing: 0.04em;
|
|
font-size: 1.02rem;
|
|
font-weight: 700;
|
|
color: #f7f1e2;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.btn {
|
|
padding: 8px 12px;
|
|
border: 1px solid rgba(255, 248, 235, 0.7);
|
|
background: rgba(255, 248, 235, 0.15);
|
|
color: #f7f1e2;
|
|
border-radius: 999px;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
transition: transform 140ms ease, box-shadow 140ms ease;
|
|
}
|
|
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(31, 27, 23, 0.26); }
|
|
.btn-primary {
|
|
background: var(--accent);
|
|
border-color: var(--accent);
|
|
color: #fff;
|
|
box-shadow: 0 8px 16px rgba(155, 47, 22, 0.3);
|
|
}
|
|
.layout { display: grid; grid-template-columns: 260px 1fr 260px; height: calc(100vh - 52px); }
|
|
.side {
|
|
background: linear-gradient(160deg, var(--panel), #f5ebd4);
|
|
border-right: 1px solid var(--border);
|
|
overflow: auto;
|
|
box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.4);
|
|
backdrop-filter: blur(var(--fx-blur));
|
|
-webkit-backdrop-filter: blur(var(--fx-blur));
|
|
}
|
|
.side.right { border-right: 0; border-left: 1px solid var(--border); }
|
|
.section { padding: 12px; }
|
|
.section-title {
|
|
font-family: "Oswald", sans-serif;
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
color: var(--muted);
|
|
margin-bottom: 8px;
|
|
}
|
|
.list-item {
|
|
padding: 8px 10px;
|
|
background: rgba(255, 255, 255, 0.58);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--fx-radius);
|
|
margin-bottom: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
box-shadow: 0 6px 14px rgba(31, 27, 23, 0.08);
|
|
backdrop-filter: blur(var(--fx-blur));
|
|
-webkit-backdrop-filter: blur(var(--fx-blur));
|
|
}
|
|
.list-item.active {
|
|
border-color: rgba(45, 94, 76, 0.45);
|
|
box-shadow: 0 10px 16px rgba(45, 94, 76, 0.12);
|
|
}
|
|
.list-actions button {
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 6px;
|
|
border: 1px solid var(--border);
|
|
background: rgba(255, 255, 255, 0.6);
|
|
color: var(--text);
|
|
cursor: pointer;
|
|
}
|
|
.canvas {
|
|
background: radial-gradient(circle at 30% 0%, #f4ead6 0%, var(--canvas) 60%, #ddcfb1 100%);
|
|
overflow: auto;
|
|
padding: 16px;
|
|
}
|
|
.preview {
|
|
background: #fff;
|
|
border-radius: calc(var(--fx-radius) + 4px);
|
|
border: 1px solid var(--border);
|
|
overflow: hidden;
|
|
min-height: 80vh;
|
|
box-shadow: var(--shadow-panel);
|
|
backdrop-filter: blur(var(--fx-blur));
|
|
-webkit-backdrop-filter: blur(var(--fx-blur));
|
|
}
|
|
.preview iframe { width: 100%; height: 80vh; border: 0; display: block; }
|
|
.field { margin-bottom: 10px; }
|
|
.field label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
|
|
.field input, .field textarea, .field select {
|
|
width: 100%;
|
|
padding: 8px 10px;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--border);
|
|
background: rgba(255, 255, 255, 0.75);
|
|
color: var(--text);
|
|
font-size: 12px;
|
|
}
|
|
.hint { font-size: 11px; color: var(--muted); }
|
|
.template-box {
|
|
padding: 10px;
|
|
border-radius: var(--fx-radius);
|
|
border: 1px solid var(--border);
|
|
background: rgba(255, 255, 255, 0.56);
|
|
margin-bottom: 12px;
|
|
box-shadow: 0 8px 18px rgba(31, 27, 23, 0.1);
|
|
backdrop-filter: blur(var(--fx-blur));
|
|
-webkit-backdrop-filter: blur(var(--fx-blur));
|
|
}
|
|
.preset-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 6px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.preset-chip {
|
|
border: 1px solid var(--border);
|
|
border-radius: 999px;
|
|
background: rgba(255, 255, 255, 0.72);
|
|
color: var(--text);
|
|
font-size: 11px;
|
|
padding: 6px 8px;
|
|
cursor: pointer;
|
|
}
|
|
.preset-chip.active {
|
|
background: var(--accent);
|
|
color: #fff;
|
|
border-color: var(--accent);
|
|
}
|
|
.field input[type="range"] {
|
|
padding: 0;
|
|
accent-color: var(--accent);
|
|
}
|
|
body.compact .side { display: none; }
|
|
body.compact .layout { grid-template-columns: 1fr; }
|
|
body.compact .canvas { padding: 0; }
|
|
body.compact .preview { min-height: calc(100vh - 52px); border-radius: 0; border: 0; }
|
|
.toggle-panels {
|
|
padding: 6px 10px;
|
|
border: 1px solid rgba(255, 248, 235, 0.7);
|
|
background: rgba(255, 248, 235, 0.15);
|
|
color: #f7f1e2;
|
|
border-radius: 999px;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
transition: transform 140ms ease, box-shadow 140ms ease;
|
|
}
|
|
.toggle-panels:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(31, 27, 23, 0.26); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="topbar">
|
|
<div class="brand"><i class="fas fa-layer-group"></i> Customizer New</div>
|
|
<div style="display:flex;gap:8px;align-items:center;">
|
|
<button class="toggle-panels" onclick="togglePanels()">Paneles</button>
|
|
<button class="btn" onclick="reloadPreview()">Refrescar preview</button>
|
|
<button class="btn btn-primary" onclick="saveState()">Guardar</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layout">
|
|
<aside class="side">
|
|
<div class="section">
|
|
<div class="section-title">Páginas</div>
|
|
<div id="pagesList"></div>
|
|
<button class="btn btn-primary" style="width:100%;margin-top:6px;" onclick="loadDemo()">Cargar demo</button>
|
|
</div>
|
|
<div class="section">
|
|
<div class="section-title">Capas (Secciones)</div>
|
|
<div id="sectionsList"></div>
|
|
<button class="btn" style="width:100%;margin-top:6px;" onclick="addSection()">Agregar sección</button>
|
|
</div>
|
|
</aside>
|
|
|
|
<main class="canvas">
|
|
<div class="preview">
|
|
<iframe id="previewFrame" src="/api/customizer/preview-frame/{{ site_id }}?page=home&edit=1&t={{ security_hash }}"></iframe>
|
|
</div>
|
|
</main>
|
|
|
|
<aside class="side right">
|
|
<div class="section">
|
|
<div class="section-title">Sistema Visual Pro</div>
|
|
<div id="visualPanel"></div>
|
|
</div>
|
|
<div class="section">
|
|
<div class="section-title">Propiedades</div>
|
|
<div class="hint">Edicion simple para plantillas</div>
|
|
<div id="propsPanel"></div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
|
|
<script>
|
|
const SITE_ID = {{ site_id }};
|
|
const THEME = "{{ theme }}";
|
|
const VISUAL_PRESETS = {
|
|
tierra_editorial: {
|
|
name: 'Tierra Editorial',
|
|
bg: '#e4dccb',
|
|
bg2: '#f3ecde',
|
|
panel: '#fff8eb',
|
|
text: '#1f1b17',
|
|
muted: '#6e6458',
|
|
accent: '#9b2f16',
|
|
accent2: '#2d5e4c',
|
|
blur: 8,
|
|
radius: 12,
|
|
depth: 38,
|
|
glow: 16,
|
|
map_ratio: '16 / 9',
|
|
map_h_desktop: 360,
|
|
map_h_tablet: 280,
|
|
map_h_mobile: 220,
|
|
social_style: 'pill'
|
|
},
|
|
glass_aurora: {
|
|
name: 'Glass Aurora',
|
|
bg: '#dde6ff',
|
|
bg2: '#eafcff',
|
|
panel: '#f7fbff',
|
|
text: '#1c2433',
|
|
muted: '#5a6a86',
|
|
accent: '#6b5bff',
|
|
accent2: '#3ecfc2',
|
|
blur: 18,
|
|
radius: 18,
|
|
depth: 56,
|
|
glow: 42,
|
|
map_ratio: '16 / 9',
|
|
map_h_desktop: 380,
|
|
map_h_tablet: 300,
|
|
map_h_mobile: 240,
|
|
social_style: 'glass'
|
|
},
|
|
ice_minimal: {
|
|
name: 'Ice Minimal',
|
|
bg: '#e9eef5',
|
|
bg2: '#f5f8fc',
|
|
panel: '#ffffff',
|
|
text: '#172133',
|
|
muted: '#667389',
|
|
accent: '#3a7bf7',
|
|
accent2: '#2fba99',
|
|
blur: 10,
|
|
radius: 14,
|
|
depth: 34,
|
|
glow: 10,
|
|
map_ratio: '4 / 3',
|
|
map_h_desktop: 340,
|
|
map_h_tablet: 280,
|
|
map_h_mobile: 220,
|
|
social_style: 'minimal'
|
|
},
|
|
noir_pro: {
|
|
name: 'Noir Pro',
|
|
bg: '#131620',
|
|
bg2: '#1b2030',
|
|
panel: '#1f2535',
|
|
text: '#eff3ff',
|
|
muted: '#9eabc7',
|
|
accent: '#5f8dff',
|
|
accent2: '#52d7be',
|
|
blur: 12,
|
|
radius: 12,
|
|
depth: 62,
|
|
glow: 26,
|
|
map_ratio: '16 / 10',
|
|
map_h_desktop: 360,
|
|
map_h_tablet: 290,
|
|
map_h_mobile: 230,
|
|
social_style: 'card'
|
|
}
|
|
};
|
|
let state = {
|
|
content: {{ content | tojson | safe }},
|
|
blocks: {{ content.get('blocks', []) | tojson | safe }},
|
|
settings: {{ content.get('settings', {}) | tojson | safe }},
|
|
pages: [
|
|
{ id: 'home', title: 'Inicio' },
|
|
{ id: 'servicios', title: 'Servicios' },
|
|
{ id: 'proyectos', title: 'Proyectos' },
|
|
{ id: 'contacto', title: 'Contacto' }
|
|
],
|
|
currentPage: 'home',
|
|
selectedIndex: null
|
|
};
|
|
let visualSaveTimer = null;
|
|
|
|
function applyCompactMode() {
|
|
if (THEME === 'streaming-vix') {
|
|
document.body.classList.add('compact');
|
|
}
|
|
}
|
|
|
|
function togglePanels() {
|
|
document.body.classList.toggle('compact');
|
|
}
|
|
|
|
function normalizeBlocks() {
|
|
state.blocks = (state.blocks || []).map(b => {
|
|
if (!b || typeof b !== 'object') return b;
|
|
if (!b.page) b.page = 'home';
|
|
if (!b.data) b.data = {};
|
|
return b;
|
|
});
|
|
}
|
|
|
|
function normalizeVisualSettings() {
|
|
if (!state.settings) state.settings = {};
|
|
const basePreset = VISUAL_PRESETS.tierra_editorial;
|
|
const current = state.settings.visual || {};
|
|
state.settings.visual = {
|
|
preset: current.preset || 'tierra_editorial',
|
|
...basePreset,
|
|
...current
|
|
};
|
|
if (!VISUAL_PRESETS[state.settings.visual.preset]) {
|
|
state.settings.visual.preset = 'tierra_editorial';
|
|
}
|
|
}
|
|
|
|
function renderVisualPanel() {
|
|
const panel = document.getElementById('visualPanel');
|
|
if (!panel) return;
|
|
const v = state.settings.visual || VISUAL_PRESETS.tierra_editorial;
|
|
const chips = Object.entries(VISUAL_PRESETS).map(([key, preset]) => `
|
|
<button class="preset-chip ${v.preset === key ? 'active' : ''}" onclick="applyVisualPreset('${key}')">${preset.name}</button>
|
|
`).join('');
|
|
|
|
panel.innerHTML = `
|
|
<div class="template-box">
|
|
<div class="preset-grid">${chips}</div>
|
|
${colorVisualTpl('accent', 'Acento', v.accent)}
|
|
${colorVisualTpl('accent2', 'Acento 2', v.accent2)}
|
|
${rangeVisualTpl('blur', 'Glass Blur', v.blur, 0, 28, 1)}
|
|
${rangeVisualTpl('radius', 'Radio', v.radius, 6, 28, 1)}
|
|
${rangeVisualTpl('depth', 'Profundidad', v.depth, 0, 100, 1)}
|
|
${rangeVisualTpl('glow', 'Glow', v.glow, 0, 80, 1)}
|
|
${selectVisualTpl('social_style', 'Estilo Redes', v.social_style, [
|
|
{ value: 'pill', label: 'Pill' },
|
|
{ value: 'glass', label: 'Glass' },
|
|
{ value: 'card', label: 'Card' },
|
|
{ value: 'minimal', label: 'Minimal' }
|
|
])}
|
|
${selectVisualTpl('map_ratio', 'Ratio Mapa', v.map_ratio, [
|
|
{ value: '16 / 9', label: '16:9' },
|
|
{ value: '4 / 3', label: '4:3' },
|
|
{ value: '1 / 1', label: '1:1' },
|
|
{ value: '21 / 9', label: '21:9' },
|
|
{ value: 'auto', label: 'Auto' }
|
|
])}
|
|
${rangeVisualTpl('map_h_desktop', 'Mapa Desktop', v.map_h_desktop, 220, 700, 10)}
|
|
${rangeVisualTpl('map_h_tablet', 'Mapa Tablet', v.map_h_tablet, 180, 540, 10)}
|
|
${rangeVisualTpl('map_h_mobile', 'Mapa Móvil', v.map_h_mobile, 140, 420, 10)}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function colorVisualTpl(id, label, value) {
|
|
return `<div class="field"><label>${label}</label><input type="color" value="${value}" oninput="updateVisual('${id}', this.value, true)" onchange="updateVisual('${id}', this.value, false)"></div>`;
|
|
}
|
|
|
|
function rangeVisualTpl(id, label, value, min, max, step) {
|
|
return `<div class="field"><label>${label}: <strong>${value}</strong></label><input type="range" min="${min}" max="${max}" step="${step}" value="${value}" oninput="updateVisual('${id}', this.value, true)" onchange="updateVisual('${id}', this.value, false)"></div>`;
|
|
}
|
|
|
|
function selectVisualTpl(id, label, selected, options) {
|
|
const opts = options.map(opt => `<option value="${opt.value}" ${selected === opt.value ? 'selected' : ''}>${opt.label}</option>`).join('');
|
|
return `<div class="field"><label>${label}</label><select oninput="updateVisual('${id}', this.value, true)" onchange="updateVisual('${id}', this.value, false)">${opts}</select></div>`;
|
|
}
|
|
|
|
function applyVisualPreset(presetKey) {
|
|
const preset = VISUAL_PRESETS[presetKey];
|
|
if (!preset) return;
|
|
state.settings.visual = { preset: presetKey, ...preset };
|
|
applyEditorVisual();
|
|
applyPreviewVisual();
|
|
renderVisualPanel();
|
|
saveState();
|
|
}
|
|
|
|
function updateVisual(key, value, live) {
|
|
const v = state.settings.visual || {};
|
|
if (['blur', 'radius', 'depth', 'glow', 'map_h_desktop', 'map_h_tablet', 'map_h_mobile'].includes(key)) {
|
|
v[key] = Number(value);
|
|
} else {
|
|
v[key] = value;
|
|
}
|
|
state.settings.visual = v;
|
|
applyEditorVisual();
|
|
applyPreviewVisual();
|
|
if (!live) {
|
|
renderVisualPanel();
|
|
saveState();
|
|
return;
|
|
}
|
|
if (visualSaveTimer) clearTimeout(visualSaveTimer);
|
|
visualSaveTimer = setTimeout(() => saveState(), 700);
|
|
}
|
|
|
|
function hexToRgba(hex, alpha) {
|
|
if (!hex || typeof hex !== 'string') return `rgba(0,0,0,${alpha})`;
|
|
const clean = hex.replace('#', '');
|
|
const full = clean.length === 3 ? clean.split('').map(ch => ch + ch).join('') : clean;
|
|
const num = parseInt(full, 16);
|
|
if (Number.isNaN(num)) return `rgba(0,0,0,${alpha})`;
|
|
const r = (num >> 16) & 255;
|
|
const g = (num >> 8) & 255;
|
|
const b = num & 255;
|
|
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
|
|
}
|
|
|
|
function applyEditorVisual() {
|
|
const v = state.settings.visual || VISUAL_PRESETS.tierra_editorial;
|
|
const root = document.documentElement;
|
|
const depth = Number(v.depth || 40);
|
|
const blur = Number(v.blur || 8);
|
|
const radius = Number(v.radius || 12);
|
|
const glow = Number(v.glow || 0);
|
|
root.style.setProperty('--bg', v.bg);
|
|
root.style.setProperty('--bg-2', v.bg2);
|
|
root.style.setProperty('--panel', v.panel);
|
|
root.style.setProperty('--panel-2', v.panel);
|
|
root.style.setProperty('--canvas', v.bg2);
|
|
root.style.setProperty('--text', v.text);
|
|
root.style.setProperty('--muted', v.muted);
|
|
root.style.setProperty('--accent', v.accent);
|
|
root.style.setProperty('--accent-2', v.accent2);
|
|
root.style.setProperty('--border', hexToRgba(v.text, 0.14));
|
|
root.style.setProperty('--fx-blur', `${blur}px`);
|
|
root.style.setProperty('--fx-radius', `${radius}px`);
|
|
root.style.setProperty('--shadow-soft', `0 12px 28px ${hexToRgba(v.text, 0.08 + depth / 600)}`);
|
|
root.style.setProperty('--shadow-panel', `0 22px 46px ${hexToRgba(v.text, 0.12 + depth / 500)}`);
|
|
root.style.setProperty('--topbar-a', hexToRgba(v.accent2, 0.94));
|
|
root.style.setProperty('--topbar-b', hexToRgba(v.text, 0.9));
|
|
if (glow > 0) {
|
|
root.style.setProperty('--shadow-soft', `0 12px 28px ${hexToRgba(v.text, 0.08 + depth / 600)}, 0 0 ${Math.round(glow / 3)}px ${hexToRgba(v.accent, 0.18)}`);
|
|
}
|
|
}
|
|
|
|
function applyPreviewVisual() {
|
|
const frame = document.getElementById('previewFrame');
|
|
if (!frame || !frame.contentDocument) return;
|
|
const doc = frame.contentDocument;
|
|
const v = state.settings.visual || VISUAL_PRESETS.tierra_editorial;
|
|
const styleId = 'gk-customizer-visual';
|
|
let styleEl = doc.getElementById(styleId);
|
|
if (!styleEl) {
|
|
styleEl = doc.createElement('style');
|
|
styleEl.id = styleId;
|
|
doc.head.appendChild(styleEl);
|
|
}
|
|
const blur = Number(v.blur || 8);
|
|
const radius = Number(v.radius || 12);
|
|
const glow = Number(v.glow || 0);
|
|
const font = (state.settings && state.settings.font_family) ? state.settings.font_family : 'Source Serif 4';
|
|
const mapRatio = v.map_ratio || '16 / 9';
|
|
const mapDesktop = Number(v.map_h_desktop || 360);
|
|
const mapTablet = Number(v.map_h_tablet || 280);
|
|
const mapMobile = Number(v.map_h_mobile || 220);
|
|
const socialStyle = v.social_style || 'pill';
|
|
const socialBg = socialStyle === 'minimal'
|
|
? 'transparent'
|
|
: socialStyle === 'card'
|
|
? hexToRgba(v.panel, 0.92)
|
|
: hexToRgba(v.panel, 0.72);
|
|
const socialBorder = socialStyle === 'minimal'
|
|
? hexToRgba(v.text, 0.26)
|
|
: hexToRgba(v.text, 0.14);
|
|
const socialShadow = socialStyle === 'card'
|
|
? `0 14px 26px ${hexToRgba(v.text, 0.18)}`
|
|
: socialStyle === 'glass'
|
|
? `0 10px 18px ${hexToRgba(v.text, 0.15)}, 0 0 ${Math.max(6, Math.round(glow / 2))}px ${hexToRgba(v.accent, 0.2)}`
|
|
: `0 8px 14px ${hexToRgba(v.text, 0.12)}`;
|
|
styleEl.textContent = `
|
|
:root {
|
|
--gk-accent: ${v.accent};
|
|
--gk-accent-2: ${v.accent2};
|
|
--gk-text: ${v.text};
|
|
--gk-muted: ${v.muted};
|
|
}
|
|
body {
|
|
background: radial-gradient(circle at 15% 0%, ${v.bg2} 0%, ${v.bg} 56%, ${v.panel} 100%) !important;
|
|
color: ${v.text} !important;
|
|
font-family: '${font}', system-ui, sans-serif !important;
|
|
}
|
|
:where(section, article, .card, .panel, .tile, .feature, .service-item, .pricing-card, .contact-card, .box) {
|
|
background: ${hexToRgba(v.panel, 0.72)} !important;
|
|
border: 1px solid ${hexToRgba(v.text, 0.14)} !important;
|
|
border-radius: ${radius}px !important;
|
|
box-shadow: 0 16px 28px ${hexToRgba(v.text, 0.14)}${glow > 0 ? `, 0 0 ${Math.round(glow / 2)}px ${hexToRgba(v.accent, 0.22)}` : ''} !important;
|
|
backdrop-filter: blur(${blur}px) !important;
|
|
-webkit-backdrop-filter: blur(${blur}px) !important;
|
|
}
|
|
:where(button, .btn, a.btn, input, textarea, select) {
|
|
border-radius: ${Math.max(8, radius - 2)}px !important;
|
|
}
|
|
:where(a, .link-accent, h1, h2, h3) {
|
|
color: inherit;
|
|
}
|
|
:where(.btn-primary, button.primary, a.primary) {
|
|
background: linear-gradient(120deg, ${v.accent}, ${v.accent2}) !important;
|
|
color: #fff !important;
|
|
border-color: transparent !important;
|
|
}
|
|
:where(.redes-sociales a, .social-icon, .social-btn, [data-social], .social-link) {
|
|
display: inline-flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
gap: 8px !important;
|
|
background: ${socialBg} !important;
|
|
border: 1px solid ${socialBorder} !important;
|
|
color: ${v.text} !important;
|
|
border-radius: ${Math.max(10, radius)}px !important;
|
|
padding: 8px 12px !important;
|
|
box-shadow: ${socialShadow} !important;
|
|
text-decoration: none !important;
|
|
backdrop-filter: blur(${Math.max(0, blur - 2)}px) !important;
|
|
-webkit-backdrop-filter: blur(${Math.max(0, blur - 2)}px) !important;
|
|
transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease !important;
|
|
}
|
|
:where(.redes-sociales a, .social-icon, .social-btn, [data-social], .social-link):hover {
|
|
transform: translateY(-2px) !important;
|
|
border-color: ${hexToRgba(v.accent, 0.5)} !important;
|
|
box-shadow: 0 14px 24px ${hexToRgba(v.text, 0.2)}, 0 0 ${Math.max(8, Math.round(glow / 2))}px ${hexToRgba(v.accent, 0.24)} !important;
|
|
}
|
|
:where(.mapa-container iframe, iframe.map-frame, [class*="map"] iframe, [data-block-type="map"] iframe) {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
border: 0 !important;
|
|
border-radius: ${Math.max(10, radius)}px !important;
|
|
box-shadow: 0 12px 22px ${hexToRgba(v.text, 0.16)} !important;
|
|
display: block !important;
|
|
${mapRatio === 'auto' ? `height: ${mapDesktop}px !important;` : `height: auto !important; aspect-ratio: ${mapRatio} !important;`}
|
|
}
|
|
@media (max-width: 1024px) {
|
|
:where(.mapa-container iframe, iframe.map-frame, [class*="map"] iframe, [data-block-type="map"] iframe) {
|
|
${mapRatio === 'auto' ? `height: ${mapTablet}px !important;` : `min-height: ${mapTablet}px !important;`}
|
|
}
|
|
}
|
|
@media (max-width: 768px) {
|
|
:where(.mapa-container iframe, iframe.map-frame, [class*="map"] iframe, [data-block-type="map"] iframe) {
|
|
${mapRatio === 'auto' ? `height: ${mapMobile}px !important;` : `min-height: ${mapMobile}px !important;`}
|
|
}
|
|
}
|
|
`;
|
|
applyPerBlockMapSizing(doc, mapRatio, mapDesktop);
|
|
}
|
|
|
|
function applyPerBlockMapSizing(doc, fallbackRatio, fallbackHeight) {
|
|
const mapBlocks = (state.blocks || []).filter(b => (b.page || 'home') === state.currentPage && (b.type === 'map' || b.type === 'mapa'));
|
|
if (!mapBlocks.length) return;
|
|
const mapIframes = doc.querySelectorAll('.mapa-container iframe, iframe.map-frame, [class*="map"] iframe, [data-block-type="map"] iframe');
|
|
if (!mapIframes.length) return;
|
|
|
|
mapIframes.forEach((iframe, i) => {
|
|
const data = (mapBlocks[i] && mapBlocks[i].data) ? mapBlocks[i].data : {};
|
|
const ratio = data.ratio || fallbackRatio || '16 / 9';
|
|
const height = Number(data.height || fallbackHeight || 360);
|
|
if (ratio && ratio !== 'auto') {
|
|
iframe.style.aspectRatio = ratio;
|
|
iframe.style.height = 'auto';
|
|
iframe.style.minHeight = `${Math.max(160, Math.min(height, 800))}px`;
|
|
} else {
|
|
iframe.style.height = `${Math.max(160, Math.min(height, 800))}px`;
|
|
iframe.style.aspectRatio = '';
|
|
iframe.style.minHeight = '';
|
|
}
|
|
});
|
|
}
|
|
|
|
function getSections() {
|
|
const sections = [];
|
|
let current = null;
|
|
state.blocks.forEach((block, idx) => {
|
|
if ((block.page || 'home') !== state.currentPage) return;
|
|
if (block.type === 'heading') {
|
|
if (current) current.endIdx = idx - 1;
|
|
current = { title: block.data.text || 'Sección', startIdx: idx, endIdx: idx, idx };
|
|
sections.push(current);
|
|
} else if (!current) {
|
|
current = { title: 'Sección', startIdx: idx, endIdx: idx, idx };
|
|
sections.push(current);
|
|
} else {
|
|
current.endIdx = idx;
|
|
}
|
|
});
|
|
return sections;
|
|
}
|
|
|
|
function renderPages() {
|
|
const list = document.getElementById('pagesList');
|
|
list.innerHTML = state.pages.map(p => `
|
|
<div class="list-item ${p.id === state.currentPage ? 'active' : ''}" onclick="setPage('${p.id}')">
|
|
<span>${p.title}</span>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
function renderSections() {
|
|
const list = document.getElementById('sectionsList');
|
|
const sections = getSections();
|
|
if (sections.length === 0) {
|
|
list.innerHTML = '<div class="list-item">Sin secciones</div>';
|
|
return;
|
|
}
|
|
list.innerHTML = sections.map((s, i) => `
|
|
<div class="list-item ${state.selectedIndex === s.idx ? 'active' : ''}" onclick="selectBlock(${s.idx})">
|
|
<span>${s.title}</span>
|
|
<div class="list-actions">
|
|
<button onclick="moveSection(${i}, -1); event.stopPropagation()">↑</button>
|
|
<button onclick="moveSection(${i}, 1); event.stopPropagation()">↓</button>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
function renderProps() {
|
|
const panel = document.getElementById('propsPanel');
|
|
let html = '';
|
|
if (THEME === 'streaming-vix') {
|
|
const c = state.content || {};
|
|
html += `<div class="template-box">
|
|
<div class="section-title">Template Streaming</div>
|
|
${fieldTpl('hero_title', 'Titulo principal', c.hero_title || 'Bienvenido')}
|
|
${textareaTpl('hero_description', 'Descripcion', c.hero_description || '')}
|
|
${fieldTpl('cta_primary_text', 'CTA principal', c.cta_primary_text || 'Empezar ahora')}
|
|
${fieldTpl('cta_primary_url', 'URL CTA principal', c.cta_primary_url || '#cta')}
|
|
${fieldTpl('cta_secondary_text', 'CTA secundario', c.cta_secondary_text || 'Ver catalogo')}
|
|
${fieldTpl('cta_secondary_url', 'URL CTA secundario', c.cta_secondary_url || '#showcase')}
|
|
${textareaTpl('benefits', 'Beneficios (uno por linea)', (c.benefits || []).join('\n'))}
|
|
${textareaTpl('showcase', 'Contenido destacado (uno por linea)', (c.showcase || []).join('\n'))}
|
|
${fieldTpl('footer_text', 'Footer', c.footer_text || '')}
|
|
</div>`;
|
|
}
|
|
const idx = state.selectedIndex;
|
|
if (idx !== null && state.blocks[idx]) {
|
|
const b = state.blocks[idx];
|
|
html += `<div class="template-box"><div class="section-title">Bloque</div>`;
|
|
if (b.type === 'heading') {
|
|
html += field('text', 'Titulo', b.data.text || '');
|
|
html += field('color', 'Color', b.data.color || '#0f172a');
|
|
} else if (b.type === 'paragraph') {
|
|
html += textarea('text', 'Contenido', b.data.text || '');
|
|
} else if (b.type === 'image') {
|
|
html += field('url', 'URL Imagen', b.data.url || '');
|
|
} else if (b.type === 'map' || b.type === 'mapa') {
|
|
html += field('url', 'URL Embed', b.data.url || b.data.embed || '');
|
|
html += field('address', 'Dirección', b.data.address || '');
|
|
html += selectField('ratio', 'Ratio', b.data.ratio || '16 / 9', [
|
|
{ value: '16 / 9', label: '16:9' },
|
|
{ value: '4 / 3', label: '4:3' },
|
|
{ value: '1 / 1', label: '1:1' },
|
|
{ value: '21 / 9', label: '21:9' },
|
|
{ value: 'auto', label: 'Auto' }
|
|
]);
|
|
html += field('height', 'Altura (px)', b.data.height || '');
|
|
} else if (b.type === 'list') {
|
|
html += field('title', 'Titulo', b.data.title || '');
|
|
html += textarea('items', 'Items (uno por linea)', (b.data.items || []).join('\n'));
|
|
} else {
|
|
html += textarea('json', 'JSON', JSON.stringify(b.data || {}, null, 2));
|
|
}
|
|
html += `</div>`;
|
|
}
|
|
panel.innerHTML = html || '<div class="hint">Selecciona un bloque o edita el template.</div>';
|
|
}
|
|
|
|
function field(id, label, value) {
|
|
return `<div class="field"><label>${label}</label><input id="field_${id}" value="${value}" oninput="updateField('${id}')"></div>`;
|
|
}
|
|
|
|
function textarea(id, label, value) {
|
|
return `<div class="field"><label>${label}</label><textarea id="field_${id}" rows="5" oninput="updateField('${id}')">${value}</textarea></div>`;
|
|
}
|
|
function selectField(id, label, selected, options) {
|
|
const opts = options.map(opt => `<option value="${opt.value}" ${selected === opt.value ? 'selected' : ''}>${opt.label}</option>`).join('');
|
|
return `<div class="field"><label>${label}</label><select id="field_${id}" oninput="updateField('${id}')" onchange="updateField('${id}')">${opts}</select></div>`;
|
|
}
|
|
|
|
function fieldTpl(id, label, value) {
|
|
return `<div class="field"><label>${label}</label><input id="tpl_${id}" value="${value}" oninput="updateTemplate('${id}')"></div>`;
|
|
}
|
|
|
|
function textareaTpl(id, label, value) {
|
|
return `<div class="field"><label>${label}</label><textarea id="tpl_${id}" rows="4" oninput="updateTemplate('${id}')">${value}</textarea></div>`;
|
|
}
|
|
|
|
function updateField(id) {
|
|
const b = state.blocks[state.selectedIndex];
|
|
if (!b) return;
|
|
if (id === 'items') {
|
|
b.data.items = document.getElementById('field_items').value.split('\\n').filter(Boolean);
|
|
} else if (id === 'json') {
|
|
try { b.data = JSON.parse(document.getElementById('field_json').value); } catch (e) { return; }
|
|
} else if (id === 'url' && (b.type === 'map' || b.type === 'mapa')) {
|
|
const val = document.getElementById('field_url').value;
|
|
b.data.url = val;
|
|
b.data.embed = val;
|
|
} else if (id === 'height' && (b.type === 'map' || b.type === 'mapa')) {
|
|
const raw = document.getElementById('field_height').value;
|
|
const n = Number(raw);
|
|
b.data.height = Number.isFinite(n) && n > 0 ? n : '';
|
|
} else {
|
|
b.data[id] = document.getElementById('field_' + id).value;
|
|
}
|
|
saveState();
|
|
}
|
|
|
|
function updateTemplate(id) {
|
|
if (!state.content) state.content = {};
|
|
if (id === 'benefits' || id === 'showcase') {
|
|
const raw = document.getElementById('tpl_' + id).value;
|
|
state.content[id] = raw.split('\n').filter(Boolean);
|
|
} else {
|
|
state.content[id] = document.getElementById('tpl_' + id).value;
|
|
}
|
|
saveState();
|
|
}
|
|
|
|
function selectBlock(idx) {
|
|
state.selectedIndex = idx;
|
|
renderSections();
|
|
renderProps();
|
|
}
|
|
|
|
function setPage(id) {
|
|
state.currentPage = id;
|
|
state.selectedIndex = null;
|
|
renderPages();
|
|
renderSections();
|
|
renderProps();
|
|
reloadPreview();
|
|
}
|
|
|
|
function moveSection(idx, dir) {
|
|
const sections = getSections();
|
|
const newIdx = idx + dir;
|
|
if (newIdx < 0 || newIdx >= sections.length) return;
|
|
const order = sections.map((_, i) => i);
|
|
const temp = order[idx];
|
|
order[idx] = order[newIdx];
|
|
order[newIdx] = temp;
|
|
reorderSections(order);
|
|
}
|
|
|
|
function reorderSections(order) {
|
|
const sections = getSections();
|
|
if (sections.length === 0) return;
|
|
const removed = new Set();
|
|
const reordered = [];
|
|
order.forEach(i => {
|
|
const sec = sections[i];
|
|
for (let x = sec.startIdx; x <= sec.endIdx; x++) {
|
|
reordered.push(state.blocks[x]);
|
|
removed.add(x);
|
|
}
|
|
});
|
|
const firstStart = sections[0].startIdx;
|
|
const before = [];
|
|
const after = [];
|
|
state.blocks.forEach((b, i) => {
|
|
if (removed.has(i)) return;
|
|
if (i < firstStart) before.push(b);
|
|
else after.push(b);
|
|
});
|
|
state.blocks = before.concat(reordered, after);
|
|
renderSections();
|
|
saveState();
|
|
}
|
|
|
|
function addSection() {
|
|
const title = prompt('Título de la sección', 'Nueva sección');
|
|
if (!title) return;
|
|
state.blocks.push({ id: Math.random(), type: 'heading', colSpan: 4, page: state.currentPage, data: { text: title, color: '#0f172a' } });
|
|
state.blocks.push({ id: Math.random(), type: 'paragraph', colSpan: 4, page: state.currentPage, data: { text: 'Contenido de la sección...' } });
|
|
renderSections();
|
|
saveState();
|
|
}
|
|
|
|
function loadDemo() {
|
|
const demo = [
|
|
{ id: 1, type: 'heading', colSpan: 4, page: 'home', data: { text: 'Construcción de Viviendas', color: '#0f172a' } },
|
|
{ id: 2, type: 'paragraph', colSpan: 4, page: 'home', data: { text: 'Diseño, planificación y obra llave en mano.' } },
|
|
{ id: 3, type: 'heading', colSpan: 4, page: 'home', data: { text: 'Servicios', color: '#0f172a' } },
|
|
{ id: 4, type: 'list', colSpan: 4, page: 'home', data: { title: 'Servicios', items: ['Proyecto', 'Obra nueva', 'Reformas', 'Permisos'] } },
|
|
{ id: 5, type: 'heading', colSpan: 4, page: 'home', data: { text: 'Testimonios', color: '#0f172a' } },
|
|
{ id: 6, type: 'list', colSpan: 4, page: 'home', data: { title: 'Opiniones', items: ['Excelente calidad', 'Buen trato', 'Recomendado'] } }
|
|
];
|
|
state.blocks = demo;
|
|
renderSections();
|
|
saveState();
|
|
}
|
|
|
|
async function saveState() {
|
|
if (!state.content) state.content = {};
|
|
state.content.settings = state.settings || {};
|
|
state.content.blocks = state.blocks || [];
|
|
await fetch('/api/customizer/save', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
site_id: SITE_ID,
|
|
content: state.content
|
|
})
|
|
});
|
|
reloadPreview();
|
|
}
|
|
|
|
function reloadPreview() {
|
|
const frame = document.getElementById('previewFrame');
|
|
frame.src = `/api/customizer/preview-frame/${SITE_ID}?page=${state.currentPage}&edit=1&t=${Date.now()}`;
|
|
}
|
|
|
|
applyCompactMode();
|
|
if (!state.content) state.content = {};
|
|
normalizeVisualSettings();
|
|
normalizeBlocks();
|
|
applyEditorVisual();
|
|
const previewFrame = document.getElementById('previewFrame');
|
|
if (previewFrame) {
|
|
previewFrame.addEventListener('load', applyPreviewVisual);
|
|
}
|
|
renderPages();
|
|
renderSections();
|
|
renderVisualPanel();
|
|
renderProps();
|
|
applyPreviewVisual();
|
|
</script>
|
|
</body>
|
|
</html>
|