Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>The Forge - Secure Access</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| /* The main container for the parallax background */ | |
| .parallax-container { | |
| position: relative; | |
| width: 100vw; | |
| height: 100vh; | |
| overflow: hidden; | |
| background-color: #0a0a0a; | |
| } | |
| /* The background image itself, which will be moved by JS */ | |
| .parallax-bg { | |
| position: absolute; | |
| left: -5%; /* Start with a buffer for movement */ | |
| top: -5%; | |
| width: 110%; /* Make image larger than viewport for parallax effect */ | |
| height: 110%; | |
| background-image: url('https://images.unsplash.com/photo-1579952363873-27f3bade9f55?q=80&w=1935&auto=format&fit=crop'); | |
| background-size: cover; | |
| background-position: center center; | |
| transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); | |
| filter: brightness(0.6); | |
| } | |
| /* Custom styling for the form elements to match the theme */ | |
| .form-input { | |
| background-color: rgba(10, 10, 10, 0.7); | |
| border: 1px solid rgba(100, 116, 139, 0.4); | |
| color: #e2e8f0; | |
| transition: all 0.3s ease; | |
| } | |
| .form-input:focus { | |
| background-color: rgba(10, 10, 10, 0.9); | |
| border-color: #f97316; /* Orange accent color from the brief */ | |
| box-shadow: 0 0 15px rgba(249, 115, 22, 0.3); | |
| outline: none; | |
| } | |
| /* Thematic styling for the login button */ | |
| .login-btn { | |
| background-color: #f97316; | |
| color: #ffffff; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| border: none; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 15px rgba(249, 115, 22, 0.2); | |
| } | |
| .login-btn:hover { | |
| background-color: #fb923c; | |
| box-shadow: 0 6px 20px rgba(249, 115, 22, 0.4); | |
| transform: translateY(-2px); | |
| } | |
| /* Styling for the glassmorphism effect on the login panel */ | |
| .access-panel { | |
| background: rgba(17, 24, 39, 0.6); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900"> | |
| <div id="parallax-container" class="parallax-container"> | |
| <!-- The background image that will have the parallax effect --> | |
| <div id="parallax-bg" class="parallax-bg"></div> | |
| <!-- The main content, centered on the page --> | |
| <div class="relative flex items-center justify-center w-full h-full px-4"> | |
| <!-- The "Secure Access Panel" --> | |
| <div class="w-full max-w-md p-8 space-y-6 rounded-lg shadow-2xl access-panel md:p-10"> | |
| <!-- Platform Logo --> | |
| <div class="flex justify-center"> | |
| <svg class="w-16 h-16 text-orange-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> | |
| <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> | |
| <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> | |
| </svg> | |
| </div> | |
| <!-- Header Text --> | |
| <div class="text-center"> | |
| <h1 class="text-3xl font-bold text-white tracking-tight">THE FORGE</h1> | |
| <p class="mt-2 text-sm text-slate-400">Secure Team Entry</p> | |
| </div> | |
| <!-- Login Form --> | |
| <form class="space-y-6"> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-slate-300">Email Address / Username</label> | |
| <div class="mt-1"> | |
| <input id="email" name="email" type="email" autocomplete="email" required | |
| class="w-full px-4 py-3 rounded-md form-input placeholder-slate-500" | |
| placeholder="u.name@team.com"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="password" class="block text-sm font-medium text-slate-300">Password</label> | |
| <div class="mt-1"> | |
| <input id="password" name="password" type="password" autocomplete="current-password" required | |
| class="w-full px-4 py-3 rounded-md form-input placeholder-slate-500" | |
| placeholder="••••••••"> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="text-sm"> | |
| <a href="#" class="font-medium text-orange-500 hover:text-orange-400 transition-colors"> | |
| Forgot password? | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <button type="submit" | |
| class="w-full flex justify-center py-3 px-4 rounded-md shadow-sm text-sm login-btn"> | |
| Login | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // JavaScript for the parallax effect on the background image | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const container = document.getElementById('parallax-container'); | |
| const bg = document.getElementById('parallax-bg'); | |
| // This function handles the mouse movement and updates the background position | |
| container.addEventListener('mousemove', (e) => { | |
| // Calculate the mouse position as a percentage of the window size | |
| const x = e.clientX / window.innerWidth; | |
| const y = e.clientY / window.innerHeight; | |
| // Define the intensity of the parallax effect | |
| const intensity = 10; // A higher number means more movement | |
| // Calculate the new transform values. | |
| // We move the background in the opposite direction of the mouse. | |
| const moveX = -(x * intensity); | |
| const moveY = -(y * intensity); | |
| // Apply the transform to the background element | |
| bg.style.transform = `translate(${moveX}px, ${moveY}px)`; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |