| <!DOCTYPE html> |
| <html lang="fa" dir="rtl"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>ورود به دنیای گلها</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> |
| @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100..900&display=swap'); |
| |
| body { |
| font-family: 'Vazirmatn', sans-serif; |
| background: url('https://images.unsplash.com/photo-1530103862676-de8c9debad1d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') no-repeat center center fixed; |
| background-size: cover; |
| position: relative; |
| } |
| |
| body::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background-color: rgba(255, 255, 255, 0.7); |
| z-index: -1; |
| } |
| |
| .input-focus:focus { |
| box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.3); |
| border-color: #a78bfa; |
| } |
| |
| .btn-primary { |
| background: linear-gradient(to right, #a78bfa, #8b5cf6); |
| transition: all 0.3s ease; |
| } |
| |
| .btn-primary:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 20px -5px rgba(167, 139, 250, 0.5); |
| } |
| |
| .floral-decoration { |
| position: absolute; |
| width: 100px; |
| height: 100px; |
| opacity: 0.7; |
| } |
| |
| .floral-decoration-1 { |
| top: -30px; |
| left: -30px; |
| transform: rotate(45deg); |
| } |
| |
| .floral-decoration-2 { |
| bottom: -30px; |
| right: -30px; |
| transform: rotate(-45deg); |
| } |
| |
| .login-container { |
| backdrop-filter: blur(5px); |
| background-color: rgba(255, 255, 255, 0.85); |
| border: 1px solid rgba(255, 255, 255, 0.3); |
| } |
| |
| |
| @keyframes float { |
| 0% { transform: translateY(0px) rotate(45deg); } |
| 50% { transform: translateY(-10px) rotate(45deg); } |
| 100% { transform: translateY(0px) rotate(45deg); } |
| } |
| |
| @keyframes float2 { |
| 0% { transform: translateY(0px) rotate(-45deg); } |
| 50% { transform: translateY(10px) rotate(-45deg); } |
| 100% { transform: translateY(0px) rotate(-45deg); } |
| } |
| |
| .floral-decoration-1 { |
| animation: float 6s ease-in-out infinite; |
| } |
| |
| .floral-decoration-2 { |
| animation: float2 6s ease-in-out infinite; |
| } |
| |
| |
| .notification { |
| position: fixed; |
| top: 20px; |
| right: 20px; |
| background: linear-gradient(to right, #4ade80, #22c55e); |
| color: white; |
| padding: 16px 24px; |
| border-radius: 12px; |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
| display: flex; |
| align-items: center; |
| max-width: 350px; |
| transform: translateX(150%); |
| transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); |
| z-index: 1000; |
| } |
| |
| .notification.show { |
| transform: translateX(0); |
| } |
| |
| .notification-icon { |
| font-size: 24px; |
| margin-left: 12px; |
| } |
| |
| .notification-content { |
| flex: 1; |
| } |
| |
| .notification-title { |
| font-weight: 600; |
| margin-bottom: 4px; |
| } |
| |
| .notification-message { |
| font-size: 14px; |
| opacity: 0.9; |
| } |
| |
| .notification-close { |
| background: none; |
| border: none; |
| color: white; |
| font-size: 16px; |
| cursor: pointer; |
| opacity: 0.7; |
| transition: opacity 0.2s; |
| margin-right: -8px; |
| margin-left: 12px; |
| } |
| |
| .notification-close:hover { |
| opacity: 1; |
| } |
| |
| @keyframes float-up { |
| 0% { transform: translateY(100px); opacity: 0; } |
| 100% { transform: translateY(0); opacity: 1; } |
| } |
| |
| @keyframes float-down { |
| 0% { transform: translateY(0); opacity: 1; } |
| 100% { transform: translateY(100px); opacity: 0; } |
| } |
| </style> |
| </head> |
| <body class="min-h-screen flex items-center justify-center p-4"> |
| |
| <div id="notification" class="notification"> |
| <div class="notification-icon"> |
| <i class="fas fa-check-circle"></i> |
| </div> |
| <div class="notification-content"> |
| <div class="notification-title">ورود موفقیتآمیز بود!</div> |
| <div class="notification-message">خوش آمدید! در حال انتقال به صفحه اصلی...</div> |
| </div> |
| <button class="notification-close" id="closeNotification"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| |
| <div class="relative max-w-md w-full rounded-2xl shadow-xl overflow-hidden login-container"> |
| |
| <div class="floral-decoration floral-decoration-1"> |
| <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> |
| <path d="M50 30C40 30 30 40 30 50C30 60 40 70 50 70C60 70 70 60 70 50C70 40 60 30 50 30Z" fill="#a78bfa" opacity="0.3"/> |
| <path d="M50 50C45 45 40 40 35 35C30 30 25 25 20 20C15 25 10 30 5 35C10 40 15 45 20 50C25 55 30 60 35 65C40 60 45 55 50 50Z" fill="#f472b6" opacity="0.3"/> |
| </svg> |
| </div> |
| |
| <div class="floral-decoration floral-decoration-2"> |
| <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> |
| <path d="M50 30C40 30 30 40 30 50C30 60 40 70 50 70C60 70 70 60 70 50C70 40 60 30 50 30Z" fill="#f472b6" opacity="0.3"/> |
| <path d="M50 50C45 45 40 40 35 35C30 30 25 25 20 20C15 25 10 30 5 35C10 40 15 45 20 50C25 55 30 60 35 65C40 60 45 55 50 50Z" fill="#a78bfa" opacity="0.3"/> |
| </svg> |
| </div> |
| |
| |
| <div class="bg-gradient-to-r from-purple-400 to-pink-400 p-6 text-center"> |
| <h1 class="text-2xl font-bold text-white">به گلستان خوش آمدید</h1> |
| <p class="text-white opacity-90 mt-2">دنیای زیبایی را با گلهای ما تجربه کنید</p> |
| </div> |
| |
| |
| <div class="p-8 pt-6"> |
| <form id="loginForm" class="space-y-6"> |
| <div class="relative"> |
| <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-gray-400"> |
| <i class="fas fa-user"></i> |
| </div> |
| <input |
| type="text" |
| id="username" |
| class="w-full pr-10 pl-4 py-3 rounded-lg border border-gray-300 input-focus focus:outline-none transition-all duration-200" |
| placeholder="نام کاربری یا ایمیل" |
| required |
| > |
| </div> |
| |
| <div class="relative"> |
| <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-gray-400"> |
| <i class="fas fa-lock"></i> |
| </div> |
| <input |
| type="password" |
| id="password" |
| class="w-full pr-10 pl-4 py-3 rounded-lg border border-gray-300 input-focus focus:outline-none transition-all duration-200" |
| placeholder="رمز عبور" |
| required |
| > |
| <button type="button" class="absolute left-0 inset-y-0 flex items-center pl-3 text-gray-400 hover:text-gray-600"> |
| <i class="fas fa-eye-slash" id="togglePassword"></i> |
| </button> |
| </div> |
| |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center"> |
| <input id="remember-me" type="checkbox" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded"> |
| <label for="remember-me" class="mr-2 block text-sm text-gray-700">مرا به خاطر بسپار</label> |
| </div> |
| <a href="#" class="text-sm text-purple-600 hover:text-purple-500">رمز عبور را فراموش کردهاید؟</a> |
| </div> |
| |
| <button type="submit" class="w-full py-3 px-4 rounded-lg text-white font-medium btn-primary"> |
| ورود به حساب کاربری |
| </button> |
| |
| <div class="relative flex items-center justify-center"> |
| <div class="absolute inset-0 border-t border-gray-200"></div> |
| <div class="relative bg-white px-4 text-sm text-gray-500">یا</div> |
| </div> |
| |
| <div class="grid grid-cols-2 gap-4"> |
| <button type="button" class="flex items-center justify-center py-2 px-4 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"> |
| <i class="fab fa-google text-red-500 mr-2"></i> |
| <span>گوگل</span> |
| </button> |
| <button type="button" class="flex items-center justify-center py-2 px-4 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"> |
| <i class="fab fa-apple text-gray-800 mr-2"></i> |
| <span>اپل</span> |
| </button> |
| </div> |
| </form> |
| |
| <div class="mt-6 text-center text-sm text-gray-500"> |
| حساب کاربری ندارید؟ |
| <a href="#" class="font-medium text-purple-600 hover:text-purple-500">ثبتنام کنید</a> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| document.getElementById('togglePassword').addEventListener('click', function() { |
| const passwordInput = document.getElementById('password'); |
| const icon = this; |
| |
| if (passwordInput.type === 'password') { |
| passwordInput.type = 'text'; |
| icon.classList.replace('fa-eye-slash', 'fa-eye'); |
| } else { |
| passwordInput.type = 'password'; |
| icon.classList.replace('fa-eye', 'fa-eye-slash'); |
| } |
| }); |
| |
| |
| function showNotification() { |
| const notification = document.getElementById('notification'); |
| notification.classList.add('show'); |
| |
| |
| setTimeout(() => { |
| hideNotification(); |
| }, 5000); |
| } |
| |
| function hideNotification() { |
| const notification = document.getElementById('notification'); |
| notification.classList.remove('show'); |
| } |
| |
| |
| document.getElementById('closeNotification').addEventListener('click', hideNotification); |
| |
| document.getElementById('loginForm').addEventListener('submit', function(e) { |
| e.preventDefault(); |
| |
| const username = document.getElementById('username').value; |
| const password = document.getElementById('password').value; |
| const loginButton = document.querySelector('.btn-primary'); |
| |
| |
| loginButton.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> در حال ورود...'; |
| |
| |
| console.log('Login attempt with:', { username, password }); |
| |
| |
| setTimeout(() => { |
| |
| loginButton.innerHTML = '<i class="fas fa-check mr-2"></i> ورود موفق'; |
| loginButton.classList.remove('from-purple-400', 'to-pink-400'); |
| loginButton.classList.add('from-green-400', 'to-teal-400'); |
| |
| |
| showNotification(); |
| |
| |
| for (let i = 0; i < 5; i++) { |
| createFloatingFlower(); |
| } |
| |
| |
| setTimeout(() => { |
| window.location.href = "#"; |
| }, 3000); |
| |
| }, 1500); |
| }); |
| |
| function createFloatingFlower() { |
| const flower = document.createElement('div'); |
| flower.className = 'absolute z-50'; |
| |
| |
| const flowers = ['fa-leaf', 'fa-seedling', 'fa-spa', 'fa-feather-alt']; |
| const randomFlower = flowers[Math.floor(Math.random() * flowers.length)]; |
| |
| |
| const colors = ['text-purple-400', 'text-pink-400', 'text-green-500', 'text-yellow-400']; |
| const randomColor = colors[Math.floor(Math.random() * colors.length)]; |
| |
| flower.innerHTML = `<i class="fas ${randomFlower} ${randomColor} text-xl"></i>`; |
| |
| |
| const startX = Math.random() * window.innerWidth; |
| const startY = window.innerHeight + 50; |
| |
| flower.style.left = `${startX}px`; |
| flower.style.top = `${startY}px`; |
| |
| document.body.appendChild(flower); |
| |
| |
| const duration = Math.random() * 3000 + 2000; |
| const endY = -50; |
| const rotation = Math.random() * 360; |
| |
| flower.animate([ |
| { |
| transform: `translateY(0) rotate(0deg)`, |
| opacity: 1 |
| }, |
| { |
| transform: `translateY(${endY}px) rotate(${rotation}deg)`, |
| opacity: 0 |
| } |
| ], { |
| duration: duration, |
| easing: 'cubic-bezier(0.4, 0, 0.2, 1)' |
| }); |
| |
| |
| setTimeout(() => { |
| flower.remove(); |
| }, duration); |
| } |
| </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=Amin1838/flower" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
