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 Search UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #FFFFFF; border-radius: 32px; box-shadow: 0 10px 30px rgba(0,0,0,0.12);12 color: #222;13 }14 .content { padding: 40px 40px 32px 40px; }15 .topbar { display: flex; align-items: center; gap: 20px; height: 90px; }16 .topbar .title { font-size: 46px; font-weight: 500; color: #222; }17 .topbar .title b { font-weight: 700; }18 .topbar .right { margin-left: auto; display: flex; align-items: center; gap: 24px; }19 .icon-btn { width: 64px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center; }20 .icon { width: 40px; height: 40px; }21 .segmented {22 margin-top: 18px;23 background: #fff; border-radius: 24px; box-shadow: 0 8px 18px rgba(0,0,0,0.12);24 display: flex; overflow: hidden; width: 100%;25 }26 .segmented .tab {27 flex: 1; text-align: center; padding: 26px 0; font-size: 30px; font-weight: 600; color: #777; border-right: 1px solid #E7E7E7;28 }29 .segmented .tab:last-child { border-right: none; }30 .segmented .tab.active { background: #0D6EFD; color: #fff; }31 .promo {32 margin-top: 30px; background: #BDEDDC; border-radius: 18px; padding: 26px 24px; display: flex; align-items: center; gap: 18px; color: #10684A;33 }34 .promo .badge {35 width: 64px; height: 64px; background: #98E0C9; border: 1px solid #83cbb3; border-radius: 16px; display: flex; align-items: center; justify-content: center;36 }37 .card {38 margin-top: 22px; background: #F5F5F5; border-radius: 18px; padding: 26px 24px; border: 1px solid #E5E5E5;39 }40 .card-row { display: flex; gap: 24px; }41 .card-row .card { flex: 1; }42 .label { font-size: 26px; letter-spacing: 0.2px; color: #7A7A7A; font-weight: 700; }43 .value { display: flex; align-items: center; gap: 16px; }44 .value .main { font-size: 40px; font-weight: 800; color: #111; }45 .value .code { font-size: 28px; color: #666; font-weight: 600; }46 .sub { font-size: 26px; color: #8A8A8A; margin-top: 8px; }47 .swap {48 position: absolute; right: 48px; top: 670px; width: 86px; height: 86px;49 background: #fff; border: 1px solid #E5E5E5; border-radius: 18px; box-shadow: 0 6px 14px rgba(0,0,0,0.12);50 display: flex; align-items: center; justify-content: center;51 }52 .date-big { font-size: 40px; font-weight: 800; color: #111; }53 .date-sub { font-size: 26px; color: #808080; margin-left: 10px; }54 .add-return { color: #0D6EFD; font-weight: 800; font-size: 32px; }55 .hint { font-size: 24px; color: #8A8A8A; margin-top: 4px; }56 .special-title { margin-top: 22px; color: #8A8A8A; font-weight: 800; font-size: 26px; letter-spacing: 0.3px; }57 .chip-row { display: flex; gap: 18px; margin-top: 16px; flex-wrap: wrap; }58 .chip {59 padding: 20px 28px; border-radius: 16px; border: 2px solid #E6E6E6; background: #fff;60 font-size: 30px; font-weight: 700; color: #333; position: relative;61 }62 .chip .sale {63 position: absolute; top: -16px; left: 14px; background: #FF6B6B; color: white; font-weight: 800;64 font-size: 22px; padding: 6px 14px; border-radius: 14px;65 box-shadow: 0 4px 10px rgba(255,107,107,0.6);66 }67 .cta {68 margin-top: 30px; background: linear-gradient(90deg,#3A7BFF,#0D6EFD); color: #fff; border: none;69 border-radius: 18px; font-size: 40px; font-weight: 900; padding: 32px; width: 100%;70 box-shadow: 0 10px 22px rgba(13,110,253,0.35); letter-spacing: 1px;71 }72 .offers-strip { margin-top: 30px; display: flex; gap: 20px; }73 .img-ph {74 width: 320px; height: 180px; background: #E0E0E0; border: 1px solid #BDBDBD;75 border-radius: 16px; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px; position: relative;76 }77 .tag-sponsored {78 position: absolute; top: 10px; right: 10px; background: #fff; border: 1px solid #ddd; border-radius: 14px; padding: 6px 12px; font-size: 20px; color: #666;79 }80 .section-header { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; }81 .section-header .left { display: flex; align-items: center; gap: 14px; color: #6F3DF4; }82 .section-header .left .label { color: #6F3DF4; font-size: 34px; font-weight: 800; }83 .section-header .right { color: #6F3DF4; font-size: 28px; font-weight: 800; display: flex; align-items: center; gap: 8px; }84 .gallery { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }85 .bottom-space { height: 140px; }86</style>87</head>88<body>89<div id="render-target">90 <div class="content">91 <div class="topbar">92 <div class="icon-btn" style="background:#fff;">93 <svg class="icon" viewBox="0 0 24 24">94 <path d="M15 18l-6-6 6-6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>95 </svg>96 </div>97 <div class="title">Flight <b>Search</b></div>98 <div class="right">99 <div class="icon-btn" style="background:#F5F5F5;">100 <svg class="icon" viewBox="0 0 24 24">101 <text x="6" y="17" font-size="14" font-weight="800" fill="#0D6EFD">A</text>102 <circle cx="18" cy="8" r="3" fill="#6F3DF4"/>103 </svg>104 </div>105 </div>106 </div>107 108 <div class="segmented">109 <div class="tab active">ONE WAY</div>110 <div class="tab">ROUNDTRIP</div>111 <div class="tab">MULTICITY</div>112 </div>113 114 <div class="promo">115 <div class="badge">116 <svg class="icon" viewBox="0 0 24 24">117 <path d="M6 12a6 6 0 1112 0 6 6 0 01-12 0z" fill="#7ed3b4"/>118 <text x="8" y="15" font-size="10" font-weight="900" fill="#10684A">%</text>119 </svg>120 </div>121 <div style="font-size:28px; font-weight:700;">122 Get FLAT 12% OFF* on your first flight booking! Use code: WELCOMEMMT123 </div>124 </div>125 126 <div class="card">127 <div class="label">FROM</div>128 <div class="value" style="margin-top:10px;">129 <svg class="icon" viewBox="0 0 24 24">130 <path d="M2 16l20-6-7 7-3-1-4 2z" fill="#B0B0B0"/>131 </svg>132 <div class="main">Knoxville</div>133 <div class="code">TYS</div>134 </div>135 <div class="sub">McGhee Tyson-TN</div>136 </div>137 138 <div class="card">139 <div class="label">TO</div>140 <div class="value" style="margin-top:10px;">141 <svg class="icon" viewBox="0 0 24 24">142 <path d="M2 16l20-6-7 7-3-1-4 2z" fill="#B0B0B0"/>143 </svg>144 <div class="main">Honolulu</div>145 <div class="code">HNL</div>146 </div>147 <div class="sub">Honolulu-HI</div>148 </div>149 150 <div class="swap">151 <svg class="icon" viewBox="0 0 24 24">152 <path d="M12 4v6M9 7l3-3 3 3M12 20v-6M9 17l3 3 3-3" stroke="#0D6EFD" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>153 </svg>154 </div>155 156 <div class="card-row">157 <div class="card">158 <div class="label">DEPARTURE DATE</div>159 <div class="value" style="margin-top:10px;">160 <svg class="icon" viewBox="0 0 24 24">161 <rect x="3" y="5" width="18" height="16" rx="2" ry="2" fill="#DADADA"/>162 <line x1="3" y1="9" x2="21" y2="9" stroke="#B5B5B5" stroke-width="2"/>163 </svg>164 <div class="date-big">04 Nov</div>165 <div class="date-sub">Sat, 2023</div>166 </div>167 </div>168 <div class="card">169 <div class="add-return">+ADD RETURN DATE</div>170 <div class="hint">Save more on round trips!</div>171 </div>172 </div>173 174 <div class="card">175 <div class="label">TRAVELLERS & CLASS</div>176 <div class="value" style="margin-top:10px;">177 <svg class="icon" viewBox="0 0 24 24">178 <circle cx="12" cy="8" r="4" fill="#CFCFCF"/>179 <rect x="6" y="13" width="12" height="7" rx="3" fill="#CFCFCF"/>180 </svg>181 <div class="main">1,</div>182 <div class="sub" style="margin-top:0;">Economy/Premium Economy</div>183 </div>184 </div>185 186 <div class="special-title">SPECIAL FARES (OPTIONAL)</div>187 <div class="chip-row">188 <div class="chip">189 <div class="sale">SALE</div>190 Student191 </div>192 <div class="chip">Armed Forces</div>193 <div class="chip">Senior Citizen</div>194 <div class="chip">Double Seat</div>195 </div>196 197 <button class="cta">SEARCH FLIGHTS</button>198 199 <div class="offers-strip">200 <div class="img-ph">[IMG: Travel Offer Banner]</div>201 <div class="img-ph">202 <span class="tag-sponsored">Sponsored</span>203 [IMG: Rethink Your Summer]204 </div>205 <div class="img-ph">[IMG: Pool & Lounge]</div>206 </div>207 208 <div class="section-header">209 <div class="left">210 <svg class="icon" viewBox="0 0 24 24">211 <path d="M12 2l3 6 6 1-4 4 1 6-6-3-6 3 1-6-4-4 6-1z" fill="#6F3DF4"/>212 </svg>213 <div class="label">OFFERS</div>214 </div>215 <div class="right">View All216 <svg class="icon" viewBox="0 0 24 24">217 <path d="M9 6l6 6-6 6" stroke="#6F3DF4" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>218 </svg>219 </div>220 </div>221 222 <div class="gallery">223 <div class="img-ph" style="height:260px;">[IMG: Scenic Destination]</div>224 <div class="img-ph" style="height:260px;">[IMG: Limited Time Offer]</div>225 <div class="img-ph" style="height:260px;">[IMG: Beach Escape]</div>226 <div class="img-ph" style="height:260px;">[IMG: City Break]</div>227 </div>228 229 <div class="bottom-space"></div>230 </div>231</div>232</body>233</html>