<?php
/**
 * 正妹不在家 - 台灣紀實攝影與20號倉庫歷史影像典藏入口 (PHP版本)
 * ------------------------------------------------------------------
 * 本版新增「推薦相簿」區塊：
 *   1. 讀取 dirlist.txt（每行一個相簿目錄的 Windows 完整路徑，如
 *      X:\taiwan\台中20號倉庫藝術村\文化義工），解析出相對於網站根目錄
 *      的路徑（去除磁碟機代號、反斜線轉正斜線）。
 *   2. 從清單中隨機挑選目錄（每挑一次就從候選池移除，確保均勻涵蓋整份清單，
 *      不會只集中在列表前段），逐一判斷該目錄底下是否有 .jpg 圖片：
 *        - 若有 .jpg 檔，隨機挑一張作為縮圖，該相簿即入選。
 *        - 若沒有任何 .jpg（或目錄比對不到），直接跳過，繼續隨機挑下一個，
 *          直到湊滿指定數量（最多 12 個）或候選目錄用盡為止。
 *   3. 相簿標題＝該相簿目錄的「完整相對路徑」，去掉所有 "/"，且不顯示
 *      "taiwan" 這層根目錄名稱；標題過長時由前端 CSS 以單行刪節號裁切，
 *      滑鼠移過去可看完整名稱。
 * 其餘（熱門文章 / 關注文章 週快取機制、導覽連結、暗黑復古風格）
 * 皆沿用原首頁設計。
 *
 * 本頁面設計僅針對大螢幕裝置（PC / Pad）呈現，未特別處理手機小螢幕版型。
 */

// ================= 0. 共用路徑設定 =================
// 網站文件根目錄（dirlist.txt 內的相對路徑，皆視為相對於此目錄）
$docRoot = __DIR__;

// ================= 1. 參數與部落格路徑偵測 =================
$cacheFile     = __DIR__ . '/blog_weekly_cache.json';
$cacheDuration = 7 * 86400; // 7 天 (604,800 秒)

// 自動尋找部落格資料夾路徑
$possibleBlogDirs = [
    __DIR__ . '/play/blog/blog/',
];

$blogDir = null;
foreach ($possibleBlogDirs as $dir) {
    if (is_dir($dir)) {
        $blogDir = $dir;
        break;
    }
}
if (!$blogDir) {
    $blogDir = __DIR__ . '/play/blog/blog/';
}

// 部落格文章連結基礎網址 (點擊文章卡片時的跳轉目標)
$blogBaseUrl = 'https://ibm1943.synology.me/play/blog/';

// ================= 2. 週快取檢查與資料計算 (熱門 / 關注文章) =================
$showcaseData = null;

if (file_exists($cacheFile) && (time() - filemtime($cacheFile) < $cacheDuration)) {
    $cacheRaw = file_get_contents($cacheFile);
    $showcaseData = json_decode($cacheRaw, true);
}

// 若快取不存在或已逾 7 天，重新掃描部落格文章
if (!$showcaseData || !is_array($showcaseData) || !isset($showcaseData['popular'], $showcaseData['focus'])) {
    $allPosts = [];

    if (is_dir($blogDir)) {
        $categories = array_filter(scandir($blogDir), function($item) use ($blogDir) {
            return is_dir($blogDir . $item) && !in_array($item, ['.', '..']);
        });

        foreach ($categories as $cat) {
            $catPath = $blogDir . $cat;
            $files = array_diff(scandir($catPath), ['.', '..']);

            foreach ($files as $file) {
                if (substr($file, -4) !== '.txt') continue;
                $filePath = $catPath . '/' . $file;
                if (!is_file($filePath)) continue;

                $postData = json_decode(file_get_contents($filePath), true);
                if (!$postData) continue;

                $views   = (int)($postData['views'] ?? 0);
                $title   = $postData['title'] ?? '無標題';
                $content = $postData['content'] ?? '';

                // 擷取文章內的第一張圖片作為縮圖
                $thumb = '';
                if (preg_match('/<img[^>]+src=["\']([^"\']+)["\']/i', $content, $m)) {
                    $thumb = $m[1];
                }

                $fileDate = str_replace('.txt', '', $file);
                $date = (strlen($fileDate) >= 14 && is_numeric($fileDate))
                        ? date('Y-m-d', strtotime($fileDate))
                        : date('Y-m-d', filemtime($filePath));

                $allPosts[] = [
                    'cat'   => $cat,
                    'file'  => $file,
                    'title' => $title,
                    'views' => $views,
                    'thumb' => $thumb,
                    'date'  => $date
                ];
            }
        }
    }

    // 1. 熱門文章（點閱 views 由大到小排序，取前 10 篇）
    $popularPosts = $allPosts;
    usort($popularPosts, function($a, $b) {
        if ($b['views'] === $a['views']) return strcmp($b['file'], $a['file']);
        return $b['views'] - $a['views'];
    });
    $popularTop10 = array_slice($popularPosts, 0, 10);

    // 2. 關注文章（最冷門 / 點閱 views 由小到大排序，取前 10 篇）
    $focusPosts = $allPosts;
    usort($focusPosts, function($a, $b) {
        if ($a['views'] === $b['views']) return strcmp($b['file'], $a['file']);
        return $a['views'] - $b['views'];
    });
    $focusTop10 = array_slice($focusPosts, 0, 10);

    $showcaseData = [
        'generated_at' => date('Y-m-d H:i:s'),
        'popular'      => $popularTop10,
        'focus'        => $focusTop10
    ];

    @file_put_contents($cacheFile, json_encode($showcaseData, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT));
}

