NebulaeWebsite hội nghị

Mở index.html bằng trình soạn thảo: mọi chữ trên trang đều viết ngay trong đó, nên công cụ tìm kiếm đọc được. Nó liên kết hai file nằm cạnh:

<link rel="stylesheet" href="nebula-conf.css" />
<script src="nebula-conf.js" defer></script>

• Phiên: sao chép một <li class="nc-session" data-session …> cho mỗi phiên. Script đọc id, data-track (main, signal, orbit, lab, hoặc all cho giờ nghỉ và sự kiện chung), data-kind (keynote, talk, workshop, break, social), data-title, data-time (chữ mà dải thông báo nói), và data-start / data-end là thời điểm ISO kèm độ lệch múi giờ, ví dụ 2026-11-12T09:30:00+00:00. Đặt phiên vào khung (data-slot) của giờ bắt đầu và panel (data-day-panel) của ngày đó.
• Diễn giả: mỗi thẻ là một nút có data-speaker-open="id" và một khối ẩn data-speaker-detail="id" để hộp thoại sao chép. Tên ở bất kỳ đâu trên trang sẽ mở cùng hộp thoại nếu nút của nó có cùng data-speaker-open.
• Bài nói trong hộp thoại liên kết tới lịch bằng data-session-link="session-id".
• Vé: một hạng vé là <li data-tier="id" data-price="22900" data-early-price="14900" data-early-until="2026-10-31T23:59:00+00:00" data-max="10">. Giá tính bằng cent; đơn vị tiền là data-currency trên data-tickets. Thêm data-sold-out để khoá một hạng. Nút thanh toán là liên kết thường; đơn hàng được thêm vào dạng ?tickets=stargazer:2,navigator:1.
• Chữ do script viết ra (dải thông báo, thông báo trạng thái, nhãn) là mẫu nằm trong các thuộc tính data-text-*, ví dụ data-text-live="Live now: {titles}.". Đổi chúng ngay trong HTML; script chỉ điền {count}, {titles}, {time}, {when}, {shown} và {total}.

Script nối mọi thứ theo thuộc tính data khi trang đã tải xong. Với markup bạn thêm sau, gọi NebulaConf.init(container); hàm trả về một hàm để hoàn tác. Mã nguồn dễ đọc nằm trong src/ (src/core/ có một module nhỏ cho mỗi hành vi) nếu bạn muốn build lại.

Mọi thứ phụ thuộc vào thời gian — đang diễn ra và sắp tới, dải thông báo, đếm ngược, giá early bird — đều hỏi một đồng hồ, không bao giờ gọi Date.now() trực tiếp. Trong bản demo, <main data-clock-start="2026-10-24T09:00:00+00:00"> cho trang chạy từ một thời điểm trong tháng Mười, và khối Demo clock trong lịch nhảy quanh thời điểm đó.

Trước khi ra mắt, hãy xoá cả hai: bỏ data-clock-start khỏi <main> và khối <div data-clock-controls>. Khi đó trang chạy theo giờ của từng người xem. Với React, đặt DEMO_CLOCK thành null trong content.ts là cả hai cùng biến mất. Muốn chạy theo đồng hồ riêng trong code, truyền một đồng hồ vào hành vi: createSchedule(element, { clock }) với clock từ createClock({ start, speed }).

Giờ của phiên là giờ treo tường tại địa điểm cộng một độ lệch (EVENT.utcOffset trong React; độ lệch trong mỗi data-start ở HTML), nên "đang diễn ra" luôn đúng dù người xem ở đâu.

Bản tải về là một dự án Vite + React 19 + TypeScript hoàn chỉnh:

npm install
npm run dev      # http://localhost:5173
npm run build    # file tĩnh trong dist/

• src/app/content.ts — mọi chữ, phiên, diễn giả, hạng vé, nhà tài trợ và câu hỏi. Sửa ở đây là trang theo ngay. Giờ của phiên viết theo giờ địa điểm ("09:30").
• src/app/sections/ — mỗi section một component; src/app/ui/ — các mảnh nhỏ hơn chúng dùng chung; src/app/lib/ — những gì suy ra từ nội dung (khung giờ, thời điểm chính xác, các con số ở hero).
• src/core/ — hành vi (theme, menu, tabs, lịch, agenda, vé, modal, bầu trời, thẻ tên, đếm ngược, đồng hồ…), chính là mã mà bản HTML chạy, gắn vào bằng hook useBehaviour.
• src/nebula-conf.css — một stylesheet chung cho cả hai bản.

Các phiên đã gắn sao được lưu trong localStorage dưới khoá nebula-conf-agenda dạng danh sách id phiên; id nào trang không còn thì bị bỏ. Khi trình duyệt từ chối lưu trữ (cửa sổ riêng tư, iframe sandbox), lịch vẫn dùng được cho đến khi đóng trang. Thay đổi ở một tab sẽ hiện sang các tab khác.

Mọi thứ là custom property trên :root, ở đầu nebula-conf.css. Màu viết dạng light-dark(sáng, tối), nên một dòng lo cả hai giao diện.

Property	Thay đổi gì
--nc-bg, --nc-bg-raised, --nc-text, --nc-muted, --nc-line	Màu trang, thẻ và chữ, đường kẻ mảnh
--nc-violet, --nc-magenta, --nc-cyan, --nc-mint, --nc-amber	Năm ánh sáng cực quang: điểm nhấn, trạng thái, track
--nc-track-main, --nc-track-signal, --nc-track-orbit, --nc-track-lab	Mỗi track một màu; thêm track bằng [data-track="…"] { --track: … }
--nc-star, --nc-link, --nc-glow	Thứ canvas hero vẽ: sao, đường nối, quầng sáng chòm sao
--nc-cta-a, --nc-cta-b, --nc-on-cta, --nc-focus, --nc-live	Gradient và chữ của nút chính, viền focus, trạng thái đang diễn ra
--nc-glow-strength	Độ mạnh của quầng sáng nền (đặt theo từng giao diện)
--nc-font-display, --nc-font-body, --nc-font-mono, --nc-display-weight	Các vai trò chữ
--nc-radius-lg, --nc-radius, --nc-radius-sm, --nc-max, --nc-gutter	Hình dạng và bố cục
--nc-ease, --nc-reveal-duration	Chuyển động

Font: trang chỉ dùng font hệ thống nên không tải gì. Muốn dùng font riêng, thêm @font-face (hoặc stylesheet của dịch vụ font) rồi đặt, ví dụ, --nc-font-display: "Your Display", sans-serif;.

Giao diện: data-theme="light" hoặc "dark" trên <html> cố định giao diện ban đầu; không có thì theo hệ thống của người xem. Nút chuyển nhớ lựa chọn trong localStorage (nebula-conf-theme).

Cả hai bản đều là file tĩnh: đưa thư mục HTML, hoặc dist/ của dự án React sau npm run build, lên Netlify, Vercel, Cloudflare Pages, GitHub Pages hay hosting bất kỳ. Trỏ nút thanh toán tới dịch vụ bán vé của bạn; bản thân website không bán gì.