<template>
  <UPage class="bg-gradient-to-br from-amber-50 to-amber-100 p-2 md:p-8">
    <UPageHero title="特殊校友" description="中补班 (1956年): 一封迟来的貼文" />
    <UContainer>
      <div class="flex justify-center items-center">
        <div
          class="p-4 md:p-12 text-justify relative max-w-2xl paper-texture bg-amber-50 shadow-md border border-amber-200 rounded-xl font-letter text-gray-800 leading-relaxed handwritten tracking-wide"
        >
          <UModal
            v-model:open="imagePopup"
            title="中补班乙班合影"
            description="永平学校中辅乙同学合影 - 一九五六年八月九日"
            fullscreen
          >
            <img
              src="/about/中补班乙.jpg"
              alt="中补班乙班"
              class="sm:absolute sm:-top-25 sm:-right-60 md:right-0 sm:rotate-12 md:w-60 lg:w-80 transition-all cursor-pointer"
            />
            <template #body>
              <img
                src="/about/中补班乙.jpg"
                alt="中补班乙班"
                class="max-w-full max-h-full object-contain mx-auto"
              />
            </template>
          </UModal>
          <div class="text-xl mb-2 font-bold">致：1956年永中中补班</div>
          <div class="text-lg mb-6 font-semibold">“诚” “毅”两班老校友：</div>

          <p class="indent-8 mb-4">
            各位老同学：别来无恙？这句问候的话迟到了六十多年。想当年大家还是青涩年少，六十五年后的今天，如果还健在人间，想必齿危发秃，两鬓斑白，如果早已驾鹤西去，回顾一坯黄土，会否感慨此生：凡是尘土必归于尘土！
          </p>

          <p class="indent-8 mb-4">
            但这个迟到的讯息，现在发出，将穿越65年的时间和空间，一定要，也一定会传到你们的心弦，引起共鸣，因为它共同的曲调是永中的校歌：黉舍巍峨著令名，时闻弦诵声。。。
          </p>

          <p class="indent-8 mb-4">
            还健在的老同学，请响应这个号召，已经移民的，请魂兮归来，让我们老同学聚在一起，见证和欣赏生命天空最后的夕阳红，莫道桑榆晚，红霞尚满天！
          </p>

          <p class="indent-8 mb-6">
            召集人：刘用周　电话：江回潮　电话：马文钦　电话：杨青发　电话：可以再提名
          </p>

          <p class="text-right mt-8">2022年4月15日</p>
        </div>
      </div>
      <p class="my-4 text-center font-bold">
        中补班同学名册就記忆如下：马文钦提供
      </p>
      <UCard>
        <div class="space-x-4 space-y-2 text-center">
          <UBadge
            v-for="name in schoolMates"
            size="xl"
            variant="subtle"
            class="hover:scale-120 transition-all cursor-pointer"
            >{{ name }}</UBadge
          >
        </div>
      </UCard>
      <p class="my-4 text-center font-bold">
        黄绍楠校长，李华光等老师的墨宝赠言，尤为珍贵
      </p>
      <UCarousel
        v-slot="{ item }"
        :items="giveWords"
        class="w-full max-w-xs mx-auto"
        arrows
        dots
      >
        <img :src="item" width="320" height="320" class="rounded-lg" />
      </UCarousel>
    </UContainer>
  </UPage>
</template>

<script lang="ts" setup>
useSeoMeta({
  title: "致：1956年永中中补班 — 永平中学校友会",
  ogTitle: "致中补班的一封信",
  ogDescription:
    "致亲爱的1956年‘诚’、‘毅’两班老校友：虽迟六十余年，愿这条讯息穿越时间，召集大家重聚，共叙曾经校园情怀与夕阳红岁月。",
  ogUrl: "https://yphsalumni.org/about/middle-highschool-tuition-class/",
  ogType: "article",
  ogImage: "/about/中补班乙.jpg",
  ogImageAlt: "永平学校中辅乙同学合影",
  articlePublishedTime: "2022-04-15T00:00:00+08:00",
  author: "永平中学校友会",
});

const imagePopup = ref<boolean>(false);

const schoolMates = ref<string[]>([
  "萧泽金",
  "黄荣发",
  "彭海恩",
  "掦楚玉",
  "揚楚英",
  "林进财",
  "马文钦",
  "陳玉英",
  "黄清蘭",
  "池伟青",
  "冯金才",
  "張波香",
  "陈红金",
  "黄鳳娇",
  "戴成雄",
  "黄光兴",
  "余新礼",
  "刘用周",
  "杨青发",
  "江回潮",
]);

const giveWords = ref<string[]>([
  "/about/黄绍南校长赠言.jpg",
  "/about/李华光赠言.jpg",
  "/about/某老师赠言.jpg",
  "/about/赵老师赠言.jpg",
]);
</script>

<style>
/* @import url("https://fonts.googleapis.com/css2?family=Great+Vibes&family=Noto+Serif+SC:wght@400;500&family=Zhi+Mang+Xing&display=swap"); */
/* 自定义字体风格组合 */
.font-letter {
  /* font-family: "Zhi Mang Xing", "Great Vibes", "Noto Serif SC", serif; */
  font-weight: 400;
}
/* 添加信纸背景纹理（可换 URL 为你自己的纹理图）*/
.paper-texture {
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.5) 1px,
    transparent 1px
  );
  background-size: 4px 4px;
}
/* 微微倾斜文字，模拟手写不规整 */
.handwritten {
  transform: rotate(-0.3deg);
}
</style>
