Skip to content

Commit 537f8b7

Browse files
Copilot0xrinegade
Copilot
and
0xrinegade
committed
Complete UX/UI refinement with comprehensive improvements
Co-authored-by: 0xrinegade <[email protected]>
1 parent 617813d commit 537f8b7

File tree

1 file changed

+315
-0
lines changed

1 file changed

+315
-0
lines changed

‎demo.html‎

Lines changed: 315 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,315 @@
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>Awesome Stargazer - UI Demo</title>
7+
<style>
8+
:root {
9+
--bg-primary: #0d1117;
10+
--bg-secondary: #161b22;
11+
--bg-tertiary: #21262d;
12+
--bg-overlay: rgba(13, 17, 23, 0.8);
13+
--border-default: #30363d;
14+
--border-muted: #21262d;
15+
--text-primary: #e6edf3;
16+
--text-secondary: #8b949e;
17+
--text-link: #58a6ff;
18+
--text-link-hover: #79c0ff;
19+
--accent-primary: #238636;
20+
--accent-emphasis: #2ea043;
21+
--danger: #da3633;
22+
--warning: #9e6a03;
23+
--success: #3fb950;
24+
--shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
25+
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
26+
}
27+
28+
* {
29+
margin: 0;
30+
padding: 0;
31+
box-sizing: border-box;
32+
}
33+
34+
html {
35+
scroll-behavior: smooth;
36+
}
37+
38+
body {
39+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
40+
background: var(--bg-primary);
41+
color: var(--text-primary);
42+
line-height: 1.5;
43+
padding: 20px;
44+
}
45+
46+
.container {
47+
max-width: 1280px;
48+
margin: 0 auto;
49+
}
50+
51+
.hero-section {
52+
text-align: center;
53+
padding: 48px 24px 32px;
54+
}
55+
56+
.hero-title {
57+
font-size: 36px;
58+
font-weight: 700;
59+
background: linear-gradient(135deg, var(--text-primary), var(--text-link));
60+
-webkit-background-clip: text;
61+
-webkit-text-fill-color: transparent;
62+
background-clip: text;
63+
margin-bottom: 12px;
64+
}
65+
66+
.hero-subtitle {
67+
font-size: 18px;
68+
color: var(--text-secondary);
69+
font-weight: 400;
70+
margin-bottom: 40px;
71+
}
72+
73+
.repos-grid {
74+
display: grid;
75+
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
76+
gap: 16px;
77+
margin-top: 20px;
78+
}
79+
80+
.repo-card {
81+
background: var(--bg-secondary);
82+
border: 1px solid var(--border-default);
83+
border-radius: 6px;
84+
padding: 16px;
85+
transition: all 0.2s;
86+
animation: slideIn 0.3s ease;
87+
}
88+
89+
@keyframes slideIn {
90+
from { opacity: 0; transform: scale(0.95); }
91+
to { opacity: 1; transform: scale(1); }
92+
}
93+
94+
.repo-card:hover {
95+
border-color: var(--text-link);
96+
box-shadow: var(--shadow-sm);
97+
transform: translateY(-2px);
98+
}
99+
100+
.repo-header {
101+
display: flex;
102+
align-items: flex-start;
103+
gap: 12px;
104+
margin-bottom: 12px;
105+
}
106+
107+
.repo-icon {
108+
width: 32px;
109+
height: 32px;
110+
border-radius: 6px;
111+
background: var(--bg-tertiary);
112+
display: flex;
113+
align-items: center;
114+
justify-content: center;
115+
flex-shrink: 0;
116+
font-size: 18px;
117+
}
118+
119+
.repo-info {
120+
flex: 1;
121+
min-width: 0;
122+
}
123+
124+
.repo-name {
125+
font-size: 16px;
126+
font-weight: 600;
127+
color: var(--text-link);
128+
text-decoration: none;
129+
display: block;
130+
overflow: hidden;
131+
text-overflow: ellipsis;
132+
white-space: nowrap;
133+
}
134+
135+
.repo-category {
136+
font-size: 12px;
137+
color: var(--text-secondary);
138+
margin-top: 2px;
139+
display: inline-block;
140+
padding: 2px 8px;
141+
background: var(--bg-tertiary);
142+
border-radius: 12px;
143+
border: 1px solid var(--border-muted);
144+
font-weight: 500;
145+
}
146+
147+
.repo-description {
148+
font-size: 14px;
149+
color: var(--text-secondary);
150+
margin-bottom: 12px;
151+
line-height: 1.5;
152+
}
153+
154+
.toast-container {
155+
position: fixed;
156+
bottom: 24px;
157+
right: 24px;
158+
z-index: 2000;
159+
display: flex;
160+
flex-direction: column;
161+
gap: 12px;
162+
max-width: 400px;
163+
}
164+
165+
.toast {
166+
background: var(--bg-secondary);
167+
border: 1px solid var(--border-default);
168+
border-radius: 6px;
169+
padding: 16px;
170+
box-shadow: var(--shadow);
171+
display: flex;
172+
align-items: center;
173+
gap: 12px;
174+
animation: slideInRight 0.3s ease;
175+
min-width: 300px;
176+
}
177+
178+
@keyframes slideInRight {
179+
from {
180+
transform: translateX(400px);
181+
opacity: 0;
182+
}
183+
to {
184+
transform: translateX(0);
185+
opacity: 1;
186+
}
187+
}
188+
189+
.toast.success {
190+
border-color: var(--success);
191+
}
192+
193+
.toast-icon {
194+
flex-shrink: 0;
195+
width: 20px;
196+
height: 20px;
197+
color: var(--success);
198+
}
199+
200+
.toast-content {
201+
flex: 1;
202+
}
203+
204+
.toast-title {
205+
font-weight: 600;
206+
font-size: 14px;
207+
color: var(--text-primary);
208+
margin-bottom: 2px;
209+
}
210+
211+
.toast-message {
212+
font-size: 13px;
213+
color: var(--text-secondary);
214+
}
215+
216+
.loading-progress {
217+
max-width: 600px;
218+
margin: 40px auto;
219+
padding: 0 20px;
220+
}
221+
222+
.loading-progress h3 {
223+
text-align: center;
224+
margin-bottom: 16px;
225+
}
226+
227+
.loading-bar {
228+
height: 8px;
229+
background: var(--bg-tertiary);
230+
border-radius: 4px;
231+
overflow: hidden;
232+
border: 1px solid var(--border-default);
233+
}
234+
235+
.loading-bar-fill {
236+
height: 100%;
237+
background: linear-gradient(90deg, var(--accent-primary), var(--text-link));
238+
width: 65%;
239+
transition: width 0.3s ease;
240+
}
241+
242+
.loading-stats {
243+
text-align: center;
244+
margin-top: 12px;
245+
font-size: 14px;
246+
color: var(--text-secondary);
247+
}
248+
</style>
249+
</head>
250+
<body>
251+
<div class="container">
252+
<div class="hero-section">
253+
<h1 class="hero-title">Discover Amazing GitHub Repositories</h1>
254+
<p class="hero-subtitle">Explore 59,000+ curated repositories across 575 categories</p>
255+
</div>
256+
257+
<div class="loading-progress">
258+
<h3>Loading Repository Data</h3>
259+
<div class="loading-bar">
260+
<div class="loading-bar-fill"></div>
261+
</div>
262+
<p class="loading-stats">Downloaded 4.02 MB of 6.15 MB</p>
263+
</div>
264+
265+
<div class="repos-grid">
266+
<div class="repo-card">
267+
<div class="repo-header">
268+
<div class="repo-icon">🤖</div>
269+
<div class="repo-info">
270+
<a href="#" class="repo-name">openai/whisper</a>
271+
<div class="repo-category">AI & MACHINE LEARNING</div>
272+
</div>
273+
</div>
274+
<div class="repo-description">Robust Speech Recognition via Large-Scale Weak Supervision</div>
275+
</div>
276+
277+
<div class="repo-card">
278+
<div class="repo-header">
279+
<div class="repo-icon">⛓️</div>
280+
<div class="repo-info">
281+
<a href="#" class="repo-name">solana-labs/solana</a>
282+
<div class="repo-category">BLOCKCHAIN</div>
283+
</div>
284+
</div>
285+
<div class="repo-description">Web-Scale Blockchain for fast, secure, scalable, decentralized apps and marketplaces.</div>
286+
</div>
287+
288+
<div class="repo-card">
289+
<div class="repo-header">
290+
<div class="repo-icon">⚛️</div>
291+
<div class="repo-info">
292+
<a href="#" class="repo-name">facebook/react</a>
293+
<div class="repo-category">REACT</div>
294+
</div>
295+
</div>
296+
<div class="repo-description">A declarative, efficient, and flexible JavaScript library for building user interfaces.</div>
297+
</div>
298+
</div>
299+
</div>
300+
301+
<div class="toast-container">
302+
<div class="toast success">
303+
<div class="toast-icon">
304+
<svg width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
305+
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm3.78-9.72a.75.75 0 0 0-1.06-1.06L6.75 9.19 5.28 7.72a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l4.5-4.5z"></path>
306+
</svg>
307+
</div>
308+
<div class="toast-content">
309+
<div class="toast-title">Data Loaded</div>
310+
<div class="toast-message">59,300 repositories ready to explore</div>
311+
</div>
312+
</div>
313+
</div>
314+
</body>
315+
</html>

0 commit comments

Comments
 (0)