<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تم تسجيل الخروج</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
    <style>
        /* أنماط الجسم */
        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            text-align: center;
            font-family: Arial, sans-serif;
            overflow: hidden;
            position: relative;
            background: linear-gradient(-45deg, #ff416c, #ff4b2b, #1e90ff, #00ff99);
            background-size: 400% 400%;
            animation: gradientAnimation 6s ease infinite;
        }

        /* حركة الألوان المتغيرة */
        @keyframes gradientAnimation {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* نص العنوان */
        h1 {
            font-size: 2.5rem;
            font-weight: bold;
            animation: fadeIn 2s ease-in-out;
        }

        /* نص الوصف */
        p {
            font-size: 1.2rem;
            animation: fadeIn 3s ease-in-out;
        }

        /* تأثير ظهور النص */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }

    </style>
</head>
<body>
    <div>
        <h1>تم تسجيل خروجك بنجاح!</h1>
        <p>سيتم توجيهك إلى صفحة تسجيل الدخول خلال 5 ثوانٍ...</p>
    </div>

    <script>
        setTimeout(function() {
            window.location.href = "index.php"; // توجيه تلقائي بعد 5 ثوانٍ
        }, 5000);
    </script>
</body>
</html>
