Skip to content

Commit 70ccebd

Browse files
tutosrivetutosrive
committed
First version page, initial version loads repos and followers
1 parent bbcea17 commit 70ccebd

File tree

6 files changed

+157
-38
lines changed

6 files changed

+157
-38
lines changed

‎.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.env
2+
todo
3+
todo.md
4+
# Logs
5+
logs

‎.prettierrc‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"printWidth": 300,
3+
"semi": true,
4+
"tabWidth": 4,
5+
"singleQuote": true,
6+
"objectWrap": "collapse"
7+
}

‎index.html‎

Lines changed: 51 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,53 @@
11
<!DOCTYPE html>
2-
<html lang="es">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Dev2Forge</title>
7-
<style>
8-
body {
9-
font-family: Arial, sans-serif;
10-
text-align: center;
11-
margin: 50px;
12-
background-color: #f4f4f4;
13-
}
14-
h1 {
15-
color: #333;
16-
}
17-
p {
18-
font-size: 18px;
19-
color: #666;
20-
}
21-
a.button {
22-
display: inline-block;
23-
padding: 10px 20px;
24-
margin-top: 20px;
25-
background-color: #007bff;
26-
color: #fff;
27-
text-decoration: none;
28-
border-radius: 5px;
29-
}
30-
a.button:hover {
31-
background-color: #0056b3;
32-
}
33-
</style>
34-
</head>
35-
<body>
36-
<h1>Bienvenido a Dev2Forge</h1>
37-
<p>Explora nuestros proyectos, herramientas y recursos para desarrolladores.</p>
38-
<a class="button" href="https://github.com/dev2forge">Visitar GitHub</a>
39-
</body>
2+
<html lang="en" class="dark">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Dev2Forge Repos</title>
7+
<script src="https://cdn.tailwindcss.com"></script>
8+
<script type="module" src="./src/assets/js/main.js" defer></script>
9+
<link rel="stylesheet" href="./src/assets/css/index.css" />
10+
<style></style>
11+
</head>
12+
<body class="bg-white dark:bg-gray-900 dark:text-gray-100 text-gray-800 transition-colors duration-300 min-h-screen flex flex-col dark">
13+
<!-- Header -->
14+
<header class="w-full flex justify-between items-center p-6 flex-shrink-0">
15+
<div class="w-full text-center">
16+
<h1 class="text-3xl font-bold inline">Dev2Forge</h1>
17+
<sub class="text-sm inline"><small>org</small></sub>
18+
</div>
19+
<!-- Feature: Add "Toggle Theme" -->
20+
</header>
21+
22+
<!-- Main Content -->
23+
<main class="flex-1 flex flex-col items-center w-full px-6 pb-12">
24+
<!-- Description page -->
25+
<section id="description" class="my-4"></section>
26+
27+
<!-- Repos -->
28+
<section id="carrusel-repos" class="h-full grid grid-rows-1 auto-cols-max grid-flow-col gap-4 overflow-x-auto overflow-y-hidden snap-x snap-mandatory w-full py-4">
29+
<!-- Repos will be injected here -->
30+
</section>
31+
32+
<hr class="border-gray-800 border-2 my-2 w-full" />
33+
34+
<!-- Followers Carousel -->
35+
<section id="followers" class="w-full flex flex-col items-center mx-auto mt-2">
36+
<h2 class="block font-bold mb-5">Followers</h2>
37+
<div class="w-full flex justify-center">
38+
<div class="flex items-center justify-center w-full max-w-xs">
39+
<!-- Carousel container: Only profile pictures -->
40+
<div id="followers-container" class="flex mx-auto overflow-x-auto gap-2 snap-x snap-mandatory py-1 px-1 scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-700 w-full justify-center">
41+
<!-- Followers will be injected here -->
42+
</div>
43+
</div>
44+
</div>
45+
</section>
46+
</main>
47+
48+
<!-- Footer -->
49+
<footer class="w-full mt-0 text-center flex-shrink-0 fixed bottom-0 left-0 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 py-2 z-10">
50+
<p class="text-sm">© 2025 Dev2Forge. All rights reserved.</p>
51+
</footer>
52+
</body>
4053
</html>

