pap_web/view/index_index.html

{% extends "layout.html" %}

{% block content %}
<!-- Right Side Navigation Dots -->
<div class="slide-labels" id="slideLabels">
  <div class="slide-label active" data-index="0"><span class="dot"></span><span class="txt">首页</span></div>
  <div class="slide-label" data-index="1"><span class="dot"></span><span class="txt">数据公示</span></div>
  <div class="slide-label" data-index="2"><span class="dot"></span><span class="txt">公益项目</span></div>
  <div class="slide-label" data-index="3"><span class="dot"></span><span class="txt">新闻动态</span></div>
  <div class="slide-label" data-index="4"><span class="dot"></span><span class="txt">合作伙伴</span></div>
</div>

<!-- Swiper Fullpage -->
<div class="swiper swiper-fullpage" id="fullpageSwiper">
  <div class="swiper-wrapper">

    <!-- Slide 1: Banner -->
    <div class="swiper-slide">
      <div class="slide-banner">
        <div class="swiper banner-swiper" id="bannerSwiper">
          <div class="swiper-wrapper">
            {% for banner in banners %}
            <div class="swiper-slide">
              <div class="banner-slide-bg" style="background-image:url('{{banner.image}}')"></div>
              <div class="banner-slide-content pos-{{banner.position | default('left')}}{% if banner.glass %} glass-on{% endif %}">
                <h1>{{banner.title}}{% if banner.subtitle %}<br>{{banner.subtitle}}{% endif %}</h1>
                {% if banner.description %}
                <p class="desc">{{banner.description}}</p>
                {% endif %}
                <div class="btns">
                  {% if banner.btn1_show %}
                  <a href="{{banner.btn1_link}}" class="btn-primary">{{banner.btn1_text}}</a>
                  {% endif %}
                  {% if banner.btn2_show %}
                  <a href="{{banner.btn2_link}}" class="btn-ghost">{{banner.btn2_text}}</a>
                  {% endif %}
                </div>
              </div>
            </div>
            {% endfor %}
          </div>
          <div class="swiper-pagination"></div>
        </div>
        <div class="scroll-hint">
          <div class="mouse"></div>
          <span>SCROLL</span>
        </div>
      </div>
    </div>

    <!-- Slide 2: Donation Data -->
    <div class="swiper-slide">
      <div class="slide-donation">
        <div class="donation-wrap">
          <div class="section-head">
            <h2>捐赠及支出公示</h2>
            <div class="en">Every Penny, Tracked with Integrity</div>
          </div>
          <div class="data-cards">
            <div class="data-card">
              <div class="label">历年公益捐赠收入</div>
              <div class="amount"><span class="countup" data-target="{{donationStat.total_income | default(0)}}">0</span><span class="unit">元</span></div>
              <div class="note">截至今日</div>
            </div>
            <div class="data-card">
              <div class="label">本年度捐赠收入</div>
              <div class="amount"><span class="countup" data-target="{{donationStat.year_income | default(0)}}">0</span><span class="unit">元</span></div>
              <div class="note">本年度</div>
            </div>
            <div class="data-card">
              <div class="label">历年公益支出</div>
              <div class="amount"><span class="countup" data-target="{{donationStat.total_expense | default(0)}}">0</span><span class="unit">元</span></div>
              <div class="note">截至今日</div>
            </div>
          </div>
          <div class="donation-tables">
            <div class="dtable">
              <h3>捐赠收入明细</h3>
              <div class="dtable-table-wrap">
                <table class="dtable-head">
                  <colgroup><col><col style="width:140px;"></colgroup>
                  <thead><tr><th>捐赠方</th><th class="td-r">金额</th></tr></thead>
                </table>
                <div class="dtable-scroll-wrap donation-scroll">
                  <div class="dtable-scroll-inner">
                    <table>
                      <colgroup><col><col style="width:140px;"></colgroup>
                      <tbody>
                        {% for item in donationIncome %}
                        <tr><td>{{item.name}}</td><td class="td-r">{{item.amount}}</td></tr>
                        {% endfor %}
                        {% for item in donationIncome %}
                        <tr><td>{{item.name}}</td><td class="td-r">{{item.amount}}</td></tr>
                        {% endfor %}
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
            <div class="dtable">
              <h3>公益支出明细</h3>
              <div class="dtable-table-wrap">
                <table class="dtable-head">
                  <colgroup><col><col style="width:140px;"></colgroup>
                  <thead><tr><th>支付对象</th><th class="td-r">金额</th></tr></thead>
                </table>
                <div class="dtable-scroll-wrap donation-scroll">
                  <div class="dtable-scroll-inner">
                    <table>
                      <colgroup><col><col style="width:140px;"></colgroup>
                      <tbody>
                        {% for item in donationExpense %}
                        <tr><td>{{item.name}}</td><td class="td-r">{{item.amount}}</td></tr>
                        {% endfor %}
                        {% for item in donationExpense %}
                        <tr><td>{{item.name}}</td><td class="td-r">{{item.amount}}</td></tr>
                        {% endfor %}
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
            <div class="dtable dtable-drug">
              <h3>药品援助公示</h3>
              <div class="dtable-table-wrap">
                <table>
                  <thead><tr><th>发放日期</th><th>患者姓名</th><th>地区</th><th>药品名称</th></tr></thead>
                </table>
                <div class="drug-scroll-wrap">
                  <div class="drug-scroll-inner">
                    <table>
                      <tbody>
                        {% for item in medicines %}
                        <tr>
                          <td>{{item.distribute_date}}</td>
                          <td>{{item.person}}</td>
                          <td>{{item.region}}</td>
                          <td class="drug-name">{{item.name}}</td>
                        </tr>
                        {% endfor %}
                        {% for item in medicines %}
                        <tr>
                          <td>{{item.distribute_date}}</td>
                          <td>{{item.person}}</td>
                          <td>{{item.region}}</td>
                          <td class="drug-name">{{item.name}}</td>
                        </tr>
                        {% endfor %}
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- Slide 3: Projects -->
    <div class="swiper-slide">
      <div class="slide-projects" id="slideProjects">
        <!-- Background images -->
        {% for proj in projects %}
        <div class="proj-bg{% if loop.index == 1 %} active{% endif %}" style="background-image:url('{{proj.cover}}')"></div>
        {% endfor %}

        <!-- Info card -->
        <div class="proj-info-card" id="projInfoCard">
          <div class="card-label">项目介绍</div>
          <h3 id="projTitle">{% if projects[0] %}{{projects[0].title}}{% endif %}</h3>
          <div class="card-divider"></div>
          <p id="projDesc">{% if projects[0] %}{{projects[0].summary}}{% endif %}</p>
          <a href="#" class="card-btn" id="projLink">了解详情 →</a>
        </div>

        <!-- Bottom tabs -->
        <div class="proj-tabs" id="projTabs">
          {% for proj in projects %}
          <div class="proj-tab{% if loop.index == 1 %} active{% endif %}" data-index="{{loop.index0}}">{{proj.title}}</div>
          {% endfor %}
        </div>

        <a href="/project.html" class="proj-more-link">查看全部项目</a>
      </div>
    </div>

    <!-- Slide 4: News -->
    <div class="swiper-slide">
      <div class="slide-news">
        <div class="news-wrap">
          <div class="section-head">
            <h2>新闻 &amp; 动态</h2>
            <div class="en">Latest News and Updates</div>
          </div>
          <div class="news-grid">
            {% if newsList[0] %}
            <a href="/news/detail/{{newsList[0].id}}.html" class="news-featured">
              <img src="{{newsList[0].cover}}" alt="{{newsList[0].title}}">
              <div class="overlay">
                <h3>{{newsList[0].title}}</h3>
                <div class="date">{{newsList[0].publish_date}}</div>
              </div>
            </a>
            {% endif %}
            <div class="news-list">
              {% for news in newsList %}
              {% if loop.index > 1 %}
              <a href="/news/detail/{{news.id}}.html" class="news-item">
                <div class="date-box">
                  <div class="day">{{news.publish_day}}</div>
                  <div class="ym">{{news.publish_ym}}</div>
                </div>
                <div class="text">
                  <h4>{{news.title}}</h4>
                  <p>{{news.summary}}</p>
                </div>
              </a>
              {% endif %}
              {% endfor %}
              <div style="text-align:right;padding-top:12px;">
                <a href="/news.html" class="more-link">更多新闻 →</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Slide 5: Partners + Footer -->
    <div class="swiper-slide">
      <div class="slide-footer">
        <div class="partners-section">
          <div class="section-head">
            <h2>合作伙伴</h2>
            <div class="en">Thank You for Your Cooperation on the Way to Charity</div>
          </div>
          <div class="partners-grid">
            {% for partner in partners %}
            <div class="partner-item">
              {% if partner.link %}
              <a href="{{partner.link}}" target="_blank"><img src="{{partner.image}}" alt="{{partner.title}}"></a>
              {% else %}
              <img src="{{partner.image}}" alt="{{partner.title}}">
              {% endif %}
            </div>
            {% endfor %}
          </div>
        </div>
        {% include "common/_footer.html" %}
      </div>
    </div>

  </div>
