Hugging Face's logo

Spaces:
diasfernanda15
/
slide-andiroba
Running

App Files Community
slide-andiroba
File size: 5,465 Bytes 
90ca787
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
70d9666
90ca787
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
70d9666
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
 

    <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>

"<!DOCTYPE html>
<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>