File size: 7,685 Bytes
b5acedb 407704c b5acedb 407704c b5acedb 407704c b5acedb 407704c b5acedb | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | <!DOCTYPE html>
<html lang="ar" 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 href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
'tajawal': ['Tajawal', 'sans-serif']
}
}
}
}
</script>
<style>
body {
font-family: 'Tajawal', sans-serif;
background: linear-gradient(135deg, #fefefe 0%, #f0f0f0 100%);
}
.form-container {
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}
.floating-input:focus + label, .floating-input:not(:placeholder-shown) + label {
transform: translateY(-2rem) scale(0.85);
color: #ef4444;
}
.floating-input:focus {
border-color: #ef4444;
}
.auth-tabs button.active {
color: #ef4444;
border-bottom: 2px solid #ef4444;
}
</style>
</head>
<body class="min-h-screen flex items-center justify-center p-4">
<div class="w-full max-w-md">
<div class="text-center mb-10">
<h1 class="text-3xl font-bold text-gray-800">مرحباً بك في <span class="text-red-500">كاش اب</span></h1>
<p class="text-gray-600 mt-2">منصة آمنة لإدارة حسابك</p>
</div>
<div class="bg-white rounded-2xl form-container overflow-hidden">
<div class="auth-tabs flex border-b">
<button id="login-tab" class="flex-1 py-4 font-medium active">تسجيل الدخول</button>
<button id="register-tab" class="flex-1 py-4 font-medium">إنشاء حساب</button>
</div>
<div class="p-8">
<!-- Login Form -->
<form id="login-form" class="tab-content">
<div class="mb-6 relative">
<input type="email" id="login-email" class="floating-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none peer placeholder-transparent" placeholder=" " required>
<label for="login-email" class="absolute right-4 top-3 text-gray-500 transition-all duration-200 peer-placeholder-shown:top-3 peer-placeholder-shown:text-base peer-focus:top-[-0.5rem] peer-focus:text-sm">البريد الإلكتروني</label>
</div>
<div class="mb-6 relative">
<input type="password" id="login-password" class="floating-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none peer placeholder-transparent" placeholder=" " required>
<label for="login-password" class="absolute right-4 top-3 text-gray-500 transition-all duration-200 peer-placeholder-shown:top-3 peer-placeholder-shown:text-base peer-focus:top-[-0.5rem] peer-focus:text-sm">كلمة المرور</label>
</div>
<div class="flex items-center justify-between mb-6">
<div class="flex items-center">
<input id="remember-me" type="checkbox" class="w-4 h-4 text-red-500 border-gray-300 rounded focus:ring-red-400">
<label for="remember-me" class="mr-2 text-sm text-gray-700">تذكرني</label>
</div>
<a href="#" class="text-sm text-red-500 hover:text-red-700">نسيت كلمة المرور؟</a>
</div>
<button type="submit" class="w-full bg-red-500 hover:bg-red-600 text-white py-3 rounded-lg font-medium transition duration-300">تسجيل الدخول</button>
<div class="mt-6 text-center">
<p class="text-gray-600">أو سجل باستخدام</p>
<div class="flex justify-center space-x-4 mt-4">
<button type="button" class="p-2 border border-gray-300 rounded-full hover:bg-gray-50">
<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm3 8h-1.35c-.538 0-.65.221-.65.778v1.222h2l-.209 2h-1.791v7h-3v-7h-2v-2h2v-2.308c0-1.769.931-2.692 3.029-2.692h1.971v3z"/></svg>
</button>
<button type="button" class="p-2 border border-gray-300 rounded-full hover:bg-gray-50">
<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2.033 16.01c.564-1.789 1.632-3.932 1.821-4.474.273-.787-.211-1.136-1.74.209l-.34-.64c1.744-1.897 5.335-2.326 4.113.613-.763 1.835-1.309 3.074-1.621 4.03-.455 1.393.694.723 1.596-.35 2.05-2.442 2.194-5.142.854-5.007-1.814.182-3.429 2.406-3.429 2.406s-1.057-1.867-3.429-2.406c-1.34-.135-1.196 2.565.854 5.007.902 1.073 2.051 1.743 1.596.35-.312-.956-.858-2.195-1.621-4.03-1.242-2.94-4.833-2.51-3.089.387-.211.321-.34.64-.34.64.571-1.035 1.493-2.278 2.033-4.01.191-.542 1.259-2.685 1.821-4.474.444.697.86 1.835.86 1.835s1.596-2.278 3.429-2.278c1.833 0 3.429 2.278 3.429 2.278s.416-1.138.86-1.835c.54-.789 1.462-2.032 2.033-4.01.561 1.732 1.629 3.975 1.821 4.01.539 1.732 1.461 3.975 2.033 4.01.539 1.732 1.461 3.975 2.033 4.01.539 1.732 1.461 3.975 2.033 4.01-.191.542-1.259 2.685-1.821 4.474-.444-.697-.86-1.835-.86-1.835s-1.596 2.278-3.429 2.278c-1.833 0-3.429-2.278-3.429-2.278s-.416 1.138-.86 1.835c-.54.789-1.462 2.032-2.033 4.01-.561-1.732-1.629-3.975-1.821-4.01-.539-1.732-1.461-3.975-2.033-4.01-.539-1.732-1.461-3.975-2.033-4.01.191-.542 1.259-2.685 1.821-4.474.444.697.86 1.835.86 1.835s1.596-2.278 3.429-2.278c1.833 0 3.429 2.278 3.429 2.278s.416-1.138.86-1.835c.54-.789 1.462-2.032 2.033-4.01.561 1.732 1.629 3.975 1.821 4.01.539 1.732 1.461 3.975 2.033 4.01.539 1.732 1.461 3.975 2.033 4.01-.191.542-1.259 2.685-1.821 4.474-.444-.697-.86-1.835-.86-1.835s-1.596 2.278-3.429 2.278c-1.833 0-3.429-2.278-3.429-2.278s-.416 1.138-.86 1.835c-.54.789-1.462 2.032-2.033 4.01-.561-1.732-1.629-3.975-1.821-4.01-.539-1.732-1.461-3.975-2.033-4.01-.539-1.732-1.461-3.975-2.033-4.01.191-.542 1.259-2.685 1.821-4.474.444.697.86 1.835.86 1.835s1.596-2.278 3.429-2.278c1.833 0 3.429 2.278 3.429 2.278s.416-1.138.86-1.835c.54-.789 1.462-2.032 2.033-4.01.561 1.732 1.629 3.975 1.821 4.01.539 1.732 1.461 3.975 2.033 4.01.539 1.732 1.461 3.975 2.033 4.01-.191.542-1.259 2.685-1.821 4.474-.444-.697-.86-1.835-.86-1.835s-1.596 2.278-3.429 2.278c-1.833 0-3.429-2.278-3.429-2.278s-.416 1.138-.86 1.835c-.54.789-1.462 2.032-2.033 4.01-.561-1.732-1.629-3.975-1.821-4.01-.539-1.732-1.461-3.975-2.033-4.01-.539-1.732-1.461-3.975-2.033-4.01.191-.542 1.259-2.685 1.821-4.474.444.697.86 1.835.86 1.835s1.596-2.278 3.429-2.278c1.833 0 3.429 2.278 3.429 2.278s.416-1.138.86-1.835c.54-.789 1.462-2.032 2.033-4.01.561 1.732 1.629 3.975 1.821 4.01.539 1.732 1.461 3.975 2.033 4.01.539 1.732 1.461 3.975 2.033 4.01-.191.542-1.259 2.685-1.821 4.474-.444-.697-.86-1.835-.86-1.835s-1.596 2.278-3.429 2.278c-1.833 0-3.429-2.278-3.429-2.278s-.416 1.138-.86 1.835c-.54.789-1.462 2.032-2.033 4.01-.561-1.732-1.629-3.975-1.821-4.01-.539-1.732-1.461-3.975-2.033-4.01-.539-1.732-1.461-3.975-2.033-
</body>
</html> |