Frontend style - #7
Merged
Merged
Conversation
- Create index.html for the NTNU Visual Toolbox, featuring a tool registration system. - Implement ntnu-theme.css for shared styling across the application. - Introduce ntnu-ui.js for UI helpers including toast notifications, modals, and drag-and-drop functionality. - Add various visual identity assets for the toolbox. - Document project status and future tasks in todo.md.
… field validation
…ection padding for improved layout
…l and user experience
- _middleware.js:子網域目錄式 URL(如 /deskcard)以結尾斜線導向其 index; bucket 子目錄靜態檔(如 /deskcard/app.js)導入 _sites/<bucket>/, 根目錄圖檔與 /assets/* 維持共用 apex - [id].js:對已被改寫為 /_sites/ 的請求放行,避免子網域單段路徑 被短碼處理器當成短碼而 404 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- 導入精確品牌色票:maroon #93272c、ink #2d2926、cool-gray 系列、navy #003865 - maroon→bright-red 漸層取代舊粉紅;maroon masthead 導覽列;ink footer - 新增招牌「像素馬賽克帶」motif(hero 接縫與 footer 上緣) - 按鈕/輸入框 4px 圓角、卡片 8–12px、soft-lift 陰影 - 字體改 Helvetica Neue/Arial + 系統黑體;移除 hero 加號紋路 - 評分星/QR 改品牌 maroon、計數脈衝去金色;既有 GSAP 動畫完整保留 - 新增 ntnu.style 品牌設計參考文件 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
This PR introduces a front-end “style system” + host-based routing to support a new tools.ntnu.cc toolbox (static Pages site) alongside the existing ntnu.cc shortener, and adds the first tool (deskcard generator) plus supporting shared assets and documentation/spec.
Changes:
- Add
tools.ntnu.cchub + A4 deskcard generator (pure front-end import + PDF export) underpublic/_sites/tools/*. - Introduce shared front-end assets (
ntnu-theme.css,ntnu-ui.js,colors.json) and an unofficial brand reference (ntnu.style). - Update Pages middleware/routing to rewrite subdomain requests into
/_sites/<bucket>/...while keeping the shortener behavior intact.
Reviewed changes
Copilot reviewed 13 out of 47 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| todo.md | Implementation notes/checklist for SPEC2 + known risks to validate. |
| SPEC2.md | New v2 system specification describing tools subdomain + architecture. |
| public/index.html | Homepage restyle + GSAP reveal animations + toolbox nav link. |
| public/assets/ntnu-vi/colors.json | Adds fetchable VI color palette JSON for tool sub-sites. |
| public/assets/ntnu-vi/B109.png | Adds VI image asset. |
| public/assets/ntnu-vi/A707_modified.png | Adds VI image asset variant. |
| public/assets/ntnu-ui.js | Adds shared UI helper (toast/modal/dropzone/copyText). |
| public/assets/ntnu-theme.css | Adds shared theme CSS used by tools pages. |
| public/_sites/tools/index.html | Adds tools hub page + in-page tool registry. |
| public/_sites/tools/deskcard/sample.csv | Adds sample CSV for import format. |
| public/_sites/tools/deskcard/index.html | Adds deskcard tool UI (import/edit/preview/export). |
| public/_sites/tools/deskcard/app.js | Adds deskcard logic (records, import, localStorage, html2canvas+jsPDF export). |
| ntnu.style | Adds unofficial brand reference document for palette/typography/components. |
| functions/[id].js | Avoids treating /_sites/* paths as shortcodes by passing through. |
| functions/_middleware.js | Adds host-based rewrite (subdomain → /_sites/<bucket>/...) and static-file handling. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const pathname = url.pathname; | ||
|
|
||
| // 跳過靜態檔案，讓 Cloudflare Pages 直接處理 | ||
| const host = (request.headers.get('host') || url.host || '').toLowerCase(); |
Comment on lines
+28
to
+30
| // 靜態檔案：原則上交給 Cloudflare Pages 直接處理（子網域共用 apex 的 /assets/* 與根目錄圖檔）。 | ||
| // 但 bucket 子目錄內的靜態檔（例如 tools.ntnu.cc/deskcard/app.js）必須先導入 _sites/<bucket>/， | ||
| // 否則會被當成 apex 路徑而 404。策略：子網域先試 bucket 內同路徑，找不到再退回共用 apex。 |
Comment on lines
+41
to
+43
| const body = overlay.querySelector('.ntnu-modal-body'); | ||
| if (typeof opts.content === 'string') body.innerHTML = opts.content; | ||
| else if (opts.content instanceof Node) body.appendChild(opts.content); |
Comment on lines
+5
to
+9
| :root { | ||
| --primary: #9B2335; | ||
| --primary-dark: #7A1C2A; | ||
| --primary-light: #C94C5C; | ||
| --bg-gradient: linear-gradient(135deg, #9B2335 0%, #B83A4B 50%, #C94C5C 100%); |
| { | ||
| "_meta": { | ||
| "name": "NTNU 視覺識別色票", | ||
| "source": "依師大紅 #9B2335 為主軸延伸,搭配既有 ntnu.cc 設計系統使用", |
Comment on lines
+7
to
+10
| "primary": { | ||
| "ntnuRed": { "hex": "#9B2335", "name": "師大紅", "usage": "主色、強調、CTA" }, | ||
| "ntnuRedDark": { "hex": "#7A1C2A", "name": "師大深紅", "usage": "hover / 重點文字" }, | ||
| "ntnuRedLight": { "hex": "#C94C5C", "name": "師大粉紅", "usage": "漸層、次要強調" } |
| }, | ||
| "gradients": { | ||
| "primary": { | ||
| "css": "linear-gradient(135deg, #9B2335 0%, #B83A4B 50%, #C94C5C 100%)", |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.