API tools faq
paste
Advertisement
Guest User

View_departure_logs_code

a guest
Mar 1st, 2024
177
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.91 KB | Source Code | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>View Departure Logs - Parth Naik International Airport</title>
  6.     <style>
  7.         body {
  8.             font-family: 'Arial', sans-serif;
  9.             text-align: center;
  10.             margin: 0;
  11.             padding: 0;
  12.             display: flex;
  13.             flex-direction: column;
  14.             align-items: center;
  15.             justify-content: center;
  16.             min-height: 100vh;
  17.             overflow: hidden;
  18.             color: #fff;
  19.             background: linear-gradient(45deg, #2ecc71, #3498db, #e74c3c, #9b59b6);
  20.             background-size: 400% 400%;
  21.             animation: gradientAnimation 15s ease infinite;
  22.         }
  23.  
  24.         @keyframes gradientAnimation {
  25.             0% {
  26.                 background-position: 0% 50%;
  27.             }
  28.             50% {
  29.                 background-position: 100% 50%;
  30.             }
  31.             100% {
  32.                 background-position: 0% 50%;
  33.             }
  34.         }
  35.  
  36.         h1 {
  37.             margin-top: 0;
  38.             font-size: 4em;
  39.             text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
  40.             animation: fadeInUp 1s ease-in-out;
  41.         }
  42.  
  43.         .page-content {
  44.             background: linear-gradient(90deg, #3498db, #2980b9);
  45.             color: #fff;
  46.             padding: 30px;
  47.             border-radius: 15px;
  48.             box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  49.             margin-top: 20px;
  50.             max-width: 1000px;
  51.             width: 100%;
  52.             animation: fadeInUp 1s ease-in-out;
  53.             position: relative;
  54.             overflow: hidden;
  55.         }
  56.  
  57.         .page-content::before {
  58.             content: '';
  59.             position: absolute;
  60.             top: 0;
  61.             left: 0;
  62.             width: 100%;
  63.             height: 100%;
  64.             background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  65.             opacity: 0;
  66.             transition: opacity 0.3s ease-in-out;
  67.             pointer-events: none;
  68.         }
  69.  
  70.         .page-content:hover::before {
  71.             opacity: 1;
  72.         }
  73.  
  74.         table {
  75.             width: 100%;
  76.             border-collapse: collapse;
  77.             margin-top: 20px;
  78.             color: #000; /* Change text color to black */
  79.         }
  80.  
  81.         th, td {
  82.             border: 1px solid #fff;
  83.             padding: 15px;
  84.             text-align: center;
  85.             color: #fff; /* Change text color to white */
  86.         }
  87.  
  88.         th {
  89.             background: linear-gradient(90deg, #e74c3c, #c0392b);
  90.         }
  91.  
  92.         td {
  93.             background: linear-gradient(90deg, #3498db, #2980b9);
  94.         }
  95.  
  96.         .back-button {
  97.             position: absolute;
  98.             top: 20px;
  99.             left: 20px;
  100.             background: linear-gradient(90deg, #3498db, #2980b9);
  101.             color: #fff;
  102.             padding: 15px 20px;
  103.             font-size: 18px;
  104.             border: none;
  105.             border-radius: 8px;
  106.             cursor: pointer;
  107.             transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.5s ease-in-out;
  108.             box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  109.             animation: fadeInUp 1s ease-in-out;
  110.         }
  111.  
  112.         .back-button:hover {
  113.             transform: scale(1.05);
  114.             box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
  115.             background: linear-gradient(90deg, #3498db, #2980b9);
  116.         }
  117.     </style>
  118.     <script>
  119.         // Function to fetch and display data
  120.         function fetchDepartureLogs() {
  121.             // Replace the following with your actual server-side endpoint
  122.             var endpoint = 'http://localhost/fetch_departures.php';
  123.  
  124.             // Make a fetch request to your server-side script
  125.             fetch(endpoint)
  126.                 .then(response => response.json()) // Assuming your server returns JSON
  127.                 .then(data => {
  128.                     // Call a function to update the HTML table with the fetched data
  129.                     updateTable(data);
  130.                 })
  131.                 .catch(error => {
  132.                     console.error('Error fetching data:', error);
  133.                 });
  134.         }
  135.  
  136.         // Function to update the HTML table with fetched data
  137.         function updateTable(data) {
  138.             var tableBody = document.querySelector('tbody');
  139.             tableBody.innerHTML = ''; // Clear existing rows
  140.  
  141.             // Loop through the fetched data and create table rows
  142.             data.forEach(row => {
  143.                 var newRow = document.createElement('tr');
  144.                 newRow.innerHTML = `
  145.                     <td>${row.scheduledDepartureTime}</td>
  146.                     <td>${row.flightNumber}</td>
  147.                     <td>${row.destinationName}</td>
  148.                     <td>${row.airlineName}</td>
  149.                     <td>${row.aircraftType}</td>
  150.                     <td>${row.date}</td>
  151.                     <td>${row.status}</td>
  152.                 `;
  153.                 tableBody.appendChild(newRow);
  154.             });
  155.         }
  156.  
  157.         // Call the fetchDepartureLogs function when the page loads
  158.         window.addEventListener('load', fetchDepartureLogs);
  159.     </script>
  160. </head>
  161. <body>
  162.  
  163.     <a href="view_logs.html" class="back-button">Go Back</a>
  164.  
  165.     <h1>View Departure Logs</h1>
  166.  
  167.  <div class="page-content">
  168.         <table>
  169.             <thead>
  170.                 <tr>
  171.                     <th>Scheduled Departure Time</th>
  172.                     <th>Flight Number</th>
  173.                     <th>Destination Name</th>
  174.                     <th>Airline Name</th>
  175.                     <th>Aircraft Type</th>
  176.                     <th>Date</th>
  177.                     <th>Status</th>
  178.                 </tr>
  179.             </thead>
  180.             <tbody>
  181.                 <!-- Table rows will be dynamically populated by JavaScript -->
  182.             </tbody>
  183.         </table>
  184.     </div>
  185. </body>
  186. </html>
  187.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!