Hugging Face's logo

Spaces:
OpenLab-NLP
/
aaa
Running

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

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +59 -52
index.html CHANGED
@@ -24,18 +24,19 @@
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,19 +48,23 @@
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>
@@ -120,45 +125,43 @@
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,39 +170,43 @@
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>
 
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; transition: 0.2s; }
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; box-shadow: 0 4px 10px rgba(0,0,0,0.02); }
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; table-layout: fixed; }
33
+ th, td { padding: 15px 20px; text-align: left; border-bottom: 1px solid #eee; overflow: hidden; text-overflow: ellipsis; }
34
+ th { background: #f1eee6; color: #777; font-size: 0.85rem; font-weight: 600; }
35
 
36
+ .word-cell { font-weight: bold; color: var(--accent-color); width: 30%; }
37
+ .meaning-cell { width: 50%; }
38
+ .path-cell { font-size: 0.7rem; color: #bbb; width: 20%; text-align: right; }
39
+ .variation-row { background: #faf9f6; font-size: 0.95rem; }
40
  </style>
41
  </head>
42
  <body>
 
48
 
49
  <header>
50
  <h1>HUIUCL</h1>
51
+ <div style="color:#999; font-size:0.8rem; margin-top:5px;">DATABASE v2.5 (Full Load)</div>
52
  </header>
53
 
54
  <div class="container">
55
  <section id="dictionary" class="active">
56
+ <input type="text" id="searchInput" class="search-box" placeholder="๋ชจ๋“  ๋‹จ์–ด, ๋Œ€๋ช…์‚ฌ, ์ธ์‚ฌ๋ง ๊ฒ€์ƒ‰..." oninput="renderTable()">
57
  <div class="filter-container" id="categoryButtons">
58
  <button class="filter-btn active" onclick="filterCategory('๋ชจ๋‘', this)">๋ชจ๋‘ ๋ณด๊ธฐ</button>
59
  </div>
60
  <div class="table-wrapper">
61
  <table>
62
  <thead>
63
+ <tr>
64
+ <th style="width:30%">๋‹จ์–ด</th>
65
+ <th style="width:50%">์˜๋ฏธ</th>
66
+ <th style="width:20%; text-align:right;">๋ถ„๋ฅ˜</th>
67
+ </tr>
68
  </thead>
69
  <tbody id="dictBody"></tbody>
70
  </table>
 
125
  : [currentCategory];
126
 
127
  categories.forEach(cat => {
128
+ processData(conlangData[cat], cat, query);
129
  });
130
  }
131
 
132
+ function processData(obj, path, query) {
 
133
  if (path.includes("Grammar_Rules")) return;
134
 
135
  for (let key in obj) {
136
+ const val = obj[key];
137
+ if (!val) continue;
138
+
139
+ // 1. ๋‹จ์–ด ๊ฐ์ฒด ๊ตฌ์กฐ (meaning_ko ํ˜น์€ ko/en ํ‚ค๊ฐ€ ์žˆ๋Š” ๊ฒฝ์šฐ)
140
+ if (typeof val === 'object' && (val.meaning_ko || val.ko || val.๋œป)) {
141
+ const ko = val.meaning_ko || val.ko || val.๋œป || "";
142
+ const en = val.meaning_en || val.en || "";
143
+ if (key.toLowerCase().includes(query) || ko.toLowerCase().includes(query)) {
144
+ appendRow(key, `${ko} ${en ? '/ ' + en : ''}`, path);
145
  }
146
  // ํŒŒ์ƒ์–ด ์ฒ˜๋ฆฌ
147
+ if (val.derivations) {
148
+ for (let dKey in val.derivations) {
149
+ const dMean = val.derivations[dKey];
150
+ if (dKey.toLowerCase().includes(query) || dMean.toLowerCase().includes(query)) {
151
+ appendRow(dKey, dMean, path, true);
152
  }
153
  }
154
  }
155
+ }
156
+ // 2. ๋Œ€๋ช…์‚ฌ/์ธ์‚ฌ๋ง ๊ตฌ์กฐ (๋‹จ์ˆœ ํ‚ค-๊ฐ’ ์Œ์ธ ๊ฒฝ์šฐ)
157
+ else if (typeof val === 'string') {
158
+ if (key.toLowerCase().includes(query) || val.toLowerCase().includes(query)) {
159
+ appendRow(key, val, path);
 
 
160
  }
161
  }
162
+ // 3. ์ค‘์ฒฉ๋œ ์นดํ…Œ๊ณ ๋ฆฌ (๊ณ„์† ํƒ์ƒ‰)
163
+ else if (typeof val === 'object') {
164
+ processData(val, path + " > " + key, query);
165
  }
166
  }
167
  }
 
170
  const body = document.getElementById('dictBody');
171
  const row = body.insertRow();
172
  if (isSub) row.className = 'variation-row';
173
+ row.innerHTML = `
174
+ <td class="word-cell">${isSub ? 'โ”” ' : ''}${word}</td>
175
+ <td class="meaning-cell">${meaning}</td>
176
+ <td class="path-cell">${path}</td>
177
+ `;
178
  }
179
 
180
  function renderGrammarPage() {
181
  const target = document.getElementById('grammarContent');
182
  let html = "";
 
 
183
  if (conlangData.Settings) {
184
  const s = conlangData.Settings;
185
+ html += `<div style="background:white; padding:30px; border-radius:15px; margin-bottom:20px; box-shadow:0 5px 15px rgba(0,0,0,0.05);">
186
+ <h2 style="margin-top:0; color:var(--accent-color);">System Settings</h2>
187
+ <p><strong>์–ด์ˆœ (Word Order):</strong> ${s.Syntax.Word_Order.join(', ')}</p>
188
+ <p><strong>๋ช…๋ น๋ฌธ:</strong> ${s.Syntax.Imperative["2"]}</p>
189
+ <hr style="border:0; border-top:1px solid #eee; margin:20px 0;">
190
+ <p><strong>Vowels:</strong> ${Object.keys(s.Phonology.Vowels).join(', ')}</p>
191
+ <p><strong>Consonants:</strong> ${Object.keys(s.Phonology.Consonants).join(', ')}</p>
192
  </div>`;
193
  }
194
 
195
+ function extractRules(obj, path) {
 
196
  for (let key in obj) {
197
  if (key === "Grammar_Rules") {
198
+ html += `<div style="background:white; padding:30px; border-radius:15px; margin-bottom:20px; box-shadow:0 5px 15px rgba(0,0,0,0.05);">
199
+ <h3 style="margin-top:0; border-bottom:2px solid var(--accent-color); display:inline-block; padding-bottom:5px;">${path} Rules</h3>`;
200
  for (let rKey in obj[key]) {
201
+ html += `<p style="margin:10px 0;"><strong>${rKey}:</strong> ${obj[key][rKey]}</p>`;
202
  }
203
  html += `</div>`;
204
+ } else if (typeof obj[key] === 'object' && key !== "Settings") {
205
+ extractRules(obj[key], path ? path + " > " + key : key);
206
  }
207
  }
208
  }
209
+ extractRules(conlangData, "");
210
  target.innerHTML = html;
211
  }
212
  </script>