Scholar Coach

專案概述

Scholar Coach 是一個以現有論文為基礎，協助使用者產生後續研究提案的靜態前端模板。主要開發檔案位於 WebTemplate.1.0.0.0/src。

目前專案以 HTML、SCSS 與原生 JavaScript 組成，尚未配置 npm 專案或建置工具。

快速開始

步驟	操作
1	在 VS Code 開啟專案根目錄。
2	使用 Live Server 或其他本機 HTTP 伺服器，將 `WebTemplate.1.0.0.0/src/` 設為網站根目錄。
3	開啟 index.html 開始預覽。

不建議直接以 file:// 開啟頁面，因為頁面會透過 fetch() 載入 layout/base/ 下的共用 HTML partial；直接開啟檔案時可能受到瀏覽器跨來源限制。

技術棧

技術	說明
HTML5	頁面結構標記
SCSS	Sass 原始碼，需自行編譯為 CSS
CSS	頁面實際載入的編譯輸出
原生 JavaScript / ES Modules	前端互動邏輯，未使用框架
Uppy	檔案上傳介面，位於 `script/vendor/uppy.min.js`

專案結構

Scholar Coach/
├─ README.md
├─ PROJECT_FILE_TRACKING_ASSETS.md       # 靜態資產追蹤文件
├─ PROJECT_FILE_TRACKING_INDEX.md        # 專案檔案索引
├─ PROJECT_FILE_TRACKING_SOURCE.md       # 開發檔案追蹤清單
├─ WebTemplate.1.0.0.0/
│  └─ src/
│     ├─ index.html                  # 首頁
│     ├─ main_upload.html            # 步驟 1：上傳論文
│     ├─ main_setting.html           # 步驟 2：設定條件
│     ├─ main_generating.html        # 步驟 3：生成提案
│     ├─ main_result.html            # 步驟 4：查看研究提案
│     ├─ assets/                     # 圖片、icon 與字型
│     │  ├─ fonts/
│     │  ├─ icon/
│     │  └─ images/
│     ├─ css/                        # 頁面實際載入的 CSS 與 source map
│     ├─ layout/                     # 共用 HTML partial
│     │  └─ base/                    # header、footer、aside、彈窗（登入、Cookie、付款、會員帳戶中心）
│     ├─ script/                     # 前端互動腳本
│     │  ├─ main.js                  # 共用 partial 載入
│     │  ├─ app.js                   # 進站初始化
│     │  ├─ pages/                   # 各步驟頁面專屬邏輯
│     │  ├─ ui/                      # 共用互動元件（彈窗等）
│     │  └─ vendor/                  # 第三方套件（Uppy）
│     ├─ scss/                       # SCSS 原始碼
│     └─ ...

主要目錄說明

路徑	用途
`src/*.html`	頁面模板與研究提案流程頁面
`src/layout/base/`	共用 `header.html`、`footer.html`、`aside.html` 與彈窗 partial（登入 `_view_login.html`、Cookie `_view_cookie.html`、付款 `_view_payment.html`、會員帳戶中心 `_view_member.html`）
`src/script/pages/`	各流程頁（上傳、設定、生成、結果）的專屬互動腳本
`src/script/ui/`	跨頁面共用互動元件，例如付款彈窗 `payment.js`
`src/script/vendor/`	第三方套件，例如檔案上傳用的 Uppy
`src/scss/`	SCSS 原始碼，依 base、layout、page、panel、state 分層
`src/css/`	瀏覽器實際載入的編譯後 CSS
`src/assets/`	字型、圖示與圖片等靜態資源

共用版型載入

頁面中的 #header、#footer、aside[data-partial-slot="aside-view"] 與各彈窗容器（div[data-partial-slot="popup-login"]、popup-cookie、popup-payment、view-member）由 main.js 透過 fetch() 載入對應 partial。

aside.html 同時包含登入與未登入兩種版面，透過 <body> 的 login 或 unlogin class，以及 aside 的 data-login-state 控制顯示狀態。

付款彈窗（_view_payment.html）由 payment.js 控制開關與付款方式選取；目前僅為靜態互動流程，尚未串接實際金流。

會員帳戶中心彈窗（_view_member.html）由 _common.js 控制開關：登入後點擊 aside 使用者資料的頭像或「查看帳戶與使用紀錄」按鈕即可開啟，點擊遮罩或視窗右上角關閉鈕可關閉。登入、付款與會員帳戶中心三個彈窗開啟時都會為 <body> 加上 no-scroll class 鎖定背景捲動，關閉時移除。

維護建議

項目	建議內容
命名與路徑	優先沿用既有檔名與資料夾慣例，避免破壞現有引用路徑。
修改 HTML	確認圖片、CSS、JavaScript 與共用 partial 的相對路徑正確。
修改共用版型	修改 `layout/base/` 或 `script/main.js` 時，使用 HTTP 伺服器檢查所有流程頁的共用區塊是否正常載入。
修改 SCSS	需同步產生或更新 `src/css/` 的編譯輸出；目前專案未配置自動化建置流程。
新增頁面／資產	同步更新 PROJECT_FILE_TRACKING_INDEX.md、PROJECT_FILE_TRACKING_SOURCE.md 或 PROJECT_FILE_TRACKING_ASSETS.md。