38808-vm/index.php

<?php
$hide_layout = true;
require_once __DIR__ . '/includes/header.php';
$is_logged_in = isLoggedIn();
?>

<div class="landing-page-wrapper">
    <!-- Abstract Background Shapes -->
    <div class="bg-shape shape-blue"></div>
    <div class="bg-shape shape-green"></div>
    <div class="bg-shape shape-yellow"></div>

    <div class="landing-content p-4 text-center">
        <!-- Logo -->
        <div class="logo-container mb-4">
            <?php if (!empty($sys_settings['site_logo'])): ?>
                <img src="<?= htmlspecialchars($sys_settings['site_logo']) ?>" alt="Logo" class="site-logo img-fluid">
            <?php else: ?>
                <div class="text-primary fallback-logo">
                    <i class="fas fa-hands-helping fa-5x"></i>
                </div>
            <?php endif; ?>
        </div>

        <!-- Site Name -->
        <h1 class="site-title fw-bold mb-3"><?= htmlspecialchars($sys_settings['site_name'] ?? 'النظام الإداري') ?></h1>
        
        <!-- Slogan -->
        <?php if (!empty($sys_settings['site_slogan'])): ?>
            <p class="site-slogan text-secondary mb-5 fs-5">
                <?= htmlspecialchars($sys_settings['site_slogan']) ?>
            </p>
        <?php endif; ?>

        <!-- Action Button -->
        <div class="action-buttons mt-2">
            <?php if ($is_logged_in): ?>
                <a href="user_dashboard.php" class="btn btn-primary btn-lg rounded-pill px-5 py-3 shadow-sm hover-lift">
                    <i class="fas fa-tachometer-alt me-2"></i> الدخول إلى لوحة التحكم
                </a>
            <?php else: ?>
                <a href="login.php" class="btn btn-primary btn-lg rounded-pill px-5 py-3 shadow-sm hover-lift">
                    <i class="fas fa-sign-in-alt me-2"></i> تسجيل الدخول
                </a>
            <?php endif; ?>
        </div>
    </div>
</div>

<style>
    /* Full Page Reset for Landing */
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f8f9fa;
    }

    .landing-page-wrapper {
        position: relative;
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #fdfdfd 0%, #f1f3f5 100%);
        z-index: 1;
    }

    .landing-content {
        position: relative;
        z-index: 10;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: 2rem;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
        max-width: 650px;
        width: 90%;
        padding: 3rem !important;
        animation: fadeIn 0.8s ease-out forwards;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .site-logo {
        max-height: 140px;
        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .site-logo:hover, .fallback-logo:hover {
        transform: scale(1.08);
    }

    .site-title {
        color: #2c3e50;
        font-size: 2.5rem;
        letter-spacing: -0.5px;
    }

    .site-slogan {
        font-weight: 300;
        line-height: 1.6;
    }

    .hover-lift {
        transition: all 0.3s ease;
        font-weight: 600;
        letter-spacing: 0.5px;
    }
    
    .hover-lift:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 20px rgba(13, 110, 253, 0.3) !important;
    }

    /* Abstract Background Shapes with smooth animation */
    .bg-shape {
        position: absolute;
        border-radius: 50%;
        filter: blur(80px);
        opacity: 0.5;
        z-index: 0;
        animation: float 25s infinite ease-in-out alternate;
    }

    .shape-blue {
        width: 50vw;
        height: 50vw;
        background: #0d6efd; /* Bootstrap Primary */
        top: -15%;
        right: -10%;
        animation-delay: 0s;
    }

    .shape-green {
        width: 45vw;
        height: 45vw;
        background: #198754; /* Bootstrap Success */
        bottom: -20%;
        left: -15%;
        animation-delay: -7s;
    }

    .shape-yellow {
        width: 30vw;
        height: 30vw;
        background: #ffc107; /* Bootstrap Warning */
        top: 30%;
        left: 20%;
        animation-delay: -14s;
    }

    @keyframes float {
        0% { transform: translate(0, 0) scale(1); }
        33% { transform: translate(3%, 5%) scale(1.05); }
        66% { transform: translate(-2%, 8%) scale(0.95); }
        100% { transform: translate(-5%, -2%) scale(1.02); }
    }

    /* Mobile Adjustments */
    @media (max-width: 576px) {
        .site-title { font-size: 2rem; }
        .landing-content { padding: 2rem !important; }
        .site-logo { max-height: 100px; }
    }
</style>

<?php require_once __DIR__ . '/includes/footer.php'; ?>