ClaudeCode101/lang.js at main · M1zz/ClaudeCode101 · 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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
/**
 * Claude Code 101 — Language Toggle (ko / en)  [Root version for index.html]
 */

(function () {
  const KEY = 'cc101-lang';

  function getLang() {
    return localStorage.getItem(KEY) || 'ko';
  }

  function setLang(lang) {
    localStorage.setItem(KEY, lang);
    document.documentElement.setAttribute('lang', lang);
    const btn = document.getElementById('langToggle');
    if (btn) updateBtnText(btn, lang);
    updatePageTitle(lang);
    updateTitleAttrs(lang);
  }

  function updatePageTitle(lang) {
    const html = document.documentElement;
    const titleKo = html.getAttribute('data-title-ko');
    const titleEn = html.getAttribute('data-title-en');
    if (lang === 'en' && titleEn) document.title = titleEn;
    else if (lang === 'ko' && titleKo) document.title = titleKo;
  }

  function updateTitleAttrs(lang) {
    document.querySelectorAll('[data-title-ko],[data-title-en]').forEach(function(el) {
      if (el === document.documentElement) return;
      var t = lang === 'en' ? el.getAttribute('data-title-en') : el.getAttribute('data-title-ko');
      if (t) el.setAttribute('title', t);
    });
    document.querySelectorAll('[data-aria-ko],[data-aria-en]').forEach(function(el) {
      var a = lang === 'en' ? el.getAttribute('data-aria-en') : el.getAttribute('data-aria-ko');
      if (a) el.setAttribute('aria-label', a);
    });
  }

  function updateBtnText(btn, lang) {
    btn.textContent = lang === 'ko' ? 'EN' : '한';
    btn.title = lang === 'ko' ? 'Switch to English' : '한국어로 변경';
  }

  function injectStyles() {
    if (document.getElementById('lang-styles')) return;
    const s = document.createElement('style');
    s.id = 'lang-styles';
    s.textContent = `
html[lang="ko"] .lang-en { display: none !important; }
html[lang="en"] .lang-ko { display: none !important; }

#langToggle {
  position: fixed;
  bottom: 9.5rem;
  right: 1.8rem;
  z-index: 1000;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-card, #ffffff);
  border: 1.5px solid var(--border, #e2e8f0);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  color: var(--text, #0f172a);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
  box-shadow: var(--shadow-card, 0 2px 8px rgba(0,0,0,.1));
  line-height: 1;
  padding: 0;
}
#langToggle:hover {
  border-color: var(--accent, #ea6c0a);
  transform: scale(1.1);
}
`;
    document.head.appendChild(s);
  }

  function injectButton() {
    if (document.getElementById('langToggle')) return;
    const btn = document.createElement('button');
    btn.id = 'langToggle';
    btn.setAttribute('aria-label', 'Toggle language / 언어 전환');
    updateBtnText(btn, getLang());
    btn.onclick = function () {
      setLang(getLang() === 'ko' ? 'en' : 'ko');
    };
    document.body.appendChild(btn);
  }

  // Apply immediately
  document.documentElement.setAttribute('lang', getLang());
  injectStyles();

  function onReady() {
    injectButton();
    const lang = getLang();
    updatePageTitle(lang);
    updateTitleAttrs(lang);
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', onReady);
  } else {
    onReady();
  }
})();