Spaces:
Running
Running
please create a badass amazing Login sign in page for a project called 3rdParty - Initial Deployment
a247e80 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>3rdParty | Secure Access</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'cyber-blue': '#00eeff', | |
| 'cyber-purple': '#bd00ff', | |
| 'dark-bg': '#0a0a1a', | |
| }, | |
| animation: { | |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'float': 'float 6s ease-in-out infinite', | |
| 'neon-glow': 'neon-glow 1.5s ease-in-out infinite alternate', | |
| }, | |
| keyframes: { | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-20px)' }, | |
| }, | |
| 'neon-glow': { | |
| '0%': { 'text-shadow': '0 0 5px #fff, 0 0 10px #fff, 0 0 15px #00eeff, 0 0 20px #00eeff, 0 0 25px #00eeff, 0 0 30px #00eeff, 0 0 35px #00eeff' }, | |
| '100%': { 'text-shadow': '0 0 10px #fff, 0 0 20px #fff, 0 0 30px #00eeff, 0 0 40px #00eeff, 0 0 50px #00eeff, 0 0 60px #00eeff, 0 0 70px #00eeff' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Exo+2:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); | |
| body { | |
| font-family: 'Exo 2', sans-serif; | |
| background-color: #0a0a1a; | |
| background-image: | |
| radial-gradient(at 20% 30%, rgba(65, 105, 225, 0.1) 0px, transparent 50%), | |
| radial-gradient(at 80% 70%, rgba(138, 43, 226, 0.1) 0px, transparent 50%); | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| position: relative; | |
| } | |
| .cyber-font { | |
| font-family: 'Orbitron', sans-serif; | |
| } | |
| .cyber-border { | |
| border: 1px solid rgba(0, 238, 255, 0.3); | |
| box-shadow: 0 0 15px rgba(0, 238, 255, 0.2), inset 0 0 10px rgba(0, 238, 255, 0.1); | |
| } | |
| .cyber-input { | |
| background: rgba(10, 15, 30, 0.7); | |
| border: 1px solid rgba(0, 238, 255, 0.4); | |
| transition: all 0.3s ease; | |
| } | |
| .cyber-input:focus { | |
| border-color: #bd00ff; | |
| box-shadow: 0 0 15px rgba(189, 0, 255, 0.5); | |
| outline: none; | |
| } | |
| .cyber-btn { | |
| background: linear-gradient(45deg, #00eeff, #bd00ff); | |
| position: relative; | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .cyber-btn:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 20px rgba(0, 238, 255, 0.3); | |
| } | |
| .cyber-btn:active { | |
| transform: translateY(1px); | |
| } | |
| .cyber-btn::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); | |
| transition: 0.5s; | |
| } | |
| .cyber-btn:hover::before { | |
| left: 100%; | |
| } | |
| .grid-pattern { | |
| background-image: | |
| linear-gradient(rgba(0, 238, 255, 0.1) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(0, 238, 255, 0.1) 1px, transparent 1px); | |
| background-size: 30px 30px; | |
| } | |
| .scanline { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(rgba(0, 238, 255, 0) 50%, rgba(0, 238, 255, 0.05) 50%); | |
| background-size: 100% 4px; | |
| pointer-events: none; | |
| animation: scanline 8s linear infinite; | |
| } | |
| @keyframes scanline { | |
| 0% { background-position: 0 0; } | |
| 100% { background-position: 0 100%; } | |
| } | |
| .glow { | |
| filter: drop-shadow(0 0 8px rgba(0, 238, 255, 0.7)); | |
| } | |
| .social-btn { | |
| transition: all 0.3s ease; | |
| border: 1px solid rgba(0, 238, 255, 0.3); | |
| } | |
| .social-btn:hover { | |
| transform: translateY(-3px); | |
| border-color: #bd00ff; | |
| box-shadow: 0 5px 15px rgba(189, 0, 255, 0.3); | |
| } | |
| .hex-pattern { | |
| background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%2300eeff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E"); | |
| } | |
| </style> | |
| </head> | |
| <body class="text-white relative"> | |
| <!-- Animated Background Elements --> | |
| <div class="fixed top-0 left-0 w-full h-full overflow-hidden z-0"> | |
| <div class="absolute top-10 left-10 w-4 h-4 rounded-full bg-cyber-blue animate-pulse-slow"></div> | |
| <div class="absolute top-1/4 right-20 w-6 h-6 rounded-full bg-cyber-purple animate-pulse-slow animation-delay-1000"></div> | |
| <div class="absolute bottom-20 left-1/3 w-8 h-8 rounded-full bg-cyber-blue animate-pulse-slow animation-delay-2000"></div> | |
| <div class="absolute top-2/3 right-1/4 w-5 h-5 rounded-full bg-cyber-purple animate-pulse-slow animation-delay-3000"></div> | |
| <div class="absolute top-1/3 left-1/4 w-40 h-40 rounded-full bg-cyber-purple opacity-10 animate-pulse-slow"></div> | |
| <div class="absolute bottom-1/4 right-1/3 w-60 h-60 rounded-full bg-cyber-blue opacity-10 animate-pulse-slow animation-delay-2000"></div> | |
| <div class="scanline"></div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="min-h-screen flex items-center justify-center p-4 relative z-10"> | |
| <div class="w-full max-w-4xl flex flex-col md:flex-row bg-dark-bg bg-opacity-80 backdrop-blur-lg rounded-xl overflow-hidden cyber-border"> | |
| <!-- Left Side - Visual Area --> | |
| <div class="w-full md:w-2/5 p-8 flex flex-col justify-center items-center text-center bg-gradient-to-br from-cyan-900/20 to-purple-900/20 relative overflow-hidden"> | |
| <div class="hex-pattern absolute inset-0"></div> | |
| <div class="relative z-10"> | |
| <div class="glow mb-6 animate-float"> | |
| <div class="bg-gray-800 border-2 border-cyber-blue rounded-xl p-4 inline-block"> | |
| <i class="fas fa-cube text-cyber-blue text-5xl"></i> | |
| </div> | |
| </div> | |
| <h1 class="cyber-font text-4xl md:text-5xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-cyber-blue to-cyber-purple animate-neon-glow"> | |
| 3rd<span class="text-cyber-purple">Party</span> | |
| </h1> | |
| <p class="text-cyber-blue font-semibold">SECURE ACCESS PORTAL</p> | |
| <div class="mt-8"> | |
| <div class="flex justify-center space-x-2 mb-4"> | |
| <div class="w-3 h-3 rounded-full bg-cyber-blue"></div> | |
| <div class="w-3 h-3 rounded-full bg-cyber-purple"></div> | |
| <div class="w-3 h-3 rounded-full bg-cyber-blue"></div> | |
| </div> | |
| <p class="text-sm text-gray-400">Advanced security protocols engaged</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Side - Login Form --> | |
| <div class="w-full md:w-3/5 p-8 md:p-12"> | |
| <h2 class="cyber-font text-2xl md:text-3xl font-bold mb-2">Access Restricted</h2> | |
| <p class="text-gray-400 mb-8">Enter your credentials to proceed</p> | |
| <form class="space-y-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-cyber-blue mb-2">USER IDENTIFICATION</label> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-user text-cyber-blue"></i> | |
| </div> | |
| <input type="text" class="cyber-input w-full pl-10 pr-4 py-3 rounded-lg text-white placeholder-gray-500 focus:ring-0" placeholder="Enter your ID"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-cyber-blue mb-2">SECURITY KEY</label> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-lock text-cyber-blue"></i> | |
| </div> | |
| <input type="password" class="cyber-input w-full pl-10 pr-4 py-3 rounded-lg text-white placeholder-gray-500 focus:ring-0" placeholder="••••••••"> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <input id="remember" type="checkbox" class="h-4 w-4 text-cyber-blue focus:ring-cyber-blue border-gray-600 rounded bg-gray-800"> | |
| <label for="remember" class="ml-2 block text-sm text-gray-400">Remember this device</label> | |
| </div> | |
| <a href="#" class="text-sm font-medium text-cyber-blue hover:text-cyber-purple transition">Recover access?</a> | |
| </div> | |
| <div> | |
| <button type="submit" class="cyber-btn w-full py-3 px-4 rounded-lg font-bold text-gray-900 cyber-font text-lg"> | |
| <i class="fas fa-terminal mr-2"></i> AUTHENTICATE | |
| </button> | |
| </div> | |
| <div class="relative flex items-center"> | |
| <div class="flex-grow border-t border-gray-700"></div> | |
| <span class="flex-shrink mx-4 text-gray-500 text-sm">OR CONTINUE WITH</span> | |
| <div class="flex-grow border-t border-gray-700"></div> | |
| </div> | |
| <div class="grid grid-cols-3 gap-3"> | |
| <button class="social-btn py-2 px-4 rounded-lg flex items-center justify-center"> | |
| <i class="fab fa-google text-red-400"></i> | |
| </button> | |
| <button class="social-btn py-2 px-4 rounded-lg flex items-center justify-center"> | |
| <i class="fab fa-microsoft text-blue-400"></i> | |
| </button> | |
| <button class="social-btn py-2 px-4 rounded-lg flex items-center justify-center"> | |
| <i class="fab fa-apple text-gray-200"></i> | |
| </button> | |
| </div> | |
| </form> | |
| <div class="mt-8 text-center"> | |
| <p class="text-gray-500 text-sm"> | |
| New to 3rdParty? | |
| <a href="#" class="text-cyber-blue hover:text-cyber-purple font-medium ml-1">Request access</a> | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <div class="absolute bottom-0 left-0 w-full py-4 text-center text-gray-500 text-sm z-10"> | |
| <p>© 2023 3rdParty Systems. All access monitored. Unauthorized entry prohibited.</p> | |
| <div class="mt-2 flex justify-center space-x-4"> | |
| <a href="#" class="hover:text-cyber-blue transition">Security</a> | |
| <a href="#" class="hover:text-cyber-blue transition">Privacy</a> | |
| <a href="#" class="hover:text-cyber-blue transition">Terms</a> | |
| </div> | |
| </div> | |
| <!-- Floating Particles --> | |
| <div class="fixed top-0 left-0 w-full h-full pointer-events-none z-0"> | |
| <div class="particle absolute top-20 left-1/4 w-2 h-2 bg-cyber-blue rounded-full animate-float"></div> | |
| <div class="particle absolute top-40 right-1/3 w-1.5 h-1.5 bg-cyber-purple rounded-full animate-float animation-delay-2000"></div> | |
| <div class="particle absolute bottom-1/3 left-1/2 w-1 h-1 bg-cyber-blue rounded-full animate-float animation-delay-3000"></div> | |
| <div class="particle absolute top-1/2 right-20 w-2.5 h-2.5 bg-cyber-purple rounded-full animate-float animation-delay-1000"></div> | |
| </div> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=web3district/3rdpartylogin" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |