make this page look stuning : <?php

session_start();

if (!isset($_SESSION['user_id'])) {

    header("Location: register.php");

    exit;

}

?>





<!DOCTYPE html>

<html lang="fa" dir="rtl">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>سیستم هدایت تحصیلی هوشمند</title>

  

  <!-- فونت‌ها و استایل‌ها -->

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/font-store/badkhate2@latest/font.css">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

  <link rel="stylesheet" href="style.css">

  <style>

    *{



      font-family: 'Badkhate 2'

    }

.Btn {

  display: flex;

  align-items: center;

  justify-content: flex-start;

  width: 45px;

  height: 45px;

  border: none;

  border-radius: 50%;

  cursor: pointer;

  position: relative;

  overflow: hidden;

  transition-duration: 0.3s;

  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);

  background-color: white;

}



/* plus sign */

.sign {

  width: 100%;

  transition-duration: 0.3s;

  display: flex;

  align-items: center;

  justify-content: center;

}



.sign svg {

  width: 17px;

}



.sign svg path {

  fill: black;

}

/* text */

.text {

  position: absolute;

  right: 0%;

  width: 0%;

  opacity: 0;

  color: white;

  font-size: 1.2em;

  font-weight: 600;

  transition-duration: 0.3s;

}

/* hover effect on button width */

.Btn:hover {

  background-color: black;

  width: 125px;

  border-radius: 40px;

  transition-duration: 0.3s;

}



.Btn:hover .sign {

  width: 30%;

  transition-duration: 0.3s;

  padding-left: 20px;

}



.Btn:hover .sign svg path {

  fill: white;

}



/* hover effect button's text */

.Btn:hover .text {

  opacity: 1;

  width: 70%;

  transition-duration: 0.3s;

  padding-right: 10px;

}

/* button click effect*/

.Btn:active {

  transform: translate(2px, 2px);

}

