├── LICENSE
├── README.md
├── bg-desktop.webp
├── graficos
    ├── common.js
    ├── informacoesGlobais.js
    ├── quantidadeUsuarios.js
    └── scripts.js
├── index.html
└── style.css


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 Rafael Assis Santos
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Ciencia de dados criando graficos dinamicos com JavaScript
2 | @rasinformática
3 | 
4 | 
5 | https://www.youtube.com/watch?v=ZNNDuNZhkkc&t=11s 
6 | 


--------------------------------------------------------------------------------
/bg-desktop.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/professor-rafael/Ciencia-de-dados-criando-graficos-dinamicos-com-JavaScript/84db615c722ee6a3981263630571e3df06d8f079/bg-desktop.webp


--------------------------------------------------------------------------------
/graficos/common.js:
--------------------------------------------------------------------------------
 1 | const getCSS = (variavel) => {
 2 |     const bodyStyles = getComputedStyle(document.body)
 3 |     return bodyStyles.getPropertyValue(variavel)
 4 | }
 5 | 
 6 | const tickConfig = {
 7 |     family: getCSS('--font'),
 8 |     size: 16,
 9 |     color: getCSS('--primary-color')
10 | }
11 | 
12 | export {getCSS, tickConfig}
13 | 


--------------------------------------------------------------------------------
/graficos/informacoesGlobais.js:
--------------------------------------------------------------------------------
 1 | const url = 'https://raw.githubusercontent.com/guilhermeonrails/api/main/dados-globais.json'
 2 | 
 3 | async function vizualizarInformacoesGlobais() {
 4 |     const res = await fetch(url)
 5 |     const dados = await res.json()
 6 |     const pessoasConectadas = (dados.total_pessoas_conectadas / 1e9)
 7 |     const pessoasNoMundo = (dados.total_pessoas_mundo / 1e9)
 8 |     const horas = parseInt(dados.tempo_medio)
 9 |     const minutos = Math.round((dados.tempo_medio - horas) * 100)
10 |     const porcentagemConectada = ((pessoasConectadas / pessoasNoMundo ) * 100).toFixed(2)
11 | 
12 |     const paragrafo = document.createElement('p')
13 |     paragrafo.classList.add('graficos-container__texto')
14 |     paragrafo.innerHTML = `Você sabia que o mundo tem <span>${pessoasNoMundo} bilhões</span> de pessoas e que aproximadamente <span>${pessoasConectadas} bilhões</span> estão conectadas em alguma rede social e passam em média <span>${horas} horas</span> e <span>${minutos} minutos</span> conectadas.<br>Isso significa que aproximadamente <span>${porcentagemConectada}%</span> de pessoas estão conectadas em alguma rede social.`
15 | 
16 |     const container = document.getElementById('graficos-container')
17 |     container.appendChild(paragrafo)
18 | }
19 | 
20 | vizualizarInformacoesGlobais()
21 | 


--------------------------------------------------------------------------------
/graficos/quantidadeUsuarios.js:
--------------------------------------------------------------------------------
 1 | import { getCSS, tickConfig } from "./common.js"
 2 | 
 3 | async function quantidadeUsuariosPorRede() {
 4 |     const url = 'https://raw.githubusercontent.com/guilhermeonrails/api/main/numero-usuarios.json'
 5 |     const res = await fetch(url)
 6 |     const dados = await res.json()
 7 |     const nomeDasRedes = Object.keys(dados)
 8 |     const quantidadeDeUsuarios = Object.values(dados)
 9 | 
10 |     const data = [
11 |         {
12 |             x: nomeDasRedes, 
13 |             y: quantidadeDeUsuarios, 
14 |             type: 'bar',
15 |             marker: {
16 |                 color: getCSS('--primary-color')
17 |             }
18 |         }
19 |     ]
20 | 
21 |     const laytout = {
22 |         plot_bgcolor: getCSS('--bg-color'),
23 |         paper_bgcolor: getCSS('--bg-color'),
24 |         title: {
25 |             text: 'Redes sociais com mais usuários',
26 |             x: 0,
27 |             font: {
28 |                 color: getCSS('--primary-color'),
29 |                 size: 30,
30 |                 font: getCSS('--font')
31 |             }
32 |         },
33 |         xaxis: {
34 |             tickfont: tickConfig,
35 |             title: {
36 |                 text: 'Nome das redes',
37 |                 font: {
38 |                     color: getCSS('--secondary-color')
39 |                 }
40 |             }
41 |         },
42 |         yaxis: {
43 |             tickfont: tickConfig,
44 |             title: {
45 |                 text: 'Bilhões de usuários ativos',
46 |                 font: {
47 |                     color: getCSS('--secondary-color')
48 |                 }
49 |             }
50 |         }
51 |     }
52 | 
53 |     const grafico = document.createElement('div')
54 |     grafico.className = 'grafico'
55 |     document.getElementById('graficos-container').appendChild(grafico)
56 |     Plotly.newPlot(grafico, data, laytout)
57 | }
58 | 
59 | quantidadeUsuariosPorRede()


