Spaces:

kai774
/

api-integration-wizards

Running

App Files Files Community

kai774 commited on Oct 23, 2025

Commit

be85300

verified ·

1 Parent(s): 51dfcce

how i can give you API?

Browse files

Files changed (8) hide show

README.md +9 -5
about.html +107 -0
api-config.js +45 -0
components/footer.js +50 -0
components/navbar.js +80 -0
index.html +160 -19
script.js +206 -0
style.css +41 -18

README.md CHANGED Viewed

@@ -1,10 +1,14 @@
 ---
-title: Api Integration Wizards
-emoji: 👀
-colorFrom: gray
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: API Integration Wizards 🧙
+colorFrom: pink
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

about.html ADDED Viewed

	@@ -0,0 +1,107 @@

+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About - Hanzi Hunter</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#000000',
+                        secondary: '#DC2626'
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-black text-white min-h-screen flex flex-col">
+    <custom-navbar></custom-navbar>
+    <main class="flex-1 container mx-auto px-4 py-8">
+            <!-- Hero Section -->
+            <section class="text-center mb-12">
+                <h1 class="text-4xl md:text-6xl font-bold mb-4 bg-gradient-to-r from-white to-red-600 bg-clip-text text-transparent">
+                About Hanzi Hunter
+            </h1>
+            <p class="text-xl text-gray-400">Your ultimate Chinese vocabulary companion</p>
+            </section>
+            <!-- Content Section -->
+            <section class="max-w-4xl mx-auto">
+                <div class="bg-gray-900 rounded-2xl p-8 shadow-2xl border border-red-900">
+                    <div class="grid md:grid-cols-2 gap-8 items-center">
+                    <div>
+                        <h2 class="text-3xl font-bold mb-4">What is Hanzi Hunter?</h2>
+                        <p class="text-gray-300 mb-6">
+                            Hanzi Hunter is an intelligent tool designed to help Chinese language learners
+                            understand the complexity and usage of Chinese vocabulary.
+                        </p>
+                        <div class="space-y-4">
+                            <div class="flex items-start">
+                                <i data-feather="check-circle" class="w-5 h-5 text-red-500 mr-3 mt-1"></i>
+                                <div>
+                                    <h3 class="font-semibold text-white">HSK Level Detection</h3>
+                                    <p class="text-gray-400 text-sm">Instantly identify which official HSK level your vocabulary belongs to.</p>
+                                </div>
+                            </div>
+                            <div class="flex items-start">
+                                <i data-feather="check-circle" class="w-5 h-5 text-red-500 mr-3 mt-1"></i>
+                                <div>
+                                    <h3 class="font-semibold text-white">Usage Analysis</h3>
+                                    <p class="text-gray-400 text-sm">Learn whether words are formal, informal, common in speech, or mostly written.</p>
+                                </div>
+                            </div>
+                            <div class="flex items-start">
+                                <i data-feather="check-circle" class="w-5 h-5 text-red-500 mr-3 mt-1"></i>
+                                <div>
+                                    <h3 class="font-semibold text-white">Style Classification</h3>
+                                    <p class="text-gray-400 text-sm">Understand the appropriate context for using each word.</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="text-center">
+                        <i data-feather="compass" class="w-32 h-32 text-red-500 mx-auto"></i>
+                    </div>
+                </div>
+                <!-- Features Grid -->
+                <div class="mt-12 grid md:grid-cols-2 gap-6">
+                    <div class="bg-gray-800 p-6 rounded-xl border border-red-900">
+                        <i data-feather="target" class="w-8 h-8 text-red-500 mb-4"></i>
+                        <h3 class="text-xl font-bold mb-2">Smart Detection</h3>
+                        <p class="text-gray-400">Our algorithm analyzes Chinese characters and provides instant feedback on their HSK level and usage patterns.</p>
+                    </div>
+                    <div class="bg-gray-800 p-6 rounded-xl border border-red-900">
+                        <i data-feather="book" class="w-8 h-8 text-red-500 mb-4"></i>
+                        <h3 class="text-xl font-bold mb-2">Learning Focused</h3>
+                        <p class="text-gray-400">Designed specifically for Chinese language learners at all levels.</p>
+                    </div>
+                </div>
+            </section>
+        </main>
+    <custom-footer></custom-footer>
+    <!-- API Configuration -->
+    <script src="api-config.js"></script>
+    <!-- Component Scripts -->
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <!-- Main Script -->
+    <script src="script.js"></script>
+<!-- Feather Icons -->
+    <script>
+        feather.replace();
+    </script>
+</body>
+</html>

