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: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden; background: #f7f7f9;11 }12 13 /* Status bar */14 .status-bar {15 position: absolute; top: 24px; left: 24px; right: 24px; height: 48px; display: flex; align-items: center; color: #fff;16 z-index: 2;17 }18 .status-left { display: flex; align-items: center; gap: 18px; }19 .status-right { margin-left: auto; display: flex; align-items: center; gap: 18px; }20 .dot { width: 22px; height: 22px; border-radius: 50%; background: #fff; opacity: 0.9; }21 .status-time { font-size: 32px; font-weight: 600; letter-spacing: 0.5px; }22 23 /* Hero image area */24 .hero {25 position: absolute; top: 0; left: 0; width: 1080px; height: 660px;26 display: flex; align-items: center; justify-content: center;27 }28 .hero .img {29 width: 1080px; height: 660px; background: #E0E0E0; border: 1px solid #BDBDBD;30 display: flex; justify-content: center; align-items: center; color: #757575; font-size: 30px;31 }32 .hero::after {33 content: ""; position: absolute; inset: 0;34 background: linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,0.25));35 }36 .hero-title {37 position: absolute; bottom: 40px; left: 36px; font-size: 72px; font-weight: 700; color: rgba(255,255,255,0.85);38 letter-spacing: 0.5px;39 }40 41 /* Background content behind dialog */42 .content-area {43 position: absolute; top: 660px; left: 0; right: 0; bottom: 180px; padding: 40px;44 background: #fafafa;45 }46 .ghost-card {47 width: 960px; height: 180px; margin: 20px auto; background: #ffffff; border-radius: 18px; box-shadow: 0 4px 20px rgba(0,0,0,0.06);48 position: relative; padding: 24px;49 opacity: 0.7;50 }51 .ghost-button {52 position: absolute; bottom: 24px; left: 24px; height: 90px; width: 360px; border-radius: 16px; background: #221b3f; color: #fff;53 display: flex; align-items: center; justify-content: center; font-size: 38px; font-weight: 600;54 }55 56 /* Modal dialog */57 .modal {58 position: absolute; top: 620px; left: 60px; width: 960px; height: 1120px; background: #ffffff; border-radius: 18px;59 box-shadow: 0 16px 48px rgba(0,0,0,0.2); z-index: 3; padding: 44px;60 }61 .modal-header {62 display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;63 }64 .modal-header .label {65 font-size: 44px; font-weight: 700; color: #2b264a;66 }67 .modal-header .label.inactive { color: #8e8e99; }68 .header-underline {69 width: 380px; height: 6px; background: #2b264a; border-radius: 3px; margin-top: 12px;70 }71 72 /* Time selector */73 .time-section { margin-top: 40px; }74 .time-grid {75 display: grid; grid-template-columns: 1fr 60px 1fr auto; align-items: center; column-gap: 28px;76 }77 .time-col { text-align: center; }78 .time-faint { font-size: 40px; color: #b4b6c2; margin: 22px 0; }79 .time-current { font-size: 64px; font-weight: 700; color: #2b264a; }80 .time-line { width: 260px; height: 6px; background: #2b264a; border-radius: 3px; margin: 18px auto; }81 .colon { font-size: 64px; font-weight: 700; color: #2b264a; text-align: center; }82 .now-btn {83 justify-self: end; background: #f3b51c; color: #2b264a; font-weight: 700; font-size: 40px; padding: 18px 28px; border: none;84 border-radius: 14px; box-shadow: 0 4px 8px rgba(0,0,0,0.12);85 }86 87 .divider { height: 2px; background: #eeeeee; margin: 48px 0; }88 89 /* Date row */90 .date-row { display: grid; grid-template-columns: 80px 1fr 80px; align-items: center; }91 .date-text { text-align: center; font-size: 48px; font-weight: 700; color: #2b264a; }92 .chev {93 width: 48px; height: 48px; margin: 0 auto;94 }95 .chev path { stroke: #f3b51c; stroke-width: 8; fill: none; stroke-linecap: round; stroke-linejoin: round; }96 97 /* Footer buttons */98 .modal-footer { position: absolute; bottom: 40px; left: 44px; right: 44px; display: flex; justify-content: space-between; align-items: center; }99 .btn {100 height: 110px; border-radius: 16px; font-size: 42px; font-weight: 800; padding: 0 40px; display: flex; align-items: center; justify-content: center;101 box-sizing: border-box;102 }103 .btn.cancel { background: #fff; color: #2b264a; border: 2px solid #e2e2e7; width: 300px; }104 .btn.done { background: #f3b51c; color: #2b264a; border: none; width: 320px; box-shadow: 0 6px 12px rgba(243,181,28,0.35); }105 106 /* Bottom nav bar */107 .tabbar {108 position: absolute; bottom: 0; left: 0; right: 0; height: 180px; background: #ffffff; box-shadow: 0 -6px 20px rgba(0,0,0,0.08);109 display: flex; justify-content: space-around; align-items: center;110 }111 .tab {112 display: flex; flex-direction: column; align-items: center; gap: 12px; color: #7a7a86;113 }114 .tab.active { color: #2b264a; }115 .tab svg { width: 54px; height: 54px; }116 .tab-label { font-size: 34px; font-weight: 700; }117 118 /* Home indicator */119 .home-indicator {120 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);121 width: 360px; height: 12px; background: #d8d8de; border-radius: 6px;122 }123</style>124</head>125<body>126<div id="render-target">127 128 <!-- Status bar -->129 <div class="status-bar">130 <div class="status-left">131 <div class="status-time">1:08</div>132 <div class="dot"></div>133 <div class="dot"></div>134 <div style="color:#fff; font-weight:700;">oyo</div>135 </div>136 <div class="status-right">137 <!-- WiFi icon -->138 <svg width="36" height="36" viewBox="0 0 24 24">139 <path d="M2 8c5-4 15-4 20 0M5 12c3-3 11-3 14 0M9 16c2-2 4-2 6 0" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>140 <circle cx="12" cy="19" r="2" fill="#ffffff"/>141 </svg>142 <!-- Battery icon -->143 <svg width="42" height="42" viewBox="0 0 28 20">144 <rect x="1" y="3" width="22" height="14" rx="3" stroke="#ffffff" stroke-width="2" fill="none"/>145 <rect x="24" y="7" width="3" height="6" rx="1" fill="#ffffff"/>146 <rect x="3" y="5" width="16" height="10" rx="2" fill="#ffffff" opacity="0.9"/>147 </svg>148 </div>149 </div>150 151 <!-- Hero image -->152 <div class="hero">153 <div class="img">[IMG: Scenic train landscape]</div>154 <div class="hero-title">Where to next?</div>155 </div>156 157 <!-- Background content behind modal -->158 <div class="content-area">159 <div class="ghost-card">160 <div style="height: 24px; width: 220px; background:#eee; border-radius: 12px;"></div>161 <div class="ghost-button">Book seats</div>162 </div>163 <div class="ghost-card" style="opacity:0.65;">164 <div style="height: 24px; width: 280px; background:#eee; border-radius: 12px;"></div>165 </div>166 </div>167 168 <!-- Modal dialog -->169 <div class="modal">170 <div class="modal-header">171 <div>172 <div class="label">DEPARTURE</div>173 <div class="header-underline"></div>174 </div>175 <div class="label inactive">ARRIVAL</div>176 </div>177 178 <!-- Time selector -->179 <div class="time-section">180 <div class="time-grid">181 <div class="time-col">182 <div class="time-faint">12</div>183 <div class="time-line"></div>184 <div class="time-current">13</div>185 <div class="time-line"></div>186 <div class="time-faint">14</div>187 </div>188 189 <div class="colon">:</div>190 191 <div class="time-col">192 <div class="time-faint">00</div>193 <div class="time-line"></div>194 <div class="time-current">01</div>195 <div class="time-line"></div>196 <div class="time-faint">02</div>197 </div>198 199 <button class="now-btn">Now</button>200 </div>201 </div>202 203 <div class="divider"></div>204 205 <!-- Date row -->206 <div class="date-row">207 <svg class="chev" viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7"/></svg>208 <div class="date-text">Thu 10 Aug 2023</div>209 <svg class="chev" viewBox="0 0 24 24"><path d="M9 5l7 7-7 7"/></svg>210 </div>211 212 <div class="divider" style="margin-top: 40px;"></div>213 214 <!-- Footer buttons -->215 <div class="modal-footer">216 <div class="btn cancel">CANCEL</div>217 <div class="btn done">DONE</div>218 </div>219 </div>220 221 <!-- Bottom tab bar -->222 <div class="tabbar">223 <div class="tab active">224 <svg viewBox="0 0 24 24">225 <circle cx="12" cy="12" r="9" stroke="#2b264a" stroke-width="2" fill="none"/>226 <path d="M12 6v7l4 2" stroke="#2b264a" stroke-width="2" fill="none" stroke-linecap="round"/>227 </svg>228 <div class="tab-label">Planner</div>229 </div>230 <div class="tab">231 <svg viewBox="0 0 24 24">232 <path d="M3 12l9-8 9 8v8H3z" stroke="#7a7a86" stroke-width="2" fill="none" stroke-linejoin="round"/>233 <path d="M9 20v-6h6v6" stroke="#7a7a86" stroke-width="2" fill="none"/>234 </svg>235 <div class="tab-label">My Trip</div>236 </div>237 <div class="tab">238 <svg viewBox="0 0 24 24">239 <rect x="4" y="3" width="16" height="12" rx="2" stroke="#7a7a86" stroke-width="2" fill="none"/>240 <circle cx="12" cy="9" r="3" stroke="#7a7a86" stroke-width="2" fill="none"/>241 <path d="M6 19h12" stroke="#7a7a86" stroke-width="2"/>242 </svg>243 <div class="tab-label">My Pass</div>244 </div>245 <div class="tab">246 <svg viewBox="0 0 24 24">247 <path d="M4 6h16M4 12h16M4 18h16" stroke="#7a7a86" stroke-width="2" stroke-linecap="round"/>248 </svg>249 <div class="tab-label">More</div>250 </div>251 </div>252 253 <div class="home-indicator"></div>254 255</div>256</body>257</html>