gravity/hosxp-webservice/components/head.php

<?php
// components/head.php
$page_title = $page_title ?? "HOSxP Web Service";
?>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><?php echo htmlspecialchars($page_title); ?></title>
<link rel="icon" type="image/png" href="../img/logo.png">

<!-- Google Fonts: Sarabun -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap" rel="stylesheet">

<!-- Tailwind CSS Play CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: {
          emerald: {
            50: '#F2F9F5',
            100: '#E0F1E6',
            200: '#C2E3CE',
            300: '#94CFA8',
            400: '#60B47F',
            500: '#38975D',
            600: '#267948', // Exact MOPH Green
            700: '#1F603B',
            800: '#1A4D30',
            900: '#154029',
            950: '#0B2316',
          }
        },
        fontFamily: {
          sans: ['Sarabun', 'sans-serif'],
        },
        boxShadow: {
          'glass': '0 10px 40px -10px rgba(38, 121, 72, 0.15)',
        },
        keyframes: {
          ring: {
            '0%, 100%': { transform: 'rotate(0deg)' },
            '20%': { transform: 'rotate(-20deg)' },
            '40%': { transform: 'rotate(15deg)' },
            '60%': { transform: 'rotate(-10deg)' },
            '80%': { transform: 'rotate(5deg)' },
          }
        },
        animation: {
          ring: 'ring 1.5s ease-in-out infinite',
        }
      }
    }
  }
</script>

<style type="text/tailwindcss">
    @layer utilities {
      .glass-card {
        @apply bg-white/70 backdrop-blur-xl border border-white/50 rounded-[24px] shadow-glass transition-all duration-300;
      }
      .glass-card:hover {
        @apply shadow-2xl shadow-emerald-500/20;
      }
      .glass-header {
        @apply px-6 py-5 bg-white/60 border-b border-white/50;
      }
      .glass-body {
        @apply p-6;
      }
      .btn-primary {
        @apply inline-flex items-center justify-center gap-2 px-6 py-3 bg-emerald-500 text-white font-medium rounded-full shadow-lg shadow-emerald-500/30 hover:bg-emerald-600 hover:shadow-emerald-500/40 hover:-translate-y-0.5 active:scale-95 transition-all duration-300 outline-none;
      }
      .btn-outline {
        @apply inline-flex items-center justify-center gap-2 px-6 py-3 border border-emerald-500 text-emerald-600 font-medium rounded-full hover:bg-emerald-50 active:scale-95 transition-all duration-300 outline-none;
      }
      .form-input {
        @apply w-full px-4 py-3 rounded-2xl border border-emerald-500/20 bg-white/90 text-slate-800 transition-all duration-300 focus:outline-none focus:border-emerald-500 focus:ring-4 focus:ring-emerald-100;
      }
      .table-header {
        @apply bg-emerald-50 text-emerald-900 px-4 py-3 font-semibold text-sm uppercase tracking-wide border-b-2 border-emerald-500/20 text-left;
      }
      .table-cell {
        @apply px-4 py-4 border-b border-black/5 text-slate-600 text-sm;
      }
      .table-row-hover {
        @apply hover:bg-emerald-50/50 transition-colors duration-300;
      }
      /* Optional Ripple */
      .ripple-wrapper {
        @apply relative overflow-hidden;
      }
      .ripple {
        @apply absolute rounded-full bg-white/40;
        transform: scale(0);
        animation: ripple 0.6s linear;
      }
    }
    @keyframes ripple {
        to {
            transform: scale(4);
            opacity: 0;
        }
    }
    @keyframes slideIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .animate-enter {
        animation: slideIn 0.5s ease forwards;
    }
    
    /* Beautiful Custom Scrollbar */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    ::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.02); 
        border-radius: 10px;
    }
    ::-webkit-scrollbar-thumb {
        background: rgba(16, 185, 129, 0.3); 
        border-radius: 10px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: rgba(16, 185, 129, 0.5); 
    }
</style>

<?php
if (!empty($_SESSION['sess_userid']) && isset($app_settings['auto_logout_enable']) && $app_settings['auto_logout_enable'] === '1') {
    $timeout_minutes = (int)($app_settings['auto_logout_minutes'] ?? 30);
    if ($timeout_minutes < 1) $timeout_minutes = 30;
    $timeout_ms = $timeout_minutes * 60 * 1000;
?>
<script>
    let inactivityTimer;
    const INACTIVITY_LIMIT = <?php echo $timeout_ms; ?>;

    function resetTimer() {
        clearTimeout(inactivityTimer);
        inactivityTimer = setTimeout(() => {
            window.location.href = '../views/login.php?action=timeout';
        }, INACTIVITY_LIMIT);
    }

    // List of events to track for user activity
    const activityEvents = ['mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart'];
    
    activityEvents.forEach(event => {
        document.addEventListener(event, resetTimer, true);
    });

    // Initialize timer on load
    resetTimer();
</script>
<?php } ?>