صفحة تسجيل دخول
htmlv1MITنُشر ٣ أغسطس ٢٠٢٦· ♥ 0 · ⬇ 1 · 💬 0
صفحة تسجيل دخول لموقعك تحتوي علي حقول البريد وكلمة مرور وبعض مواقع تواصل الاجتماعي للتسجيل سريع، ملف html مكتوب بالغة HTML و CSS يمكنك تغير الوان من خلفية بيضاء و بني داكن الى اي شيء يعجبك
<!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>
<link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap" rel="stylesheet">
<style>
:root {
--bg: #FAFAFA;
--bg-soft: #F3EFEB;
--card: #FFFFFF;
--border: #E0D6CC;
--text: #3C2A1E;
--text-soft: #6B4F3D;
--text-muted: #A08B7A;
--primary: #6B3E2E;
--primary-hover: #4A2C1A;
--primary-light: rgba(107, 62, 46, 0.1);
--radius-lg: 22px;
--shadow: 0 1px 2px rgba(0,0,0,.05), 0 10px 28px -8px rgba(107, 62, 46, 0.15);
}
* { box-sizing:border-box; margin:0; padding:0; outline: none; -webkit-tap-highlight-color: transparent; }
body {
background: var(--bg); color: var(--text);
min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
padding: 0; font-family: 'Tajawal', sans-serif;
}
.topbar { width: 100%; background: var(--bg-soft); border-bottom: 1px solid var(--border); display: flex; justify-content: center; }
.bar-container { width: 100%; max-width: 640px; padding: 12px 16px; display: flex; align-items: center; gap: 8px; }
.brand { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; text-decoration: none !important; }
.brand-name { font-weight: 800; font-size: 18px; color: var(--text); text-decoration: none !important; }
.brand-logo { width: 36px; height: 36px; border-radius: 50%; background: var(--bg); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; }
.brand-logo svg { width: 20px; height: 20px; }
.spacer { flex-grow: 1; min-width: 8px; }
.login-card {
background: var(--card); padding: 35px 25px; width: 100%; max-width: 360px;
margin-top: 60px;
margin-left: auto; margin-right: auto;
border: 1px solid var(--border); border-radius: var(--radius-lg); text-align: center; box-shadow: var(--shadow);
}
.main-logo { width: 100px; height: 100px; margin: -50px auto 25px; border-radius: 50%; background: var(--bg-soft); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 25px rgba(107, 62, 46, 0.1); }
.main-logo svg { width: 50%; height: 50%; }
.login-title { font-size: 26px; font-weight: 800; color: var(--text); margin-bottom: 8px; }
.login-sub { color: var(--text-muted); font-size: 14px; margin-bottom: 30px; }
.form-group { margin-bottom: 18px; text-align: right; }
.form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--text-soft); margin-bottom: 6px; }
.input-wrapper { position: relative; display: flex; align-items: center; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; transition: 0.3s; }
.input-wrapper:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-light); }
.input-wrapper input { width: 100%; padding: 14px 40px; background: transparent; border: none; outline: none; color: var(--text); font-size: 14px; }
.input-wrapper .icon-right { position: absolute; right: 12px; display: flex; align-items: center; color: var(--text-muted); pointer-events: none; }
.input-wrapper .toggle-pw { position: absolute; left: 12px; background: transparent; border: none; color: var(--text-muted); cursor: pointer; padding: 5px; display: flex; align-items: center; transition: color 0.2s; }
.input-wrapper .toggle-pw:hover { color: var(--primary); }
.input-wrapper .toggle-pw.active { color: var(--primary); }
.actions-row { display: flex; justify-content: space-between; align-items: center; margin: 25px 0; font-size: 13px; color: var(--text-muted); }
.actions-row a { color: var(--primary); font-weight: 600; }
.actions-row a:hover { text-decoration: underline; }
.actions-row input.custom-checkbox { appearance: none; width: 18px; height: 18px; background: var(--bg-soft); border: 2px solid var(--primary); border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin-left: 6px; }
.actions-row input.custom-checkbox:checked { background: var(--primary); }
.actions-row input.custom-checkbox:checked::after { content: "✓"; color: #FFFFFF; font-size: 14px; }
.btn-login { width: 100%; padding: 14px; background: var(--primary); color: #FFFFFF; border: none; border-radius: 12px; font-size: 16px; font-weight: 700; cursor: pointer; transition: 0.2s; }
.btn-login:hover { background: var(--primary-hover); transform: translateY(-2px); }
.divider { display: flex; align-items: center; gap: 15px; margin: 25px 0 20px; font-size: 13px; color: var(--text-muted); }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.social-login { display: flex; gap: 12px; margin-bottom: 25px; }
.social-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 10px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; color: var(--text); font-weight: 500; font-size: 14px; transition: 0.2s; cursor: pointer; }
.social-btn:hover { background: var(--primary-light); border-color: var(--primary); }
.social-btn svg { display: block; flex-shrink: 0; }
.social-btn span {
display: inline-block;
transform: translateY(0px);
}
.create-account { font-size: 14px; color: var(--text-muted); margin-top: 10px; }
.create-account a { color: var(--primary); font-weight: 700; text-decoration: none; }
.create-account a:hover { text-decoration: underline; }
@media (max-width: 480px) {
.login-card { margin-top: 50px; padding: 25px 15px; }
.main-logo { width: 80px; height: 80px; margin: -40px auto 20px; }
}
</style>
</head>
<body>
<header class="topbar">
<div class="bar-container">
<div class="spacer"></div>
<a href="#" class="brand">
<span class="brand-name">أضف اسم موقعك</span>
<span class="brand-logo">
<svg viewBox="0 0 24 24" fill="none" stroke="#6B3E2E" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M8 6 L2 12 L8 18"/>
<path d="M12 6 L12 18"/>
<path d="M16 6 L22 12 L16 18"/>
</svg>
</span>
</a>
</div>
</header>
<div class="login-card">
<div class="main-logo">
<svg viewBox="0 0 24 24" fill="none" stroke="#6B3E2E" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M8 6 L2 12 L8 18"/>
<path d="M12 6 L12 18"/>
<path d="M16 6 L22 12 L16 18"/>
</svg>
</div>
<h1 class="login-title">مرحبًا بك</h1>
<p class="login-sub">سجّل الدخول لمواصلة رحلتك</p>
<form id="loginForm">
<div class="form-group">
<label>البريد الإلكتروني</label>
<div class="input-wrapper">
<input type="email" placeholder="example@email.com" />
<span class="icon-right">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
</span>
</div>
</div>
<div class="form-group">
<label>كلمة المرور</label>
<div class="input-wrapper">
<input type="password" id="pwInput" placeholder="••••••••" />
<button type="button" class="toggle-pw" id="toggleBtn">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
</button>
<span class="icon-right">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
</span>
</div>
</div>
<div class="actions-row">
<label><input type="checkbox" class="custom-checkbox" /> البقاء مسجلاً</label>
<a href="#">نسيت كلمة المرور؟</a>
</div>
<button type="submit" class="btn-login">تسجيل دخول</button>
</form>
<div class="divider">المتابعة باستخدام</div>
<div class="social-login">
<button class="social-btn">
<svg width="22" height="22" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.874 2.684-6.615z" fill="#4285F4"/><path d="M9 18c2.43 0 4.467-.806 5.956-2.18L12.048 13.56c-.806.54-1.836.86-3.048.86-2.344 0-4.328-1.584-5.036-3.715H.957v2.332C2.438 15.983 5.482 18 9 18z" fill="#34A853"/><path d="M3.964 10.71c-.18-.54-.282-1.117-.282-1.71s.102-1.17.282-1.71V4.958H.957C.347 6.176 0 7.55 0 9s.348 2.824.957 4.042l3.007-2.332z" fill="#FBBC05"/><path d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0 5.482 0 2.438 2.017.957 4.958L3.964 7.29C4.672 5.163 6.656 3.58 9 3.58z" fill="#EA4335"/></svg> Google
</button>
<button class="social-btn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.462-1.11-1.462-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0 1 12 6.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.161 22 16.416 22 12c0-5.523-4.477-10-10-10z"/></svg> GitHub
</button>
</div>
<div class="create-account">
ليس لديك حساب؟ <a href="#">أنشئ حسابًا</a>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const pwInput = document.getElementById('pwInput');
const toggleBtn = document.getElementById('toggleBtn');
toggleBtn.addEventListener('click', function () {
if (pwInput.type === 'password') {
pwInput.type = 'text';
toggleBtn.classList.add('active');
} else {
pwInput.type = 'password';
toggleBtn.classList.remove('active');
}
});
document.getElementById('loginForm').addEventListener('submit', function(e) {
e.preventDefault();
alert('تم الضغط على دخول!');
});
});
</script>
</body>
</html>
التعليقات (0)
سجّل الدخول للتعليق.