hesabixSite/templates/customer/base.html.twig

{% extends 'base.html.twig' %}

{% block title %}باشگاه مشتریان حسابیکس - {{ block('page_title') }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        
        .customer-auth-container {
            min-height: 80vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 20px 0;
            direction: rtl;
            text-align: right;
        }
        
        .customer-auth-card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            width: 100%;
            max-width: 450px;
            direction: rtl;
        }
        
        .customer-auth-header {
            background: linear-gradient(135deg, #0d6efd 0%, #6610f2 100%);
            color: white;
            padding: 30px;
            text-align: center;
            direction: rtl;
        }
        
        .customer-auth-header h1 {
            margin: 0;
            font-size: 1.8rem;
            font-weight: bold;
            direction: rtl;
        }
        
        .customer-auth-header p {
            margin: 10px 0 0 0;
            opacity: 0.9;
            direction: rtl;
        }
        
        .customer-auth-body {
            padding: 40px 30px;
            direction: rtl;
        }
        
        .form-floating {
            margin-bottom: 20px;
            direction: rtl;
        }
        
        .form-floating label {
            color: #6c757d;
            right: 0.75rem;
            left: auto;
            direction: rtl;
        }
        
        .form-control {
            border: 2px solid #e9ecef;
            border-radius: 10px;
            padding: 15px;
            font-size: 16px;
            transition: all 0.3s ease;
            direction: rtl;
            text-align: right;
        }
        
        .form-control:focus {
            border-color: #0d6efd;
            box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
        }
        
        /* فیلدهای انگلیسی (ایمیل و کلمه عبور) */
        .form-control[type="email"],
        .form-control[type="password"] {
            direction: ltr;
            text-align: left;
        }
        
        .form-control[type="email"] + label,
        .form-control[type="password"] + label {
            right: auto;
            left: 0.75rem;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #0d6efd 0%, #6610f2 100%);
            border: none;
            border-radius: 10px;
            padding: 15px;
            font-size: 16px;
            font-weight: bold;
            transition: all 0.3s ease;
            direction: rtl;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(13, 110, 253, 0.4);
        }
        
        .form-check {
            margin: 20px 0;
            direction: rtl;
            text-align: right;
        }
        
        .form-check-input {
            margin-left: 0.5em;
            margin-right: 0;
        }
        
        .form-check-input:checked {
            background-color: #0d6efd;
            border-color: #0d6efd;
        }
        
        .form-check-label {
            direction: rtl;
            text-align: right;
        }
        
        .auth-links {
            text-align: center;
            margin-top: 30px;
            direction: rtl;
        }
        
        .auth-links a {
            color: #0d6efd;
            text-decoration: none;
            font-weight: 500;
            direction: rtl;
        }
        
        .auth-links a:hover {
            text-decoration: underline;
        }
        
        .alert {
            border-radius: 10px;
            border: none;
            padding: 15px 20px;
            margin-bottom: 20px;
            direction: rtl;
            text-align: right;
        }
        
        .alert-success {
            background-color: #d1edff;
            color: #0c5460;
        }
        
        .alert-danger {
            background-color: #f8d7da;
            color: #721c24;
        }
        
        .alert-info {
            background-color: #d1ecf1;
            color: #0c5460;
        }
        
        .hesabix-logo {
            width: 60px;
            height: 60px;
            margin-bottom: 15px;
        }
        
        .back-to-home {
            position: absolute;
            top: 20px;
            left: 20px;
            color: white;
            text-decoration: none;
            font-weight: 500;
            opacity: 0.9;
            direction: rtl;
        }
        
        .back-to-home:hover {
            color: white;
            opacity: 1;
        }
        
        /* بهبود نمایش آیکون‌های SVG */
        .icon-svg {
            width: 16px;
            height: 16px;
            margin-left: 5px;
            margin-right: 0;
            display: inline-block;
            vertical-align: middle;
        }
        
        .icon-svg-large {
            width: 48px;
            height: 48px;
            margin: 0 auto 20px;
            display: block;
        }
        
        /* تغییر رنگ آیکون‌های SVG */
        .icon-svg svg,
        .icon-svg-large svg {
            fill: currentColor;
            width: 100%;
            height: 100%;
        }
        
        /* آیکون‌های رنگی */
        .icon-heart svg { fill: #e74c3c; }
        .icon-user svg { fill: #3498db; }
        .icon-calendar svg { fill: #f39c12; }
        .icon-cogs svg { fill: #95a5a6; }
        .icon-key svg { fill: #9b59b6; }
        .icon-home svg { fill: #2ecc71; }
        .icon-sign-out svg { fill: #e74c3c; }
        .icon-exclamation svg { fill: #e74c3c; }
        .icon-sign-in svg { fill: #27ae60; }
        .icon-user-plus svg { fill: #3498db; }
        .icon-check svg { fill: #27ae60; }
        .icon-info svg { fill: #3498db; }
        .icon-lock svg { fill: #95a5a6; }
        .icon-arrow-left svg { fill: #7f8c8d; }
        
        /* آیکون‌های بزرگ */
        .icon-svg-large.icon-heart svg { fill: #e74c3c; }
        .icon-svg-large.icon-key svg { fill: #9b59b6; }
        .icon-svg-large.icon-lock svg { fill: #95a5a6; }
        
        /* بهبود نمایش متن‌های فارسی */
        .text-muted {
            direction: rtl;
            text-align: center;
        }
    </style>
{% endblock %}

{% block body %}
    <div class="customer-auth-container">
        <div class="customer-auth-card">
            <div class="customer-auth-header">
                <img src="{{ asset('/favicon/favicon.svg') }}" alt="حسابیکس" class="hesabix-logo">
                <h1>باشگاه مشتریان حسابیکس</h1>
                <p>{{ block('page_subtitle') }}</p>
            </div>
            
            <div class="customer-auth-body">
                {% for message in app.flashes('success') %}
                    <div class="alert alert-success" role="alert">
                        <img src="{{ asset('/img/icons/check-circle.svg') }}" alt="موفقیت" class="icon-svg icon-check"> {{ message }}
                    </div>
                {% endfor %}
                
                {% for message in app.flashes('error') %}
                    <div class="alert alert-danger" role="alert">
                        <img src="{{ asset('/img/icons/exclamation-circle.svg') }}" alt="خطا" class="icon-svg icon-exclamation"> {{ message }}
                    </div>
                {% endfor %}
                
                {% for message in app.flashes('info') %}
                    <div class="alert alert-info" role="alert">
                        <img src="{{ asset('/img/icons/info-circle.svg') }}" alt="اطلاعات" class="icon-svg icon-info"> {{ message }}
                    </div>
                {% endfor %}
                
                {% block auth_content %}{% endblock %}
            </div>
        </div>
    </div>
{% endblock %}