Spaces:

OpenLab-NLP
/

aaa

Running

App Files Files Community

OpenLab-NLP commited on Feb 6

Commit

76441ae

verified ·

1 Parent(s): d069880

Update index.html

Browse files

Files changed (1) hide show

index.html +181 -208

index.html CHANGED Viewed

@@ -3,264 +3,237 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Huiucl Dictionary</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', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
             background-color: var(--bg-color);
             color: var(--primary-color);
-            margin: 0;
-            padding: 40px 20px;
-            line-height: 1.6;
         }
-        header { text-align: center; margin-bottom: 40px; }
-        h1 { font-weight: 300; letter-spacing: 5px; color: var(--accent-color); margin-bottom: 10px; }
-        .sub-title { font-size: 0.9rem; color: #999; }
-        /* 검색창 섹션 */
-        .search-container {
-            max-width: 600px;
-            margin: 0 auto 30px auto;
-            display: flex;
-            gap: 10px;
-        }
-        input[type="text"] {
-            flex: 1;
-            padding: 12px 24px;
-            border: 1px solid var(--border-color);
-            border-radius: 30px;
-            outline: none;
-            background-color: var(--card-bg);
-            font-size: 1rem;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.02);
         }
-        input[type="text"]:focus { border-color: var(--accent-color); box-shadow: 0 2px 10px rgba(212, 163, 115, 0.2); }
-        /* 카테고리 버튼 */
-        .filter-container {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: center;
-            gap: 8px;
-            margin-bottom: 40px;
-            max-width: 900px;
-            margin-left: auto;
-            margin-right: auto;
-        }
-        button {
-            background: var(--card-bg);
-            border: 1px solid var(--border-color);
-            color: var(--primary-color);
-            padding: 6px 16px;
-            cursor: pointer;
-            border-radius: 20px;
-            font-size: 0.85rem;
-            transition: all 0.2s;
-        }
-        button:hover, button.active {
-            background: var(--accent-color);
-            color: white;
-            border-color: var(--accent-color);
-        }
-        /* 테이블 디자인 */
-        .table-wrapper {
-            max-width: 1000px;
-            margin: 0 auto;
-            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; table-layout: fixed; }
-        th, td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--bg-color); overflow: hidden; text-overflow: ellipsis; }
-        th { background: #f1eee6; font-weight: 600; font-size: 0.9rem; color: #777; }
-        tr:last-child td { border-bottom: none; }
-        .word-cell { font-weight: bold; color: var(--accent-color); font-size: 1.1rem; }
-        .path-cell { font-size: 0.75rem; color: #bbb; }
-        /* 변형(Variation) 행 스타일 */
         .variation-row { background-color: var(--variation-bg); }
-        .variation-icon { color: #ccc; margin-right: 8px; font-weight: normal; }
     </style>
 </head>
 <body>
 <header>
     <h1>HUIUCL</h1>
-    <div class="sub-title">온라인 사전</div>
 </header>
-<div class="search-container">
-    <input type="text" id="searchInput" placeholder="찾고 싶은 단어나 뜻을 입력하세요..." onkeyup="filterData()">
-</div>
-<div class="filter-container" id="categoryButtons">
-    <button onclick="changeCategory('모두', this)" class="active">모두 보기</button>
-</div>
-<div class="table-wrapper">
-    <table>
-        <thead>
-            <tr>
-                <th style="width: 35%;">단어 (Huiucl)</th>
-                <th style="width: 35%;">의미 (Korean)</th>
-                <th style="width: 30%;">분류</th>
-            </tr>
-        </thead>
-        <tbody id="dictBody">
-            <tr><td colspan="3" style="text-align:center; padding:50px; color:#ccc;">데이터를 불러오는 중입니다...</td></tr>
-        </tbody>
-    </table>
 </div>
 <script>
     let conlangData = {};
-    let currentCategory = '모두';
-    // 1. JSON 로드
-    fetch('Conlang_1.json')
-        .then(res => res.json())
-        .then(data => {
-            conlangData = data;
-            initButtons();
-            renderTable();
-        })
-        .catch(err => {
-            console.error("Error loading JSON:", err);
-            document.getElementById('dictBody').innerHTML = '<tr><td colspan="3" style="text-align:center; color:red; padding:50px;">데이터 로드 실패 (CORS 정책 혹은 파일명을 확인하세요)</td></tr>';
-        });
-    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);
-        });
-    }
-    function changeCategory(key, target) {
-        document.querySelectorAll('button').forEach(b => b.classList.remove('active'));
-        target.classList.add('active');
-        currentCategory = key;
-        renderTable();
-    }
-    function filterData() {
-        renderTable();
     }
