GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>UI Render</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Helvetica Neue", Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #FFFFFF; border-radius: 0; box-shadow: none;12 }13 14 /* Status bar */15 .status-bar {16 height: 84px; background: #0f1f4d; color: #f5f8ff;17 display: flex; align-items: center; padding: 0 36px; font-weight: 600; font-size: 34px;18 }19 .status-bar .left { flex: 1; }20 .status-bar .right { display: flex; align-items: center; gap: 24px; font-size: 30px; }21 .battery { display: flex; align-items: center; gap: 10px; }22 .battery svg { width: 40px; height: 40px; }23 24 /* Header */25 .header {26 background: #0f1f4d; color: #fff; padding: 28px 36px 36px 36px;27 }28 .header-top {29 display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px;30 }31 .icon-btn { background: transparent; border: none; padding: 10px; cursor: default; }32 .icon-btn svg { width: 44px; height: 44px; }33 .title {34 font-size: 48px; font-weight: 800; letter-spacing: 0.2px;35 }36 .subtitle {37 font-size: 28px; opacity: 0.9; margin-top: 8px;38 }39 40 /* Tabs */41 .tabs-wrap {42 background: #F6F6F9; padding: 26px 36px 16px 36px; border-bottom: 1px solid #e7e7ee;43 }44 .transport-tabs {45 display: flex; justify-content: space-between; align-items: stretch;46 }47 .tab {48 width: 30%; text-align: center; color: #9aa2b2;49 }50 .tab svg { width: 64px; height: 64px; margin-bottom: 10px; }51 .tab .price { font-size: 34px; font-weight: 800; margin-top: 4px; }52 .tab .dur { font-size: 26px; color: #8c93a3; }53 .tab.disabled .price { font-weight: 600; color: #c6cbd8; }54 .tab.active { color: #213262; }55 .tab.active .price { color: #213262; }56 .active-underline {57 height: 10px; width: 330px; background: #ef6f6f; border-radius: 6px;58 margin: 18px auto 0 auto;59 }60 61 /* Warning box */62 .warning {63 margin: 26px 36px; padding: 28px; background: #FFF3DE; color: #8A5A2B;64 border: 2px solid #E8C17A; border-radius: 22px; line-height: 1.35;65 display: flex; gap: 22px; align-items: flex-start;66 }67 .warning .bold { font-weight: 800; font-size: 34px; }68 .warning .sub { font-size: 28px; color: #9A6F3F; margin-top: 6px; }69 .warning .icon { width: 52px; height: 52px; flex-shrink: 0; margin-top: 6px; }70 71 /* Filter chips */72 .filters { display: flex; gap: 20px; padding: 8px 36px 24px 36px; }73 .chip {74 padding: 22px 28px; background: #F0F4FF; color: #334471; border-radius: 36px;75 font-size: 30px; font-weight: 600; display: flex; align-items: center; gap: 18px;76 box-shadow: 0 2px 0 rgba(0,0,0,0.02) inset;77 }78 .chip.inactive { color: #B5BCD0; background: #F6F7FB; }79 .chip svg { width: 40px; height: 40px; }80 81 /* Card */82 .card {83 margin: 20px 36px; border-radius: 28px; background: #fff; box-shadow: 0 10px 24px rgba(30,40,70,0.15);84 padding: 28px;85 }86 .card .tag {87 color: #2CA870; font-weight: 800; letter-spacing: 1px; font-size: 28px; margin-bottom: 14px;88 }89 .logo-placeholder {90 width: 220px; height: 66px; background: #E0E0E0; border: 1px solid #BDBDBD;91 display: flex; align-items: center; justify-content: center; color: #757575; border-radius: 10px;92 font-size: 26px; margin-bottom: 12px;93 }94 .times {95 display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 24px;96 color: #1c2b59; margin-top: 8px;97 }98 .times .t { font-size: 48px; font-weight: 800; }99 .times .dur {100 font-size: 30px; color: #9aa2b2; font-weight: 700;101 position: relative; padding: 0 18px;102 }103 .times .dur::before, .times .dur::after {104 content: ""; position: absolute; top: 50%; width: 120px; height: 2px; background: #dfe3ea;105 }106 .times .dur::before { left: -130px; }107 .times .dur::after { right: -130px; }108 109 .locations {110 display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin-top: 10px;111 color: #3b4a77; font-size: 28px; line-height: 1.3;112 }113 114 .card-bottom {115 margin-top: 26px; display: flex; align-items: center; justify-content: space-between;116 }117 .transfer-pill {118 padding: 20px 26px; background: #DBE8FF; color: #3b4a77; border-radius: 32px;119 font-size: 30px; font-weight: 700; display: inline-flex; align-items: center; gap: 14px;120 }121 .transfer-pill svg { width: 32px; height: 32px; }122 .price-area { text-align: right; }123 .price-area .price { font-size: 46px; font-weight: 900; color: #16265a; }124 .price-area .meta { margin-top: 6px; font-size: 28px; color: #6b7798; display: inline-flex; align-items: center; gap: 12px; }125 .price-area .meta svg { width: 32px; height: 32px; }126 127 /* Small print */128 .small-print {129 text-align: center; color: #2b3c6d; font-weight: 800; font-size: 30px; margin: 46px 36px;130 }131 132 /* Spacer and bottom bar */133 .spacer { height: 1200px; }134 .bottom-bar {135 position: absolute; bottom: 0; left: 0; right: 0; height: 160px; background: #0f1f4d;136 display: flex; align-items: center; justify-content: center;137 }138 .home-indicator {139 width: 300px; height: 12px; background: #e6e8ef; border-radius: 8px; opacity: 0.9;140 }141</style>142</head>143<body>144<div id="render-target">145 146 <!-- Android-style status bar -->147 <div class="status-bar">148 <div class="left">9:04</div>149 <div class="right">150 <span>•</span>151 <div class="battery">152 <svg viewBox="0 0 24 24" fill="none">153 <rect x="2" y="6" width="18" height="12" rx="3" stroke="#fff" stroke-width="2"></rect>154 <rect x="3.5" y="7.5" width="14" height="9" rx="2" fill="#ffffff"></rect>155 <rect x="20" y="10" width="2.5" height="4" rx="1" fill="#fff"></rect>156 </svg>157 100%158 </div>159 </div>160 </div>161 162 <!-- Header -->163 <div class="header">164 <div class="header-top">165 <button class="icon-btn" aria-label="Back">166 <svg viewBox="0 0 24 24">167 <path d="M14 4 L6 12 L14 20" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>168 </svg>169 </button>170 <svg viewBox="0 0 24 24">171 <circle cx="17" cy="5" r="2.2" fill="#b9c3ff"></circle>172 <circle cx="7" cy="12" r="2.2" fill="#b9c3ff"></circle>173 <circle cx="17" cy="19" r="2.2" fill="#b9c3ff"></circle>174 <path d="M8.8 12 L15 7 M8.8 12 L15 17" stroke="#b9c3ff" stroke-width="2.2" stroke-linecap="round"></path>175 </svg>176 </div>177 <div class="title">New York, NY › New Hyde Park, NY</div>178 <div class="subtitle">Wed, Nov 22, 1 passenger</div>179 </div>180 181 <!-- Tabs -->182 <div class="tabs-wrap">183 <div class="transport-tabs">184 <div class="tab disabled">185 <svg viewBox="0 0 24 24">186 <rect x="4" y="6" width="16" height="11" rx="3" fill="#ccd2df"></rect>187 <rect x="7" y="9" width="10" height="3" rx="1" fill="#e2e6ef"></rect>188 <circle cx="8" cy="19" r="2" fill="#cbd1de"></circle>189 <circle cx="16" cy="19" r="2" fill="#cbd1de"></circle>190 </svg>191 <div class="price">-</div>192 </div>193 <div class="tab active">194 <svg viewBox="0 0 24 24">195 <rect x="3" y="6" width="18" height="10" rx="2" fill="#233767"></rect>196 <rect x="5" y="9" width="8" height="3" rx="1" fill="#fff"></rect>197 <circle cx="8" cy="19" r="2" fill="#233767"></circle>198 <circle cx="16" cy="19" r="2" fill="#233767"></circle>199 </svg>200 <div class="price">$13</div>201 <div class="dur">1h25m</div>202 </div>203 <div class="tab disabled">204 <svg viewBox="0 0 24 24">205 <path d="M2 14 L22 10 L15 13 L17 18 L12 16 L9 20 L9 15 L5 16 Z" fill="#ccd2df"></path>206 </svg>207 <div class="price">-</div>208 </div>209 </div>210 <div class="active-underline"></div>211 </div>212 213 <!-- Warning -->214 <div class="warning">215 <svg class="icon" viewBox="0 0 24 24">216 <circle cx="12" cy="12" r="10" fill="#F6C26B"></circle>217 <rect x="11" y="6" width="2" height="8" rx="1" fill="#8A5A2B"></rect>218 <circle cx="12" cy="17.5" r="1.5" fill="#8A5A2B"></circle>219 </svg>220 <div>221 <div class="bold">We have no buses to New Hyde Park, NY</div>222 <div class="sub">Try another mode of transport or choose from our nearby locations below</div>223 </div>224 </div>225 226 <!-- Filters -->227 <div class="filters">228 <div class="chip">229 <svg viewBox="0 0 24 24">230 <path d="M7 5 L17 5 M10 10 L14 10 M12 15 L12 20" stroke="#334471" stroke-width="2.2" stroke-linecap="round"></path>231 <path d="M8 15 L16 15" stroke="#334471" stroke-width="2.2" stroke-linecap="round"></path>232 </svg>233 Departure time234 </div>235 <div class="chip">Stops</div>236 <div class="chip inactive">Departure</div>237 <div class="chip inactive">Arrival</div>238 </div>239 240 <!-- Result card -->241 <div class="card">242 <div class="tag">CHEAPEST, FASTEST</div>243 <div class="logo-placeholder">[IMG: Greyhound logo]</div>244 245 <div class="times">246 <div class="t">2:10 PM</div>247 <div class="dur">1h25m</div>248 <div class="t">3:35 PM</div>249 </div>250 251 <div class="locations">252 <div>New York, Port Authority Bus Station, New York, NY</div>253 <div>New York, Hillside Ave / 219th St (Queens Village), New York, NY</div>254 </div>255 256 <div class="card-bottom">257 <div class="transfer-pill">258 0 Transfers259 <svg viewBox="0 0 24 24">260 <path d="M6 9 L12 15 L18 9" fill="none" stroke="#3b4a77" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"></path>261 </svg>262 </div>263 <div class="price-area">264 <div class="price">$13</div>265 <div class="meta">266 <svg viewBox="0 0 24 24">267 <circle cx="12" cy="7" r="3" fill="#6b7798"></circle>268 <path d="M6 20 C6 16 18 16 18 20 Z" fill="#6b7798"></path>269 </svg>270 1 • One-way271 </div>272 </div>273 </div>274 </div>275 276 <div class="small-print">Our small print, Terms of use and Privacy Policy</div>277 278 <div class="spacer"></div>279 280 <div class="bottom-bar">281 <div class="home-indicator"></div>282 </div>283</div>284</body>285</html>