| Server IP : 127.0.0.1 / Your IP : 216.73.216.109 Web Server : Apache/2.4.54 (Win64) OpenSSL/1.1.1q PHP/8.1.10 System : Windows NT DESKTOP-E5T4RUN 10.0 build 19045 (Windows 10) AMD64 User : SERVERWEB ( 0) PHP Version : 8.1.10 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : C:/laragon/www/sections/ |
Upload File : |
<style>
.districts-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 5px;
margin-bottom: 10px;
}
.district-card {
position: relative;
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
cursor: pointer;
}
.district-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.district-card.active {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(102, 126, 234, 0.3);
border: 2px solid #667eea;
}
.district-image {
width: 100%;
height: 200px;
background: linear-gradient(45deg, #667eea, #764ba2);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
font-weight: bold;
}
.district-content {
padding: 20px;
}
.district-subtitle {
color: #667eea;
font-size: 0.9rem;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
}
.district-title {
font-size: 1.3rem;
color: #2c3e50;
margin-bottom: 15px;
font-weight: bold;
}
.see-more {
color: #667eea;
font-size: 0.9rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 5px;
}
.info-panel {
grid-column: 1 / -1;
background: white;
border-radius: 15px;
margin: 0px 0;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
overflow: hidden;
max-height: 0;
opacity: 0;
transition: all 0.5s ease;
}
.info-panel.active {
max-height: 600px;
opacity: 1;
margin: 30px 0;
}
.info-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
padding: 40px;
}
.info-image {
width: 100%;
height: 300px;
background: linear-gradient(45deg, #667eea, #764ba2);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.1rem;
}
.info-details {
display: flex;
flex-direction: column;
justify-content: center;
}
.info-details h3 {
color: #2c3e50;
font-size: 1.8rem;
margin-bottom: 20px;
}
.info-text {
color: #555;
line-height: 1.6;
margin-bottom: 15px;
}
.info-text strong {
color: #2c3e50;
}
.map-container {
grid-column: 1 / -1;
margin-top: 20px;
}
.map-container iframe {
width: 100%;
height: 350px;
border-radius: 10px;
border: none;
}
.close-btn {
position: absolute;
top: 15px;
right: 15px;
background: #ff6b6b;
color: white;
border: none;
width: 35px;
height: 35px;
border-radius: 50%;
cursor: pointer;
font-size: 1.2rem;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.close-btn:hover {
background: #ff5252;
transform: scale(1.1);
}
.icon-compass::before {
content: "🧭";
margin-right: 5px;
}
@media (max-width: 1200px) {
.districts-container {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.districts-container {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.info-content {
grid-template-columns: 1fr;
gap: 20px;
padding: 20px;
}
.title {
font-size: 1.8rem;
}
}
@media (max-width: 480px) {
.districts-container {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="section full-width flv_sections_16">
<div class="section_wrapper clearfix">
<div class="fancy_heading fancy_heading_icon">
<div class="animate" data-anim-type="zoomInLeftLarge">
<h2 class="title">Sub Alcaldías del Municipio de Quillacollo</h2>
<div class="inside">
<!-- <span class="big">Visita nuestras unidades e informate.</span> -->
</div>
</div>
</div>
<div class="districts-grid" id="districtsGrid"></div>
</div>
</div>
<script>
const districts = [
{
id: 1,
name: "Sub Alcaldía Distrito 1 - Tacata",
subtitle: "Ver más",
subAlcalde: "Pendiente de asignación",
ubicacion: "Av. Principal, Tacata, Quillacollo, Cochabamba-Bolivia",
telefono: "4723440",
horarios: "8:00 AM - 12:00 PM<br>14:00 PM - 18:00 PM",
descripcion: "Sub Alcaldía Distrito 1 - Tacata",
mapSrc: "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4527.938191121549!2d-66.29353509532704!3d-17.386456537284126!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x93e30b9f4c85dc57%3A0xf6f4ac1a917a75c9!2sTacata!5e0!3m2!1sen!2sbo!4v1748957010090!5m2!1sen!2sbo"
},
{
id: 2,
name: "Sub Alcaldía Distrito 2 - Centro",
subtitle: "Ver más",
subAlcalde: "Pendiente de asignación",
ubicacion: "Plaza Principal, Centro, Quillacollo, Cochabamba-Bolivia",
telefono: "4723441",
horarios: "8:00 AM - 12:00 PM<br>14:00 PM - 18:00 PM",
descripcion: "Centro histórico de Quillacollo",
mapSrc: "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3634.8234!2d-66.2781!3d-17.3932!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x93e30b8c123456!2sQuillacollo!5e0!3m2!1sen!2sbo!4v1234567890"
},
{
id: 3,
name: "Sub Alcaldía Distrito 3 - Villa Pagador",
subtitle: "Ver más",
subAlcalde: "Pendiente de asignación",
ubicacion: "Villa Pagador, Quillacollo, Cochabamba-Bolivia",
telefono: "4723442",
horarios: "8:00 AM - 12:00 PM<br>14:00 PM - 18:00 PM",
descripcion: "Zona residencial Villa Pagador",
mapSrc: "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3634.8234!2d-66.2781!3d-17.3832!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x93e30b8c789012!2sVilla+Pagador!5e0!3m2!1sen!2sbo!4v1234567891"
},
{
id: 4,
name: "Sub Alcaldía Distrito 4 - La Maica",
subtitle: "Ver más",
subAlcalde: "Pendiente de asignación",
ubicacion: "La Maica, Quillacollo, Cochabamba-Bolivia",
telefono: "4723443",
horarios: "8:00 AM - 12:00 PM<br>14:00 PM - 18:00 PM",
descripcion: "Zona sur La Maica",
mapSrc: "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3634.8234!2d-66.2781!3d-17.4032!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x93e30b8c345678!2sLa+Maica!5e0!3m2!1sen!2sbo!4v1234567892"
},
{
id: 5,
name: "Sub Alcaldía Distrito 5 - Huayculi",
subtitle: "Ver más",
subAlcalde: "Pendiente de asignación",
ubicacion: "Huayculi, Quillacollo, Cochabamba-Bolivia",
telefono: "4723444",
horarios: "8:00 AM - 12:00 PM<br>14:00 PM - 18:00 PM",
descripcion: "Zona este Huayculi",
mapSrc: "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3634.8234!2d-66.2681!3d-17.3932!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x93e30b8c901234!2sHuayculi!5e0!3m2!1sen!2sbo!4v1234567893"
},
{
id: 6,
name: "Sub Alcaldía Distrito 6 - Chiquicollo",
subtitle: "Ver más",
subAlcalde: "Pendiente de asignación",
ubicacion: "Chiquicollo, Quillacollo, Cochabamba-Bolivia",
telefono: "4723445",
horarios: "8:00 AM - 12:00 PM<br>14:00 PM - 18:00 PM",
descripcion: "Zona oeste Chiquicollo",
mapSrc: "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3634.8234!2d-66.2881!3d-17.3932!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x93e30b8c567890!2sChiquicollo!5e0!3m2!1sen!2sbo!4v1234567894"
},
{
id: 7,
name: "Sub Alcaldía Distrito 7 - Norte",
subtitle: "Ver más",
subAlcalde: "Pendiente de asignación",
ubicacion: "Zona Norte, Quillacollo, Cochabamba-Bolivia",
telefono: "4723446",
horarios: "8:00 AM - 12:00 PM<br>14:00 PM - 18:00 PM",
descripcion: "Distrito Norte de Quillacollo",
mapSrc: "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3634.8234!2d-66.2781!3d-17.3732!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x93e30b8c123789!2sQuillacollo+Norte!5e0!3m2!1sen!2sbo!4v1234567895"
},
{
id: 8,
name: "Sub Alcaldía Distrito 8 - El Paso",
subtitle: "Ver más",
subAlcalde: "Pendiente de asignación",
ubicacion: "El Paso, Quillacollo, Cochabamba-Bolivia",
telefono: "4723447",
horarios: "8:00 AM - 12:00 PM<br>14:00 PM - 18:00 PM",
descripcion: "Zona El Paso",
mapSrc: "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3634.8234!2d-66.2981!3d-17.3932!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x93e30b8c456789!2sEl+Paso!5e0!3m2!1sen!2sbo!4v1234567896"
},
{
id: 9,
name: "Sub Alcaldía Distrito 9 - Temporal",
subtitle: "Ver más",
subAlcalde: "Pendiente de asignación",
ubicacion: "Temporal, Quillacollo, Cochabamba-Bolivia",
telefono: "4723448",
horarios: "8:00 AM - 12:00 PM<br>14:00 PM - 18:00 PM",
descripcion: "Zona Temporal",
mapSrc: "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3634.8234!2d-66.2581!3d-17.3932!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x93e30b8c789456!2sTemporal!5e0!3m2!1sen!2sbo!4v1234567897"
},
{
id: 10,
name: "Sub Alcaldía Distrito 10 - Killman",
subtitle: "Ver más",
subAlcalde: "Pendiente de asignación",
ubicacion: "Killman, Quillacollo, Cochabamba-Bolivia",
telefono: "4723449",
horarios: "8:00 AM - 12:00 PM<br>14:00 PM - 18:00 PM",
descripcion: "Zona Killman",
mapSrc: "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3634.8234!2d-66.2381!3d-17.3932!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x93e30b8c012345!2sKillman!5e0!3m2!1sen!2sbo!4v1234567898"
}
];
let currentActiveDistrict = null;
let currentInfoPanel = null;
function createDistrictCard(district) {
return `
<div class="district-card" onclick="toggleDistrict(${district.id})" id="district-${district.id}">
<div class="district-image">
Distrito ${district.id} - Imagen
</div>
<div class="district-content">
<div class="district-subtitle">
<span class="icon-compass"></span>
${district.subtitle}
</div>
<div class="district-title">${district.name}</div>
<div class="see-more">
<span>📍 Ver ubicación y detalles</span>
</div>
</div>
</div>
`;
}
function createInfoPanel(district) {
return `
<div class="info-panel" id="info-${district.id}">
<button class="close-btn" onclick="closeInfoPanel()">×</button>
<div class="info-content">
<div class="info-image">
Imagen del Distrito ${district.id}
</div>
<div class="info-details">
<h3>${district.descripcion}</h3>
<div class="info-text">
<strong>Sub Alcaldía:</strong> ${district.name}
</div>
<div class="info-text">
<strong>Sub Alcalde:</strong> ${district.subAlcalde}
</div>
<div class="info-text">
<strong>Ubicación:</strong> ${district.ubicacion}
</div>
<div class="info-text">
<strong>Teléfono:</strong> ${district.telefono}
</div>
<div class="info-text">
<strong>Horarios de Atención:</strong><br>
${district.horarios}
</div>
</div>
<div class="map-container">
<iframe src="${district.mapSrc}"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade">
</iframe>
</div>
</div>
</div>
`;
}
function getDistrictsPerRow() {
const width = window.innerWidth;
if (width <= 480) return 1;
if (width <= 768) return 2;
if (width <= 1200) return 3;
return 5;
}
function renderDistricts() {
const container = document.getElementById('districtsGrid');
const districtsPerRow = getDistrictsPerRow();
let html = '<div class="districts-container">';
districts.forEach((district, index) => {
html += createDistrictCard(district);
// Add info panel after every row or at the end
if ((index + 1) % districtsPerRow === 0 || index === districts.length - 1) {
html += '</div>'; // Close current districts-container
// Add info panels for this row
const rowStart = Math.floor(index / districtsPerRow) * districtsPerRow;
const rowEnd = Math.min(rowStart + districtsPerRow, districts.length);
for (let i = rowStart; i < rowEnd; i++) {
html += createInfoPanel(districts[i]);
}
// Start new row if not the last one
if (index < districts.length - 1) {
html += '<div class="districts-container">';
}
}
});
container.innerHTML = html;
}
// Re-render on window resize to adjust for responsive breakpoints
let resizeTimeout;
window.addEventListener('resize', () => {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(() => {
const newDistrictsPerRow = getDistrictsPerRow();
// Only re-render if the number of districts per row actually changed
if (newDistrictsPerRow !== window.lastDistrictsPerRow) {
window.lastDistrictsPerRow = newDistrictsPerRow;
renderDistricts();
}
}, 250);
});
function toggleDistrict(districtId) {
const clickedCard = document.getElementById(`district-${districtId}`);
const infoPanel = document.getElementById(`info-${districtId}`);
// Close any currently open panel
if (currentInfoPanel && currentInfoPanel !== infoPanel) {
currentInfoPanel.classList.remove('active');
if (currentActiveDistrict) {
currentActiveDistrict.classList.remove('active');
}
}
// Toggle the clicked panel
if (infoPanel.classList.contains('active')) {
infoPanel.classList.remove('active');
clickedCard.classList.remove('active');
currentActiveDistrict = null;
currentInfoPanel = null;
} else {
infoPanel.classList.add('active');
clickedCard.classList.add('active');
currentActiveDistrict = clickedCard;
currentInfoPanel = infoPanel;
// Smooth scroll to the info panel
setTimeout(() => {
infoPanel.scrollIntoView({
behavior: 'smooth',
block: 'nearest'
});
}, 100);
}
}
function closeInfoPanel() {
if (currentInfoPanel) {
currentInfoPanel.classList.remove('active');
}
if (currentActiveDistrict) {
currentActiveDistrict.classList.remove('active');
}
currentActiveDistrict = null;
currentInfoPanel = null;
}
// Initialize the page
window.lastDistrictsPerRow = getDistrictsPerRow();
renderDistricts();
</script>