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>Travel Explore UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff; color: #1f1f1f;13 }14 15 /* Top blue header */16 .header {17 position: relative;18 width: 100%;19 height: 290px;20 background: #19A4E6;21 box-shadow: 0 2px 8px rgba(0,0,0,0.15) inset;22 }23 .status {24 height: 80px;25 display: flex; align-items: center; justify-content: space-between;26 padding: 0 32px; color: #fff; font-weight: 600;27 font-size: 40px;28 }29 .status-right { display: flex; align-items: center; gap: 22px; }30 .status-icon svg { width: 36px; height: 36px; fill: #ffffff; opacity: 0.95; }31 32 .appbar {33 padding: 20px 28px 0 28px;34 display: flex; align-items: center; gap: 24px;35 }36 .search {37 flex: 1;38 background: #ffffff;39 height: 108px;40 border-radius: 28px;41 display: flex; align-items: center;42 padding: 0 28px;43 box-shadow: 0 2px 6px rgba(0,0,0,0.15);44 }45 .search svg { width: 44px; height: 44px; fill: #9E9E9E; margin-right: 18px; }46 .search span { color: #8F8F8F; font-size: 40px; }47 .header-btn {48 width: 100px; height: 100px; border-radius: 26px;49 display: flex; align-items: center; justify-content: center;50 background: rgba(255,255,255,0.22);51 border: 1px solid rgba(255,255,255,0.3);52 }53 .header-btn svg { width: 48px; height: 48px; fill: #ffffff; }54 55 /* Grid of feature cards */56 .content {57 position: relative;58 padding: 28px;59 }60 .grid {61 display: grid;62 grid-template-columns: 1fr 1fr;63 gap: 24px;64 }65 .card {66 position: relative;67 border-radius: 26px;68 overflow: hidden;69 box-shadow: 0 3px 10px rgba(0,0,0,0.14);70 background: #ffffff;71 }72 .card .img {73 width: 100%; height: 500px; 74 background: #E0E0E0;75 border: 1px solid #BDBDBD;76 display: flex; align-items: flex-end; justify-content: center;77 color: #757575; font-size: 34px; padding-bottom: 16px;78 }79 .overlay {80 position: absolute; top: 18px; left: 22px; right: 22px;81 color: #ffffff; text-shadow: 0 3px 10px rgba(0,0,0,0.35);82 }83 .overlay .pre { font-size: 34px; opacity: 0.9; margin-bottom: 6px; }84 .overlay .title-big { font-size: 60px; font-weight: 800; line-height: 1.02; letter-spacing: 1px; }85 86 /* Travel Tips section */87 .section-title { margin-top: 22px; padding: 10px 8px; }88 .section-title h2 { font-size: 56px; margin: 20px 20px 8px 8px; }89 .section-title p { font-size: 36px; color: #8F8F8F; margin: 0 20px 0 8px; }90 91 .tips-row {92 position: relative;93 display: flex; gap: 24px;94 padding: 20px 8px 140px 8px;95 }96 .tip-card {97 width: 332px; height: 260px; border-radius: 24px; overflow: hidden;98 box-shadow: 0 3px 10px rgba(0,0,0,0.12);99 position: relative; background: #ffffff;100 }101 .tip-card .img {102 width: 100%; height: 100%;103 background: #E0E0E0; border: 1px solid #BDBDBD;104 display: flex; align-items: center; justify-content: center;105 color: #757575; font-size: 28px; text-align: center; padding: 12px;106 }107 .tip-card .tip-text {108 position: absolute; top: 10px; left: 12px; right: 12px;109 font-size: 34px; font-weight: 700; color: #2b2b2b;110 }111 112 .more-btn {113 position: absolute; left: 50%; transform: translateX(-50%);114 bottom: 36px;115 background: #0D86E6; color: #fff;116 height: 104px; width: 300px; border-radius: 36px;117 display: flex; align-items: center; justify-content: center;118 gap: 16px; font-size: 40px; font-weight: 700;119 box-shadow: 0 8px 16px rgba(13,134,230,0.35);120 }121 .more-btn svg { width: 42px; height: 42px; fill: #ffffff; }122 123 /* Bottom navigation bar */124 .nav {125 position: absolute; left: 0; right: 0; bottom: 84px;126 height: 180px; background: #ffffff;127 border-top: 1px solid #E5E5E5;128 display: flex; align-items: center; justify-content: space-around;129 }130 .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }131 .nav-item svg { width: 56px; height: 56px; }132 .nav-item span { font-size: 30px; color: #858585; }133 .active svg { fill: #138DE8; }134 .active span { color: #138DE8; font-weight: 700; }135 136 /* Home indicator */137 .home-indicator {138 position: absolute; left: 50%; transform: translateX(-50%);139 bottom: 24px; width: 360px; height: 18px; border-radius: 10px;140 background: #000000; opacity: 0.1;141 }142</style>143</head>144<body>145<div id="render-target">146 147 <!-- Top Header -->148 <div class="header">149 <div class="status">150 <div>1:31</div>151 <div class="status-right">152 <div class="status-icon">153 <!-- location/walk icon (simple person) -->154 <svg viewBox="0 0 24 24"><path d="M12 3a2.5 2.5 0 110 5 2.5 2.5 0 010-5zM10 9c-1.1 0-2 .9-2 2v2.5l-1.2 2.3a1 1 0 101.8.9L9.5 14H11v3.5l-1.3 3a1 1 0 101.8.8L12 18h2l1.2 2.3a1 1 0 101.8-.9L15 15.5V11a2 2 0 00-2-2h-3z"/></svg>155 </div>156 <div class="status-icon">157 <!-- ghost/snap icon -->158 <svg viewBox="0 0 24 24"><path d="M12 2c4.4 0 8 3.6 8 8v7c-1-.6-2-.6-3 0-.9-.6-2-.6-3 0-.9-.6-2-.6-3 0-1-.6-2-.6-3 0V10c0-4.4 3.6-8 8-8zM12 7a2 2 0 100 4 2 2 0 000-4z"/></svg>159 </div>160 <div class="status-icon">161 <!-- mail icon -->162 <svg viewBox="0 0 24 24"><path d="M3 5h18a2 2 0 012 2v10a2 2 0 01-2 2H3a2 2 0 01-2-2V7a2 2 0 012-2zm0 2l9 6 9-6H3z"/></svg>163 </div>164 <div class="status-icon">165 <!-- wifi -->166 <svg viewBox="0 0 24 24"><path d="M2 8a16 16 0 0120 0l-2 2a12 12 0 00-16 0L2 8zm4 5a10 10 0 0112 0l-2 2a6 6 0 00-8 0l-2-2zm4 5a2 2 0 112 0 2 2 0 01-2 0z"/></svg>167 </div>168 <div class="status-icon">169 <!-- battery -->170 <svg viewBox="0 0 24 24"><path d="M2 8a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V8zm20 2v4h2v-4h-2z"/></svg>171 </div>172 </div>173 </div>174 175 <div class="appbar">176 <div class="search">177 <svg viewBox="0 0 24 24"><path d="M10 2a8 8 0 016.3 12.9l4.4 4.4-1.4 1.4-4.4-4.4A8 8 0 1110 2zm0 2a6 6 0 100 12 6 6 0 000-12z"/></svg>178 <span>Search for items, destinations...</span>179 </div>180 <div class="header-btn">181 <!-- bell -->182 <svg viewBox="0 0 24 24"><path d="M12 22a2 2 0 002-2H10a2 2 0 002 2zm6-6V11a6 6 0 10-12 0v5l-2 2v1h16v-1l-2-2z"/></svg>183 </div>184 <div class="header-btn">185 <!-- chat -->186 <svg viewBox="0 0 24 24"><path d="M4 4h16a2 2 0 012 2v11a2 2 0 01-2 2H9l-5 3V6a2 2 0 012-2zm2 5v2h12V9H6zm0 4v2h9v-2H6z"/></svg>187 </div>188 </div>189 </div>190 191 <!-- Main Content -->192 <div class="content">193 <div class="grid">194 <!-- Card 1 -->195 <div class="card">196 <div class="overlay">197 <div class="pre">S.E.A.'s must-visit</div>198 <div class="title-big">THEME PARKS</div>199 </div>200 <div class="img">[IMG: Theme park castle & roller coaster]</div>201 </div>202 <!-- Card 2 -->203 <div class="card">204 <div class="overlay">205 <div class="pre">3D2N Guide to</div>206 <div class="title-big">SINGAPORE</div>207 </div>208 <div class="img">[IMG: Night lights at Supertree Grove]</div>209 </div>210 <!-- Card 3 -->211 <div class="card">212 <div class="overlay">213 <div class="pre">Diving in</div>214 <div class="title-big">PERHENTIAN<br>ISLANDS</div>215 </div>216 <div class="img">[IMG: Boats over turquoise water and beach]</div>217 </div>218 <!-- Card 4 -->219 <div class="card">220 <div class="overlay">221 <div class="pre">Secluded beaches in</div>222 <div class="title-big">SOUTHEAST<br>ASIA</div>223 </div>224 <div class="img">[IMG: Palm trees with blue sky]</div>225 </div>226 </div>227 228 <!-- Travel Tips -->229 <div class="section-title">230 <h2>Travel Tips</h2>231 <p>Tried-and-true tips to make you a savvy traveler</p>232 </div>233 234 <div class="tips-row">235 <div class="tip-card">236 <div class="tip-text">TRAVELING WITH TODDLERS: 6 SURVIVAL TIPS</div>237 <div class="img">[IMG: Cartoon family with toddlers]</div>238 </div>239 <div class="tip-card">240 <div class="tip-text">DIVIDE & RULE</div>241 <div class="img">[IMG: Cartoon family with flags]</div>242 </div>243 <div class="tip-card">244 <div class="tip-text">PACKING LIGHT</div>245 <div class="img">[IMG: Cartoon luggage & landscape]</div>246 </div>247 248 <div class="more-btn">249 <svg viewBox="0 0 24 24"><path d="M12 4v12l5-5 1.4 1.4L12 19l-6.4-6.6L7 11l5 5V4h0z"/></svg>250 More251 </div>252 </div>253 </div>254 255 <!-- Bottom Navigation -->256 <div class="nav">257 <div class="nav-item active">258 <svg viewBox="0 0 24 24"><path d="M3 10l9-7 9 7v10a2 2 0 01-2 2h-5v-6H10v6H5a2 2 0 01-2-2V10z"/></svg>259 <span>Home</span>260 </div>261 <div class="nav-item">262 <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm0 3l2.5 5.5L20 12l-5.5 1.5L12 19l-2.5-5.5L4 12l5.5-1.5L12 5z"/></svg>263 <span>Explore</span>264 </div>265 <div class="nav-item">266 <svg viewBox="0 0 24 24"><path d="M5 4h14a2 2 0 012 2v12a2 2 0 01-2 2H5a2 2 0 01-2-2V6a2 2 0 012-2zm0 4h14V6H5v2zm2 3h4v4H7v-4zm6 0h4v4h-4v-4z"/></svg>267 <span>Bookings</span>268 </div>269 <div class="nav-item">270 <svg viewBox="0 0 24 24"><path d="M6 3h12a2 2 0 012 2v16l-8-4-8 4V5a2 2 0 012-2z"/></svg>271 <span>Saved</span>272 </div>273 <div class="nav-item">274 <svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-5 0-9 3-9 6v2h18v-2c0-3-4-6-9-6z"/></svg>275 <span>My Account</span>276 </div>277 </div>278 279 <div class="home-indicator"></div>280</div>281</body>282</html>