$popularList = $showcaseData['popular'] ?? [];
$focusList   = $showcaseData['focus'] ?? [];

// 預設縮圖 (當文章內沒有任何圖片時使用)
$defaultThumb = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200' viewBox='0 0 300 200'%3E%3Crect width='300' height='200' fill='%231e1e1e'/%3E%3Cpath d='M80 140 L120 90 L160 130 L190 85 L230 140 Z' fill='%23333'/%3E%3Ccircle cx='120' cy='65' r='14' fill='%23d4af37' opacity='0.7'/%3E%3Ctext x='50%25' y='88%25' fill='%23777' font-size='13' text-anchor='middle' font-family='sans-serif'%3E正妹不在家%3C/text%3E%3C/svg%3E";

// ================= 3. 推薦相簿：讀取 dirlist.txt 並隨機挑選縮圖 =================

/**
 * 解析 dirlist.txt，取得所有相簿目錄的「相對路徑」清單。
 * dirlist.txt 每行格式範例：
 *   X:\taiwan\台中20號倉庫藝術村\文化義工
 * 會被轉換為相對路徑：
 *   taiwan/台中20號倉庫藝術村/文化義工
 */
/**
 * 把一行文字轉成 UTF-8。
 *
 * 真正的問題根源：dirlist.txt 是在「Windows 繁體中文版 cmd.exe」下產生的，
 * cmd.exe 預設輸出編碼是 Big5（碼頁 950），而 Synology / Linux 上實際的
 * 檔案系統與目錄名稱是 UTF-8。同一組中文字，Big5 與 UTF-8 的位元組完全不同，
 * 所以只要路徑中含中文，逐位元組比對 (is_dir/glob) 必定失敗；只有純英文/數字
 * 路徑（如 Disk3、other、200005）因為 ASCII 在兩種編碼下位元組相同才會成功，
 * 這正好對應你觀察到「只有純英文路徑正常」的現象。
 *
 * 這裡先偵測該行是否已經是合法 UTF-8（例如日後改用 PowerShell/UTF-8 匯出
 * 就不需要再轉碼），若不是，才嘗試以 Big5 轉成 UTF-8。
 */
function convertLineToUtf8($str) {
    if ($str === '') return $str;

    // 已經是合法 UTF-8，直接使用，不做任何轉換
    if (function_exists('mb_check_encoding') && mb_check_encoding($str, 'UTF-8')) {
        return $str;
    }

    // 優先使用 iconv 轉碼（PHP 內建擴充套件，Synology 上通常已啟用）
    if (function_exists('iconv')) {
        $out = @iconv('BIG5', 'UTF-8//IGNORE', $str);
        if ($out !== false && $out !== '') {
            return $out;
        }
    }

    // iconv 不可用時，退而使用 mbstring 轉碼
    if (function_exists('mb_convert_encoding')) {
        $out = @mb_convert_encoding($str, 'UTF-8', 'BIG5');
        if ($out !== false && $out !== '') {
            return $out;
        }
    }

    // 兩種轉碼方式都無法使用，只好原樣返回（極少數情況）
    return $str;
}

function loadAlbumDirList($dirListFile) {
    $dirs = [];
    if (!is_file($dirListFile)) {
        return $dirs;
    }

    // dirlist.txt 若是在 Windows 繁體中文 cmd.exe 下用 "dir /s /b > dirlist.txt"
    // 之類方式產生，整個檔案很可能是 Big5 編碼、行尾為 CRLF。
    // 這裡直接讀取原始位元組再逐行處理，而不是用 file() 依賴系統 locale 判斷。
    $raw = file_get_contents($dirListFile);
    if ($raw === false || $raw === '') {
        return $dirs;
    }

    // 去除可能存在的 UTF-8 BOM
    if (substr($raw, 0, 3) === "\xEF\xBB\xBF") {
        $raw = substr($raw, 3);
    }

    // 統一換行符號後切成一行一行
    $raw = str_replace("\r\n", "\n", $raw);
    $raw = str_replace("\r", "\n", $raw);
    $lines = explode("\n", $raw);

    foreach ($lines as $line) {
        $line = trim($line);
        if ($line === '') continue;

        // 先轉成 UTF-8，確保後續與磁碟上的實際（UTF-8）目錄名稱比對一致
        $line = convertLineToUtf8($line);

        // 去除開頭的磁碟機代號，如 "X:\" 或 "X:/"
        $rel = preg_replace('#^[A-Za-z]:[\\\\/]#', '', $line);
        // 反斜線一律轉為正斜線
        $rel = str_replace('\\', '/', $rel);
        // 去除頭尾多餘的斜線與空白
        $rel = trim($rel, "/ \t\n\r\0\x0B");

        if ($rel !== '') {
            $dirs[] = $rel;
        }
    }

    // 去除重複目錄
    return array_values(array_unique($dirs));
}

