Hugging Face's logo

Spaces:
x1101
/
mass
Running

App Files Community
mass / index.html
x1101's picture
x1101
make cool login form with 2 seperate sign in and login side by side, with fluid animation, add animated matrix background - Follow Up Deployment
f4a4ecb verified
Raw
History Blame Contribute Delete
15.2 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Animated Login Form</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">
 <style>
 @keyframes float {
 0%, 100% {
 transform: translateY(0);
 }
 50% {
 transform: translateY(-20px);
 }
 }
@keyframes fadeIn {
 from {
 opacity: 0;
 transform: translateY(20px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
 }
@keyframes matrix {
 0% {
 transform: translateY(0);
 }
 100% {
 transform: translateY(-100%);
 }
 }
.matrix-bg {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 overflow: hidden;
 z-index: -1;
 background-color: #000;
 }
.matrix-column {
 position: relative;
 display: inline-block;
 width: 1.2ch;
 color: #0f0;
 font-family: monospace;
 font-size: 16px;
 text-shadow: 0 0 5px #0f0;
 animation: matrix 5s linear infinite;
 animation-delay: calc(var(--delay) * 0.1s);
 }
.form-container {
 perspective: 1000px;
 }
.form-card {
 transition: transform 0.6s, box-shadow 0.3s;
 transform-style: preserve-3d;
 }
.form-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
 }
.float-animation {
 animation: float 6s ease-in-out infinite;
 }
.fade-in {
 animation: fadeIn 0.8s ease-out forwards;
 }
.delay-1 {
 animation-delay: 0.2s;
 }
.delay-2 {
 animation-delay: 0.4s;
 }
.delay-3 {
 animation-delay: 0.6s;
 }
.glow-text {
 text-shadow: 0 0 10px rgba(74, 222, 128, 0.7);
 }
.glow-input:focus {
 box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.5);
 }
.toggle-form {
 position: relative;
 overflow: hidden;
 }
.toggle-form::after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 3px;
 background: linear-gradient(90deg, #4ade80, #3b82f6);
 transform: scaleX(0);
 transform-origin: left;
 transition: transform 0.3s ease;
 }
.toggle-form.active::after {
 transform: scaleX(1);
 }
 </style>
</head>
<body class="bg-gray-900 text-white min-h-screen flex items-center justify-center p-4 overflow-hidden">
 <!-- Matrix Background -->
 <div class="matrix-bg" id="matrixBg"></div>
<div class="container mx-auto max-w-6xl">
 <div class="flex flex-col lg:flex-row items-center justify-center gap-8">
 <!-- Left Side - Sign In -->
 <div class="form-container w-full lg:w-1/2 fade-in">
 <div class="form-card bg-gray-800 bg-opacity-70 backdrop-blur-md rounded-xl p-8 shadow-2xl border border-gray-700 float-animation">
 <div class="flex justify-between items-center mb-8">
 <h2 class="text-3xl font-bold glow-text">Welcome Back</h2>
 <div class="flex space-x-1 bg-gray-700 rounded-full p-1">
 <button class="toggle-form px-4 py-2 rounded-full active" id="loginTab">Sign In</button>
 <button class="toggle-form px-4 py-2 rounded-full" id="signupTab">Sign Up</button>
 </div>
 </div>
<form id="loginForm" class="space-y-6">
 <div class="space-y-2 fade-in delay-1">
 <label class="block text-sm font-medium text-gray-300">Email</label>
 <input type="email" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none glow-input transition-all" placeholder="your@email.com" required>
 </div>
<div class="space-y-2 fade-in delay-2">
 <label class="block text-sm font-medium text-gray-300">Password</label>
 <input type="password" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none glow-input transition-all" placeholder="β€’β€’β€’β€’β€’β€’β€’β€’" required>
 </div>
<div class="flex items-center justify-between fade-in delay-3">
 <div class="flex items-center">
 <input type="checkbox" id="remember" class="w-4 h-4 text-green-500 bg-gray-700 border-gray-600 rounded focus:ring-green-500">
 <label for="remember" class="ml-2 text-sm text-gray-300">Remember me</label>
 </div>
 <a href="#" class="text-sm text-green-400 hover:text-green-300 transition">Forgot password?</a>
 </div>
<button type="submit" class="w-full py-3 px-4 bg-gradient-to-r from-green-500 to-blue-500 text-white font-medium rounded-lg hover:from-green-600 hover:to-blue-600 transition-all transform hover:scale-105 fade-in delay-3">
 Sign In
 </button>
<div class="text-center text-gray-400 fade-in delay-3">
 <p>Or continue with</p>
 </div>
<div class="flex justify-center space-x-4 fade-in delay-3">
 <button type="button" class="p-2 bg-gray-700 rounded-full hover:bg-gray-600 transition">
 <i class="fab fa-google text-red-400"></i>
 </button>
 <button type="button" class="p-2 bg-gray-700 rounded-full hover:bg-gray-600 transition">
 <i class="fab fa-facebook-f text-blue-400"></i>
 </button>
 <button type="button" class="p-2 bg-gray-700 rounded-full hover:bg-gray-600 transition">
 <i class="fab fa-twitter text-blue-300"></i>
 </button>
 </div>
 </form>
 </div>
 </div>