body {

            font-family: 'Badkhate 2'

            margin: 0;

            padding: 0;

            background-color: #f8f9fa;

        }

        

        /* Header Styles */

        .dashboard-header {

            background: linear-gradient(135deg, #4361ee 0%, #3a0ca3 100%);

            color: white;

            padding: 15px 30px;

            display: flex;

            justify-content: space-between;

            align-items: center;

            box-shadow: 0 2px 10px rgba(0,0,0,0.1);

            position: sticky;

            top: 0;

            z-index: 1000;

        }

        

        .header-left {

            display: flex;

            align-items: center;

            gap: 20px;

        }

        

        .header-right {

            display: flex;

            align-items: center;

            gap: 15px;

        }

        

        .welcome-message {

            font-size: 18px;

            font-weight: 500;

        }

        

        .username {

            font-weight: 700;

            color: #f8f9fa;

        }

        

        /* Notification Badge (for future use) */

        .notification-badge {

            background-color: #f72585;

            color: white;

            border-radius: 50%;

            width: 25px;

            height: 25px;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 12px;

            cursor: pointer;

        }

        

        /* Logout Button Styles */

        .logout-btn {

            display: flex;

            align-items: center;

            gap: 8px;

            background: rgba(255,255,255,0.1);

            border: none;

            color: white;

            padding: 8px 15px;

            border-radius: 6px;

            cursor: pointer;

            transition: all 0.3s;

            font-family: inherit;

            font-size: 14px;

        }

        

        .logout-btn:hover {

            background: rgba(255,255,255,0.2);

        }

        

        .logout-icon {

            width: 16px;

            height: 16px;

        }

        

        /* Main Content Area */

        .dashboard-content {

            padding: 30px;

            max-width: 1200px;

            margin: 0 auto;

        }

  

</style>

  <!-- اسکریپت‌ها -->

  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>

</head>

<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen">

<!-- Navbar Section -->

<div class="navbar bg-white shadow-md p-4 flex justify-between items-center sticky top-0 z-10">

  <!-- Welcome Text -->

  <div class="welcome-container text-right">

    <div class="welcome-message text-lg font-medium text-gray-800">

      خوش آمدید، 

      <span class="username font-semibold text-indigo-600"><?php echo htmlspecialchars($_SESSION['full_name']); ?></span>!

    </div>

  </div>



  <!-- Logout Button -->

  <div class="logout-wrapper">

    <a href="logout.php" class="logout-link inline-block">

      <button class="Btn flex items-center gap-2 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition duration-300">

        <svg viewBox="0 0 512 512" class="w-5 h-5 fill-current">

          <path d="M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z"></path>

        </svg>

        <span class="text">خارج شدن</span>

      </button>

    </a>

  </div>

</div>



</a>



    

    <!-- بخش سربرگ -->

    <div class="no-print header-section animate__animated animate__fadeIn bg-white rounded-xl shadow-lg p-6 mb-8">

      <div class="school-branding text-center">

        <h1 class="text-3xl font-bold text-indigo-800 mb-4">صدور هدایت تحصیلی</h1>

        <div class="school-info">

          <h2 class="text-2xl font-semibold text-gray-800">مدرسه امام علی بن ابیطالب (ع) آبادان</h2>

          <div class="flex justify-center mt-2">

            <div class="w-16 h-1 bg-indigo-500 rounded"></div>

          </div>

        </div>

      </div>

    </div>

    

    <!-- بخش آپلود فایل -->

    <div class="upload-section no-print mb-8">

      <div class="upload-box animate__animated animate__fadeInUp bg-white rounded-xl shadow-md p-8 text-center mx-auto max-w-md">

        <label for="excelFile" class="file-upload-label cursor-pointer block">

          <div class="mb-4 text-indigo-600">

            <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">

              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>

              <polyline points="17 8 12 3 7 8"></polyline>

              <line x1="12" y1="3" x2="12" y2="15"></line>

            </svg>

          </div>

          <span class="block text-lg text-gray-700 mb-4">فایل اکسل دانش آموزان را انتخاب کنید</span>

          <input type="file" id="excelFile" accept=".xlsx, .xls" class="hidden">

        </label>

      </div>

      

      <div class="action-buttons flex justify-center gap-4 mt-8 animate__animated animate__fadeInUp animate__delay-1s">

        <button onclick="handleFile()" class="primary-button bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white font-bold py-3 px-6 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50">

          <div class="flex items-center">

            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">

              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>

              <polyline points="7 10 12 15 17 10"></polyline>

              <line x1="12" y1="15" x2="12" y2="3"></line>

            </svg>

            پردازش اطلاعات

          </div>

        </button>

        <button onclick="window.print()" id="printBtn" class="secondary-button bg-white text-indigo-700 border border-indigo-300 hover:bg-indigo-50 font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50" style="display:none;">

          <div class="flex items-center">

            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">

              <polyline points="6 9 6 2 18 2 18 9"></polyline>

              <path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path>

              <rect x="6" y="14" width="12" height="8"></rect>

            </svg>

            چاپ گزارشات

          </div>

        </button>

      </div>

    </div>

    

    <!-- نمایش لودینگ -->

    <div class="loading fixed inset-0 bg-white bg-opacity-80 z-50 flex flex-col items-center justify-center hidden" id="loadingIndicator">

      <div class="loading-spinner w-16 h-16 border-4 border-indigo-200 border-t-indigo-600 rounded-full animate-spin mb-4"></div>

      <p class="text-xl font-medium text-indigo-700">در حال پردازش اطلاعات...</p>

    </div>

    

    <!-- کانتینر گزارش -->

    <div id="report" class="report-container"></div>



    <!-- هدر چاپ -->

    <div class="print-only">

      <div class="print-header text-center py-4">

        <div class="print-title text-2xl font-bold text-gray-800">فرم هدایت تحصیلی دانش آموزان</div>

        <div class="print-subtitle text-lg text-gray-600 mt-2">امیرارسلان ملکی</div>

        <div class="w-24 h-1 bg-indigo-500 mx-auto mt-2"></div>

      </div>

    </div>

  </div>



  <!-- اسکریپت اصلی -->

  <script src="script.js"></script>





  

</body>

</html>