GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Travel Search UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">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;11 background: #f7f8fc; border-radius: 0;12 }13 14 /* Top status bar */15 .status-bar {16 position: absolute; top: 0; left: 0; width: 100%; height: 110px;17 background: #3b4c86; color: #ffffff; display: flex; align-items: center; justify-content: space-between;18 padding: 0 40px; box-sizing: border-box;19 }20 .status-left, .status-right { display: flex; align-items: center; gap: 28px; font-size: 36px; }21 .status-icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; opacity: 0.9; }22 .status-icon svg { width: 40px; height: 40px; fill: #ffffff; }23 24 /* Hero area */25 .hero {26 position: absolute; top: 110px; left: 0; width: 100%; height: 560px;27 background: linear-gradient(180deg, #4a69a1 0%, #7aa0cf 80%, #8cb3da 100%);28 }29 .hero-img {30 position: absolute; left: 0; bottom: 0; width: 100%; height: 560px;31 display: flex; align-items: flex-end; justify-content: center;32 }33 .hero-img .placeholder {34 width: 1000px; height: 480px; background: #E0E0E0; border: 1px solid #BDBDBD;35 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 36px; border-radius: 8px; opacity: 0.6;36 }37 38 /* Main white panel */39 .panel {40 position: absolute; top: 560px; left: 0; width: 100%; height: auto;41 background: #ffffff; border-top-left-radius: 30px; border-top-right-radius: 30px;42 box-shadow: 0 -8px 24px rgba(59,76,134,0.25);43 }44 .panel-inner {45 padding: 48px 40px 40px 40px; box-sizing: border-box;46 }47 .title {48 font-weight: 800; color: #172a5a; font-size: 64px; letter-spacing: 0.5px; margin: 10px 0 30px 10px;49 }50 51 /* Input rows */52 .field {53 width: 100%; background: #eef1f7; border-radius: 24px; padding: 28px 30px; box-sizing: border-box;54 display: flex; align-items: center; justify-content: space-between; margin: 18px 0;55 }56 .field .left { display: flex; align-items: center; gap: 24px; }57 .field .label { font-size: 38px; color: #172a5a; }58 .field .placeholder { color: #9aa7c7; font-size: 38px; }59 .icon {60 width: 52px; height: 52px; border-radius: 26px; display: inline-flex; align-items: center; justify-content: center;61 background: #e3e7f0;62 }63 .icon svg { width: 36px; height: 36px; fill: #6b7aa8; }64 .swap svg { fill: #6b7aa8; }65 66 /* Two columns for dates */67 .row { display: flex; gap: 24px; }68 .half { flex: 1; }69 70 /* Search button */71 .search-btn {72 width: 100%; background: #ffc3c6; color: #ffffff; font-weight: 700; font-size: 42px;73 border: none; border-radius: 26px; padding: 34px 20px; margin: 28px 0 8px 0;74 box-shadow: 0 6px 12px rgba(255, 140, 150, 0.35);75 }76 77 /* How it works */78 .how {79 margin-top: 24px;80 padding: 0 20px 20px 20px;81 }82 .how h2 {83 color: #172a5a; font-size: 52px; margin: 16px 0 20px 20px; font-weight: 800;84 }85 .how-list { position: relative; padding-left: 120px; }86 .dotted {87 position: absolute; left: 64px; top: 0; width: 2px; height: 500px;88 background-image: radial-gradient(#d7dbe7 2px, transparent 2px);89 background-size: 6px 18px; background-repeat: repeat-y;90 }91 .how-item { padding: 30px 0; border-top: 1px solid #e6e9f2; }92 .how-item:first-child { border-top: none; }93 .how-title { color: #2a3f78; font-size: 44px; font-weight: 700; margin-bottom: 8px; }94 .how-text { color: #6f7ea6; font-size: 36px; line-height: 1.35; }95 .how-icon {96 position: absolute; left: 24px; width: 80px; height: 80px; border-radius: 20px; background: #eef1f7;97 display: flex; align-items: center; justify-content: center; border: 1px solid #e0e4ee;98 }99 .how-icon svg { width: 52px; height: 52px; fill: #9aa7c7; }100 .how-item .bag svg { stroke: #9aa7c7; fill: none; }101 102 /* Bottom tab bar */103 .tabbar {104 position: absolute; bottom: 140px; left: 0; width: 100%; height: 170px;105 background: #ffffff; border-top: 1px solid #e6e9f2; display: flex; align-items: center; justify-content: space-around;106 }107 .tab-icon { width: 100px; height: 100px; border-radius: 30px; display: flex; align-items: center; justify-content: center; }108 .tab-icon svg { width: 72px; height: 72px; fill: #a7b3d3; }109 .tab-active svg { fill: #ff8ea0; }110 .red-dot {111 position: absolute; right: 260px; top: 24px; width: 24px; height: 24px; background: #ff6b6b; border-radius: 50%;112 }113 114 /* Bottom safe area */115 .bottom-safe {116 position: absolute; bottom: 0; left: 0; width: 100%; height: 140px; background: #0f1d3c;117 display: flex; align-items: center; justify-content: center;118 }119 .home-indicator {120 width: 280px; height: 14px; background: #dfe5f5; border-radius: 8px; opacity: 0.65;121 }122</style>123</head>124<body>125<div id="render-target">126 127 <!-- Status Bar -->128 <div class="status-bar">129 <div class="status-left">130 <div>5:56</div>131 <div class="status-icon">132 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>133 </div>134 <div>28°</div>135 <div class="status-icon">136 <svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="3"/></svg>137 </div>138 </div>139 <div class="status-right">140 <div class="status-icon">141 <svg viewBox="0 0 24 24"><path d="M3 16h18v2H3zm3-4h12v2H6zm3-4h6v2H9z"/></svg>142 </div>143 <div class="status-icon">144 <svg viewBox="0 0 24 24"><rect x="2" y="6" width="20" height="12" rx="3"/><rect x="18" y="10" width="2" height="4"/></svg>145 </div>146 </div>147 </div>148 149 <!-- Hero -->150 <div class="hero">151 <div class="hero-img">152 <div class="placeholder">[IMG: Travel illustration with train, bus and plane]</div>153 </div>154 </div>155 156 <!-- Main panel -->157 <div class="panel">158 <div class="panel-inner">159 <div class="title">Where to, Jane ?</div>160 161 <!-- From -->162 <div class="field">163 <div class="left">164 <div class="icon">165 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="6"/></svg>166 </div>167 <div class="label">New York, NY USA</div>168 </div>169 <div class="swap">170 <svg viewBox="0 0 24 24">171 <path d="M7 7h10l-3-3m3 13H7l3 3" stroke="#6b7aa8" stroke-width="2" fill="none"/>172 </svg>173 </div>174 </div>175 176 <!-- To -->177 <div class="field">178 <div class="left">179 <div class="icon">180 <svg viewBox="0 0 24 24"><path d="M12 2a8 8 0 0 0-8 8c0 6 8 12 8 12s8-6 8-12a8 8 0 0 0-8-8zm0 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/></svg>181 </div>182 <div class="placeholder">City, station, airport or port</div>183 </div>184 </div>185 186 <!-- Dates -->187 <div class="row">188 <div class="field half">189 <div class="left">190 <div class="icon">191 <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="16" rx="3"/><path d="M7 3v4M17 3v4" stroke="#6b7aa8" stroke-width="2"/></svg>192 </div>193 <div class="label">Wed, Sep 13</div>194 </div>195 </div>196 <div class="field half">197 <div class="left">198 <div class="icon">199 <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="16" rx="3"/><path d="M7 3v4M17 3v4" stroke="#6b7aa8" stroke-width="2"/></svg>200 </div>201 <div class="placeholder">+ Add return</div>202 </div>203 </div>204 </div>205 206 <!-- Passengers -->207 <div class="field">208 <div class="left">209 <div class="icon">210 <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 4-6 8-6s8 2 8 6" stroke="#6b7aa8" stroke-width="2" fill="none"/></svg>211 </div>212 <div class="label">1 Adult, No discount card</div>213 </div>214 </div>215 216 <!-- Search button -->217 <button class="search-btn">Search Omio</button>218 219 <!-- How it works -->220 <div class="how">221 <h2>How it works</h2>222 <div class="how-list">223 <div class="dotted"></div>224 225 <div class="how-item">226 <div class="how-icon">227 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4" stroke="#9aa7c7" stroke-width="2" fill="none"/></svg>228 </div>229 <div style="margin-left: 20px;">230 <div class="how-title">Search</div>231 <div class="how-text">Find trains, buses, flights and ferries across Europe, Canada and the US.</div>232 </div>233 </div>234 235 <div class="how-item">236 <div class="how-icon bag">237 <svg viewBox="0 0 24 24">238 <path d="M7 7h10l2 12H5L7 7z" stroke-width="2"/>239 <path d="M9 7a3 3 0 0 1 6 0" stroke-width="2"/>240 </svg>241 </div>242 <div style="margin-left: 20px;">243 <div class="how-title">Compare</div>244 <div class="how-text">Choose the fastest and cheapest routes from our 1000+ official partners.</div>245 </div>246 </div>247 248 </div>249 </div>250 </div>251 </div>252 253 <!-- Bottom tab bar -->254 <div class="tabbar">255 <div class="tab-icon tab-active">256 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="7"/><path d="M20 20l-4-4" stroke="#ff8ea0" stroke-width="2" fill="none"/></svg>257 </div>258 <div class="tab-icon">259 <svg viewBox="0 0 24 24"><path d="M4 6h16v12H4z"/><path d="M8 10h8" stroke="#a7b3d3" stroke-width="2" fill="none"/></svg>260 </div>261 <div class="tab-icon">262 <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 4-6 8-6s8 2 8 6" stroke="#a7b3d3" stroke-width="2" fill="none"/></svg>263 </div>264 <div class="red-dot"></div>265 </div>266 267 <!-- Bottom safe area -->268 <div class="bottom-safe">269 <div class="home-indicator"></div>270 </div>271 272</div>273</body>274</html>