|
|
|
@@ -1,4 +1,4 @@
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<html lang="es">
|
|
|
|
<html lang="es">
|
|
|
|
<head>
|
|
|
|
<head>
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
@@ -7,7 +7,7 @@
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@400;600;700&family=Outfit:wght@400;500;700&family=Sora:wght@400;600;700&family=Poppins:wght@400;500;700&family=Playfair+Display:wght@400;600;700&family=IBM+Plex+Sans:wght@400;500;700&family=Merriweather:wght@400;700&display=swap" rel="stylesheet">
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@400;600;700&family=Outfit:wght@400;500;700&family=Sora:wght@400;600;700&family=Poppins:wght@400;500;700&family=Playfair+Display:wght@400;600;700&family=IBM+Plex+Sans:wght@400;500;700&family=Merriweather:wght@400;700&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
|
|
<style>
|
|
|
|
:root { --bg:#0b0f16; --panel:#121826; --panel2:#1a2234; --text:#e5e7eb; --muted:#8a93a5; --accent:#59d9c8; --border:#263043; }
|
|
|
|
:root { --bg:#0b0f16; --panel:#121826; --panel2:#1a2234; --text:#e5e7eb; --muted:#8a93a5; --accent:#59d9c8; --border:#263043; --space-1:6px; --space-2:10px; --space-3:14px; --space-4:18px; --space-5:24px; --radius-sm:10px; --radius-md:14px; --radius-lg:18px; --shadow-soft:0 8px 18px rgba(15,23,42,.06); --shadow-lift:0 16px 36px rgba(15,23,42,.12); }
|
|
|
|
*{box-sizing:border-box}
|
|
|
|
*{box-sizing:border-box}
|
|
|
|
body{margin:0;font-family:Manrope,system-ui,sans-serif;background:radial-gradient(circle at top left,#101725,#080b12 65%);color:var(--text)}
|
|
|
|
body{margin:0;font-family:Manrope,system-ui,sans-serif;background:radial-gradient(circle at top left,#101725,#080b12 65%);color:var(--text)}
|
|
|
|
.app{display:grid;grid-template-columns:240px 1fr 280px;min-height:100vh}
|
|
|
|
.app{display:grid;grid-template-columns:240px 1fr 280px;min-height:100vh}
|
|
|
|
@@ -24,7 +24,7 @@
|
|
|
|
.btn.secondary{background:transparent;color:var(--text);border:1px solid var(--border)}
|
|
|
|
.btn.secondary{background:transparent;color:var(--text);border:1px solid var(--border)}
|
|
|
|
.btn.icon{width:34px;height:34px;padding:0;display:flex;align-items:center;justify-content:center}
|
|
|
|
.btn.icon{width:34px;height:34px;padding:0;display:flex;align-items:center;justify-content:center}
|
|
|
|
.btn.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(89,217,200,.15)}
|
|
|
|
.btn.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(89,217,200,.15)}
|
|
|
|
.preview-shell{background:#0f1520;border:1px solid #222b3a;border-radius:18px;padding:14px;width:100%;max-width:1200px;margin:0 auto}
|
|
|
|
.preview-shell{background:#0f1520;border:1px solid #222b3a;border-radius:18px;padding:14px;width:100%;max-width:none;margin:0 auto}
|
|
|
|
body.ub24 .preview-shell{background:#eef1f6;border-color:#e5e7eb}
|
|
|
|
body.ub24 .preview-shell{background:#eef1f6;border-color:#e5e7eb}
|
|
|
|
body.ub24 .apple-bar{display:none}
|
|
|
|
body.ub24 .apple-bar{display:none}
|
|
|
|
body.ub24 .preview-shell{padding:0;border-radius:12px}
|
|
|
|
body.ub24 .preview-shell{padding:0;border-radius:12px}
|
|
|
|
@@ -36,7 +36,7 @@
|
|
|
|
body.ub24 #btnAlign, body.ub24 #btnBack{display:none}
|
|
|
|
body.ub24 #btnAlign, body.ub24 #btnBack{display:none}
|
|
|
|
body.ub24 .topbar .top-meta{display:none}
|
|
|
|
body.ub24 .topbar .top-meta{display:none}
|
|
|
|
body.ub24 .block-item{display:flex;align-items:center;gap:8px}
|
|
|
|
body.ub24 .block-item{display:flex;align-items:center;gap:8px}
|
|
|
|
body.ub24 .block-item:before{content:"▣";color:#6b7280;font-size:12px}
|
|
|
|
body.ub24 .block-item:before{content:"*";color:#6b7280;font-size:12px}
|
|
|
|
body.ub24 .inspector .section-title{margin-top:0}
|
|
|
|
body.ub24 .inspector .section-title{margin-top:0}
|
|
|
|
body.ub24 .inspector .acc{background:#f9fafb;border-color:#e5e7eb}
|
|
|
|
body.ub24 .inspector .acc{background:#f9fafb;border-color:#e5e7eb}
|
|
|
|
body.ub24 .inspector label{color:#6b7280}
|
|
|
|
body.ub24 .inspector label{color:#6b7280}
|
|
|
|
@@ -45,8 +45,8 @@
|
|
|
|
.apple-bar{background:#f8fafc;border-bottom:1px solid #e2e8f0;padding:8px 12px;font-size:12px;color:#334155;display:flex;align-items:center;gap:6px}
|
|
|
|
.apple-bar{background:#f8fafc;border-bottom:1px solid #e2e8f0;padding:8px 12px;font-size:12px;color:#334155;display:flex;align-items:center;gap:6px}
|
|
|
|
.apple-dot{width:9px;height:9px;border-radius:50%}
|
|
|
|
.apple-dot{width:9px;height:9px;border-radius:50%}
|
|
|
|
.red{background:#f87171}.yellow{background:#fbbf24}.green{background:#4ade80}
|
|
|
|
.red{background:#f87171}.yellow{background:#fbbf24}.green{background:#4ade80}
|
|
|
|
.canvas{min-height:700px;padding:32px;background:#f6f7fb;transition:background .6s ease,color .4s ease; color:var(--site-text,#0b0c10)}
|
|
|
|
.canvas{min-height:700px;padding:34px;background:#f6f7fb;transition:background .6s ease,color .4s ease; color:var(--site-text,#0b0c10)}
|
|
|
|
.block{background:var(--site-card,#fff);border-radius:14px;padding:14px;margin-bottom:16px;border:1px solid transparent;box-shadow:0 12px 30px rgba(15,23,42,.08);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;animation:fadeUp .25s ease;color:var(--site-text,#0b0c10);position:relative;will-change:transform;cursor:grab}
|
|
|
|
.block{background:var(--site-card,#fff);border-radius:var(--radius-md);padding:var(--space-3);margin-bottom:var(--space-4);border:1px solid transparent;box-shadow:0 12px 30px rgba(15,23,42,.08);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;animation:fadeUp .25s ease;color:var(--site-text,#0b0c10);position:relative;will-change:transform;cursor:grab}
|
|
|
|
.block.dragging,.block.resizing{transition:none;cursor:grabbing}
|
|
|
|
.block.dragging,.block.resizing{transition:none;cursor:grabbing}
|
|
|
|
body.dragging{user-select:none}
|
|
|
|
body.dragging{user-select:none}
|
|
|
|
.block:hover{transform:translateY(-2px);box-shadow:0 20px 46px rgba(15,23,42,.14)}
|
|
|
|
.block:hover{transform:translateY(-2px);box-shadow:0 20px 46px rgba(15,23,42,.14)}
|
|
|
|
@@ -88,11 +88,18 @@
|
|
|
|
.calendar-day{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:10px 0;text-align:center;font-size:12px;color:var(--site-text)}
|
|
|
|
.calendar-day{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:10px 0;text-align:center;font-size:12px;color:var(--site-text)}
|
|
|
|
.calendar-day.muted{color:#94a3b8;background:#f1f5f9}
|
|
|
|
.calendar-day.muted{color:#94a3b8;background:#f1f5f9}
|
|
|
|
.calendar-day.today{border-color:var(--site-primary);box-shadow:0 0 0 2px rgba(89,217,200,.15)}
|
|
|
|
.calendar-day.today{border-color:var(--site-primary);box-shadow:0 0 0 2px rgba(89,217,200,.15)}
|
|
|
|
.hero-pro{display:grid;gap:12px}
|
|
|
|
.hero-pro{display:grid;gap:var(--space-4)}
|
|
|
|
|
|
|
|
.hero-layout{display:grid;grid-template-columns:minmax(260px,1fr) minmax(300px,.92fr);gap:var(--space-5);align-items:stretch}
|
|
|
|
|
|
|
|
.hero-copy{display:grid;gap:var(--space-3);align-content:center}
|
|
|
|
|
|
|
|
.hero-media{min-height:320px;border-radius:var(--radius-lg);overflow:hidden;border:1px solid #dbe3ee;background:linear-gradient(130deg,#e8eef6,#dce6f1);box-shadow:var(--shadow-soft)}
|
|
|
|
|
|
|
|
.hero-media img{width:100%;height:100%;object-fit:cover;display:block}
|
|
|
|
|
|
|
|
.hero-media-empty{height:100%;display:flex;align-items:center;justify-content:center;padding:var(--space-4);text-align:center;font-size:13px;color:var(--site-muted)}
|
|
|
|
|
|
|
|
.hero-actions{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
|
|
|
|
.hero-kicker{text-transform:uppercase;font-size:11px;letter-spacing:2px;color:var(--site-primary);font-weight:700}
|
|
|
|
.hero-kicker{text-transform:uppercase;font-size:11px;letter-spacing:2px;color:var(--site-primary);font-weight:700}
|
|
|
|
.hero-pro h2.editable{margin:0;line-height:1.08;font-size:clamp(30px,4.5vw,58px);font-weight:700;max-width:16ch}
|
|
|
|
.hero-pro h2.editable{margin:0;line-height:1.08;font-size:clamp(30px,4.5vw,58px);font-weight:700;max-width:16ch}
|
|
|
|
.hero-pro p.editable{margin:0;max-width:58ch;color:var(--site-muted);font-size:clamp(15px,1.6vw,19px);line-height:1.55}
|
|
|
|
.hero-pro p.editable{margin:0;max-width:58ch;color:var(--site-muted);font-size:clamp(15px,1.6vw,19px);line-height:1.55}
|
|
|
|
.hero-cta{display:inline-flex;align-items:center;justify-content:center;padding:11px 18px;border-radius:999px;background:var(--site-primary);color:#0b0f16;text-decoration:none;font-weight:700;line-height:1}
|
|
|
|
.hero-cta{display:inline-flex;align-items:center;justify-content:center;padding:11px 18px;border-radius:999px;background:var(--site-primary);color:#0b0f16;text-decoration:none;font-weight:700;line-height:1}
|
|
|
|
|
|
|
|
.hero-cta-secondary{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:999px;border:1px solid #dbe3ee;background:transparent;color:var(--site-text);text-decoration:none;font-weight:600;line-height:1}
|
|
|
|
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
|
|
|
|
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
|
|
|
|
.feature-pill{background:var(--site-card);padding:12px;border-radius:12px;text-align:center;font-weight:600;border:1px solid #e5e7eb}
|
|
|
|
.feature-pill{background:var(--site-card);padding:12px;border-radius:12px;text-align:center;font-weight:600;border:1px solid #e5e7eb}
|
|
|
|
.block .cards-grid{margin-top:10px}
|
|
|
|
.block .cards-grid{margin-top:10px}
|
|
|
|
@@ -115,12 +122,21 @@
|
|
|
|
.contact-send{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:10px;padding:10px 14px;background:var(--site-primary);color:#0b0f16;font-weight:700;cursor:pointer}
|
|
|
|
.contact-send{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:10px;padding:10px 14px;background:var(--site-primary);color:#0b0f16;font-weight:700;cursor:pointer}
|
|
|
|
.contact-send i{font-size:12px}
|
|
|
|
.contact-send i{font-size:12px}
|
|
|
|
@media (max-width:860px){.contact-pro{grid-template-columns:1fr}}
|
|
|
|
@media (max-width:860px){.contact-pro{grid-template-columns:1fr}}
|
|
|
|
|
|
|
|
.site-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:10px 12px;border:1px solid #dde4ef;border-radius:var(--radius-md);background:rgba(255,255,255,.72);backdrop-filter:blur(8px)}
|
|
|
|
|
|
|
|
.site-brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px;min-width:0}
|
|
|
|
|
|
|
|
.site-brand img{height:28px;width:auto;border-radius:8px;border:1px solid #dbe3ee}
|
|
|
|
|
|
|
|
.site-brand span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
|
|
|
|
|
|
.site-nav-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
|
|
|
|
|
|
|
|
.site-nav-link{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:999px;border:1px solid transparent;text-decoration:none;font-size:13px;color:var(--site-text);transition:background .2s ease,border-color .2s ease,transform .2s ease}
|
|
|
|
|
|
|
|
.site-nav-link:hover{background:#f1f5f9;border-color:#dbe3ee;transform:translateY(-1px)}
|
|
|
|
|
|
|
|
.site-nav-cta{display:inline-flex;align-items:center;justify-content:center;padding:9px 14px;border-radius:999px;background:var(--site-primary);color:#0b0f16;text-decoration:none;font-weight:700;white-space:nowrap}
|
|
|
|
|
|
|
|
.menu-empty{font-size:12px;color:var(--site-muted)}
|
|
|
|
.menu-inline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
|
|
|
|
.menu-inline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
|
|
|
|
.menu-accordion{display:none;border:1px solid #e5e7eb;border-radius:12px;padding:8px 10px;background:var(--site-card);width:100%}
|
|
|
|
.menu-accordion{display:none;border:1px solid #e5e7eb;border-radius:var(--radius-md);padding:8px 10px;background:var(--site-card);width:100%}
|
|
|
|
.menu-accordion summary{list-style:none;cursor:pointer;font-weight:600}
|
|
|
|
.menu-accordion summary{list-style:none;cursor:pointer;font-weight:600}
|
|
|
|
.menu-accordion summary::-webkit-details-marker{display:none}
|
|
|
|
.menu-accordion summary::-webkit-details-marker{display:none}
|
|
|
|
.menu-links{display:flex;flex-direction:column;gap:8px;margin-top:8px}
|
|
|
|
.menu-links{display:flex;flex-direction:column;gap:8px;margin-top:8px}
|
|
|
|
.menu-accordion summary::after{content:"▾";float:right;color:var(--site-muted)}
|
|
|
|
.menu-accordion summary::after{content:"v";float:right;color:var(--site-muted)}
|
|
|
|
.float-whatsapp{position:fixed;right:22px;bottom:22px;width:52px;height:52px;border-radius:999px;background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px rgba(0,0,0,.22);z-index:999;text-decoration:none}
|
|
|
|
.float-whatsapp{position:fixed;right:22px;bottom:22px;width:52px;height:52px;border-radius:999px;background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px rgba(0,0,0,.22);z-index:999;text-decoration:none}
|
|
|
|
.float-whatsapp:hover{transform:translateY(-2px)}
|
|
|
|
.float-whatsapp:hover{transform:translateY(-2px)}
|
|
|
|
@media (max-width:980px){
|
|
|
|
@media (max-width:980px){
|
|
|
|
@@ -131,6 +147,10 @@
|
|
|
|
.preview-shell.size-tablet .menu-inline{display:none}
|
|
|
|
.preview-shell.size-tablet .menu-inline{display:none}
|
|
|
|
.preview-shell.size-phone .menu-accordion,
|
|
|
|
.preview-shell.size-phone .menu-accordion,
|
|
|
|
.preview-shell.size-tablet .menu-accordion{display:block}
|
|
|
|
.preview-shell.size-tablet .menu-accordion{display:block}
|
|
|
|
|
|
|
|
.preview-shell.size-phone .hero-layout,
|
|
|
|
|
|
|
|
.preview-shell.size-tablet .hero-layout{grid-template-columns:1fr}
|
|
|
|
|
|
|
|
.preview-shell.size-phone .hero-media,
|
|
|
|
|
|
|
|
.preview-shell.size-tablet .hero-media{min-height:220px}
|
|
|
|
@keyframes slowGradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
|
|
|
|
@keyframes slowGradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
|
|
|
|
.free-drag a{pointer-events:none}
|
|
|
|
.free-drag a{pointer-events:none}
|
|
|
|
.block-actions{position:absolute;top:8px;right:8px;display:flex;gap:6px}
|
|
|
|
.block-actions{position:absolute;top:8px;right:8px;display:flex;gap:6px}
|
|
|
|
@@ -158,8 +178,8 @@
|
|
|
|
details.acc{border:1px solid var(--border);border-radius:12px;padding:8px 10px;margin-bottom:10px;background:#0f172a}
|
|
|
|
details.acc{border:1px solid var(--border);border-radius:12px;padding:8px 10px;margin-bottom:10px;background:#0f172a}
|
|
|
|
details.acc summary{list-style:none;cursor:pointer;font-weight:600}
|
|
|
|
details.acc summary{list-style:none;cursor:pointer;font-weight:600}
|
|
|
|
details.acc summary::-webkit-details-marker{display:none}
|
|
|
|
details.acc summary::-webkit-details-marker{display:none}
|
|
|
|
details.acc summary:after{content:"▾";float:right;color:var(--muted)}
|
|
|
|
details.acc summary:after{content:"v";float:right;color:var(--muted)}
|
|
|
|
details.acc[open] summary:after{content:"▴"}
|
|
|
|
details.acc[open] summary:after{content:"^"}
|
|
|
|
.acc-body{margin-top:8px}
|
|
|
|
.acc-body{margin-top:8px}
|
|
|
|
.danger{background:transparent;border:1px solid #f87171;color:#f87171;padding:8px;border-radius:999px;width:100%;cursor:pointer}
|
|
|
|
.danger{background:transparent;border:1px solid #f87171;color:#f87171;padding:8px;border-radius:999px;width:100%;cursor:pointer}
|
|
|
|
@media (max-width:1100px){.app{grid-template-columns:220px 1fr}.inspector{display:none}}
|
|
|
|
@media (max-width:1100px){.app{grid-template-columns:220px 1fr}.inspector{display:none}}
|
|
|
|
@@ -199,7 +219,7 @@
|
|
|
|
<div class="block-item" draggable="true" data-type="button" data-multi="true">Boton</div>
|
|
|
|
<div class="block-item" draggable="true" data-type="button" data-multi="true">Boton</div>
|
|
|
|
<div class="block-item" draggable="true" data-type="video" data-multi="true">Video</div>
|
|
|
|
<div class="block-item" draggable="true" data-type="video" data-multi="true">Video</div>
|
|
|
|
<div class="block-item" draggable="true" data-type="social" data-multi="false">Redes</div>
|
|
|
|
<div class="block-item" draggable="true" data-type="social" data-multi="false">Redes</div>
|
|
|
|
<div class="block-item" draggable="true" data-type="review" data-multi="true">Reseña</div>
|
|
|
|
<div class="block-item" draggable="true" data-type="review" data-multi="true">Resena</div>
|
|
|
|
<div class="block-item" draggable="true" data-type="calendar" data-multi="false">Calendario</div>
|
|
|
|
<div class="block-item" draggable="true" data-type="calendar" data-multi="false">Calendario</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</aside>
|
|
|
|
</aside>
|
|
|
|
@@ -239,7 +259,6 @@
|
|
|
|
<div class="apple">
|
|
|
|
<div class="apple">
|
|
|
|
<div class="apple-bar">
|
|
|
|
<div class="apple-bar">
|
|
|
|
<span class="apple-dot red"></span><span class="apple-dot yellow"></span><span class="apple-dot green"></span>
|
|
|
|
<span class="apple-dot red"></span><span class="apple-dot yellow"></span><span class="apple-dot green"></span>
|
|
|
|
<span style="margin-left:6px">{{ slug }}</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="canvas" id="previewCanvas"></div>
|
|
|
|
<div class="canvas" id="previewCanvas"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@@ -427,6 +446,7 @@ const state = {
|
|
|
|
let resizeRaf = 0;
|
|
|
|
let resizeRaf = 0;
|
|
|
|
let pendingMove = null;
|
|
|
|
let pendingMove = null;
|
|
|
|
let pendingResize = null;
|
|
|
|
let pendingResize = null;
|
|
|
|
|
|
|
|
let previewStateBefore = null;
|
|
|
|
|
|
|
|
|
|
|
|
function makeId(){ return "block_" + Date.now() + "_" + Math.floor(Math.random()*1000); }
|
|
|
|
function makeId(){ return "block_" + Date.now() + "_" + Math.floor(Math.random()*1000); }
|
|
|
|
function getDefaultPos(){
|
|
|
|
function getDefaultPos(){
|
|
|
|
@@ -437,7 +457,7 @@ const state = {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
function defaultData(type){
|
|
|
|
function defaultData(type){
|
|
|
|
switch(type){
|
|
|
|
switch(type){
|
|
|
|
case "menu": return { title:"Menu", items:[] };
|
|
|
|
case "menu": return { title:"Menu", items:[], menu_mode:"both" };
|
|
|
|
case "hero": return { title:"Tu propuesta de valor", subtitle:"Explica en una frase por que elegirte.", button_text:"Contactar", button_url:"#contacto", image_url:"" };
|
|
|
|
case "hero": return { title:"Tu propuesta de valor", subtitle:"Explica en una frase por que elegirte.", button_text:"Contactar", button_url:"#contacto", image_url:"" };
|
|
|
|
case "text": return { text:"Describe tu negocio aqui." };
|
|
|
|
case "text": return { text:"Describe tu negocio aqui." };
|
|
|
|
case "image": return { url:"", alt:"", caption:"", fit:"cover", overlay_text:"" };
|
|
|
|
case "image": return { url:"", alt:"", caption:"", fit:"cover", overlay_text:"" };
|
|
|
|
@@ -449,8 +469,8 @@ const state = {
|
|
|
|
case "map": return { title:"Ubicacion", address:"" };
|
|
|
|
case "map": return { title:"Ubicacion", address:"" };
|
|
|
|
case "button": return { text:"Accion", url:"#", style:"primary", size:"md"};
|
|
|
|
case "button": return { text:"Accion", url:"#", style:"primary", size:"md"};
|
|
|
|
case "social": return { instagram:"", facebook:"", whatsapp:"", tiktok:"", youtube:"", icon_size:18, icon_color:"#0b0c10", show_text:true, icon_style:"pill" };
|
|
|
|
case "social": return { instagram:"", facebook:"", whatsapp:"", tiktok:"", youtube:"", icon_size:18, icon_color:"#0b0c10", show_text:true, icon_style:"pill" };
|
|
|
|
case "video": return { url:"" };
|
|
|
|
case "video": return { url:"", description:"" };
|
|
|
|
case "review": return { title:"Reseña destacada", name:"Cliente feliz", text:"Excelente servicio y resultados profesionales.", rating:5, style:"card" };
|
|
|
|
case "review": return { title:"Reseña destacada", name:"Cliente feliz", text:"Excelente servicio y resultados profesionales.", rating:5, style:"card" };
|
|
|
|
case "calendar": return { title:"Agenda una cita", note:"Disponible en plan premium. Proximamente.", embed_url:"" };
|
|
|
|
case "calendar": return { title:"Agenda una cita", note:"Disponible en plan premium. Proximamente.", embed_url:"" };
|
|
|
|
default: return {};
|
|
|
|
default: return {};
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@@ -647,23 +667,34 @@ const state = {
|
|
|
|
const title = (b.data && (b.data.title || b.data.text || b.type)) || b.type;
|
|
|
|
const title = (b.data && (b.data.title || b.data.text || b.type)) || b.type;
|
|
|
|
return { id: b.id, label: String(title).slice(0, 24), index: i+1 };
|
|
|
|
return { id: b.id, label: String(title).slice(0, 24), index: i+1 };
|
|
|
|
});
|
|
|
|
});
|
|
|
|
const links = items.map(it=>`<a href="#${it.id}" style="text-decoration:none;color:var(--site-text);font-size:13px">${escapeHtml(it.label)}</a>`).join('<span style="color:var(--site-muted)">•</span>');
|
|
|
|
const links = items.map(it=>`<a class="site-nav-link" href="#${it.id}">${escapeHtml(it.label)}</a>`).join("");
|
|
|
|
const logo = state.settings.logo_url ? `<img src="${escapeHtml(state.settings.logo_url)}" style="height:22px;border-radius:6px" />` : "";
|
|
|
|
const mobileLinks = items.map(it=>`<a class="site-nav-link" href="#${it.id}">${escapeHtml(it.label)}</a>`).join("");
|
|
|
|
return `<div style="display:flex;align-items:center;gap:10px;justify-content:space-between">
|
|
|
|
const logo = state.settings.logo_url ? `<img src="${escapeHtml(state.settings.logo_url)}" alt="Logo" />` : "";
|
|
|
|
<div style="display:flex;align-items:center;gap:8px;font-weight:700;letter-spacing:.5px">${logo}<span>${escapeHtml(state.settings.site_name||"GKACHELE")}</span></div>
|
|
|
|
const mode = (block.data?.menu_mode || "both").toLowerCase();
|
|
|
|
<div class="menu-inline">${links || '<span style="color:var(--site-muted);font-size:12px">Sin secciones</span>'}</div>
|
|
|
|
const showInline = mode === "both" || mode === "inline";
|
|
|
|
<details class="menu-accordion">
|
|
|
|
const showAccordion = mode === "both" || mode === "accordion";
|
|
|
|
|
|
|
|
return `<div class="site-nav">
|
|
|
|
|
|
|
|
<div class="site-brand">${logo}<span>${escapeHtml(state.settings.site_name||"GKACHELE")}</span></div>
|
|
|
|
|
|
|
|
<div class="menu-inline site-nav-links" style="${showInline ? "" : "display:none"}">${links}</div>
|
|
|
|
|
|
|
|
<details class="menu-accordion" style="${showAccordion ? "" : "display:none"}">
|
|
|
|
<summary>Menu</summary>
|
|
|
|
<summary>Menu</summary>
|
|
|
|
<div class="menu-links">${links || '<span style="color:var(--site-muted);font-size:12px">Sin secciones</span>'}</div>
|
|
|
|
<div class="menu-links">${mobileLinks}</div>
|
|
|
|
</details>
|
|
|
|
</details>
|
|
|
|
</div>`;
|
|
|
|
</div>`;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (block.type==="hero"){
|
|
|
|
if (block.type==="hero"){
|
|
|
|
return `<div class="hero-pro">
|
|
|
|
const image = block.data.image_url ? `<img src="${escapeHtml(block.data.image_url)}" alt="Hero image">` : `<div class="hero-media-empty">Agrega imagen en "Imagen URL" para completar el hero.</div>`;
|
|
|
|
<div class="hero-kicker">${escapeHtml(state.settings.site_name||"GKACHELE")}</div>
|
|
|
|
return `<div class="hero-pro hero-layout">
|
|
|
|
${editable("h2","title",block.data.title,"Titulo",false,"")}
|
|
|
|
<div class="hero-copy">
|
|
|
|
${editable("p","subtitle",block.data.subtitle,"Subtitulo",true,"")}
|
|
|
|
<div class="hero-kicker">${escapeHtml(state.settings.site_name||"GKACHELE")}</div>
|
|
|
|
<a href="${escapeHtml(block.data.button_url||"#")}" class="editable hero-cta" data-field="button_text" data-placeholder="Boton" contenteditable="true">${escapeHtml(block.data.button_text)}</a>
|
|
|
|
${editable("h2","title",block.data.title,"Titulo",false,"")}
|
|
|
|
|
|
|
|
${editable("p","subtitle",block.data.subtitle,"Subtitulo",true,"")}
|
|
|
|
|
|
|
|
<div class="hero-actions">
|
|
|
|
|
|
|
|
<a href="${escapeHtml(block.data.button_url||"#")}" class="editable hero-cta" data-field="button_text" data-placeholder="Boton" contenteditable="true">${escapeHtml(block.data.button_text)}</a>
|
|
|
|
|
|
|
|
<a href="#servicios" class="hero-cta-secondary">Ver servicios</a>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="hero-media">${image}</div>
|
|
|
|
</div>`;
|
|
|
|
</div>`;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (block.type==="text"){ return editable("p","text",block.data.text,"Escribe aqui...",true,"margin:0;color:var(--site-text)"); }
|
|
|
|
if (block.type==="text"){ return editable("p","text",block.data.text,"Escribe aqui...",true,"margin:0;color:var(--site-text)"); }
|
|
|
|
@@ -738,7 +769,7 @@ const state = {
|
|
|
|
<div class="contact-form">
|
|
|
|
<div class="contact-form">
|
|
|
|
<input placeholder="Nombre completo">
|
|
|
|
<input placeholder="Nombre completo">
|
|
|
|
<input placeholder="Email de contacto">
|
|
|
|
<input placeholder="Email de contacto">
|
|
|
|
<textarea placeholder="Cuéntanos brevemente en qué te ayudamos"></textarea>
|
|
|
|
<textarea placeholder="Cuéntanos brevemente en qué te ayudamos"></textarea>
|
|
|
|
<button class="contact-send"><i class="fa-solid fa-paper-plane"></i>Enviar consulta</button>
|
|
|
|
<button class="contact-send"><i class="fa-solid fa-paper-plane"></i>Enviar consulta</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@@ -790,11 +821,12 @@ const state = {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (block.type==="video"){
|
|
|
|
if (block.type==="video"){
|
|
|
|
const embed = normalizeVideoUrl(block.data.url);
|
|
|
|
const embed = normalizeVideoUrl(block.data.url);
|
|
|
|
|
|
|
|
const desc = block.data.description ? `<div style="margin-top:8px;color:var(--site-muted);font-size:12px">${escapeHtml(block.data.description)}</div>` : "";
|
|
|
|
if (embed){
|
|
|
|
if (embed){
|
|
|
|
if (embed.startsWith("data:video/")){
|
|
|
|
if (embed.startsWith("data:video/")){
|
|
|
|
return `<video src="${escapeHtml(embed)}" style="width:100%;border-radius:12px" controls></video>`;
|
|
|
|
return `<video src="${escapeHtml(embed)}" style="width:100%;border-radius:12px" controls></video>${desc}`;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return `<div style="position:relative;padding-top:56.25%;border-radius:12px;overflow:hidden"><iframe src="${escapeHtml(embed)}" style="position:absolute;inset:0;width:100%;height:100%;border:0" allowfullscreen></iframe></div>`;
|
|
|
|
return `<div style="position:relative;padding-top:56.25%;border-radius:12px;overflow:hidden"><iframe src="${escapeHtml(embed)}" style="position:absolute;inset:0;width:100%;height:100%;border:0" allowfullscreen></iframe></div>${desc}`;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return `<div class="inline-drop" data-inline-video="true">Suelta video o click</div>`;
|
|
|
|
return `<div class="inline-drop" data-inline-video="true">Suelta video o click</div>`;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@@ -915,7 +947,7 @@ const state = {
|
|
|
|
el.style.transform = `translate3d(${pos.x}px, ${pos.y}px, 0)`;
|
|
|
|
el.style.transform = `translate3d(${pos.x}px, ${pos.y}px, 0)`;
|
|
|
|
const defaultWidth = block.type === "menu" ? 90 : (state.settings.two_col ? 48 : 70);
|
|
|
|
const defaultWidth = block.type === "menu" ? 90 : (state.settings.two_col ? 48 : 70);
|
|
|
|
const w = Math.max(30, Math.min(100, Number(block.data?.width || defaultWidth)));
|
|
|
|
const w = Math.max(30, Math.min(100, Number(block.data?.width || defaultWidth)));
|
|
|
|
el.style.width = `calc(${w}% - 8px)`;
|
|
|
|
el.style.width = `${w}%`;
|
|
|
|
const h = Number(block.data?.height || 0);
|
|
|
|
const h = Number(block.data?.height || 0);
|
|
|
|
if (h > 60){ el.style.height = h + "px"; }
|
|
|
|
if (h > 60){ el.style.height = h + "px"; }
|
|
|
|
el.style.cursor = "grab";
|
|
|
|
el.style.cursor = "grab";
|
|
|
|
@@ -989,12 +1021,13 @@ const state = {
|
|
|
|
});
|
|
|
|
});
|
|
|
|
if (state.settings.free_drag){
|
|
|
|
if (state.settings.free_drag){
|
|
|
|
let maxBottom = 700;
|
|
|
|
let maxBottom = 700;
|
|
|
|
state.blocks.forEach((b)=>{
|
|
|
|
inner.querySelectorAll(".block").forEach((node)=>{
|
|
|
|
const h = Number(b.data?.height || 220);
|
|
|
|
const n = node;
|
|
|
|
const y = Number(b.pos?.y || 0);
|
|
|
|
maxBottom = Math.max(maxBottom, n.offsetTop + n.offsetHeight + 120);
|
|
|
|
maxBottom = Math.max(maxBottom, y + h + 120);
|
|
|
|
|
|
|
|
});
|
|
|
|
});
|
|
|
|
canvas.style.minHeight = maxBottom + "px";
|
|
|
|
canvas.style.minHeight = maxBottom + "px";
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
canvas.style.minHeight = "700px";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
const scrollBtn = document.createElement("button");
|
|
|
|
const scrollBtn = document.createElement("button");
|
|
|
|
scrollBtn.className = "scroll-btn";
|
|
|
|
scrollBtn.className = "scroll-btn";
|
|
|
|
@@ -1053,8 +1086,12 @@ const state = {
|
|
|
|
let html = `<div style="font-weight:600;margin-bottom:6px;text-transform:capitalize">${block.type}</div>`;
|
|
|
|
let html = `<div style="font-weight:600;margin-bottom:6px;text-transform:capitalize">${block.type}</div>`;
|
|
|
|
const data=block.data||{};
|
|
|
|
const data=block.data||{};
|
|
|
|
const input=(label,id,val)=>`<div class="row"><label>${label}</label><input id="${id}" type="text" value="${escapeHtml(val||"")}"></div>`;
|
|
|
|
const input=(label,id,val)=>`<div class="row"><label>${label}</label><input id="${id}" type="text" value="${escapeHtml(val||"")}"></div>`;
|
|
|
|
|
|
|
|
const widthVal = Math.max(30, Math.min(100, Number(data.width || 100)));
|
|
|
|
|
|
|
|
html += `<div class="row"><label>Ancho bloque (%)</label><input id="blockWidth" type="range" min="30" max="100" value="${widthVal}"><div id="blockWidthValue" style="margin-top:4px;color:var(--muted);font-size:12px">${widthVal}%</div></div>`;
|
|
|
|
if (block.type==="menu"){
|
|
|
|
if (block.type==="menu"){
|
|
|
|
html+=input("Titulo","menuTitle",data.title);
|
|
|
|
html+=input("Titulo","menuTitle",data.title);
|
|
|
|
|
|
|
|
const mm = escapeHtml(data.menu_mode || "both");
|
|
|
|
|
|
|
|
html+=`<div class="row"><label>Modo menu</label><select id="menuMode"><option value="both" ${mm==="both"?"selected":""}>Ambos</option><option value="inline" ${mm==="inline"?"selected":""}>Horizontal</option><option value="accordion" ${mm==="accordion"?"selected":""}>Acordeon</option></select></div>`;
|
|
|
|
} else if (block.type==="hero"){
|
|
|
|
} else if (block.type==="hero"){
|
|
|
|
html+=input("Titulo","heroTitle",data.title);
|
|
|
|
html+=input("Titulo","heroTitle",data.title);
|
|
|
|
html+=input("Subtitulo","heroSubtitle",data.subtitle);
|
|
|
|
html+=input("Subtitulo","heroSubtitle",data.subtitle);
|
|
|
|
@@ -1113,6 +1150,7 @@ const state = {
|
|
|
|
html+=`<div class="row"><label>Mostrar texto</label><input id="socialShowText" type="checkbox" ${data.show_text !== false ? "checked" : ""}></div>`;
|
|
|
|
html+=`<div class="row"><label>Mostrar texto</label><input id="socialShowText" type="checkbox" ${data.show_text !== false ? "checked" : ""}></div>`;
|
|
|
|
} else if (block.type==="video"){
|
|
|
|
} else if (block.type==="video"){
|
|
|
|
html+=input("URL video","videoUrl",data.url);
|
|
|
|
html+=input("URL video","videoUrl",data.url);
|
|
|
|
|
|
|
|
html+=input("Descripcion","videoDesc",data.description);
|
|
|
|
html+=`<div class="row"><label>Video (arrastrar)</label><div class="dropzone" id="videoDrop">${data.url ? "Video cargado" : "Suelta video o click"}</div><input id="videoFile" type="file" accept="video/*" hidden></div>`;
|
|
|
|
html+=`<div class="row"><label>Video (arrastrar)</label><div class="dropzone" id="videoDrop">${data.url ? "Video cargado" : "Suelta video o click"}</div><input id="videoFile" type="file" accept="video/*" hidden></div>`;
|
|
|
|
} else if (block.type==="map"){
|
|
|
|
} else if (block.type==="map"){
|
|
|
|
html+=input("Titulo","mapTitle",data.title);
|
|
|
|
html+=input("Titulo","mapTitle",data.title);
|
|
|
|
@@ -1159,11 +1197,26 @@ const state = {
|
|
|
|
el.addEventListener("input",()=>applyInspector(block));
|
|
|
|
el.addEventListener("input",()=>applyInspector(block));
|
|
|
|
el.addEventListener("change",()=>applyInspector(block));
|
|
|
|
el.addEventListener("change",()=>applyInspector(block));
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
const widthEl = document.getElementById("blockWidth");
|
|
|
|
|
|
|
|
const widthValueEl = document.getElementById("blockWidthValue");
|
|
|
|
|
|
|
|
if (widthEl && widthValueEl){
|
|
|
|
|
|
|
|
const updateWidthLabel = ()=>{ widthValueEl.textContent = `${widthEl.value}%`; };
|
|
|
|
|
|
|
|
widthEl.addEventListener("input", updateWidthLabel);
|
|
|
|
|
|
|
|
updateWidthLabel();
|
|
|
|
|
|
|
|
}
|
|
|
|
document.getElementById("deleteBlockBtn").addEventListener("click",()=>{ state.blocks=state.blocks.filter(b=>b.id!==block.id); selectedBlockId=null; renderInspector(); renderPreview(); });
|
|
|
|
document.getElementById("deleteBlockBtn").addEventListener("click",()=>{ state.blocks=state.blocks.filter(b=>b.id!==block.id); selectedBlockId=null; renderInspector(); renderPreview(); });
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function applyInspector(block){
|
|
|
|
function applyInspector(block){
|
|
|
|
if (block.type==="menu"){ block.data.title=document.getElementById("menuTitle").value; }
|
|
|
|
const widthEl = document.getElementById("blockWidth");
|
|
|
|
|
|
|
|
if (widthEl){
|
|
|
|
|
|
|
|
block.data.width = Math.max(30, Math.min(100, Number(widthEl.value || 100)));
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
if (block.type==="menu"){
|
|
|
|
|
|
|
|
block.data.title=document.getElementById("menuTitle").value;
|
|
|
|
|
|
|
|
const mm = document.getElementById("menuMode");
|
|
|
|
|
|
|
|
if (mm){ block.data.menu_mode = mm.value || "both"; }
|
|
|
|
|
|
|
|
}
|
|
|
|
else if (block.type==="hero"){
|
|
|
|
else if (block.type==="hero"){
|
|
|
|
block.data.title=document.getElementById("heroTitle").value;
|
|
|
|
block.data.title=document.getElementById("heroTitle").value;
|
|
|
|
block.data.subtitle=document.getElementById("heroSubtitle").value;
|
|
|
|
block.data.subtitle=document.getElementById("heroSubtitle").value;
|
|
|
|
@@ -1212,7 +1265,11 @@ const state = {
|
|
|
|
const showEl = document.getElementById("socialShowText");
|
|
|
|
const showEl = document.getElementById("socialShowText");
|
|
|
|
if (showEl){ block.data.show_text = !!showEl.checked; }
|
|
|
|
if (showEl){ block.data.show_text = !!showEl.checked; }
|
|
|
|
}
|
|
|
|
}
|
|
|
|
else if (block.type==="video"){ block.data.url=document.getElementById("videoUrl").value; }
|
|
|
|
else if (block.type==="video"){
|
|
|
|
|
|
|
|
block.data.url=document.getElementById("videoUrl").value;
|
|
|
|
|
|
|
|
const vd = document.getElementById("videoDesc");
|
|
|
|
|
|
|
|
if (vd){ block.data.description = vd.value; }
|
|
|
|
|
|
|
|
}
|
|
|
|
else if (block.type==="map"){
|
|
|
|
else if (block.type==="map"){
|
|
|
|
block.data.title=document.getElementById("mapTitle").value;
|
|
|
|
block.data.title=document.getElementById("mapTitle").value;
|
|
|
|
block.data.address=document.getElementById("mapAddress").value;
|
|
|
|
block.data.address=document.getElementById("mapAddress").value;
|
|
|
|
@@ -1549,7 +1606,7 @@ const state = {
|
|
|
|
};
|
|
|
|
};
|
|
|
|
document.getElementById("btnSizePhone").addEventListener("click",()=>setSize("520px","btnSizePhone"));
|
|
|
|
document.getElementById("btnSizePhone").addEventListener("click",()=>setSize("520px","btnSizePhone"));
|
|
|
|
document.getElementById("btnSizeTablet").addEventListener("click",()=>setSize("820px","btnSizeTablet"));
|
|
|
|
document.getElementById("btnSizeTablet").addEventListener("click",()=>setSize("820px","btnSizeTablet"));
|
|
|
|
document.getElementById("btnSizeDesktop").addEventListener("click",()=>setSize("1200px","btnSizeDesktop"));
|
|
|
|
document.getElementById("btnSizeDesktop").addEventListener("click",()=>setSize("100%","btnSizeDesktop"));
|
|
|
|
setShellClass("size-desktop");
|
|
|
|
setShellClass("size-desktop");
|
|
|
|
}
|
|
|
|
}
|
|
|
|
function wireThemeToggle(){
|
|
|
|
function wireThemeToggle(){
|
|
|
|
@@ -1612,34 +1669,56 @@ const state = {
|
|
|
|
if (BUILDER_MODE === "ub24"){
|
|
|
|
if (BUILDER_MODE === "ub24"){
|
|
|
|
state.settings.free_drag = false;
|
|
|
|
state.settings.free_drag = false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (!state.blocks.length){ state.blocks=[ {id:makeId(),type:"hero",data:defaultData("hero")},{id:makeId(),type:"features",data:defaultData("features")},{id:makeId(),type:"gallery",data:defaultData("gallery")},{id:makeId(),type:"contact",data:defaultData("contact")} ]; }
|
|
|
|
state.blocks = [];
|
|
|
|
|
|
|
|
selectedBlockId = null;
|
|
|
|
wireSidebar(); wirePreviewDrop(); wireInlineEditing(); wireSettings(); wireFreeDragToggle(); wireJumpSelect(); wirePreviewSize(); wireThemeToggle();
|
|
|
|
wireSidebar(); wirePreviewDrop(); wireInlineEditing(); wireSettings(); wireFreeDragToggle(); wireJumpSelect(); wirePreviewSize(); wireThemeToggle();
|
|
|
|
const backBtn = document.getElementById("btnBack");
|
|
|
|
const backBtn = document.getElementById("btnBack");
|
|
|
|
if (backBtn){ backBtn.addEventListener("click",()=>{ window.history.back(); }); }
|
|
|
|
if (backBtn){ backBtn.addEventListener("click",()=>{ window.history.back(); }); }
|
|
|
|
const previewBtn = document.getElementById("btnPreview");
|
|
|
|
const previewBtn = document.getElementById("btnPreview");
|
|
|
|
if (previewBtn){
|
|
|
|
if (previewBtn){
|
|
|
|
previewBtn.addEventListener("click",()=>{
|
|
|
|
previewBtn.addEventListener("click",()=>{
|
|
|
|
if (BUILDER_MODE === "ub24"){
|
|
|
|
document.body.classList.toggle("preview-mode");
|
|
|
|
document.body.classList.toggle("preview-mode");
|
|
|
|
const isPreview = document.body.classList.contains("preview-mode");
|
|
|
|
const app = document.querySelector(".app");
|
|
|
|
const sidebar = document.querySelector(".sidebar");
|
|
|
|
const isPreview = document.body.classList.contains("preview-mode");
|
|
|
|
const inspector = document.querySelector(".inspector");
|
|
|
|
if (app) app.style.display = isPreview ? "none" : "grid";
|
|
|
|
const main = document.querySelector(".main");
|
|
|
|
const shell = document.querySelector(".preview-shell");
|
|
|
|
const shell = document.querySelector(".preview-shell");
|
|
|
|
if (shell){
|
|
|
|
const activeSizeBtn = document.querySelector("#btnSizePhone.active, #btnSizeTablet.active, #btnSizeDesktop.active");
|
|
|
|
if (isPreview){
|
|
|
|
const activeSizeId = activeSizeBtn ? activeSizeBtn.id : "btnSizeDesktop";
|
|
|
|
shell.style.maxWidth = "1200px";
|
|
|
|
if (isPreview && shell){
|
|
|
|
shell.style.margin = "40px auto";
|
|
|
|
previewStateBefore = {
|
|
|
|
shell.style.display = "block";
|
|
|
|
maxWidth: shell.style.maxWidth || "",
|
|
|
|
document.body.appendChild(shell);
|
|
|
|
margin: shell.style.margin || "",
|
|
|
|
} else {
|
|
|
|
activeSizeId
|
|
|
|
const main = document.querySelector(".main");
|
|
|
|
};
|
|
|
|
if (main) main.appendChild(shell);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
return;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (!SITE_SLUG){ alert("No hay slug"); return; }
|
|
|
|
if (sidebar) sidebar.style.display = isPreview ? "none" : "";
|
|
|
|
window.open("/" + SITE_SLUG, "_blank");
|
|
|
|
if (inspector) inspector.style.display = isPreview ? "none" : "";
|
|
|
|
|
|
|
|
if (main) main.style.padding = isPreview ? "8px" : "";
|
|
|
|
|
|
|
|
if (shell){
|
|
|
|
|
|
|
|
if (isPreview){
|
|
|
|
|
|
|
|
shell.style.maxWidth = "100%";
|
|
|
|
|
|
|
|
shell.style.margin = "8px auto";
|
|
|
|
|
|
|
|
shell.classList.remove("size-phone","size-tablet","size-desktop");
|
|
|
|
|
|
|
|
shell.classList.add("size-desktop");
|
|
|
|
|
|
|
|
["btnSizePhone","btnSizeTablet","btnSizeDesktop"].forEach(id=>{
|
|
|
|
|
|
|
|
const b=document.getElementById(id);
|
|
|
|
|
|
|
|
if (b) b.classList.toggle("active", id==="btnSizeDesktop");
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
} else if (previewStateBefore){
|
|
|
|
|
|
|
|
shell.style.maxWidth = previewStateBefore.maxWidth;
|
|
|
|
|
|
|
|
shell.style.margin = previewStateBefore.margin;
|
|
|
|
|
|
|
|
shell.classList.remove("size-phone","size-tablet","size-desktop");
|
|
|
|
|
|
|
|
const map = { btnSizePhone: "size-phone", btnSizeTablet: "size-tablet", btnSizeDesktop: "size-desktop" };
|
|
|
|
|
|
|
|
shell.classList.add(map[previewStateBefore.activeSizeId] || "size-desktop");
|
|
|
|
|
|
|
|
["btnSizePhone","btnSizeTablet","btnSizeDesktop"].forEach(id=>{
|
|
|
|
|
|
|
|
const b=document.getElementById(id);
|
|
|
|
|
|
|
|
if (b) b.classList.toggle("active", id===previewStateBefore.activeSizeId);
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
window.scrollTo({ top: 0, behavior: "smooth" });
|
|
|
|
|
|
|
|
return;
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
const pageSelect = document.getElementById("pageSelect");
|
|
|
|
const pageSelect = document.getElementById("pageSelect");
|
|
|
|
|