</div>
{% endblock %}

{% block js %}
<script>
// Project data for tab switching
var projData = [
  {% for proj in projects %}
  { title: '{{proj.title}}', desc: '{{proj.summary}}', link: '/project/detail/{{proj.id}}.html' }{% if not loop.last %},{% endif %}
  {% endfor %}
];

(function(){
  var labels = document.getElementById('slideLabels');
  var labelItems = labels.querySelectorAll('.slide-label');

  function updateLabels(index) {
    labelItems.forEach(function(el, i) {
      el.classList.toggle('active', i === index);
    });
    var lightSlides = [1, 3, 4];
    labels.classList.toggle('light', lightSlides.indexOf(index) > -1);
  }

  // Project tab switching
  var projBgs = document.querySelectorAll('.proj-bg');
  var projTabs = document.querySelectorAll('.proj-tab');
  var projTitle = document.getElementById('projTitle');
  var projDesc = document.getElementById('projDesc');
  var projLink = document.getElementById('projLink');
  var currentProj = 0;

  function switchProject(idx) {
    projBgs.forEach(function(bg, i) { bg.classList.toggle('active', i === idx); });
    projTabs.forEach(function(tab, i) { tab.classList.toggle('active', i === idx); });
    if (projData[idx]) {
      projTitle.textContent = projData[idx].title;
      projDesc.textContent = projData[idx].desc;
      projLink.href = projData[idx].link;
    }
  }

  projTabs.forEach(function(tab) {
    tab.addEventListener('click', function() {
      currentProj = parseInt(this.dataset.index);
      switchProject(currentProj);
      startProjAuto();
    });
  });

  // Auto-rotate projects
  var projTimer = null;
  function startProjAuto() {
    stopProjAuto();
    projTimer = setInterval(function() {
      currentProj = (currentProj + 1) % projData.length;
      switchProject(currentProj);
    }, 5000);
  }
  function stopProjAuto() { if(projTimer){clearInterval(projTimer);projTimer=null;} }

  // Banner Swiper
  var bannerSwiper = new Swiper('#bannerSwiper', {
    direction: 'horizontal',
    loop: true,
    speed: 1000,
    autoplay: { delay: 5000, disableOnInteraction: false },
    effect: 'fade',
    fadeEffect: { crossFade: true },
    pagination: {
      el: '#bannerSwiper .swiper-pagination',
      clickable: true,
    },
    nested: true,
  });

  // Fullpage Swiper
  var fullpage = new Swiper('#fullpageSwiper', {
    direction: 'vertical',
    speed: 800,
    mousewheel: {
      sensitivity: 1,
      thresholdDelta: 30,
    },
    keyboard: { enabled: true },
    on: {
      slideChange: function() {
        updateLabels(this.activeIndex);
        if(this.activeIndex === 2) { startProjAuto(); } else { stopProjAuto(); }
        if(this.activeIndex === 0) { bannerSwiper.autoplay.start(); } else { bannerSwiper.autoplay.stop(); }
        if(this.activeIndex === 1) triggerCountUp();
      },
      init: function() {
        updateLabels(0);
      }
    }
  });

  // Click labels to navigate
  labelItems.forEach(function(el) {
    el.addEventListener('click', function() {
      fullpage.slideTo(parseInt(this.dataset.index));
    });
  });

  // CountUp animation
  function animateCountUp(el) {
    var target = parseFloat(el.dataset.target) || 0;
    var duration = 2000;
    var startTime = performance.now();
    var easeOut = function(t) { return 1 - Math.pow(1 - t, 3); };

    function update(now) {
      var elapsed = now - startTime;
      var progress = Math.min(elapsed / duration, 1);
      var value = Math.floor(easeOut(progress) * target);
      el.textContent = value.toLocaleString();
      if (progress < 1) requestAnimationFrame(update);
    }
    requestAnimationFrame(update);
  }

  var countUpDone = false;
  function triggerCountUp() {
    if (countUpDone) return;
    countUpDone = true;
    document.querySelectorAll('.countup').forEach(function(el) { animateCountUp(el); });
  }
})();
</script>
{% endblock %}