/**
 * 將 dirlist.txt 內的相對路徑，逐層對應到實際檔案系統上的目錄。
 *
 * 修正說明：先前版本只用一次 is_dir($docRoot . '/' . $relDir) 直接比對整條路徑，
 * 但 dirlist.txt 是從其他裝置（如透過網路磁碟機 X: 匯出）取得的路徑字串，
 * 大小寫、全形/半形、或路徑分隔習慣可能與 Synology (Linux，檔案系統區分大小寫)
 * 上實際目錄不完全一致。只要路徑中有任何一層對不上，is_dir() 就會直接判定失敗，
 * 而失敗的機率通常和列表順序無關，但實務上常造成「只有列表前面少數幾筆能命中」
 * 的現象。這裡改成逐層比對：先嘗試完全相符，若對不上，該層改用「忽略大小寫」
 * 掃描目前目錄底下的項目來找出真正對應的資料夾，大幅提高比對成功率。
 *
 * @return string|null 找到則回傳實際存在的完整檔案系統路徑，找不到則回傳 null
 */
function resolveActualDir($docRoot, $relDir) {
    $current  = rtrim($docRoot, '/');
    $segments = explode('/', $relDir);

    foreach ($segments as $seg) {
        if ($seg === '') continue;

        $candidate = $current . '/' . $seg;
        if (is_dir($candidate)) {
            $current = $candidate;
            continue;
        }

        // 完全相符失敗，改用忽略大小寫方式在目前層級尋找相符的子目錄
        $matched = null;
        $items = @scandir($current);
        if ($items !== false) {
            foreach ($items as $item) {
                if ($item === '.' || $item === '..') continue;
                if (strcasecmp($item, $seg) === 0 && is_dir($current . '/' . $item)) {
                    $matched = $item;
                    break;
                }
            }
        }

        if ($matched === null) {
            return null; // 這一層完全找不到相符目錄，判定此路徑無效
        }
        $current = $current . '/' . $matched;
    }

    return $current;
}

/**
 * 從指定的相簿相對路徑清單中，隨機挑選最多 $count 組「有 .jpg 圖片」的相簿。
 *
 * 挑選邏輯（每次都從「目前尚未嘗試過」的候選池中隨機抽一個，抽過就從池中移除，
 * 確保每一輪抽選涵蓋整份清單、不會偏向列表前段）：
 *   1. 從候選池中隨機挑一個目錄，並將它從池中移除（不重複嘗試）。
 *   2. 判斷該目錄底下是否有 .jpg 圖片：
 *        - 目錄不存在（含大小寫容錯後仍找不到）或裡面沒有任何 .jpg -> 略過，
 *          回到步驟 1 繼續隨機挑下一個目錄。
 *        - 有 .jpg -> 從中隨機挑一張作為縮圖，該相簿入選。
 *   3. 重複以上動作，直到湊滿 $count 筆「精選相簿」，或候選池已經抽完為止。
 *
 * @param array  $albumDirs 相簿相對路徑清單
 * @param string $docRoot   網站根目錄（用來組出實際檔案系統路徑）
 * @param int    $count     希望取得的相簿數量，上限固定為 10
 * @return array 每筆為 ['title'=>..., 'dir'=>相對目錄, 'img'=>相對圖片路徑]
 */
