GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Mobile UI Mock</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;9 position: relative; overflow: hidden;10 background: #3f647f;11 }12 13 /* Top map area */14 .map {15 position: absolute; left: 0; top: 0; width: 1080px; height: 420px;16 background: #e7ebef;17 border-bottom: 2px solid #cfd8dc;18 display: flex; align-items: center; justify-content: center;19 color: #757575; font-size: 26px; letter-spacing: 0.5px;20 }21 .status-bar {22 position: absolute; top: 18px; left: 20px; right: 20px;23 display: flex; justify-content: space-between; align-items: center;24 color: #2b2b2b; font-size: 28px;25 }26 .status-right { display: flex; align-items: center; gap: 24px; }27 28 /* Back button */29 .back-btn {30 position: absolute; top: 78px; left: 26px;31 width: 110px; height: 110px; border-radius: 55px;32 background: #ffffff; box-shadow: 0 6px 14px rgba(0,0,0,0.15);33 display: flex; align-items: center; justify-content: center;34 }35 .back-btn svg { width: 40px; height: 40px; }36 37 /* Search bar */38 .search-bar {39 position: absolute; top: 160px; left: 30px; width: 1020px; height: 130px;40 background: #ffffff; border-radius: 26px;41 box-shadow: 0 14px 22px rgba(0,0,0,0.18);42 display: flex; align-items: center; padding: 0 26px;43 gap: 18px;44 }45 .search-text { font-size: 40px; color: #2d3b45; }46 .search-text .accent { color: #2d6ea1; font-weight: 700; margin-right: 8px; }47 .swap {48 margin-left: auto; width: 84px; height: 84px; border-radius: 42px;49 background: #eaf2f7; display: flex; align-items: center; justify-content: center;50 }51 .swap svg { width: 44px; height: 44px; }52 53 /* Location card */54 .location-card {55 position: absolute; top: 320px; left: 30px; width: 1020px; height: 120px;56 background: #dbe8f5; border-radius: 26px;57 display: flex; align-items: center; padding: 0 30px; gap: 20px;58 }59 .loc-dot {60 width: 34px; height: 34px; border-radius: 17px; border: 3px solid #2e6ea3;61 background: #ffffff;62 }63 .location-card span { font-size: 36px; color: #274254; }64 65 /* Quick action buttons */66 .quick-actions {67 position: absolute; top: 480px; left: 30px; right: 30px;68 display: flex; gap: 30px;69 }70 .qa {71 flex: 1; height: 160px; background: #345b76; border-radius: 26px;72 display: flex; align-items: center; justify-content: center;73 }74 .qa svg { width: 70px; height: 70px; fill: #ffffff; }75 76 /* Section title */77 .section-title {78 position: absolute; top: 650px; left: 30px;79 color: #e4eef6; font-size: 40px; font-weight: 600;80 }81 82 /* Cards list */83 .card {84 position: absolute; left: 30px; width: 1020px; height: 150px;85 background: #ffffff; border-radius: 26px; box-shadow: 0 10px 18px rgba(0,0,0,0.15);86 display: flex; align-items: center; padding: 0 30px; gap: 26px;87 }88 .card .title { font-size: 42px; color: #1e2b33; }89 .card .subtitle { font-size: 32px; color: #5b6a77; }90 .ellipsis {91 margin-left: auto; display: flex; flex-direction: column; gap: 8px;92 margin-right: 6px;93 }94 .ellipsis span {95 width: 12px; height: 12px; background: #b0b7bd; border-radius: 6px;96 display: inline-block;97 }98 99 /* Train icon and route badges */100 .train-icon {101 width: 66px; height: 66px; border-radius: 33px; background: #111; color: #fff;102 display: flex; align-items: center; justify-content: center; font-size: 34px;103 }104 .badge {105 display: inline-flex; align-items: center; justify-content: center;106 width: 48px; height: 48px; border-radius: 24px; color: #fff; font-weight: 700;107 font-size: 28px; margin-left: 12px;108 }109 .badge.orange { background: #f28c28; }110 .badge.yellow { background: #f2c94c; color: #333; }111 112 /* Home & Work cards */113 .pin {114 width: 56px; height: 80px; position: relative;115 }116 .pin svg { width: 56px; height: 80px; }117 .set-btn {118 margin-left: auto; margin-right: 20px;119 padding: 18px 30px; border-radius: 28px; border: 2px solid #d1d6db; background: #ffffff;120 color: #37474f; font-size: 32px; font-weight: 600;121 }122 123 /* Keyboard mock */124 .keyboard {125 position: absolute; left: 0; bottom: 0; width: 1080px; height: 900px;126 background: #121416; border-top-left-radius: 22px; border-top-right-radius: 22px;127 box-shadow: 0 -12px 18px rgba(0,0,0,0.35);128 padding: 28px 24px;129 }130 .kb-top { display: flex; gap: 28px; margin-bottom: 22px; }131 .kb-top .pill {132 width: 88px; height: 88px; border-radius: 18px; background: #1f2225;133 display: flex; align-items: center; justify-content: center; color: #cfd8dc; font-size: 34px;134 }135 .keys { display: grid; grid-template-columns: repeat(10, 1fr); gap: 18px; }136 .key {137 height: 110px; border-radius: 16px; background: #1f2225;138 display: flex; align-items: center; justify-content: center; color: #e6eef2; font-size: 46px;139 }140 .key.small { font-size: 40px; }141 .row { margin-top: 22px; }142 .space-row {143 display: grid; grid-template-columns: 140px 1fr 140px 140px; gap: 18px; margin-top: 22px;144 }145 .space { height: 110px; border-radius: 16px; background: #1f2225; color: #e6eef2;146 display: flex; align-items: center; justify-content: center; font-size: 36px;147 }148 .mic { display: flex; align-items: center; justify-content: center; font-size: 42px; color: #c6f7f6; background: #2b9fa2; }149</style>150</head>151<body>152<div id="render-target">153 154 <div class="map">[IMG: Map]</div>155 156 <div class="status-bar">157 <div>7:40</div>158 <div class="status-right">159 <div>28°</div>160 <div>📸</div>161 <div>📶</div>162 <div>📡</div>163 <div>•</div>164 <div>🔋</div>165 </div>166 </div>167 168 <div class="back-btn">169 <svg viewBox="0 0 24 24">170 <path d="M15 6 L9 12 L15 18" stroke="#2f3a43" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>171 </svg>172 </div>173 174 <div class="search-bar">175 <svg viewBox="0 0 24 24" width="44" height="44">176 <circle cx="10" cy="10" r="7" stroke="#3b5366" stroke-width="3" fill="none"></circle>177 <line x1="15.5" y1="15.5" x2="22" y2="22" stroke="#3b5366" stroke-width="3" stroke-linecap="round"></line>178 </svg>179 <div class="search-text"><span class="accent">Start</span>Where from?</div>180 <div class="swap">181 <svg viewBox="0 0 24 24">182 <path d="M4 8 L10 8 L8 6 M20 16 L14 16 L16 18" stroke="#2d6ea1" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>183 <path d="M6 12 L4 10 M18 12 L20 14" stroke="#2d6ea1" stroke-width="2" fill="none"></path>184 </svg>185 </div>186 </div>187 188 <div class="location-card">189 <div class="loc-dot"></div>190 <span>Use current location</span>191 </div>192 193 <div class="quick-actions">194 <div class="qa">195 <svg viewBox="0 0 24 24">196 <circle cx="12" cy="12" r="9"></circle>197 <path d="M12 6 L12 12 L17 14" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round"></path>198 </svg>199 </div>200 <div class="qa">201 <svg viewBox="0 0 24 24">202 <path d="M12 2 L14.8 8.5 L22 9.2 L16.5 13.7 L18.5 21 L12 17.3 L5.5 21 L7.5 13.7 L2 9.2 L9.2 8.5 Z"></path>203 </svg>204 </div>205 <div class="qa">206 <svg viewBox="0 0 24 24">207 <rect x="3" y="5" width="18" height="14" rx="2" ry="2" fill="#ffffff"></rect>208 <rect x="3" y="9" width="18" height="2" fill="#3f647f"></rect>209 <rect x="6" y="2" width="3" height="6" fill="#ffffff"></rect>210 <rect x="15" y="2" width="3" height="6" fill="#ffffff"></rect>211 </svg>212 </div>213 </div>214 215 <div class="section-title">24 hours</div>216 217 <!-- Card: Grand Av - Newtown -->218 <div class="card" style="top: 710px;">219 <div class="train-icon">🚇</div>220 <div>221 <div class="title">Grand Av - Newtown</div>222 <div class="subtitle">Station <span class="badge orange">M</span> <span class="badge yellow">R</span></div>223 </div>224 <div class="ellipsis">225 <span></span><span></span><span></span>226 </div>227 </div>228 229 <!-- Card: Times Square -->230 <div class="card" style="top: 880px;">231 <div style="width:56px; height:56px; border-radius: 10px; background:#e0e0e0; border:1px solid #bdbdbd; display:flex; align-items:center; justify-content:center; color:#757575; font-size:24px;">📍</div>232 <div>233 <div class="title">Times Square (sample place)</div>234 </div>235 <div class="ellipsis">236 <span></span><span></span><span></span>237 </div>238 </div>239 240 <!-- Home and Work -->241 <div class="card" style="top: 1060px;">242 <div class="pin">243 <svg viewBox="0 0 24 24">244 <path d="M12 2 C7 2 4 6 4 9.8 C4 14 7.5 17.5 12 22 C16.5 17.5 20 14 20 9.8 C20 6 17 2 12 2 Z" fill="#6cc26f"></path>245 <circle cx="12" cy="10" r="3" fill="#ffffff"></circle>246 </svg>247 </div>248 <div class="title">Home</div>249 <div class="ellipsis">250 <span></span><span></span><span></span>251 </div>252 </div>253 254 <div class="card" style="top: 1240px;">255 <div class="pin">256 <svg viewBox="0 0 24 24">257 <path d="M12 2 C7 2 4 6 4 9.8 C4 14 7.5 17.5 12 22 C16.5 17.5 20 14 20 9.8 C20 6 17 2 12 2 Z" fill="#6cc26f"></path>258 <rect x="9" y="8" width="6" height="4" fill="#ffffff"></rect>259 </svg>260 </div>261 <div class="title">Work</div>262 <div class="set-btn">SET</div>263 </div>264 265 <!-- Keyboard mock -->266 <div class="keyboard">267 <div class="kb-top">268 <div class="pill">😀</div>269 <div class="pill">GIF</div>270 <div class="pill">G✎</div>271 <div class="pill">⚙️</div>272 <div class="pill">🎨</div>273 <div class="pill">🎤</div>274 </div>275 276 <div class="keys">277 <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>278 <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>279 </div>280 <div class="keys row">281 <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>282 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div><div class="key small">⌫</div>283 </div>284 <div class="keys row">285 <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>286 <div class="key">n</div><div class="key">m</div><div class="key">⎵</div><div class="key">.</div><div class="key">🔍</div>287 </div>288 <div class="space-row">289 <div class="space">?123</div>290 <div class="space">Space</div>291 <div class="space">🙂</div>292 <div class="space mic">🎙️</div>293 </div>294 </div>295 296</div>297</body>298</html>