api-config.js ADDED Viewed

	@@ -0,0 +1,45 @@

+// API Configuration for Hanzi Hunter
+class APIConfig {
+    constructor() {
+        this.apis = {
+            // Free Chinese Dictionary API
+            dictionary: {
+                url: 'https://api.dictionaryapi.dev/api/v2/entries/zh/',
+                method: 'GET'
+            },
+            // HanziDB API for character information
+            hanzi: {
+                url: 'https://hanzi-db.herokuapp.com/api/characters/',
+                method: 'GET'
+            },
+            // Mock HSK API (you can replace with real API)
+            hsk: {
+                url: 'https://jsonplaceholder.typicode.com/posts',
+                method: 'GET'
+            },
+            // Backend API (replace with your actual backend URL)
+            backend: {
+                url: 'https://your-backend-api.com/api/',
+                method: 'POST'
+            }
+        };
+    }
+    // Method to set custom API endpoints
+    setAPI(name, url, method = 'GET') {
+        this.apis[name] = { url, method };
+    }
+    // Method to get API configuration
+    getAPI(name) {
+        return this.apis[name];
+    }
+    // Method to update all API configurations
+    updateAPIs(newConfigs) {
+        this.apis = { ...this.apis, ...newConfigs };
+    }
+}
+// Create global API config instance
+window.apiConfig = new APIConfig();

components/footer.js ADDED Viewed

	@@ -0,0 +1,50 @@

+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        footer {
+          background: #000000;
+          color: #a3a3a3;
+          padding: 2rem;
+          text-align: center;
+          margin-top: auto;
+          border-top: 1px solid #dc2626;
+        }
+        .footer-content {
+          max-width: 1200px;
+          margin: 0 auto;
+        }
+        .social-links {
+          display: flex;
+          justify-content: center;
+          gap: 1rem;
+          margin-bottom: 1rem;
+        }
+        .social-link {
+          color: #a3a3a3;
+          transition: all 0.3s ease;
+        }
+        .social-link:hover {
+          color: #dc2626;
+          transform: translateY(-2px);
+        }
+        .copyright {
+          font-size: 0.875rem;
+        }
+      </style>
+      <footer>
+        <div class="footer-content">
+          <div class="social-links">
+            <a href="#" class="social-link"><i data-feather="github"></i></a>
+            <a href="#" class="social-link"><i data-feather="twitter"></i></a>
+            <a href="#" class="social-link"><i data-feather="mail"></i></a>
+          </div>
+          <p class="copyright">&copy; 2024 Hanzi Hunter. All rights reserved.</p>
+        </div>
+      </footer>
+    `;
+  }
+}
+customElements.define('custom-footer', CustomFooter);

components/navbar.js ADDED Viewed

	@@ -0,0 +1,80 @@

+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        nav {
+          background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
+          padding: 1rem 2rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          border-bottom: 2px solid #dc2626;
+          box-shadow: 0 4px 6px -1px rgba(220, 38, 38, 0.1);
+        }
+        .logo {
+          color: white;
+          font-weight: bold;
+          font-size: 1.5rem;
+          background: linear-gradient(45deg, #ffffff, #dc2626);
+          background-clip: text;
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+        ul {
+          display: flex;
+          gap: 2rem;
+          list-style: none;
+          margin: 0;
+          padding: 0;
+        }
+        a {
+          color: #e5e5e5;
+          text-decoration: none;
+          transition: all 0.3s ease;
+          font-weight: 500;
+        }
+        a:hover {
+          color: #dc2626;
+          transform: translateY(-1px);
+        }
+        .nav-link {
+          position: relative;
+        }
+        .nav-link::after {
+          content: '';
+          position: absolute;
+          width: 0;
+          height: 2px;
+          bottom: -4px;
+          left: 0;
+          background: #dc2626;
+          transition: width 0.3s ease;
+        }
+        .nav-link:hover::after {
+          width: 100%;
+        }
+        @media (max-width: 768px) {
+          nav {
+            flex-direction: column;
+            gap: 1rem;
+            padding: 1rem;
+          }
+          ul {
+            gap: 1rem;
+          }
+        }
+      </style>
+      <nav>
+        <div class="logo">汉字猎人</div>
+        <ul>
+          <li><a href="/" class="nav-link">Home</a></li>
+          <li><a href="/about.html" class="nav-link">About</a></li>
+          <li><a href="/contact.html" class="nav-link">Contact</a></li>
+        </ul>
+      </nav>
+    `;
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);