function pickRandomAlbums($albumDirs, $docRoot, $count = 12) {
    $count = max(0, min(12, (int)$count)); // 精選相簿數量最多 12 個
    $picked = [];
    if ($count === 0 || empty($albumDirs)) {
        return $picked;
    }

    // 候選池：存放尚未嘗試過的 $albumDirs 索引
    $pool = array_keys($albumDirs);

    while (!empty($pool) && count($picked) < $count) {
        // 從「目前剩餘」的候選池中均勻隨機抽一筆
        $poolKey = array_rand($pool);
        $idx = $pool[$poolKey];

        // 立刻從池中移除，避免重複嘗試、也保證迴圈一定會結束
        unset($pool[$poolKey]);
        $pool = array_values($pool);

        $relDir = $albumDirs[$idx];

        $actualDir = resolveActualDir($docRoot, $relDir);
        if ($actualDir === null) {
            continue; // 目錄不存在，略過，繼續隨機挑下一個
        }

        // 掃描該目錄下的 .jpg 檔案（不分大小寫），不遞迴子目錄
        $jpgFiles = glob($actualDir . '/*.[jJ][pP][gG]');
        if ($jpgFiles === false || empty($jpgFiles)) {
            continue; // 沒有 jpg 圖片，略過並繼續隨機挑下一個目錄
        }

        // 隨機挑一張圖片作為縮圖
        $chosenFile = $jpgFiles[array_rand($jpgFiles)];

        // 轉成相對於網站根目錄的圖片路徑
        $relImg = ltrim(substr($chosenFile, strlen(rtrim($docRoot, '/'))), '/');

        // 相簿標題：相簿目錄「完整路徑」去掉所有 "/"，且不顯示 "taiwan" 這層根目錄名稱
        // （過長由前端 CSS 裁切顯示）
        $titleSegments = array_filter(explode('/', $relDir), function ($seg) {
            return strcasecmp($seg, 'taiwan') !== 0;
        });
        $title = implode('', $titleSegments);

        $picked[] = [
            'title' => $title,
            'dir'   => $relDir,
            'img'   => $relImg,
        ];
    }

    return $picked;
}

$dirListFile        = __DIR__ . '/dirlist.txt';
$albumRecommendCount = 12; // 首頁「推薦相簿」顯示幾組，最多 12 個

$albumDirs      = loadAlbumDirList($dirListFile);
$recommendAlbums = pickRandomAlbums($albumDirs, $docRoot, $albumRecommendCount);

// 相簿瀏覽連結格式，沿用站內既有慣例：photo.php?dir=./相對路徑/
function albumLink($relDir) {
    $encodedSegments = array_map('rawurlencode', explode('/', $relDir));
    return 'photo.php?dir=./' . implode('/', $encodedSegments) . '/';
}

