diff --git a/elementor/templates/elementor_builder.html b/elementor/templates/elementor_builder.html index b4e9b31..f97253a 100644 --- a/elementor/templates/elementor_builder.html +++ b/elementor/templates/elementor_builder.html @@ -56,6 +56,14 @@ body.dragging{user-select:none} .block:hover{transform:translateY(-2px);box-shadow:0 20px 46px rgba(15,23,42,.14)} .block.selected{border-color:#7aa7ff} + .block.anim-in-none{animation:none} + .block.anim-in-slide{animation:slideIn .28s ease} + .block.anim-in-zoom{animation:zoomIn .26s ease} + .block.hover-none:hover{transform:none;box-shadow:var(--site-block-shadow,0 12px 30px rgba(15,23,42,.08))} + .block.hover-glow:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(37,99,235,.24),0 0 0 1px rgba(37,99,235,.28)} + .block.hover-tilt:hover{transform:translateY(-2px) rotate(-.3deg)} + .block.has-bg-media{background-size:cover;background-position:center;background-repeat:no-repeat} + .block.has-bg-media .editable,.block.has-bg-media h1,.block.has-bg-media h2,.block.has-bg-media h3,.block.has-bg-media p,.block.has-bg-media li,.block.has-bg-media a,.block.has-bg-media label,.block.has-bg-media strong,.block.has-bg-media span{position:relative;z-index:1} .empty{padding:32px;border:1px dashed #cbd5e1;border-radius:12px;text-align:center;color:#64748b;background:#fff} .drop{height:8px;border-radius:6px;background:rgba(122,167,255,.4);margin:6px 0} .drag-handle{cursor:grab;touch-action:none} @@ -67,6 +75,8 @@ } .preview-mode .block-drag-handle{display:none !important} @keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} + @keyframes slideIn{from{opacity:0;transform:translateY(10px) translateX(-8px)}to{opacity:1;transform:translateY(0) translateX(0)}} + @keyframes zoomIn{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}} label{font-size:12px;color:var(--muted)} input,textarea,select{width:100%;background:#0f172a;border:1px solid #1f2937;color:var(--text);padding:8px;border-radius:10px;font-family:inherit} input[type="color"]{height:36px;padding:4px;background:#0f172a;border-radius:10px} @@ -86,6 +96,14 @@ .social-style-minimal .social-btn i{background:transparent} .social-style-solid .social-btn{background:var(--site-primary);border-color:var(--site-primary);color:#0b0f16} .social-style-solid .social-btn i{color:#0b0f16 !important} + .social-surface-pro{position:relative;overflow:hidden} + .social-surface-pro::before{content:"";position:absolute;inset:-30% -10% auto auto;width:340px;height:340px;background:radial-gradient(circle,rgba(37,99,235,.16),transparent 62%);pointer-events:none} + .social-grid-pro{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px} + .social-card-pro{display:flex;align-items:center;gap:12px;min-height:84px;padding:16px;border-radius:16px;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease} + .social-card-pro:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(15,23,42,.2)} + .social-card-meta{display:flex;flex-direction:column;min-width:0} + .social-card-title{font-size:17px;line-height:1.1;font-weight:750} + .social-card-value{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .inline-drop{background:#e2e8f0;border:1px dashed #cbd5e1;border-radius:12px;padding:18px;text-align:center;color:#64748b;cursor:pointer} .image-wrap{position:relative;border-radius:12px;overflow:hidden} .image-overlay{position:absolute;left:12px;right:12px;bottom:12px;padding:8px 10px;border-radius:10px;background:rgba(15,23,42,.55);backdrop-filter:blur(8px);color:#fff;font-size:13px;line-height:1.3} @@ -657,6 +675,16 @@ const state = { if (type === "menu") return 100; return Math.max(30, Math.min(100, Number(raw || 100))); } + function hexToRgba(hex, alpha){ + const raw = String(hex || "#0f172a").replace("#", "").trim(); + const full = raw.length === 3 ? raw.split("").map((c)=>c+c).join("") : raw; + const num = parseInt(full || "0f172a", 16); + const r = (num >> 16) & 255; + const g = (num >> 8) & 255; + const b = num & 255; + const a = Math.max(0, Math.min(1, Number(alpha || 0))); + return `rgba(${r},${g},${b},${a})`; + } function getDefaultPos(){ const base = 20; const gap = 120; @@ -1259,9 +1287,32 @@ const state = { threads:"fa-brands fa-threads" }; const size = Math.max(14, Math.min(36, Number(block.data?.icon_size || 18))); - const iconColor = block.data?.icon_color || "var(--site-text)"; + const iconColor = block.data?.icon_color || "#0f172a"; const showText = block.data?.show_text !== false; const style = (block.data?.icon_style || "pill").toLowerCase(); + const preset = String(block.data?.social_preset || "pro").toLowerCase(); + const presets = { + pro: { surfaceBg: "#ffffff", surfaceBorder: "#e5e7eb", title: "#0f172a", subtitle: "#475569", cardBg: "#f8fafc", cardBorder: "#dbe3ee", label: "#0f172a", value: "#64748b", shadow: "0 18px 34px rgba(15,23,42,.12)" }, + dark: { surfaceBg: "#0f172a", surfaceBorder: "#1e293b", title: "#f8fafc", subtitle: "#94a3b8", cardBg: "#111827", cardBorder: "#334155", label: "#e2e8f0", value: "#94a3b8", shadow: "0 18px 34px rgba(2,6,23,.45)" }, + glass: { surfaceBg: "rgba(255,255,255,.70)", surfaceBorder: "rgba(255,255,255,.55)", title: "#0f172a", subtitle: "#475569", cardBg: "rgba(255,255,255,.55)", cardBorder: "rgba(148,163,184,.5)", label: "#0f172a", value: "#475569", shadow: "0 22px 42px rgba(15,23,42,.14)" } + }; + const tone = presets[preset] || presets.pro; + const useBrandColors = block.data?.social_use_brand_colors !== false; + const surfaceBg = block.data?.social_surface_bg || tone.surfaceBg; + const surfaceBorder = block.data?.social_surface_border || tone.surfaceBorder; + const titleColor = block.data?.social_title_color || tone.title; + const subtitleColor = block.data?.social_subtitle_color || tone.subtitle; + const cardBg = block.data?.social_card_bg || tone.cardBg; + const cardBorder = block.data?.social_card_border || tone.cardBorder; + const labelColor = block.data?.social_label_color || tone.label; + const valueColor = block.data?.social_value_color || tone.value; + const brandStyles = { + whatsapp: { icon: "#25D366", bg: "#ecfdf3", border: "#bbf7d0" }, + instagram: { icon: "#E1306C", bg: "#fff1f7", border: "#fecdd3" }, + facebook: { icon: "#1877F2", bg: "#eff6ff", border: "#bfdbfe" }, + tiktok: { icon: "#111111", bg: "#f8fafc", border: "#e2e8f0" }, + youtube: { icon: "#FF0000", bg: "#fff1f2", border: "#fecdd3" } + }; const mainKeys = ["whatsapp","instagram","facebook","tiktok","youtube"]; const items = mainKeys.map(k=>[k, (block.data||{})[k]]).filter(([,v])=>v); const linkFor = (k,v)=>{ @@ -1272,7 +1323,29 @@ const state = { } return normalizeLink(v); }; - return `