<div class="character-dictionary">
    <div class="search-section">
        <form id="character-search-form">
            <input type="text" id="character-input" placeholder="请输入要查询的汉字" maxlength="1">
            <button type="submit">查询</button>
        </form>
    </div>
    
    <div id="character-result" class="character-result" style="display: none;">
        <!-- 字符基本信息部分 -->
        <div class="character-basic-info">
            <div class="character-display">
                <h1 id="character-title"></h1>
            </div>
            
            <div class="character-details">
                <p><strong>拼音：</strong><span id="character-pinyin"></span></p>
                <p><strong>部首：</strong><span id="character-radical"></span></p>
                <p><strong>笔画数：</strong><span id="character-stroke-count"></span></p>
                <p><strong>繁体字：</strong><span id="character-traditional-form"></span></p>
                <p><strong>异体字：</strong><span id="character-variants"></span></p>
            </div>
        </div>
        
        <!-- 字符解释部分 -->
        <div class="character-explanations">
            <div class="tab-container">
                <ul class="tab-header">
                    <li class="tab-link active" data-tab="basic-explanation"><a href="#basic-explanation">基本解释</a></li>
                    <li class="tab-link" data-tab="detailed-explanation"><a href="#detailed-explanation">详细解释</a></li>
                    <li class="tab-link" data-tab="guoyu-dictionary"><a href="#guoyu-dictionary">国语辞典</a></li>
                    <li class="tab-link" data-tab="kangxi-dictionary"><a href="#kangxi-dictionary">康熙字典</a></li>
                    <li class="tab-link" data-tab="shuowen-jiezi"><a href="#shuowen-jiezi">说文解字</a></li>
                    <li class="tab-link" data-tab="dialects"><a href="#dialects">音韵方言</a></li>
                    <li class="tab-link" data-tab="etymology"><a href="#etymology">字源字形</a></li>
                    <li class="tab-link" data-tab="other-meanings"><a href="#other-meanings">其他释义</a></li>
                </ul>

                <div class="tab-content">
                    <div id="basic-explanation" class="tab-pane active" role="region" aria-labelledby="basic-explanation-label">
                        <h3 id="basic-explanation-label">基本解释</h3>
                        <div id="character-content"></div>
                    </div>
                    
                    <div id="detailed-explanation" class="tab-pane" role="region" aria-labelledby="detailed-explanation-label">
                        <h3 id="detailed-explanation-label">详细解释</h3>
                        <div id="character-detailed-explanation"></div>
                    </div>
                    
                    <div id="guoyu-dictionary" class="tab-pane" role="region" aria-labelledby="guoyu-dictionary-label">
                        <h3 id="guoyu-dictionary-label">国语辞典</h3>
                        <div id="character-guoyu-dictionary"></div>
                    </div>
                    
                    <div id="kangxi-dictionary" class="tab-pane" role="region" aria-labelledby="kangxi-dictionary-label">
                        <h3 id="kangxi-dictionary-label">康熙字典</h3>
                        <div id="character-kangxi-dictionary"></div>
                    </div>
                    
                    <div id="shuowen-jiezi" class="tab-pane" role="region" aria-labelledby="shuowen-jiezi-label">
                        <h3 id="shuowen-jiezi-label">说文解字</h3>
                        <div id="character-shuowen-jiezi"></div>
                    </div>
                    
                    <div id="dialects" class="tab-pane" role="region" aria-labelledby="dialects-label">
                        <h3 id="dialects-label">音韵方言</h3>
                        <div id="character-dialects"></div>
                    </div>
                    
                    <div id="etymology" class="tab-pane" role="region" aria-labelledby="etymology-label">
                        <h3 id="etymology-label">字源字形</h3>
                        <div id="character-etymology"></div>
                    </div>
                    
                    <div id="other-meanings" class="tab-pane" role="region" aria-labelledby="other-meanings-label">
                        <h3 id="other-meanings-label">其他释义</h3>
                        <div id="character-other-meanings"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div id="character-not-found" class="character-not-found" style="display: none;">
        <p>未找到相关汉字，请检查输入是否正确。</p>
    </div>
    
    <div id="loading-message" class="loading-message" style="display: none;">
        <p>正在查询中，请稍候...</p>
    </div>
</div>