-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
225 lines (190 loc) · 10.8 KB
/
index.html
File metadata and controls
225 lines (190 loc) · 10.8 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
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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
<!DOCTYPE html>
<html lang="ar" dir="rtl" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sherow1982 | معرض المشاريع</title>
<meta name="description" content="المعرض الاحترافي لمشاريع Sherow1982">
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- خط Cairo -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;900&display=swap" rel="stylesheet">
<!-- أيقونات FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
body {
font-family: 'Cairo', sans-serif;
background-color: #050505;
color: #ffffff;
background-image:
radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%),
radial-gradient(at 50% 0%, hsla(225,39%,30%,1) 0, transparent 50%),
radial-gradient(at 100% 0%, hsla(339,49%,30%,1) 0, transparent 50%);
}
/* تخصيص شريط التمرير */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0f172a; }
::-webkit-scrollbar-thumb { background: #6366f1; border-radius: 4px; }
/* تأثير الزجاج القوي */
.glass-panel {
background: rgba(20, 20, 25, 0.6);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}
.card-hover:hover {
transform: translateY(-5px) scale(1.01);
box-shadow: 0 0 25px rgba(99, 102, 241, 0.4);
border-color: rgba(99, 102, 241, 0.5);
}
</style>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
neon: {
purple: '#8b5cf6',
pink: '#ec4899',
cyan: '#06b6d4'
}
},
animation: {
'blob': 'blob 7s infinite',
},
keyframes: {
blob: {
'0%': { transform: 'translate(0px, 0px) scale(1)' },
'33%': { transform: 'translate(30px, -50px) scale(1.1)' },
'66%': { transform: 'translate(-20px, 20px) scale(0.9)' },
'100%': { transform: 'translate(0px, 0px) scale(1)' },
}
}
}
}
}
</script>
</head>
<body class="min-h-screen flex flex-col relative overflow-x-hidden">
<!-- خلفية متحركة (Blobs) -->
<div class="fixed inset-0 w-full h-full pointer-events-none -z-10">
<div class="absolute top-0 left-1/4 w-96 h-96 bg-neon-purple/20 rounded-full mix-blend-screen filter blur-3xl opacity-30 animate-blob"></div>
<div class="absolute top-0 right-1/4 w-96 h-96 bg-neon-pink/20 rounded-full mix-blend-screen filter blur-3xl opacity-30 animate-blob animation-delay-2000"></div>
<div class="absolute -bottom-32 left-1/3 w-96 h-96 bg-neon-cyan/20 rounded-full mix-blend-screen filter blur-3xl opacity-30 animate-blob animation-delay-4000"></div>
</div>
<!-- الهيدر -->
<header class="pt-20 pb-12 text-center relative z-10">
<div class="container mx-auto px-4">
<div class="relative inline-block group mb-8">
<div class="absolute -inset-1 bg-gradient-to-r from-neon-pink via-neon-purple to-neon-cyan rounded-full blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-200"></div>
<img id="profile-avatar" src="https://github.com/sherow1982.png"
class="relative w-36 h-36 rounded-full border-4 border-black object-cover">
</div>
<h1 class="text-5xl md:text-6xl font-black mb-4 tracking-tight">
<span class="bg-clip-text text-transparent bg-gradient-to-r from-white via-slate-200 to-slate-400">
مشاريع
</span>
<span class="bg-clip-text text-transparent bg-gradient-to-r from-neon-cyan to-neon-purple">
Sherow1982
</span>
</h1>
<p class="text-slate-400 text-xl max-w-2xl mx-auto font-light">
مجموعة من الحلول البرمجية والمشاريع مفتوحة المصدر
</p>
<div class="flex justify-center gap-4 mt-8">
<a href="https://github.com/sherow1982" target="_blank" class="px-6 py-2 rounded-full glass-panel hover:bg-white/10 transition flex items-center gap-2">
<i class="fab fa-github"></i> GitHub
</a>
</div>
</div>
</header>
<!-- منطقة المشاريع -->
<main class="flex-grow container mx-auto px-4 py-8 z-10 relative">
<!-- Loading Spinner -->
<div id="loading" class="text-center py-20">
<div class="inline-block w-16 h-16 border-4 border-t-neon-purple border-r-transparent border-b-neon-cyan border-l-transparent rounded-full animate-spin"></div>
<p class="mt-4 text-slate-300 animate-pulse">جاري تحميل الإبداع...</p>
</div>
<!-- Grid -->
<div id="repos-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 hidden">
<!-- Cards will be injected here -->
</div>
</main>
<footer class="text-center py-10 text-slate-600 text-sm mt-10 border-t border-slate-900/50">
<p>برمجة وتصميم <span class="text-neon-purple font-bold">Sherow1982</span> © <span id="year"></span></p>
</footer>
<script>
document.getElementById('year').textContent = new Date().getFullYear();
async function fetchRepos() {
const username = 'sherow1982';
const apiUrl = `https://api.github.com/users/${username}/repos?sort=updated&per_page=100`;
try {
const response = await fetch(apiUrl);
if (!response.ok) throw new Error('Network error');
let repos = await response.json();
// استبعاد المستودع الخاص بالبروفايل إن وجد
repos = repos.filter(repo => repo.name !== username);
renderRepos(repos, username);
} catch (error) {
console.error(error);
document.getElementById('loading').innerHTML = '<p class="text-red-500">حدث خطأ في تحميل البيانات.</p>';
}
}
function renderRepos(repos, username) {
const grid = document.getElementById('repos-grid');
document.getElementById('loading').classList.add('hidden');
grid.classList.remove('hidden');
repos.forEach(repo => {
// صورة الكارت الذكية (Open Graph Image)
// نستخدم خدمة GitHub Assets لجلب صورة للمستودع تلقائياً
const imageUrl = `https://opengraph.githubassets.com/1/${username}/${repo.name}`;
// تحديد حالة الأزرار
const hasHomepage = repo.homepage && repo.homepage.trim() !== "";
const card = document.createElement('div');
card.className = "glass-panel rounded-2xl overflow-hidden flex flex-col transition-all duration-300 card-hover group";
card.innerHTML = `
<!-- صورة المشروع -->
<div class="relative h-48 overflow-hidden bg-slate-800">
<img src="${imageUrl}" alt="${repo.name}"
class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700 opacity-90 group-hover:opacity-100"
loading="lazy">
<!-- بادج اللغة -->
<div class="absolute top-3 right-3 bg-black/70 backdrop-blur-sm px-3 py-1 rounded-full text-xs font-bold border border-white/10 shadow-lg text-neon-cyan">
${repo.language || 'Code'}
</div>
</div>
<!-- محتوى الكارت -->
<div class="p-6 flex flex-col flex-grow">
<h2 class="text-xl font-bold mb-2 text-white group-hover:text-neon-purple transition-colors truncate" dir="ltr" style="text-align: right;">
${repo.name}
</h2>
<p class="text-slate-400 text-sm mb-6 line-clamp-3 leading-relaxed">
${repo.description || 'مشروع مميز لا يحتوي على وصف نصي حالياً، ولكن يمكنك استكشاف الكود.'}
</p>
<!-- الأزرار -->
<div class="mt-auto grid ${hasHomepage ? 'grid-cols-2' : 'grid-cols-1'} gap-3">
<!-- زر المعاينة الحية (يظهر فقط إذا كان هناك رابط) -->
${hasHomepage ? `
<a href="${repo.homepage}" target="_blank"
class="bg-gradient-to-r from-neon-purple to-indigo-600 hover:from-indigo-600 hover:to-neon-purple text-white py-2 px-4 rounded-lg text-sm font-bold text-center shadow-lg shadow-purple-900/50 transition-all flex items-center justify-center gap-2">
<i class="fas fa-rocket"></i> معاينة
</a>
` : ''}
<!-- زر الكود -->
<a href="${repo.html_url}" target="_blank"
class="bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700 py-2 px-4 rounded-lg text-sm font-bold text-center transition-colors flex items-center justify-center gap-2">
<i class="fab fa-github"></i> الكود
</a>
</div>
</div>
`;
grid.appendChild(card);
});
}
fetchRepos();
</script>
</body>
</html>