‎src/assets/css/index.css‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
#carrusel-repos::-webkit-scrollbar {
2+
display: none;
3+
}
4+
#carrusel-repos {
5+
scrollbar-width: none;
6+
-ms-overflow-style: none;
7+
}
8+
.no-scrollbar::-webkit-scrollbar {
9+
display: none;
10+
}
11+
.no-scrollbar {
12+
scrollbar-width: none;
13+
-ms-overflow-style: none;
14+
}
15+
.btn-repo-link {
16+
width: 100%;
17+
max-width: 100%;
18+
background-color: #00081f98;
19+
border-radius: 20px;
20+
padding: 5px 10px;
21+
color: #003cff;
22+
text-decoration: none;
23+
box-shadow: 10px 4px 8px rgba(0, 0, 0, 0.733);
24+
transition: all 0.3s linear;
25+
display: inline-block;
26+
text-align: center;
27+
}
28+
.btn-repo-link:hover {
29+
background-color: #00081f;
30+
color: #fff;
31+
padding: 5px 40px;
32+
transition: all 0.3s linear;
33+
box-shadow: 20px 4px 8px rgba(0, 0, 0, 0.2);
34+
}

‎src/assets/js/main.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
document.addEventListener('DOMContentLoaded', () => {
2+
loadDescription();
3+
loadRepos();
4+
loadFollowers();
5+
});
6+
7+
async function loadDescription() {
8+
const req = await fetch('https://api.github.com/users/dev2forge');
9+
const res = await req.json();
10+
const description = document.querySelector('#description');
11+
description.textContent = res.bio || 'No description available';
12+
}
13+
14+
/**
15+
* Load repositories from GitHub API and display them in a grid.
16+
* Each repository is displayed in a card format with its name, description, and a link to the repo.
17+
*/
18+
async function loadRepos() {
19+
const container = document.querySelector('#carrusel-repos');
20+
try {
21+
const res = await fetch('https://api.github.com/orgs/dev2forge/repos');
22+
const repos = await res.json();
23+
repos.forEach((repo) => {
24+
const card = document.createElement('div');
25+
card.className = 'flex flex-col justify-between items-center w-64 h-64 bg-gray-100 dark:bg-gray-800 p-4 rounded shadow hover:shadow-lg transition snap-start row-span-1';
26+
card.innerHTML = `
27+
<h2 class="text-xl font-semibold text-center w-full mb-2">${repo.name}</h2>
28+
<div class="flex-1 w-full overflow-y-auto mb-2 no-scrollbar">
29+
<p class="text-sm text-gray-600 dark:text-gray-300 text-center break-words">${repo.description || 'No description'}</p>
30+
</div>
31+
<div class="w-full flex justify-center mt-auto">
32+
<a href="${repo.html_url}" target="_blank" class="btn-repo-link inline-block text-center w-full">View Repo</a>
33+
</div>
34+
`;
35+
container.appendChild(card);
36+
});
37+
} catch (e) {
38+
container.innerHTML = '<p class="text-red-500">Failed to load repositories.</p>';
39+
}
40+
}
41+
42+
/**
43+
* Load followers from GitHub API and display them as a horizontal avatar carousel.
44+
* Only the profile pictures are shown, as per the new design.
45+
*/
46+
async function loadFollowers() {
47+
const req = await fetch('https://api.github.com/users/Dev2Forge/followers');
48+
const response = await req.json();
49+
const container = document.querySelector('#followers-container');
50+
response.forEach((follower) => {
51+
const img = document.createElement('img');
52+
img.src = follower.avatar_url;
53+
img.alt = follower.login;
54+
img.title = follower.login;
55+
img.className = 'w-20 h-20 rounded-full object-cover snap-center border-2 border-gray-300 dark:border-gray-700 cursor-pointer transition hover:scale-110';
56+
img.onclick = () => window.open(follower.html_url, '_blank');
57+
container.appendChild(img);
58+
});
59+
}

‎zohoverify/verifyforzoho.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
02390592

0 commit comments

Comments
 (0)