GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI Render</title>5<style>6 body {7 margin: 0;8 padding: 0;9 background: transparent;10 font-family: Arial, Helvetica, sans-serif;11 }12 #render-target {13 width: 1080px;14 height: 2400px;15 position: relative;16 overflow: hidden;17 background: #f2f4f7;18 border-radius: 0;19 }20 21 /* Map area */22 .map-area {23 position: absolute;24 left: 0;25 top: 0;26 width: 1080px;27 height: 1820px;28 background: #E0E0E0;29 border: 1px solid #BDBDBD;30 display: flex;31 align-items: center;32 justify-content: center;33 color: #555;34 font-size: 28px;35 letter-spacing: 0.2px;36 }37 38 /* Search bar */39 .search-bar {40 position: absolute;41 top: 110px;42 left: 34px;43 width: 900px;44 height: 120px;45 background: #fff;46 border-radius: 60px;47 box-shadow: 0 6px 16px rgba(0,0,0,0.15);48 display: flex;49 align-items: center;50 padding: 0 30px;51 gap: 24px;52 }53 .search-icon {54 width: 40px;55 height: 40px;56 color: #5f6368;57 }58 .search-text {59 flex: 1;60 color: #737373;61 font-size: 40px;62 }63 .mic {64 width: 40px;65 height: 40px;66 color: #5f6368;67 }68 .account {69 position: absolute;70 right: 34px;71 top: 110px;72 width: 120px;73 height: 120px;74 background: #1a8f78;75 color: #fff;76 border-radius: 60px;77 display: flex;78 align-items: center;79 justify-content: center;80 font-weight: bold;81 font-size: 48px;82 box-shadow: 0 6px 16px rgba(0,0,0,0.15);83 }84 85 /* Chips row */86 .chips {87 position: absolute;88 top: 260px;89 left: 34px;90 display: flex;91 gap: 22px;92 }93 .chip {94 display: flex;95 align-items: center;96 gap: 18px;97 padding: 22px 28px;98 background: #fff;99 border: 1px solid #e5e5e5;100 border-radius: 60px;101 box-shadow: 0 6px 14px rgba(0,0,0,0.08);102 font-size: 36px;103 color: #222;104 }105 .chip svg {106 width: 42px;107 height: 42px;108 color: #444;109 }110 111 /* Floating buttons */112 .layers-btn {113 position: absolute;114 right: 36px;115 top: 380px;116 width: 120px;117 height: 120px;118 background: #fff;119 border-radius: 60px;120 box-shadow: 0 6px 16px rgba(0,0,0,0.20);121 display: flex;122 align-items: center;123 justify-content: center;124 }125 .compass-btn {126 position: absolute;127 right: 36px;128 top: 1140px;129 width: 140px;130 height: 140px;131 background: #fff;132 border-radius: 70px;133 box-shadow: 0 6px 16px rgba(0,0,0,0.20);134 display: flex;135 align-items: center;136 justify-content: center;137 }138 .dir-btn {139 position: absolute;140 right: 48px;141 bottom: 580px;142 width: 160px;143 height: 160px;144 background: #257BFF;145 border-radius: 36px;146 box-shadow: 0 10px 20px rgba(37,123,255,0.45);147 display: flex;148 align-items: center;149 justify-content: center;150 }151 .dir-btn svg {152 width: 80px; height: 80px; color: #fff;153 }154 155 /* Google watermark on map */156 .google-watermark {157 position: absolute;158 left: 36px;159 bottom: 770px;160 font-size: 46px;161 color: #2f78f8;162 font-weight: bold;163 }164 165 /* Bottom Sheet */166 .bottom-sheet {167 position: absolute;168 left: 0;169 bottom: 170px;170 width: 1080px;171 height: 610px;172 background: #fff;173 border-top-left-radius: 32px;174 border-top-right-radius: 32px;175 box-shadow: 0 -8px 20px rgba(0,0,0,0.12);176 }177 .grabber {178 position: absolute;179 top: 14px;180 left: 50%;181 transform: translateX(-50%);182 width: 120px;183 height: 12px;184 background: #E0E0E0;185 border-radius: 6px;186 }187 .sheet-content {188 padding: 44px 34px 30px 34px;189 }190 .sheet-title {191 font-size: 64px;192 font-weight: 600;193 color: #111;194 margin-bottom: 30px;195 }196 .author-row {197 display: flex;198 align-items: center;199 justify-content: space-between;200 margin-bottom: 30px;201 }202 .author-left {203 display: flex;204 align-items: center;205 gap: 26px;206 }207 .avatar {208 width: 100px;209 height: 100px;210 border-radius: 50%;211 background: #CFCFCF;212 border: 1px solid #BDBDBD;213 }214 .author-meta {215 display: flex;216 flex-direction: column;217 }218 .author-name {219 font-size: 46px;220 color: #111;221 font-weight: 600;222 }223 .author-sub {224 font-size: 34px;225 color: #666;226 }227 .follow-btn {228 background: #f0f6ff;229 color: #2f78f8;230 border: 1px solid #cfe0ff;231 padding: 16px 30px;232 border-radius: 28px;233 font-size: 40px;234 font-weight: 600;235 }236 .photo-card {237 width: 1010px;238 height: 360px;239 background: #E0E0E0;240 border: 1px solid #BDBDBD;241 border-radius: 22px;242 display: flex;243 align-items: center;244 justify-content: center;245 color: #666;246 font-size: 34px;247 margin-top: 10px;248 }249 250 /* Bottom Navigation */251 .bottom-nav {252 position: absolute;253 left: 0;254 bottom: 0;255 width: 1080px;256 height: 170px;257 background: #fff;258 border-top: 1px solid #e7e7e7;259 display: flex;260 align-items: center;261 justify-content: space-around;262 }263 .nav-item {264 display: flex;265 flex-direction: column;266 align-items: center;267 gap: 10px;268 color: #1a73e8;269 }270 .nav-item svg {271 width: 60px;272 height: 60px;273 }274 .nav-label {275 font-size: 36px;276 color: #1a73e8;277 font-weight: 600;278 }279 .nav-item.secondary {280 color: #777;281 }282 .nav-item.secondary .nav-label {283 color: #777;284 font-weight: 500;285 }286</style>287</head>288<body>289<div id="render-target">290 291 <!-- Map background -->292 <div class="map-area">[IMG: Google Map region with roads, lakes and traffic]</div>293 294 <!-- Search bar -->295 <div class="search-bar">296 <svg class="search-icon" viewBox="0 0 24 24">297 <circle cx="11" cy="11" r="7" fill="none" stroke="currentColor" stroke-width="2"></circle>298 <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="currentColor" stroke-width="2" stroke-linecap="round"></line>299 </svg>300 <div class="search-text">Search here</div>301 <svg class="mic" viewBox="0 0 24 24">302 <rect x="9" y="4" width="6" height="10" rx="3" fill="currentColor"></rect>303 <path d="M6 11c0 4 3 6 6 6s6-2 6-6" fill="none" stroke="currentColor" stroke-width="2"></path>304 <line x1="12" y1="17" x2="12" y2="22" stroke="currentColor" stroke-width="2" stroke-linecap="round"></line>305 <line x1="8" y1="22" x2="16" y2="22" stroke="currentColor" stroke-width="2" stroke-linecap="round"></line>306 </svg>307 </div>308 <div class="account">C</div>309 310 <!-- Chips -->311 <div class="chips">312 <div class="chip">313 <svg viewBox="0 0 24 24">314 <path d="M7 4h2v8H7zm8 0h2v8h-2zM4 14h16v2H4z" fill="currentColor"></path>315 </svg>316 <span>Restaurants</span>317 </div>318 <div class="chip">319 <svg viewBox="0 0 24 24">320 <rect x="5" y="5" width="10" height="10" rx="2" fill="currentColor"></rect>321 <path d="M15 9h4v2h-4zM8 15v4" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>322 </svg>323 <span>Petrol</span>324 </div>325 <div class="chip">326 <svg viewBox="0 0 24 24">327 <path d="M3 6h18l-2 10H5L3 6zm5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z" fill="currentColor"></path>328 </svg>329 <span>Groceries</span>330 </div>331 </div>332 333 <!-- Floating buttons -->334 <div class="layers-btn">335 <svg viewBox="0 0 24 24" width="54" height="54">336 <path d="M12 3l9 5-9 5-9-5 9-5zm-9 9l9 5 9-5" fill="none" stroke="#444" stroke-width="2" stroke-linejoin="round"></path>337 </svg>338 </div>339 340 <div class="compass-btn">341 <svg viewBox="0 0 24 24" width="70" height="70">342 <circle cx="12" cy="12" r="10" fill="none" stroke="#333" stroke-width="2"></circle>343 <path d="M12 6l3 6-6 3 3-9z" fill="#ff3b30" stroke="#333" stroke-width="1"></path>344 </svg>345 </div>346 347 <div class="dir-btn">348 <svg viewBox="0 0 24 24">349 <path d="M12 3l9 9-9 9-9-9 9-9zm0 5v8m-4-4h8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>350 </svg>351 </div>352 353 <div class="google-watermark">Google</div>354 355 <!-- Bottom sheet -->356 <div class="bottom-sheet">357 <div class="grabber"></div>358 <div class="sheet-content">359 <div class="sheet-title">Latest in the area</div>360 <div class="author-row">361 <div class="author-left">362 <div class="avatar"></div>363 <div class="author-meta">364 <div class="author-name">Charles Burmeister</div>365 <div class="author-sub">Local Guide · 65 photos</div>366 </div>367 </div>368 <button class="follow-btn">Follow</button>369 </div>370 <div class="photo-card">[IMG: Scenic forest stream photo]</div>371 </div>372 </div>373 374 <!-- Bottom navigation -->375 <div class="bottom-nav">376 <div class="nav-item">377 <svg viewBox="0 0 24 24">378 <path d="M12 2l7 8-7 12-7-12 7-8z" fill="#1a73e8"></path>379 <circle cx="12" cy="10" r="2" fill="#fff"></circle>380 </svg>381 <div class="nav-label">Explore</div>382 </div>383 <div class="nav-item secondary">384 <svg viewBox="0 0 24 24">385 <rect x="3" y="10" width="18" height="7" rx="2" fill="#777"></rect>386 <path d="M5 10l3-4h8l3 4" fill="none" stroke="#777" stroke-width="2"></path>387 </svg>388 <div class="nav-label">Go</div>389 </div>390 <div class="nav-item secondary">391 <svg viewBox="0 0 24 24">392 <path d="M6 4h12v16l-6-4-6 4V4z" fill="#777"></path>393 </svg>394 <div class="nav-label">Saved</div>395 </div>396 <div class="nav-item secondary">397 <svg viewBox="0 0 24 24">398 <circle cx="12" cy="8" r="3" fill="#777"></circle>399 <path d="M6 20v-3a6 6 0 0 1 12 0v3" stroke="#777" stroke-width="2" fill="none"></path>400 <line x1="12" y1="2" x2="12" y2="5" stroke="#777" stroke-width="2" stroke-linecap="round"></line>401 <line x1="7" y1="5" x2="17" y2="5" stroke="#777" stroke-width="2" stroke-linecap="round"></line>402 </svg>403 <div class="nav-label">Contribute</div>404 </div>405 <div class="nav-item secondary">406 <svg viewBox="0 0 24 24">407 <path d="M12 3c4 0 7 3 7 7v5l2 2H3l2-2v-5c0-4 3-7 7-7z" fill="#777"></path>408 <circle cx="12" cy="19" r="2" fill="#777"></circle>409 </svg>410 <div class="nav-label">Updates</div>411 </div>412 </div>413 414</div>415</body>416</html>