<!-- Right Side - Sign Up -->
 <div class="form-container w-full lg:w-1/2 fade-in delay-1">
 <div class="form-card bg-gray-800 bg-opacity-70 backdrop-blur-md rounded-xl p-8 shadow-2xl border border-gray-700 float-animation" style="animation-delay: 0.5s;">
 <div class="mb-8">
 <h2 class="text-3xl font-bold glow-text">Create Account</h2>
 <p class="text-gray-400">Join our community today</p>
 </div>
<form id="signupForm" class="space-y-6">
 <div class="grid grid-cols-1 md:grid-cols-2 gap-4 fade-in delay-1">
 <div class="space-y-2">
 <label class="block text-sm font-medium text-gray-300">First Name</label>
 <input type="text" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none glow-input transition-all" placeholder="John" required>
 </div>
 <div class="space-y-2">
 <label class="block text-sm font-medium text-gray-300">Last Name</label>
 <input type="text" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none glow-input transition-all" placeholder="Doe" required>
 </div>
 </div>
<div class="space-y-2 fade-in delay-2">
 <label class="block text-sm font-medium text-gray-300">Email</label>
 <input type="email" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none glow-input transition-all" placeholder="your@email.com" required>
 </div>
<div class="space-y-2 fade-in delay-3">
 <label class="block text-sm font-medium text-gray-300">Password</label>
 <input type="password" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none glow-input transition-all" placeholder="β€’β€’β€’β€’β€’β€’β€’β€’" required>
 </div>
<div class="space-y-2 fade-in delay-3">
 <label class="block text-sm font-medium text-gray-300">Confirm Password</label>
 <input type="password" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none glow-input transition-all" placeholder="β€’β€’β€’β€’β€’β€’β€’β€’" required>
 </div>
<div class="flex items-center fade-in delay-3">
 <input type="checkbox" id="terms" class="w-4 h-4 text-green-500 bg-gray-700 border-gray-600 rounded focus:ring-green-500" required>
 <label for="terms" class="ml-2 text-sm text-gray-300">
 I agree to the <a href="#" class="text-green-400 hover:text-green-300 transition">Terms</a> and <a href="#" class="text-green-400 hover:text-green-300 transition">Privacy Policy</a>
 </label>
 </div>
<button type="submit" class="w-full py-3 px-4 bg-gradient-to-r from-blue-500 to-purple-500 text-white font-medium rounded-lg hover:from-blue-600 hover:to-purple-600 transition-all transform hover:scale-105 fade-in delay-3">
 Sign Up
 </button>
 </form>
 </div>
 </div>
 </div>
 </div>
<script>
 // Matrix background effect
 document.addEventListener('DOMContentLoaded', function() {
 const matrixBg = document.getElementById('matrixBg');
 const chars = "01をむウエγ‚ͺγ‚«γ‚­γ‚―γ‚±γ‚³γ‚΅γ‚·γ‚Ήγ‚»γ‚½γ‚Ώγƒγƒ„γƒ†γƒˆγƒŠγƒ‹γƒŒγƒγƒŽγƒγƒ’γƒ•γƒ˜γƒ›γƒžγƒŸγƒ γƒ‘γƒ’γƒ€γƒ¦γƒ¨γƒ©γƒͺルレロワヲン";
const fontSize = 16;
 const columns = Math.floor(window.innerWidth / (fontSize * 1.2));
for (let i = 0; i < columns; i++) {
 const column = document.createElement('div');
 column.className = 'matrix-column';
 column.style.left = i * (fontSize * 1.2) + 'px';
 column.style.animationDuration = (5 + Math.random() * 10) + 's';
 column.style.setProperty('--delay', i);
// Create initial characters
 const rows = Math.floor(window.innerHeight / fontSize) + 1;
 for (let j = 0; j < rows; j++) {
 const char = document.createElement('div');
 char.textContent = chars.charAt(Math.floor(Math.random() * chars.length));
 char.style.opacity = Math.random();
 column.appendChild(char);
 }
matrixBg.appendChild(column);
// Animate the column
 setInterval(() => {
 const firstChar = column.firstChild;
 const newChar = document.createElement('div');
 newChar.textContent = chars.charAt(Math.floor(Math.random() * chars.length));
 newChar.style.opacity = Math.random();
column.removeChild(firstChar);
 column.appendChild(newChar);
 }, 100 + Math.random() * 200);
 }
// Form toggle functionality
 const loginTab = document.getElementById('loginTab');
 const signupTab = document.getElementById('signupTab');
 const loginForm = document.getElementById('loginForm');
 const signupForm = document.getElementById('signupForm');
loginTab.addEventListener('click', function(e) {
 e.preventDefault();
 loginTab.classList.add('active');
 signupTab.classList.remove('active');
 loginForm.style.display = 'block';
 signupForm.style.display = 'none';
 });
signupTab.addEventListener('click', function(e) {
 e.preventDefault();
 signupTab.classList.add('active');
 loginTab.classList.remove('active');
 signupForm.style.display = 'block';
 loginForm.style.display = 'none';
 });
// Form submission
 loginForm.addEventListener('submit', function(e) {
 e.preventDefault();
 alert('Login functionality would go here!');
 });
signupForm.addEventListener('submit', function(e) {
 e.preventDefault();
 alert('Sign up functionality would go here!');
 });
 });
 </script>
<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=x1101/mass" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>