// 相簿縮圖 <img src> 路徑（相對路徑直接輸出，讓瀏覽器自行處理 UTF-8 檔名）
function albumImgSrc($relImg) {
    $encodedSegments = array_map('rawurlencode', explode('/', $relImg));
    return implode('/', $encodedSegments);
}
?>
<!DOCTYPE html>
<!-- [SEO最佳化] lang="zh-TW" 告訴搜尋引擎這是一個繁體中文網站，有助於在地化搜尋排名 -->
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- ================= SEO 核心標籤設定 ================= -->
    <title>正妹不在家 | 台灣紀實攝影與20號倉庫歷史影像典藏入口</title>

    <meta name="description" content="「正妹不在家」攝影與數位典藏計畫入口網站。收錄台灣早期紀實攝影、台中火車站舊站與20號倉庫藝術村珍貴歷史照片。提供支援新舊設備的多種瀏覽模式，帶您重溫過往時光。">

    <meta name="keywords" content="正妹不在家, 紀實攝影, 台灣鐵路歷史照片, 台中火車站, 20號倉庫, 當代藝術, 數位典藏, 台中市老照片, 網路同學會, 帥哥照片, 運動攝影, 網路相簿, 部落格">

    <meta name="author" content="正妹不在家 Photography & Archive Project">

    <meta name="robots" content="index, follow">

    <link rel="canonical" href="https://ibm1943.synology.me/">

    <!-- ================= Open Graph (OG) 社群分享優化 ================= -->
    <meta property="og:type" content="website">
    <meta property="og:title" content="正妹不在家 | 台灣紀實攝影與20號倉庫歷史影像典藏">
    <meta property="og:description" content="收錄台灣早期紀實攝影、台中火車站舊站與20號倉庫藝術村珍貴歷史照片的數位典藏網站。">
    <meta property="og:url" content="https://ibm1943.synology.me/">

    <!-- ================= 結構化資料 (Schema.org) JSON-LD ================= -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebSite",
      "name": "正妹不在家",
      "alternateName": "正妹不在家 Photography & Archive Project",
      "url": "https://ibm1943.synology.me/",
      "description": "收錄台灣早期紀實攝影、台中火車站與20號倉庫珍貴歷史照片。",
      "publisher": {
        "@type": "Organization",
        "name": "正妹不在家"
      }
    }
    </script>

    <style>
        /* ================= 基本全域設定 (僅針對大螢幕 PC / Pad 呈現，未處理手機小螢幕版型) ================= */
        *, *::before, *::after {
            box-sizing: border-box;
        }

        :root {
            --bg-color: #121212;
            --text-color: #e0e0e0;
            --accent-color: #d4af37;
            --card-bg: #1e1e1e;
            --border-color: #333;
        }

        html, body {
            width: 100%;
            margin: 0;
            padding: 0;
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            font-family: 'Helvetica Neue', Arial, 'LiHei Pro', '微軟正黑體', sans-serif;
            text-align: center;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        img {
            max-width: 100%;
            height: auto;
            display: block;
        }

        /* ================= 背景裝飾 (SVG 意象) ================= */
        .bg-decorations {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            pointer-events: none;
            z-index: -1;
            opacity: 0.03;
        }

        /* ================= 排版與安全動畫 ================= */
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 40px 24px;
            width: 100%;
            max-width: 1180px;
            margin: 0 auto;
            animation: safeFadeIn 1.2s ease-out forwards;
        }

        @keyframes safeFadeIn {
            0% { opacity: 0; transform: translateY(15px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        header {
            width: 100%;
        }

        .site-title {
            font-size: 2.6rem;
            letter-spacing: 5px;
            margin-bottom: 5px;
            font-weight: 300;
        }
        .site-subtitle {
            font-size: 0.9rem;
            color: #888;
            letter-spacing: 2px;
            margin-bottom: 34px;
            text-transform: uppercase;
        }

        /* ================= 共用區塊卡片外框 (部落格 / 相簿 通用) ================= */
        .showcase-section {
            width: 100%;
            margin-bottom: 30px;
        }

        .showcase-block {
            background: rgba(30, 30, 30, 0.65);
            border: 1px solid #2e2e2e;
            border-radius: 12px;
            padding: 22px 20px;
            margin-bottom: 24px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.4);
            backdrop-filter: blur(5px);
            text-align: left;
            width: 100%;
        }

        .showcase-header {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-bottom: 16px;
            padding-bottom: 8px;
            border-bottom: 1px solid #333;
            flex-wrap: wrap;
            gap: 8px;
        }

        .showcase-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--accent-color);
            letter-spacing: 1px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin: 0;
        }

        .showcase-badge {
            font-size: 0.8rem;
            color: #888;
            letter-spacing: 0.5px;
        }

        /* 卡片橫向捲動軌道 (部落格文章使用) */
        .post-card-track {
            display: flex;
            gap: 14px;
            overflow-x: auto;
            overflow-y: hidden;
            padding-bottom: 10px;
            padding-top: 4px;
            width: 100%;
            scrollbar-width: thin;
            scrollbar-color: var(--accent-color) #222;
        }

        .post-card-track::-webkit-scrollbar { height: 6px; }
        .post-card-track::-webkit-scrollbar-track { background: #1a1a1a; border-radius: 3px; }
        .post-card-track::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }
        .post-card-track::-webkit-scrollbar-thumb:hover { background: var(--accent-color); }

        /* 相簿區改用網格排列，桌機/平板螢幕較寬，較適合一次呈現多欄 */
        .album-card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 16px;
            width: 100%;
        }

        /* 單一卡片 (部落格文章 / 相簿 通用樣式) */
        .post-card, .album-card {
            flex: 0 0 195px;
            width: 195px;
            background: #181818;
            border: 1px solid #333;
            border-radius: 8px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
            text-decoration: none;
            color: var(--text-color);
        }

        .album-card { width: 100%; }

        .post-card:hover, .album-card:hover {
            transform: translateY(-5px);
            border-color: var(--accent-color);
            box-shadow: 0 8px 20px rgba(212, 175, 55, 0.15);
        }

        .post-card-img-wrapper, .album-card-img-wrapper {
            position: relative;
            width: 100%;
            aspect-ratio: 16 / 9;
            background: #252525;
            overflow: hidden;
        }

        .post-card-img, .album-card-img {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            object-fit: cover;
            object-position: center;
            transition: transform 0.4s ease;
            filter: brightness(0.92);
            border: 0;
        }

        .post-card:hover .post-card-img,
        .album-card:hover .album-card-img {
            transform: scale(1.06);
            filter: brightness(1);
        }

        .post-card-views {
            position: absolute;
            bottom: 6px; right: 6px;
            background: rgba(0, 0, 0, 0.75);
            color: #f1f2f6;
            font-size: 11px;
            padding: 2px 6px;
            border-radius: 4px;
            backdrop-filter: blur(3px);
            border: 1px solid rgba(255,255,255,0.1);
            z-index: 2;
        }

        .post-card-rank {
            position: absolute;
            top: 6px; left: 6px;
            background: rgba(0, 0, 0, 0.75);
            color: var(--accent-color);
            font-weight: bold;
            font-size: 11px;
            padding: 2px 7px;
            border-radius: 4px;
            border: 1px solid var(--accent-color);
            z-index: 2;
        }

        .album-card-badge {
            position: absolute;
            top: 6px; left: 6px;
            background: rgba(0, 0, 0, 0.75);
            color: var(--accent-color);
            font-weight: bold;
            font-size: 11px;
            padding: 2px 7px;
            border-radius: 4px;
            border: 1px solid var(--accent-color);
            z-index: 2;
        }

        .post-card-content, .album-card-content {
            padding: 10px 12px;
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            justify-content: space-between;
        }

        .post-card-title {
            font-size: 13.5px;
            line-height: 1.4;
            margin: 0 0 8px 0;
            font-weight: 500;
            color: #efefef;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            height: 38px;
        }

        /* 相簿標題為「完整目錄路徑去掉 / 」，可能較長，
           採單行裁切＋刪節號，滑鼠移過去可看 title 屬性顯示完整名稱 */
        .album-card-title {
            font-size: 13.5px;
            line-height: 1.4;
            margin: 0 0 8px 0;
            font-weight: 500;
            color: #efefef;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            height: auto;
        }

        .post-card:hover .post-card-title,
        .album-card:hover .album-card-title {
            color: var(--accent-color);
        }

        .post-card-meta, .album-card-meta {
            font-size: 11px;
            color: #777;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .post-card-cat, .album-card-path {
            background: #252525;
            color: #aaa;
            padding: 2px 6px;
            border-radius: 3px;
            max-width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .showcase-empty {
            text-align: center;
            color: #777;
            padding: 20px 0;
            font-size: 14px;
        }

        /* ================= 下方導覽區 ================= */
        .nav-links {
            display: flex;
            justify-content: center;
            gap: 16px;
            flex-wrap: wrap;
            width: 100%;
            max-width: 1000px;
        }

        .icon-link {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 160px;
            padding: 18px 12px;
            background: var(--card-bg);
            border: 1px solid #333;
            border-radius: 8px;
            transition: all 0.3s ease;
        }

        .icon-link:hover {
            background: #2a2a2a;
            border-color: var(--accent-color);
            transform: translateY(-5px);
        }

        .icon-link svg {
            width: 44px;
            height: 44px;
            margin-bottom: 10px;
            stroke: #aaa;
            transition: stroke 0.3s ease;
        }

        .icon-link:hover svg {
            stroke: var(--accent-color);
        }

        .icon-link span {
            font-size: 0.9rem;
            letter-spacing: 1px;
            color: #ccc;
            line-height: 1.4;
        }

        .icon-link:hover span {
            color: #fff;
        }

        /* [SEO最佳化] 隱藏的 SEO 文本 */
        .visually-hidden {
            position: absolute;
            width: 1px; height: 1px;
            margin: -1px; padding: 0;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            border: 0;
        }

        /* ================= 古老瀏覽器相容模式 (IE 等不支援 Flexbox 者) ================= */
        .legacy-mode .container { display: block; padding-top: 30px; animation: none; opacity: 1; }
        .legacy-mode .nav-links { display: block; }
        .legacy-mode .icon-link {
            display: inline-block;
            margin: 6px;
            width: 45%;
            vertical-align: top;
        }
        .legacy-mode .post-card-track {
            display: block;
            overflow-x: auto;
            white-space: nowrap;
        }
        .legacy-mode .post-card {
            display: inline-block;
            margin: 6px;
            width: 200px;
            vertical-align: top;
            white-space: normal;
        }
        .legacy-mode .album-card-grid {
            display: block;
        }
        .legacy-mode .album-card {
            display: inline-block;
            margin: 6px;
            width: 220px;
            vertical-align: top;
        }
    </style>
</head>
<body>

    <!-- 膠卷裝飾背景 -->
    <div class="bg-decorations" aria-hidden="true">
        <svg style="position:absolute; top:10%; left:5%; width:200px; height:600px;" viewBox="0 0 100 300" fill="none" stroke="#fff" stroke-width="2">
            <rect x="20" y="0" width="60" height="300" fill="#000"/>
            <rect x="25" y="10" width="5" height="10" fill="#fff"/><rect x="25" y="30" width="5" height="10" fill="#fff"/>
            <rect x="25" y="50" width="5" height="10" fill="#fff"/><rect x="25" y="70" width="5" height="10" fill="#fff"/>
            <rect x="70" y="10" width="5" height="10" fill="#fff"/><rect x="70" y="30" width="5" height="10" fill="#fff"/>
            <rect x="70" y="50" width="5" height="10" fill="#fff"/><rect x="70" y="70" width="5" height="10" fill="#fff"/>
        </svg>
    </div>

    <div class="container" id="mainContainer">

        <header>
            <h1 class="site-title">正妹不在家</h1>
            <p class="site-subtitle">Photography & Archive Project</p>
            <h2 class="visually-hidden">台灣早期紀實攝影與台中20號倉庫歷史影像典藏</h2>
        </header>

        <!-- ================= 部落格焦點與熱門 ================= -->
        <main class="showcase-section">

            <!-- 第 1 區塊：關注文章 (最冷門 10 篇文章) -->
            <section class="showcase-block" aria-labelledby="focus-heading">
                <div class="showcase-header">
                    <h3 class="showcase-title" id="focus-heading">
                        <span>✨ 關注文章</span>
                        <span style="font-size:0.85rem; font-weight:normal; color:#aaa;">(潛力精選)</span>
                    </h3>
                    <span class="showcase-badge">每週精選推薦 ✦ 最值得探索的好文</span>
                </div>

                <?php if (empty($focusList)): ?>
                    <div class="showcase-empty">尚無文章數據</div>
                <?php else: ?>
                    <div class="post-card-track">
                        <?php foreach ($focusList as $idx => $p):
                            $postImg = !empty($p['thumb']) ? $p['thumb'] : $defaultThumb;
                            $postUrl = $blogBaseUrl . '?cat=' . urlencode($p['cat']) . '&post=' . urlencode($p['file']);
                        ?>
                            <a href="<?= htmlspecialchars($postUrl) ?>" class="post-card" title="<?= htmlspecialchars($p['title']) ?>">
                                <div class="post-card-img-wrapper">
                                    <img src="<?= htmlspecialchars($postImg) ?>" alt="<?= htmlspecialchars($p['title']) ?>" class="post-card-img" loading="lazy" onerror="this.src='<?= $defaultThumb ?>';">
                                    <span class="post-card-rank">#<?= $idx + 1 ?></span>
                                    <span class="post-card-views">👁️ <?= $p['views'] ?></span>
                                </div>
                                <div class="post-card-content">
                                    <h4 class="post-card-title"><?= htmlspecialchars($p['title']) ?></h4>
                                    <div class="post-card-meta">
                                        <span class="post-card-cat"><?= htmlspecialchars($p['cat']) ?></span>
                                        <span><?= htmlspecialchars($p['date'] ?? '') ?></span>
                                    </div>
                                </div>
                            </a>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>
            </section>

            <!-- 第 2 區塊：熱門文章 (點閱最高 10 篇文章) -->
            <section class="showcase-block" aria-labelledby="popular-heading">
                <div class="showcase-header">
                    <h3 class="showcase-title" id="popular-heading">
                        <span>🔥 熱門文章</span>
                        <span style="font-size:0.85rem; font-weight:normal; color:#aaa;">(人氣排行)</span>
                    </h3>
                    <span class="showcase-badge">每週統計 ✦ 全站點閱最高 Top 10</span>
                </div>

                <?php if (empty($popularList)): ?>
                    <div class="showcase-empty">尚無文章數據</div>
                <?php else: ?>
                    <div class="post-card-track">
                        <?php foreach ($popularList as $idx => $p):
                            $postImg = !empty($p['thumb']) ? $p['thumb'] : $defaultThumb;
                            $postUrl = $blogBaseUrl . '?cat=' . urlencode($p['cat']) . '&post=' . urlencode($p['file']);
                        ?>
                            <a href="<?= htmlspecialchars($postUrl) ?>" class="post-card" title="<?= htmlspecialchars($p['title']) ?>">
                                <div class="post-card-img-wrapper">
                                    <img src="<?= htmlspecialchars($postImg) ?>" alt="<?= htmlspecialchars($p['title']) ?>" class="post-card-img" loading="lazy" onerror="this.src='<?= $defaultThumb ?>';">
                                    <span class="post-card-rank" style="color:#ff6b6b; border-color:#ff6b6b;">#<?= $idx + 1 ?></span>
                                    <span class="post-card-views">🔥 <?= $p['views'] ?></span>
                                </div>
                                <div class="post-card-content">
                                    <h4 class="post-card-title"><?= htmlspecialchars($p['title']) ?></h4>
                                    <div class="post-card-meta">
                                        <span class="post-card-cat"><?= htmlspecialchars($p['cat']) ?></span>
                                        <span><?= htmlspecialchars($p['date'] ?? '') ?></span>
                                    </div>
                                </div>
                            </a>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>
            </section>

            <!-- 第 3 區塊：推薦相簿 (從 dirlist.txt 隨機挑選並附縮圖) -->
            <section class="showcase-block" aria-labelledby="album-heading">
                <div class="showcase-header">
                    <h3 class="showcase-title" id="album-heading">
                        <span>📷 推薦相簿</span>
                        <span style="font-size:0.85rem; font-weight:normal; color:#aaa;">(隨機精選)</span>
                    </h3>
                    <span class="showcase-badge">每次造訪隨機呈現 ✦ 珍藏影像目錄</span>
                </div>

                <?php if (empty($recommendAlbums)): ?>
                    <div class="showcase-empty">尚無可顯示的相簿（請確認 dirlist.txt 是否存在，或目錄中是否有 .jpg 圖片）</div>
                <?php else: ?>
                    <div class="album-card-grid">
                        <?php foreach ($recommendAlbums as $idx => $a): ?>
                            <a href="<?= htmlspecialchars(albumLink($a['dir'])) ?>" class="album-card" title="<?= htmlspecialchars($a['title']) ?>">
                                <div class="album-card-img-wrapper">
                                    <img src="<?= htmlspecialchars(albumImgSrc($a['img'])) ?>" alt="<?= htmlspecialchars($a['title']) ?>" class="album-card-img" loading="lazy" onerror="this.src='<?= $defaultThumb ?>';">
                                    <span class="album-card-badge">#<?= $idx + 1 ?></span>
                                </div>
                                <div class="album-card-content">
                                    <h4 class="album-card-title"><?= htmlspecialchars($a['title']) ?></h4>
                                    <div class="album-card-meta">
                                        <span class="album-card-path"><?= htmlspecialchars($a['dir']) ?></span>
                                    </div>
                                </div>
                            </a>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>
            </section>

        </main>

        <!-- ================= 下方主要功能導覽 ================= -->
        <nav class="nav-links" aria-label="網站主要導覽">

            <a href="https://ibm1943.synology.me/photo.php?dir=./taiwan/%E5%8F%B0%E4%B8%AD20%E8%99%9F%E5%80%89%E5%BA%AB%E8%97%9D%E8%A1%93%E6%9D%91/" class="icon-link" title="瀏覽台中20號倉庫藝術村歷史照片">
                <svg aria-hidden="true" viewBox="0 0 100 100" fill="none" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M40 20 C35 12 45 8 40 0 M60 20 C55 12 65 8 60 0" />
                    <path d="M25 30 L25 65 Q25 80 45 80 L55 80 Q75 80 75 65 L75 30 Z" />
                    <path d="M75 40 L85 40 Q90 40 90 50 Q90 60 85 60 L75 60" />
                    <path d="M15 88 Q50 95 85 88" />
                </svg>
                <span>20號倉庫照片輯</span>
            </a>

            <a href="https://ibm1943.synology.me/photo.php?dir=./taiwan/" class="icon-link" title="傳統相簿瀏覽模式 (適合舊設備/手機平板)">
                <svg aria-hidden="true" viewBox="0 0 100 100" fill="none" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
                    <rect x="15" y="15" width="70" height="55" rx="5" />
                    <rect x="22" y="22" width="56" height="40" rx="2" />
                    <path d="M40 70 L35 85 L65 85 L60 70 Z" />
                    <line x1="70" y1="75" x2="80" y2="75" stroke-width="2" />
                </svg>
                <span>相簿輯<br>(舊設備適用)</span>
            </a>

            <a href="https://ibm1943.synology.me/ppp1.php" class="icon-link" title="現代化相簿瀏覽模式 (適合新設備)">
                <svg aria-hidden="true" viewBox="0 0 100 100" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                    <rect x="5" y="25" width="90" height="45" rx="3" />
                    <line x1="10" y1="65" x2="90" y2="65" />
                    <path d="M45 70 L45 85 M55 70 L55 85" stroke-width="4"/>
                    <line x1="30" y1="85" x2="70" y2="85" stroke-width="5" />
                    <circle cx="50" cy="45" r="10" stroke-dasharray="2 4" />
                    <circle cx="50" cy="45" r="4" fill="currentColor" />
                </svg>
                <span>相簿輯<br>(新電腦適用)</span>
            </a>

            <a href="https://ibm1943.synology.me/play" class="icon-link" title="進入實驗功能遊樂場區">
                <svg aria-hidden="true" viewBox="0 0 100 100" fill="none" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
                    <rect x="10" y="30" width="80" height="40" rx="20" />
                    <line x1="28" y1="42" x2="28" y2="58" />
                    <line x1="20" y1="50" x2="36" y2="50" />
                    <circle cx="65" cy="55" r="3" />
                    <circle cx="78" cy="45" r="3" />
                    <line x1="42" y1="55" x2="48" y2="52" />
                    <line x1="52" y1="55" x2="58" y2="52" />
                </svg>
                <span>實驗功能遊樂場</span>
            </a>

            <a href="https://ibm1943.synology.me/play/blog" class="icon-link" title="進入正妹不在家blog">
                <svg aria-hidden="true" viewBox="0 0 100 100" fill="none" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M25 15 h35 l20 20 v45 a5 5 0 0 1 -5 5 h-50 a5 5 0 0 1 -5 -5 v-60 a5 5 0 0 1 5 -5 z" />
                    <path d="M60 15 v15 a5 5 0 0 0 5 5 h15" />
                    <line x1="35" y1="50" x2="65" y2="50" />
                    <line x1="35" y1="62" x2="65" y2="62" />
                    <line x1="35" y1="74" x2="50" y2="74" />
                </svg>
                <span>正妹不在家<br>blog</span>
            </a>

        </nav>
    </div>

    <!-- JavaScript 瀏覽器能力偵測 (僅針對不支援現代 Flexbox 的極舊瀏覽器啟用相容模式) -->
    <script>
        var isModern = true;
        try {
            if (typeof CSS === 'undefined' || !CSS.supports || !CSS.supports('display', 'flex')) {
                isModern = false;
            }
        } catch (e) {
            isModern = false;
        }

        if (!isModern) {
            document.body.className += ' legacy-mode';
        }
    </script>
</body>
</html>