-    // 테이블 렌더링 함수
     function renderTable() {
         const body = document.getElementById('dictBody');
-        const searchTerm = document.getElementById('searchInput').value.toLowerCase();
         body.innerHTML = '';
-        const targets = currentCategory === '모두'
-            ? Object.keys(conlangData).filter(k => k !== "설정")
-            : [currentCategory];
-        targets.forEach(cat => {
-            traverse(conlangData[cat], cat, searchTerm);
-        });
-        if (body.innerHTML === '') {
-            body.innerHTML = '<tr><td colspan="3" style="text-align:center; padding:50px; color:#999;">검색 결과가 없습니다.</td></tr>';
-        }
-    }
-    /**
-     * 데이터를 재귀적으로 탐색하는 함수
-     * @param {Object} obj - 탐색할 객체
-     * @param {String} path - 현재 카테고리 경로
-     * @param {String} search - 검색어
-     */
-    function traverse(obj, path, search) {
-        for (const key in obj) {
-            if (key === "설정" || key === "변형") continue;
-            const item = obj[key];
-            // Case A: 직접 "뜻"을 가진 객체인 경우
-            if (item && typeof item === 'object' && item.hasOwnProperty('뜻')) {
-                const word = key;
-                const meaning = item.뜻;
-                if (word.toLowerCase().includes(search) || meaning.toLowerCase().includes(search)) {
-                    addRow(word, meaning, path, false);
-                }
-                // 단어 내부에 동일한 이름의 '변형 객체'가 있는지 확인 (예: sachi 안의 sachi)
-                if (item[key] && typeof item[key] === 'object') {
-                    processVariations(item[key], `${path} > ${key}`, search);
-                }
-            }
-            // Case B: 값이 단순 문자열인 경우 (단어: 뜻)
-            else if (typeof item === 'string') {
-                if (key.toLowerCase().includes(search) || item.toLowerCase().includes(search)) {
-                    addRow(key, item, path, false);
-                }
-            }
-            // Case C: 하위 카테고리 객체인 경우 (뜻이 없고 다른 객체들을 포함)
-            else if (typeof item === 'object') {
-                traverse(item, `${path} > ${key}`, search);
             }
-        }
-    }
-    /**
-     * 변형(Variation) 데이터를 처리하는 함수 (중첩된 li henna 등 대응)
-     */
-    function processVariations(vObj, path, search) {
-        for (const vKey in vObj) {
-            const vVal = vObj[vKey];
-            if (typeof vVal === 'string') {
-                if (vKey.toLowerCase().includes(search) || vVal.toLowerCase().includes(search)) {
-                    addRow(vKey, vVal, path, true);
-                }
-            } else if (vVal && typeof vVal === 'object') {
-                // 변형 내부에 또 뜻과 객체가 있는 경우 (예: li henna)
-                if (vVal.뜻) {
-                    if (vKey.toLowerCase().includes(search) || vVal.뜻.toLowerCase().includes(search)) {
-                        addRow(vKey, vVal.뜻, path, true);
                     }
-                    // 더 깊은 변형이 있다면 재귀 호출
-                    if (vVal[vKey]) processVariations(vVal[vKey], `${path} > ${vKey}`, search);
-                } else {
-                    processVariations(vVal, path, search);
                 }
             }
         }
     }
-    function addRow(word, meaning, path, isVariation) {
         const body = document.getElementById('dictBody');
         const row = body.insertRow();
-        if (isVariation) row.className = 'variation-row';
         row.innerHTML = `
-            <td class="word-cell" style="${isVariation ? 'padding-left: 40px; color: #999; font-size: 0.95rem;' : ''}">
-                ${isVariation ? '<span class="variation-icon">↳</span>' : ''}${word}
-            </td>
-            <td style="${isVariation ? 'color: #777;' : ''}">${meaning}</td>
-            <td class="path-cell">${path}</td>
         `;
     }
 </script>

 <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; cursor: pointer; }
