Spaces:

OpenLab-NLP
/

aaa

Running

aaa

File size: 10,946 Bytes

c37a8db
 
 
 
db34979
 
c37a8db
aff5f11
db34979
 
 
 
 
 
aff5f11
 
db34979
08a181f
db34979
 
 
 
aff5f11
db34979
 
 
 
 
 
 
 
 
08a181f
 
db34979
 
aff5f11
db34979
 
aff5f11
db34979
 
 
 
 
 
 
 
 
 
08a181f
db34979
 
 
 
 
 
 
 
 
 
 
 
 
08a181f
 
c37a8db
 
 
 
aff5f11
db34979
 
 
aff5f11
78e2dfd
aff5f11
 
db34979
aff5f11
78e2dfd
aff5f11
 
db34979
 
 
 
 
 
 
aff5f11
 
db34979
aff5f11
 
 
 
 
 
 
db34979
 
 
 
 
 
 
08a181f
 
db34979
 
 
 
 
 
36bf5f0
 
aff5f11
08a181f
36bf5f0
 
 
db34979
aff5f11
c37a8db
 
 
db34979
 
aff5f11
db34979
aff5f11
 
b070fc7
aff5f11
36bf5f0
 
 
 
 
 
 
 
 
 
 
 
 
 
 
db34979
36bf5f0
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
db34979
 
 
36bf5f0
 
 
 
 
 
 
db34979
 
 
aff5f11
db34979
aff5f11
76441ae
36bf5f0
 
 
 
 
 
 
 
aff5f11
 
b40ee7e
 
36bf5f0
 
 
 
 
 
 
 
 
78e2dfd
a4f9303
36bf5f0
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
c37a8db
db34979
c37a8db
356026c

<!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>