admin/gkachele-saas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Extreme Redesign V4.2: Studio Restoration with Grid/colSpan support
Some checks failed
Deploy GKACHELE App / deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
komkida91
2026-02-02 21:29:20 +01:00
parent 301d4b06a5
commit 9af3c828ce
4 changed files with 2446 additions and 1472 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
demo/themes/restaurante-moderno/template.html
View File

@@ -141,14 +141,33 @@
display: flex;
align-items: center;
justify-content: center;
{
% if premium_bg and premium_bg.type=='image' %
}
background: linear-gradient(rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0.6)),
url('https://images.unsplash.com/photo-1514362545857-3bc16c4c7d1b?auto=format&fit=crop&w=1920&q=80');
url('{{ premium_bg.url }}');
{
% else %
}
background: linear-gradient(rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0.6)),
url('https://images.unsplash.com/photo-1514362545857-3bc16c4c7d1b?auto=format&fit=crop&w=1920&q=80');
{
% endif %
}
background-size: cover;
background-position: center;
color: var(--white);
text-align: center;
border-radius: 0 0 40px 40px;
margin: 0 10px;
position: relative;
overflow: hidden;
}
.hero h1 {
@@ -387,11 +406,42 @@
font-size: 42px;
}
.contacto-content {
grid-template-columns: 1fr;
gap: 40px;
.dynamic-blocks-wrapper {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 20px;
padding: 40px;
max-width: 1200px;
margin: 0 auto;
}
.gk-block {
background: white;
border-radius: 20px;
padding: 40px;
box-shadow: var(--shadow-md);
transition: var(--transition);
}
.gk-block:hover {
box-shadow: var(--shadow-lg);
}
@media (max-width: 1024px) {
.dynamic-blocks-wrapper {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 640px) {
.dynamic-blocks-wrapper {
grid-template-columns: 1fr !important;
}
.gk-block {
grid-column: span 1 !important;
}
}
}
</style>
<script>
@@ -441,7 +491,28 @@
const emailEl = document.querySelector('[data-editable="email"]');
if (emailEl && content.email) emailEl.textContent = content.email;
// MAP REGENERATION (Fixed variable scope)
// Premium Background
const hero = document.getElementById('inicio');
if (hero) {
if (content.premium_bg && content.premium_bg.type === 'image') {
hero.style.backgroundImage = `linear-gradient(rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0.6)), url('${content.premium_bg.url}')`;
const vid = document.getElementById('premium-video'); if (vid) vid.remove();
} else if (content.premium_bg && content.premium_bg.type === 'video') {
hero.style.backgroundImage = 'none';
let vid = document.getElementById('premium-video');
if (!vid) {
vid = document.createElement('video'); vid.id = 'premium-video'; vid.autoplay = true; vid.muted = true; vid.loop = true;
vid.style = "position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; opacity:0.6;";
hero.prepend(vid);
}
if (vid.src !== content.premium_bg.url) vid.src = content.premium_bg.url;
} else {
hero.style.backgroundImage = ''; // Fallback
const vid = document.getElementById('premium-video'); if (vid) vid.remove();
}
}
// MAP REGENERATION
const mapWrapper = document.getElementById('map-wrapper');
if (mapWrapper && content.direccion) {
const cleanAddress = content.direccion.trim().replace(/\s+/g, ' ');
@@ -531,6 +602,12 @@
<!-- Hero -->
<section id="inicio" class="section hero">
{% if premium_bg and premium_bg.type == 'video' %}
<video autoplay muted loop id="premium-video"
style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; opacity:0.6;">
<source src="{{ premium_bg.url }}" type="video/mp4">
</video>
{% endif %}
<div class="container">
<h1 data-editable="hero_title" data-type="text" class="gk-editable">{{ hero_title or 'Sabores que Enamoran'
}}</h1>
@@ -613,19 +690,31 @@
</div>
</section>
<!-- Blocks -->
<!-- Dynamic Blocks Grid (SaaS Core) -->
<div class="dynamic-blocks-wrapper">
{% if blocks %}
{% for block in blocks|sort(attribute='order') %}
<section class="gk-block" data-block-id="{{ block.id }}">
<div class="container">
<section class="gk-block" data-block-id="{{ block.id }}" style="grid-column: span {{ block.colSpan or 1 }};">
<div>
{% if block.type == 'texto' %}
<h2 class="gk-editable" data-editable="blocks.{{ block.id }}.content.titulo">{{ block.content.titulo or
'Título' }}</h2>
<p class="gk-editable" data-editable="blocks.{{ block.id }}.content.contenido">{{
block.content.contenido or 'Texto...' }}</p>
<h2 class="gk-editable" data-editable="blocks.{{ block.id }}.content.titulo"
style="font-size: 24px; margin-bottom: 15px;">{{ block.content.titulo or 'Título' }}</h2>
<div class="gk-editable" data-editable="blocks.{{ block.id }}.content.contenido"
style="line-height: 1.6;">
{{ block.content.contenido|safe if block.content.contenido else 'Texto...' }}
</div>
{% elif block.type == 'imagen' %}
<img src="{{ block.content.url }}" style="width: 100%; border-radius: 20px;">
<img src="{{ block.content.url }}" style="width: 100%; border-radius: 12px; object-fit: cover;">
{% elif block.type == 'video' %}
<div style="aspect-ratio: 16/9; overflow: hidden; border-radius: 12px;">
<iframe src="{{ block.content.url }}" width="100%" height="100%" frameborder="0"
allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
{% elif block.type == 'mapa' %}
<div style="height: 300px; border-radius: 12px; overflow: hidden; background: #eee;">
<iframe src="{{ block.content.url }}" width="100%" height="100%" style="border:0;"
allowfullscreen="" loading="lazy"></iframe>
</div>
{% endif %}
</div>
</section>