Skip to content

Commit 998b381

Browse files
maratalmaratal
committed
Add initial web UI with register, login, user search and sending messages functionality.
1 parent e338f6e commit 998b381

File tree

15 files changed

+5918
-442
lines changed

15 files changed

+5918
-442
lines changed

‎.cursor/rules/leaf.mdc‎

Whitespace-only changes.

‎Public/css/index.css‎

Lines changed: 234 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
9+
line-height: 1.6;
10+
color: #333;
11+
background: #fff;
12+
min-height: 100vh;
13+
}
14+
15+
.container {
16+
max-width: 1200px;
17+
margin: 0 auto;
18+
padding: 0 20px;
19+
}
20+
21+
.header-section {
22+
margin: 40px auto 20px;
23+
position: relative;
24+
min-height: 67vh;
25+
display: flex;
26+
flex-direction: column;
27+
justify-content: center;
28+
}
29+
30+
.header-content {
31+
display: block;
32+
}
33+
34+
.header-left {
35+
text-align: left;
36+
}
37+
38+
.top-nav {
39+
position: absolute;
40+
top: 15px;
41+
right: 15px;
42+
display: flex;
43+
align-items: center;
44+
gap: 10px;
45+
}
46+
47+
.top-signin-button {
48+
padding: 6px 16px;
49+
background: #333;
50+
color: white;
51+
text-decoration: none;
52+
border-radius: 15px;
53+
font-weight: 500;
54+
transition: all 0.3s ease;
55+
font-size: 0.85rem;
56+
height: 30px;
57+
display: flex;
58+
align-items: center;
59+
}
60+
61+
.top-signin-button:hover {
62+
background: #555;
63+
}
64+
65+
.logo {
66+
font-size: 60px;
67+
font-weight: 700;
68+
color: #112;
69+
margin-bottom: 120px;
70+
letter-spacing: -1px;
71+
}
72+
73+
.logo-icon {
74+
font-size: 53px;
75+
-webkit-filter: invert(100%);
76+
filter: invert(100%) brightness(0%);
77+
margin-right: 15px;
78+
}
79+
80+
.hero-tagline {
81+
font-size: 58px;
82+
font-weight: 700;
83+
color: #336;
84+
margin-bottom: 30px;
85+
letter-spacing: -2px;
86+
line-height: 1.1;
87+
}
88+
89+
.sub-tagline {
90+
font-size: 1.5rem;
91+
color: #464669;
92+
margin-bottom: 50px;
93+
font-weight: 400;
94+
line-height: 1.5;
95+
}
96+
97+
.api-section {
98+
background: white;
99+
border-radius: 12px;
100+
padding: 50px 40px;
101+
margin: 40px auto;
102+
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
103+
border: 1px solid #e9ecef;
104+
}
105+
106+
.section-title {
107+
font-size: 2.2rem;
108+
font-weight: 700;
109+
text-align: center;
110+
margin-bottom: 20px;
111+
color: #212529;
112+
letter-spacing: -0.5px;
113+
}
114+
115+
.api-grid {
116+
display: grid;
117+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
118+
gap: 20px;
119+
margin-top: 30px;
120+
}
121+
122+
.api-card {
123+
display: block;
124+
background: #f8f9fa;
125+
border-radius: 6px;
126+
padding: 25px;
127+
border: 1px solid #e9ecef;
128+
transition: all 0.2s ease;
129+
text-decoration: none;
130+
color: inherit;
131+
}
132+
133+
.api-card:hover {
134+
border-color: #212529;
135+
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
136+
text-decoration: none;
137+
}
138+
139+
.api-title {
140+
font-weight: 600;
141+
color: #212529;
142+
margin-bottom: 8px;
143+
font-size: 1.1rem;
144+
}
145+
146+
.api-description {
147+
color: #6c757d;
148+
font-size: 0.9rem;
149+
}
150+
151+
.simple-footer {
152+
text-align: center;
153+
margin: 30px auto;
154+
color: #6c757d;
155+
font-size: 0.9rem;
156+
}
157+
158+
.simple-footer p {
159+
margin: 10px 0;
160+
}
161+
162+
.contact-link {
163+
color: #212529;
164+
text-decoration: none;
165+
font-weight: 500;
166+
border-bottom: 1px solid #dee2e6;
167+
transition: border-color 0.2s ease;
168+
}
169+
170+
.contact-link:hover {
171+
border-color: #212529;
172+
}
173+
174+
.github-section {
175+
text-align: center;
176+
}
177+
178+
.github-button {
179+
width: 25px;
180+
height: 25px;
181+
background: transparent;
182+
display: inline-flex;
183+
align-items: center;
184+
justify-content: center;
185+
color: #212529;
186+
text-decoration: none;
187+
border-radius: 0px;
188+
transition: all 0.2s ease;
189+
margin: 20px auto;
190+
}
191+
192+
.github-button:hover {
193+
opacity: 0.7;
194+
}
195+
196+
.github-button svg {
197+
width: 25px;
198+
height: 25px;
199+
fill: #212529;
200+
}
201+
202+
@media (max-width: 768px) {
203+
.container {
204+
padding: 0 15px;
205+
}
206+
207+
.header-section {
208+
margin: 20px auto 10px;
209+
min-height: 60vh;
210+
}
211+
212+
.api-section {
213+
margin: 20px auto;
214+
padding: 30px 20px;
215+
}
216+
217+
.logo {
218+
font-size: 2.5rem;
219+
}
220+
221+
.hero-tagline {
222+
font-size: 40px;
223+
line-height: 1.2;
224+
letter-spacing: -1px;
225+
}
226+
227+
.sub-tagline {
228+
font-size: 1.2rem;
229+
}
230+
231+
.api-grid {
232+
grid-template-columns: 1fr;
233+
}
234+
}

0 commit comments

Comments
 (0)