Update: README theme style (terminal + ASCII art)

index.html

@@ -14,54 +14,149 @@
         }
 
         body {
-            background: linear-gradient(135deg, #0d1117 0%, #161b22 50%, #0d1117 100%);
+            background: #0d1117;
             min-height: 100vh;
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
             padding: 20px;
+            color: #c9d1d9;
         }
 
-        .captcha-container {
-            background: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
-            border: 2px solid #30363d;
-            border-radius: 16px;
-            padding: 50px;
-            max-width: 650px;
+        /* ASCII 아트 헤더 */
+        .ascii-header {
+            text-align: center;
+            margin-bottom: 30px;
+        }
+
+        .ascii-art {
+            color: #00ff00;
+            font-size: 10px;
+            line-height: 1.2;
+            white-space: pre;
+            text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
+            margin-bottom: 15px;
+        }
+
+        @media (max-width: 600px) {
+            .ascii-art {
+                font-size: 6px;
+            }
+        }
+
+        /* 터미널 프레임 */
+        .terminal-frame {
+            background: #0d1117;
+            border: 2px solid #00ff00;
+            border-radius: 8px;
+            max-width: 700px;
             width: 100%;
             box-shadow:
-                0 0 60px rgba(0, 255, 0, 0.1),
-                0 0 100px rgba(255, 0, 255, 0.05);
+                0 0 30px rgba(0, 255, 0, 0.2),
+                inset 0 0 60px rgba(0, 255, 0, 0.03);
+            overflow: hidden;
         }
 
-        .captcha-header {
-            text-align: center;
-            margin-bottom: 40px;
+        .terminal-header {
+            background: #161b22;
+            padding: 12px 20px;
+            border-bottom: 1px solid #30363d;
+            display: flex;
+            align-items: center;
+            gap: 10px;
         }
 
-        .captcha-header h1 {
-            color: #00ff00;
-            font-size: 32px;
-            margin: 0;
-            text-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
-            letter-spacing: 2px;
+        .terminal-dots {
+            display: flex;
+            gap: 8px;
+        }
+
+        .terminal-dot {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
         }
 
-        .captcha-header p {
+        .terminal-dot.red { background: #ff5f56; }
+        .terminal-dot.yellow { background: #ffbd2e; }
+        .terminal-dot.green { background: #27c93f; }
+
+        .terminal-title {
             color: #8b949e;
+            font-size: 13px;
+            margin-left: 15px;
+        }
+
+        .terminal-body {
+            padding: 30px;
+        }
+
+        /* 터미널 라인들 */
+        .terminal-line {
+            margin-bottom: 15px;
             font-size: 14px;
-            margin-top: 10px;
+        }
+
+        .terminal-line .prompt {
+            color: #00ff00;
+        }
+
+        .terminal-line .command {
+            color: #00ffff;
+        }
+
+        .terminal-line .comment {
+            color: #6e7681;
+        }
+
+        /* 로딩 바 */
+        .loading-bar {
+            background: #21262d;
+            border: 1px solid #30363d;
+            border-radius: 4px;
+            height: 24px;
+            margin: 20px 0;
+            overflow: hidden;
+            position: relative;
+        }
+
+        .loading-progress {
+            background: linear-gradient(90deg, #00ff00, #00ffff, #ff00ff);
+            height: 100%;
+            width: 0%;
+            transition: width 0.5s ease;
+            box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
+        }
+
+        .loading-text {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            color: #0d1117;
+            font-weight: bold;
+            font-size: 12px;
+            mix-blend-mode: difference;
+        }
+
+        /* CAPTCHA 박스 */
+        .captcha-section {
+            background: #161b22;
+            border: 1px solid #30363d;
+            border-radius: 8px;
+            padding: 25px;
+            margin: 25px 0;
         }
 
         .captcha-box {
             display: flex;
             align-items: center;
-            gap: 25px;
+            gap: 20px;
             background: #21262d;
             border: 2px solid #30363d;
-            border-radius: 12px;
-            padding: 25px 30px;
+            border-radius: 8px;
+            padding: 20px 25px;
             cursor: pointer;
             transition: all 0.3s ease;
             user-select: none;
@@ -69,41 +164,44 @@
 
         .captcha-box:hover {
             border-color: #00ff00;
-            box-shadow: 0 0 30px rgba(0, 255, 0, 0.3);
-            transform: translateY(-2px);
+            box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
         }
 
         .captcha-box.checked {
             border-color: #00ff00;
             background: linear-gradient(135deg, #21262d 0%, #0d1117 100%);
-            box-shadow:
-                0 0 40px rgba(0, 255, 0, 0.4),
-                inset 0 0 30px rgba(0, 255, 0, 0.05);
         }
 
         .checkbox {
-            width: 40px;
-            height: 40px;
+            width: 36px;
+            height: 36px;
             border: 3px solid #30363d;
-            border-radius: 8px;
+            border-radius: 6px;
             display: flex;
             align-items: center;
             justify-content: center;
             transition: all 0.3s ease;
             flex-shrink: 0;
             background: #0d1117;
+            font-size: 12px;
+            color: #30363d;
+        }
+
+        .captcha-box:hover .checkbox {
+            border-color: #00ff00;
+            color: #00ff00;
         }
 
         .captcha-box.checked .checkbox {
             background: #00ff00;
             border-color: #00ff00;
-            box-shadow: 0 0 20px rgba(0, 255, 0, 0.6);
+            color: #0d1117;
+            box-shadow: 0 0 15px rgba(0, 255, 0, 0.6);
         }
 
         .checkmark {
             display: none;
-            color: #0d1117;
-            font-size: 24px;
+            font-size: 20px;
             font-weight: bold;
         }
 
@@ -112,6 +210,14 @@
             animation: checkPop 0.3s ease;
         }
 
+        .captcha-box .checkbox-empty {
+            display: block;
+        }
+
+        .captcha-box.checked .checkbox-empty {
+            display: none;
+        }
+
         @keyframes checkPop {
             0% { transform: scale(0); }
             50% { transform: scale(1.3); }
@@ -124,7 +230,7 @@
 
         .captcha-text h2 {
             color: #c9d1d9;
-            font-size: 22px;
+            font-size: 18px;
             margin: 0;
             transition: all 0.3s ease;
         }
@@ -136,102 +242,85 @@
 
         .captcha-text p {
             color: #8b949e;
-            font-size: 13px;
-            margin: 8px 0 0 0;
+            font-size: 12px;
+            margin: 5px 0 0 0;
         }
 
-        .yeji-logo {
-            color: #ff00ff;
-            font-size: 20px;
+        .yeji-badge {
+            background: linear-gradient(135deg, #ff00ff, #9d00ff);
+            color: white;
+            padding: 6px 14px;
+            border-radius: 4px;
+            font-size: 12px;
             font-weight: bold;
-            text-shadow: 0 0 15px rgba(255, 0, 255, 0.6);
-            letter-spacing: 3px;
+            letter-spacing: 2px;
         }
 
-        .status-text {
-            text-align: center;
-            margin-top: 30px;
-            padding: 20px;
-            border-radius: 10px;
-            font-size: 14px;
-            opacity: 0;
-            transform: translateY(10px);
-            transition: all 0.5s ease;
+        /* 데이터셋 레지스트리 */
+        .registry-table {
+            width: 100%;
+            border-collapse: collapse;
+            font-size: 12px;
+            margin-top: 20px;
+            display: none;
         }
 
-        .status-text.show {
-            opacity: 1;
-            transform: translateY(0);
+        .registry-table.show {
+            display: table;
+            animation: fadeIn 0.5s ease;
         }
 
-        .status-text.verified {
-            background: rgba(0, 255, 0, 0.1);
-            border: 1px solid #00ff00;
-            color: #00ff00;
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
         }
 
-        .terminal-text {
-            text-align: center;
-            margin-top: 25px;
-            color: #8b949e;
-            font-size: 13px;
+        .registry-table th,
+        .registry-table td {
+            padding: 10px 15px;
+            text-align: left;
+            border: 1px solid #30363d;
         }
 
-        .terminal-text code {
+        .registry-table th {
             background: #21262d;
-            padding: 5px 12px;
-            border-radius: 6px;
             color: #00ffff;
+            font-weight: normal;
         }
 
-        .datasets-link {
-            text-align: center;
-            margin-top: 40px;
-            padding-top: 30px;
-            border-top: 1px solid #30363d;
+        .registry-table td {
+            background: #161b22;
         }
 
-        .datasets-link a {
-            display: inline-block;
-            background: linear-gradient(135deg, #ff00ff 0%, #9d00ff 100%);
-            color: white;
-            text-decoration: none;
-            padding: 12px 30px;
-            border-radius: 8px;
-            font-weight: bold;
-            transition: all 0.3s ease;
-            box-shadow: 0 0 20px rgba(255, 0, 255, 0.3);
+        .registry-table .status-online {
+            color: #00ff00;
         }
 
-        .datasets-link a:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 0 40px rgba(255, 0, 255, 0.5);
+        .registry-table a {
+            color: #ff00ff;
+            text-decoration: none;
         }
 
-        .stats {
-            display: flex;
-            justify-content: center;
-            gap: 30px;
-            margin-top: 20px;
-            flex-wrap: wrap;
+        .registry-table a:hover {
+            text-decoration: underline;
         }
 
-        .stat {
+        /* 푸터 */
+        .footer {
             text-align: center;
-        }
-
-        .stat-value {
-            color: #00ffff;
-            font-size: 24px;
-            font-weight: bold;
-        }
-
-        .stat-label {
+            margin-top: 25px;
+            padding-top: 20px;
+            border-top: 1px solid #30363d;
             color: #8b949e;
             font-size: 12px;
-            margin-top: 5px;
         }
 
+        .footer a {
+            color: #ff00ff;
+            text-decoration: none;
+        }
+
+        /* 리셋 버튼 */
         .reset-btn {
             position: fixed;
             bottom: 20px;
@@ -274,45 +363,115 @@
     </style>
 </head>
 <body>
-    <div class="captcha-container">
-        <div class="captcha-header">
-            <h1>🤖 YEJI VERIFICATION</h1>
-            <p>Fortune-Telling AI Dataset Access</p>
+    <!-- ASCII 아트 로고 -->
+    <div class="ascii-header">
+        <pre class="ascii-art">
+██╗   ██╗███████╗     ██╗██╗
+╚██╗ ██╔╝██╔════╝     ██║██║
+ ╚████╔╝ █████╗       ██║██║
+  ╚██╔╝  ██╔══╝  ██   ██║██║
+   ██║   ███████╗╚█████╔╝██║
+   ╚═╝   ╚══════╝ ╚════╝ ╚═╝
+        </pre>
+        <div style="color: #8b949e; font-size: 13px;">운명을 읽는 AI · Fortune-Telling LLM</div>
+    </div>
+
+    <!-- 터미널 프레임 -->
+    <div class="terminal-frame">
+        <div class="terminal-header">
+            <div class="terminal-dots">
+                <div class="terminal-dot red"></div>
+                <div class="terminal-dot yellow"></div>
+                <div class="terminal-dot green"></div>
+            </div>
+            <div class="terminal-title">yeji@huggingface: ~/verification</div>
         </div>
 
-        <div class="captcha-box" id="captcha-box" onclick="verifyCaptcha()">
-            <div class="checkbox">
-                <span class="checkmark">✓</span>
+        <div class="terminal-body">
+            <!-- 터미널 라인들 -->
+            <div class="terminal-line">
+                <span class="prompt">$</span> <span class="command">./verify_robot.sh</span>
             </div>
-            <div class="captcha-text">
-                <h2>YES, I'M A ROBOT</h2>
-                <p>Crafted BY AI, FOR AI, SERVING HUMANS</p>
+            <div class="terminal-line">
+                <span class="comment"># Initializing YEJI Fortune-Telling Dataset Access...</span>
             </div>
-            <div class="yeji-logo">YEJI</div>
-        </div>
 
-        <div class="status-text" id="status-text"></div>
+            <!-- 로딩 바 -->
+            <div class="loading-bar">
+                <div class="loading-progress" id="loading-progress"></div>
+                <div class="loading-text" id="loading-text">LOADING...</div>
+            </div>
 
-        <div class="terminal-text">
-            <code id="terminal-code">> AWAITING ROBOT VERIFICATION...</code>
-        </div>
+            <!-- CAPTCHA 섹션 -->
+            <div class="captcha-section">
+                <div class="terminal-line" style="margin-bottom: 15px;">
+                    <span class="prompt">></span> <span id="captcha-prompt">ROBOT VERIFICATION REQUIRED</span>
+                </div>
 
-        <div class="datasets-link" id="datasets-link" style="display: none;">
-            <a href="https://huggingface.co/datasets/tellang/yeji-meta" target="_blank">
-                🤗 ACCESS DATASETS
-            </a>
-            <div class="stats">
-                <div class="stat">
-                    <div class="stat-value">306K+</div>
-                    <div class="stat-label">SAMPLES</div>
+                <div class="captcha-box" id="captcha-box" onclick="verifyCaptcha()">
+                    <div class="checkbox">
+                        <span class="checkbox-empty">[ ]</span>
+                        <span class="checkmark">✓</span>
+                    </div>
+                    <div class="captcha-text">
+                        <h2>YES, I'M A ROBOT</h2>
+                        <p>Crafted BY AI, FOR AI, SERVING HUMANS</p>
+                    </div>
+                    <div class="yeji-badge">YEJI</div>
                 </div>
-                <div class="stat">
-                    <div class="stat-value">4</div>
-                    <div class="stat-label">DOMAINS</div>
+            </div>
+
+            <!-- 데이터셋 레지스트리 테이블 -->
+            <table class="registry-table" id="registry-table">
+                <thead>
+                    <tr>
+                        <th>ID</th>
+                        <th>REPOSITORY</th>
+                        <th>TYPE</th>
+                        <th>SIZE</th>
+                        <th>STATUS</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>01</td>
+                        <td><a href="https://huggingface.co/datasets/tellang/yeji-bazi-translated-ko" target="_blank">yeji-bazi-translated-ko</a></td>
+                        <td>TRAINING</td>
+                        <td>263K</td>
+                        <td class="status-online">● VERIFIED</td>
+                    </tr>
+                    <tr>
+                        <td>02</td>
+                        <td><a href="https://huggingface.co/datasets/tellang/yeji-processed" target="_blank">yeji-processed</a></td>
+                        <td>TRAINING</td>
+                        <td>43.7K</td>
+                        <td class="status-online">● VERIFIED</td>
+                    </tr>
+                    <tr>
+                        <td>03</td>
+                        <td><a href="https://huggingface.co/datasets/tellang/yeji-iching" target="_blank">yeji-iching</a></td>
+                        <td>REFERENCE</td>
+                        <td>64+</td>
+                        <td class="status-online">● VERIFIED</td>
+                    </tr>
+                    <tr>
+                        <td>04</td>
+                        <td><a href="https://huggingface.co/datasets/tellang/yeji-meta" target="_blank">yeji-meta</a></td>
+                        <td>HUB</td>
+                        <td>-</td>
+                        <td class="status-online">● ACTIVE</td>
+                    </tr>
+                </tbody>
+            </table>
+
+            <!-- 푸터 -->
+            <div class="footer">
+                <div id="footer-text" style="display: none;">
+                    <span class="prompt">$</span> echo "ACCESS GRANTED" <br><br>
+                    <a href="https://huggingface.co/datasets/tellang/yeji-meta" target="_blank">🤗 PROCEED TO DATASETS →</a>
                 </div>
-                <div class="stat">
-                    <div class="stat-value">8</div>
-                    <div class="stat-label">DATASETS</div>
+                <div id="waiting-text">
+                    <span style="color: #00ffff;">Awaiting verification...</span>
                 </div>
             </div>
         </div>
@@ -323,33 +482,46 @@
     <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.2/dist/confetti.browser.min.js"></script>
 
     <script>
-        const robotEmojis = ['⚙️', '🔧', '🔩', '🛠️', '🤖', '🦾', '🦿', '⚡', '🔌', '💾', '🖥️', '⌨️', '🔋', '📡', '🛸', '💥', '✨', '🔮'];
+        const robotEmojis = ['⚙️', '🔧', '🔩', '🛠️', '🤖', '🦾', '🦿', '⚡', '🔌', '💾', '🖥️', '⌨️', '🔋', '📡', '🛸', '💥', '✨'];
         let isVerified = false;
 
+        // 초기 로딩 애니메이션
+        window.onload = function() {
+            const progress = document.getElementById('loading-progress');
+            const loadingText = document.getElementById('loading-text');
+
+            setTimeout(() => {
+                progress.style.width = '100%';
+                loadingText.textContent = 'READY';
+            }, 500);
+        };
+
         function verifyCaptcha() {
             if (isVerified) return;
 
             const box = document.getElementById('captcha-box');
-            const status = document.getElementById('status-text');
-            const terminal = document.getElementById('terminal-code');
-            const datasetsLink = document.getElementById('datasets-link');
+            const prompt = document.getElementById('captcha-prompt');
+            const registry = document.getElementById('registry-table');
+            const footerText = document.getElementById('footer-text');
+            const waitingText = document.getElementById('waiting-text');
 
             // 체크 상태로 변경
             box.classList.add('checked');
             isVerified = true;
 
-            // 터미널 텍스트 업데이트
-            terminal.textContent = '> VERIFICATION COMPLETE ✓';
-            terminal.style.color = '#00ff00';
+            // 텍스트 업데이트
+            prompt.textContent = 'VERIFICATION COMPLETE ✓';
+            prompt.style.color = '#00ff00';
 
-            // 상태 텍스트 표시
-            status.textContent = '☑ ROBOT VERIFIED - ACCESS GRANTED TO 306K+ FORTUNE-TELLING SAMPLES';
-            status.classList.add('show', 'verified');
+            // 레지스트리 테이블 표시
+            setTimeout(() => {
+                registry.classList.add('show');
+            }, 500);
 
-            // 데이터셋 링크 표시
+            // 푸터 업데이트
             setTimeout(() => {
-                datasetsLink.style.display = 'block';
-                datasetsLink.style.animation = 'fadeIn 0.5s ease';
+                waitingText.style.display = 'none';
+                footerText.style.display = 'block';
             }, 1000);
 
             // 🎉 파티클 폭발!
@@ -361,7 +533,6 @@
             const duration = 3000;
             const end = Date.now() + duration;
 
-            // 첫 번째 폭발 - 중앙에서
             confetti({
                 particleCount: 150,
                 spread: 120,
@@ -371,14 +542,12 @@
                 scalar: 1.2,
             });
 
-            // 연속 폭발
             const interval = setInterval(function() {
                 if (Date.now() > end) {
                     clearInterval(interval);
                     return;
                 }
 
-                // 왼쪽에서
                 confetti({
                     particleCount: 40,
                     angle: 60,
@@ -387,7 +556,6 @@
                     colors: ['#00ff00', '#ff00ff', '#00ffff'],
                 });
 
-                // 오른쪽에서
                 confetti({
                     particleCount: 40,
                     angle: 120,
@@ -399,7 +567,6 @@
         }
 
         function fireEmojiConfetti() {
-            // 이모지 파티클 생성
             for (let i = 0; i < 25; i++) {
                 setTimeout(() => {
                     createFloatingEmoji(robotEmojis[Math.floor(Math.random() * robotEmojis.length)]);
@@ -417,21 +584,22 @@
             el.style.animationDuration = (1.5 + Math.random() * 1.5) + 's';
 
             document.body.appendChild(el);
-
             setTimeout(() => el.remove(), 2500);
         }
 
         function resetCaptcha() {
             const box = document.getElementById('captcha-box');
-            const status = document.getElementById('status-text');
-            const terminal = document.getElementById('terminal-code');
-            const datasetsLink = document.getElementById('datasets-link');
+            const prompt = document.getElementById('captcha-prompt');
+            const registry = document.getElementById('registry-table');
+            const footerText = document.getElementById('footer-text');
+            const waitingText = document.getElementById('waiting-text');
 
             box.classList.remove('checked');
-            status.classList.remove('show', 'verified');
-            terminal.textContent = '> AWAITING ROBOT VERIFICATION...';
-            terminal.style.color = '#00ffff';
-            datasetsLink.style.display = 'none';
+            prompt.textContent = 'ROBOT VERIFICATION REQUIRED';
+            prompt.style.color = '#c9d1d9';
+            registry.classList.remove('show');
+            footerText.style.display = 'none';
+            waitingText.style.display = 'block';
             isVerified = false;
         }
     </script>