Hugging Face's logo

Spaces:
OpenLab-NLP
/
aaa
Running

App Files Community
OpenLab-NLP commited on
Commit
2a3986a
ยท
verified ยท
1 Parent(s): b40ee7e

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +69 -74
index.html CHANGED
@@ -21,26 +21,21 @@
21
 
22
  .container { max-width: 1000px; margin: 0 auto; padding: 0 20px 100px; }
23
  section { display: none; }
24
- section.active { display: block; animation: fadeIn 0.5s; }
25
 
26
- @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
27
-
28
- /* ํ•„ํ„ฐ ๋ฒ„ํŠผ ์Šคํƒ€์ผ */
29
  .filter-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 25px; }
30
- .filter-btn { background: var(--card-bg); border: 1px solid var(--border-color); padding: 8px 16px; cursor: pointer; border-radius: 20px; font-size: 0.85rem; transition: 0.2s; }
31
  .filter-btn.active { background: var(--accent-color); color: white; border-color: var(--accent-color); }
32
 
33
- /* ๊ฒ€์ƒ‰ ๋ฐ ํ…Œ์ด๋ธ” ์Šคํƒ€์ผ */
34
  .search-box { width: 100%; padding: 15px 25px; border: 1px solid var(--border-color); border-radius: 30px; font-size: 1rem; margin-bottom: 20px; box-sizing: border-box; outline: none; }
