Skip to content

Commit 28eb451

Browse files
FloMaskineFloMaskine
authored
Create index.html
1 parent 72e40fa commit 28eb451

File tree

1 file changed

+256
-0
lines changed

1 file changed

+256
-0
lines changed

‎index.html‎

Lines changed: 256 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,256 @@
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>Repositório Terminal</title>
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
10+
11+
<style>
12+
/* CSS para a estética de terminal */
13+
:root {
14+
--background-color: #0c0c0c;
15+
--text-color: #00ff41;
16+
--link-color: #00ff41;
17+
--button-bg: #1e1e1e;
18+
--button-border: #00ff41;
19+
--button-hover-bg: #00ff41;
20+
--button-hover-color: #0c0c0c;
21+
}
22+
23+
body {
24+
background-color: var(--background-color);
25+
color: var(--text-color);
26+
font-family: 'VT323', monospace;
27+
font-size: 1.2rem;
28+
line-height: 1.4;
29+
margin: 0;
30+
padding: 2rem;
31+
}
32+
33+
#terminal {
34+
border: 2px solid var(--text-color);
35+
padding: 1rem;
36+
min-height: 80vh;
37+
box-shadow: 0 0 15px rgba(0, 255, 65, 0.4);
38+
position: relative;
39+
}
40+
41+
#output {
42+
white-space: pre-wrap;
43+
word-wrap: break-word;
44+
}
45+
46+
.prompt {
47+
color: var(--text-color);
48+
}
49+
50+
.cursor {
51+
display: inline-block;
52+
width: 10px;
53+
height: 1.5rem;
54+
background-color: var(--text-color);
55+
animation: blink 1s step-end infinite;
56+
vertical-align: middle;
57+
margin-left: 5px;
58+
}
59+
60+
@keyframes blink {
61+
from, to {
62+
background-color: transparent;
63+
}
64+
50% {
65+
background-color: var(--text-color);
66+
}
67+
}
68+
69+
table {
70+
width: 100%;
71+
border-collapse: collapse;
72+
margin-top: 1rem;
73+
}
74+
75+
th, td {
76+
padding: 8px 4px;
77+
text-align: left;
78+
border-bottom: 1px dashed rgba(0, 255, 65, 0.3);
79+
}
80+
81+
th {
82+
font-weight: bold;
83+
}
84+
85+
td.file-size {
86+
text-align: right;
87+
padding-right: 15px;
88+
}
89+
90+
.download-button {
91+
background-color: var(--button-bg);
92+
color: var(--link-color);
93+
border: 1px solid var(--button-border);
94+
padding: 5px 10px;
95+
text-decoration: none;
96+
font-family: 'VT323', monospace;
97+
font-size: 1rem;
98+
cursor: pointer;
99+
transition: background-color 0.3s, color 0.3s;
100+
}
101+
102+
.download-button:hover {
103+
background-color: var(--button-hover-bg);
104+
color: var(--button-hover-color);
105+
}
106+
107+
a {
108+
color: var(--link-color);
109+
text-decoration: none;
110+
}
111+
112+
a:hover {
113+
text-decoration: underline;
114+
}
115+
</style>
116+
</head>
117+
<body>
118+
119+
<div id="terminal">
120+
<div id="output"></div>
121+
<span class="prompt">></span><span class="cursor"></span>
122+
</div>
123+
124+
<script>
125+
// JavaScript para buscar e exibir os arquivos do GitHub
126+
document.addEventListener('DOMContentLoaded', () => {
127+
128+
// ===================================================================
129+
// CONFIGURAÇÃO: Altere os valores abaixo com seu usuário e repositório
130+
// ===================================================================
131+
const githubUsername = 'FloMaskine'; // <- SEU NOME DE USUÁRIO DO GITHUB
132+
const githubRepo = 'flomaskine.github.io'; // <- NOME DO SEU REPOSITÓRIO
133+
// ===================================================================
134+
135+
const outputElement = document.getElementById('output');
136+
const repoUrl = `https://github.com/${githubUsername}/${githubRepo}`;
137+
const apiUrl = `https://api.github.com/repos/${githubUsername}/${githubRepo}/contents`;
138+
139+
const welcomeMessage = [
140+
`Iniciando sistema...`,
141+
`Conectando a api.github.com... Conexão estabelecida.`,
142+
`Repositório alvo: ${githubUsername}/${githubRepo}`,
143+
`URL do Repositório: <a href="${repoUrl}" target="_blank">${repoUrl}</a>`,
144+
`Executando comando: 'ls -l'`,
145+
`-----------------------------------------------------------------`
146+
];
147+
148+
// Função para "digitar" o texto inicial
149+
async function typeWelcomeMessage() {
150+
for (let i = 0; i < welcomeMessage.length; i++) {
151+
await typeLine(welcomeMessage[i]);
152+
}
153+
fetchRepoFiles();
154+
}
155+
156+
function typeLine(line) {
157+
return new Promise(resolve => {
158+
outputElement.innerHTML += `<span class="prompt">></span> ${line}\n`;
159+
setTimeout(resolve, 100); // Atraso entre as linhas
160+
});
161+
}
162+
163+
// Função para buscar e listar os arquivos
164+
async function fetchRepoFiles() {
165+
try {
166+
const response = await fetch(apiUrl);
167+
if (!response.ok) {
168+
throw new Error(`Erro na rede: ${response.status} - ${response.statusText}. Verifique o nome do usuário e do repositório.`);
169+
}
170+
const files = await response.json();
171+
172+
displayFiles(files);
173+
174+
} catch (error) {
175+
console.error('Erro ao buscar arquivos do repositório:', error);
176+
outputElement.innerHTML += `\n<span class="prompt">></span> <span style="color: #ff4d4d;">Erro: ${error.message}</span>\n`;
177+
}
178+
}
179+
180+
// Função para formatar o tamanho do arquivo
181+
function formatSize(bytes) {
182+
if (bytes === 0) return '0 Bytes';
183+
const k = 1024;
184+
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
185+
const i = Math.floor(Math.log(bytes) / Math.log(k));
186+
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
187+
}
188+
189+
// Função para buscar a data da última modificação
190+
async function getLastModifiedDate(filePath) {
191+
try {
192+
const commitApiUrl = `https://api.github.com/repos/${githubUsername}/${githubRepo}/commits?path=${encodeURIComponent(filePath)}&page=1&per_page=1`;
193+
const response = await fetch(commitApiUrl);
194+
if (!response.ok) {
195+
return 'N/A';
196+
}
197+
const commits = await response.json();
198+
if (commits.length > 0) {
199+
const date = new Date(commits[0].commit.author.date);
200+
return date.toLocaleDateString('pt-BR', { year: 'numeric', month: 'short', day: 'numeric' });
201+
}
202+
return 'N/A';
203+
} catch (error) {
204+
console.error(`Erro ao buscar data para ${filePath}:`, error);
205+
return 'N/A';
206+
}
207+
}
208+
209+
// Função para exibir a lista de arquivos
210+
async function displayFiles(files) {
211+
const filesOnly = files.filter(file => file.type === 'file');
212+
213+
let tableHTML = `
214+
<table>
215+
<thead>
216+
<tr>
217+
<th>Nome do Arquivo</th>
218+
<th>Última Modificação</th>
219+
<th class="file-size">Tamanho</th>
220+
<th>Ação</th>
221+
</tr>
222+
</thead>
223+
<tbody>
224+
`;
225+
outputElement.innerHTML += tableHTML;
226+
227+
const tableBody = document.createElement('tbody');
228+
229+
for (const file of filesOnly) {
230+
const date = await getLastModifiedDate(file.path);
231+
const row = document.createElement('tr');
232+
233+
row.innerHTML = `
234+
<td>${file.name}</td>
235+
<td>${date}</td>
236+
<td class="file-size">${formatSize(file.size)}</td>
237+
<td><a href="${file.download_url}" class="download-button" download>Download</a></td>
238+
`;
239+
tableBody.appendChild(row);
240+
}
241+
242+
outputElement.querySelector('table').appendChild(tableBody);
243+
outputElement.innerHTML += `
244+
</tbody>
245+
</table>
246+
\n<span class="prompt">></span> Fim da listagem.\n
247+
`;
248+
}
249+
250+
// Inicia o processo
251+
typeWelcomeMessage();
252+
});
253+
</script>
254+
255+
</body>
256+
</html>

0 commit comments

Comments
 (0)