Hugging Face's logo

Spaces:
MySafeCode
/
WhackyChatApp
Sleeping

App Files Community
MySafeCode commited on
Commit
0383043
·
verified ·
1 Parent(s): d9bfdee

Update templates/login.html

Browse files
Files changed (1) hide show
  1. templates/login.html +161 -160
templates/login.html CHANGED
@@ -1,161 +1,162 @@
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>Whacky Chat - Login</title>
7
- <style>
8
- @import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;700&family=Orbitron:wght@700&display=swap');
9
-
10
- * {
11
- margin: 0;
12
- padding: 0;
13
- box-sizing: border-box;
14
- }
15
-
16
- body {
17
- font-family: 'Rajdhani', sans-serif;
18
- background: linear-gradient(45deg, #0f0f23, #1a1a3a, #2d1b69);
19
- background-size: 400% 400%;
20
- animation: gradientShift 8s ease infinite;
21
- color: #fff;
22
- height: 100vh;
23
- display: flex;
24
- justify-content: center;
25
- align-items: center;
26
- }
27
-
28
- @keyframes gradientShift {
29
- 0%{background-position:0% 50%}
30
- 50%{background-position:100% 50%}
31
- 100%{background-position:0% 50%}
32
- }
33
-
34
- .login-container {
35
- background: rgba(0,0,0,0.3);
36
- backdrop-filter: blur(10px);
37
- border: 2px solid rgba(255,255,255,0.1);
38
- border-radius: 20px;
39
- padding: 40px;
40
- text-align: center;
41
- max-width: 400px;
42
- width: 90%;
43
- box-shadow: 0 10px 30px rgba(0,0,0,0.5);
44
- }
45
-
46
- .title {
47
- font-family: 'Orbitron', monospace;
48
- font-size: 2.5rem;
49
- background: linear-gradient(45deg, #ff6ec4, #7873f5, #00ff88);
50
- -webkit-background-clip: text;
51
- -webkit-text-fill-color: transparent;
52
- background-clip: text;
53
- text-shadow: 0 0 20px rgba(255,110,196,0.5);
54
- margin-bottom: 30px;
55
- animation: titleGlow 2s ease-in-out infinite alternate;
56
- }
57
-
58
- @keyframes titleGlow {
59
- from { filter: drop-shadow(0 0 10px rgba(255,110,196,0.5)); }
60
- to { filter: drop-shadow(0 0 20px rgba(120,115,245,0.8)); }
61
- }
62
-
63
- .subtitle {
64
- font-size: 1.2rem;
65
- color: rgba(255,255,255,0.8);
66
- margin-bottom: 30px;
67
- }
68
-
69
- .form-group {
70
- margin-bottom: 25px;
71
- }
72
-
73
- .form-input {
74
- width: 100%;
75
- padding: 15px;
76
- border: 2px solid rgba(255,255,255,0.2);
77
- border-radius: 10px;
78
- background: rgba(0,0,0,0.3);
79
- color: #fff;
80
- font-size: 1.1rem;
81
- transition: all 0.3s ease;
82
- }
83
-
84
- .form-input:focus {
85
- outline: none;
86
- border-color: #00ff88;
87
- box-shadow: 0 0 15px rgba(0,255,136,0.3);
88
- }
89
-
90
- .form-input::placeholder {
91
- color: rgba(255,255,255,0.5);
92
- }
93
-
94
- .login-button {
95
- width: 100%;
96
- padding: 15px;
97
- border: none;
98
- border-radius: 10px;
99
- background: linear-gradient(45deg, #ff6ec4, #7873f5);
100
- color: #fff;
101
- font-size: 1.1rem;
102
- font-weight: bold;
103
- cursor: pointer;
104
- transition: all 0.3s ease;
105
- text-transform: uppercase;
106
- letter-spacing: 1px;
107
- }
108
-
109
- .login-button:hover {
110
- transform: translateY(-2px);
111
- box-shadow: 0 5px 15px rgba(255,110,196,0.4);
112
- }
113
-
114
- .login-button:active {
115
- transform: translateY(0);
116
- }
117
-
118
- .info-text {
119
- margin-top: 20px;
120
- color: rgba(255,255,255,0.6);
121
- font-size: 0.9rem;
122
- }
123
-
124
- .user-number-info {
125
- background: rgba(0,255,136,0.2);
126
- padding: 15px;
127
- border-radius: 10px;
128
- border: 1px solid rgba(0,255,136,0.5);
129
- margin: 20px 0;
130
- font-size: 0.9rem;
131
- }
132
- </style>
133
- </head>
134
- <body>
135
- <div class="login-container">
136
- <div class="title">WHACKY CHAT</div>
137
- <div class="subtitle">Enter the Whacky Zone</div>
138
-
139
- <form method="POST" action="/login">
140
- <div class="form-group">
141
- <input type="text"
142
- name="username"
143
- class="form-input"
144
- placeholder="Enter your username"
145
- required
146
- maxlength="20">
147
- </div>
148
-
149
- <button type="submit" class="login-button">JOIN CHAT</button>
150
- </form>
151
-
152
- <div class="user-number-info">
153
- You'll be assigned a unique two-digit user number (01, 02, 03...)
154
- </div>
155
-
156
- <div class="info-text">
157
- No password needed - just pick a username and join the fun!
158
- </div>
159
- </div>
160
- </body>
 
161
  </html>
 
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>Whacky Chat - Login</title>
7
+ <style>
8
+ @import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;700&family=Orbitron:wght@700&display=swap');
9
+
10
+ * {
11
+ margin: 0;
12
+ padding: 0;
13
+ box-sizing: border-box;
14
+ }
15
+
16
+ body {
17
+ font-family: 'Rajdhani', sans-serif;
18
+ background: linear-gradient(45deg, #0f0f23, #1a1a3a, #2d1b69);
19
+ background-size: 400% 400%;
20
+ animation: gradientShift 8s ease infinite;
21
+ color: #fff;
22
+ height: 100vh;
23
+ display: flex;
24
+ justify-content: center;
25
+ align-items: center;
26
+ }
27
+
28
+ @keyframes gradientShift {
29
+ 0%{background-position:0% 50%}
30
+ 50%{background-position:100% 50%}
31
+ 100%{background-position:0% 50%}
32
+ }
33
+
34
+ .login-container {
35
+ background: rgba(0,0,0,0.3);
36
+ backdrop-filter: blur(10px);
37
+ border: 2px solid rgba(255,255,255,0.1);
38
+ border-radius: 20px;
39
+ padding: 40px;
40
+ text-align: center;
41
+ max-width: 400px;
42
+ width: 90%;
43
+ box-shadow: 0 10px 30px rgba(0,0,0,0.5);
44
+ }
45
+
46
+ .title {
47
+ font-family: 'Orbitron', monospace;
48
+ font-size: 2.5rem;
49
+ background: linear-gradient(45deg, #ff6ec4, #7873f5, #00ff88);
50
+ -webkit-background-clip: text;
51
+ -webkit-text-fill-color: transparent;
52
+ background-clip: text;
53
+ text-shadow: 0 0 20px rgba(255,110,196,0.5);
54
+ margin-bottom: 30px;
55
+ animation: titleGlow 2s ease-in-out infinite alternate;
56
+ }
57
+
58
+ @keyframes titleGlow {
59
+ from { filter: drop-shadow(0 0 10px rgba(255,110,196,0.5)); }
60
+ to { filter: drop-shadow(0 0 20px rgba(120,115,245,0.8)); }
61
+ }
62
+
63
+ .subtitle {
64
+ font-size: 1.2rem;
65
+ color: rgba(255,255,255,0.8);
66
+ margin-bottom: 30px;
67
+ }
68
+
69
+ .form-group {
70
+ margin-bottom: 25px;
71
+ }
72
+
73
+ .form-input {
74
+ width: 100%;
75
+ padding: 15px;
76
+ border: 2px solid rgba(255,255,255,0.2);
77
+ border-radius: 10px;
78
+ background: rgba(0,0,0,0.3);
79
+ color: #fff;
80
+ font-size: 1.1rem;
81
+ transition: all 0.3s ease;
82
+ }
83
+
84
+ .form-input:focus {
85
+ outline: none;
86
+ border-color: #00ff88;
87
+ box-shadow: 0 0 15px rgba(0,255,136,0.3);
88
+ }
89
+
90
+ .form-input::placeholder {
91
+ color: rgba(255,255,255,0.5);
92
+ }
93
+
94
+ .login-button {
95
+ width: 100%;
96
+ padding: 15px;
97
+ border: none;
98
+ border-radius: 10px;
99
+ background: linear-gradient(45deg, #ff6ec4, #7873f5);
100
+ color: #fff;
101
+ font-size: 1.1rem;
102
+ font-weight: bold;
103
+ cursor: pointer;
104
+ transition: all 0.3s ease;
105
+ text-transform: uppercase;
106
+ letter-spacing: 1px;
107
+ }
108
+
109
+ .login-button:hover {
110
+ transform: translateY(-2px);
111
+ box-shadow: 0 5px 15px rgba(255,110,196,0.4);
112
+ }
113
+
114
+ .login-button:active {
115
+ transform: translateY(0);
116
+ }
117
+
118
+ .info-text {
119
+ margin-top: 20px;
120
+ color: rgba(255,255,255,0.6);
121
+ font-size: 0.9rem;
122
+ }
123
+
124
+ .user-number-info {
125
+ background: rgba(0,255,136,0.2);
126
+ padding: 15px;
127
+ border-radius: 10px;
128
+ border: 1px solid rgba(0,255,136,0.5);
129
+ margin: 20px 0;
130
+ font-size: 0.9rem;
131
+ }
132
+ </style>
133
+ </head>
134
+ <body>
135
+ <div class="login-container">
136
+ <div class="title">WHACKY CHAT</div>
137
+ <div class="subtitle">Enter the Whacky Zone</div>
138
+ <div class="subtitle">Run in this location: https://mysafecode-whackychatapp.hf.space</div>
139
+
140
+ <form method="POST" action="/login">
141
+ <div class="form-group">
142
+ <input type="text"
143
+ name="username"
144
+ class="form-input"
145
+ placeholder="Enter your username"
146
+ required
147
+ maxlength="20">
148
+ </div>
149
+
150
+ <button type="submit" class="login-button">JOIN CHAT</button>
151
+ </form>
152
+
153
+ <div class="user-number-info">
154
+ You'll be assigned a unique two-digit user number (01, 02, 03...)
155
+ </div>
156
+
157
+ <div class="info-text">
158
+ No password needed - just pick a username and join the fun!
159
+ </div>
160
+ </div>
161
+ </body>
162
  </html>