+        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: 1000px; 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); } }
+        /* 사전(DICTIONARY) 스타일 */
+        .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; font-size: 1rem; }
+        .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; table-layout: fixed; }
+        th, td { padding: 15px 20px; text-align: left; border-bottom: 1px solid #f1f1f1; }
+        th { background: #f1eee6; font-size: 0.9rem; color: #777; font-weight: 500; }
+        .word-cell { font-weight: bold; color: var(--accent-color); width: 25%; }
+        .meaning-cell { width: 45%; }
+        .eng-cell { width: 30%; font-size: 0.85rem; color: #999; font-style: italic; }
         .variation-row { background-color: var(--variation-bg); }
+        .variation-mark { color: #ccc; margin-right: 8px; }
+        /* 문법 & 아카이브 스타일 동일 */
+        .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; }
+        .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 onclick="showSection('dictionary')">DICTIONARY</a>
+    <a onclick="showSection('grammar')">GRAMMAR</a>
+    <a onclick="showSection('archive')">ARCHIVE</a>
+</nav>
 <header>
     <h1>HUIUCL</h1>
+    <div class="sub-title">v2.0 Revision - Online Dictionary & Archive</div>
 </header>
+<div class="container">
+    <section id="dictionary" class="active">
+        <div class="search-container">
+            <input type="text" id="searchInput" placeholder="HUIUCL 단어, 한국어 뜻, 또는 영문 의미 검색..." onkeyup="renderTable()">
+        </div>
+        <div class="table-wrapper">
+            <table>
+                <thead>
+                    <tr>
+                        <th style="width:25%">단어 (Word)</th>
+                        <th style="width:45%">의미 (Meaning)</th>
+                        <th style="width:30%">English</th>
+                    </tr>
+                </thead>
+                <tbody id="dictBody">
+                    </tbody>
+            </table>
+        </div>
+    </section>
+    <section id="grammar">
+        <div class="card">
+            <h2 style="font-weight: 300;">Grammar & Phonology</h2>
+            <div id="grammarContent">
+                </div>
+        </div>
+    </section>
+    <section id="archive">
+        <div class="archive-layout">
+            <div class="story-list">
+                <div class="story-item active" onclick="loadStory(0, this)">01. 탄생 (Clama)</div>
+                <div class="story-item" onclick="loadStory(1, this)">02. 준비 중...</div>
+            </div>
+            <div class="story-content" id="storyViewer"></div>
+        </div>
+    </section>
 </div>
 <script>
     let conlangData = {};
+    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;
+                loadGrammar();
+                renderTable();
+                loadStory(0);
+            })
+            .catch(err => console.error("데이터를 불러오지 못했습니다. JSON 파일명을 확인하세요.", err));
+    };
+    // 사전 렌더링 로직
     function renderTable() {
         const body = document.getElementById('dictBody');
+        const search = document.getElementById('searchInput').value.toLowerCase();
         body.innerHTML = '';
+        // Settings, Pronouns 등을 제외한 실제 단어들 순회
+        const skipKeys = ["Settings", "Pronouns"];
+        for (const word in conlangData) {
+            if (skipKeys.includes(word)) continue;
+            const entry = conlangData[word];
+            const kor = entry.meaning_ko || "";
+            const eng = entry.meaning_en || "";
+            // 검색 필터링 (표제어 또는 의미)
+            if (word.toLowerCase().includes(search) || kor.includes(search) || eng.toLowerCase().includes(search)) {
+                addRow(word, kor, eng, false);
             }
+            // 파생어(derivations) 처리
+            if (entry.derivations) {
+                for (const dWord in entry.derivations) {
+                    const dMeaning = entry.derivations[dWord];
+                    // 파생어도 검색 대상에 포함
+                    if (dWord.toLowerCase().includes(search) || dMeaning.toLowerCase().includes(search)) {
+                        addRow(dWord, dMeaning, "-", true);
                     }
                 }
             }
         }
     }
+    function addRow(word, meaning, eng, isVar) {
         const body = document.getElementById('dictBody');
         const row = body.insertRow();
+        if (isVar) row.className = "variation-row";
         row.innerHTML = `
+            <td class="word-cell">${isVar ? '<span class="variation-mark">↳</span>' : ''}${word}</td>
+            <td class="meaning-cell">${meaning}</td>
+            <td class="eng-cell">${eng}</td>
+        `;
+    }
+    // 문법 데이터 로드
+    function loadGrammar() {
+        const container = document.getElementById('grammarContent');
+        if (!conlangData.Settings) return;
+        const set = conlangData.Settings;
+        let html = `
+            <h3>Syntax (어순)</h3>
+            <p>기본 어순: ${set.Syntax.Word_Order.join(' / ')}</p>
+            <p>${set.Syntax.Imperative["2"]}</p>
+            <hr style="border:0; border-top:1px solid #eee; margin:20px 0;">
+            <h3>Phonology (음성)</h3>
+            <p><strong>Vowels:</strong> ${Object.keys(set.Phonology.Vowels).join(', ')}</p>
+            <p><strong>Consonants:</strong> ${Object.keys(set.Phonology.Consonants).join(', ')} (c=[k'], t=[t'])</p>
         `;
+        container.innerHTML = html;
+    }
+    // 아카이브 로직
+    const stories = [
+        {
+            title: "기록 01: 탄생",
+            lines: [
+                { h: "unal cinicl si hamolhilasna clamam..", k: "우주와 하몰히라스나가 태어났다." },
+                { h: "su u clum hoct.", k: "그는 신이었다." }
+            ]
+        },
+        {
+            title: "기록 02: 준비 중",
+            lines: [{ h: "...", k: "다음 데이터 업데이트를 기다려주세요." }]
+        }
+    ];
+    function loadStory(index, el) {
+        if(el) {
+            document.querySelectorAll('.story-item').forEach(item => item.classList.remove('active'));
+            el.classList.add('active');
+        }
+        const story = stories[index];
+        let html = `<h2 style="font-weight:300; margin-bottom:40px; text-align:center; color:var(--accent-color);">${story.title}</h2>`;
+        story.lines.forEach(line => {
+            html += `
+                <div class="story-line">
+                    <div class="huiucl-text">${line.h}</div>
+                    <div class="korean-text">${line.k}</div>
+                </div>`;
+        });
+        document.getElementById('storyViewer').innerHTML = html;
     }
 </script>