<!--======================================================================
// 自由之光（Light of Liberty）著作權聲明與使用規範
// Copyright Notice and Terms of Use by Light of Liberty
//
// 本程式碼及相關檔案（包括但不限於圖片、音訊、視訊與文字）之著作權，
// 均屬「自由之光（Light of Liberty）」團隊所有，並受中華民國著作權法
// 及國際法規保護。
//
// This source code and associated files (including but not limited to
// images, audio, video, and text) are the intellectual property of the
// "Light of Liberty" team and are protected by copyright laws.
//
// 未經明確書面許可，嚴禁以任何形式進行以下行為：
// 1. 複製、修改、再分發本程式碼。
// 2. 在未經授權的情況下，使用本作品中的任何圖片或資產。
//
// The following actions are strictly prohibited without prior written permission:
// 1. Reproduction, modification, or redistribution of this source code.
// 2. Unauthorized use of any images or assets contained within this work.
//
// 追溯聲明 (Traceability Notice)：
// 本程式碼包含「自由之光」獨有的標記。任何部分或完整複製本程式碼，
// 皆可能攜帶這些標記，使我們得以追溯其來源。
//
// This code contains unique markers owned by "Light of Liberty." Any
// partial or full reproduction of this code may carry these markers,
// allowing us to trace its origin.
//
// 聯絡信箱（Contact）: light.of.liberty.2023@gmail.com
//
// © 2024 自由之光（Light of Liberty）. 保留所有權利。
// © 2024 Light of Liberty. All Rights Reserved.
// ======================================================================-->
<!doctype html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <!-- 指定字元編碼，UTF-8 幾乎是標準配置，支援中文、日文、表情符號等 -->
  
  <meta name="description" content="這是一個關於星希羽的官方詳細介紹網站，由自由之光團隊星樂之夢工作室開發。星希羽專頁">
  <!-- 提供網站摘要，Google 搜尋結果通常會引用這段文字（非常重要，影響點擊率） -->

  <meta name="keywords" content="星希羽, 自由之光, 星樂之夢, Vtuber, 團隊介紹">
  <!-- 舊式 SEO 用法，Google 幾乎不再使用，但其他小型搜尋引擎可能會參考 -->
  
  <meta name="author" content="自由之光團隊星樂之夢工作室">
  <!-- 作者或團隊署名，主要是資訊標註，不會直接影響搜尋排名 -->

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 讓手機平板用正確比例顯示，開啟響應式設計必備 -->

  <title>星希羽 - 官方專頁</title>
  <style>
    /* ---- Reset ---- */
    * { margin:0; padding:0; box-sizing:border-box; }
    body {
      font-family: 'Nunito', 'Microsoft JhengHei', sans-serif;
      background: linear-gradient(135deg, #C7EEFB, #fceaff);
      color: #333;
      overflow-x: hidden;
    }

    /* 背景泡泡動畫 */
    .bubble {
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.747);
      animation: floatUp 10s infinite ease-in-out;
    }
    @keyframes floatUp {
      0% { transform: translateY(0) scale(1); opacity:0.7; }
      50% { transform: translateY(-200px) scale(1.2); opacity:1; }
      100% { transform: translateY(0) scale(1); opacity:0.7; }
    }

    header {
      text-align:center;
      padding:60px 20px 40px;
    }
    header h1 {
      font-size:2.2em;
      color:#444;
      text-shadow:0 2px 6px rgba(0,0,0,0.1);
    }
    header p {
      font-size:1.2em;
      color:#666;
    }

    /* 區塊卡片 */
    section {
      max-width:1000px;
      margin:40px auto;
      padding:30px;
      background: rgba(255,255,255,0.7);
      border-radius:20px;
      box-shadow:0 8px 24px rgba(0,0,0,0.1);
      backdrop-filter: blur(6px);
    }
    section h2 {
      font-size:1.8em;
      margin-bottom:20px;
      color:#0031d3;
    }

