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>Flight to Bangkok - UI</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, 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 /* Header / App Bar */15 .appbar {16 position:absolute; top:0; left:0; right:0;17 height:280px; background:#0b4da2; color:#fff;18 box-shadow:0 2px 0 rgba(0,0,0,0.08);19 }20 .status-row {21 height:88px; padding:0 40px; display:flex; align-items:center; justify-content:space-between; font-size:38px; opacity:0.9;22 }23 .status-right { display:flex; align-items:center; gap:26px; }24 .appbar-title {25 display:flex; align-items:center; gap:28px;26 padding:24px 40px; margin-top:10px;27 }28 .appbar-title h1 {29 margin:0; font-size:54px; font-weight:700; letter-spacing:0.2px;30 }31 .icon-btn { width:64px; height:64px; display:flex; align-items:center; justify-content:center; }32 33 /* Content Area */34 .content {35 position:absolute; left:0; right:0; top:280px; bottom:370px;36 overflow-y:auto; padding:40px;37 background:#ffffff;38 }39 40 /* Warning card */41 .warning-card {42 background:#fff; border:1px solid #e7e2db; border-radius:18px;43 padding:28px 32px; margin-bottom:40px;44 }45 .warning-card .warn-text { color:#c24d12; font-size:36px; line-height:1.3; }46 47 /* Section headings */48 .section-title { font-size:52px; font-weight:700; color:#222; margin:30px 0 8px; }49 .section-sub { font-size:34px; color:#6e6e6e; margin-bottom:20px; }50 51 /* Timeline */52 .timeline {53 position:relative; margin:10px 0 40px 0; padding-left:120px;54 }55 .timeline::before {56 content:""; position:absolute; left:64px; top:14px; bottom:14px;57 width:0; border-left:4px solid #9e9e9e;58 }59 .tl-item {60 position:relative; margin:34px 0; padding-left:0;61 }62 .tl-item::before {63 content:""; position:absolute; left:-56px; top:10px;64 width:34px; height:34px; border:4px solid #757575; border-radius:50%; background:#fff;65 }66 .tl-time { font-size:34px; color:#444; margin-bottom:8px; }67 .tl-main { font-size:42px; font-weight:800; color:#222; }68 .tl-sub { font-size:32px; color:#8a8a8a; margin-top:6px; }69 70 .airline {71 display:flex; align-items:flex-start; gap:22px;72 margin:24px 0 6px 0;73 }74 .img-placeholder {75 width:64px; height:64px; background:#E0E0E0; border:1px solid #BDBDBD;76 display:flex; align-items:center; justify-content:center; color:#757575; font-size:22px; border-radius:8px;77 }78 .airline .a-lines { font-size:32px; color:#8a8a8a; line-height:1.5; }79 .a-lines .name { color:#6a6a6a; }80 .a-lines .bold { font-weight:600; color:#6a6a6a; }81 82 /* Price bar */83 .price-bar {84 position:absolute; left:0; right:0; bottom:160px;85 height:210px; background:#ffffff; border-top:6px solid #efefef;86 display:flex; align-items:center; justify-content:space-between;87 padding:28px 40px; box-shadow:0 -2px 6px rgba(0,0,0,0.06);88 }89 .price-left { max-width:560px; }90 .note { color:#c24d12; font-size:32px; margin-bottom:10px; }91 .price-main { display:flex; align-items:center; gap:14px; }92 .price-value { font-size:48px; font-weight:800; color:#222; }93 .info-icon {94 width:40px; height:40px; border-radius:50%; border:2px solid #888; color:#666;95 display:flex; align-items:center; justify-content:center; font-weight:700; font-size:26px;96 }97 .price-sub { font-size:30px; color:#7a7a7a; margin-top:6px; }98 .select-btn {99 width:420px; height:120px; background:#0b4da2; color:#fff; border:none; border-radius:16px;100 font-size:44px; font-weight:700; cursor:pointer;101 }102 103 /* Phone navigation area */104 .nav-area {105 position:absolute; left:0; right:0; bottom:0; height:160px; background:#000000;106 display:flex; align-items:center; justify-content:center;107 }108 .home-pill {109 width:280px; height:14px; background:#eaeaea; border-radius:18px; opacity:0.9;110 }111</style>112</head>113<body>114<div id="render-target">115 116 <!-- Top App Bar -->117 <div class="appbar">118 <div class="status-row">119 <div>4:08</div>120 <div class="status-right">121 <!-- Simple weather glyphs -->122 <svg width="54" height="34" viewBox="0 0 54 34">123 <circle cx="14" cy="17" r="12" fill="#ffffff" opacity="0.9"></circle>124 <rect x="24" y="15" width="26" height="10" rx="5" fill="#ffffff" opacity="0.9"></rect>125 </svg>126 <!-- WiFi icon -->127 <svg width="44" height="34" viewBox="0 0 44 34">128 <path d="M4 12c8-8 28-8 36 0" stroke="#fff" stroke-width="3" fill="none"/>129 <path d="M10 18c6-6 18-6 24 0" stroke="#fff" stroke-width="3" fill="none"/>130 <circle cx="22" cy="24" r="3" fill="#fff"/>131 </svg>132 <!-- Battery icon -->133 <svg width="48" height="34" viewBox="0 0 48 34">134 <rect x="2" y="6" width="38" height="22" rx="4" stroke="#fff" stroke-width="3" fill="none"/>135 <rect x="6" y="10" width="30" height="14" fill="#fff"/>136 <rect x="42" y="12" width="4" height="10" rx="1" fill="#fff"/>137 </svg>138 </div>139 </div>140 <div class="appbar-title">141 <div class="icon-btn">142 <svg width="60" height="60" viewBox="0 0 24 24">143 <path d="M15 18l-6-6 6-6" stroke="#fff" stroke-width="2.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>144 </svg>145 </div>146 <h1>Your flight to Bangkok</h1>147 </div>148 </div>149 150 <!-- Main Content -->151 <div class="content">152 153 <div class="warning-card">154 <div class="warn-text">249% higher CO2 emissions than the average of all flights we offer for this route</div>155 </div>156 157 <div class="section">158 <div class="section-title">Flight to Bangkok</div>159 <div class="section-sub">Direct · 6h 30m · Business</div>160 161 <div class="timeline">162 <div class="tl-item">163 <div class="tl-time">Tue, Jul 18 · 12:00 PM</div>164 <div class="tl-main">NRT · Tokyo Narita Apt</div>165 <div class="tl-sub">Terminal 1</div>166 167 <div class="airline">168 <div class="img-placeholder">[IMG: Thai Airways logo]</div>169 <div class="a-lines">170 <div class="name">Thai Airways</div>171 <div>Flight <span class="bold">TG643</span></div>172 <div>Flight time 6h 30m</div>173 </div>174 </div>175 </div>176 177 <div class="tl-item">178 <div class="tl-time">Tue, Jul 18 · 4:30 PM</div>179 <div class="tl-main">BKK · Bangkok Suvarnabhumi International Apt</div>180 </div>181 </div>182 </div>183 184 <div class="section">185 <div class="section-title">Flight to Tokyo</div>186 <div class="section-sub">Direct · 6h 10m · Business</div>187 188 <div class="timeline">189 <div class="tl-item">190 <div class="tl-time">Sat, Jul 22 · 10:45 PM</div>191 <div class="tl-main">BKK · Bangkok Suvarnabhumi International Apt</div>192 193 <div class="airline">194 <div class="img-placeholder">[IMG: Thai Airways logo]</div>195 <div class="a-lines">196 <div class="name">Thai Airways</div>197 <div>Flight <span class="bold">TG682</span></div>198 <div>Flight time 6h 10m</div>199 </div>200 </div>201 </div>202 203 <div class="tl-item">204 <div class="tl-time">Sun, Jul 23 · 6:55 AM</div>205 <div class="tl-main">HND · Tokyo Haneda Apt</div>206 <div class="tl-sub">Terminal 3</div>207 </div>208 </div>209 </div>210 </div>211 212 <!-- Price / Select Bar -->213 <div class="price-bar">214 <div class="price-left">215 <div class="note">2 left at this price on Booking.com</div>216 <div class="price-main">217 <div class="price-value">Rs. 154,095.06</div>218 <div class="info-icon">i</div>219 </div>220 <div class="price-sub">Rs. 308,190.11 for 2 travelers</div>221 </div>222 <button class="select-btn">Select</button>223 </div>224 225 <!-- Phone navigation area -->226 <div class="nav-area">227 <div class="home-pill"></div>228 </div>229 230</div>231</body>232</html>