Spaces:

OpenLab-NLP
/

aaa

Running

App Files Files Community

aaa / index.html

OpenLab-NLP

Update index.html

36bf5f0 verified about 6 hours ago

raw

history blame contribute delete

10.9 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>HUIUCL Online Archive</title>
	<style>
	:root {
	--bg-color: #f9f7f2;
	--card-bg: #ffffff;
	--primary-color: #5d5b54;
	--accent-color: #d4a373;
	--border-color: #e0ddd5;
	--variation-bg: #faf9f6;
	}

	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: 20px; 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: 500; font-size: 0.9rem; transition: 0.2s; }
	nav a:hover { color: var(--accent-color); }

	header { text-align: center; padding: 60px 20px; }
	h1 { font-weight: 300; letter-spacing: 8px; color: var(--accent-color); margin: 0; }
	.sub-title { font-size: 0.9rem; color: #999; margin-top: 10px; }

	.container { max-width: 900px; margin: 0 auto; padding: 0 20px 100px; }
	section { display: none; }
	section.active { display: block; animation: fadeIn 0.5s; }

	@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

	.search-container { margin-bottom: 30px; display: flex; gap: 10px; }
	input[type="text"] { flex: 1; padding: 12px 24px; border: 1px solid var(--border-color); border-radius: 30px; outline: none; }
	.filter-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 30px; }
	button { background: var(--card-bg); border: 1px solid var(--border-color); padding: 6px 16px; cursor: pointer; border-radius: 20px; font-size: 0.85rem; }
	button.active { background: var(--accent-color); color: white; border-color: var(--accent-color); }
	.table-wrapper { background: var(--card-bg); 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 var(--bg-color); }
	th { background: #f1eee6; font-size: 0.9rem; color: #777; }
	.word-cell { font-weight: bold; color: var(--accent-color); }

	.card { background: var(--card-bg); padding: 40px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); margin-bottom: 20px; }

	.archive-layout { display: flex; gap: 30px; }
	.story-list { width: 250px; flex-shrink: 0; }
	.story-item {
	padding: 15px; background: var(--card-bg); margin-bottom: 10px;
	border-radius: 10px; cursor: pointer; border: 1px solid var(--border-color);
	font-size: 0.9rem; transition: 0.2s;
	}
	.story-item:hover, .story-item.active { border-color: var(--accent-color); color: var(--accent-color); background: #fdfcf9; }
	.story-content { flex: 1; background: var(--card-bg); padding: 40px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); min-height: 400px; }
	.story-line { margin-bottom: 25px; }
	.huiucl-text { font-size: 1.2rem; color: var(--accent-color); font-weight: 600; margin-bottom: 5px; }
	.korean-text { font-size: 1rem; color: #777; border-left: 2px solid var(--border-color); padding-left: 15px; }
	</style>
	</head>
	<body>

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

	<header>
	<h1>HUIUCL</h1>
	<div class="sub-title">v2.0 Revision - Artificial Language Project</div>
	</header>

	<div class="container">
	<section id="dictionary" class="active">
	<div class="search-container">
	<input type="text" id="searchInput" placeholder="단어 혹은 의미 검색..." onkeyup="renderTable()">
	</div>
	<div class="filter-container" id="categoryButtons">
	<button onclick="changeCategory('모두', this)" class="active">모두 보기</button>
	</div>
	<div class="table-wrapper">
	<table>
	<thead>
	<tr><th>단어</th><th>의미</th><th>분류</th></tr>
	</thead>
	<tbody id="dictBody"></tbody>
	</table>
	</div>
	</section>

	<section id="grammar">
	<div class="card">
	<h2 style="font-weight: 300;">Basic Grammar</h2>
	<p><strong>1. 어순:</strong> 주어-동사(SV) 또는 주어-동사-목적어(SVO)</p>
	<p><strong>2. 명령문:</strong> 동사를 맨 앞에 위치</p>
	<p><strong>3. 시제:</strong> 과거형 <code>-m</code>, 미래형 <code>-n</code></p>
	<hr style="border: 0; border-top: 1px solid var(--border-color); margin: 20px 0;">
	<h3>Phoneme (음소)</h3>
	<p><strong>Vowels:</strong> a, i, u</p>
	<p><strong>Consonants:</strong> m, n, s, h, l, c(ㄲ), t(ㄸ)</p>
	</div>
	</section>

	<section id="archive">
	<div class="archive-layout">
	<div class="story-list">
	<!-- ARCHIVE 내용은 추후 확장 가능 -->
	<div class="story-item" style="color:#999; cursor:default;">아카이브 준비 중...</div>
	</div>
	<div class="story-content" id="storyViewer">
	<h2 style="font-weight:300; text-align:center; color:#999;">Coming Soon</h2>
	<p style="text-align:center; color:#ccc;">Huiucl로 쓰인 이야기와 시가 곧 업로드됩니다.</p>
	</div>
	</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');
	}

	function changeCategory(cat, btn) {
	document.querySelectorAll('#categoryButtons button').forEach(b => b.classList.remove('active'));
	btn.classList.add('active');
	currentCategory = cat;
	renderTable();
	}

	// === 핵심: JSON에서 '뜻'과 '파생' 모두 처리 ===
	function traverse(obj, basePath, search) {
	if (!obj \|\| typeof obj !== 'object') return;

	for (const key in obj) {
	if (key === "설정") continue;

	const item = obj[key];

	// 1. 일반 항목: '뜻'이 있으면 기본 단어로 간주
	if (item && typeof item === 'object' && item.hasOwnProperty('뜻')) {
	const meaning = item.뜻;
	// 검색 조건 확인
	if (key.toLowerCase().includes(search) \|\| meaning.toLowerCase().includes(search)) {
	addRow(key, meaning, basePath, false);
	}

	// 2. '파생' 처리
	if (item.hasOwnProperty('파생') && typeof item.파생 === 'object') {
	for (const derivKey in item.파생) {
	const derivMeaning = item.파생[derivKey];
	if (derivKey.toLowerCase().includes(search) \|\| derivMeaning.toLowerCase().includes(search)) {
	addRow(derivKey, derivMeaning, basePath, true);
	}
	}
	}

	// 3. '변형' 처리 (예: 조동사)
	if (item.hasOwnProperty('변형') && typeof item.변형 === 'object') {
	for (const varKey in item.변형) {
	const varMeaning = item.변형[varKey];
	if (varKey.toLowerCase().includes(search) \|\| varMeaning.toLowerCase().includes(search)) {
	addRow(varKey, varMeaning, basePath, true);
	}
	}
	}
	}
	// 4. 중첩된 카테고리 (예: "사회 > 가족")
	else if (typeof item === 'object') {
	const newPath = `${basePath} > ${key}`;
	traverse(item, newPath, search);
	}
	// 5. 단순 문자열 항목 (예: 문법 규칙)
	else if (typeof item === 'string') {
	if (key.toLowerCase().includes(search) \|\| item.toLowerCase().includes(search)) {
	addRow(key, item, basePath, false);
	}
	}
	}
	}

	function addRow(word, meaning, path, isDerived) {
	const row = document.getElementById('dictBody').insertRow();
	row.innerHTML = `
	<td class="word-cell">${isDerived ? '↳ ' : ''}${word}</td>
	<td>${meaning}</td>
	<td style="font-size:0.7rem; color:#ccc;">${path}</td>
	`;
	}

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

	if (currentCategory === '모두') {
	const categories = Object.keys(conlangData).filter(k => k !== "설정");
	categories.forEach(cat => {
	traverse(conlangData[cat], cat, search);
	});
	} else {
	if (conlangData[currentCategory]) {
	traverse(conlangData[currentCategory], currentCategory, search);
	}
	}
	}

	function initButtons() {
	const container = document.getElementById('categoryButtons');
	Object.keys(conlangData).forEach(key => {
	if (key === "설정") return;
	const btn = document.createElement('button');
	btn.innerText = key;
	btn.onclick = (e) => changeCategory(key, e.target);
	container.appendChild(btn);
	});
	}

	// 초기화
	window.onload = () => {
	fetch('Huiucl4.json')
	.then(res => {
	if (!res.ok) throw new Error("Huiucl4.json 파일을 불러올 수 없습니다.");
	return res.json();
	})
	.then(data => {
	conlangData = data;
	initButtons();
	renderTable();
	})
	.catch(err => {
	console.error(err);
	document.getElementById('dictBody').innerHTML = `<tr><td colspan="3" style="text-align:center;color:red;">⚠️ 오류: Huiucl4.json을 로드할 수 없습니다.</td></tr>`;
	});
	};
	</script>

	</body>
	</html>