finbertmds.github.io/index.html at master · finbertmds/finbertmds.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>My App Collection</title>
  <script src="https://cdn.jsdelivr.net/npm/markdown@0.5.0/lib/markdown.min.js"></script>
  <style>
    body {
      font-family: sans-serif;
      margin: 0;
      padding: 0;
      background: #f9f9f9;
    }
    header {
      background: #333;
      color: white;
      padding: 1rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    select {
      font-size: 1rem;
      padding: 0.4rem;
    }
    main {
      padding: 1rem;
      max-width: 1000px;
      margin: auto;
    }
    #content h1, #content h2 {
      margin-top: 1.5em;
    }
    a {
      color: #0366d6;
    }
  </style>
</head>
<body>
  <header>
    <h1>Finbert Ngo</h1>
    <select id="lang-select">
      <option value="/vi/README.md">Tiếng Việt</option>
      <option value="/en/README.md">English</option>
      <option value="/ja/README.md">日本語</option>
    </select>
  </header>

  <main>
    <div id="content">Loading...</div>
  </main>

  <script>
    const select = document.getElementById('lang-select');
    const contentDiv = document.getElementById('content');

    function getDefaultLang() {
      const lang = navigator.language || navigator.userLanguage;
      if (lang.startsWith('ja')) return '/ja/README.md';
      if (lang.startsWith('en')) return '/en/README.md';
      return '/vi/README.md';
    }

    function loadMarkdown(path) {
      fetch(path)
        .then(res => {
          if (!res.ok) throw new Error('Markdown not found');
          return res.text();
        })
        .then(md => {
          const html = markdown.toHTML(md);
          contentDiv.innerHTML = html;
        })
        .catch(err => {
          contentDiv.innerHTML = `<p style="color:red;">Error loading content: ${err.message}</p>`;
        });
    }

    // Initial load
    const saved = localStorage.getItem('preferred-lang') || getDefaultLang();
    select.value = saved;
    loadMarkdown(saved);

    // Change language
    select.addEventListener('change', (e) => {
      const path = e.target.value;
      localStorage.setItem('preferred-lang', path);
      loadMarkdown(path);
    });
  </script>
</body>
</html>