Initial commit

public/verify-email.css

@@ -0,0 +1,181 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Arial', sans-serif;
+    background: linear-gradient(135deg, #000000 0%, #333333 100%);
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+}
+
+.verify-container {
+    width: 100%;
+    max-width: 500px;
+}
+
+.verify-card {
+    background: #000000;
+    border: 2px solid #FFB400;
+    border-radius: 15px;
+    padding: 40px;
+    text-align: center;
+    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.3);
+}
+
+/* Hidden class */
+.hidden {
+    display: none !important;
+}
+
+/* Verifying state */
+.verifying {
+    color: #ffffff;
+}
+
+.verifying h2 {
+    color: #FFD700;
+    margin-bottom: 20px;
+    font-size: 2rem;
+    font-weight: bold;
+}
+
+/* Spinner */
+.spinner {
+    width: 50px;
+    height: 50px;
+    border: 4px solid #333333;
+    border-top: 4px solid #FFD700;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin: 0 auto 20px;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* Success state */
+.success h2 {
+    color: #FFD700;
+    margin-bottom: 20px;
+    font-size: 2rem;
+    font-weight: bold;
+}
+
+.success p {
+    color: #ffffff;
+    margin-bottom: 20px;
+    font-size: 1.1rem;
+    line-height: 1.5;
+}
+
+.redirect-message {
+    color: #FFD700 !important;
+    font-weight: bold;
+    margin-bottom: 30px !important;
+}
+
+/* Success icon */
+.success-icon {
+    width: 80px;
+    height: 80px;
+    background: #FFD700;
+    color: #000000;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 2.5rem;
+    font-weight: bold;
+    margin: 0 auto 20px;
+    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
+}
+
+/* Error state */
+.error h2 {
+    color: #ff4444;
+    margin-bottom: 20px;
+    font-size: 2rem;
+    font-weight: bold;
+}
+
+.error p {
+    color: #ffffff;
+    margin-bottom: 20px;
+    font-size: 1.1rem;
+    line-height: 1.5;
+}
+
+/* Error icon */
+.error-icon {
+    width: 80px;
+    height: 80px;
+    background: #ff4444;
+    color: #ffffff;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 2.5rem;
+    font-weight: bold;
+    margin: 0 auto 20px;
+    box-shadow: 0 5px 15px rgba(255, 68, 68, 0.4);
+}
+
+/* Buttons */
+.home-btn, .retry-btn {
+    background: #FFD700;
+    color: #000000;
+    border: none;
+    padding: 12px 30px;
+    border-radius: 8px;
+    font-size: 1.1rem;
+    font-weight: bold;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    margin-top: 10px;
+}
+
+.home-btn:hover, .retry-btn:hover {
+    background: #ffed4e;
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
+}
+
+.retry-btn {
+    background: #ff4444;
+    color: #ffffff;
+}
+
+.retry-btn:hover {
+    background: #ff6666;
+    box-shadow: 0 5px 15px rgba(255, 102, 102, 0.4);
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .verify-card {
+        padding: 30px 20px;
+        margin: 20px;
+    }
+
+    .verifying h2, .success h2, .error h2 {
+        font-size: 1.5rem;
+    }
+
+    .success p, .error p {
+        font-size: 1rem;
+    }
+
+    .home-btn, .retry-btn {
+        padding: 10px 25px;
+        font-size: 1rem;
+    }
+}