--------------------------------------------------------------------------------
/graficos/scripts.js:
--------------------------------------------------------------------------------
 1 | 
 2 | const selecaoVoz = document.querySelector("#selecao-voz");
 3 | const entradaTexto = document.querySelector("#entrada-de-texto");
 4 | const botaoOuvir = document.querySelector("#ouvir-btn");
 5 | const botoaBaixarTexto = document.querySelector("#baixar-texto-btn");
 6 | const uplaodArquivo = document.querySelector("#upload-arquivo");
 7 | 
 8 | 
 9 | const fala = new SpeechSynthesisUtterance();
10 | 
11 | let vozesDisponiveis = [];
12 | 
13 | 
14 | const atualizarValores = () => {
15 |   vozesDisponiveis = window.speechSynthesis.getVoices();
16 | 
17 |   fala.voice = vozesDisponiveis[0];
18 | 
19 |   console.log(vozesDisponiveis);
20 | 
21 |   vozesDisponiveis.forEach((voz, index) => {
22 |     const opcao = document.createElement("option");
23 |     opcao.value = index;
24 |     opcao.textContent = voz.name;
25 |     selecaoVoz.appendChild(opcao);
26 |   });
27 | };
28 | 
29 | window.speechSynthesis.onvoiceschanged = atualizarValores;
30 | 
31 | 
32 | selecaoVoz.addEventListener("change", () => {
33 |   fala.voice = vozesDisponiveis[selecaoVoz.value];
34 | });
35 | 
36 | botaoOuvir.addEventListener("click", () => {
37 |   fala.text = entradaTexto.value;
38 | 
39 |   window.speechSynthesis.speak(fala);
40 | });
41 | 
42 | 
43 | botoaBaixarTexto.addEventListener("click", () => {
44 |   const texto = entradaTexto.value;
45 | 
46 |   const blob = new Blob([texto], { type: "text/plain" });
47 | 
48 |   const url = URL.createObjectURL(blob);
49 | 
50 |   const a = document.createElement("a");
51 | 
52 |   a.href = url;
53 | 
54 |   a.download = "texto.txt";
55 | 
56 |   a.click();
57 | 
58 |   URL.revokeObjectURL(url);
59 | });
60 | 
61 | 
62 | uplaodArquivo.addEventListener("change", (event) => {
63 |   const arquivo = event.target.files[0];
64 | 
65 |   if (arquivo) {
66 |     const leitor = new FileReader();
67 | 
68 |     leitor.onload = (e) => {
69 |       entradaTexto.value = e.target.result;
70 |     };
71 | 
72 |     leitor.readAsText(arquivo);
73 |   }
74 | });
75 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="pt-br">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Redes Sociais</title>
  7 |     <link rel="stylesheet" href="style.css">
  8 |     <script src="https://cdn.plot.ly/plotly-2.27.0.min.js" charset="utf-8"></script>
  9 | </head>
 10 | <body>
 11 |     <header>
 12 |         <h1>Relatório das redes sociais</h1>
 13 |         <nav>
 14 |             <a href="index.html">Meu mundo 💻</a>
 15 |             <a href="#">Minha escola 💻</a>
 16 |         </nav>
 17 |     </header>
 18 |     <main class="graficos-section">
 19 |         <section id="graficos-container" class="graficos-container">
 20 |           
 21 |         </section>
 22 |     </main>
 23 |     <footer>
 24 |         <p>@rasinformática </p>
 25 |     </footer>
 26 |     <script type="module" src="graficos/common.js"></script>
 27 |     <script type="module" src="graficos/informacoesGlobais.js"></script>
 28 |     <script type="module" src="graficos/quantidadeUsuarios.js"></script>
 29 |     <script src="graficos/scripts.js" defer></script>
 30 |    <br>
 31 |    <br>
 32 |      <div class="container">
 33 |     <h1> <span>Conversor de Texto para Fala</span></h1>
 34 |     <p>Digite um texto ou envie algum arquivo para ser lido:</p>
 35 |     <div id="entrada-de-conteudo">
 36 |       <textarea
 37 |         placeholder="Digite alguma coisa..."
 38 |         id="entrada-de-texto"
 39 |       ></textarea>
 40 |       <div>
 41 |         <label for="upload-arquivo" id="arquivo-label">Enviar arquivo</label>
 42 |         <input type="file" id="upload-arquivo" accept=".txt" />
 43 |       </div>
 44 |     </div>
 45 |     <div class="acoes">
 46 |       <div class="acao-box">
 47 |         <p>Selecione a voz:</p>
 48 |         <select id="selecao-voz"></select>
 49 |       </div>
 50 |       <div class="acao-box">
 51 |         <p>Clique para ouvir:</p>
 52 |         <button id="ouvir-btn">Ouvir</button>
 53 |       </div>
 54 |       <div class="acao-box">
 55 |         <p>Obtenha um arquivo do conteúdo:</p>
 56 |         <button id="baixar-texto-btn">Baixar Texto</button>
 57 |       </div>
 58 |     </div>
 59 |   </div>
 60 |     <ul class="example-2">
 61 |       <li class="icon-content">
 62 |         <a
 63 |           href="https://linkedin.com/"
 64 |           aria-label="LinkedIn"
 65 |           data-social="linkedin"
 66 |         >
 67 |           <div class="filled"></div>
 68 |           <svg
 69 |             xmlns="http://www.w3.org/2000/svg"
 70 |             width="16"
 71 |             height="16"
 72 |             fill="currentColor"
 73 |             class="bi bi-linkedin"
 74 |             viewBox="0 0 16 16"
 75 |             xml:space="preserve"
 76 |           >
 77 |             <path
 78 |               d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z"
 79 |               fill="currentColor"
 80 |             ></path>
 81 |           </svg>
 82 |         </a>
 83 |         <div class="tooltip">LinkedIn</div>
 84 |       </li>
 85 |       <li class="icon-content">
 86 |         <a href="https://www.github.com/" aria-label="GitHub" data-social="github">
 87 |           <div class="filled"></div>
 88 |           <svg
 89 |             xmlns="http://www.w3.org/2000/svg"
 90 |             width="16"
 91 |             height="16"
 92 |             fill="currentColor"
 93 |             class="bi bi-github"
 94 |             viewBox="0 0 16 16"
 95 |             xml:space="preserve"
 96 |           >
 97 |             <path
 98 |               d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"
 99 |               fill="currentColor"
