consultoria-as/PaginaDrenaxpro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Código fuente del sitio Drenax Pro

Browse Source
This commit is contained in:
consultoria-as
2026-02-19 23:21:07 +00:00
commit a2f9669c3a
76 changed files with 6040 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
public_html/views/drenaxpro.php Normal file
View File

@@ -0,0 +1,184 @@
<section class="pro-header">
</section>
<section class="ld-red">
<div class="floating-block-container">
<div class="cat-cta-container">
<span class="ref-cta-text pro-cta-box">COMPRA Y RENTA</span>
</div>
<div class="pro-floating-block">
<div class="pro-floating-block-content">
<p class="title">EQUIPOS HIDRONEUMÁTICOS VACTOR</p>
<p class="subtitle" style="margin-bottom:0.25em">Potencia, rendimiento y confiabilidad en cada operación. </p>
<p class="description">Nuestros equipos hidroneumáticos Vactor están diseñados para brindar soluciones eficientes en la limpieza y desazolve de redes de drenaje, alcantarillado y líneas subterráneas. Gracias a su tecnología de alta presión y sistema de vacío, permiten una operación segura, rápida y con el menor impacto ambiental.</p>
</div>
<div class="floating-block-arrow"></div>
</div>
<div class="cat-cta-container" style="padding-bottom:0">
<span class="ref-cta-text ref-cta-no-box">CARACTERÍSTICAS</span>
</div>
<section class="row center-row inicio-cards--5" style="padding: 2rem 0 3rem 0">
<div class="card-5 col-lg-3 col-lg-offset-1">
<svg xmlns="http://www.w3.org/2000/svg" height="110" fill="yellow" style="padding-bottom:1em" class="bi bi-arrows-move" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10M.146 8.354a.5.5 0 0 1 0-.708l2-2a.5.5 0 1 1 .708.708L1.707 7.5H5.5a.5.5 0 0 1 0 1H1.707l1.147 1.146a.5.5 0 0 1-.708.708zM10 8a.5.5 0 0 1 .5-.5h3.793l-1.147-1.146a.5.5 0 0 1 .708-.708l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L14.293 8.5H10.5A.5.5 0 0 1 10 8"/>
</svg>
<p class="card-5--title">TECNOLOGÍA DE ALTA SUCCIÓN Y PRESIÓN.</p>
</div>
<div class="card-5 col-lg-3">
<svg xmlns="http://www.w3.org/2000/svg" height="110" fill="yellow" style="padding-bottom:1em" class="bi bi-boombox" viewBox="0 0 16 16">
<path d="M2.5 5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1m2 0a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1m7.5-.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0m1.5.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1m-7-1a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zm5.5 6.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0"/>
<path d="M11.5 13a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5m0-1a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3M5 10.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0"/>
<path d="M7 10.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0m-1 0a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0"/>
<path d="M14 2V2h1a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h13M1 3v3h14V3zm14 4H1v7h14z"/>
</svg>
<p class="card-5--title">SISTEMAS DE CONTROL INTUITIVOS.</p>
</div>
<div class="card-5 col-lg-3">
<svg xmlns="http://www.w3.org/2000/svg" height="110" viewBox="0 0 16 16" fill="yellow" style="padding-bottom:1em">
<path d="M4.377 1.591C1.96 1.591-.002 4.34-.002 7.73c0 2.139.794 4.123 2.096 5.238a.7.7 0 0 0-.048.245v1.544c0 .326.236.588.528.588s.527-.262.527-.588V13.6a3.25 3.25 0 0 0 1.276.266q3.636.001 7.273.007v-.007a3.2 3.2 0 0 0 1.194-.245v1.126c0 .326.235.588.527.588s.528-.262.528-.588v-1.544a.7.7 0 0 0-.033-.206c1.322-1.109 2.132-3.11 2.132-5.269 0-3.39-1.96-6.138-4.379-6.138H4.377zm2.21.839H9.41c-.565.466-1.047 1.105-1.412 1.867-.365-.762-.847-1.4-1.411-1.867m-2.598.043v10.523c-1.627-.329-2.85-2.585-2.85-5.262s1.223-4.932 2.85-5.261m8.04 0c1.628.329 2.85 2.585 2.85 5.261s-1.222 4.933-2.85 5.261zm-7.21.007c1.194.26 2.203 1.58 2.619 3.426.131.586.199 1.205.199 1.829 0 .622-.067 1.239-.198 1.823-.415 1.85-1.424 3.17-2.62 3.431zm6.38 0v10.51c-1.207-.264-2.223-1.608-2.63-3.482a8.4 8.4 0 0 1-.188-1.773c0-.606.064-1.208.189-1.779.408-1.871 1.423-3.213 2.63-3.476m-3.201 8.681c.367.767.852 1.408 1.42 1.875h-2.84c.568-.467 1.053-1.108 1.42-1.875"/>
</svg>
<p class="card-5--title">TANQUES DE GRAN CAPACIDAD Y DURABILIDAD.</p>
</div>
<div class="card-5 col-lg-3">
<svg xmlns="http://www.w3.org/2000/svg" height="110" fill="yellow" style="padding-bottom:1em" class="bi bi-moisture" viewBox="0 0 16 16">
<path d="M13.5 0a.5.5 0 0 0 0 1H15v2.75h-.5a.5.5 0 0 0 0 1h.5V7.5h-1.5a.5.5 0 0 0 0 1H15v2.75h-.5a.5.5 0 0 0 0 1h.5V15h-1.5a.5.5 0 0 0 0 1h2a.5.5 0 0 0 .5-.5V.5a.5.5 0 0 0-.5-.5zM7 1.5l.364-.343a.5.5 0 0 0-.728 0l-.002.002-.006.007-.022.023-.08.088a29 29 0 0 0-1.274 1.517c-.769.983-1.714 2.325-2.385 3.727C2.368 7.564 2 8.682 2 9.733 2 12.614 4.212 15 7 15s5-2.386 5-5.267c0-1.05-.368-2.169-.867-3.212-.671-1.402-1.616-2.744-2.385-3.727a29 29 0 0 0-1.354-1.605l-.022-.023-.006-.007-.002-.001zm0 0-.364-.343zm-.016.766L7 2.247l.016.019c.24.274.572.667.944 1.144.611.781 1.32 1.776 1.901 2.827H4.14c.58-1.051 1.29-2.046 1.9-2.827.373-.477.706-.87.945-1.144zM3 9.733c0-.755.244-1.612.638-2.496h6.724c.395.884.638 1.741.638 2.496C11 12.117 9.182 14 7 14s-4-1.883-4-4.267"/>
</svg>
<p class="card-5--title">EFICIENCIA EN LIMPIEZA PROFUNDA Y MANTENIMIENTO PREVENTIVO.</p>
</div>
</section>
<div class="cat-cta-container" style="padding-bottom:0">
<span class="ref-cta-text gal-cta-box">GALERÍA</span>
</div>
<div class="slider-container">
<div class="slider">
<a href="#" class="slider-item">
<img src="../assets/img/blue_industrial.jpg" alt="Descripción de la imagen 1" data-full="imagen1-full.jpg">
</a>
<a href="#" class="slider-item">
<img src="../assets/img/rf-bg.jpg" alt="Descripción de la imagen 2" data-full="imagen2-full.jpg">
</a>
<a href="#" class="slider-item">
<img src="../assets/img/blue_industrial.jpg" alt="Descripción de la imagen 3" data-full="imagen3-full.jpg">
</a>
</div>
<button class="prev-btn">◀️</button>
<button class="next-btn" style="right:0">▶️</button>
</div>
<div class="pro-cta-container">
<span class="pro-cta-text pro-cta-no-box">IDEAL PARA</span>
</div>
<div class="list-container" style="margin-bottom:-240px;">
<ul class="pro-list">
<li>Empresas de servicios municipales</li>
<li>Contratistas de infraestructura</li>
<li>Mantenimiento industrial</li>
<li>Obras públicas</li>
</ul>
</div>
</div>
</section>
<div id="lightbox" class="lightbox">
<span class="close-btn" style="color:white;padding-bottom:50vh">&times;</span>
<button id="prev-lightbox-btn" class="lightbox-nav prev">◀️</button>
<img id="lightbox-image" src="" alt="">
<button id="next-lightbox-btn" class="lightbox-nav next">▶️</button>
</div>
<section class="ld-blue-simple" style="height:60vh;">
<div class="floating-block-container" style="top:-240px;">
<div class="cat-end-card">
</div>
<div class="end-cta-container">
<span class="end-cta-text ref-cta-no-box">Con Vactor, tu operación esta equipada con la mejor tecnología y respaldo profesional</span>
</div>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', function() {
const slider = document.querySelector('.slider');
const sliderItems = document.querySelectorAll('.slider-item');
const totalItems = sliderItems.length;
let currentIndex = 0;
// Botones del slider
const prevSliderBtn = document.querySelector('.prev-btn');
const nextSliderBtn = document.querySelector('.next-btn');
// Elementos del lightbox
const lightbox = document.getElementById('lightbox');
const lightboxImage = document.getElementById('lightbox-image');
const closeBtn = document.querySelector('.close-btn');
const prevLightboxBtn = document.getElementById('prev-lightbox-btn');
const nextLightboxBtn = document.getElementById('next-lightbox-btn');
// --- Funcionalidad del Slider ---
function updateSliderPosition() {
slider.style.transform = `translateX(${-currentIndex * 100}%)`;
}
// Asegúrate de que los botones existan antes de añadir el listener
if (nextSliderBtn) {
nextSliderBtn.addEventListener('click', () => {
currentIndex = (currentIndex + 1) % totalItems;
updateSliderPosition();
});
}
if (prevSliderBtn) {
prevSliderBtn.addEventListener('click', () => {
currentIndex = (currentIndex - 1 + totalItems) % totalItems;
updateSliderPosition();
});
}
// --- Funcionalidad del Lightbox ---
// Abrir Lightbox al hacer clic en una imagen del slider
sliderItems.forEach((item, index) => {
item.addEventListener('click', (e) => {
e.preventDefault();
currentIndex = index;
const fullImageSrc = item.querySelector('img').getAttribute('src');
lightboxImage.src = fullImageSrc; // Establece la primera imagen sin fade
lightbox.style.display = 'flex';
// Aseguramos que no haya clase fade-out al abrir
lightboxImage.classList.remove('fade-out');
});
});
// Cerrar Lightbox
if (closeBtn) {
closeBtn.addEventListener('click', () => {
lightbox.style.display = 'none';
});
}
// Navegar en Lightbox con crossfade
function updateLightboxImage() {
// 1. Añadir clase para empezar el fade-out
lightboxImage.classList.add('fade-out');
// 2. Esperar a que la imagen se desvanezca (o un poco menos para que no sea tan lento)
// El tiempo de espera debe coincidir con la duración de la transición en CSS
setTimeout(() => {
// 3. Cambiar la fuente de la imagen
const newImageSrc = sliderItems[currentIndex].querySelector('img').getAttribute('src');
lightboxImage.src = newImageSrc;
// 4. Quitar la clase para que la nueva imagen aparezca con fade-in
lightboxImage.classList.remove('fade-out');
}, 300); // 300ms es el tiempo de la transición CSS
}
if (nextLightboxBtn) {
nextLightboxBtn.addEventListener('click', () => {
currentIndex = (currentIndex + 1) % totalItems;
updateLightboxImage();
});
}
if (prevLightboxBtn) {
prevLightboxBtn.addEventListener('click', () => {
currentIndex = (currentIndex - 1 + totalItems) % totalItems;
updateLightboxImage();
});
}
});
</script>