Hugging Face's logo

Spaces:
lexlepty
/
CloudVaultclass
Sleeping

App Files Community
lexlepty commited on
Commit
22c1716
·
verified ·
1 Parent(s): f133889

Update templates/login.html

Browse files
Files changed (1) hide show
  1. templates/login.html +138 -137
templates/login.html CHANGED
@@ -1,138 +1,139 @@
1
- <!DOCTYPE html>
2
- <html lang="zh">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>登录 - 云存储</title>
7
- <style>
8
- :root {
9
- --primary-glow: #ff9580;
10
- --secondary-glow: #ffd700;
11
- --background: #ffffff;
12
- --text: #333333;
13
- --card-bg: #ffffff;
14
- --border-color: #e0e0e0;
15
- }
16
-
17
- * {
18
- margin: 0;
19
- padding: 0;
20
- box-sizing: border-box;
21
- }
22
-
23
- body {
24
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
25
- background: var(--background);
26
- color: var(--text);
27
- min-height: 100vh;
28
- display: flex;
29
- align-items: center;
30
- justify-content: center;
31
- }
32
-
33
- .login-container {
34
- background: var(--card-bg);
35
- padding: 40px;
36
- border-radius: 15px;
37
- box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
38
- width: 100%;
39
- max-width: 400px;
40
- transition: all 0.3s ease;
41
- }
42
-
43
- .login-container:hover {
44
- transform: translateY(-5px);
45
- box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
46
- }
47
-
48
- .login-title {
49
- text-align: center;
50
- margin-bottom: 30px;
51
- font-size: 24px;
52
- color: var(--text);
53
- }
54
-
55
- .login-form {
56
- display: flex;
57
- flex-direction: column;
58
- gap: 20px;
59
- }
60
-
61
- .password-input {
62
- width: 100%;
63
- padding: 12px 20px;
64
- border: 2px solid var(--border-color);
65
- border-radius: 25px;
66
- font-size: 16px;
67
- transition: all 0.3s ease;
68
- }
69
-
70
- .password-input:focus {
71
- outline: none;
72
- border-color: var(--primary-glow);
73
- box-shadow: 0 0 10px rgba(255, 149, 128, 0.3);
74
- }
75
-
76
- .login-button {
77
- width: 100%;
78
- padding: 12px 20px;
79
- border: none;
80
- border-radius: 25px;
81
- background: linear-gradient(45deg, var(--primary-glow), var(--secondary-glow));
82
- color: white;
83
- font-size: 16px;
84
- cursor: pointer;
85
- transition: all 0.3s ease;
86
- }
87
-
88
- .login-button:hover {
89
- transform: translateY(-2px);
90
- box-shadow: 0 5px 15px rgba(255, 149, 128, 0.4);
91
- }
92
-
93
- .error-message {
94
- color: #ff4444;
95
- text-align: center;
96
- margin-top: 10px;
97
- display: none;
98
- }
99
- </style>
100
- </head>
101
- <body>
102
- <div class="login-container">
103
- <h1 class="login-title"> Cloud Vault的登录界面，没错在这输一下密码，密码1234</h1>
104
- <form class="login-form" id="loginForm">
105
- <input type="password" class="password-input" placeholder="请输入访问密码" required>
106
- <button type="submit" class="login-button">登录</button>
107
- </form>
108
- <div class="error-message" id="errorMessage">密码错误，请重试</div>
109
- </div>
110
-
111
- <script>
112
- document.getElementById('loginForm').addEventListener('submit', async (e) => {
113
- e.preventDefault();
114
- const password = document.querySelector('.password-input').value;
115
- const errorMessage = document.getElementById('errorMessage');
116
-
117
- try {
118
- const response = await fetch('/login', {
119
- method: 'POST',
120
- headers: {
121
- 'Content-Type': 'application/x-www-form-urlencoded',
122
- },
123
- body: `password=${encodeURIComponent(password)}`
124
- });
125
-
126
- if (response.ok) {
127
- window.location.href = '/';
128
- } else {
129
- errorMessage.style.display = 'block';
130
- }
131
- } catch (error) {
132
- console.error('Login failed:', error);
133
- errorMessage.style.display = 'block';
134
- }
135
- });
136
- </script>
137
- </body>
 
