GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>UI Render</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: #1f1f1f; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Status bar */18 .status-bar {19 height: 96px;20 display: flex;21 align-items: center;22 padding: 0 36px;23 font-size: 34px;24 color: #2c2c2c;25 }26 .status-icons {27 margin-left: auto;28 display: flex;29 align-items: center;30 gap: 26px;31 color: #5f6368;32 }33 .status-icon {34 width: 32px; height: 32px;35 display: inline-flex; align-items: center; justify-content: center;36 }37 38 /* Search section */39 .search-section { padding: 12px 36px 0; }40 .search-row { display: flex; align-items: center; gap: 18px; }41 .search-bar {42 flex: 1;43 height: 116px;44 background: #F3F3F3;45 border: 1px solid #E0E0E0;46 border-radius: 58px;47 box-shadow: 0 2px 6px rgba(0,0,0,0.08);48 display: flex; align-items: center;49 padding: 0 26px;50 gap: 22px;51 }52 .pin-chip {53 width: 64px; height: 64px; border-radius: 32px;54 background: #ffffff;55 border: 1px solid #E0E0E0;56 display: flex; align-items: center; justify-content: center;57 color: #1a73e8;58 }59 .search-placeholder {60 font-size: 40px; color: #70757a; flex: 1;61 }62 .circle-btn {63 width: 80px; height: 80px; border-radius: 40px;64 background: #ffffff;65 border: 1px solid #E0E0E0;66 display: flex; align-items: center; justify-content: center;67 color: #5f6368;68 }69 .avatar {70 width: 88px; height: 88px; border-radius: 44px;71 background: #EFEFEF;72 border: 1px solid #D3D3D3;73 display: flex; align-items: center; justify-content: center;74 font-weight: 700; color: #6b6b6b;75 }76 77 /* Heading */78 .section-title {79 font-size: 64px; font-weight: 600;80 padding: 32px 36px 20px;81 }82 83 /* Horizontal cards */84 .category-strip {85 display: flex; gap: 26px;86 padding: 0 36px 26px;87 }88 .category-card {89 width: 300px; height: 340px; position: relative; border-radius: 24px; overflow: hidden;90 }91 .img-ph {92 width: 100%; height: 100%;93 background: #E0E0E0;94 border: 1px solid #BDBDBD;95 display: flex; align-items: center; justify-content: center;96 color: #757575; font-size: 28px; text-align: center; padding: 10px;97 }98 .card-overlay {99 position: absolute; left: 20px; bottom: 20px;100 color: #ffffff; font-size: 40px; font-weight: 600; line-height: 1.15;101 text-shadow: 0 2px 8px rgba(0,0,0,0.35);102 }103 104 .divider {105 height: 16px; background: #EFEFEF; margin: 6px 0 0;106 border-top: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5;107 }108 109 /* Review block */110 .post {111 padding: 24px 36px 0;112 }113 .post-header {114 display: flex; align-items: center; gap: 18px;115 margin-bottom: 22px;116 }117 .user-info { display: flex; flex-direction: column; }118 .user-name { font-size: 40px; font-weight: 600; }119 .user-meta { font-size: 32px; color: #70757a; }120 .follow-link { margin-left: auto; color: #1a73e8; font-size: 36px; font-weight: 600; }121 122 .photo {123 width: 1008px; height: 820px; border-radius: 36px; overflow: hidden;124 margin: 18px auto 24px; border: 1px solid #E0E0E0;125 }126 .photo .img-ph { font-size: 32px; }127 128 .post-text {129 font-size: 38px; line-height: 1.45; color: #2b2b2b;130 padding: 0 18px;131 }132 .post-time {133 font-size: 30px; color: #70757a;134 padding: 18px 18px 10px;135 }136 .more-menu {137 position: absolute; right: 38px; top: 1460px; /* roughly aligned next to post text block */138 display: flex; flex-direction: column; gap: 8px;139 align-items: center;140 }141 .dot {142 width: 12px; height: 12px; background: #6b6b6b; border-radius: 6px;143 }144 145 /* Bottom nav */146 .gesture-handle {147 position: absolute; bottom: 228px; left: 440px;148 width: 200px; height: 12px; background: #CFCFCF; border-radius: 6px;149 }150 .bottom-nav {151 position: absolute; bottom: 0; left: 0; right: 0;152 height: 220px; background: #F4F6F8; border-top: 1px solid #DADCE0;153 display: flex; align-items: center; justify-content: space-around;154 padding-bottom: 16px;155 }156 .nav-item {157 width: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;158 color: #6b6b6b;159 }160 .nav-item.active { color: #1a73e8; }161 .nav-icon { width: 56px; height: 56px; }162 .nav-label { font-size: 30px; font-weight: 600; }163 164 /* Simple reset for inline svgs */165 svg { display: block; }166</style>167</head>168<body>169<div id="render-target">170 171 <!-- Status bar -->172 <div class="status-bar">173 <div>3:33</div>174 <div class="status-icons">175 <div class="status-icon">176 <svg viewBox="0 0 24 24" width="28" height="28"><circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/></svg>177 </div>178 <div class="status-icon">179 <svg viewBox="0 0 24 24" width="28" height="28"><path d="M3 17h18l-9-12-9 12z" fill="none" stroke="currentColor" stroke-width="2"/></svg>180 </div>181 <div class="status-icon">182 <svg viewBox="0 0 24 24" width="28" height="28"><rect x="2" y="7" width="20" height="10" rx="2" fill="none" stroke="currentColor" stroke-width="2"/><rect x="4" y="9" width="12" height="6" fill="currentColor"/></svg>183 </div>184 <div class="status-icon">185 <svg viewBox="0 0 24 24" width="28" height="28"><path d="M3 10h18v8H3z" fill="none" stroke="currentColor" stroke-width="2"/><path d="M21 6v2H3V6c4-3 14-3 18 0z" fill="currentColor"/></svg>186 </div>187 </div>188 </div>189 190 <!-- Search -->191 <div class="search-section">192 <div class="search-row">193 <div class="search-bar">194 <div class="pin-chip">195 <svg viewBox="0 0 24 24" width="36" height="36">196 <path d="M12 2c-3.3 0-6 2.7-6 6 0 4.5 6 12 6 12s6-7.5 6-12c0-3.3-2.7-6-6-6zm0 9a3 3 0 110-6 3 3 0 010 6z" fill="currentColor"/>197 </svg>198 </div>199 <div class="search-placeholder">Search here</div>200 <div class="circle-btn">201 <svg viewBox="0 0 24 24" width="36" height="36">202 <path d="M12 3a3 3 0 013 3v6a3 3 0 11-6 0V6a3 3 0 013-3zm-6 8h2c0 3.3 2.7 6 6 6s6-2.7 6-6h2c0 4.2-3.3 7.6-7.5 8.1V21h-3v-1.9C9.3 18.6 6 15.2 6 11z" fill="currentColor"/>203 </svg>204 </div>205 </div>206 <div class="avatar">C</div>207 </div>208 </div>209 210 <!-- Latest in the area -->211 <div class="section-title">Latest in the area</div>212 213 <div class="category-strip">214 <div class="category-card">215 <div class="img-ph">[IMG: Restaurants with live music]</div>216 <div class="card-overlay">Restaurants<br>with live<br>music</div>217 </div>218 <div class="category-card">219 <div class="img-ph">[IMG: Outdoor dining]</div>220 <div class="card-overlay">Outdoor<br>dining</div>221 </div>222 <div class="category-card">223 <div class="img-ph">[IMG: Best brunches]</div>224 <div class="card-overlay">Best<br>brunches</div>225 </div>226 <div class="category-card">227 <div class="img-ph">[IMG: Bars]</div>228 <div class="card-overlay">Bars</div>229 </div>230 </div>231 232 <div class="divider"></div>233 234 <!-- Post -->235 <div class="post">236 <div class="post-header">237 <div class="avatar" style="width:72px;height:72px;border-radius:36px;">UA</div>238 <div class="user-info">239 <div class="user-name">Neelakshi Chandra</div>240 <div class="user-meta">28 reviews</div>241 </div>242 <div class="follow-link">Follow</div>243 </div>244 245 <div class="photo">246 <div class="img-ph">[IMG: Water park with people in pool]</div>247 </div>248 249 <div class="post-text">250 It is a good water park situated close to dwarka. There were around 12 slides open in all in June 2023. And few more being constructed. The slides…251 </div>252 <div class="post-time">15 hours ago</div>253 </div>254 255 <div class="more-menu">256 <div class="dot"></div>257 <div class="dot"></div>258 <div class="dot"></div>259 </div>260 261 <!-- Gesture handle -->262 <div class="gesture-handle"></div>263 264 <!-- Bottom navigation -->265 <div class="bottom-nav">266 <div class="nav-item active">267 <svg class="nav-icon" viewBox="0 0 24 24">268 <path d="M12 2c-3.3 0-6 2.7-6 6 0 4.5 6 12 6 12s6-7.5 6-12c0-3.3-2.7-6-6-6zm0 9a3 3 0 110-6 3 3 0 010 6z" fill="currentColor"/>269 </svg>270 <div class="nav-label">Explore</div>271 </div>272 <div class="nav-item">273 <svg class="nav-icon" viewBox="0 0 24 24">274 <path d="M5 16h14l-1.5-5c-.3-1-1.2-2-2.7-2H9.2C7.7 9 6.8 10 6.5 11L5 16z" fill="currentColor"/>275 <path d="M5 16v3h2v-3M17 16v3h2v-3" stroke="currentColor" stroke-width="2" fill="none"/>276 </svg>277 <div class="nav-label">Go</div>278 </div>279 <div class="nav-item">280 <svg class="nav-icon" viewBox="0 0 24 24">281 <path d="M6 3h12v18l-6-4-6 4z" fill="currentColor"/>282 </svg>283 <div class="nav-label">Saved</div>284 </div>285 <div class="nav-item">286 <svg class="nav-icon" viewBox="0 0 24 24">287 <path d="M12 2c-3 0-5 2.5-5 5.5V14l-2 2v2h14v-2l-2-2V7.5C17 4.5 15 2 12 2z" fill="currentColor"/>288 <path d="M10 20h4" stroke="currentColor" stroke-width="2"/>289 </svg>290 <div class="nav-label">Updates</div>291 </div>292 </div>293 294</div>295</body>296</html>