-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathauth-failed.htm
More file actions
202 lines (169 loc) · 6.99 KB
/
auth-failed.htm
File metadata and controls
202 lines (169 loc) · 6.99 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<!DOCTYPE html>
<head>
<title>Auth failed</title>
<script src="/node_modules/socket.io/client-dist/socket.io.js"></script>
<link rel="icon" type="image/x-icon" href="/assets/warning.png">
<script src="./auth-failed.js" defer></script>
</head>
<body>
<button class="Btn" id="reload">
<div class="sign"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"
fill="#e3e3e3">
<path
d="M480-160q-134 0-227-93t-93-227q0-134 93-227t227-93q69 0 132 28.5T720-690v-110h80v280H520v-80h168q-32-56-87.5-88T480-720q-100 0-170 70t-70 170q0 100 70 170t170 70q77 0 139-44t87-116h84q-28 106-114 173t-196 67Z" />
</svg></div>
<div class="text"></div>
</button>
<div class="card">
<svg class="wave" viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg">
<path
d="M0,256L11.4,240C22.9,224,46,192,69,192C91.4,192,114,224,137,234.7C160,245,183,235,206,213.3C228.6,192,251,160,274,149.3C297.1,139,320,149,343,181.3C365.7,213,389,267,411,282.7C434.3,299,457,277,480,250.7C502.9,224,526,192,549,181.3C571.4,171,594,181,617,208C640,235,663,277,686,256C708.6,235,731,149,754,122.7C777.1,96,800,128,823,165.3C845.7,203,869,245,891,224C914.3,203,937,117,960,112C982.9,107,1006,181,1029,197.3C1051.4,213,1074,171,1097,144C1120,117,1143,107,1166,133.3C1188.6,160,1211,224,1234,218.7C1257.1,213,1280,139,1303,133.3C1325.7,128,1349,192,1371,192C1394.3,192,1417,128,1429,96L1440,64L1440,320L1428.6,320C1417.1,320,1394,320,1371,320C1348.6,320,1326,320,1303,320C1280,320,1257,320,1234,320C1211.4,320,1189,320,1166,320C1142.9,320,1120,320,1097,320C1074.3,320,1051,320,1029,320C1005.7,320,983,320,960,320C937.1,320,914,320,891,320C868.6,320,846,320,823,320C800,320,777,320,754,320C731.4,320,709,320,686,320C662.9,320,640,320,617,320C594.3,320,571,320,549,320C525.7,320,503,320,480,320C457.1,320,434,320,411,320C388.6,320,366,320,343,320C320,320,297,320,274,320C251.4,320,229,320,206,320C182.9,320,160,320,137,320C114.3,320,91,320,69,320C45.7,320,23,320,11,320L0,320Z"
fill-opacity="1"></path>
</svg>
<div class="icon-container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" stroke-width="0" fill="currentColor"
stroke="currentColor" class="icon">
<path
d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z">
</path>
</svg>
</div>
<div class="message-text-container">
<p class="message-text">Auth failed</p>
<p class="sub-text">Login first <a id="link" class="link">need help?</a></p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" stroke-width="0" fill="none" stroke="currentColor"
class="cross-icon">
<path fill="currentColor"
d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z"
clip-rule="evenodd" fill-rule="evenodd"></path>
</svg>
</div>
<style>
body {
margin: 0;
padding: 0;
color: #000;
background-color: #0f0f0f;
/* Add these lines */
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
/* full viewport height */
}
/* From Uiverse.io by akshat-patel28 */
.card {
width: 330px;
height: 80px;
border-radius: 8px;
box-sizing: border-box;
padding: 10px 15px;
background-color: #000;
position: relative;
display: grid;
place-items: center;
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-around;
gap: 15px;
}
.wave {
position: absolute;
transform: rotate(90deg);
left: -31px;
top: 32px;
width: 80px;
fill: #fc0c0c3a;
}
.icon-container {
width: 35px;
height: 35px;
display: flex;
justify-content: center;
align-items: center;
background-color: #fc0c0c48;
border-radius: 50%;
margin-left: 8px;
}
.icon {
width: 17px;
height: 17px;
color: #d10d0d;
}
.message-text-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
flex-grow: 1;
}
.message-text,
.sub-text {
margin: 0;
cursor: default;
}
.message-text {
color: #d10d0d;
font-size: 17px;
font-weight: 700;
}
.sub-text {
font-size: 14px;
color: #555;
}
.cross-icon {
width: 18px;
height: 18px;
color: #555;
cursor: pointer;
}
/* From Uiverse.io by vinodjangid07 */
.Btn {
display: flex;
align-items: center;
justify-content: flex-start;
width: 45px;
height: 45px;
border: none;
border-radius: 50%;
cursor: pointer;
position: fixed;
top: 20px;
right: 20px;
overflow: hidden;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);
background-color: rgb(31, 31, 31);
}
/* plus sign */
.sign {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.sign svg {
width: 17px;
}
.sign svg path {
fill: white;
}
/* text */
.text {
position: absolute;
right: 0%;
width: 0%;
opacity: 0;
color: white;
font-size: 1.2em;
font-weight: 600;
}
.link {
color: blue;
}
/* hover effect on button width */
/* button click effect*/
</style>
</body>
</html>