Add photos page

arieslab · Nov 6, 2024 · 8336841 · 8336841
1 parent 7ce3a7d
commit 8336841
Show file tree

Hide file tree

Showing 38 changed files with 333 additions and 1 deletion.
diff --git a/event_photos/05-11/001.HEIC b/event_photos/05-11/001.HEIC
diff --git a/event_photos/05-11/002.HEIC b/event_photos/05-11/002.HEIC
diff --git a/event_photos/05-11/003.HEIC b/event_photos/05-11/003.HEIC
diff --git a/event_photos/05-11/004.HEIC b/event_photos/05-11/004.HEIC
diff --git a/event_photos/05-11/005.HEIC b/event_photos/05-11/005.HEIC
diff --git a/event_photos/05-11/006.HEIC b/event_photos/05-11/006.HEIC
diff --git a/event_photos/05-11/007.HEIC b/event_photos/05-11/007.HEIC
diff --git a/event_photos/05-11/008.HEIC b/event_photos/05-11/008.HEIC
diff --git a/event_photos/05-11/009.HEIC b/event_photos/05-11/009.HEIC
diff --git a/event_photos/05-11/010.HEIC b/event_photos/05-11/010.HEIC
diff --git a/event_photos/05-11/011.HEIC b/event_photos/05-11/011.HEIC
diff --git a/event_photos/05-11/012.HEIC b/event_photos/05-11/012.HEIC
diff --git a/event_photos/05-11/013.HEIC b/event_photos/05-11/013.HEIC
diff --git a/event_photos/05-11/014.HEIC b/event_photos/05-11/014.HEIC
diff --git a/event_photos/05-11/015.HEIC b/event_photos/05-11/015.HEIC
diff --git a/event_photos/05-11/016.HEIC b/event_photos/05-11/016.HEIC
diff --git a/event_photos/05-11/017.HEIC b/event_photos/05-11/017.HEIC
diff --git a/event_photos/05-11/018.HEIC b/event_photos/05-11/018.HEIC
diff --git a/event_photos/05-11/019.HEIC b/event_photos/05-11/019.HEIC
diff --git a/event_photos/05-11/020.HEIC b/event_photos/05-11/020.HEIC
diff --git a/event_photos/05-11/021.HEIC b/event_photos/05-11/021.HEIC
diff --git a/event_photos/05-11/022.HEIC b/event_photos/05-11/022.HEIC
diff --git a/event_photos/05-11/023.HEIC b/event_photos/05-11/023.HEIC
diff --git a/event_photos/05-11/024.HEIC b/event_photos/05-11/024.HEIC
diff --git a/event_photos/05-11/025.HEIC b/event_photos/05-11/025.HEIC
diff --git a/event_photos/05-11/026.HEIC b/event_photos/05-11/026.HEIC
diff --git a/event_photos/05-11/027.HEIC b/event_photos/05-11/027.HEIC
diff --git a/event_photos/05-11/028.HEIC b/event_photos/05-11/028.HEIC
diff --git a/event_photos/05-11/029.HEIC b/event_photos/05-11/029.HEIC
diff --git a/event_photos/05-11/030.HEIC b/event_photos/05-11/030.HEIC
diff --git a/event_photos/05-11/031.HEIC b/event_photos/05-11/031.HEIC
diff --git a/event_photos/05-11/032.HEIC b/event_photos/05-11/032.HEIC
diff --git a/event_photos/05-11/033.HEIC b/event_photos/05-11/033.HEIC
diff --git a/event_photos/05-11/034.jpg b/event_photos/05-11/034.jpg
diff --git a/event_photos/slide_show.html b/event_photos/slide_show.html
@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Fotos do SBQS 2024</title>
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
+    <link rel="stylesheet" href="../style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+
+</head>
+<body>
+
+    <button class="floating-button" onclick="window.location.href='https://sbqs.sbc.org.br/2024/index.php/pt/'" >
+        <i class="fas fa-arrow-left icon"></i> <!-- Ícone de voltar -->
+    </button>
+
+    <!-- Botão de selecionar língua -->
+
+
+    <button id="float-button-mapa" style="display: block;" class="float-button-mapa">
+        <a href="pt/mapa.html"><i class="fas fa-location-arrow icon"></i></a>
+    </button>
+
+
+
+    <header>
+        <a href="../index.html"><img src="../img/LOGO_SBQS.png" alt="Logo do Evento" class="logo"/></a>
+    </header>
+
+    <section class="photo2">
+
+        <!-- Botões de Data -->
+        <div id='botoes-dias-pt' class="botoes-dias">
+            <h1 id="programa-h1-pt">Fotos do Evento</h1>
+
+            <h4 id="programa-info-pt" >Veja as fotos de cada dia do evento. </h4>
+            <h4>(Também é possível fazer download da foto em display no botão abaixo)</h4>
+            <button id="dia-um-pt" class="active" onclick="mostrarDia('dia1', this)">05/11/2024</button>
+            <button id="dia-dois-pt" onclick="mostrarDia('dia2', this)">06/11/2024</button>
+            <button id="dia-tres-pt" onclick="mostrarDia('dia3', this)">07/11/2024</button>
+            <button id="dia-quatro-pt" onclick="mostrarDia('dia4', this)">08/11/2024</button>
+
+
+        </div>
+
+        <div id='botoes-dias-en' style="display: none;" class="botoes-dias">
+            <h1 id="programa-h1-en" >Fotos do evento</h1>
+            <h4 id="programa-info-en" style="display: none;"> Selecione as fotos por dia</h4>
+
+            <button id="dia-um-en" class="active" onclick="mostrarDia('dia1', this)">05/11/2024</button>
+            <button id="dia-dois-en"  onclick="mostrarDia('dia2', this)">06/11/2024</button>
+            <button id="dia-tres-en"  onclick="mostrarDia('dia3', this)">07/11/2024</button> 
+            <button id="dia-quatro-en"  onclick="mostrarDia('dia4', this)">08/11/2024</button>
+
+
+        </div>
+
+
+
+        <div id="table-shedule-pt" class="tabelas-programacao" >
+
+
+            <div id="dia1" class="slideshow-container">
+                <img class="slides fade" src="../event_photos/05-11/001.HEIC" alt="Imagem 1">
+
+                <img class="slides fade" src="../event_photos/05-11/002.HEIC" alt="Imagem 2">
+                <img class="slides fade" src="../event_photos/05-11/003.HEIC" alt="Imagem 3">
+                <img class="slides fade" src="../event_photos/05-11/004.HEIC" alt="Imagem 4">
+                <img class="slides fade" src="../event_photos/05-11/005.HEIC" alt="Imagem 5">
+                <img class="slides fade" src="../event_photos/05-11/006.HEIC" alt="Imagem 6">
+                <img class="slides fade" src="../event_photos/05-11/007.HEIC" alt="Imagem 7">
+                <img class="slides fade" src="../event_photos/05-11/008.HEIC" alt="Imagem 8">
+                <img class="slides fade" src="../event_photos/05-11/009.HEIC" alt="Imagem 9">
+                <img class="slides fade" src="../event_photos/05-11/010.HEIC" alt="Imagem 10">
+                <img class="slides fade" src="../event_photos/05-11/011.HEIC" alt="Imagem 11">
+                <img class="slides fade" src="../event_photos/05-11/012.HEIC" alt="Imagem 12">
+                <img class="slides fade" src="../event_photos/05-11/013.HEIC" alt="Imagem 13">
+                <img class="slides fade" src="../event_photos/05-11/014.HEIC" alt="Imagem 14">
+                <img class="slides fade" src="../event_photos/05-11/015.HEIC" alt="Imagem 15">
+                <img class="slides fade" src="../event_photos/05-11/016.HEIC" alt="Imagem 16">
+                <img class="slides fade" src="../event_photos/05-11/017.HEIC" alt="Imagem 17">
+                <img class="slides fade" src="../event_photos/05-11/018.HEIC" alt="Imagem 18">
+                <img class="slides fade" src="../event_photos/05-11/019.HEIC" alt="Imagem 19">
+                <img class="slides fade" src="../event_photos/05-11/020.HEIC" alt="Imagem 20">
+                <img class="slides fade" src="../event_photos/05-11/021.HEIC" alt="Imagem 21">
+                <img class="slides fade" src="../event_photos/05-11/022.HEIC" alt="Imagem 22">
+                <img class="slides fade" src="../event_photos/05-11/023.HEIC" alt="Imagem 23">
+                <img class="slides fade" src="../event_photos/05-11/024.HEIC" alt="Imagem 24">
+                <img class="slides fade" src="../event_photos/05-11/025.HEIC" alt="Imagem 25">
+                <img class="slides fade" src="../event_photos/05-11/026.HEIC" alt="Imagem 26">
+                <img class="slides fade" src="../event_photos/05-11/027.HEIC" alt="Imagem 27">
+                <img class="slides fade" src="../event_photos/05-11/028.HEIC" alt="Imagem 28">
+                <img class="slides fade" src="../event_photos/05-11/029.HEIC" alt="Imagem 29">
+                <img class="slides fade" src="../event_photos/05-11/030.HEIC" alt="Imagem 30">
+                <img class="slides fade" src="../event_photos/05-11/031.HEIC" alt="Imagem 31">
+                <img class="slides fade" src="../event_photos/05-11/032.HEIC" alt="Imagem 32">
+                <img class="slides fade" src="../event_photos/05-11/033.HEIC" alt="Imagem 33">
+                <img class="slides fade" src="../event_photos/05-11/034.jpg" alt="Imagem 34">
+
+                <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
+                <a class="next" onclick="plusSlides(1)">&#10095;</a>
+            </div>
+
+        </div>
+        <a id="downloadButton" class="download-btn" download>Baixar Imagem Atual</a>
+
+
+    </section>
+
+    <footer class="footnote-text">
+        <p > © Criado pelo Aries Lab por Joselito Júnior - 2024 </p>
+    </footer>
+
+    <script>
+        function mostrarDia(dia, botao) {
+            // Ocultar todas as tabelas
+            var dias = document.querySelectorAll('.slideshow-container');
+            dias.forEach(function(el) {
+                el.style.display = 'none';
+            });
+
+            // Mostrar a tabela correspondente ao botão clicado
+            document.getElementById(dia).style.display = 'table';
+
+            // Remover a classe "active" de todos os botões
+            var botoes = document.querySelectorAll('.botoes-dias button');
+            botoes.forEach(function(btn) {
+                btn.classList.remove('active');
+            });
+
+            // Adicionar a classe "active" ao botão clicado
+            botao.classList.add('active');
+        }
+
+        // Mostrar o primeiro dia por padrão
+        window.onload = function() {
+            mostrarDia('dia1', document.querySelector('.botoes-dias button.active'));
+        };
+
+        let slideIndex = 1;
+    showSlides(slideIndex);
+
+    function plusSlides(n) {
+        showSlides(slideIndex += n);
+    }
+
+    function showSlides(n) {
+        let slides = document.getElementsByClassName("slides");
+        if (n > slides.length) { slideIndex = 1 }
+        if (n < 1) { slideIndex = slides.length }
+        for (let i = 0; i < slides.length; i++) {
+            slides[i].style.display = "none";  
+        }
+        slides[slideIndex - 1].style.display = "block";  
+
+        // Atualizar o botão de download com o link da imagem atual
+        let currentImage = slides[slideIndex - 1].src;
+        let downloadButton = document.getElementById("downloadButton");
+        downloadButton.href = currentImage;
+        downloadButton.download = `imagem_${slideIndex}.jpg`; // Nome do arquivo
+    }
+
+
+
+
+
+
+    </script>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -40,7 +40,7 @@ <h1 id="programa-h1-pt">Programação do Evento</h1>
 
             <a href="index.html"><button id="programacao-geral" class="activeSchedule" >Programação geral</button></a>
             <a href="pt/programacao-detalhada.html"><button id="programacao-detalhada" >Programação detalhada</button></a>