/* --- 你的現有 Swiper 基礎樣式（保留） --- */
.mySwiper {
  width: 100%;
  max-width: 800px;
  margin: 40px auto;
  padding-bottom: 90px; /* 增大底部空間，避免點點蓋到 caption */
}
.swiper-slide {
  text-align: center;
  opacity: 0.5;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.swiper-slide-active {
  opacity: 1;
  transform: scale(1.05);
}
.swiper-slide img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

/* --- pagination（點點）樣式 --- */
/* 調整位置（改底部距離）與 z-index 確保可見 */
.swiper-pagination {
  bottom: 18px !important;   /* 調整整體點點的高度（往上或往下移）*/
  z-index: 20;
}

/* 點點大小 / 間距 / 基本外觀 */
.swiper-pagination-bullet {
  width: 12px;               /* 點點寬 */
  height: 12px;              /* 點點高 */
  margin: 0 6px;             /* 左右間距 */
  background: #bbb;
  opacity: 0.6;
  border-radius: 50%;
  transition: transform .18s ease, opacity .18s ease, background .18s ease;
  position: relative;
}

/* active（目前）的點點樣式 */
.swiper-pagination-bullet-active {
  width: 18px;               /* active 點點較大 */
  height: 18px;
  background: #111;
  opacity: 1;
  transform: scale(1.05);
}

/* 擴大可點擊範圍（不改視覺大小）*/
.swiper-pagination-bullet::after {
  content: "";
  position: absolute;
  inset: -6px;               /* 四周各擴大 6px 可點擊區域 */
  border-radius: 50%;
}

/* 可選：把點點做成橢圓形（若喜歡） */
/*
.swiper-pagination-bullet {
  width: 22px;
  height: 8px;
  border-radius: 6px;
}
.swiper-pagination-bullet-active {
  width: 30px;
  height: 10px;
}
*/

/* --- caption（說明文字）樣式 --- */
/* 調整字級、行高、最大行數與間距（避免被點點蓋到） */
.caption {
  margin-top: 12px;          /* 圖片與文字間距 */
  font-size: 15px;          /* 文字大小（改這個） */
  line-height: 1.45;        /* 行高 */
  color: #333;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  /* 限制顯示行數（例如最多兩行）*/
  display: -webkit-box;
  -webkit-line-clamp: 2;    /* 顯示最多 2 行（改成 3 就顯示三行）*/
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- 響應式：手機縮小字級與點點 --- */
@media (max-width: 600px) {
  .mySwiper { padding-bottom: 70px; }
  .swiper-pagination { bottom: 12px !important; }
  .swiper-pagination-bullet { width: 10px; height: 10px; margin: 0 4px; }
  .swiper-pagination-bullet-active { width: 14px; height: 14px; }
  .caption { font-size: 13px; -webkit-line-clamp: 2; }
  
}

    
    /* 限制圖片最大寬度與最大高度，不會拉伸 */
    .swiper-slide img {
       width: 100%;
        max-width: 700px;      /* 桌機最大寬度，可調 */
        max-height: 480px;     /* 桌機最大高度，可調 */
        height: auto;
        object-fit: contain;   /* 保持完整圖像，不裁切 */
        display: block;
        margin: 0 auto;        /* 置中 */
        border-radius: 12px;
    }

    /* 作品區 */
    .videos {
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap:20px;
    }
    .videos iframe {
      width:100%;
      aspect-ratio:16/9;
      border-radius:12px;
      border:none;
      box-shadow:0 4px 16px rgba(0,0,0,0.15);
    }

    /* 推特 */
    .twitter-embed {
      text-align:center;
    }

    footer {
      text-align:center;
      padding:30px;
      color:#555;
      font-size:14px;
    }

  /* 粒子 canvas（保留） */
  #cursor-canvas{ position:fixed; inset:0; pointer-events:none; z-index:9999; }

    #audio-sample h2 {
    margin-bottom: 20px;
  }

  .audio-player {
    margin: 15px auto;
    padding: 15px;
    max-width: 400px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }

  .audio-player p {
    margin: 0 0 8px;
    font-weight: bold;
    color: #333;
  }

  /* 讓 audio 播放器寬度填滿容器 */
  .audio-player audio {
    width: 100%;
    outline: none;
  }
  .audio-side-img:hover .tooltip {
  visibility: visible;
}

 /* 按鈕外觀（你可再調色） */
 .back-button{
   display:inline-block;
   padding:10px 14px;
   border-radius:10px;
   text-decoration:none;
   font-weight:700;
   font-size:14px;
   line-height:1;
   background: var(--accent, #f2c94c);
   color:#222;
   box-shadow:0 6px 16px rgba(0,0,0,.08);
   border: 1px solid rgba(0,0,0,.06);
   transition: transform .15s ease, box-shadow .2s ease;
   margin-top: 20px;   /* 讓按鈕與上邊緣保持 20 像素的距離 */
   margin-left: 30px;  /* 讓按鈕與左邊緣保持 30 像素的距離 */
 }
  </style>
</head>
<body>
  <canvas id="cursor-canvas"></canvas>
  <!-- 背景泡泡 -->
  <div class="bubble" style="width:80px;height:80px;left:10%;top:80%;animation-delay:0s;"></div>
  <div class="bubble" style="width:60px;height:60px;left:40%;top:90%;animation-delay:3s;"></div>
  <div class="bubble" style="width:100px;height:100px;left:70%;top:85%;animation-delay:5s;"></div>

 <div class="container">
    <a href="https://light-of-liberty.github.io/HoshiKiha.html" class="back-button">
        &lt; 返回希羽簡介
    </a>
  
  <header>
    <h1>💫 星希羽 Hoshi Kiha 💫</h1>
    <p>官方專頁</p>
  </header>

<!-- 1. head 裡要引入 Swiper CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>

<section id="gallery" style="padding:60px 20px; background:#C7EEFB;">
  <h2 style="text-align:center;">🎨 繪畫 / 畫廊</h2>

  <!-- Swiper -->
  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="img/4_2024111019482502.jpg" alt="繪圖5">
        <p class="caption">星希羽出道紀念桌布 </p>
      </div>
 
      </div>
      </div>
    </div>

    <!-- 點點 -->
    <div class="swiper-pagination"></div> </div>  
    <!-- 左右箭頭 -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>


</section>

</section>
<section id="videos-embed" style="padding:60px 20px; text-align:center; background:#ffffe1;">
  <h2>🎵 代表作品</h2>
  <div class="videos">
    <iframe src="https://www.youtube.com/embed/524F0af40hs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe src="https://www.youtube.com/embed/7VWBVn4agP8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
</section>

<section id="spotify" style="padding:60px 20px; text-align:center; background:#a1bdf3;">

  <h2>🎵 Spotify 專輯</h2>
  <div class="spotify-embed">
    <iframe 
      style="border-radius:12px" 
      src="https://open.spotify.com/embed/album/5GSHMiENUT4Z9Y3ZtRek1L?utm_source=generator" 
      width="100%" height="352" frameborder="0" 
      allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" 
      loading="lazy">
    </iframe>
  </div>
  <div class="spotify-embed">
    <iframe 
      style="border-radius:12px" 
      src="https://open.spotify.com/embed/album/5B3af2pb98nSDlt18c3YA6?utm_source=generator" 
      width="100%" height="352" frameborder="0" 
      allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" 
      loading="lazy">
    </iframe>
  </div>
</section>

<!-- 2. body 結尾引入 Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<!-- 3. 初始化 Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
  slidesPerView: 1.2,       // 中間顯示 1 張，左右可見部分
  centeredSlides: true,     // 中間置中
  spaceBetween: 20,         // 間距
  loop: true,               // 無限循環
  autoplay: {
    delay: 3000,            // 自動輪播 3 秒
    disableOnInteraction: false, // 手動後仍繼續
  },
  pagination: {
    el: ".swiper-pagination",
    clickable: true,        // 點點可點擊
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

/* ========== cursor particle trail（保留） ========= */
/* ========== cursor star-particles ========= */
(function(){
  const canvas = document.getElementById('cursor-canvas');
  const ctx = canvas.getContext('2d');
  const DPR = window.devicePixelRatio || 1;

  function resize(){
    canvas.width = innerWidth * DPR;
    canvas.height = innerHeight * DPR;
    canvas.style.width = innerWidth + 'px';
    canvas.style.height = innerHeight + 'px';
    ctx.setTransform(DPR,0,0,DPR,0,0);
  }
  resize();
  window.addEventListener('resize', resize);

  // ====== 可調參數（你可以直接編輯這裡） ======
  const palette = ['#FFD966','#FF9AA2','#A2D9FF','#F4D1FF','#B8FFB0']; // 預設顏色
  const maxParticles = 160;      // 畫面上最多粒子數
  const spawnPerMove = 3;        // 每次 mousemove 生成幾顆
  const starPoints = 5;          // 星星尖數（5 = 五角星）
  const minSize = 4;             // 星星最小半徑
  const maxSize = 10;            // 星星最大半徑
  const gravity = 0.02;          // 重力感（讓星星往下落）
  const useImage = false;        // 若要使用外部圖檔改成 true（見下方說明）
  const starImageSrc = 'img/star-particle.png'; // 若 useImage = true，請放這個路徑

  // ====== 內部狀態 ======
  const particles = [];
  let starImg = null;
  if(useImage){
    starImg = new Image();
    starImg.src = starImageSrc;
  }

  function randBetween(a,b){ return a + Math.random()*(b-a); }

  // 畫一顆星星（多邊形）在 ctx 的原點(0,0)，向右為 0 度
  function drawStarPath(ctx, radiusOuter, radiusInner, spikes){
    const step = Math.PI / spikes;
    ctx.beginPath();
    let rot = -Math.PI/2; // 從上方開始
    for(let i=0;i<spikes;i++){
      const x1 = Math.cos(rot) * radiusOuter;
      const y1 = Math.sin(rot) * radiusOuter;
      ctx.lineTo(x1, y1);
      rot += step;
      const x2 = Math.cos(rot) * radiusInner;
      const y2 = Math.sin(rot) * radiusInner;
      ctx.lineTo(x2, y2);
      rot += step;
    }
    ctx.closePath();
  }

  function addParticle(x,y){
    if(particles.length >= maxParticles) particles.shift();
    const size = randBetween(minSize, maxSize);
    const inner = size * 0.48; // 內圈比例(調整可改)
    const outer = size;
    const angle = Math.random() * Math.PI * 2;
    const speed = randBetween(0.2, 1.6);
    const vx = Math.cos(angle) * speed;
    const vy = Math.sin(angle) * speed * 0.25 - 0.6; // 初始略往上
    const col = palette[Math.floor(Math.random()*palette.length)];
    particles.push({
      x, y,
      vx, vy,
      sizeOuter: outer,
      sizeInner: inner,
      born: performance.now(),
      life: 600 + Math.random()*700,
      color: col,
      rot: Math.random()*Math.PI*2,
      drot: (Math.random()-0.5)*0.06
    });
  }

  // 監聽滑鼠 / 觸控
  window.addEventListener('mousemove', (e)=>{
    for(let i=0;i<spawnPerMove;i++){
      addParticle(e.clientX + (Math.random()-0.5)*6, e.clientY + (Math.random()-0.5)*6);
    }
  }, {passive:true});
  window.addEventListener('touchmove', (e)=>{
    const t = e.touches[0];
    if(!t) return;
    for(let i=0;i<2;i++) addParticle(t.clientX, t.clientY);
  }, {passive:true});

  // 主繪製迴圈
  function draw(now){
    ctx.clearRect(0,0,innerWidth, innerHeight);

    for(let i=particles.length-1;i>=0;i--){
      const p = particles[i];
      const age = now - p.born;
      if(age >= p.life){ particles.splice(i,1); continue; }

      // 更新
      p.vy += gravity;
      p.x += p.vx;
      p.y += p.vy;
      p.rot += p.drot;
      const t = 1 - (age / p.life); // 1 -> 0
      const alpha = Math.max(0, t);

      ctx.save();
      ctx.globalAlpha = alpha;
      ctx.translate(p.x, p.y);
      ctx.rotate(p.rot);

      if(useImage && starImg && starImg.complete){
        // 若使用圖片模式，畫圖檔（可選）
        const w = p.sizeOuter * 2;
        const h = p.sizeOuter * 2;
        ctx.drawImage(starImg, -w/2, -h/2, w, h);

        // 若想疊色（用 color 作為疊層），可用 globalCompositeOperation hack（可另外要求）
      } else {
        // 用向量畫星星（可用顏色填滿）
        ctx.fillStyle = p.color;
        // outer, inner, spikes
        drawStarPath(ctx, p.sizeOuter, p.sizeInner, starPoints);
        ctx.fill();
      }

      ctx.restore();
    }

    requestAnimationFrame(draw);
  }

  requestAnimationFrame(draw);

})();
</script>

  <footer>
    © 2025 星樂之夢工作室/自由之光
  </footer>
</body>

</html>