GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<style>7 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width:1080px; height:2400px;10 position:relative; overflow:hidden;11 background:#ffffff;12 }13 /* Status bar */14 .status-bar {15 position:absolute; top:0; left:0; width:100%; height:120px;16 background:#8c8c8c; color:#fff; font-size:38px;17 display:flex; align-items:center; justify-content:space-between;18 padding:0 36px;19 }20 .status-right { display:flex; align-items:center; gap:24px; opacity:0.9; }21 .status-dot { width:26px; height:26px; border-radius:50%; background:#fff; opacity:0.8; }22 .battery {23 width:52px; height:28px; border:2px solid #fff; border-radius:6px; position:relative;24 }25 .battery::after { content:""; position:absolute; right:-8px; top:8px; width:6px; height:12px; background:#fff; border-radius:2px; }26 .battery-level { position:absolute; left:3px; top:3px; height:20px; width:34px; background:#fff; }27 /* Search header */28 .search-header {29 position:absolute; top:120px; left:0; width:100%; height:160px;30 background:#fff; border-bottom:1px solid #e2e2e2;31 display:flex; align-items:center; padding:0 28px; gap:24px;32 }33 .search-header .title { font-size:46px; color:#222; flex:1; }34 .icon-btn { width:72px; height:72px; border-radius:36px; border:2px solid #ccc; display:flex; align-items:center; justify-content:center; }35 .dots { display:flex; gap:8px; padding:0 8px; }36 .dots span { width:10px; height:10px; background:#666; border-radius:50%; display:inline-block; }37 /* Tabs */38 .tabs {39 position:absolute; top:280px; left:0; width:100%; height:110px;40 background:#fff; border-bottom:1px solid #e6e6e6;41 display:flex;42 }43 .tab { flex:1; display:flex; align-items:center; justify-content:center; font-size:40px; color:#777; position:relative; }44 .tab.active { color:#111; font-weight:600; }45 .tab.active::after {46 content:""; position:absolute; bottom:0; left:15%; width:70%; height:6px; background:#111; border-radius:3px;47 }48 /* Suggestions list */49 .suggestions {50 position:absolute; top:390px; left:0; width:100%; bottom:810px; overflow:hidden; background:#fff;51 }52 .s-row {53 height:150px; display:flex; align-items:center; gap:28px; padding:0 36px; border-bottom:1px solid #ececec;54 }55 .s-text { font-size:44px; color:#333; }56 .search-icon {57 width:56px; height:56px; display:flex; align-items:center; justify-content:center;58 }59 /* Keyboard suggestion bar */60 .kb {61 position:absolute; bottom:0; left:0; width:100%; height:810px; background:#2a2726; color:#fff;62 box-shadow:0 -8px 20px rgba(0,0,0,0.15);63 }64 .kb-suggest {65 height:110px; background:#2f2b2a; display:flex; align-items:center; padding:0 24px; gap:20px; color:#ddd;66 border-top:1px solid #1f1d1c;67 }68 .chip {69 padding:16px 28px; background:#3a3534; border:1px solid #4a4443; border-radius:26px; font-size:38px; color:#e5e1df;70 }71 .chip.icon { width:64px; height:64px; display:flex; align-items:center; justify-content:center; }72 /* Keyboard keys */73 .keys { padding:20px 22px; display:flex; flex-direction:column; gap:22px; }74 .key-row { display:flex; gap:16px; justify-content:center; }75 .key {76 width:92px; height:118px; background:#3b3635; border-radius:18px; border:1px solid #4a4443;77 display:flex; align-items:center; justify-content:center; color:#eadfd8; font-size:44px;78 }79 .key.wide { width:170px; }80 .space-row { display:flex; align-items:center; gap:16px; justify-content:center; }81 .space { flex:1; height:118px; background:#3b3635; border:1px solid #4a4443; border-radius:24px; color:#eadfd8; font-size:40px; display:flex; align-items:center; justify-content:center; }82 .circle-btn {83 width:120px; height:120px; border-radius:60px; background:#d7b49a; display:flex; align-items:center; justify-content:center; color:#2a2726; font-size:40px;84 }85 .gesture-pill {86 position:absolute; bottom:22px; left:50%; transform:translateX(-50%);87 width:260px; height:14px; background:#e0e0e0; border-radius:7px; opacity:0.9;88 }89 /* SVG styling helpers */90 svg { display:block; }91</style>92</head>93<body>94<div id="render-target">95 <!-- Status bar -->96 <div class="status-bar">97 <div>11:37</div>98 <div class="status-right">99 <div class="status-dot"></div>100 <div class="battery"><div class="battery-level"></div></div>101 </div>102 </div>103 104 <!-- Search header -->105 <div class="search-header">106 <div class="icon-btn" style="border:none; width:72px; height:72px;">107 <svg width="44" height="44" viewBox="0 0 24 24">108 <path d="M15 18l-6-6 6-6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>109 </svg>110 </div>111 <div class="title">men's shirt</div>112 <div class="icon-btn">113 <svg width="30" height="30" viewBox="0 0 24 24">114 <circle cx="12" cy="12" r="10" stroke="#999" stroke-width="2" fill="none"/>115 <path d="M9 9l6 6M15 9l-6 6" stroke="#999" stroke-width="2" stroke-linecap="round"/>116 </svg>117 </div>118 <div class="dots"><span></span><span></span><span></span></div>119 </div>120 121 <!-- Tabs -->122 <div class="tabs">123 <div class="tab">Women</div>124 <div class="tab active">Men</div>125 <div class="tab">Kids</div>126 </div>127 128 <!-- Suggestions list -->129 <div class="suggestions">130 <div class="s-row">131 <div class="search-icon">132 <svg width="40" height="40" viewBox="0 0 24 24">133 <circle cx="11" cy="11" r="7" stroke="#555" stroke-width="2" fill="none"/>134 <line x1="16" y1="16" x2="21" y2="21" stroke="#555" stroke-width="2" stroke-linecap="round"/>135 </svg>136 </div>137 <div class="s-text">man's shirt</div>138 </div>139 <div class="s-row">140 <div class="search-icon">141 <svg width="40" height="40" viewBox="0 0 24 24">142 <circle cx="11" cy="11" r="7" stroke="#555" stroke-width="2" fill="none"/>143 <line x1="16" y1="16" x2="21" y2="21" stroke="#555" stroke-width="2" stroke-linecap="round"/>144 </svg>145 </div>146 <div class="s-text">man's shirt cotton</div>147 </div>148 <div class="s-row">149 <div class="search-icon">150 <svg width="40" height="40" viewBox="0 0 24 24">151 <circle cx="11" cy="11" r="7" stroke="#555" stroke-width="2" fill="none"/>152 <line x1="16" y1="16" x2="21" y2="21" stroke="#555" stroke-width="2" stroke-linecap="round"/>153 </svg>154 </div>155 <div class="s-text">man's shirt esprit</div>156 </div>157 <div class="s-row">158 <div class="search-icon">159 <svg width="40" height="40" viewBox="0 0 24 24">160 <circle cx="11" cy="11" r="7" stroke="#555" stroke-width="2" fill="none"/>161 <line x1="16" y1="16" x2="21" y2="21" stroke="#555" stroke-width="2" stroke-linecap="round"/>162 </svg>163 </div>164 <div class="s-text">man's shirt versace</div>165 </div>166 <div class="s-row">167 <div class="search-icon">168 <svg width="40" height="40" viewBox="0 0 24 24">169 <circle cx="11" cy="11" r="7" stroke="#555" stroke-width="2" fill="none"/>170 <line x1="16" y1="16" x2="21" y2="21" stroke="#555" stroke-width="2" stroke-linecap="round"/>171 </svg>172 </div>173 <div class="s-text">man's shirt nike</div>174 </div>175 <div class="s-row">176 <div class="search-icon">177 <svg width="40" height="40" viewBox="0 0 24 24">178 <circle cx="11" cy="11" r="7" stroke="#555" stroke-width="2" fill="none"/>179 <line x1="16" y1="16" x2="21" y2="21" stroke="#555" stroke-width="2" stroke-linecap="round"/>180 </svg>181 </div>182 <div class="s-text">man's shirt true religion</div>183 </div>184 <div class="s-row">185 <div class="search-icon">186 <svg width="40" height="40" viewBox="0 0 24 24">187 <circle cx="11" cy="11" r="7" stroke="#555" stroke-width="2" fill="none"/>188 <line x1="16" y1="16" x2="21" y2="21" stroke="#555" stroke-width="2" stroke-linecap="round"/>189 </svg>190 </div>191 <div class="s-text">man's shirt eterna</div>192 </div>193 </div>194 195 <!-- Keyboard -->196 <div class="kb">197 <div class="kb-suggest">198 <div class="circle-btn">?123</div>199 <div class="chip">shirt</div>200 <div class="chip">shirts</div>201 <div class="chip icon">202 <svg width="36" height="36" viewBox="0 0 24 24">203 <path d="M6 4l6-2 6 2-3 3v9H9V7L6 4z" fill="#98c1ff" stroke="#7aa5e6" stroke-width="1"/>204 </svg>205 </div>206 <div class="chip icon">207 <svg width="36" height="36" viewBox="0 0 24 24">208 <rect x="5" y="3" width="14" height="18" rx="3" fill="#58c" />209 <rect x="5" y="12" width="14" height="9" fill="#6bd" />210 </svg>211 </div>212 <div class="circle-btn">213 <svg width="30" height="30" viewBox="0 0 24 24">214 <path d="M12 5v8" stroke="#2a2726" stroke-width="2" stroke-linecap="round"/>215 <rect x="9" y="13" width="6" height="4" rx="2" fill="#2a2726"/>216 </svg>217 </div>218 </div>219 220 <div class="keys">221 <div class="key-row">222 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div>223 <div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>224 </div>225 <div class="key-row">226 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>227 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>228 </div>229 <div class="key-row">230 <div class="key wide">⇧</div><div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>231 <div class="key">b</div><div class="key">n</div><div class="key">m</div>232 <div class="key wide">233 <svg width="34" height="34" viewBox="0 0 24 24">234 <path d="M6 8l6 6 6-6" stroke="#eadfd8" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>235 </svg>236 </div>237 </div>238 <div class="space-row">239 <div class="key wide">,</div>240 <div class="key wide">241 <svg width="30" height="30" viewBox="0 0 24 24">242 <circle cx="12" cy="9" r="4" stroke="#eadfd8" stroke-width="2" fill="none"></circle>243 <path d="M5 19h14" stroke="#eadfd8" stroke-width="2" stroke-linecap="round"></path>244 </svg>245 </div>246 <div class="space">space</div>247 <div class="key wide">.</div>248 <div class="circle-btn">249 <svg width="36" height="36" viewBox="0 0 24 24">250 <circle cx="11" cy="11" r="8" stroke="#2a2726" stroke-width="2" fill="none"/>251 <line x1="16" y1="16" x2="21" y2="21" stroke="#2a2726" stroke-width="2" stroke-linecap="round"/>252 </svg>253 </div>254 </div>255 </div>256 257 <div class="gesture-pill"></div>258 </div>259</div>260</body>261</html>