Spaces:
Running
Running
| <div class="slideshow-container w-full max-w-4xl mx-auto mt-8"> | |
| <!-- Slide 1 - Introdução --> | |
| <div class="slide"> | |
| <h2 class="text-3xl font-bold mb-6">Caracterização do Óleo de Andiroba</h2> | |
| <img src="andiroba.jpg" class="w-1/2 mx-auto mb-6 rounded-lg shadow-lg" alt="Óleo de Andiroba"> | |
| <p class="text-lg text-gray-700"> | |
| Óleo extraído de Carapa guianensis com propriedades terapêuticas e cosméticas. | |
| </p> | |
| </div> | |
| <!-- Slide 2 - Roteiro --> | |
| <div class="slide"> | |
| <h2 class="text-2xl font-bold mb-4">Roteiro da Apresentação</h2> | |
| <ol class="list-decimal pl-6 space-y-2 text-lg"> | |
| <li>Introdução e importância</li> | |
| <li>Composição química</li> | |
| <li>Métodos de caracterização</li> | |
| <li>Análises físico-químicas</li> | |
| <li>Estabilidade térmica (TG/DTG)</li> | |
| <li>Tempo de oxidação (Rancimat)</li> | |
| <li>Perfil de ácidos graxos (CG-MS)</li> | |
| <li>Discussão dos resultados</li> | |
| <li>Aplicações cosméticas</li> | |
| <li>Conclusões</li> | |
| </ol> | |
| </div> | |
| <!-- Add more slides following the same pattern --> | |
| <a class="prev" onclick="plusSlides(-1)">❮</a> | |
| <a class="next" onclick="plusSlides(1)">❯</a> | |
| </div> | |
| <!-- Navigation dots --> | |
| <div class="dot-container"> | |
| <span class="dot" onclick="currentSlide(1)"></span> | |
| <span class="dot" onclick="currentSlide(2)"></span> | |
| <!-- Add more dots for each slide --> | |
| </div> | |
| <style> | |
| .slideshow-container { | |
| position: relative; | |
| } | |
| .slide { | |
| display: none; | |
| padding: 20px; | |
| text-align: center; | |
| } | |
| .prev, .next { | |
| position: absolute; | |
| top: 50%; | |
| padding: 16px; | |
| margin-top: -22px; | |
| color: white; | |
| background-color: rgba(0,0,0,0.3); | |
| font-weight: bold; | |
| font-size: 18px; | |
| border-radius: 0 3px 3px 0; | |
| user-select: none; | |
| cursor: pointer; | |
| } | |
| .next { | |
| right: 0; | |
| border-radius: 3px 0 0 3px; | |
| } | |
| .prev:hover, .next:hover { | |
| background-color: rgba(0,0,0,0.8); | |
| } | |
| .dot-container { | |
| text-align: center; | |
| padding: 20px; | |
| } | |
| .dot { | |
| display: inline-block; | |
| width: 12px; | |
| height: 12px; | |
| margin: 0 5px; | |
| background-color: #bbb; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| } | |
| .active, .dot:hover { | |
| background-color: #666; | |
| } | |
| </style> | |
| <script> | |
| let slideIndex = 1; | |
| showSlides(slideIndex); | |
| function plusSlides(n) { | |
| showSlides(slideIndex += n); | |
| } | |
| function currentSlide(n) { | |
| showSlides(slideIndex = n); | |
| } | |
| function showSlides(n) { | |
| let i; | |
| const slides = document.getElementsByClassName("slide"); | |
| const dots = document.getElementsByClassName("dot"); | |
| if (n > slides.length) {slideIndex = 1} | |
| if (n < 1) {slideIndex = slides.length} | |
| for (i = 0; i < slides.length; i++) { | |
| slides[i].style.display = "none"; | |
| } | |
| for (i = 0; i < dots.length; i++) { | |
| dots[i].className = dots[i].className.replace(" active", ""); | |
| } | |
| slides[slideIndex-1].style.display = "block"; | |
| dots[slideIndex-1].className += " active"; | |
| } | |
| </script> | |
| " | |
| <html> | |
| <head> | |
| <title>My app</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <meta charset="utf-8"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| </head> | |
| <body class="flex justify-center items-center h-screen overflow-hidden bg-white font-sans text-center px-6"> | |
| <div class="w-full"> | |
| <span class="text-xs rounded-full mb-2 inline-block px-2 py-1 border border-amber-500/15 bg-amber-500/15 text-amber-500">🔥 New version dropped!</span> | |
| <h1 class="text-4xl lg:text-6xl font-bold font-sans"> | |
| <span class="text-2xl lg:text-4xl text-gray-400 block font-medium">I'm ready to work,</span> | |
| Ask me anything. | |
| </h1> | |
| </div> | |
| <div class="w-full max-w-2xl mx-auto mt-8 text-left"> | |
| <h2 class="text-2xl font-bold mb-4">Roteiro</h2> | |
| <ol class="list-decimal pl-6 space-y-2"> | |
| <li>Introdução (aplicações e importância do óleo)</li> | |
| <li>Composição química e propriedades</li> | |
| <li>Metodologia de caracterização</li> | |
| <li>Resultados físico-químicos</li> | |
| <li>Estabilidade térmica e oxidativa</li> | |
| <li>Conclusões e aplicações</li> | |
| </ol> | |
| </div> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=diasfernanda15/slide-andiroba" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> | |