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>Flights UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #1f2a44; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden; background: #ffffff;11 }12 .status-bar { height: 90px; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; font-size: 36px; color: #333; }13 .status-icons { display: flex; align-items: center; gap: 24px; }14 .icon-sq { width: 40px; height: 40px; border-radius: 8px; border: 2px solid #666; }15 .nav-row { display: grid; grid-template-columns: repeat(4, 1fr); padding: 10px 40px 0 40px; column-gap: 30px; row-gap: 6px; }16 .nav-item { text-align: center; }17 .nav-img {18 width: 140px; height: 96px; margin: 0 auto 8px auto;19 background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 20px;20 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px;21 }22 .nav-label { font-size: 34px; color: #5a667d; }23 .nav-active .nav-label { color: #1a60ff; font-weight: 600; }24 .nav-active .underline { width: 120px; height: 8px; background: #1a60ff; border-radius: 6px; margin: 10px auto 0; }25 .search-card {26 margin: 26px 34px 0 34px; border-radius: 30px; border: 1px solid #d9dde7; overflow: hidden; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,0.05);27 }28 .toggle-wrap { padding: 28px 32px 24px; background: #f5f6fa; display: flex; gap: 22px; }29 .pill { padding: 18px 28px; border-radius: 50px; font-size: 34px; color: #667; background: #e9ebf2; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.03); }30 .pill.active { background: #fff; color: #222; border: 1px solid #d0d6e3; box-shadow: 0 2px 6px rgba(0,0,0,0.06); }31 .row { padding: 30px 36px; border-top: 1px solid #e5e8ef; display: flex; align-items: center; justify-content: space-between; }32 .fromto { display: grid; grid-template-columns: 1fr 120px 1fr; align-items: center; gap: 12px; width: 100%; }33 .city { display: flex; align-items: center; gap: 16px; }34 .code { font-size: 56px; font-weight: 700; color: #102a43; }35 .sub { font-size: 28px; color: #7a859b; }36 .swap { width: 90px; height: 90px; border-radius: 50%; border: 1px solid #d7dbe6; display: flex; align-items: center; justify-content: center; }37 .label-icon { display: flex; align-items: center; gap: 20px; font-size: 38px; color: #223; }38 .muted { font-size: 30px; color: #7a859b; }39 .chips { padding: 24px 36px; border-top: 1px solid #e5e8ef; }40 .chips-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }41 .chip { display: inline-flex; align-items: center; padding: 18px 26px; border-radius: 40px; border: 1px solid #d1d6e2; color: #2f3b56; font-size: 32px; margin-right: 18px; background: #fff; }42 .badge { font-size: 26px; color: #fff; background: #7a2cf2; padding: 6px 14px; border-radius: 20px; }43 .assured { background: #eaf2ff; padding: 28px 36px; display: flex; align-items: center; justify-content: space-between; }44 .check { width: 48px; height: 48px; border: 3px solid #9aa9c7; border-radius: 10px; margin-right: 22px; }45 .assured-text { display: flex; align-items: center; }46 .shield {47 width: 80px; height: 80px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 20px;48 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 24px;49 }50 .search-cta { background: #ff7a00; color: #fff; font-size: 44px; font-weight: 600; padding: 34px 36px; display: flex; align-items: center; gap: 24px; justify-content: center; border-top-left-radius: 26px; border-top-right-radius: 26px; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; }51 .search-cta svg { width: 48px; height: 48px; }52 .services { background: #f6f7fb; padding: 34px 24px 16px; display: grid; grid-template-columns: repeat(6, 1fr); text-align: center; gap: 10px; }53 .svc-item { display: flex; flex-direction: column; align-items: center; }54 .svc-icon { width: 110px; height: 110px; border: 3px solid #1a60ff; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #1a60ff; }55 .svc-label { margin-top: 18px; font-size: 30px; color: #4b5874; }56 .banner { margin: 20px 34px; background: #ff7a00; border-radius: 30px; padding: 26px; display: flex; align-items: center; justify-content: space-between; color: #fff; }57 .banner .img {58 width: 420px; height: 200px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 20px;59 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px;60 }61 .banner .text { font-size: 46px; line-height: 1.2; text-align: right; }62 .login { margin-top: 16px; display: inline-block; padding: 12px 24px; background: #fff; color: #ff7a00; border-radius: 20px; font-weight: 600; font-size: 30px; }63 .bottom-nav { position: absolute; left: 0; bottom: 80px; width: 100%; background: #fff4ea; border-top: 1px solid #eee2d6; padding: 20px 40px; display: grid; grid-template-columns: repeat(5, 1fr); }64 .bn-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }65 .bn-icon { width: 96px; height: 96px; border-radius: 30px; background: #ffe0c7; display: flex; align-items: center; justify-content: center; }66 .bn-item.active .bn-icon { background: #ff7a00; }67 .bn-item span { font-size: 32px; color: #6b768a; }68 .bn-item.active span { color: #ff7a00; font-weight: 600; }69 .home-indicator { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: 360px; height: 16px; background: #0f0f12; border-radius: 10px; opacity: 0.85; }70 /* Small SVG icon style */71 .ico { width: 48px; height: 48px; }72</style>73</head>74<body>75<div id="render-target">76 77 <div class="status-bar">78 <div>10:48</div>79 <div class="status-icons">80 <svg class="ico" viewBox="0 0 24 24">81 <path d="M2 8l10-5 10 5v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8z" fill="#666"/>82 <path d="M6 12h12v4H6z" fill="#fff"/>83 </svg>84 <svg class="ico" viewBox="0 0 24 24">85 <path d="M3 8h18v8H3z" fill="none" stroke="#666" stroke-width="2"/>86 <rect x="5" y="10" width="10" height="4" fill="#666"/>87 </svg>88 </div>89 </div>90 91 <div class="nav-row">92 <div class="nav-item nav-active">93 <div class="nav-img">[IMG: Plane]</div>94 <div class="nav-label">Flights</div>95 <div class="underline"></div>96 </div>97 <div class="nav-item">98 <div class="nav-img">[IMG: Hotel]</div>99 <div class="nav-label">Hotels</div>100 </div>101 <div class="nav-item">102 <div class="nav-img">[IMG: Train]</div>103 <div class="nav-label">Trains</div>104 </div>105 <div class="nav-item">106 <div class="nav-img">[IMG: Bus]</div>107 <div class="nav-label">Buses</div>108 </div>109 </div>110 111 <div class="search-card">112 <div class="toggle-wrap">113 <div class="pill active">One Way</div>114 <div class="pill">Round Trip</div>115 </div>116 117 <div class="row">118 <div class="fromto">119 <div class="city">120 <div class="code">AMS</div>121 <svg class="ico" viewBox="0 0 24 24">122 <path d="M2 12l9 2 1 8 2-7 8-2-8-2-2-7-1 8-9 2z" fill="#1a60ff"/>123 </svg>124 <div>125 <div class="sub">Amsterdam</div>126 </div>127 </div>128 <div class="swap">129 <svg class="ico" viewBox="0 0 24 24">130 <path d="M7 7h10l-3-3M17 17H7l3 3" fill="none" stroke="#7a859b" stroke-width="2" stroke-linecap="round"/>131 </svg>132 </div>133 <div class="city" style="justify-content: flex-end;">134 <svg class="ico" viewBox="0 0 24 24">135 <path d="M2 12l9 2 1 8 2-7 8-2-8-2-2-7-1 8-9 2z" fill="#1a60ff"/>136 </svg>137 <div class="code">BER</div>138 <div>139 <div class="sub" style="text-align:right;">Berlin</div>140 </div>141 </div>142 </div>143 </div>144 145 <div class="row">146 <div class="label-icon">147 <svg class="ico" viewBox="0 0 24 24">148 <rect x="3" y="5" width="18" height="16" rx="2" fill="none" stroke="#1f2a44" stroke-width="2"/>149 <path d="M7 5v4M17 5v4" stroke="#1f2a44" stroke-width="2"/>150 </svg>151 <div>Sat, 23 Dec</div>152 </div>153 </div>154 155 <div class="row">156 <div class="label-icon">157 <svg class="ico" viewBox="0 0 24 24">158 <circle cx="12" cy="8" r="3" fill="none" stroke="#1f2a44" stroke-width="2"/>159 <path d="M4 20c2-4 6-4 8-4s6 0 8 4" fill="none" stroke="#1f2a44" stroke-width="2"/>160 </svg>161 <div>1 Traveller • Economy</div>162 </div>163 </div>164 165 <div class="chips">166 <div class="chips-head">167 <div style="font-size:32px; color:#2f3b56;">Special Fares (Optional)</div>168 <div class="badge">New</div>169 </div>170 <div>171 <span class="chip">Student</span>172 <span class="chip">Senior Citizen</span>173 <span class="chip">Armed Forces</span>174 </div>175 </div>176 177 <div class="assured">178 <div class="assured-text">179 <div class="check"></div>180 <div>181 <div style="font-size:36px;">Always opt for Assured</div>182 <div class="muted">Instant full refunds</div>183 </div>184 </div>185 <div class="shield">[IMG: Shield]</div>186 </div>187 188 <div class="search-cta">189 <svg viewBox="0 0 24 24">190 <circle cx="10" cy="10" r="7" fill="none" stroke="#fff" stroke-width="2"/>191 <path d="M15 15l6 6" stroke="#fff" stroke-width="2" stroke-linecap="round"/>192 </svg>193 <div>Search Flights</div>194 </div>195 </div>196 197 <div class="services">198 <div class="svc-item">199 <div class="svc-icon">200 <svg viewBox="0 0 24 24" width="64" height="64">201 <path d="M2 13l7 1 2 8 2-7 9-2-9-2-2-7-2 9-7 1z" fill="#1a60ff"/>202 </svg>203 </div>204 <div class="svc-label">Flight Status</div>205 </div>206 <div class="svc-item">207 <div class="svc-icon">208 <svg viewBox="0 0 24 24" width="64" height="64">209 <path d="M4 12l8-5 8 5-8 5-8-5z" fill="none" stroke="#1a60ff" stroke-width="2"/>210 </svg>211 </div>212 <div class="svc-label">Travel Insurance</div>213 </div>214 <div class="svc-item">215 <div class="svc-icon">216 <svg viewBox="0 0 24 24" width="64" height="64">217 <circle cx="10" cy="12" r="5" fill="none" stroke="#1a60ff" stroke-width="2"/>218 <path d="M15 7l6 6-6 6" fill="none" stroke="#1a60ff" stroke-width="2"/>219 </svg>220 </div>221 <div class="svc-label">Forex Card</div>222 </div>223 <div class="svc-item">224 <div class="svc-icon">225 <svg viewBox="0 0 24 24" width="64" height="64">226 <rect x="3" y="6" width="18" height="12" rx="2" fill="none" stroke="#1a60ff" stroke-width="2"/>227 <rect x="6" y="10" width="12" height="3" fill="#1a60ff"/>228 </svg>229 </div>230 <div class="svc-label">Credit Card</div>231 </div>232 <div class="svc-item">233 <div class="svc-icon">234 <svg viewBox="0 0 24 24" width="64" height="64">235 <circle cx="12" cy="12" r="9" fill="none" stroke="#1a60ff" stroke-width="2"/>236 <path d="M12 7v10M7 12h10" stroke="#1a60ff" stroke-width="2"/>237 </svg>238 </div>239 <div class="svc-label">Book Visa</div>240 </div>241 <div class="svc-item">242 <div class="svc-icon">243 <svg viewBox="0 0 24 24" width="64" height="64">244 <rect x="5" y="5" width="14" height="14" rx="3" fill="none" stroke="#1a60ff" stroke-width="2"/>245 <path d="M9 9h6v6H9z" fill="#1a60ff"/>246 </svg>247 </div>248 <div class="svc-label">Plans</div>249 </div>250 </div>251 252 <div class="banner">253 <div class="img">[IMG: Airplane Illustration]</div>254 <div class="text">255 Flat 12% Off<br/>on 1st Flight<br/>256 <span class="login">Login</span>257 </div>258 </div>259 260 <div class="bottom-nav">261 <div class="bn-item active">262 <div class="bn-icon">263 <svg viewBox="0 0 24 24" width="52" height="52">264 <path d="M3 11l9-7 9 7v9H3z" fill="#fff"/>265 </svg>266 </div>267 <span>Home</span>268 </div>269 <div class="bn-item">270 <div class="bn-icon" style="background:#ffe0c7;">271 <svg viewBox="0 0 24 24" width="52" height="52">272 <path d="M4 12l8-5 8 5-8 5-8-5z" fill="#ff7a00"/>273 </svg>274 </div>275 <span>ixigo money</span>276 </div>277 <div class="bn-item">278 <div class="bn-icon" style="background:#ffe0c7;">279 <svg viewBox="0 0 24 24" width="52" height="52">280 <rect x="5" y="7" width="14" height="12" rx="2" fill="#ff7a00"/>281 </svg>282 </div>283 <span>My Trips</span>284 </div>285 <div class="bn-item">286 <div class="bn-icon" style="background:#ffe0c7;">287 <svg viewBox="0 0 24 24" width="52" height="52">288 <path d="M4 4h16v14l-8 4-8-4z" fill="#ff7a00"/>289 </svg>290 </div>291 <span>Contact Us</span>292 </div>293 <div class="bn-item">294 <div class="bn-icon" style="background:#ffe0c7;">295 <svg viewBox="0 0 24 24" width="52" height="52">296 <circle cx="6" cy="6" r="3" fill="#ff7a00"/>297 <circle cx="18" cy="6" r="3" fill="#ff7a00"/>298 <circle cx="6" cy="18" r="3" fill="#ff7a00"/>299 <circle cx="18" cy="18" r="3" fill="#ff7a00"/>300 </svg>301 </div>302 <span>More</span>303 </div>304 </div>305 306 <div class="home-indicator"></div>307</div>308</body>309</html>