Spaces:

OpenLab-NLP
/

aaa

Running

App Files Files Community

aaa / index.html

OpenLab-NLP

Update index.html

94d5ad0 verified 2 months ago

raw

history blame

9.1 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>HUIUCL Database</title>
	<style>
	:root { --bg-color: #f9f7f2; --card-bg: #ffffff; --primary-color: #5d5b54; --accent-color: #d4a373; --border-color: #e0ddd5; }
	body { font-family: 'Pretendard', sans-serif; background-color: var(--bg-color); color: var(--primary-color); margin: 0; padding: 0; line-height: 1.6; }
	nav { position: sticky; top: 0; background: rgba(249, 247, 242, 0.9); backdrop-filter: blur(10px); padding: 15px; text-align: center; border-bottom: 1px solid var(--border-color); z-index: 100; }
	nav a { margin: 0 15px; text-decoration: none; color: var(--primary-color); font-weight: 600; cursor: pointer; }
	header { text-align: center; padding: 40px 20px; }
	h1 { font-weight: 300; letter-spacing: 8px; color: var(--accent-color); margin: 0; }
	.container { max-width: 1100px; margin: 0 auto; padding: 0 20px 100px; }
	section { display: none; }
	section.active { display: block; }
	.filter-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 25px; }
	.filter-btn { background: var(--card-bg); border: 1px solid var(--border-color); padding: 8px 16px; cursor: pointer; border-radius: 20px; font-size: 0.85rem; }
	.filter-btn.active { background: var(--accent-color); color: white; border-color: var(--accent-color); }
	.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; }
	.table-wrapper { background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
	table { width: 100%; border-collapse: collapse; }
	th, td { padding: 15px 20px; text-align: left; border-bottom: 1px solid #eee; }
	th { background: #f1eee6; color: #777; font-size: 0.85rem; }
	.word-cell { font-weight: bold; color: var(--accent-color); width: 25%; }
	.meaning-cell { width: 55%; font-size: 0.95rem; }
	.path-cell { font-size: 0.7rem; color: #bbb; width: 20%; text-align: right; }
	.usage-tag { font-size: 0.8rem; color: #888; display: block; margin-top: 4px; border-top: 1px dashed #eee; padding-top: 4px; }
	</style>
	</head>
	<body>

	<nav>
	<a onclick="showSection('dictionary')">DICTIONARY</a>
	<a onclick="showSection('grammar')">GRAMMAR</a>
	</nav>

	<header>
	<h1>HUIUCL</h1>
	<div style="color:#999; font-size:0.8rem; margin-top:5px;">DATABASE v2.7 (Manual Mapping)</div>
	</header>

	<div class="container">
	<section id="dictionary" class="active">
	<input type="text" id="searchInput" class="search-box" placeholder="단어, 뜻, 카테고리 검색..." oninput="renderTable()">
	<div class="filter-container" id="categoryButtons">
	<button class="filter-btn active" onclick="filterCategory('모두', this)">모두 보기</button>
	</div>
	<div class="table-wrapper">
	<table>
	<thead>
	<tr><th>단어</th><th>의미 및 설명</th><th style="text-align:right;">분류</th></tr>
	</thead>
	<tbody id="dictBody"></tbody>
	</table>
	</div>
	</section>
	<section id="grammar"><div id="grammarContent"></div></section>
	</div>

	<script>
	let conlangData = {};
	let currentCategory = '모두';

	function showSection(id) {
	document.querySelectorAll('section').forEach(s => s.classList.remove('active'));
	document.getElementById(id).classList.add('active');
	}

	window.onload = () => {
	fetch('Huiucl.json').then(res => res.json()).then(data => {
	conlangData = data;
	initFilterButtons();
	renderTable();
	renderGrammarPage();
	});
	};

	function initFilterButtons() {
	const btnContainer = document.getElementById('categoryButtons');
	Object.keys(conlangData).forEach(key => {
	if (key === "Settings") return;
	const btn = document.createElement('button');
	btn.className = 'filter-btn';
	btn.innerText = key;
	btn.onclick = (e) => filterCategory(key, e.target);
	btnContainer.appendChild(btn);
	});
	}

	function filterCategory(cat, btn) {
	document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
	btn.classList.add('active');
	currentCategory = cat;
	renderTable();
	}

	function renderTable() {
	const query = document.getElementById('searchInput').value.toLowerCase();
	const body = document.getElementById('dictBody');
	body.innerHTML = '';

	const categories = currentCategory === '모두'
	? Object.keys(conlangData).filter(k => k !== "Settings")
	: [currentCategory];

	categories.forEach(cat => {
	manualProcess(conlangData[cat], cat, query);
	});
	}

	// 하나하나 성격에 맞춰 지정 처리하는 수동 매핑 엔진
	function manualProcess(obj, path, query) {
	if (path.includes("Grammar_Rules")) return; // 문법 규칙은 사전에서 제외

	for (let key in obj) {
	const val = obj[key];
	if (!val) continue;

	// 1. [단어 객체] - meaning_ko, ko, definition 등의 키가 있는 경우
	if (typeof val === 'object' && (val.meaning_ko \|\| val.ko \|\| val.definition \|\| val.뜻)) {
	let mainWord = key;
	let kor = val.meaning_ko \|\| val.ko \|\| val.뜻 \|\| val.definition \|\| "";
	let eng = val.meaning_en \|\| val.en \|\| "";
	let extra = val.usage \|\| val.note \|\| "";

	if (mainWord.toLowerCase().includes(query) \|\| kor.toLowerCase().includes(query)) {
	appendRow(mainWord, kor, eng, extra, path);
	}

	// 하위 파생어 처리
	if (val.derivations) {
	for (let dKey in val.derivations) {
	appendRow(dKey, val.derivations[dKey], "", "", path, true);
	}
	}

	// 조동사 등 내부 텐스 변형이 있는 경우 (acam, acac 등)
	if (val.tense_variants) {
	manualProcess(val.tense_variants, path + " > " + key, query);
	}
	}
	// 2. [단순 키-값] - 대명사, 인사말 등 (key: "string")
	else if (typeof val === 'string') {
	if (key.toLowerCase().includes(query) \|\| val.toLowerCase().includes(query)) {
	appendRow(key, val, "", "", path);
	}
	}
	// 3. [조사/접사 구조] - 키 내부에 또 설명이 있거나, 묶여 있는 경우
	else if (typeof val === 'object') {
	// 특정 키(usage, note, definition) 자체가 단어로 뜨지 않도록 필터링하며 재귀 탐색
	if (!["usage", "note", "definition", "tense_variants"].includes(key)) {
	manualProcess(val, path + " > " + key, query);
	}
	}
	}
	}

	function appendRow(word, kor, eng, usage, path, isSub) {
	const body = document.getElementById('dictBody');
	const row = body.insertRow();
	if (isSub) row.className = 'variation-row';

	let meaningHtml = `<strong>${kor}</strong>`;
	if (eng) meaningHtml += ` <span style="color:#888;">(${eng})</span>`;
	if (usage) meaningHtml += `<span class="usage-tag">※ ${usage}</span>`;

	row.innerHTML = `
	<td class="word-cell">${isSub ? '└ ' : ''}${word}</td>
	<td class="meaning-cell">${meaningHtml}</td>
	<td class="path-cell">${path}</td>
	`;
	}

	function renderGrammarPage() {
	const target = document.getElementById('grammarContent');
	let html = "";
	function findRules(obj, path) {
	for (let key in obj) {
	if (key === "Grammar_Rules") {
	html += `<div style="background:white; padding:30px; border-radius:15px; margin-bottom:20px; box-shadow:0 5px 15px rgba(0,0,0,0.05);">
	<h3 style="margin-top:0; color:var(--accent-color);">${path \|\| 'General'} Rules</h3>`;
	for (let rKey in obj[key]) {
	html += `<p><strong>${rKey}:</strong> ${obj[key][rKey]}</p>`;
	}
	html += `</div>`;
	} else if (typeof obj[key] === 'object' && key !== "Settings") {
	findRules(obj[key], path ? path + " > " + key : key);
	}
	}
	}
	findRules(conlangData, "");
	target.innerHTML = html \|\| "<p>로드된 문법 규칙이 없습니다.</p>";
	}
	</script>
	</body>
	</html>