Skip to content

Commit 5cf3f45

Browse files
tiao2tiao2
authored
Merge pull request #14 from tutester166/main
Auth CSS supported
2 parents 81b8280 + 76f3414 commit 5cf3f45

4 files changed

Lines changed: 171 additions & 3 deletions

File tree

‎login.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ private function postRequest($endpoint, $data, $headers = []) {
141141

142142
}
143143
?>
144-
</pre>
144+
<link rel="stylesheet" href="/styles/auth.css"/>
145145
<div class="auth-container">
146146
<div class="auth-card">
147147
<div class="auth-header">

‎register.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ private function postRequest($endpoint, $data, $headers = []) {
141141

142142
}
143143
?>
144-
</pre>
144+
<link rel="stylesheet" href="/styles/auth.css"/>
145145
<div class="auth-container">
146146
<div class="auth-card">
147147
<div class="auth-header">

‎rename.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ private function postRequest($endpoint, $data, $headers = []) {
140140

141141
}
142142
?>
143-
</pre>
143+
<link rel="stylesheet" href="/styles/auth.css"/>
144144
<div class="auth-container">
145145
<div class="auth-card">
146146
<div class="auth-header">

‎styles/auth.css‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
/* 认证页面通用样式 */
2+
.auth-container {
3+
min-height: 100vh;
4+
display: flex;
5+
align-items: center;
6+
justify-content: center;
7+
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
8+
padding: 2rem;
9+
}
10+
11+
.auth-card {
12+
background: white;
13+
border-radius: 1.5rem;
14+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
15+
width: 100%;
16+
max-width: 450px;
17+
padding: 2.5rem;
18+
position: relative;
19+
overflow: hidden;
20+
}
21+
22+
.auth-card::before {
23+
content: '';
24+
position: absolute;
25+
top: 0;
26+
left: 0;
27+
right: 0;
28+
height: 4px;
29+
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
30+
}
31+
32+
.auth-header {
33+
text-align: center;
34+
margin-bottom: 2rem;
35+
}
36+
37+
.site-logo {
38+
width: 80px;
39+
margin-bottom: 1.5rem;
40+
}
41+
42+
.auth-header h1 {
43+
font-size: 1.8rem;
44+
color: #2d3748;
45+
margin-bottom: 0.5rem;
46+
}
47+
48+
.auth-header p {
49+
color: #718096;
50+
}
51+
52+
/* 表单增强样式 */
53+
.auth-form .form-group {
54+
margin-bottom: 1.5rem;
55+
position: relative;
56+
}
57+
58+
.auth-form label {
59+
display: block;
60+
margin-bottom: 0.5rem;
61+
color: #4a5568;
62+
font-weight: 500;
63+
}
64+
65+
.auth-form input {
66+
width: 100%;
67+
padding: 0.875rem 2.5rem;
68+
border: 2px solid #e2e8f0;
69+
border-radius: 0.75rem;
70+
font-size: 1rem;
71+
transition: all 0.3s ease;
72+
}
73+
74+
.auth-form input:focus {
75+
border-color: #667eea;
76+
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
77+
outline: none;
78+
}
79+
80+
.input-icon {
81+
position: absolute;
82+
left: 1rem;
83+
bottom: 0.9rem;
84+
font-size: 1.2rem;
85+
color: #a0aec0;
86+
}
87+
88+
.btn {
89+
padding: 10px 20px;
90+
border-radius: 6px;
91+
text-decoration: none;
92+
font-weight: 600;
93+
transition: transform 0.2s, box-shadow 0.2s;
94+
display: inline-flex;
95+
align-items: center;
96+
gap: 8px;
97+
}
98+
99+
.btn:hover {
100+
transform: translateY(-2px);
101+
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
102+
}
103+
104+
.btn.primary {
105+
width: 100%;
106+
padding: 1rem;
107+
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
108+
color: white;
109+
border: none;
110+
border-radius: 0.75rem;
111+
font-size: 1rem;
112+
font-weight: 600;
113+
cursor: pointer;
114+
transition: transform 0.2s;
115+
}
116+
117+
.btn.primary:hover {
118+
transform: translateY(-2px);
119+
}
120+
121+
/* 底部链接 */
122+
.auth-footer {
123+
text-align: center;
124+
margin-top: 1.5rem;
125+
color: #718096;
126+
}
127+
128+
.link {
129+
color: #667eea;
130+
text-decoration: none;
131+
font-weight: 500;
132+
margin-left: 0.5rem;
133+
}
134+
135+
.link:hover {
136+
text-decoration: underline;
137+
}
138+
139+
/* 响应式设计 */
140+
@media (max-width: 480px) {
141+
.auth-container {
142+
padding: 1rem;
143+
}
144+
.auth-card {
145+
padding: 1.5rem;
146+
}
147+
.auth-header h1 {
148+
font-size: 1.5rem;
149+
}
150+
}
151+
152+
/* 加载动画 */
153+
@keyframes spin {
154+
to {
155+
transform: rotate(360deg);
156+
}
157+
}
158+
159+
.spinner {
160+
display: inline-block;
161+
width: 1rem;
162+
height: 1rem;
163+
border: 2px solid rgba(255, 255, 255, 0.3);
164+
border-radius: 50%;
165+
border-top-color: white;
166+
animation: spin 0.6s linear infinite;
167+
margin-right: 0.5rem;
168+
}

0 commit comments

Comments
 (0)