100 |             ></path>
101 |           </svg>
102 |         </a>
103 |         <div class="tooltip">GitHub</div>
104 |       </li>
105 |       <li class="icon-content">
106 |         <a
107 |           href="https://www.instagram.com/"
108 |           aria-label="Instagram"
109 |           data-social="instagram"
110 |         >
111 |           <div class="filled"></div>
112 |           <svg
113 |             xmlns="http://www.w3.org/2000/svg"
114 |             width="16"
115 |             height="16"
116 |             fill="currentColor"
117 |             class="bi bi-instagram"
118 |             viewBox="0 0 16 16"
119 |             xml:space="preserve"
120 |           >
121 |             <path
122 |               d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334"
123 |               fill="currentColor"
124 |             ></path>
125 |           </svg>
126 |         </a>
127 |         <div class="tooltip">Instagram</div>
128 |       </li>
129 |       <li class="icon-content">
130 |         <a href="https://youtube.com/" aria-label="Youtube" data-social="youtube">
131 |           <div class="filled"></div>
132 |           <svg
133 |             xmlns="http://www.w3.org/2000/svg"
134 |             width="16"
135 |             height="16"
136 |             fill="currentColor"
137 |             class="bi bi-youtube"
138 |             viewBox="0 0 16 16"
139 |             xml:space="preserve"
140 |           >
141 |             <path
142 |               d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z"
143 |               fill="currentColor"
144 |             ></path>
145 |           </svg>
146 |         </a>
147 |         <div class="tooltip">@rasinformatica</div>
148 |       </li>
149 |     </ul>
150 |     
151 |   <br>
152 |  </body>
153 | </html>
154 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');
  2 | 
  3 | :root {
  4 |     --bg-color: black;
  5 |     --primary-color: green;
  6 |     --secondary-color: green;
  7 |     --font: American Typewriter, serif;
  8 | }
  9 | 
 10 | body {
 11 |     background-color: var(--bg-color);
 12 |     color: var(--primary-color);
 13 |     font-family: var(--font);
 14 |     height: 100vh;
 15 |     margin: 0;
 16 |     background: url('bg-desktop.webp');
 17 | }
 18 | 
 19 | header {
 20 |     background-color: var(--primary-color);
 21 |     text-align: center;
 22 |     padding: 1px;
 23 | }
 24 | 
 25 | h1 {
 26 |     font-size: 2rem;
 27 |     color: var(--bg-color);
 28 |     font-weight: 700;
 29 |     font-weight: bolder;
 30 | }
 31 | 
 32 | nav {
 33 |     display: flex;
 34 |     justify-content: center;
 35 |     font-weight: 400;
 36 |     font-weight: bolder;
 37 | }
 38 | 
 39 | nav a {
 40 |     text-decoration: none;
 41 |     color: var(--bg-color);
 42 |     margin: 0 2rem 1rem 0rem;
 43 |     font-size: 1.2rem;
 44 | }
 45 | 
 46 | nav a:hover {
 47 |     text-decoration: none;
 48 |     transform: scale(0.90);
 49 |     transition: transform 0.1s;
 50 |     font: bold;
 51 |     font-family: 22px;
 52 | }
 53 | 
 54 | .graficos-container {
 55 |     margin: 5rem;
 56 |     filter: drop-shadow(1px 1px 20px rgb(1, 13, 4));
 57 |     border-radius: 10px;
 58 | 
 59 | }
 60 | 
 61 | .grafico {
 62 |     margin-top: 3rem;
 63 |     filter: box-shadow(1px 1px 20px rgb(186, 206, 192));
 64 |     border: 8px green double;
 65 | }
 66 | 
 67 | .graficos-container__texto {
 68 |     font-size: 1.3rem;
 69 |     text-align: center;
 70 |     padding: 2rem;
 71 |     border: var(--secondary-color) solid 2px;
 72 | }
 73 | 
 74 | span {
 75 |     font-weight: bold;
 76 |     color: var(--secondary-color);
 77 | }
 78 | 
 79 | footer {
 80 |     display: flex;
 81 |     align-items: center;
 82 |     justify-content: center;
 83 |     background-color: var(--primary-color);
 84 |     color: var(--bg-color);
 85 |     width: 100%;
 86 |     height: 3rem;
 87 |     margin-top: 2rem;
 88 |     filter: drop-shadow(1px 1px 20px rgb(164, 211, 179));
 89 |     border-radius: 10px;
 90 | }
 91 | 
 92 | p {
 93 |     color: grey;
 94 |     text-decoration: none;
 95 |     font-size: larger;
 96 |     font-size: 38px;
 97 |     font-weight: bolder;
 98 | }
 99 | 
