-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathindex.html
More file actions
73 lines (63 loc) · 10.6 KB
/
index.html
File metadata and controls
73 lines (63 loc) · 10.6 KB
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
<!doctypehtml><html lang="id"><meta charset="UTF-8"><meta content="width=device-width,initial-scale=1"name="viewport"><title>CodeSigmax - Platform Kolaborasi Developer</title><link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"rel="stylesheet"><link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css"rel="stylesheet"><style>*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;color:#333;line-height:1.6;overflow-x:hidden}nav{position:fixed;top:0;width:100%;background:linear-gradient(135deg,#667eea 0,#764ba2 100%);padding:1rem 2rem;box-shadow:0 4px 6px rgba(0,0,0,.1);z-index:1000;display:flex;justify-content:space-between;align-items:center}.logo{color:#fff;font-size:1.5rem;font-weight:700;display:flex;align-items:center;gap:.5rem}.nav-links{display:flex;gap:2rem;list-style:none}.nav-links a{color:#fff;text-decoration:none;transition:opacity .3s}.nav-links a:hover{opacity:.8}.hero{background:linear-gradient(135deg,#667eea 0,#764ba2 100%);color:#fff;padding:150px 2rem 100px;text-align:center;min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center}.hero h1{font-size:3.5rem;margin-bottom:1rem;animation:slideDown .8s ease-out}.hero p{font-size:1.3rem;margin-bottom:2rem;max-width:600px;animation:slideUp .8s ease-out .2s both}.hero-buttons{display:flex;gap:1rem;justify-content:center;animation:slideUp .8s ease-out .4s both}.btn{padding:12px 30px;border:none;border-radius:5px;cursor:pointer;font-size:1rem;transition:all .3s;text-decoration:none;display:inline-block}.btn-primary{background:#fff;color:#667eea;font-weight:700}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(0,0,0,.2)}.btn-secondary{background:0 0;color:#fff;border:2px solid #fff}.btn-secondary:hover{background:#fff;color:#667eea;transform:translateY(-2px)}@keyframes slideDown{from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}section{padding:80px 2rem;max-width:1200px;margin:0 auto}section h2{font-size:2.5rem;margin-bottom:3rem;text-align:center;color:#333}.repos-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2rem;margin-top:2rem}.repo-card{background:#fff;border:1px solid #e0e0e0;border-radius:10px;padding:2rem;transition:all .3s;box-shadow:0 2px 8px rgba(0,0,0,.1)}.repo-card:hover{transform:translateY(-10px);box-shadow:0 12px 24px rgba(0,0,0,.15);border-color:#667eea}.repo-card h3{color:#667eea;margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem}.repo-card p{color:#666;margin-bottom:1rem;min-height:60px}.repo-stats{display:flex;gap:1rem;margin:1rem 0;font-size:.9rem;color:#999}.repo-link{display:inline-block;color:#667eea;text-decoration:none;font-weight:700;transition:all .3s;margin-top:1rem}.repo-link:hover{color:#764ba2;transform:translateX(5px)}.loading{text-align:center;padding:2rem;color:#667eea}.spinner{border:4px solid #f3f3f3;border-top:4px solid #667eea;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin:0 auto 1rem}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.error{background:#fee;border:1px solid #fcc;color:#c33;padding:1rem;border-radius:5px;text-align:center}.features{background:#f9f9f9}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}.feature-item{text-align:center;padding:2rem}.feature-icon{font-size:3rem;color:#667eea;margin-bottom:1rem}.feature-item h3{margin-bottom:.5rem;color:#333}.feature-item p{color:#666}footer{background:linear-gradient(135deg,#667eea 0,#764ba2 100%);color:#fff;padding:3rem 2rem 1rem;text-align:center}.footer-content{max-width:1200px;margin:0 auto}.footer-links{margin:2rem 0;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.footer-links a{color:#fff;text-decoration:none;transition:opacity .3s}.footer-links a:hover{opacity:.8;text-decoration:underline}.invitation-box{background:rgba(255,255,255,.1);padding:2rem;border-radius:10px;margin:2rem 0;border:2px solid rgba(255,255,255,.3)}.invitation-box h3{margin-bottom:1rem;font-size:1.3rem}.invitation-box p{margin-bottom:1rem}.btn-join{background:#fff;color:#667eea;padding:10px 25px;border-radius:5px;text-decoration:none;font-weight:700;display:inline-block;transition:all .3s}.btn-join:hover{transform:translateY(-2px);box-shadow:0 8px 16px rgba(0,0,0,.2)}.footer-bottom{border-top:1px solid rgba(255,255,255,.3);padding-top:2rem;margin-top:2rem}@media (max-width:768px){.hero h1{font-size:2rem}.hero p{font-size:1rem}.nav-links{gap:1rem}.hero-buttons{flex-direction:column}.btn{width:100%}}</style><nav><div class="logo"><i class="fas fa-code"></i> CodeSigmax</div><ul class="nav-links"><li><a href="#home">Beranda</a><li><a href="#features">Fitur</a><li><a href="#repos">Repositories</a><li><a href="#footer">Kontak</a></ul></nav><section id="home"class="hero"><h1 data-aos="fade-down">CodeSigmax</h1><p data-aos="fade-up"data-aos-delay="200">Platform kolaborasi developer modern untuk project-kdmi. Kelola repository, kolaborasi tim, dan wujudkan ide bersama.<div class="hero-buttons"data-aos="fade-up"data-aos-delay="400"><a href="https://github.com/project-kdmi"class="btn btn-primary">Lihat di GitHub</a> <a href="#repos"class="btn btn-secondary">Jelajahi Repos</a></div></section><section id="features"class="features"><h2 data-aos="fade-up">Fitur Unggulan</h2><div class="features-grid"><div class="feature-item"data-aos="zoom-in"><div class="feature-icon"><i class="fas fa-code-branch"></i></div><h3>Repository Terpusat</h3><p>Kelola semua project dalam satu tempat dengan struktur yang terorganisir dan mudah diakses.</div><div class="feature-item"data-aos="zoom-in"data-aos-delay="100"><div class="feature-icon"><i class="fas fa-users"></i></div><h3>Kolaborasi Tim</h3><p>Bekerja sama dengan developer lain secara seamless dengan tools yang modern dan powerful.</div><div class="feature-item"data-aos="zoom-in"data-aos-delay="200"><div class="feature-icon"><i class="fas fa-rocket"></i></div><h3>Deploy Cepat</h3><p>Integrasikan dengan CI/CD untuk deployment otomatis dan testing yang reliable.</div><div class="feature-item"data-aos="zoom-in"data-aos-delay="300"><div class="feature-icon"><i class="fas fa-lock"></i></div><h3>Keamanan Terjamin</h3><p>Proteksi kode dengan access control dan audit trail yang komprehensif.</div></div></section><section id="repos"><h2 data-aos="fade-up">Repositories Kami</h2><div class="repos-container"id="reposContainer"><div class="loading"><div class="spinner"></div><p>Memuat repositories...</div></div></section><footer id="footer"><div class="footer-content"><h2 data-aos="fade-up"style="margin-bottom:1rem">CodeSigmax</h2><div class="invitation-box"data-aos="fade-up"data-aos-delay="200"><h3>🚀 Bergabunglah dengan Tim Kami!</h3><p>Kami mencari developer berbakat untuk bergabung dengan project-kdmi. Kontribusi Anda akan membuat perbedaan nyata!</p><a href="https://github.com/project-kdmi"class="btn-join"><i class="fa-github fab"></i> Lihat Anggota Team</a></div><div class="footer-links"data-aos="fade-up"data-aos-delay="400"><a href="https://github.com/project-kdmi">GitHub</a> <span>•</span> <a href="https://github.com/project-kdmi/project-kdmi/blob/main/TOS.md">Terms of Service</a> <span>•</span> <a href="https://github.com/project-kdmi">Documentation</a></div><div class="footer-bottom"data-aos="fade-up"data-aos-delay="600"><p>© 2025 CodeSigmax by project-kdmi. All rights reserved.<p style="margin-top:.5rem;font-size:.9rem">Dibuat dengan <i class="fas fa-heart"style="color:#ff6b6b"></i> untuk komunitas developer Indonesia</div></div></footer><script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script><script>AOS.init({
duration: 800,
easing: 'ease-in-out',
once: true
});
async function fetchRepositories() {
try {
const response = await fetch('https://api.github.com/users/project-kdmi/repos?sort=updated&per_page=12');
if (!response.ok) {
throw new Error('Gagal mengambil data repositories');
}
const repos = await response.json();
displayRepositories(repos);
} catch (error) {
console.error('Error:', error);
displayError('Gagal memuat repositories. Silakan coba lagi nanti.');
}
}
function displayRepositories(repos) {
const container = document.getElementById('reposContainer');
if (repos.length === 0) {
container.innerHTML = '<p style="grid-column: 1/-1; text-align: center; color: #999;">Belum ada repositories.</p>';
return;
}
container.innerHTML = repos.map((repo, index) => `
<div class="repo-card" data-aos="fade-up" data-aos-delay="${index * 50}">
<h3>
<i class="fas fa-folder"></i>
${repo.name}
</h3>
<p>${repo.description || 'Tidak ada deskripsi'}</p>
<div class="repo-stats">
<span><i class="fas fa-star"></i> ${repo.stargazers_count}</span>
<span><i class="fas fa-code-branch"></i> ${repo.forks_count}</span>
${repo.language ? `<span><i class="fas fa-code"></i> ${repo.language}</span>` : ''}
</div>
<a href="${repo.html_url}" target="_blank" rel="noopener noreferrer" class="repo-link">
Lihat Repository <i class="fas fa-arrow-right"></i>
</a>
</div>
`).join('');
AOS.refresh();
}
function displayError(message) {
const container = document.getElementById('reposContainer');
container.innerHTML = `<div class="error" style="grid-column: 1/-1;">${message}</div>`;
}
document.addEventListener('DOMContentLoaded', fetchRepositories);
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
const href = this.getAttribute('href');
if (href !== '#') {
e.preventDefault();
const target = document.querySelector(href);
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
}
});
});</script>