GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Transit Search - Jamaica</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:#f2f2f2;11 border-radius:0;12 }13 14 /* Map backdrop */15 .map {16 position:absolute; left:0; top:0; right:0; bottom:0;17 background:#e9ecef;18 }19 .map::after{20 content:"[IMG: Google Map / Rail Yard]";21 position:absolute; left:50%; top:120px; transform:translateX(-50%);22 color:#777; font-size:28px; letter-spacing:1px;23 border:1px dashed #bdbdbd; padding:8px 12px; background:#E0E0E0;24 }25 26 /* Status bar */27 .status {28 position:absolute; left:0; top:0; width:100%; height:86px;29 display:flex; align-items:center; justify-content:space-between;30 padding:0 28px; color:#1c1c1c; font-size:34px;31 }32 .status .right { display:flex; gap:18px; align-items:center; }33 .dot { width:8px; height:8px; background:#1c1c1c; border-radius:50%; display:inline-block; }34 35 /* Back button */36 .back-btn {37 position:absolute; left:24px; top:112px;38 width:110px; height:110px; background:#ffffff; border-radius:55px;39 box-shadow:0 1px 2px rgba(0,0,0,0.15);40 display:flex; align-items:center; justify-content:center;41 }42 .back-btn svg { width:42px; height:42px; }43 44 /* Search bar */45 .search-bar {46 position:absolute; left:120px; right:24px; top:106px;47 height:116px; background:#fff; border-radius:20px;48 box-shadow:0 2px 6px rgba(0,0,0,0.12);49 display:flex; align-items:center; padding:0 24px;50 gap:18px;51 }52 .magnifier, .close-x { width:44px; height:44px; }53 .chip {54 background:#e7f1ff; color:#1e5bb8; padding:10px 16px; border-radius:14px;55 font-weight:600; font-size:34px;56 }57 .search-input {58 flex:1; font-size:44px; color:#111;59 }60 61 /* Blue sheet */62 .sheet {63 position:absolute; left:0; right:0; top:330px; bottom:900px;64 background:#3a6283; border-top-left-radius:26px; border-top-right-radius:26px;65 padding:28px 24px 0 24px; overflow:hidden;66 }67 .section-title {68 color:#ffffff; font-size:40px; font-weight:700; margin:8px 6px 18px;69 }70 71 .list {72 height:980px; overflow:hidden; padding-right:6px;73 }74 .item {75 background:#fff; border-radius:22px; padding:26px 24px; margin:12px 6px;76 display:flex; align-items:flex-start; gap:20px; position:relative;77 box-shadow: 0 1px 0 rgba(0,0,0,0.05);78 }79 .circle-icon {80 width:68px; height:68px; border-radius:34px; background:#111; display:flex; align-items:center; justify-content:center;81 color:#fff; font-weight:700; font-size:30px;82 }83 .item .title { font-size:40px; color:#1b1b1b; }84 .item .sub { font-size:30px; color:#6d6d6d; margin-top:6px; }85 .dots {86 position:absolute; right:24px; top:30px; width:10px; display:flex; flex-direction:column; gap:6px;87 }88 .dots span { width:10px; height:10px; background:#bdbdbd; border-radius:50%; display:block; }89 90 .pills { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }91 .pill {92 padding:6px 10px; border-radius:10px; font-size:26px; color:#fff; font-weight:700;93 }94 .p-blue{ background:#1976d2; }95 .p-orange{ background:#ef6c00; }96 .p-yellow{ background:#f9a825; color:#000; }97 .p-brown{ background:#8d6e63; }98 .p-green{ background:#2e7d32; }99 .p-violet{ background:#5e35b1; }100 .p-gray{ background:#607d8b; }101 102 /* Results section */103 .results-head {104 display:flex; align-items:center; justify-content:space-between;105 margin:18px 8px 10px;106 }107 .results-head .title { color:#ffffff; font-size:40px; font-weight:700; }108 .results-map {109 display:flex; align-items:center; gap:12px; color:#d0e6ff; font-size:32px;110 }111 .results-map .mini {112 width:54px; height:44px; border-radius:8px; background:#e0e0e0; border:1px solid #bdbdbd;113 display:flex; align-items:center; justify-content:center; color:#777; font-size:22px;114 }115 .result-card{116 background:#fff; border-radius:20px; padding:26px 24px; margin:10px 6px;117 display:flex; gap:20px; align-items:center;118 }119 .result-card .icon{120 width:64px; height:48px; border-radius:8px; background:#e0e0e0; border:1px solid #bdbdbd;121 display:flex; align-items:center; justify-content:center; color:#777; font-size:22px;122 }123 .result-card .r-title{ font-size:38px; color:#1b1b1b; }124 .result-card .r-sub{ font-size:28px; color:#6d6d6d; }125 126 /* Keyboard */127 .keyboard {128 position:absolute; left:0; right:0; bottom:0; height:900px;129 background:#121212; border-top-left-radius:26px; border-top-right-radius:26px;130 padding:30px 28px;131 }132 .kb-bar {133 display:flex; justify-content:space-between; align-items:center; color:#8f8f8f; font-size:42px; margin-bottom:14px;134 }135 .kb-input {136 display:flex; align-items:center; gap:22px; background:#1b1b1b; color:#fff;137 border-radius:18px; padding:22px 24px; font-size:44px;138 }139 .kb-input .term { color:#fff; }140 .kb-input .divider { width:2px; height:44px; background:#333; }141 .kb-rows { margin-top:28px; }142 .row { display:flex; justify-content:space-between; margin:16px 0; }143 .key {144 width:90px; height:110px; background:#1f1f1f; color:#e9e9e9;145 border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:44px;146 }147 .key.wide { width:140px; }148 .key.extra-wide { flex:1; }149 .search-btn {150 position:absolute; right:28px; bottom:30px; width:140px; height:140px; background:#a9f4ef;151 border-radius:70px; display:flex; align-items:center; justify-content:center;152 }153 .search-btn svg{ width:54px; height:54px; }154</style>155</head>156<body>157<div id="render-target">158 159 <div class="map"></div>160 161 <!-- Status -->162 <div class="status">163 <div>7:44</div>164 <div class="right">165 <div>28°</div>166 <div class="dot"></div>167 <div class="dot"></div>168 <div style="width:34px; height:18px; border:2px solid #1c1c1c; border-radius:4px; position:relative;">169 <div style="position:absolute; top:2px; bottom:2px; left:2px; right:6px; background:#1c1c1c;"></div>170 <div style="position:absolute; right:-8px; top:5px; width:6px; height:8px; background:#1c1c1c; border-radius:1px;"></div>171 </div>172 </div>173 </div>174 175 <!-- Back button -->176 <div class="back-btn">177 <svg viewBox="0 0 24 24" fill="#2b2b2b">178 <path d="M15.5 19L8.5 12l7-7-1.4-1.4L5.7 12l8.4 8.4z"/>179 </svg>180 </div>181 182 <!-- Search bar -->183 <div class="search-bar">184 <svg class="magnifier" viewBox="0 0 24 24" fill="#607d8b">185 <path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 10-.7.7l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 1114 9.5 4.5 4.5 0 019.5 14z"/>186 </svg>187 <div class="chip">End</div>188 <div class="search-input">Jamaica</div>189 <svg class="close-x" viewBox="0 0 24 24" fill="#5f6a72">190 <path d="M18 6L6 18M6 6l12 12" stroke="#5f6a72" stroke-width="2" stroke-linecap="round"/>191 </svg>192 </div>193 194 <!-- Blue sheet with lists -->195 <div class="sheet">196 <div class="section-title">Stations</div>197 <div class="list">198 199 <div class="item">200 <div class="circle-icon">🚉</div>201 <div>202 <div class="title">Jamaica</div>203 <div class="sub">Station</div>204 </div>205 <div class="dots"><span></span><span></span><span></span></div>206 </div>207 208 <div class="item">209 <div class="circle-icon">MTA</div>210 <div>211 <div class="title">Jamaica</div>212 <div class="sub">Station</div>213 <div class="pills">214 <div class="pill p-green">BAB</div>215 <div class="pill p-brown">BEL</div>216 <div class="pill p-blue">CITY</div>217 <div class="pill p-orange">HEMP</div>218 <div class="pill p-green">MON</div>219 <div class="pill p-violet">RON</div>220 <div class="pill p-gray">WHS</div>221 </div>222 </div>223 <div class="dots"><span></span><span></span><span></span></div>224 </div>225 226 <div class="item">227 <div class="circle-icon">🚇</div>228 <div>229 <div class="title">Jamaica - 179 St</div>230 <div class="sub">Station</div>231 <div class="pills"><div class="pill p-orange">F</div></div>232 </div>233 <div class="dots"><span></span><span></span><span></span></div>234 </div>235 236 <div class="item">237 <div class="circle-icon">🚇</div>238 <div>239 <div class="title">Jamaica - Van Wyck</div>240 <div class="sub">Station</div>241 <div class="pills"><div class="pill p-blue">E</div></div>242 </div>243 <div class="dots"><span></span><span></span><span></span></div>244 </div>245 246 <div class="item">247 <div class="circle-icon">🚇</div>248 <div>249 <div class="title">Jamaica Center - Parsons/Archer</div>250 <div class="sub">Station</div>251 <div class="pills">252 <div class="pill p-blue">E</div>253 <div class="pill p-yellow">J</div>254 <div class="pill p-brown">Z</div>255 </div>256 </div>257 <div class="dots"><span></span><span></span><span></span></div>258 </div>259 260 <div class="results-head">261 <div class="title">Results</div>262 <div class="results-map">263 <div class="mini">🗺</div>264 <div>Show on Map</div>265 </div>266 </div>267 268 <div class="result-card">269 <div class="icon">▣</div>270 <div>271 <div class="r-title">Jamaica</div>272 <div class="r-sub">Queens, NY, USA</div>273 </div>274 </div>275 </div>276 </div>277 278 <!-- Keyboard -->279 <div class="keyboard">280 <div class="kb-bar">281 <div style="display:flex; align-items:center; gap:16px;">282 <div style="width:64px; height:64px; background:#1f1f1f; border-radius:14px; display:flex; align-items:center; justify-content:center; color:#e9e9e9;">⌘</div>283 <div>Jamaica</div>284 <div style="width:2px; height:42px; background:#2d2d2d; margin:0 6px;"></div>285 <div style="color:#a0a0a0;">Jamaican</div>286 </div>287 <div style="width:70px; height:70px; background:#1f1f1f; border-radius:16px; display:flex; align-items:center; justify-content:center; color:#e9e9e9;">🎤</div>288 </div>289 290 <div class="kb-rows">291 <div class="row">292 <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>293 </div>294 <div class="row">295 <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>296 </div>297 <div class="row">298 <div class="key wide">⇧</div>299 <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>300 <div class="key wide">⌫</div>301 </div>302 <div class="row">303 <div class="key wide">?123</div>304 <div class="key">,</div>305 <div class="key">😊</div>306 <div class="key extra-wide"></div>307 <div class="key">.</div>308 </div>309 </div>310 311 <div class="search-btn">312 <svg viewBox="0 0 24 24" fill="#083">313 <path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 10-.7.7l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 1114 9.5 4.5 4.5 0 019.5 14z" fill="#1b1b1b"/>314 </svg>315 </div>316 </div>317 318</div>319</body>320</html>