-
+            <a href="event_photos/slide_show.html"><button id="programacao-detalhada" >Fotos do Evento</button></a>
             <h4 id="programa-info-pt" > Toque em cada evento para saber mais informações.</h4>
 
             <button id="dia-um-pt" class="active" onclick="mostrarDia('dia1', this)">05/11/2024</button>

diff --git a/page_example.html b/page_example.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Slideshow com Download</title>
+    <style>
+        * {
+            box-sizing: border-box;
+        }
+        .slideshow-container {
+            max-width: 600px;
+            position: relative;
+            margin: auto;
+        }
+        .slides {
+            display: none;
+            width: 100%;
+        }
+        .prev, .next {
+            cursor: pointer;
+            position: absolute;
+            top: 50%;
+            width: auto;
+            padding: 16px;
+            margin-top: -22px;
+            color: white;
+            font-weight: bold;
+            font-size: 18px;
+            transition: 0.3s;
+            user-select: none;
+        }
+        .next {
+            right: 0;
+        }
+        .prev {
+            left: 0;
+        }
+        .fade {
+            animation: fadeEffect 1.5s;
+        }
+        @keyframes fadeEffect {
+            from { opacity: 0.4; }
+            to { opacity: 1; }
+        }
+        .download-btn {
+            display: block;
+            margin: 20px auto;
+            padding: 10px 20px;
+            background-color: #4CAF50;
+            color: white;
+            text-align: center;
+            text-decoration: none;
+            font-size: 16px;
+            border-radius: 5px;
+        }
+    </style>
+</head>
+<body>
+
+<h2 style="text-align: center;">Slideshow com Download</h2>
+
+<div class="slideshow-container">
+    <img class="slides fade" src="img/Alexander_Palestra.jpeg" alt="Imagem 1">
+    <img class="slides fade" src="img/Marcio_Ribeiro_Palestra.jpeg" alt="Imagem 2">
+    <img class="slides fade" src="img/Sheila_Palestra.jpeg" alt="Imagem 3">
+
+    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
+    <a class="next" onclick="plusSlides(1)">&#10095;</a>
+</div>
+
+<!-- Botão de Download -->
+<a id="downloadButton" class="download-btn" download>Baixar Imagem Atual</a>
+
+<script>
+    let slideIndex = 1;
+    showSlides(slideIndex);
+
+    function plusSlides(n) {
+        showSlides(slideIndex += n);
+    }
+
+    function showSlides(n) {
+        let slides = document.getElementsByClassName("slides");
+        if (n > slides.length) { slideIndex = 1 }
+        if (n < 1) { slideIndex = slides.length }
+        for (let i = 0; i < slides.length; i++) {
+            slides[i].style.display = "none";  
+        }
+        slides[slideIndex - 1].style.display = "block";  
+
+        // Atualizar o botão de download com o link da imagem atual
+        let currentImage = slides[slideIndex - 1].src;
+        let downloadButton = document.getElementById("downloadButton");
+        downloadButton.href = currentImage;
+        downloadButton.download = `imagem_${slideIndex}.jpg`; // Nome do arquivo
+    }
+</script>
+
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -29,6 +29,14 @@ header {
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 
+.photo2 {
+    width: 96%;
+    max-width: 1200px;
+    margin: 20px auto;
+    padding: 30px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
 .botoes-dias {
     text-align: center;
     margin-bottom: 20px;
@@ -333,6 +341,58 @@ body {
 }
 */
 
+* {
+    box-sizing: border-box;
+}
+.slideshow-container {
+    max-width: 600px;
+    position: relative;
+    margin: auto;
+}
+.slides {
+    display: none;
+    width: 100%;
+}
+.prev, .next {
+    cursor: pointer;
+    position: absolute;
+    top: 50%;
+    width: auto;
+    padding: 16px;
+    margin-top: -22px;
+    color: white;
+    font-weight: bold;
+    font-size: 18px;
+    transition: 0.3s;
+    user-select: none;
+}
+.next {
+    right: 0;
+}
+.prev {
+    left: 0;
+}
+.fade {
+    animation: fadeEffect 1.5s;
+}
+@keyframes fadeEffect {
+    from { opacity: 0.4; }
+    to { opacity: 1; }
+}
+.download-btn {
+    display: flexbox;
+    position: relative;
+    margin-bottom: 100px;
+    margin: 2px ;
+    padding: 10px 20px;
+    background-color: #1b8d82ff;
+    color: white;
+    text-align: center;
+    text-decoration: none;
+    font-size: 16px;
+    border-radius: 5px;
+}
+
 .search-bar {
     margin: 20px 0;
     display: flex;