Skip to content

Commit a5f4905

Browse files
Web4applicationWeb4application
authored
Create defaults.html
1 parent ad15417 commit a5f4905

1 file changed

Lines changed: 138 additions & 0 deletions

File tree

‎_layouts/defaults.html‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Web4application | Project Hub</title>
7+
<style>
8+
/* 1. CORE LAYOUT (The Shell) */
9+
:root {
10+
--bg: #0f172a;
11+
--card-bg: #1e293b;
12+
--accent: #38bdf8;
13+
--text: #f1f5f9;
14+
}
15+
16+
body {
17+
background: var(--bg);
18+
color: var(--text);
19+
font-family: 'Inter', sans-serif;
20+
margin: 0;
21+
padding: 2rem;
22+
}
23+
24+
/* 2. THE GRID (Unique Layouts) */
25+
#project-grid {
26+
display: grid;
27+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
28+
gap: 2rem;
29+
max-width: 1200px;
30+
margin: 0 auto;
31+
}
32+
33+
/* 3. UNIQUE COMPONENT STYLES */
34+
.project-card {
35+
background: var(--card-bg);
36+
padding: 1.5rem;
37+
border-radius: 12px;
38+
border: 1px solid #334155;
39+
transition: transform 0.3s ease, border-color 0.3s ease;
40+
display: flex;
41+
flex-direction: column;
42+
justify-content: space-between;
43+
}
44+
45+
/* Automatic "Unique Layout" via CSS Classes */
46+
.project-card.glassmorphism {
47+
background: rgba(255, 255, 255, 0.1);
48+
backdrop-filter: blur(10px);
49+
border: 1px solid rgba(255, 255, 255, 0.2);
50+
}
51+
52+
.project-card.terminal-dark {
53+
background: #000;
54+
border-left: 4px solid #10b981;
55+
font-family: 'Courier New', monospace;
56+
}
57+
58+
.project-card:hover {
59+
transform: translateY(-5px);
60+
border-color: var(--accent);
61+
}
62+
63+
.btn {
64+
display: inline-block;
65+
margin-top: 1rem;
66+
padding: 0.5rem 1rem;
67+
background: var(--accent);
68+
color: #000;
69+
text-decoration: none;
70+
border-radius: 6px;
71+
font-weight: bold;
72+
text-align: center;
73+
}
74+
75+
.tags { font-size: 0.8rem; color: #94a3b8; margin: 10px 0; }
76+
.tags span { margin-right: 8px; font-style: italic; }
77+
</style>
78+
</head>
79+
<body>
80+
81+
<header style="text-align: center; margin-bottom: 4rem;">
82+
<h1>Web4application</h1>
83+
<p>Automated Delivery Hub for My High-Tech Projects</p>
84+
</header>
85+
86+
<!-- The Stage where projects appear -->
87+
<div id="project-grid">
88+
<p>Loading projects from GitHub...</p>
89+
</div>
90+
91+
<script>
92+
const GITHUB_USERNAME = 'Web4application';
93+
94+
async function buildProjectHub() {
95+
try {
96+
const response = await fetch(`https://api.github.com{GITHUB_USERNAME}/repos?sort=updated`);
97+
const repos = await response.json();
98+
const container = document.getElementById('project-grid');
99+
container.innerHTML = ''; // Clear loading text
100+
101+
repos.forEach(repo => {
102+
// Skip the landing site repo itself
103+
if (repo.name.toLowerCase() !== `${GITHUB_USERNAME}.github.io`.toLowerCase()) {
104+
105+
const card = document.createElement('div');
106+
107+
// Apply Unique Layout based on GitHub Topics
108+
// (e.g., if you tag a repo 'glassmorphism' on GitHub)
109+
const layoutClass = repo.topics.includes('glassmorphism') ? 'glassmorphism' :
110+
repo.topics.includes('terminal') ? 'terminal-dark' : '';
111+
112+
card.className = `project-card ${layoutClass}`;
113+
114+
card.innerHTML = `
115+
<div>
116+
<h3>${repo.name}</h3>
117+
<p>${repo.description || 'No description provided.'}</p>
118+
<div class="tags">
119+
${repo.topics.map(t => `<span>#${t}</span>`).join('')}
120+
</div>
121+
</div>
122+
<div class="actions">
123+
<a href="${repo.html_url}" target="_blank" style="color: #94a3b8;">Code</a>
124+
${repo.homepage ? `<a href="${repo.homepage}" class="btn">Launch App</a>` : ''}
125+
</div>
126+
`;
127+
container.appendChild(card);
128+
}
129+
});
130+
} catch (error) {
131+
console.error("Error fetching projects:", error);
132+
}
133+
}
134+
135+
buildProjectHub();
136+
</script>
137+
</body>
138+
</html>

0 commit comments

Comments
 (0)