fanfuso/ayr2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

extraccion de menu y footer

Browse Source
This commit is contained in:
fanfuso
2026-09-12 21:03:44 -03:00
parent 0c11ccf2c4
commit 62467348f4
6 changed files with 169 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
include/footer.html
View File
include/header.html
View File
index.html
+5 -106
View File
@@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Amor & Roma — Estudio Creativo</title>
<link rel="stylesheet" href="styles/main.css">
<link rel="preload" href="partials/menu.html" as="fetch" crossorigin>
<link rel="preload" href="partials/footer.html" as="fetch" crossorigin>
</head>
<body>
<!-- ===== CANVAS PARA EFECTO DE HUMO ===== -->
@@ -14,73 +16,7 @@
<div class="overlay" id="overlay" onclick="toggleMenu()"></div>
<!-- ===== MENU BOTTOM SHEET ===== -->
<nav class="sheet" id="sheet">
<div class="sheet-handle"></div>
<div class="sheet-top">
<div class="logo">
<a href="index.html">
<img src="./assets/logos/logo_ciruela.png" alt="Amor & Roma" class="logo-img">
</a>
</div>
<button class="close-btn" onclick="toggleMenu()">✕</button>
</div>
<div class="sheet-body">
<div class="sheet-col">
<div class="sheet-col-title">Soluciones Web</div>
<a href="#servicios" onclick="toggleMenu()" class="sheet-link">
<span class="sheet-link-icon">⊞</span>
<span class="sheet-link-main">Diseño Web</span>
<span class="sheet-link-desc">Sitios informativos modernos</span>
</a>
<a href="#servicios" onclick="toggleMenu()" class="sheet-link">
<span class="sheet-link-icon">⊞</span>
<span class="sheet-link-main">E-commerce</span>
<span class="sheet-link-desc">Tiendas online con todas las funcionalidades</span>
</a>
<a href="#servicios" onclick="toggleMenu()" class="sheet-link">
<span class="sheet-link-icon">⊞</span>
<span class="sheet-link-main">Google Ads</span>
<span class="sheet-link-desc">Publicidad en Search y Display</span>
</a>
</div>
<div class="sheet-col">
<div class="sheet-col-title">Redes Sociales</div>
<a href="#servicios" onclick="toggleMenu()" class="sheet-link">
<span class="sheet-link-icon">⊞</span>
<span class="sheet-link-main">Community Manager</span>
<span class="sheet-link-desc">Administración profesional de redes</span>
</a>
<a href="#servicios" onclick="toggleMenu()" class="sheet-link">
<span class="sheet-link-icon">⊞</span>
<span class="sheet-link-main">Creación de Contenido</span>
<span class="sheet-link-desc">Contenido original y atractivo</span>
</a>
<a href="#servicios" onclick="toggleMenu()" class="sheet-link">
<span class="sheet-link-icon">⊞</span>
<span class="sheet-link-main">Meta Ads</span>
<span class="sheet-link-desc">Publicidad en Facebook e Instagram</span>
</a>
</div>
<div class="sheet-col">
<div class="sheet-col-title">Branding</div>
<a href="#servicios" onclick="toggleMenu()" class="sheet-link">
<span class="sheet-link-icon">⊞</span>
<span class="sheet-link-main">Diseño de Logos</span>
<span class="sheet-link-desc">Personalizados y profesionales</span>
</a>
<a href="#servicios" onclick="toggleMenu()" class="sheet-link">
<span class="sheet-link-icon">⊞</span>
<span class="sheet-link-main">Identidad de Marca</span>
<span class="sheet-link-desc">Creación y desarrollo de marca</span>
</a>
<a href="#contacto" onclick="toggleMenu()" class="sheet-link highlight">
<span class="sheet-link-icon">✉</span>
<span class="sheet-link-main">Contacto</span>
<span class="sheet-link-desc">Empezá tu proyecto</span>
</a>
</div>
</div>
</nav>
<div id="menu-placeholder"></div>
<!-- ===== HEADER ===== -->
<header>
@@ -616,48 +552,11 @@
</section>
<!-- ===== FOOTER ===== -->
<footer class="footer">
<div class="footer-inner">
<div class="footer-brand">
<div class="footer-logo"><img src="logo_frio.png" alt="Amor & Roma" style="height:36px;width:auto;"></div>
<p class="footer-desc">Branding, diseño web y marketing digital para marcas con esencia.</p>
</div>
<div class="footer-links">
<div class="footer-col">
<h4>Navegación</h4>
<a href="#servicios">Servicios</a>
<a href="#planes">Planes</a>
<a href="#cifras">Cifras</a>
<a href="#faq">FAQ</a>
</div>
<div class="footer-col">
<h4>Servicios</h4>
<a href="#servicios">Branding</a>
<a href="#servicios">Diseño Web</a>
<a href="#servicios">Marketing Digital</a>
<a href="#servicios">IA & Automatización</a>
</div>
<div class="footer-col">
<h4>Contacto</h4>
<a href="mailto:contacto@amoryroma.com.ar">contacto@amoryroma.com.ar</a>
<a href="https://wa.me/5493886118304" target="_blank">+54 9 388 611-8304</a>
<div class="footer-socials">
<a href="https://www.instagram.com/amoryroma.creativo/" target="_blank" aria-label="Instagram">IG</a>
<a href="https://www.linkedin.com/in/patricia-pugliese/" target="_blank" aria-label="LinkedIn">IN</a>
<a href="https://web.facebook.com/amoryroma.creativo" target="_blank" aria-label="Facebook">FB</a>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<span>&copy; 2026 Amor & Roma — Estudio Creativo. Todos los derechos reservados.</span>
<span class="footer-legal"><a href="#">Política de privacidad</a><a href="#">Términos y condiciones</a></span>
</div>
</footer>
<div id="footer-placeholder"></div>
<!-- ===== SCRIPTS ===== -->
<script src="scripts/main.js"></script>
<script src="fluid.js"></script>
<script src="scripts/loader.js" defer></script>
</body>
</html>
partials/footer.html
+43
View File
@@ -0,0 +1,43 @@
<footer class="footer">
<div class="footer-inner">
<div class="footer-brand">
<div class="footer-logo">
<img src="./assets/logos/logo_frio.png" alt="Amor & Roma" style="height:36px;width:auto;">
</div>
<p class="footer-desc">Branding, diseño web y marketing digital para marcas con esencia.</p>
</div>
<div class="footer-links">
<div class="footer-col">
<h4>Navegación</h4>
<a href="#servicios">Servicios</a>
<a href="#planes">Planes</a>
<a href="#cifras">Cifras</a>
<a href="#faq">FAQ</a>
</div>
<div class="footer-col">
<h4>Servicios</h4>
<a href="#servicios">Branding</a>
<a href="#servicios">Diseño Web</a>
<a href="#servicios">Marketing Digital</a>
<a href="#servicios">IA & Automatización</a>
</div>
<div class="footer-col">
<h4>Contacto</h4>
<a href="mailto:contacto@amoryroma.com.ar">contacto@amoryroma.com.ar</a>
<a href="https://wa.me/5493886118304" target="_blank">+54 9 388 611-8304</a>
<div class="footer-socials">
<a href="https://www.instagram.com/amoryroma.creativo/" target="_blank" aria-label="Instagram">IG</a>
<a href="https://www.linkedin.com/in/patricia-pugliese/" target="_blank" aria-label="LinkedIn">IN</a>
<a href="https://web.facebook.com/amoryroma.creativo" target="_blank" aria-label="Facebook">FB</a>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<span>&copy; 2026 Amor & Roma — Estudio Creativo. Todos los derechos reservados.</span>
<span class="footer-legal">
<a href="#">Política de privacidad</a>
<a href="#">Términos y condiciones</a>
</span>
</div>
</footer>
partials/menu.html
+71
View File
@@ -0,0 +1,71 @@
<!-- ===== OVERLAY ===== -->
<div class="overlay" id="overlay" onclick="toggleMenu()"></div>
<!-- ===== MENU BOTTOM SHEET ===== -->
<nav class="sheet" id="sheet" aria-label="Menú principal">
<div class="sheet-handle"></div>
<div class="sheet-top">
<div class="logo">
<a href="index.html">
<img src="./assets/logos/logo_ciruela.png" alt="Amor & Roma" class="logo-img">
</a>
</div>
<button class="close-btn" onclick="toggleMenu()" aria-label="Cerrar menú">✕</button>
</div>
<div class="sheet-body">
<div class="sheet-col">
<div class="sheet-col-title">Soluciones Web</div>
<a href="#servicios" onclick="toggleMenu()" class="sheet-link">
<span class="sheet-link-icon">⊞</span>
<span class="sheet-link-main">Diseño Web</span>
<span class="sheet-link-desc">Sitios informativos modernos</span>
</a>
<a href="#servicios" onclick="toggleMenu()" class="sheet-link">
<span class="sheet-link-icon">⊞</span>
<span class="sheet-link-main">E-commerce</span>
<span class="sheet-link-desc">Tiendas online con todas las funcionalidades</span>
</a>
<a href="#servicios" onclick="toggleMenu()" class="sheet-link">
<span class="sheet-link-icon">⊞</span>
<span class="sheet-link-main">Google Ads</span>
<span class="sheet-link-desc">Publicidad en Search y Display</span>
</a>
</div>
<div class="sheet-col">
<div class="sheet-col-title">Redes Sociales</div>
<a href="#servicios" onclick="toggleMenu()" class="sheet-link">
<span class="sheet-link-icon">⊞</span>
<span class="sheet-link-main">Community Manager</span>
<span class="sheet-link-desc">Administración profesional de redes</span>
</a>
<a href="#servicios" onclick="toggleMenu()" class="sheet-link">
<span class="sheet-link-icon">⊞</span>
<span class="sheet-link-main">Creación de Contenido</span>
<span class="sheet-link-desc">Contenido original y atractivo</span>
</a>
<a href="#servicios" onclick="toggleMenu()" class="sheet-link">
<span class="sheet-link-icon">⊞</span>
<span class="sheet-link-main">Meta Ads</span>
<span class="sheet-link-desc">Publicidad en Facebook e Instagram</span>
</a>
</div>
<div class="sheet-col">
<div class="sheet-col-title">Branding</div>
<a href="#servicios" onclick="toggleMenu()" class="sheet-link">
<span class="sheet-link-icon">⊞</span>
<span class="sheet-link-main">Diseño de Logos</span>
<span class="sheet-link-desc">Personalizados y profesionales</span>
</a>
<a href="#servicios" onclick="toggleMenu()" class="sheet-link">
<span class="sheet-link-icon">⊞</span>
<span class="sheet-link-main">Identidad de Marca</span>
<span class="sheet-link-desc">Creación y desarrollo de marca</span>
</a>
<a href="#contacto" onclick="toggleMenu()" class="sheet-link highlight">
<span class="sheet-link-icon">✉</span>
<span class="sheet-link-main">Contacto</span>
<span class="sheet-link-desc">Empezá tu proyecto</span>
</a>
</div>
</div>
</nav>
scripts/loader.js
+50
View File
@@ -0,0 +1,50 @@
/**
* Loader de partials HTML (menú + footer).
* - Usa fetch + cache del navegador.
* - Inyecta con innerHTML (sin reflow bloqueante).
* - Diferido con requestIdleCallback para no competir con el render.
*/
(function () {
'use strict';
const PARTIALS = [
{ url: 'partials/menu.html', target: 'menu-placeholder' },
{ url: 'partials/footer.html', target: 'footer-placeholder' }
];
// Cache en memoria para evitar refetch si se llama varias veces
const cache = new Map();
async function loadPartial({ url, target }) {
const el = document.getElementById(target);
if (!el) return;
try {
let html = cache.get(url);
if (!html) {
const res = await fetch(url, { cache: 'force-cache' });
if (!res.ok) throw new Error(`HTTP ${res.status} en ${url}`);
html = await res.text();
cache.set(url, html);
}
// Inserción vía fragmento para minimizar reflows
el.outerHTML = html;
} catch (err) {
console.warn(`[loader] No se pudo cargar ${url}:`, err);
// Fallback silencioso: deja el placeholder vacío
}
}
function loadAll() {
// En paralelo: ambas peticiones viajan juntas
PARTIALS.forEach(loadPartial);
}
// Espera al idle para no bloquear LCP/FCP
if ('requestIdleCallback' in window) {
requestIdleCallback(loadAll, { timeout: 1500 });
} else {
// Fallback para Safari
window.addEventListener('load', () => setTimeout(loadAll, 0));
}
})();