fablecraze.github.io/index.html at main · FableCraze/fablecraze.github.io · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Valberlimabr | Download de Programas</title>
    <meta name="description" content="">
    <meta name="robots" content="INDEX,FOLLOW">
    <meta name="revisit-after" content="1 Day">
       <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f4f4f4;
        }
        h1 {
            color: #333;
        }
        .categoria {
            margin-top: 5px;
            padding-top: 10px;
			padding-bottom: 10px;
			width: 100%;
        }
        .programa {
            margin: 5px 0;
            font-size: 16px;
        }
        .programa a {
            text-decoration: none;
            color: #0066cc;
        }
        .programa a:hover {
            text-decoration: underline;
        }
    </style>
<style>
BODY {
  text-align:left;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:10pt;
  color:#000000;
  background-color:#FFFFFF;
  margin-left:15px;
  margin-right:15px;
  margin-top:15px;
  margin-bottom:15px;
}

TABLE {
  text-align:left;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:10pt;
  color:#000000;
  background-color:#FFFFFF;
}

.title, h1 {
  font-size:18pt;
  color:#000000;
}

.style6 {
  color: #FFFFFF;
  font-weight: bold;
}

.green-background:hover {
  background-color: FFFFCC;
}
</style>
</head>
<body>
<table width="68%" border=0 align="center" cellpadding=0 cellspacing=0>
<tr><td width="70%" valign=top><p>&nbsp;</p>
  <p><span style="color: black; font-family: helvetica, impact, sans-serif; background-color: #FFFFCC; font-size: 13pt; font-weight: bold"><strong>Bem-vindo(a) a minha página do GitHub!</strong></span></p>
  <p>Sou <strong>@Valberlimabr</strong>, um desenvolvedor apaixonado por tecnologia e inovação. Este repositório é uma coleção de projetos, ideias e experimentos que refletem minha jornada no mundo da programação e desenvolvimento.</p>
  <br><p><span style="color: black; font-family: helvetica, impact, sans-serif; background-color: #FFFFCC; font-size: 13pt; font-weight: bold"><strong>O que você vai encontrar aqui:</strong></span></p>
  <p><li>Projetos Open Source: Contribuições para a comunidade e soluções criativas para problemas reais.</li>
    <li>Ferramentas e Scripts: Automação, utilitários e scripts para facilitar tarefas do dia a dia.</li>
    <li>Explorações Pessoais: Protótipos, provas de conceito e aprendizado contínuo.</li>
    <li>Tutoriais e Exemplos: Compartilhamento de conhecimento para ajudar outros desenvolvedores.</li></p>
  <br>

  <td valign=top><p><br />
</p>
  <div style="overflow: auto; width: 370px; height: 390px;">
<div id="conteudo"></div>
  </div></td>
</tr></table>
    <script>
        fetch('index.json')
            .then(response => response.json())
            .then(data => {
                const conteudo = document.getElementById('conteudo');

                // Iterar sobre as categorias e gerar o conteúdo
                data.categorias.forEach(categoria => {
                    // Criar a tabela e título da categoria
                    const categoriaDiv = document.createElement('div');
                    categoriaDiv.classList.add('categoria');

                    const tabela = document.createElement('table');
                    const tr = document.createElement('tr');
                    const td = document.createElement('td');
                    td.setAttribute('bgcolor', '#0066CC');
					td.setAttribute('width', '1%');
					td.setAttribute('style', 'text-align: center; padding: 3px;');


                    const span = document.createElement('span');
                    span.classList.add('style6');
                    span.textContent = categoria.nome;
                    td.appendChild(span);

                    tr.appendChild(td);
                    tabela.appendChild(tr);
                    categoriaDiv.appendChild(tabela);

                    // Criar a lista de programas
                    const ul = document.createElement('ul');

                    categoria.programas.forEach(programa => {
                        const li = document.createElement('li');
                        const a = document.createElement('a');
                        a.href = programa.link;
                        a.title = programa.titulo;
                        a.textContent = programa.nome;
                        li.appendChild(a);
                        ul.appendChild(li);
                    });

                    categoriaDiv.appendChild(ul);
                    conteudo.appendChild(categoriaDiv);
                });
            })
            .catch(error => console.error('Erro ao carregar o arquivo JSON:', error));
    </script>
<table width="67%" height="41" border="0" align="center" cellpadding="0" cellspacing="0" id="table4">
  <tbody>
    <tr>
      <td width="89%" height="41" valign="top"><p style="text-align: center;"><font color="#808080" size="1">Esta página é melhor visualizada com uma resolução de tela de 1920x1080 usando o Google Chrome 131.x ou superior.<font size="1"><br>
          <font color="#808080" size="1">Copyright © 2024 Valberlimabr - Todas as outras marcas registradas são propriedade de seus respectivos donos.</font>
		  <a href="terms.html">Terms of Use</a> | <a href="safety_policy.html">Safety Policy</a><br>
      </font></font></p></td>
    </tr>
  </tbody>
</table>
</body>
</html>