35
  .table-wrapper { background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
36
  table { width: 100%; border-collapse: collapse; }
37
  th, td { padding: 15px 20px; text-align: left; border-bottom: 1px solid #eee; }
38
- th { background: #f1eee6; color: #777; font-size: 0.9rem; font-weight: 500; }
39
- .word-cell { font-weight: bold; color: var(--accent-color); width: 30%; }
40
- .path-cell { font-size: 0.75rem; color: #ccc; width: 20%; }
41
- .variation-row { background: #faf9f6; }
42
-
43
- .card { background: white; padding: 30px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.02); }
44
  </style>
45
  </head>
46
  <body>
@@ -52,25 +47,19 @@
52
 
53
  <header>
54
  <h1>HUIUCL</h1>
55
- <div style="color:#999; font-size:0.8rem; margin-top:5px;">v2.0 Revision - Database</div>
56
  </header>
57
 
58
  <div class="container">
59
  <section id="dictionary" class="active">
60
- <input type="text" id="searchInput" class="search-box" placeholder="๋‹จ์–ด, ๋œป, ํŒŒ์ƒ์–ด ๊ฒ€์ƒ‰..." oninput="renderTable()">
61
-
62
  <div class="filter-container" id="categoryButtons">
63
  <button class="filter-btn active" onclick="filterCategory('๋ชจ๋‘', this)">๋ชจ๋‘ ๋ณด๊ธฐ</button>
64
  </div>
65
-
66
  <div class="table-wrapper">
67
  <table>
68
  <thead>
69
- <tr>
70
- <th>๋‹จ์–ด</th>
71
- <th>์˜๋ฏธ</th>
72
- <th>๋ถ„๋ฅ˜</th>
73
- </tr>
74
  </thead>
75
  <tbody id="dictBody"></tbody>
76
  </table>
@@ -78,10 +67,7 @@
78
  </section>
79
 
80
  <section id="grammar">
81
- <div class="card" id="grammarBox">
82
- <h2>Grammar & Phonology</h2>
83
- <div id="settingsContent">๋ฐ์ดํ„ฐ๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๋Š” ์ค‘...</div>
84
- </div>
85
  </section>
86
  </div>
87
 
@@ -101,18 +87,12 @@
101
  conlangData = data;
102
  initFilterButtons();
103
  renderTable();
104
- renderGrammar();
105
- })
106
- .catch(err => {
107
- console.error(err);
108
- document.getElementById('dictBody').innerHTML = '<tr><td colspan="3">๋ฐ์ดํ„ฐ ๋กœ๋“œ ์‹คํŒจ (Huiucl.json ํŒŒ์ผ์„ ํ™•์ธํ•˜์„ธ์š”)</td></tr>';
109
  });
110
  };
111
 
112
- // ์ƒ๋‹จ ํ’ˆ์‚ฌ/์นดํ…Œ๊ณ ๋ฆฌ ๋ฒ„ํŠผ ์ƒ์„ฑ
113
  function initFilterButtons() {
114
  const btnContainer = document.getElementById('categoryButtons');
115
- // JSON์˜ ์ตœ์ƒ์œ„ ํ‚ค๋“ค์„ ๋ฒ„ํŠผ์œผ๋กœ ๋งŒ๋“ฆ (Settings ์ œ์™ธ)
116
  Object.keys(conlangData).forEach(key => {
117
  if (key === "Settings") return;
118
  const btn = document.createElement('button');
@@ -140,43 +120,45 @@
140
  : [currentCategory];
141
 
142
  categories.forEach(cat => {
143
- traverse(conlangData[cat], cat, query);
144
  });
145
  }
146
 
147
- // ๋ฐ์ดํ„ฐ๋ฅผ ๊นŠ๊ฒŒ ํƒ์ƒ‰ํ•˜๋ฉฐ ๋‹จ์–ด๋ฅผ ์ถ”์ถœํ•˜๋Š” ํ•จ์ˆ˜
148
- function traverse(obj, path, query) {
 
 
149
  for (let key in obj) {
150
  const item = obj[key];
151
-
152
- // 1. ์ผ๋ฐ˜ ๋‹จ์–ด ๊ตฌ์กฐ (meaning_ko / ๋œป ํ•„๋“œ ์กด์žฌ ์‹œ)
153
- if (item && typeof item === 'object' && (item.meaning_ko || item.๋œป)) {
154
- const kor = item.meaning_ko || item.๋œป;
155
- const eng = item.meaning_en || '';
156
-
157
- if (key.toLowerCase().includes(query) || kor.toLowerCase().includes(query)) {
158
- appendRow(key, kor, path, false);
159
  }
160
-
161
- // ํŒŒ์ƒ์–ด ์ฒ˜๋ฆฌ (derivations ํ‚ค ํ™•์ธ)
162
  if (item.derivations) {
163
  for (let dKey in item.derivations) {
164
- const dMean = item.derivations[dKey];
165
- if (dKey.toLowerCase().includes(query) || dMean.toLowerCase().includes(query)) {
166
- appendRow(dKey, dMean, path, true);
167
  }
168
  }
169
  }
170
  }
171
- // 2. ํŠน์ˆ˜ ๋‹จ์–ด (์กฐ์‚ฌ, ์ ‘์†์‚ฌ ๋“ฑ - ๋‹จ์ˆœ ํ‚ค-๊ฐ’ ์Œ์ธ ๊ฒฝ์šฐ)
172
- else if (typeof item === 'string') {
173
- if (key.toLowerCase().includes(query) || item.toLowerCase().includes(query)) {
174
- appendRow(key, item, path, false);
 
 
175
  }
176
  }
177
- // 3. ํ•˜์œ„ ์นดํ…Œ๊ณ ๋ฆฌ๊ฐ€ ๋” ์žˆ๋Š” ๊ฒฝ์šฐ (์žฌ๊ท€ ํƒ์ƒ‰)
178
- else if (item && typeof item === 'object') {
179
- traverse(item, path + " > " + key, query);
180
  }
181
  }
182
  }
@@ -185,27 +167,40 @@
185
  const body = document.getElementById('dictBody');
186
  const row = body.insertRow();
187
  if (isSub) row.className = 'variation-row';
188
-
189
- row.innerHTML = `
190
- <td class="word-cell">${isSub ? 'โ”” ' : ''}${word}</td>
191
- <td>${meaning}</td>
192
- <td class="path-cell">${path}</td>
193
- `;
194
  }
195
 
196
- function renderGrammar() {
197
- const target = document.getElementById('settingsContent');
198
- if (!conlangData.Settings) return;
199
- const s = conlangData.Settings;
200
- target.innerHTML = `
201
- <h3>Phonology</h3>
202
- <p><strong>Vowels:</strong> ${Object.keys(s.Phonology.Vowels).join(', ')}</p>
203
- <p><strong>Consonants:</strong> ${Object.keys(s.Phonology.Consonants).join(', ')}</p>
204
- <hr>
205
- <h3>Syntax</h3>
206
- <p><strong>Word Order:</strong> ${s.Syntax.Word_Order.join(' / ')}</p>
207
- <p>${s.Syntax.Imperative["2"]}</p>
208
- `;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
209
  }
210
  </script>
211
  </body>
 
21
 
22
  .container { max-width: 1000px; margin: 0 auto; padding: 0 20px 100px; }
23
  section { display: none; }
24
+ section.active { display: block; }
25
 
 
 
 
26
  .filter-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 25px; }
27
+ .filter-btn { background: var(--card-bg); border: 1px solid var(--border-color); padding: 8px 16px; cursor: pointer; border-radius: 20px; font-size: 0.85rem; }
28
  .filter-btn.active { background: var(--accent-color); color: white; border-color: var(--accent-color); }
29
 
 
30
  .search-box { width: 100%; padding: 15px 25px; border: 1px solid var(--border-color); border-radius: 30px; font-size: 1rem; margin-bottom: 20px; box-sizing: border-box; outline: none; }
31
  .table-wrapper { background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
32
  table { width: 100%; border-collapse: collapse; }
33
  th, td { padding: 15px 20px; text-align: left; border-bottom: 1px solid #eee; }
34
+ th { background: #f1eee6; color: #777; font-size: 0.9rem; }
35
+
36
+ .word-cell { font-weight: bold; color: var(--accent-color); width: 25%; }
37
+ .path-cell { font-size: 0.7rem; color: #bbb; width: 20%; }
38
+ .variation-row { background: #faf9f6; color: #666; }
 
39
  </style>
40
  </head>
41
  <body>
 
47
 
48
  <header>
49
  <h1>HUIUCL</h1>
50
+ <div style="color:#999; font-size:0.8rem; margin-top:5px;">DATABASE v2.1 (Fixed)</div>
51
  </header>
52
 
53
  <div class="container">
54
  <section id="dictionary" class="active">
55
+ <input type="text" id="searchInput" class="search-box" placeholder="๊ฒ€์ƒ‰์–ด๋ฅผ ์ž…๋ ฅํ•˜์„ธ์š”..." oninput="renderTable()">
 
56
  <div class="filter-container" id="categoryButtons">
57
  <button class="filter-btn active" onclick="filterCategory('๋ชจ๋‘', this)">๋ชจ๋‘ ๋ณด๊ธฐ</button>
58
  </div>
 
59
  <div class="table-wrapper">
60
  <table>
61
  <thead>
62
+ <tr><th>๋‹จ์–ด</th><th>์˜๋ฏธ (KO/EN)</th><th>๋ถ„๋ฅ˜</th></tr>
 
 
 
 
63
  </thead>
64
  <tbody id="dictBody"></tbody>
65
  </table>
 
67
  </section>
68
 
69
  <section id="grammar">
70
+ <div id="grammarContent"></div>
 
 
 
71
  </section>
72
  </div>
73
 
 
87
  conlangData = data;
88
  initFilterButtons();
89
  renderTable();
90
+ renderGrammarPage();
 
 
 
 
91
  });
92
  };
93
 
 
94
  function initFilterButtons() {
95
  const btnContainer = document.getElementById('categoryButtons');
 
96
  Object.keys(conlangData).forEach(key => {
97
  if (key === "Settings") return;
98
  const btn = document.createElement('button');
 
120
  : [currentCategory];
121
 
122
  categories.forEach(cat => {
123
+ extractWords(conlangData[cat], cat, query);
124
  });
125
  }
126
 
127
+ function extractWords(obj, path, query) {
128
+ // ๋ฌธ๋ฒ• ๊ทœ์น™(Grammar_Rules)์€ ์‚ฌ์ „ ๋กœ๋“œ์—์„œ ์ œ์™ธ
129
+ if (path.includes("Grammar_Rules")) return;
130
+
131
  for (let key in obj) {
132
  const item = obj[key];
133
+ if (!item || typeof item !== 'object') continue;
134
+
135
+ // 1. ํ‘œ์ค€ ๋‹จ์–ด (meaning_ko ๊ฐ€ ์ง์ ‘ ์žˆ๋Š” ๊ฒฝ์šฐ)
136
+ if (item.meaning_ko || item.๋œป) {
137
+ const ko = item.meaning_ko || item.๋œป;
138
+ const en = item.meaning_en || "";
139
+ if (key.toLowerCase().includes(query) || ko.includes(query)) {
140
+ appendRow(key, `${ko} / ${en}`, path);
141
  }
142
+ // ํŒŒ์ƒ์–ด ์ฒ˜๋ฆฌ
 
143
  if (item.derivations) {
144
  for (let dKey in item.derivations) {
145
+ if (dKey.toLowerCase().includes(query) || item.derivations[dKey].includes(query)) {
146
+ appendRow(dKey, item.derivations[dKey], path, true);
 
147
  }
148
  }
149
  }
150
  }
151
+ // 2. ์กฐ๋™์‚ฌ/์ ‘์†์‚ฌ ๋“ฑ ko, en ํ‚ค๊ฐ€ ํ•˜์œ„์— ์žˆ๋Š” ํŠน์ˆ˜ ๊ตฌ์กฐ
152
+ else if (item.ko || item.en) {
153
+ const ko = item.ko || "";
154
+ const en = item.en || "";
155
+ if (key.toLowerCase().includes(query) || ko.includes(query)) {
156
+ appendRow(key, `${ko} / ${en}`, path);
157
  }
158
  }
159
+ // 3. ๋” ๊นŠ์€ ๊ณ„์ธต ํƒ์ƒ‰
160
+ else {
161
+ extractWords(item, path + " > " + key, query);
162
  }
163
  }
164
  }
 
167
  const body = document.getElementById('dictBody');
168
  const row = body.insertRow();
169
  if (isSub) row.className = 'variation-row';
170
+ row.innerHTML = `<td class="word-cell">${isSub ? 'โ”” ' : ''}${word}</td><td>${meaning}</td><td class="path-cell">${path}</td>`;
 
 
 
 
 
171
  }
172
 
173
+ function renderGrammarPage() {
174
+ const target = document.getElementById('grammarContent');
175
+ let html = "";
176
+
177
+ // Settings ๋กœ๋“œ
178
+ if (conlangData.Settings) {
179
+ const s = conlangData.Settings;
180
+ html += `<div style="background:white; padding:30px; border-radius:15px; margin-bottom:20px;">
181
+ <h2>Basic Settings</h2>
182
+ <p><strong>Order:</strong> ${s.Syntax.Word_Order.join(', ')}</p>
183
+ <p><strong>Imperative:</strong> ${s.Syntax.Imperative["2"]}</p>
184
+ </div>`;
185
+ }
186
+
187
+ // ์‚ฌ์ „์—์„œ ์ œ์™ธ๋œ Grammar_Rules๋ฅผ ์—ฌ๊ธฐ์„œ ๋”ฐ๋กœ ์ถœ๋ ฅ
188
+ function findRules(obj, path) {
189
+ for (let key in obj) {
190
+ if (key === "Grammar_Rules") {
191
+ html += `<div style="background:white; padding:30px; border-radius:15px; margin-bottom:20px;">
192
+ <h3>${path} Rules</h3>`;
193
+ for (let rKey in obj[key]) {
194
+ html += `<p><strong>${rKey}:</strong> ${obj[key][rKey]}</p>`;
195
+ }
196
+ html += `</div>`;
197
+ } else if (typeof obj[key] === 'object') {
198
+ findRules(obj[key], path + " > " + key);
199
+ }
200
+ }
201
+ }
202
+ findRules(conlangData, "");
203
+ target.innerHTML = html;
204
  }
205
  </script>
206
  </body>