index.html CHANGED Viewed

@@ -1,19 +1,160 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hanzi Hunter - Chinese Vocabulary Level Checker</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#000000',
+                        secondary: '#DC2626'
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-black text-white min-h-screen flex flex-col">
+    <custom-navbar></custom-navbar>
+    <main class="flex-1 container mx-auto px-4 py-8">
+        <!-- Hero Section -->
+        <section class="text-center mb-12">
+            <h1 class="text-4xl md:text-6xl font-bold mb-4 bg-gradient-to-r from-white to-red-600 bg-clip-text text-transparent">
+                汉字猎人
+            </h1>
+            <p class="text-xl text-gray-400 mb-8">Discover the secrets behind Chinese characters</p>
+        </section>
+        <!-- Main Input Section -->
+        <section class="max-w-2xl mx-auto mb-12">
+            <div class="bg-gray-900 rounded-2xl p-8 shadow-2xl border border-red-900">
+                <div class="flex items-center justify-center mb-6">
+                    <i data-feather="search" class="w-6 h-6 text-red-500 mr-3"></i>
+                    <h2 class="text-2xl font-bold">Check Your Chinese Vocabulary</h2>
+                </div>
+                <form id="wordForm" class="space-y-6">
+                    <div>
+                        <label for="chineseWord" class="block text-sm font-medium text-gray-300 mb-2">
+                            Enter a Chinese Word
+                        </label>
+                        <input
+                            type="text"
+                            id="chineseWord"
+                            placeholder="例如: 冒险, 你好, 学习..."
+                            class="w-full px-4 py-3 bg-gray-800 border border-red-900 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-all duration-200"
+                            required
+                        >
+                    </div>
+                    <button
+                        type="submit"
+                        class="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-4 rounded-lg transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50"
+                    >
+                        <div class="flex items-center justify-center">
+                            <i data-feather="zap" class="w-5 h-5 mr-2"></i>
+                            Analyze Word
+                        </div>
+                    </button>
+                </form>
+            </div>
+        </section>
+        <!-- Results Section -->
+        <section id="resultsSection" class="max-w-2xl mx-auto hidden">
+            <div class="bg-gray-900 rounded-2xl p-8 shadow-2xl border border-red-900">
+                <div class="flex items-center justify-between mb-6">
+                    <h3 class="text-2xl font-bold">Analysis Results</h3>
+                    <button id="clearResults" class="text-red-400 hover:text-red-300 transition-colors">
+                        <i data-feather="x" class="w-5 h-5"></i>
+                    </button>
+                </div>
+                <div id="results" class="space-y-4">
+                    <!-- Results will be populated here by JavaScript -->
+                </div>
+            </div>
+        </section>
+        <!-- API Configuration Section -->
+        <section class="max-w-2xl mx-auto mt-16">
+            <div class="bg-gray-900 rounded-2xl p-8 shadow-2xl border border-red-900">
+                <div class="flex items-center justify-center mb-6">
+                    <i data-feather="settings" class="w-6 h-6 text-red-500 mr-3"></i>
+                    <h2 class="text-2xl font-bold">API Configuration</h2>
+                </div>
+                <div class="space-y-4">
+                    <div class="bg-gray-800 rounded-lg p-4">
+                        <h3 class="text-lg font-semibold mb-2">How to Configure APIs</h3>
+                        <p class="text-gray-400 mb-4">
+                            To connect real APIs, update the configuration in <code class="bg-gray-700 px-2 py-1 rounded">api-config.js</code>
+                        </p>
+                        <div class="text-sm text-gray-500 space-y-2">
+                            <p>1. Open <code class="bg-gray-700 px-2 py-1 rounded">api-config.js</code> file</p>
+                        <p>2. Replace the placeholder URLs with your actual API endpoints</p>
+                        <p>3. Add any required API keys or authentication headers</p>
+                    </div>
+                </div>
+                <div class="mt-6 p-4 bg-yellow-900 border border-yellow-700 rounded-lg">
+                            <div class="flex items-start">
+                                <i data-feather="alert-triangle" class="w-5 h-5 text-yellow-400 mr-3 mt-1"></i>
+                            <div>
+                                <h4 class="font-semibold text-yellow-300">API Setup Required</h4>
+                                <p class="text-yellow-200 text-sm">Currently using demo data. Connect real APIs for live data.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Features Section -->
+        <section class="max-w-4xl mx-auto mt-16">
+            <h2 class="text-3xl font-bold text-center mb-12">Why Use Hanzi Hunter?</h2>
+            <div class="grid md:grid-cols-3 gap-8">
+                <div class="text-center p-6 bg-gray-900 rounded-xl border border-red-900">
+                    <i data-feather="award" class="w-12 h-12 text-red-500 mx-auto mb-4"></i>
+                <h3 class="text-xl font-bold mb-2">HSK Level Detection</h3>
+                    <p class="text-gray-400">Instantly identify which HSK level your word belongs to</p>
+                </div>
+                <div class="text-center p-6 bg-gray-900 rounded-xl border border-red-900">
+                    <i data-feather="message-circle" class="w-12 h-12 text-red-500 mx-auto mb-4"></i>
+                <h3 class="text-xl font-bold mb-2">Usage Analysis</h3>
+                    <p class="text-gray-400">Learn whether words are formal, informal, common or rare</p>
+                </div>
+                <div class="text-center p-6 bg-gray-900 rounded-xl border border-red-900">
+                    <i data-feather="book-open" class="w-12 h-12 text-red-500 mx-auto mb-4"></i>
+                <h3 class="text-xl font-bold mb-2">Quick Meanings</h3>
+                    <p class="text-gray-400">Get concise English definitions for better understanding</p>
+                </div>
+            </div>
+        </section>
+</main>
+    <custom-footer></custom-footer>
+    <!-- API Configuration -->
+    <script src="api-config.js"></script>
+    <!-- Component Scripts -->
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <!-- Main Script -->
+    <script src="script.js"></script>
+<!-- Feather Icons -->
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,206 @@