138
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="zh">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>登录 - 云存储</title>
7
+ <style>
8
+ :root {
9
+ --primary-glow: #ff9580;
10
+ --secondary-glow: #ffd700;
11
+ --background: #ffffff;
12
+ --text: #333333;
13
+ --card-bg: #ffffff;
14
+ --border-color: #e0e0e0;
15
+ }
16
+
17
+ * {
18
+ margin: 0;
19
+ padding: 0;
20
+ box-sizing: border-box;
21
+ }
22
+
23
+ body {
24
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
25
+ background: var(--background);
26
+ color: var(--text);
27
+ min-height: 100vh;
28
+ display: flex;
29
+ align-items: center;
30
+ justify-content: center;
31
+ }
32
+
33
+ .login-container {
34
+ background: var(--card-bg);
35
+ padding: 40px;
36
+ border-radius: 15px;
37
+ box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
38
+ width: 100%;
39
+ max-width: 400px;
40
+ transition: all 0.3s ease;
41
+ }
42
+
43
+ .login-container:hover {
44
+ transform: translateY(-5px);
45
+ box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
46
+ }
47
+
48
+ .login-title {
49
+ text-align: center;
50
+ margin-bottom: 30px;
51
+ font-size: 24px;
52
+ color: var(--text);
53
+ }
54
+
55
+ .login-form {
56
+ display: flex;
57
+ flex-direction: column;
58
+ gap: 20px;
59
+ }
60
+
61
+ .password-input {
62
+ width: 100%;
63
+ padding: 12px 20px;
64
+ border: 2px solid var(--border-color);
65
+ border-radius: 25px;
66
+ font-size: 16px;
67
+ transition: all 0.3s ease;
68
+ }
69
+
70
+ .password-input:focus {
71
+ outline: none;
72
+ border-color: var(--primary-glow);
73
+ box-shadow: 0 0 10px rgba(255, 149, 128, 0.3);
74
+ }
75
+
76
+ .login-button {
77
+ width: 100%;
78
+ padding: 12px 20px;
79
+ border: none;
80
+ border-radius: 25px;
81
+ background: linear-gradient(45deg, var(--primary-glow), var(--secondary-glow));
82
+ color: white;
83
+ font-size: 16px;
84
+ cursor: pointer;
85
+ transition: all 0.3s ease;
86
+ }
87
+
88
+ .login-button:hover {
89
+ transform: translateY(-2px);
90
+ box-shadow: 0 5px 15px rgba(255, 149, 128, 0.4);
91
+ }
92
+
93
+ .error-message {
94
+ color: #ff4444;
95
+ text-align: center;
96
+ margin-top: 10px;
97
+ display: none;
98
+ }
99
+ </style>
100
+ </head>
101
+ <body>
102
+ <div class="login-container">
103
+ <h1 class="login-title"> Cloud Vault的登录界面</h1>
104
+ <p class="login-title">没错在这输一下密码，密码1234</p>
105
+ <form class="login-form" id="loginForm">
106
+ <input type="password" class="password-input" placeholder="请输入访问密码" required>
107
+ <button type="submit" class="login-button">登录</button>
108
+ </form>
109
+ <div class="error-message" id="errorMessage">密码错误，请重试</div>
110
+ </div>
111
+
112
+ <script>
113
+ document.getElementById('loginForm').addEventListener('submit', async (e) => {
114
+ e.preventDefault();
115
+ const password = document.querySelector('.password-input').value;
116
+ const errorMessage = document.getElementById('errorMessage');
117
+
118
+ try {
119
+ const response = await fetch('/login', {
120
+ method: 'POST',
121
+ headers: {
122
+ 'Content-Type': 'application/x-www-form-urlencoded',
123
+ },
124
+ body: `password=${encodeURIComponent(password)}`
125
+ });
126
+
127
+ if (response.ok) {
128
+ window.location.href = '/';
129
+ } else {
130
+ errorMessage.style.display = 'block';
131
+ }
132
+ } catch (error) {
133
+ console.error('Login failed:', error);
134
+ errorMessage.style.display = 'block';
135
+ }
136
+ });
137
+ </script>
138
+ </body>
139
  </html>