{% extends "layout.html" %}

{% block title %}RYP Occupancy{% endblock %}

{% block content %}
<div class="centered-header" data-aos="fade-up" data-aos-duration="800" style="margin-top: 60px;">
  <h1 class="gradient-text">RYP Occupancy Dashboard</h1>
  <p style="font-size: 18px; margin-top: 10px;">Overview of RYP Occupancy</p>
  <p style="color: #888; font-size: 14px; margin-top: 8px;">Real-time capacity • Room types • Program categories</p>
  
  <div data-aos="zoom-in" data-aos-duration="1000" style="margin-top: 30px; padding: 15px 25px; border-radius: 12px; background: #e1f5fe; border: 1px solid #81d4fa; display: inline-block;">
    <strong style="color: #0288d1;">Note:</strong> This RYP module is still under construction. Some data may be placeholder or incomplete.
  </div>
  
  <div data-aos="fade-up" data-aos-duration="1200" class="parallax-container" style="margin-top: 40px;">
    <img src="{{ url_for('static', filename='images/HoOm Logo Name black.png') }}" alt="Logo" width="140" class="parallax-image">
  </div>
</div>

<style>
  .parallax-container {
    position: relative;
    overflow: hidden;
    height: 200px;
  }

  .parallax-image {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: transform 0.3s ease-out;
  }

  /* Parallax effect */
  .parallax-container:hover .parallax-image {
    transform: translateY(-30px) translateX(-50%);
  }
</style>

<script>
  window.addEventListener('scroll', function() {
    const parallax = document.querySelector('.parallax-image');
    let offset = window.pageYOffset * 0.5;
    parallax.style.transform = `translateY(${offset}px) translateX(-50%)`;
  });
</script>
{% endblock %}