GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI Render</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #f2f4f6;13 border-radius: 28px;14 box-shadow: 0 20px 40px rgba(0,0,0,0.15);15 }16 17 /* Top map area */18 .map {19 position: absolute;20 left: 0; top: 0;21 width: 1080px; height: 420px;22 background: #E0E0E0;23 border-bottom: 1px solid #cfd8dc;24 display: flex; align-items: center; justify-content: center;25 color: #757575; font-weight: 600;26 letter-spacing: 0.2px;27 }28 29 /* Status bar */30 .status {31 position: absolute; top: 12px; left: 20px; right: 20px;32 height: 40px; display: flex; align-items: center; justify-content: space-between;33 font-size: 28px; color: #1b1b1b;34 }35 .status-icons { display: flex; gap: 16px; align-items: center; }36 37 /* Floating back button on map */38 .back-btn {39 position: absolute; top: 92px; left: 28px;40 width: 98px; height: 98px; border-radius: 50%;41 background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.18);42 display: flex; align-items: center; justify-content: center;43 }44 .back-btn svg { width: 42px; height: 42px; fill: none; stroke: #2b3a43; stroke-width: 8; }45 46 /* End marker on map */47 .end-marker {48 position: absolute; top: 148px; left: 480px;49 background: #E0E0E0; border: 1px solid #BDBDBD; color: #2e7d32;50 width: 110px; height: 64px; border-radius: 12px;51 display: flex; align-items: center; justify-content: center; font-weight: 700;52 }53 54 /* Overlay panel */55 .panel {56 position: absolute; left: 0; top: 220px;57 width: 1080px; height: 1240px;58 background: #3e6280;59 border-top-left-radius: 26px;60 border-top-right-radius: 26px;61 box-shadow: 0 -10px 20px rgba(0,0,0,0.2) inset;62 padding: 30px;63 }64 65 /* Search bar */66 .search-bar {67 width: 1020px; height: 130px; background: #fff;68 border-radius: 28px; display: flex; align-items: center;69 padding: 0 26px; box-shadow: 0 8px 16px rgba(0,0,0,0.08);70 }71 .search-left {72 display: flex; align-items: center; gap: 18px;73 color: #4a4a4a; font-size: 36px;74 }75 .search-left .label {76 background: #eaf3ff; color: #113c5c; font-weight: 700;77 padding: 12px 18px; border-radius: 16px; font-size: 32px;78 }79 .search-right {80 margin-left: auto; display: flex; align-items: center; gap: 18px;81 }82 .icon-btn {83 width: 86px; height: 86px; border-radius: 20px; background: #eaf3ff;84 display: flex; align-items: center; justify-content: center;85 }86 .icon-btn svg { width: 46px; height: 46px; }87 88 /* Quick filter buttons */89 .quick-row {90 margin-top: 28px; display: flex; gap: 26px;91 }92 .quick-item {93 flex: 1; height: 120px; border-radius: 26px; background: #2d536d;94 display: flex; align-items: center; justify-content: center;95 }96 .quick-item svg { width: 48px; height: 48px; stroke: #fff; fill: none; stroke-width: 8; }97 98 .section-title {99 color: #dbe7ef; font-size: 42px; margin: 26px 6px 18px;100 font-weight: 700;101 }102 103 /* List cards */104 .card {105 width: 1020px; min-height: 150px; background: #fff; border-radius: 26px;106 display: flex; align-items: center; padding: 26px; margin: 16px 0;107 box-shadow: 0 10px 16px rgba(0,0,0,0.08);108 }109 .card .left-icon {110 width: 86px; height: 86px; border-radius: 50%; background: #f0f0f0;111 display: flex; align-items: center; justify-content: center; margin-right: 26px;112 }113 .card .left-icon svg { width: 40px; height: 40px; }114 .card .texts { flex: 1; }115 .card .title {116 font-size: 42px; color: #1b1b1b; font-weight: 700; line-height: 1.2;117 }118 .card .subtitle { font-size: 32px; color: #6b6b6b; margin-top: 8px; }119 .card .dots {120 width: 60px; height: 100%; display: flex; align-items: center; justify-content: center;121 }122 .dots svg { width: 14px; height: 60px; fill: #9e9e9e; }123 124 .set-btn {125 margin-left: 16px; background: #f7f7f7; border: 1px solid #d0d0d0;126 color: #555; font-weight: 700; padding: 16px 28px; border-radius: 30px; font-size: 34px;127 }128 129 /* Keyboard placeholder */130 .keyboard {131 position: absolute; left: 0; bottom: 0;132 width: 1080px; height: 880px; background: #0f0f10;133 border-top-left-radius: 26px; border-top-right-radius: 26px;134 padding: 28px 24px; box-shadow: 0 -8px 28px rgba(0,0,0,0.5);135 }136 .keys {137 display: grid; grid-template-columns: repeat(10, 1fr);138 grid-auto-rows: 120px; gap: 16px;139 }140 .key {141 background: #1e1e1f; border-radius: 18px; color: #dcdcdc; font-size: 42px;142 display: flex; align-items: center; justify-content: center;143 }144 .key.small { grid-column: span 1; }145 .key.wide { grid-column: span 2; }146 .key.widest { grid-column: span 3; }147 .keyboard-bottom {148 margin-top: 26px; display: flex; gap: 16px;149 }150 .search-fab {151 position: absolute; right: 28px; bottom: 28px;152 width: 140px; height: 140px; background: #baf9f4;153 border-radius: 40px; display: flex; align-items: center; justify-content: center;154 }155 .search-fab svg { width: 62px; height: 62px; stroke: #0a3733; stroke-width: 8; fill: none; }156</style>157</head>158<body>159<div id="render-target">160 161 <div class="map">[IMG: City Map]</div>162 163 <!-- Status bar -->164 <div class="status">165 <div>7:41</div>166 <div class="status-icons">167 <span>28°</span>168 <span>📶</span>169 <span>🔋</span>170 </div>171 </div>172 173 <!-- Back button -->174 <div class="back-btn">175 <svg viewBox="0 0 24 24">176 <path d="M15 5 L7 12 L15 19" />177 </svg>178 </div>179 180 <!-- End marker -->181 <div class="end-marker">End</div>182 183 <!-- Panel -->184 <div class="panel">185 <div class="search-bar">186 <div class="search-left">187 <svg width="46" height="46" viewBox="0 0 24 24">188 <circle cx="10" cy="10" r="7" stroke="#4a4a4a" stroke-width="2" fill="none"/>189 <path d="M21 21 L15.5 15.5" stroke="#4a4a4a" stroke-width="2" />190 </svg>191 <span class="label">End</span>192 <span>Where to?</span>193 </div>194 <div class="search-right">195 <div class="icon-btn">196 <svg viewBox="0 0 24 24">197 <path d="M7 7 L12 7 L12 2" stroke="#1c4c6e" stroke-width="2" fill="none"/>198 <path d="M17 17 L12 17 L12 22" stroke="#1c4c6e" stroke-width="2" fill="none"/>199 <path d="M12 2 C18 3, 21 8, 20 12" stroke="#1c4c6e" stroke-width="2" fill="none"/>200 <path d="M12 22 C6 21, 3 16, 4 12" stroke="#1c4c6e" stroke-width="2" fill="none"/>201 </svg>202 </div>203 </div>204 </div>205 206 <div class="quick-row">207 <div class="quick-item">208 <svg viewBox="0 0 24 24">209 <circle cx="12" cy="12" r="9" />210 <path d="M12 6 L12 12 L17 14" />211 </svg>212 </div>213 <div class="quick-item">214 <svg viewBox="0 0 24 24" fill="#fff" stroke="none">215 <path d="M12 2 L14.8 8.2 L21.5 9.1 L16.5 13.6 L17.9 20.2 L12 16.8 L6.1 20.2 L7.5 13.6 L2.5 9.1 L9.2 8.2 Z"/>216 </svg>217 </div>218 <div class="quick-item">219 <svg viewBox="0 0 24 24">220 <rect x="3" y="5" width="18" height="16" rx="2" />221 <path d="M7 5 V2 M17 5 V2" />222 <path d="M3 10 H21" />223 </svg>224 </div>225 </div>226 227 <div class="section-title">24 hours</div>228 229 <!-- Card 1 -->230 <div class="card">231 <div class="left-icon">232 <svg viewBox="0 0 24 24" fill="#333">233 <rect x="4" y="6" width="16" height="10" rx="2"></rect>234 <rect x="6" y="8" width="4" height="3" fill="#999"></rect>235 <rect x="14" y="8" width="4" height="3" fill="#999"></rect>236 <circle cx="8" cy="18" r="1.5"></circle>237 <circle cx="16" cy="18" r="1.5"></circle>238 </svg>239 </div>240 <div class="texts">241 <div class="title">Grand Av - Newtown</div>242 <div class="subtitle">Station · M · R</div>243 </div>244 <div class="dots">245 <svg viewBox="0 0 6 24">246 <circle cx="3" cy="4" r="2"></circle>247 <circle cx="3" cy="12" r="2"></circle>248 <circle cx="3" cy="20" r="2"></circle>249 </svg>250 </div>251 </div>252 253 <!-- Card 2 -->254 <div class="card">255 <div class="left-icon">256 <svg viewBox="0 0 24 24" stroke="#333" fill="none" stroke-width="2">257 <circle cx="12" cy="12" r="9"></circle>258 <path d="M12 7 V12 L16 14"></path>259 </svg>260 </div>261 <div class="texts">262 <div class="title">Times Square (sample place)</div>263 </div>264 <div class="dots">265 <svg viewBox="0 0 6 24">266 <circle cx="3" cy="4" r="2"></circle>267 <circle cx="3" cy="12" r="2"></circle>268 <circle cx="3" cy="20" r="2"></circle>269 </svg>270 </div>271 </div>272 273 <!-- Card 3 -->274 <div class="card">275 <div class="left-icon">276 <svg viewBox="0 0 24 24" stroke="#2e7d32" fill="none" stroke-width="2">277 <path d="M12 3 C16 3, 19 6, 19 10 C19 14, 12 21, 12 21 C12 21, 5 14, 5 10 C5 6, 8 3, 12 3 Z"></path>278 <circle cx="12" cy="10" r="3"></circle>279 </svg>280 </div>281 <div class="texts">282 <div class="title">Home</div>283 </div>284 <div class="dots">285 <svg viewBox="0 0 6 24">286 <circle cx="3" cy="4" r="2"></circle>287 <circle cx="3" cy="12" r="2"></circle>288 <circle cx="3" cy="20" r="2"></circle>289 </svg>290 </div>291 </div>292 293 <!-- Card 4 -->294 <div class="card">295 <div class="left-icon">296 <svg viewBox="0 0 24 24" stroke="#2e7d32" fill="none" stroke-width="2">297 <path d="M12 3 C16 3, 19 6, 19 10 C19 14, 12 21, 12 21 C12 21, 5 14, 5 10 C5 6, 8 3, 12 3 Z"></path>298 <circle cx="12" cy="10" r="3"></circle>299 </svg>300 </div>301 <div class="texts">302 <div class="title">Work</div>303 </div>304 <button class="set-btn">SET</button>305 </div>306 </div>307 308 <!-- Keyboard placeholder -->309 <div class="keyboard">310 <div class="keys">311 <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>312 <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><div class="key">↵</div>313 <div class="key wide">shift</div><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><div class="key wide">⌫</div><div class="key">.</div>314 </div>315 <div class="keyboard-bottom">316 <div class="key wide">?123</div>317 <div class="key">,</div>318 <div class="key wide">😊</div>319 <div class="key widest">space</div>320 <div class="key">.</div>321 </div>322 <div class="search-fab">323 <svg viewBox="0 0 24 24">324 <circle cx="10" cy="10" r="7"></circle>325 <path d="M21 21 L15.5 15.5"></path>326 </svg>327 </div>328 </div>329 330</div>331</body>332</html>