GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Ultra 4D Search UI</title>5<style>6 body{margin:0;padding:0;background:transparent;font-family: Arial, Helvetica, sans-serif;}7 #render-target{8 width:1080px;height:2400px;position:relative;overflow:hidden;9 background:#ffffff;border-radius:0;10 }11 12 /* Top status bar */13 .status-bar{14 position:absolute;top:0;left:0;width:100%;height:90px;15 display:flex;align-items:center;justify-content:space-between;16 padding:0 36px;color:#1a1a1a;font-size:34px;17 }18 .status-icons{display:flex;gap:26px;align-items:center}19 .icon-dot{width:28px;height:28px;border-radius:6px;background:#cfcfcf}20 21 /* Header / search */22 .header{23 position:absolute;top:90px;left:0;width:100%;height:120px;24 display:flex;align-items:center;gap:20px;padding:0 24px 0 24px;25 }26 .back-btn{27 width:70px;height:70px;border-radius:12px;display:flex;align-items:center;justify-content:center;28 }29 .back-btn svg{width:40px;height:40px}30 .search-text{31 font-size:54px;font-weight:600;letter-spacing:1px;color:#111;32 }33 .header-actions{margin-left:auto;display:flex;gap:28px;align-items:center}34 .round-icon{width:72px;height:72px;border-radius:36px;background:#111;color:#fff;display:flex;align-items:center;justify-content:center;font-size:34px}35 .cam-icon{36 width:72px;height:72px;border-radius:14px;border:2px solid #222;display:flex;align-items:center;justify-content:center;37 }38 .cam-icon:after{39 content:"📷";font-size:34px;line-height:1;40 }41 42 /* Section title */43 .section-title{44 position:absolute;top:235px;left:32px;font-size:36px;font-weight:800;letter-spacing:3px;color:#1a1a1a;45 }46 47 /* Product grid */48 .grid{49 position:absolute;top:300px;left:24px;right:24px;50 display:flex;gap:24px;51 }52 .card{53 width:340px;background:#f5f6f7;border-radius:8px;overflow:hidden;position:relative;54 box-shadow:0 0 0 1px #e6e6e6 inset;55 }56 .img{57 height:270px;background:#E0E0E0;border-bottom:1px solid #BDBDBD;58 display:flex;align-items:center;justify-content:center;color:#757575;font-size:26px;text-align:center;padding:0 10px;59 }60 .heart{61 position:absolute;top:14px;right:18px;background:#fff;border-radius:50%;width:52px;height:52px;62 box-shadow:0 0 0 1px #d9d9d9;display:flex;align-items:center;justify-content:center;63 }64 .heart svg{width:30px;height:30px}65 .content{padding:18px}66 .label{67 display:inline-block;background:#ffffff;border:1px solid #dcdcdc;border-radius:8px;padding:10px 16px;68 font-size:26px;font-weight:700;color:#222;letter-spacing:1px;margin-bottom:14px;69 }70 .price{font-size:32px;font-weight:700;color:#111;margin:8px 0}71 .title{font-size:34px;font-weight:800;margin:4px 0;color:#111}72 .subtitle{font-size:28px;color:#555;margin-bottom:16px}73 .extras{display:flex;align-items:center;gap:10px;font-size:26px;color:#222}74 .dot{width:16px;height:16px;border-radius:50%}75 .dot.b{background:#1e88e5}.dot.r{background:#e53935}.dot.y{background:#fdd835}.dot.g{background:#43a047}76 77 /* Special small badge */78 .mini-badge{79 position:absolute;top:242px;left:18px;background:#111;color:#fff;padding:8px 12px;border-radius:10px;font-size:22px;font-weight:700;80 }81 .code-label{display:inline-block;background:#fff3e0;border:1px dashed #ffb74d;color:#a85c00;padding:10px 14px;border-radius:8px;font-size:26px;font-weight:800;margin-bottom:12px}82 83 /* Suggestions */84 .suggestions{85 position:absolute;top:950px;left:32px;right:32px;color:#111;86 }87 .suggestions h3{88 font-size:36px;letter-spacing:3px;margin:0 0 26px 0;font-weight:800;89 }90 .s-item{font-size:32px;padding:18px 0;border-bottom:1px solid #eee;color:#333}91 92 /* Keyboard overlay */93 .keyboard{94 position:absolute;bottom:0;left:0;width:100%;height:900px;background:#1c1f24;color:#fff;95 box-shadow:0 -4px 18px rgba(0,0,0,0.25);96 }97 .kb-top{98 padding:22px 34px;display:flex;gap:34px;align-items:center;99 }100 .kb-pill{101 width:72px;height:72px;background:#2b2f36;border-radius:16px;border:1px solid #3a3f48;102 }103 .kb-rows{padding:14px 24px}104 .kb-row{display:flex;gap:18px;margin-bottom:26px;justify-content:center}105 .key{106 width:86px;height:100px;background:#2b2f36;border-radius:18px;border:1px solid #3a3f48;107 display:flex;align-items:center;justify-content:center;font-size:36px;108 }109 .key.wide{width:180px}110 .key.space{width:540px}111 .key.small{width:70px}112 113 /* Search button */114 .search-btn{115 position:absolute;right:24px;bottom:24px;width:140px;height:140px;border-radius:70px;background:#d6def7;color:#1c2a5e;116 display:flex;align-items:center;justify-content:center;font-size:54px;font-weight:800;border:2px solid #b8c3ef;117 }118 119</style>120</head>121<body>122<div id="render-target">123 124 <!-- Status Bar -->125 <div class="status-bar">126 <div style="display:flex;align-items:center;gap:20px;">127 <div style="font-weight:700;">12:09</div>128 <div class="status-icons">129 <div class="icon-dot"></div>130 <div class="icon-dot"></div>131 <div class="icon-dot"></div>132 <div class="icon-dot"></div>133 </div>134 </div>135 <div class="status-icons">136 <div class="icon-dot"></div>137 <div class="icon-dot" style="background:#4caf50"></div>138 </div>139 </div>140 141 <!-- Header with back and actions -->142 <div class="header">143 <div class="back-btn">144 <svg viewBox="0 0 24 24">145 <path d="M15 4 L7 12 L15 20" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>146 </svg>147 </div>148 <div class="search-text">ULTRA 4D</div>149 <div class="header-actions">150 <div class="round-icon">✕</div>151 <div class="cam-icon"></div>152 </div>153 </div>154 155 <!-- Products section -->156 <div class="section-title">PRODUCTS</div>157 158 <div class="grid">159 <!-- Card 1 -->160 <div class="card">161 <div class="img">[IMG: Green Ultra 4D Shoe]</div>162 <div class="heart">163 <svg viewBox="0 0 24 24">164 <path d="M12 20 C10 18,4 14,4 9 C4 6.5,6 5,8 5 C9.5 5,11 6,12 7 C13 6,14.5 5,16 5 C18 5,20 6.5,20 9 C20 14,14 18,12 20 Z" fill="none" stroke="#1a1a1a" stroke-width="1.8"/>165 </svg>166 </div>167 <div class="content">168 <div class="label">BEST SELLER</div>169 <div class="price">$220.00</div>170 <div class="title">ULTRA 4D</div>171 <div class="subtitle">Performance</div>172 <div class="extras">173 <span>+6</span>174 <div class="dot.b dot"></div>175 <div class="dot.r dot"></div>176 <div class="dot.y dot"></div>177 <div class="dot.g dot"></div>178 </div>179 </div>180 </div>181 182 <!-- Card 2 -->183 <div class="card">184 <div class="img">[IMG: Black/White Ultra 4D Shoe]</div>185 <div class="heart">186 <svg viewBox="0 0 24 24">187 <path d="M12 20 C10 18,4 14,4 9 C4 6.5,6 5,8 5 C9.5 5,11 6,12 7 C13 6,14.5 5,16 5 C18 5,20 6.5,20 9 C20 14,14 18,12 20 Z" fill="none" stroke="#1a1a1a" stroke-width="1.8"/>188 </svg>189 </div>190 <div class="content">191 <div class="label">BEST SELLER</div>192 <div class="price">$220.00</div>193 <div class="title">ULTRA 4D</div>194 <div class="subtitle">Performance</div>195 <div class="extras">196 <span>+6</span>197 <div class="dot b"></div>198 <div class="dot r"></div>199 <div class="dot y"></div>200 <div class="dot g"></div>201 </div>202 </div>203 </div>204 205 <!-- Card 3 -->206 <div class="card">207 <div class="img">[IMG: Beige Ultra 4D Shoe]</div>208 <div class="heart" style="background:#111;color:#fff;">209 <span style="font-size:20px;font-weight:800;">AR</span>210 </div>211 <div class="content">212 <div class="code-label">CODE: CELEBRATE</div>213 <div class="price">$220.00</div>214 <div class="title">ULTRA 4D</div>215 <div class="subtitle">Performance</div>216 <div class="extras">217 <span>+6</span>218 <div class="dot b"></div>219 <div class="dot r"></div>220 <div class="dot y"></div>221 <div class="dot g"></div>222 </div>223 </div>224 </div>225 </div>226 227 <!-- Suggestions -->228 <div class="suggestions">229 <h3>SUGGESTIONS</h3>230 <div class="s-item">ultra 4dfwd [5]</div>231 <div class="s-item">ultra 4d running shoes [15]</div>232 </div>233 234 <!-- Keyboard Overlay -->235 <div class="keyboard">236 <div class="kb-top">237 <div class="kb-pill"></div>238 <div class="kb-pill"></div>239 <div class="kb-pill"></div>240 <div class="kb-pill"></div>241 <div class="kb-pill"></div>242 <div class="kb-pill"></div>243 </div>244 <div class="kb-rows">245 <div class="kb-row">246 <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><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>247 </div>248 <div class="kb-row">249 <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><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>250 </div>251 <div class="kb-row">252 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>253 <div class="key wide">⌫</div>254 </div>255 <div class="kb-row">256 <div class="key small">?123</div>257 <div class="key small">,</div>258 <div class="key wide">☺</div>259 <div class="key space"></div>260 <div class="key small">.</div>261 </div>262 </div>263 <div class="search-btn">🔍</div>264 </div>265 266</div>267</body>268</html>