mirror of
https://github.com/tiennm99/programming-fengshui.git
synced 2026-08-31 08:28:05 +00:00
tiennm99
5efccffede
Classic mode reproduces the 2018 toidicodedao image and its 5 hardcoded element cards verbatim. Modern mode renders a data-driven grid built from GitHub Linguist colors classified into Ngũ Hành elements via a deterministic HSL rule set. Toggle persists via URL hash; both panels coexist in DOM with a CSS opacity fade. Includes a collapsed debug panel listing skipped (no color) and borderline (near hue boundary) entries. - data/github-colors.json: vendored from ozh/github-colors (722 entries) - js/classify-element.js: pure HSL classifier (664 lang sample, 22/22 fixtures pass) - js/mode-toggle.js: tablist with hash persistence + arrow-key nav - js/render-elements.js: chip rendering with YIQ contrast + debug panel - js/main.js: fetch + classify + render entry point - style.css: segmented toggle, panel fade, chip pill, debug-panel, mobile
113 lines
4.4 KiB
HTML
113 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Lựa chọn ngôn ngữ lập trình theo phong thuỷ</title>
|
|
<meta name="description" content="Chọn ngôn ngữ lập trình theo Ngũ Hành: Kim, Mộc, Thuỷ, Hoả, Thổ — vui là chính." />
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<main class="page">
|
|
<header class="hero">
|
|
<h1>Lựa chọn ngôn ngữ lập trình theo phong thuỷ</h1>
|
|
<p class="subtitle">Ngũ Hành tương sinh — code cho hợp tuổi, hợp mệnh.</p>
|
|
</header>
|
|
|
|
<div class="mode-toggle" role="tablist" aria-label="Chế độ hiển thị">
|
|
<button type="button" role="tab" id="tab-classic" data-mode="classic"
|
|
aria-controls="panel-classic" aria-selected="true" tabindex="0">
|
|
Cổ điển (bài gốc)
|
|
</button>
|
|
<button type="button" role="tab" id="tab-modern" data-mode="modern"
|
|
aria-controls="panel-modern" aria-selected="false" tabindex="-1">
|
|
Hiện đại (tự phân loại)
|
|
</button>
|
|
</div>
|
|
|
|
<section id="panel-classic" role="tabpanel" aria-labelledby="tab-classic">
|
|
<section class="figure">
|
|
<figure>
|
|
<img
|
|
src="assets/ngon-ngu-lap-trinh-phong-thuy.png"
|
|
alt="Sơ đồ phong thuỷ ngôn ngữ lập trình theo Ngũ Hành"
|
|
/>
|
|
<figcaption>Sơ đồ ngôn ngữ lập trình xếp theo Ngũ Hành.</figcaption>
|
|
</figure>
|
|
</section>
|
|
|
|
<section class="elements">
|
|
<h2>Ngũ Hành & ngôn ngữ <small class="mode-tag">(theo bài gốc, 2018)</small></h2>
|
|
<div class="grid">
|
|
<article class="card kim">
|
|
<h3>KIM</h3>
|
|
<p>JavaScript, Objective-C, Python</p>
|
|
</article>
|
|
<article class="card thuy">
|
|
<h3>THUỶ</h3>
|
|
<p>C#, PHP</p>
|
|
</article>
|
|
<article class="card moc">
|
|
<h3>MỘC</h3>
|
|
<p>Android, C#</p>
|
|
</article>
|
|
<article class="card hoa">
|
|
<h3>HOẢ</h3>
|
|
<p>Scala, HTML5, Java, Node.js</p>
|
|
</article>
|
|
<article class="card tho">
|
|
<h3>THỔ</h3>
|
|
<p>JavaScript, Go, Ruby</p>
|
|
</article>
|
|
</div>
|
|
<p class="disclaimer">* Bảng phân loại mang tính giải trí, lấy từ ảnh gốc.</p>
|
|
</section>
|
|
</section>
|
|
|
|
<section id="panel-modern" role="tabpanel" aria-labelledby="tab-modern" hidden>
|
|
<section class="elements">
|
|
<h2>Ngũ Hành & ngôn ngữ <small class="mode-tag">(tự phân loại theo màu GitHub)</small></h2>
|
|
<div class="grid" id="element-grid"></div>
|
|
<p class="legend"></p>
|
|
<details id="debug-panel" hidden></details>
|
|
<p class="disclaimer">* Phân loại tự động theo màu chính thức GitHub Linguist + quy tắc HSL.</p>
|
|
</section>
|
|
<details class="original-image">
|
|
<summary>Ảnh gốc</summary>
|
|
<figure>
|
|
<img
|
|
src="assets/ngon-ngu-lap-trinh-phong-thuy.png"
|
|
alt="Sơ đồ phong thuỷ ngôn ngữ lập trình theo Ngũ Hành"
|
|
/>
|
|
<figcaption>Sơ đồ ngôn ngữ lập trình xếp theo Ngũ Hành.</figcaption>
|
|
</figure>
|
|
</details>
|
|
</section>
|
|
|
|
<footer class="credit">
|
|
<h2>Credit</h2>
|
|
<p>
|
|
Hình ảnh và nội dung gốc thuộc về tác giả Phạm Huy Hoàng (Tôi đi code dạo).
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
Bài viết:
|
|
<a href="https://toidicodedao.com/2018/01/02/top-5-ngon-ngu-lap-trinh-dang-hoc-cho-nam-2018/" target="_blank" rel="noopener noreferrer">
|
|
Top 5 ngôn ngữ lập trình đáng học cho năm 2018
|
|
</a>
|
|
</li>
|
|
<li>
|
|
Ảnh:
|
|
<a href="https://toidicodedao.com/wp-content/uploads/2017/12/ngon-ngu-lap-trinh-phong-thuy.png" target="_blank" rel="noopener noreferrer">
|
|
ngon-ngu-lap-trinh-phong-thuy.png
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<p class="note">Trang này chỉ dùng cho mục đích trình bày lại nội dung, mọi quyền thuộc về tác giả gốc.</p>
|
|
</footer>
|
|
</main>
|
|
<script type="module" src="./js/mode-toggle.js"></script>
|
|
<script type="module" src="./js/main.js"></script>
|
|
</body>
|
|
</html>
|