AD CAMAQUÃ - CONTRUÇÕES EM ANDAMENTO

Neste espaço estaremos compartilhando um pouco da nossa obra física

que está acontecendo dentro do nosso campo eclesiástico denominado Campo de Camaquã.
Obras que estão ou iniciará em breve .

CONSTRUÇÃO DO SETOR 17 ASSENTAMENTO BOA VISTA

<!doctype html>

<head>

<title>Quadro Interativo com Geração Total Automática</title>

<style>

body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; background:#0b1220; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100vh; padding:24px;}

#tela{

width:700px;

height:400px;

border:3px solid #58a6ff;

border-radius:12px;

overflow:hidden;

position:relative;

box-shadow:0 8px 25px rgba(0,0,0,0.5);

margin-bottom:20px;

}

.slide{

width:100%;

height:100%;

position:absolute;

top:0;

left:0;

opacity:0;

transition:opacity 1s ease-in-out;

}

.slide img{

width:100%;

height:100%;

object-fit:cover;

}

.slide .info{

position:absolute;

bottom:15px;

left:15px;

background:rgba(0,0,0,0.5);

padding:10px 14px;

border-radius:8px;

color:#fff;

max-width:80%;

}

.slide .info h3{margin:0 0 4px 0; font-size:18px;}

.slide .info p{margin:0; font-size:14px; opacity:0.9;}

#miniaturas{

display:flex;

gap:8px;

flex-wrap:wrap;

justify-content:center;

margin-bottom:20px;

}

.thumb{

width:100px;

height:56px;

cursor:pointer;

border:2px solid transparent;

border-radius:6px;

overflow:hidden;

opacity:0.7;

transition: all 0.3s ease;

}

.thumb img{width:100%; height:100%; object-fit:cover;}

.thumb.active{border-color:#58a6ff; opacity:1;}

.btnNav{

position:absolute;

top:50%;

transform:translateY(-50%);

background:rgba(0,0,0,0.4);

border:none;

color:#fff;

padding:10px 14px;

cursor:pointer;

border-radius:6px;

font-size:20px;

}

#prevBtn{left:10px;}

#nextBtn{right:10px;}

.btnNav:hover{background:rgba(0,0,0,0.7);}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

const slides = document.querySelectorAll('.slide');

const miniaturasEl = document.getElementById('miniaturas');

const prevBtn = document.getElementById('prevBtn');

const nextBtn = document.getElementById('nextBtn');

let indiceAtual = 0;

// Geração automática de títulos e descrições baseadas na ordem da imagem

slides.forEach((slide, i)=>{

const h3 = slide.querySelector('h3');

const p = slide.querySelector('p');

h3.textContent = Imagem ${i+1};

p.textContent = Descrição da imagem ${i+1};

});

// Cria miniaturas automaticamente

slides.forEach((slide, i)=>{

const div = document.createElement('div'); div.className='thumb';

const img = document.createElement('img'); img.src=slide.querySelector('img').src; div.appendChild(img);

div.addEventListener('click', ()=> mostrarSlide(i));

miniaturasEl.appendChild(div);

});

function mostrarSlide(indice){

indiceAtual = indice;

slides.forEach((slide,i)=> slide.style.opacity = i===indice?1:0);

atualizarMiniaturas();

}

function atualizarMiniaturas(){

Array.from(miniaturasEl.children).forEach((thumb,i)=> thumb.classList.toggle('active', i===indiceAtual));

}

function proximo(){

mostrarSlide((indiceAtual+1)%slides.length);

}

function anterior(){

mostrarSlide((indiceAtual-1+slides.length)%slides.length);

}

prevBtn.addEventListener('click', anterior);

nextBtn.addEventListener('click', proximo);

// Troca automática a cada 10 segundos

mostrarSlide(0);

setInterval(()=>{

let novoIndice;

do{ novoIndice = Math.floor(Math.random()*slides.length); }while(novoIndice===indiceAtual);

mostrarSlide(novoIndice);

},10000);

</script>

</body>

</html>

CONTRUÇÕES EM ANDAMENTO

Neste espaço estaremos compartilhando um pouco da nossa obra física

que está acontecendo dentro do nosso campo eclesiástico denominado Campo de Camaquã.Obras que estão ou iniciará em breve .

que está acontecendo dentro do nosso campo eclesiástico denominado Campo de Camaquã.
Obras que estão ou iniciará em breve .