Spaces:
Sleeping
Sleeping
File size: 2,261 Bytes
fe2b114 d55f20a fe2b114 d55f20a fe2b114 d55f20a fe2b114 d55f20a fe2b114 d55f20a fe2b114 d55f20a f3b07fa fe2b114 d55f20a fe2b114 d55f20a fe2b114 d55f20a fe2b114 d55f20a fe2b114 d55f20a fe2b114 d55f20a fe2b114 d55f20a fe2b114 d55f20a fe2b114 d55f20a fe2b114 d55f20a fe2b114 d55f20a fe2b114 d55f20a fe2b114 d55f20a fe2b114 d55f20a fe2b114 d55f20a |
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 |
/* Basic reset */
* { box-sizing: border-box; }
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #8a4af3, #e73c7e);
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
.container {
background: rgba(255, 255, 255, 0.15);
padding: 35px 45px;
border-radius: 20px;
width: 100%;
max-width: 420px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.25);
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.container:hover {
transform: translateY(-5px);
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.3);
}
h2 {
margin-bottom: 30px;
font-weight: 700;
letter-spacing: 1.2px;
color: #f5e6ff;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0);
}
input {
width: 100%;
padding: 14px 18px;
margin: 12px 0;
border-radius: 10px;
border: none;
outline: none;
font-size: 16px;
background-color: rgba(255, 255, 255, 0.1);
color: #fff;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
input:focus {
background-color: rgba(255, 255, 255, 0.25);
box-shadow: 0 0 8px rgba(231, 60, 126, 0.5);
}
button {
width: 100%;
padding: 14px 18px;
margin-top: 20px;
background: linear-gradient(90deg, #e73c7e, #ff8e53);
border: none;
border-radius: 10px;
color: white;
font-weight: 600;
font-size: 18px;
cursor: pointer;
transition: background 0.3s ease, transform 0.2s ease;
}
button:hover {
background: linear-gradient(90deg, #ff8e53, #e73c7e);
transform: scale(1.02);
}
.prediction-box {
margin-top: 25px;
padding: 18px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 12px;
text-align: center;
font-size: 18px;
color: #f0f0f0;
}
#signupMessage, #loginMessage {
margin-top: 18px;
font-weight: 600;
color: #e6e6ff;
}
.switch-page {
margin-top: 25px;
font-size: 15px;
color: #e0e0e0;
}
.switch-page a {
color: #ff9ab8;
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
.switch-page a:hover {
color: #f5e6ff;
text-decoration: underline;
} |