yuanzhe
/
xiangsu


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>像素头像生成器</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="phone-container">
        <!-- 生成界面 -->
        <div id="generate-screen" class="screen active">
            <header>
                <h1>像素头像生成器</h1>
            </header>
            
            <main>
                <div class="canvas-container">
                    <canvas id="avatarCanvas" width="128" height="128"></canvas>
                    <div class="canvas-overlay">
                        <button id="regenerateBtn" class="action-btn primary">重新生成</button>
                    </div>
                </div>
                
                <div class="customization-panel">
                    <h3>定制选项</h3>
                    
                    <div class="option-group">
                        <label>颜色主题</label>
                        <div class="color-themes">
                            <button class="theme-btn" data-theme="pastel">柔和</button>
                            <button class="theme-btn" data-theme="vibrant">鲜艳</button>
                            <button class="theme-btn" data-theme="dark">暗黑</button>
                            <button class="theme-btn" data-theme="monochrome">单色</button>
                        </div>
                    </div>
                    
                    <div class="option-group">
                        <label>风格</label>
                        <div class="style-options">
                            <button class="style-btn" data-style="cartoon">卡通</button>
                            <button class="style-btn" data-style="pixelart">像素风</button>
                            <button class="style-btn" data-style="minimal">简约</button>
                        </div>
                    </div>
                    
                    <div class="option-group">
                        <label>社交媒体格式</label>
                        <div class="social-options">
                            <button class="theme-btn" data-format="facebook">FB</button>
                            <button class="theme-btn" data-format="twitter">X</button>
                            <button class="theme-btn" data-format="instagram">IG</button>
                            <button class="theme-btn" data-format="linkedin">IN</button>
                        </div>
                    </div>
                    
                    <div class="option-group">
                        <label>细节</label>
                        <div class="detail-options">
                            <button class="detail-btn" data-detail="eyes">眼睛</button>
                            <button class="detail-btn" data-detail="nose">鼻子</button>
                            <button class="detail-btn" data-detail="mouth">嘴巴</button>
                            <button class="detail-btn" data-detail="accessories">装饰</button>
                        </div>
                    </div>
                    
                    <div class="option-group">
                        <label>随机种子</label>
                        <div class="seed-input-group">
                            <input type="text" id="seedInput" placeholder="输入种子或留空随机" maxlength="20">
                            <button id="copySeedBtn" class="action-btn small">复制</button>
                            <button id="randomSeedBtn" class="action-btn small">随机</button>
                        </div>
                    </div>
                </div>
                
                <div class="bottom-actions">
                    <button id="saveBtn" class="action-btn">保存</button>
                    <button id="editBtn" class="action-btn">编辑</button>
                    <button id="favoriteBtn" class="action-btn">收藏</button>
                    <button id="downloadBtn" class="action-btn primary">下载</button>
                </div>
            </main>
        </div>
        
        <!-- 收藏界面 -->
        <div id="favorites-screen" class="screen">
            <header>
                <h1>我的收藏</h1>
                <button id="backToGenerate" class="back-btn">←</button>
            </header>
            
            <main>
                <div id="favorites-grid" class="favorites-grid">
                    <!-- 收藏的头像将动态添加到这里 -->
                </div>
            </main>
        </div>
        
        <!-- 设置界面 -->
        <div id="settings-screen" class="screen">
            <header>
                <h1>设置</h1>
                <button id="backToGenerate2" class="back-btn">←</button>
            </header>
            
            <main>
                <div class="settings-panel">
                    <div class="setting-item">
                        <label>画布大小</label>
                        <select id="canvasSize">
                            <option value="64">64x64</option>
                            <option value="128" selected>128x128</option>
                            <option value="256">256x256</option>
                            <option value="512">512x512</option>
                        </select>
                    </div>
                    
                    <div class="setting-item">
                        <label>社交媒体格式</label>
                        <select id="socialMediaFormat">
                            <option value="custom" selected>自定义</option>
                            <option value="facebook">Facebook (180x180)</option>
                            <option value="twitter">Twitter/X (400x400)</option>
                            <option value="instagram">Instagram (320x320)</option>
                            <option value="linkedin">LinkedIn (400x400)</option>
                            <option value="youtube">YouTube (800x800)</option>
                        </select>
                    </div>
                    
                    <div class="setting-item">
                        <label>像素大小</label>
                        <select id="pixelSize">
                            <option value="4">2x2</option>
                            <option value="8" selected>8x8</option>
                            <option value="16">16x16</option>
                        </select>
                    </div>
                    
                    <div class="setting-item">
                        <label>自动保存</label>
                        <input type="checkbox" id="autoSave" checked>
                    </div>
                    
                    <div class="setting-item">
                        <label>界面主题</label>
                        <select id="appTheme">
                            <option value="light" selected>浅色</option>
                            <option value="dark">深色</option>
                        </select>
                    </div>
                    
                    <button id="clearFavorites" class="action-btn danger">清空收藏</button>
                </div>
            </main>
        </div>
        
        <!-- 编辑界面 -->
        <div id="edit-screen" class="screen">
            <header>
                <h1>编辑头像</h1>
                <button id="backToGenerate3" class="back-btn">←</button>
            </header>
            
            <main>
                <div class="canvas-container">
                    <canvas id="editCanvas" width="128" height="128"></canvas>
                </div>
                
                <div class="edit-tools">
                    <div class="option-group">
                        <label>颜色选择</label>
                        <input type="color" id="colorPicker" value="#000000">
                    </div>
                    
                    <div class="option-group">
                        <label>画笔大小</label>
                        <select id="brushSize">
                            <option value="1" selected>1x1</option>
                            <option value="2">2x2</option>
                            <option value="4">4x4</option>
                        </select>
                    </div>
                    
                    <div class="option-group">
                        <label>工具</label>
                        <div class="tool-buttons">
                            <button id="brushTool" class="tool-btn active" data-tool="brush">画笔</button>
                            <button id="eraserTool" class="tool-btn" data-tool="eraser">橡皮</button>
                            <button id="fillTool" class="tool-btn" data-tool="fill">填充</button>
                        </div>
                    </div>
                    
                    <div class="edit-actions">
                        <button id="undoBtn" class="action-btn">撤销</button>
                        <button id="redoBtn" class="action-btn">重做</button>
                        <button id="saveEditBtn" class="action-btn primary">保存</button>
                    </div>
                </div>
            </main>
        </div>
        
        <!-- 历史记录界面 -->
        <div id="history-screen" class="screen">
            <header>
                <h1>历史记录</h1>
                <button id="backToGenerate4" class="back-btn">←</button>
            </header>
            
            <main>
                <div id="history-grid" class="history-grid">
                    <!-- 历史记录将动态添加到这里 -->
                </div>
                
                <div class="history-actions">
                    <button id="clearHistoryBtn" class="action-btn danger">清空历史</button>
                </div>
            </main>
        </div>
        
        <!-- 底部导航 -->
        <nav class="bottom-nav">
            <button id="nav-generate" class="nav-btn active" data-screen="generate-screen">生成</button>
            <button id="nav-history" class="nav-btn" data-screen="history-screen">历史</button>
            <button id="nav-favorites" class="nav-btn" data-screen="favorites-screen">收藏</button>
            <button id="nav-settings" class="nav-btn" data-screen="settings-screen">设置</button>
        </nav>
    </div>
    
    <script src="script.js"></script>
</body>
</html>