+// Shared JavaScript across all pages
+// HSK word database (simplified version - fallback)
+const hskDatabase = {
+    "你好": { level: 1, style: "Neutral", usage: "Common", meaning: "hello" },
+    "学习": { level: 1, style: "Neutral", usage: "Common", meaning: "study, learn" },
+    "谢谢": { level: 1, style: "Neutral", usage: "Common", meaning: "thank you" },
+    "再见": { level: 1, style: "Neutral", usage: "Common", meaning: "goodbye" },
+    "是": { level: 1, style: "Neutral", usage: "Common", meaning: "to be" },
+    "不": { level: 1, style: "Neutral", usage: "Common", meaning: "no, not" },
+    "我": { level: 1, style: "Neutral", usage: "Common", meaning: "I, me" },
+    "你": { level: 1, style: "Neutral", usage: "Common", meaning: "you" },
+    "好": { level: 1, style: "Neutral", usage: "Common", meaning: "good" },
+    "人": { level: 1, style: "Neutral", usage: "Common", meaning: "person" },
+    "冒险": { level: 4, style: "Neutral", usage: "Common", meaning: "adventure, take risks" },
+    "尴尬": { level: 5, style: "Neutral", usage: "Common", meaning: "embarrassed, awkward" },
+    "牛逼": { level: "Not in HSK", style: "Informal", usage: "Common", meaning: "awesome, amazing" },
+    "囧": { level: "Not in HSK", style: "Informal", usage: "Rare", meaning: "embarrassed, awkward" },
+    "饕餮": { level: "Not in HSK", style: "Formal", usage: "Rare", meaning: "gluttonous monster" },
+    "耄耋": { level: "Not in HSK", style: "Formal", usage: "Rare", meaning: "very old age" }
+};
+// DOM Elements
+const wordForm = document.getElementById('wordForm');
+const chineseWordInput = document.getElementById('chineseWord');
+const resultsSection = document.getElementById('resultsSection');
+const resultsDiv = document.getElementById('results');
+const clearResultsBtn = document.getElementById('clearResults');
+// Initialize the application
+document.addEventListener('DOMContentLoaded', function() {
+    console.log('Hanzi Hunter initialized');
+    // Form submission handler
+    wordForm.addEventListener('submit', function(e) {
+        e.preventDefault();
+        const word = chineseWordInput.value.trim();
+        if (word) {
+            analyzeWord(word);
+        }
+    });
+    // Clear results handler
+    clearResultsBtn.addEventListener('click', function() {
+        clearResults();
+    });
+    // Load any saved results from localStorage
+    loadSavedResults();
+});
+// Analyze the Chinese word
+async function analyzeWord(word) {
+    // Check if input is Chinese characters
+    if (!isChinese(word)) {
+        showError("Please enter a valid Chinese word.");
+        return;
+    }
+    try {
+        // Try to fetch from API first
+        const wordData = await fetchWordData(word);
+        displayResults(word, wordData);
+        saveResults(word, wordData);
+    } catch (error) {
+        console.error('API Error:', error);
+        // Fallback to local database
+        const localData = hskDatabase[word] || {
+            level: "Not in HSK",
+            style: "Neutral",
+            usage: "Rare",
+            meaning: "unknown meaning"
+        };
+        displayResults(word, localData);
+        saveResults(word, localData);
+    }
+}
+// Fetch word data from APIs
+async function fetchWordData(word) {
+    // You can implement multiple API calls here
+    // Example using dictionary API
+    try {
+        const response = await fetch(`${apiConfig.getAPI('dictionary').url}${encodeURIComponent(word)}`);
+        if (response.ok) {
+            const data = await response.json();
+            return processAPIData(data, word);
+        }
+    } catch (error) {
+        console.error('Dictionary API failed:', error);
+    }
+    // If no API works, throw error to trigger fallback
+    throw new Error('All APIs failed');
+}
+// Process API response data
+function processAPIData(apiData, word) {
+    // Process the API response and extract relevant information
+    // This is a placeholder - adjust based on your API response structure
+    return {
+        level: "Checking...",
+        style: "Neutral",
+        usage: "Common",
+        meaning: apiData[0]?.meanings?.[0]?.definitions?.[0]?.definition || "Meaning not found",
+        source: "API"
+    };
+}
+// Check if string contains Chinese characters
+function isChinese(str) {
+    return /[\u4e00-\u9fff]/.test(str);
+}
+// Display analysis results
+function displayResults(word, data) {
+    resultsSection.classList.remove('hidden');
+    resultsSection.classList.add('fade-in-up');
+    let warningText = '';
+    if (data.style === "Informal") {
+        warningText = '<p class="text-yellow-400 text-sm mt-2"><i data-feather="alert-triangle" class="w-4 h-4 inline mr-1"></i>This is casual spoken Chinese.</p>';
+    } else if (data.style === "Formal" || data.usage === "Rare") {
+        warningText = '<p class="text-orange-400 text-sm mt-2"><i data-feather="info" class="w-4 h-4 inline mr-1"></i>This word is mostly used in formal writing.</p>';
+    }
+    resultsDiv.innerHTML = `
+        <div class="bg-gray-800 rounded-lg p-4 border-l-4 border-red-500">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                    <p class="text-gray-400 text-sm">Word</p>
+                    <p class="text-2xl font-bold">${word}</p>
+                </div>
+                <div>
+                    <p class="text-gray-400 text-sm">HSK Level</p>
+                    <p class="text-xl font-semibold">${data.level}</p>
+                </div>
+                <div>
+                    <p class="text-gray-400 text-sm">Style</p>
+                    <p class="text-xl font-semibold">${data.style}</p>
+                </div>
+                <div>
+                    <p class="text-gray-400 text-sm">Usage</p>
+                    <p class="text-xl font-semibold">${data.usage}</p>
+                </div>
+                <div>
+                    <p class="text-gray-400 text-sm">Meaning</p>
+                    <p class="text-xl font-semibold">${data.meaning}</p>
+                </div>
+            </div>
+            ${warningText}
+        </div>
+    `;
+    // Update feather icons in the new content
+    feather.replace();
+    // Scroll to results
+    resultsSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
+}
+// Show error message
+function showError(message) {
+    resultsSection.classList.remove('hidden');
+    resultsDiv.innerHTML = `
+        <div class="bg-red-900 rounded-lg p-4 border-l-4 border-red-500">
+            <div class="flex items-center">
+                <i data-feather="alert-circle" class="w-6 h-6 text-red-300 mr-3"></i>
+                <p class="text-red-300">${message}</p>
+            </div>
+        </div>
+    `;
+    feather.replace();
+}
+// Clear results
+function clearResults() {
+    resultsSection.classList.add('hidden');
+    chineseWordInput.value = '';
+    chineseWordInput.focus();
+    localStorage.removeItem('lastWordAnalysis');
+}
+// Save results to localStorage
+function saveResults(word, data) {
+    const analysis = {
+        word: word,
+        data: data,
+        timestamp: new Date().toISOString()
+    };
+    localStorage.setItem('lastWordAnalysis', JSON.stringify(analysis));
+}
+// Load saved results from localStorage
+function loadSavedResults() {
+    const saved = localStorage.getItem('lastWordAnalysis');
+    if (saved) {
+        const analysis = JSON.parse(saved);
+        displayResults(analysis.word, analysis.data);
+    }
+}
+// Theme management (for future use)
+function toggleTheme() {
+    document.documentElement.classList.toggle('dark');
+}

style.css CHANGED Viewed

@@ -1,28 +1,51 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* Shared styles across all pages */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 body {
+    font-family: 'Inter', sans-serif;
+}
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+::-webkit-scrollbar-track {
+    background: #1a1a1a;
+}
+::-webkit-scrollbar-thumb {
+    background: #dc2626;
+    border-radius: 4px;
 }
+::-webkit-scrollbar-thumb:hover {
+    background: #b91c1c;
 }
+/* Smooth transitions for theme switching */
+* {
+    transition: background-color 0.2s ease, border-color 0.2s ease;
 }
+/* Custom animations */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
+.fade-in-up {
+    animation: fadeInUp 0.5s ease-out;
 }
+/* Focus styles for accessibility */
+input:focus, button:focus {
+    outline: 2px solid #dc2626;
+    outline-offset: 2px;
+}