779c5aab98
Implement a new split-design login page template and enhance theme navigation logic to improve user experience: - Add `template-login.php` with a modern split-screen layout featuring animated decorative elements and a clean form interface. - Implement dynamic header navigation that toggles between "Client Login" and "Dashboard" based on user authentication status. - Update front-page service links to point to functional account and tracking endpoints. - Add comprehensive CSS for the new login page design, including animations and responsive form styling. - Update footer credits to reflect VernaSoft.
157 lines
9.9 KiB
PHP
157 lines
9.9 KiB
PHP
<?php
|
||
/**
|
||
* Template Name: IFNEX Login Page
|
||
*/
|
||
|
||
// اگر کاربر لاگین است، مستقیم به داشبورد برو
|
||
if (is_user_logged_in()) {
|
||
wp_redirect(home_url('/my-account/'));
|
||
exit;
|
||
}
|
||
|
||
$is_en = ifnex_is_english();
|
||
get_header();
|
||
?>
|
||
|
||
<style>
|
||
/* ═══ Login Page (Split Design) ═══ */
|
||
.ifnx-login-page{display:flex;min-height:calc(100vh - 100px)}
|
||
.ifnx-login-side{flex:1;background:linear-gradient(135deg,#0f172a 0%,#1e293b 50%,#334155 100%);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:60px;color:#fff}
|
||
.ifnx-login-side::before{content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;background:radial-gradient(circle,rgba(249,115,22,.35),transparent 70%);border-radius:50%;animation:ifnxFloat 8s ease-in-out infinite}
|
||
.ifnx-login-side::after{content:'';position:absolute;bottom:-150px;left:-150px;width:500px;height:500px;background:radial-gradient(circle,rgba(249,115,22,.15),transparent 70%);border-radius:50%;animation:ifnxFloat 10s ease-in-out infinite reverse}
|
||
@keyframes ifnxFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-30px)}}
|
||
.ifnx-login-side-content{position:relative;z-index:1;max-width:480px}
|
||
.ifnx-login-logo{display:flex;align-items:center;gap:12px;color:#fff;margin-bottom:40px}
|
||
.ifnx-login-logo svg{color:#f97316}
|
||
.ifnx-login-logo span{font-size:24px;font-weight:800;letter-spacing:2px}
|
||
.ifnx-login-headline{font-size:42px;font-weight:800;line-height:1.2;margin:0 0 16px}
|
||
.ifnx-login-subtitle{font-size:17px;color:rgba(255,255,255,.7);line-height:1.7}
|
||
.ifnx-login-features{margin-top:48px;display:flex;flex-direction:column;gap:14px}
|
||
.ifnx-login-feature{display:flex;align-items:center;gap:14px;padding:14px 18px;background:rgba(255,255,255,.06);border-radius:12px;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.08);font-size:14px;transition:transform .2s}
|
||
.ifnx-login-feature:hover{transform:translateX(-4px)}
|
||
.ifnx-login-feature svg{color:#f97316;flex-shrink:0}
|
||
.ifnx-login-form-side{flex:1;display:flex;align-items:center;justify-content:center;padding:60px 40px;background:#fff}
|
||
.ifnx-login-form-container{max-width:420px;width:100%}
|
||
.ifnx-login-form-container h2{font-size:28px;color:#0f172a;margin:0 0 8px;font-weight:800}
|
||
.ifnx-login-sub{color:#64748b;margin-bottom:32px;font-size:14px}
|
||
.ifnx-form-group{margin-bottom:20px}
|
||
.ifnx-form-group label{display:block;margin-bottom:8px;font-weight:600;color:#0f172a;font-size:14px}
|
||
.ifnx-form-group input{width:100%;padding:14px 16px;border:1.5px solid #e2e8f0;border-radius:12px;font-size:15px;transition:all .2s;background:#f8fafc;font-family:inherit;box-sizing:border-box}
|
||
.ifnx-form-group input:focus{outline:none;border-color:#f97316;background:#fff;box-shadow:0 0 0 4px rgba(249,115,22,.1)}
|
||
.ifnx-form-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;font-size:14px;flex-wrap:wrap;gap:8px}
|
||
.ifnx-checkbox{display:flex;align-items:center;gap:8px;cursor:pointer;color:#475569;user-select:none}
|
||
.ifnx-checkbox input{width:auto;accent-color:#f97316}
|
||
.ifnx-form-row a{color:#f97316;text-decoration:none;font-weight:600}
|
||
.ifnx-form-row a:hover{text-decoration:underline}
|
||
.btn-block{width:100%;padding:16px;font-size:15px;border-radius:12px;border:none;cursor:pointer;font-weight:700;transition:transform .2s}
|
||
.btn-block:hover{transform:translateY(-2px)}
|
||
.ifnx-login-error,.ifnx-login-success{padding:12px 16px;border-radius:10px;margin-bottom:20px;font-size:14px}
|
||
.ifnx-login-error{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}
|
||
.ifnx-login-success{background:#f0fdf4;color:#059669;border:1px solid #bbf7d0}
|
||
.ifnx-login-footer{margin-top:32px;text-align:center;color:#64748b;font-size:14px}
|
||
.ifnx-login-footer a{color:#f97316;font-weight:700;text-decoration:none;margin-inline-start:4px}
|
||
.ifnx-login-back{display:inline-block;margin-top:12px;color:#94a3b8!important;font-size:13px!important;font-weight:500!important}
|
||
@media (max-width:900px){
|
||
.ifnx-login-page{flex-direction:column}
|
||
.ifnx-login-side{padding:40px 30px;min-height:auto}
|
||
.ifnx-login-headline{font-size:28px}
|
||
.ifnx-login-features{display:none}
|
||
.ifnx-login-subtitle{font-size:15px}
|
||
.ifnx-login-form-side{padding:40px 24px}
|
||
.ifnx-login-form-container h2{font-size:24px}
|
||
}
|
||
</style>
|
||
|
||
<div class="ifnx-login-page">
|
||
<!-- ساید تصویر -->
|
||
<div class="ifnx-login-side">
|
||
<div class="ifnx-login-side-content">
|
||
<div class="ifnx-login-logo">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="3 11 22 2 13 21 11 13 3 11"/></svg>
|
||
<span>IFNEX</span>
|
||
</div>
|
||
<h1 class="ifnx-login-headline">
|
||
<?php echo $is_en ? 'Welcome Back to IFNEX' : 'به IFNEX خوش آمدید'; ?>
|
||
</h1>
|
||
<p class="ifnx-login-subtitle">
|
||
<?php echo $is_en ? 'Fast, secure and reliable global shipping from Iran to anywhere in the world.' : 'ارسال سریع، امن و مطمئن از ایران به سراسر جهان.'; ?>
|
||
</p>
|
||
|
||
<div class="ifnx-login-features">
|
||
<div class="ifnx-login-feature">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"/><path d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"/></svg>
|
||
<span><?php echo $is_en ? 'Real-time package tracking' : 'رهگیری لحظهای مرسولات'; ?></span>
|
||
</div>
|
||
<div class="ifnx-login-feature">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a2.25 2.25 0 00-2.25-2.25H15a3 3 0 11-6 0H5.25A2.25 2.25 0 003 12m18 0v6a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 18v-6"/></svg>
|
||
<span><?php echo $is_en ? 'Secure wallet payments' : 'پرداخت امن از کیف پول'; ?></span>
|
||
</div>
|
||
<div class="ifnx-login-feature">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||
<span><?php echo $is_en ? '24/7 customer support' : 'پشتیبانی ۲۴/۷ مشتریان'; ?></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ساید فرم -->
|
||
<div class="ifnx-login-form-side">
|
||
<div class="ifnx-login-form-container">
|
||
<h2><?php echo $is_en ? 'Sign in to your account' : 'ورود به حساب کاربری'; ?></h2>
|
||
<p class="ifnx-login-sub">
|
||
<?php echo $is_en ? 'Access your orders, wallet and tracking panel' : 'دسترسی به سفارشات، کیف پول و پنل رهگیری'; ?>
|
||
</p>
|
||
|
||
<?php
|
||
// نمایش خطا
|
||
if (isset($_GET['login']) && $_GET['login'] === 'failed') {
|
||
echo '<div class="ifnx-login-error">❌ ' . ($is_en ? 'Invalid credentials' : 'نام کاربری یا رمز عبور اشتباه است') . '</div>';
|
||
}
|
||
if (isset($_GET['loggedout']) && $_GET['loggedout'] === 'true') {
|
||
echo '<div class="ifnx-login-success">✅ ' . ($is_en ? 'Logged out successfully' : 'با موفقیت خارج شدید') . '</div>';
|
||
}
|
||
?>
|
||
|
||
<form name="loginform" id="loginform" action="<?php echo esc_url(site_url('wp-login.php', 'login_post')); ?>" method="post">
|
||
<div class="ifnx-form-group">
|
||
<label for="user_login"><?php echo $is_en ? 'Email or Username' : 'ایمیل یا نام کاربری'; ?></label>
|
||
<input type="text" name="log" id="user_login" required autofocus placeholder="<?php echo $is_en ? 'Enter your email' : 'example@ifnex.com'; ?>">
|
||
</div>
|
||
|
||
<div class="ifnx-form-group">
|
||
<label for="user_pass"><?php echo $is_en ? 'Password' : 'رمز عبور'; ?></label>
|
||
<input type="password" name="pwd" id="user_pass" required placeholder="••••••••">
|
||
</div>
|
||
|
||
<div class="ifnx-form-row">
|
||
<label class="ifnx-checkbox">
|
||
<input type="checkbox" name="rememberme" value="forever">
|
||
<span><?php echo $is_en ? 'Remember me' : 'مرا به خاطر بسپار'; ?></span>
|
||
</label>
|
||
<a href="<?php echo esc_url(wp_lostpassword_url()); ?>">
|
||
<?php echo $is_en ? 'Forgot password?' : 'فراموشی رمز عبور؟'; ?>
|
||
</a>
|
||
</div>
|
||
|
||
<input type="hidden" name="redirect_to" value="<?php echo esc_url(home_url('/my-account/')); ?>">
|
||
<input type="hidden" name="testcookie" value="1">
|
||
|
||
<button type="submit" class="btn btn-primary btn-lg btn-block">
|
||
<?php echo $is_en ? 'Sign In' : 'ورود به حساب'; ?> →
|
||
</button>
|
||
</form>
|
||
|
||
<div class="ifnx-login-footer">
|
||
<p><?php echo $is_en ? "Don't have an account?" : 'حساب کاربری ندارید؟'; ?>
|
||
<a href="<?php echo esc_url(wp_registration_url()); ?>">
|
||
<?php echo $is_en ? 'Register now' : 'ثبتنام کنید'; ?>
|
||
</a></p>
|
||
<a href="<?php echo esc_url(home_url('/')); ?>" class="ifnx-login-back">
|
||
← <?php echo $is_en ? 'Back to home' : 'بازگشت به سایت'; ?>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<?php get_footer(); ?>
|