-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
90 lines (89 loc) · 6.67 KB
/
index.html
File metadata and controls
90 lines (89 loc) · 6.67 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Creative Abstract Avatar Generator</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="lang-switcher">
<button id="langSwitchBtn" type="button">中文 / English</button>
</div>
<h1 id="mainTitle" data-en="Creative Abstract Avatar Generator" data-zh="創意抽象頭像產生器">Creative Abstract Avatar Generator</h1>
<p id="descText" data-en="Enter your name or username to generate a unique, abstract avatar." data-zh="輸入您的名字或用戶名，產生獨一無二的抽象頭像。">Enter your name or username to generate a unique, abstract avatar.</p>
<input type="text" id="nameInput" placeholder="Enter your name..." data-en="Enter your name..." data-zh="請輸入您的名字...">
<div id="avatarCanvasContainer" class="canvas-container"></div>
<div class="controls">
<div class="control-group">
<label for="styleSelector" id="styleLabel" data-en="Style:" data-zh="風格：">Style:</label>
<select id="styleSelector">
<option value="organic" selected data-en="Organic" data-zh="有機">Organic</option>
<option value="geometric" data-en="Geometric" data-zh="幾何">Geometric</option>
<option value="cosmic" data-en="Cosmic" data-zh="宇宙">Cosmic</option>
<option value="circuit" data-en="Circuit" data-zh="電路">Circuit</option>
<option value="burst" data-en="Burst" data-zh="爆發">Burst</option>
<option value="blueprint" data-en="Blueprint" data-zh="藍圖">Blueprint</option>
<option value="strata" data-en="Strata" data-zh="地層">Strata</option>
<option value="weave" data-en="Weave" data-zh="編織">Weave</option>
<option value="minimalist" data-en="Minimalist" data-zh="極簡">Minimalist</option>
<option value="monogram" data-en="Monogram" data-zh="字母章">Monogram</option>
<option value="gradientring" data-en="Gradient Ring" data-zh="漸層環">Gradient Ring</option>
<option value="techgrid" data-en="Tech Grid" data-zh="科技網格">Tech Grid</option>
<option value="softshadow" data-en="Soft Shadow" data-zh="柔影">Soft Shadow</option>
<option value="abstractblocks" data-en="Abstract Blocks" data-zh="抽象色塊">Abstract Blocks</option>
<option value="signature" data-en="Signature" data-zh="簽名">Signature</option>
<option value="pixelmosaic" data-en="Pixel Mosaic" data-zh="像素拼貼">Pixel Mosaic</option>
<option value="crystal" data-en="Crystal" data-zh="水晶">Crystal</option>
<option value="inksplash" data-en="Ink Splash" data-zh="墨滴">Ink Splash</option>
<option value="papercut" data-en="Paper Cut" data-zh="紙雕">Paper Cut</option>
<option value="wavegrid" data-en="Wave Grid" data-zh="波紋網格">Wave Grid</option>
<option value="polygonalmesh" data-en="Polygonal Mesh" data-zh="多邊形網">Polygonal Mesh</option>
<option value="retroneon" data-en="Retro Neon" data-zh="復古霓虹">Retro Neon</option>
<option value="brushstroke" data-en="Brush Stroke" data-zh="筆觸">Brush Stroke</option>
<option value="bubblepop" data-en="Bubble Pop" data-zh="泡泡">Bubble Pop</option>
<option value="metallicfoil" data-en="Metallic Foil" data-zh="金屬箔">Metallic Foil</option>
<option value="doodleline" data-en="Doodle Line" data-zh="塗鴉線">Doodle Line</option>
<option value="gradientmesh" data-en="Gradient Mesh" data-zh="漸層網">Gradient Mesh</option>
<option value="halftonedot" data-en="Halftone Dot" data-zh="網點">Halftone Dot</option>
<option value="glitcheffect" data-en="Glitch Effect" data-zh="失真故障">Glitch Effect</option>
<option value="natureleaf" data-en="Nature Leaf" data-zh="葉片">Nature Leaf</option>
</select>
</div>
<button id="changePaletteBtn" data-en="Change Palette" data-zh="更換配色">Change Palette</button>
<label for="mainColorPicker" id="mainColorLabel" data-en="Main Color:" data-zh="主色：">Main Color:</label>
<input type="color" id="mainColorPicker" value="#264653">
<label class="checkbox-label" id="initialsLabel" data-en="Include Initials" data-zh="包含首字母">
<input type="checkbox" id="includeInitials" >
Include Initials
</label>
<button id="showDemoBtn" class="secondary-btn" type="button" data-en="Show All Styles" data-zh="顯示所有風格">Show All Styles</button>
</div>
<div class="download-group">
<label for="downloadSize" id="downloadSizeLabel" data-en="Size:" data-zh="尺寸：">Size:</label>
<select id="downloadSize">
<option value="16">16x16</option>
<option value="32">32x32</option>
<option value="64">64x64</option>
<option value="256" selected>256x256</option>
</select>
<button id="downloadBtn" data-en="Download Avatar" data-zh="下載頭像">Download Avatar</button>
</div>
<!-- Demo Gallery Section -->
<div id="demoSection" class="demo-section" style="display:none;">
<div class="demo-header">
<h2 id="demoTitle" data-en="All Styles Preview" data-zh="所有風格預覽">All Styles Preview</h2>
<button id="closeDemoBtn" class="secondary-btn" type="button" data-en="Close" data-zh="關閉">Close</button>
</div>
<p id="demoHint" class="demo-hint" data-en="Previews use your current name and palette." data-zh="預覽使用您目前的名字與配色。">Previews use your current name and palette.</p>
<div id="demoGrid" class="demo-grid"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
<script src="script.js"></script>
</body>
</html>