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.0">6<title>UI Recreation</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#ffffff;12 }13 /* Status bar */14 .statusbar {15 height:110px; background:#2f2f33; color:#eaeaea;16 display:flex; align-items:center; justify-content:space-between;17 padding:0 32px; font-size:36px;18 }19 .status-icons { display:flex; align-items:center; gap:28px; }20 .status-dot { width:22px; height:22px; background:#cfcfcf; border-radius:50%; opacity:.8; }21 .battery {22 width:60px; height:28px; border:3px solid #eaeaea; border-radius:6px; position:relative;23 }24 .battery::after {25 content:""; position:absolute; right:-12px; top:8px; width:8px; height:12px; background:#eaeaea; border-radius:2px;26 }27 .battery .level { position:absolute; left:3px; top:3px; height:20px; width:44px; background:#7bdc97; }28 29 /* App bar */30 .appbar {31 height:150px; background:#2f2f33; color:#fff; display:flex; align-items:center;32 padding:0 24px; box-shadow:0 2px 0 rgba(0,0,0,0.3);33 }34 .app-left, .app-right { display:flex; align-items:center; gap:26px; }35 .app-center { flex:1; padding-left:20px; }36 .title-row { display:flex; align-items:center; gap:16px; }37 .title { font-size:40px; font-weight:600; }38 .subtitle { font-size:28px; color:#cfcfcf; margin-top:6px; }39 40 /* Tabs */41 .tabs {42 display:flex; align-items:center; gap:54px; background:#ffffff; padding:24px 32px 0 32px;43 border-bottom:1px solid #e5e5e5;44 }45 .tab { font-size:34px; color:#6b6b6b; padding-bottom:20px; }46 .tab.active { color:#1a1a1a; border-bottom:6px solid #1a73e8; }47 48 /* Search field */49 .searchbar {50 margin:24px; background:#f5f6f7; border:1px solid #e3e3e3; border-radius:16px;51 height:120px; display:flex; align-items:center; padding:0 24px; color:#777; font-size:34px;52 }53 .searchbar svg { margin-right:16px; }54 .searchbar .placeholder { color:#6d6d6d; }55 56 /* Suggestions */57 .suggestions { margin-top:6px; }58 .s-item {59 display:flex; align-items:center; justify-content:space-between;60 padding:32px; border-bottom:1px solid #e9e9e9; height:120px;61 }62 .s-left { display:flex; align-items:center; gap:26px; }63 .s-text { font-size:38px; color:#222; }64 .s-icon { width:54px; height:54px; }65 .s-right { width:48px; height:48px; }66 .content-spacer { height:360px; }67 68 /* Keyboard */69 .keyboard {70 position:absolute; left:0; bottom:60px; width:100%; height:920px;71 background:#1e2426; color:#cfd8dc; box-shadow:0 -6px 18px rgba(0,0,0,0.25);72 padding:24px 24px 32px 24px;73 }74 .kb-toolbar {75 height:100px; display:flex; align-items:center; gap:36px; padding:0 8px;76 }77 .kb-tool {78 width:96px; height:72px; background:#243135; border-radius:18px;79 display:flex; align-items:center; justify-content:center;80 }81 .keys { margin-top:18px; display:flex; flex-direction:column; gap:18px; }82 .row { display:flex; gap:14px; justify-content:center; }83 .key {84 min-width:86px; height:120px; background:#263238; border-radius:24px;85 display:flex; align-items:center; justify-content:center; font-size:44px; color:#dce6ea;86 }87 .key.large { min-width:180px; }88 .space { flex:1; height:120px; background:#263238; border-radius:24px; display:flex; align-items:center; justify-content:center; font-size:40px; }89 .accent { background:#72dfb8; color:#0f1b1e; font-weight:700; }90 .mic { width:120px; }91 92 /* Gesture bar */93 .gesture { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); width:240px; height:12px; background:#e6e6e6; border-radius:6px; opacity:.9; }94 /* Generic svg styles */95 .icon { width:48px; height:48px; fill:none; stroke:#fff; stroke-width:6; }96 .icon-dark { stroke:#5f6368; fill:none; }97 .icon-fill { fill:#5f6368; stroke:none; }98</style>99</head>100<body>101<div id="render-target">102 103 <!-- Status Bar -->104 <div class="statusbar">105 <div>2:04</div>106 <div class="status-icons">107 <div class="status-dot"></div>108 <div class="status-dot"></div>109 <div class="status-dot"></div>110 <!-- WiFi -->111 <svg width="40" height="40">112 <path d="M5 20 Q20 8 35 20" stroke="#eaeaea" stroke-width="4" fill="none"/>113 <path d="M10 25 Q20 17 30 25" stroke="#eaeaea" stroke-width="4" fill="none"/>114 <circle cx="20" cy="30" r="3" fill="#eaeaea"/>115 </svg>116 <!-- Battery -->117 <div class="battery"><div class="level"></div></div>118 <div style="font-size:34px; color:#eaeaea;">100%</div>119 </div>120 </div>121 122 <!-- App Bar -->123 <div class="appbar">124 <div class="app-left">125 <!-- Close icon -->126 <svg class="icon" viewBox="0 0 48 48">127 <path d="M10 10 L38 38 M38 10 L10 38"></path>128 </svg>129 </div>130 <div class="app-center">131 <div class="title-row">132 <!-- Lock icon -->133 <svg width="48" height="48" viewBox="0 0 48 48" class="icon">134 <rect x="10" y="22" width="28" height="18" rx="4" ry="4" stroke="#fff" fill="none" stroke-width="4"/>135 <path d="M16 22 V16 a8 8 0 0 1 16 0 v6" stroke="#fff" stroke-width="4" fill="none"/>136 </svg>137 <div class="title">Change search criteria</div>138 </div>139 <div class="subtitle">google.com</div>140 </div>141 <div class="app-right">142 <!-- Share -->143 <svg class="icon" viewBox="0 0 48 48">144 <circle cx="12" cy="24" r="5" stroke="#fff" fill="none"></circle>145 <circle cx="36" cy="12" r="5" stroke="#fff" fill="none"></circle>146 <circle cx="36" cy="36" r="5" stroke="#fff" fill="none"></circle>147 <path d="M16 22 L31 14 M16 26 L31 34" stroke="#fff" />148 </svg>149 <!-- Bookmark -->150 <svg class="icon" viewBox="0 0 48 48">151 <path d="M12 8 H36 V40 L24 32 L12 40 Z" stroke="#fff" fill="none"></path>152 </svg>153 <!-- More (vertical dots) -->154 <svg class="icon" viewBox="0 0 48 48">155 <circle cx="24" cy="12" r="4" fill="#fff"></circle>156 <circle cx="24" cy="24" r="4" fill="#fff"></circle>157 <circle cx="24" cy="36" r="4" fill="#fff"></circle>158 </svg>159 </div>160 </div>161 162 <!-- Tabs -->163 <div class="tabs">164 <div class="tab active">Search</div>165 <div class="tab">Dates</div>166 <div class="tab">Guests</div>167 </div>168 169 <!-- Search bar -->170 <div class="searchbar">171 <!-- Back arrow -->172 <svg width="48" height="48" viewBox="0 0 48 48" class="icon-dark">173 <path d="M30 10 L18 24 L30 38" stroke="#5f6368" stroke-width="6" fill="none" />174 </svg>175 <div class="placeholder">Search for places, hotels and more</div>176 </div>177 178 <!-- Suggestions list -->179 <div class="suggestions">180 181 <div class="s-item">182 <div class="s-left">183 <!-- Bed icon -->184 <svg class="s-icon" viewBox="0 0 48 48">185 <rect x="6" y="20" width="36" height="12" rx="2" class="icon-fill"/>186 <rect x="10" y="14" width="10" height="6" class="icon-fill"/>187 <rect x="4" y="32" width="4" height="8" class="icon-fill"/>188 <rect x="40" y="32" width="4" height="8" class="icon-fill"/>189 </svg>190 <div class="s-text">hotels in berlin germany</div>191 </div>192 <!-- Arrow right -->193 <svg class="s-right" viewBox="0 0 48 48">194 <path d="M18 12 L30 24 L18 36" stroke="#5f6368" stroke-width="6" fill="none"/>195 </svg>196 </div>197 198 <div class="s-item">199 <div class="s-left">200 <svg class="s-icon" viewBox="0 0 48 48">201 <rect x="6" y="20" width="36" height="12" rx="2" class="icon-fill"/>202 <rect x="10" y="14" width="10" height="6" class="icon-fill"/>203 <rect x="4" y="32" width="4" height="8" class="icon-fill"/>204 <rect x="40" y="32" width="4" height="8" class="icon-fill"/>205 </svg>206 <div class="s-text">hostels in berlin</div>207 </div>208 <svg class="s-right" viewBox="0 0 48 48">209 <path d="M18 12 L30 24 L18 36" stroke="#5f6368" stroke-width="6" fill="none"/>210 </svg>211 </div>212 213 <div class="s-item">214 <div class="s-left">215 <svg class="s-icon" viewBox="0 0 48 48">216 <rect x="6" y="20" width="36" height="12" rx="2" class="icon-fill"/>217 <rect x="10" y="14" width="10" height="6" class="icon-fill"/>218 <rect x="4" y="32" width="4" height="8" class="icon-fill"/>219 <rect x="40" y="32" width="4" height="8" class="icon-fill"/>220 </svg>221 <div class="s-text">hotels in berlin city centre</div>222 </div>223 <svg class="s-right" viewBox="0 0 48 48">224 <path d="M18 12 L30 24 L18 36" stroke="#5f6368" stroke-width="6" fill="none"/>225 </svg>226 </div>227 228 <div class="s-item">229 <div class="s-left">230 <svg class="s-icon" viewBox="0 0 48 48">231 <rect x="6" y="20" width="36" height="12" rx="2" class="icon-fill"/>232 <rect x="10" y="14" width="10" height="6" class="icon-fill"/>233 <rect x="4" y="32" width="4" height="8" class="icon-fill"/>234 <rect x="40" y="32" width="4" height="8" class="icon-fill"/>235 </svg>236 <div class="s-text">hotels in berlin ohio</div>237 </div>238 <svg class="s-right" viewBox="0 0 48 48">239 <path d="M18 12 L30 24 L18 36" stroke="#5f6368" stroke-width="6" fill="none"/>240 </svg>241 </div>242 243 <div class="s-item">244 <div class="s-left">245 <svg class="s-icon" viewBox="0 0 48 48">246 <rect x="6" y="20" width="36" height="12" rx="2" class="icon-fill"/>247 <rect x="10" y="14" width="10" height="6" class="icon-fill"/>248 <rect x="4" y="32" width="4" height="8" class="icon-fill"/>249 <rect x="40" y="32" width="4" height="8" class="icon-fill"/>250 </svg>251 <div class="s-text">cheap hotels in berlin</div>252 </div>253 <svg class="s-right" viewBox="0 0 48 48">254 <path d="M18 12 L30 24 L18 36" stroke="#5f6368" stroke-width="6" fill="none"/>255 </svg>256 </div>257 </div>258 259 <div class="content-spacer"></div>260 261 <!-- Keyboard -->262 <div class="keyboard">263 <div class="kb-toolbar">264 <div class="kb-tool">265 <svg width="42" height="42" viewBox="0 0 48 48">266 <rect x="8" y="8" width="32" height="32" rx="6" ry="6" fill="#9aa5aa"/>267 <circle cx="16" cy="16" r="3" fill="#253237"/>268 <circle cx="24" cy="16" r="3" fill="#253237"/>269 <circle cx="32" cy="16" r="3" fill="#253237"/>270 </svg>271 </div>272 <div class="kb-tool">273 <svg width="42" height="42" viewBox="0 0 48 48">274 <circle cx="24" cy="24" r="14" fill="#9aa5aa"/>275 <circle cx="20" cy="22" r="3" fill="#253237"/>276 <path d="M26 20 L30 24 L26 28" stroke="#253237" stroke-width="4" fill="none"/>277 </svg>278 </div>279 <div class="kb-tool"><div style="color:#b7c3c8; font-weight:700;">GIF</div></div>280 <div class="kb-tool">281 <svg width="42" height="42" viewBox="0 0 48 48">282 <circle cx="24" cy="24" r="18" stroke="#9aa5aa" stroke-width="4" fill="none"/>283 <path d="M24 10 V24 L32 32" stroke="#9aa5aa" stroke-width="4" fill="none"/>284 </svg>285 </div>286 <div class="kb-tool">287 <svg width="42" height="42" viewBox="0 0 48 48">288 <rect x="8" y="12" width="32" height="24" rx="6" fill="#9aa5aa"/>289 <path d="M20 20 L28 20 L28 28 L20 28 Z" fill="#253237"/>290 </svg>291 </div>292 <div class="kb-tool">293 <svg width="42" height="42" viewBox="0 0 48 48">294 <circle cx="24" cy="18" r="6" fill="#9aa5aa"/>295 <rect x="18" y="26" width="12" height="10" rx="6" fill="#9aa5aa"/>296 </svg>297 </div>298 </div>299 300 <div class="keys">301 <div class="row">302 <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>303 </div>304 <div class="row">305 <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>306 </div>307 <div class="row">308 <div class="key large">⇧</div>309 <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>310 <div class="key large">311 <svg width="48" height="48" viewBox="0 0 48 48">312 <path d="M18 16 L30 24 L18 32" stroke="#dce6ea" stroke-width="6" fill="none"/>313 </svg>314 </div>315 </div>316 <div class="row">317 <div class="key accent large">?123</div>318 <div class="key">,</div>319 <div class="space">space</div>320 <div class="key mic">321 <svg width="36" height="36" viewBox="0 0 48 48">322 <rect x="18" y="14" width="12" height="18" rx="6" fill="#dce6ea"/>323 <path d="M14 24 Q24 30 34 24" stroke="#dce6ea" stroke-width="4" fill="none"/>324 <path d="M24 30 V36" stroke="#dce6ea" stroke-width="4"/>325 </svg>326 </div>327 <div class="key accent large">328 <svg width="46" height="46" viewBox="0 0 48 48">329 <path d="M14 34 L30 34 L30 14" stroke="#0f1b1e" stroke-width="6" fill="none"/>330 <path d="M22 26 L30 34 L38 26" stroke="#0f1b1e" stroke-width="6" fill="none"/>331 </svg>332 </div>333 </div>334 </div>335 </div>336 337 <!-- Bottom gesture bar -->338 <div class="gesture"></div>339 340</div>341</body>342</html>