100 | 
101 | ul {
102 |     list-style: none;
103 |   }
104 |   
105 |   .example-2 {
106 |     display: flex;
107 |     justify-content: center;
108 |     align-items: center;
109 |   }
110 |   .example-2 .icon-content {
111 |     margin: 0 10px;
112 |     position: relative;
113 |   }
114 |   .example-2 .icon-content .tooltip {
115 |     position: absolute;
116 |     top: -30px;
117 |     left: 50%;
118 |     transform: translateX(-50%);
119 |     color: #390909;
120 |     padding: 6px 10px;
121 |     border-radius: 5px;
122 |     opacity: 0;
123 |     visibility: hidden;
124 |     font-size: 14px;
125 |     transition: all 0.3s ease;
126 |   }
127 |   .example-2 .icon-content:hover .tooltip {
128 |     opacity: 1;
129 |     visibility: visible;
130 |     top: -50px;
131 |   }
132 |   .example-2 .icon-content a {
133 |     position: relative;
134 |     overflow: hidden;
135 |     display: flex;
136 |     justify-content: center;
137 |     align-items: center;
138 |     width: 50px;
139 |     height: 50px;
140 |     border-radius: 50%;
141 |     color: #4d4d4d;
142 |     background-color: c29090;
143 |     transition: all 0.3s ease-in-out;
144 |   }
145 |   .example-2 .icon-content a:hover {
146 |     box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 12%);
147 |   }
148 |   .example-2 .icon-content a svg {
149 |     position: relative;
150 |     z-index: 1;
151 |     width: 30px;
152 |     height: 30px;
153 |   }
154 |   .example-2 .icon-content a:hover {
155 |     color: rgb(54, 20, 20);
156 |   }
157 |   .example-2 .icon-content a .filled {
158 |     position: absolute;
159 |     top: auto;
160 |     bottom: 0;
161 |     left: 0;
162 |     width: 100%;
163 |     height: 0;
164 |     background-color: #000;
165 |     transition: all 0.3s ease-in-out;
166 |   }
167 |   .example-2 .icon-content a:hover .filled {
168 |     height: 100%;
169 |   }
170 |   
171 |   .example-2 .icon-content a[data-social="linkedin"] .filled,
172 |   .example-2 .icon-content a[data-social="linkedin"] ~ .tooltip {
173 |     background-color: #0274b3;
174 |   }
175 |   
176 |   .example-2 .icon-content a[data-social="github"] .filled,
177 |   .example-2 .icon-content a[data-social="github"] ~ .tooltip {
178 |     background-color: #24262a;
179 |   }
180 |   .example-2 .icon-content a[data-social="instagram"] .filled,
181 |   .example-2 .icon-content a[data-social="instagram"] ~ .tooltip {
182 |     background: linear-gradient(
183 |       45deg,
184 |       #405de6,
185 |       #5b51db,
186 |       #b33ab4,
187 |       #c135b4,
188 |       #e1306c,
189 |       #fd1f1f
190 |     );
191 |   }
192 |   .example-2 .icon-content a[data-social="youtube"] .filled,
193 |   .example-2 .icon-content a[data-social="youtube"] ~ .tooltip {
194 |     background-color: #ff0000;
195 |   }
196 |   
197 | 
198 | 
199 |   .container {
200 |     width: 100%;
201 |     min-height: 100vh;
202 |     display: flex;
203 |     align-items: center;
204 |     justify-content: center;
205 |     flex-direction: column;
206 |     color: greenyellow;
207 |     text-align: center;
208 |     gap: 20px;
209 |   }
210 |   
211 |   .container h1 {
212 |     font-size: 42px;
213 |     font-weight: bold;
214 |   }
215 |   
216 |   .container h1 span {
217 |     color: greenyellow;
218 |   }
219 |   
220 |   #entrada-de-conteudo {
221 |     display: flex;
222 |     width: 80%;
223 |     gap: 20px;
224 |     align-items: center;
225 |   }
226 |   
227 |   #entrada-de-conteudo textarea {
228 |     width: 80%;
229 |     height: 150px;
230 |     border: none;
231 |     border-radius: 5px;
232 |     font-size: 16px;
233 |     outline: none;
234 |     padding: 15px;
235 |   }
236 |   
237 |   input[type="file"] {
238 |     display: none;
239 |   }
240 |   
241 |   .acoes {
242 |     display: flex;
243 |     align-items: center;
244 |     gap: 10px;
245 |     width: 80%;
246 |   }
247 |   
248 |   .acao-box {
249 |     padding: 15px;
250 |     gap: 15px;
251 |     flex: 1;
252 |   }
253 |   
254 |   .acoes select,
255 |   .acoes button,
256 |   #arquivo-label {
257 |     margin: 10px 0;
258 |     padding: 10px;
259 |     border: none;
260 |     border-radius: 5px;
261 |     font-size: 16px;
262 |     width: 50%;
263 |     font-weight: bold;
264 |     cursor: pointer;
265 |   }
266 |   
267 |   #selecao-voz {
268 |     width: 100%;
269 |   }
270 |   
271 |   .acoes button {
272 |     background-color:green;
273 |     color: black;
274 |   
275 |     transition: 0.3s;
276 |   }
277 |   
278 |   #arquivo-label {
279 |     font-size: 20px;
280 |     padding: 15px;
281 |     background-color: green;
282 |   }
283 |   
284 |   .acoes button:hover,
285 |   #arquivo-label:hover {
286 |     background-color: black;
287 |       border: double purple;
288 |   }
289 |   
290 | 


--------------------------------------------------------------------------------