Spaces:

mvbhr
/

webmail-client-interface

Running

App Files Files Community

mvbhr commited on Oct 14, 2025

Commit

65e2215

verified ·

1 Parent(s): 95eac61

criar a tela de login

Browse files

Files changed (2) hide show

index.html +4 -3
login.html +184 -0

index.html CHANGED Viewed

@@ -68,13 +68,14 @@
                     <button class="p-2 rounded-full hover:bg-white hover:bg-opacity-20 transition">
                         <i data-feather="settings" class="text-white"></i>
                     </button>
-                    <div class="flex items-center space-x-2">
-                        <div class="w-8 h-8 rounded-full bg-white bg-opacity-20 flex items-center justify-center">
                             <span class="text-white font-medium">U</span>
                         </div>
                         <span class="text-white font-medium">User</span>
                     </div>
-                </div>
             </div>
         </header>

                     <button class="p-2 rounded-full hover:bg-white hover:bg-opacity-20 transition">
                         <i data-feather="settings" class="text-white"></i>
                     </button>
+                <div class="flex items-center space-x-2">
+                    <div class="w-8 h-8 rounded-full bg-white bg-opacity-20 flex items-center justify-center">
                             <span class="text-white font-medium">U</span>
                         </div>
                         <span class="text-white font-medium">User</span>
                     </div>
+                    <a href="login.html" class="text-white text-opacity-80 hover:text-opacity-100 text-sm transition">Logout</a>
+</div>
             </div>
         </header>

	@@ -0,0 +1,184 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login - Webmail Client</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Inter', sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        }
+        .login-card {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(20px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+        .input-field {
+            background: rgba(255, 255, 255, 0.15);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            transition: all 0.3s ease;
+        }
+        .input-field:focus {
+            background: rgba(255, 255, 255, 0.2);
+            border-color: rgba(255, 255, 255, 0.5);
+            box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
+        }
+        .login-btn {
+            transition: all 0.3s ease;
+        }
+        .login-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
+        }
+    </style>
+</head>
+<body class="bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 min-h-screen flex items-center justify-center p-4">
+    <!-- Background Animation -->
+    <div id="vanta-bg" class="absolute inset-0 z-0"></div>
+    <!-- Login Container -->
+    <div class="relative z-10 w-full max-w-md">
+        <!-- Login Card -->
+        <div class="login-card rounded-2xl p-8 shadow-2xl">
+            <!-- Logo -->
+            <div class="text-center mb-8">
+                <div class="flex items-center justify-center space-x-3 mb-4">
+                    <i data-feather="mail" class="text-white text-2xl"></i>
+                    <h1 class="text-3xl font-bold text-white">WebMail</h1>
+                </div>
+                <p class="text-white text-opacity-80">Sign in to your email account</p>
+            </div>
+            <!-- Login Form -->
+            <form class="space-y-6">
+                <!-- Email Field -->
+                <div>
+                    <label class="block text-white text-sm font-medium mb-2">Email Address</label>
+                    <div class="relative">
+                        <i data-feather="mail" class="absolute left-3 top-3 text-white text-opacity-70"></i>
+                        <input
+                            type="email"
+                            placeholder="Enter your email"
+                            class="input-field w-full py-3 px-4 pl-10 rounded-xl text-white placeholder-white placeholder-opacity-70 focus:outline-none"
+                            required
+                        >
+                    </div>
+                </div>
+                <!-- Password Field -->
+                <div>
+                    <div class="flex items-center justify-between mb-2">
+                        <label class="block text-white text-sm font-medium">Password</label>
+                        <a href="#" class="text-white text-opacity-80 hover:text-opacity-100 text-sm transition">Forgot password?</a>
+                    </div>
+                    <div class="relative">
+                        <i data-feather="lock" class="absolute left-3 top-3 text-white text-opacity-70"></i>
+                        <input
+                            type="password"
+                            placeholder="Enter your password"
+                            class="input-field w-full py-3 px-4 pl-10 rounded-xl text-white placeholder-white placeholder-opacity-70 focus:outline-none"
+                            required
+                        >
+                    </div>
+                </div>
+                <!-- Remember Me -->
+                <div class="flex items-center">
+                    <input
+                        type="checkbox"
+                        id="remember"
+                        class="w-4 h-4 rounded bg-white bg-opacity-20 border-white border-opacity-30 focus:ring-white focus:ring-opacity-50"
+                    >
+                    <label for="remember" class="ml-2 text-white text-opacity-80 text-sm">Remember me</label>
+                </div>
+                <!-- Login Button -->
+                <button
+                    type="submit"
+                    class="login-btn w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white py-3 px-4 rounded-xl font-medium hover:from-blue-600 hover:to-purple-700 transition-all duration-300"
+                >
+                    Sign In
+                </button>
+            </form>
+            <!-- Divider -->
+            <div class="flex items-center my-6">
+                <div class="flex-1 border-t border-white border-opacity-20"></div>
+                <span class="mx-4 text-white text-opacity-60 text-sm">or continue with</button>
+                <!-- Social Login -->
+                <div class="flex justify-center space-x-4 mb-6">
+                    <button class="p-3 rounded-xl bg-white bg-opacity-10 hover:bg-opacity-20 transition">
+                    <i data-feather="github" class="text-white"></i>
+                </button>
+                <button class="p-3 rounded-xl bg-white bg-opacity-10 hover:bg-opacity-20 transition">
+                    <i data-feather="google" class="text-white"></i>
+                </button>
+                <button class="p-3 rounded-xl bg-white bg-opacity-10 hover:bg-opacity-20 transition">
+                    <i data-feather="twitter" class="text-white"></i>
+                </button>
+            </div>
+            <!-- Sign Up Link -->
+            <div class="text-center">
+                <p class="text-white text-opacity-80">
+                    Don't have an account?
+                    <a href="#" class="text-white font-medium hover:underline">Sign up</a>
+                </p>
+            </div>
+        </div>
+        <!-- Footer -->
+        <div class="text-center mt-6">
+            <p class="text-white text-opacity-60 text-sm">© 2024 WebMail. All rights reserved.</p>
+        </div>
+    </div>
+    <script>
+        // Initialize Feather Icons
+        feather.replace();
+        // Initialize Vanta.js Background
+        VANTA.GLOBE({
+            el: "#vanta-bg",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x667eea,
+            color2: 0x764ba2,
+            backgroundColor: 0x0,
+            size: 1.00
+        });
+        // Form submission handler
+        document.querySelector('form').addEventListener('submit', function(e) {
+            e.preventDefault();
+            // Simulate login process
+            const email = this.querySelector('input[type="email"]').value;
+            const password = this.querySelector('input[type="password"]').value;
+            // Show loading state
+            const submitBtn = this.querySelector('button[type="submit"]');
+            const originalText = submitBtn.textContent;
+            submitBtn.textContent = 'Signing in...';
+            submitBtn.disabled = true;
+            // Simulate API call delay
+            setTimeout(() => {
+                // Redirect to main page after successful login
+                window.location.href = 'index.html';
+            }, 1500);
+        });
+    </script>
+</body>
+</html>