GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>UI Rendering</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #f7f7f7;14 font-family: Arial, Helvetica, sans-serif;15 color: #222;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 120px;25 display: flex;26 align-items: center;27 padding: 0 36px;28 box-sizing: border-box;29 color: #fff;30 z-index: 3;31 }32 .status-left { font-size: 42px; font-weight: 600; letter-spacing: 0.5px; }33 .status-right {34 margin-left: auto;35 display: flex;36 align-items: center;37 gap: 28px;38 }39 .dot { width: 24px; height: 24px; border-radius: 50%; background: #ffffffcc; }40 .wifi {41 width: 36px; height: 28px;42 }43 .battery {44 width: 30px; height: 44px;45 }46 47 /* Hero image */48 .hero {49 position: absolute;50 top: 0;51 left: 0;52 width: 1080px;53 height: 640px;54 background: #E0E0E0;55 border-bottom: 1px solid #BDBDBD;56 display: flex;57 align-items: flex-end;58 justify-content: flex-start;59 }60 .hero::before {61 content: "[IMG: Scenic train landscape]";62 position: absolute;63 left: 50%;64 top: 50%;65 transform: translate(-50%,-50%);66 color: #757575;67 font-size: 34px;68 }69 .hero-title {70 font-size: 90px;71 font-weight: 700;72 color: rgba(255,255,255,0.9);73 padding: 30px 36px;74 text-shadow: 0 2px 8px rgba(0,0,0,0.35);75 }76 77 /* Underlying page content preview */78 .content-card {79 position: absolute;80 top: 680px;81 left: 40px;82 width: 1000px;83 background: #ffffff;84 border-radius: 24px;85 box-shadow: 0 16px 32px rgba(0,0,0,0.15);86 padding: 36px;87 }88 .content-card .section {89 height: 160px;90 border: 1px solid #eee;91 border-radius: 18px;92 margin-bottom: 20px;93 display: flex; align-items: center; padding: 0 20px;94 color: #666;95 }96 .book-btn {97 margin-top: 20px;98 width: 360px;99 height: 96px;100 background: #1d123d;101 color: #fff;102 border-radius: 18px;103 display: flex; align-items: center; justify-content: center;104 font-size: 40px; font-weight: 700;105 gap: 16px;106 }107 .book-btn svg { fill: #fff; }108 109 /* Bottom navigation bar */110 .bottom-nav {111 position: absolute;112 bottom: 70px;113 left: 0;114 width: 1080px;115 height: 170px;116 background: #ffffff;117 border-top: 1px solid #E5E5E5;118 display: flex;119 justify-content: space-around;120 align-items: center;121 z-index: 1;122 }123 .nav-item {124 width: 200px; height: 140px;125 display: flex; flex-direction: column;126 align-items: center; justify-content: center;127 color: #5f5f6a;128 font-size: 34px;129 gap: 12px;130 }131 .nav-item.active { color: #1d123d; font-weight: 700; }132 .nav-icon { width: 48px; height: 48px; }133 134 /* Gesture pill */135 .gesture {136 position: absolute;137 bottom: 20px;138 left: 50%;139 transform: translateX(-50%);140 width: 240px;141 height: 16px;142 background: #ffffff;143 border-radius: 16px;144 box-shadow: 0 2px 6px rgba(0,0,0,0.2);145 z-index: 2;146 }147 148 /* Modal overlay */149 .overlay {150 position: absolute;151 top: 0; left: 0;152 width: 1080px; height: 2400px;153 background: rgba(0,0,0,0.35);154 z-index: 5;155 }156 .modal {157 position: absolute;158 top: 780px;159 left: 100px;160 width: 880px;161 background: #ffffff;162 border-radius: 20px;163 box-shadow: 0 28px 60px rgba(0,0,0,0.35);164 overflow: hidden;165 }166 .modal-header {167 background: #1d123d;168 color: #fff;169 padding: 28px 32px 36px 32px;170 }171 .modal-header .year { font-size: 34px; opacity: 0.85; }172 .modal-header .date {173 font-size: 88px;174 font-weight: 800;175 margin-top: 8px;176 letter-spacing: 1px;177 }178 .calendar {179 padding: 24px 32px 28px 32px;180 }181 .cal-top {182 display: flex; align-items: center; justify-content: space-between;183 padding: 12px 6px 24px 6px;184 color: #222;185 font-size: 42px; font-weight: 700;186 }187 .chev { width: 44px; height: 44px; }188 .cal-weekdays {189 display: grid;190 grid-template-columns: repeat(7, 1fr);191 text-align: center;192 color: #808080;193 font-size: 30px;194 padding: 8px 0 16px 0;195 letter-spacing: 6px;196 }197 .cal-days {198 display: grid;199 grid-template-columns: repeat(7, 1fr);200 row-gap: 30px;201 column-gap: 10px;202 text-align: center;203 font-size: 38px;204 color: #333;205 padding-top: 10px;206 }207 .muted { color: #999; }208 .day {209 width: 92px; height: 92px;210 line-height: 92px;211 margin: 0 auto;212 border-radius: 50%;213 }214 .selected {215 background: #1d123d;216 color: #fff;217 font-weight: 800;218 }219 .modal-actions {220 display: flex; justify-content: space-between; align-items: center;221 padding: 30px 40px 40px 40px;222 color: #1d123d;223 font-size: 40px;224 font-weight: 800;225 letter-spacing: 4px;226 }227</style>228</head>229<body>230<div id="render-target">231 232 <!-- Status bar -->233 <div class="status-bar">234 <div class="status-left">11:28</div>235 <div class="status-right">236 <div class="dot"></div>237 <div class="dot"></div>238 <div class="dot"></div>239 <svg class="wifi" viewBox="0 0 24 24">240 <path fill="#fff" d="M12 18.5l2.6 2.6-2.6 2.4-2.6-2.4L12 18.5zm-6.9-6.4l1.4 1.4C8.2 11.8 10 11 12 11s3.8.8 5.5 2.5l1.4-1.4C16.8 9.9 14.5 9 12 9s-4.8.9-6.9 3.1zm-3.3-3.6l1.4 1.4C6.9 7.8 9.4 7 12 7s5.1.8 8.8 2.5l1.4-1.4C18.2 5.1 15.3 4 12 4 8.7 4 5.8 5.1 1.8 8.5z"/>241 </svg>242 <svg class="battery" viewBox="0 0 24 24">243 <rect x="2" y="5" width="18" height="14" rx="2" fill="#fff"/>244 <rect x="20" y="9" width="2" height="6" fill="#fff"/>245 </svg>246 </div>247 </div>248 249 <!-- Hero image section -->250 <div class="hero">251 <div class="hero-title">Where to next?</div>252 </div>253 254 <!-- Underlying content preview -->255 <div class="content-card">256 <div class="section">Form inputs preview</div>257 <div class="section">Trip details preview</div>258 <div class="book-btn">259 <svg class="nav-icon" viewBox="0 0 24 24">260 <path d="M3 16h18v2H3v-2zm2-6h14l-1.5-4h-11L5 10zm1 6h2v-4H6v4zm4 0h2v-4h-2v4z"/>261 </svg>262 Book seats263 </div>264 </div>265 266 <!-- Bottom navigation -->267 <div class="bottom-nav">268 <div class="nav-item active">269 <svg class="nav-icon" viewBox="0 0 24 24">270 <circle cx="12" cy="12" r="10" fill="none" stroke="#1d123d" stroke-width="2"/>271 <path d="M12 7v6l4 2" fill="none" stroke="#1d123d" stroke-width="2"/>272 </svg>273 Planner274 </div>275 <div class="nav-item">276 <svg class="nav-icon" viewBox="0 0 24 24">277 <path d="M3 11l9-8 9 8v9H3v-9z" fill="none" stroke="#5f5f6a" stroke-width="2"/>278 </svg>279 My Trip280 </div>281 <div class="nav-item">282 <svg class="nav-icon" viewBox="0 0 24 24">283 <rect x="5" y="3" width="14" height="18" rx="2" fill="none" stroke="#5f5f6a" stroke-width="2"/>284 <circle cx="12" cy="14" r="3" fill="none" stroke="#5f5f6a" stroke-width="2"/>285 </svg>286 My Pass287 </div>288 <div class="nav-item">289 <svg class="nav-icon" viewBox="0 0 24 24">290 <path d="M3 6h18M3 12h18M3 18h18" stroke="#5f5f6a" stroke-width="2"/>291 </svg>292 More293 </div>294 </div>295 296 <div class="gesture"></div>297 298 <!-- Modal date picker -->299 <div class="overlay"></div>300 <div class="modal">301 <div class="modal-header">302 <div class="year">2023</div>303 <div class="date">Fri, Sep 8</div>304 </div>305 <div class="calendar">306 <div class="cal-top">307 <svg class="chev" viewBox="0 0 24 24">308 <path d="M15 18l-6-6 6-6" fill="none" stroke="#222" stroke-width="2"/>309 </svg>310 <div>September 2023</div>311 <svg class="chev" viewBox="0 0 24 24">312 <path d="M9 6l6 6-6 6" fill="none" stroke="#222" stroke-width="2"/>313 </svg>314 </div>315 <div class="cal-weekdays">316 <div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>317 </div>318 <!-- Days grid -->319 <div class="cal-days">320 <!-- Row 1: start with blanks until Friday -->321 <div class="muted"></div>322 <div class="muted"></div>323 <div class="muted"></div>324 <div class="muted"></div>325 <div class="muted"></div>326 <div class="day">1</div>327 <div class="day">2</div>328 329 <!-- Row 2 -->330 <div class="day">3</div>331 <div class="day">4</div>332 <div class="day">5</div>333 <div class="day">6</div>334 <div class="day">7</div>335 <div class="day selected">8</div>336 <div class="day">9</div>337 338 <!-- Row 3 -->339 <div class="day">10</div>340 <div class="day">11</div>341 <div class="day">12</div>342 <div class="day">13</div>343 <div class="day">14</div>344 <div class="day">15</div>345 <div class="day">16</div>346 347 <!-- Row 4 -->348 <div class="day">17</div>349 <div class="day">18</div>350 <div class="day">19</div>351 <div class="day">20</div>352 <div class="day">21</div>353 <div class="day">22</div>354 <div class="day">23</div>355 356 <!-- Row 5 -->357 <div class="day">24</div>358 <div class="day">25</div>359 <div class="day">26</div>360 <div class="day">27</div>361 <div class="day">28</div>362 <div class="day">29</div>363 <div class="day">30</div>364 </div>365 366 <div class="modal-actions">367 <div>CANCEL</div>368 <div>OK</div>369 </div>370 </div>371 </div>372 373</div>374</body>375</html>