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>Attractions - UI Mock</title>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: #ffffff; border-radius: 28px;12 box-shadow: 0 10px 30px rgba(0,0,0,0.08);13 color: #202124;14 }15 .status-bar {16 height: 56px; padding: 0 28px; display: flex; align-items: center; font-size: 28px; color: #3c4043;17 }18 .status-left { display: flex; align-items: center; gap: 22px; }19 .status-icons { display: flex; gap: 14px; }20 .dot { width: 10px; height: 10px; background: #3c4043; border-radius: 50%; opacity: 0.6; }21 .status-right { margin-left: auto; display: flex; align-items: center; gap: 18px; }22 .icon { display: inline-block; vertical-align: middle; }23 .icon svg { display: block; }24 .header {25 padding: 18px 24px; border-bottom: 1px solid #e0e0e0; background: #fff;26 }27 .search-row { display: flex; align-items: center; gap: 18px; }28 .circle-btn {29 width: 56px; height: 56px; border-radius: 28px; border: 1px solid #dadce0; display: flex; align-items: center; justify-content: center; background: #fff;30 }31 .search-field {32 flex: 1; height: 56px; border-radius: 30px; background: #f1f3f4; display: flex; align-items: center;33 padding: 0 18px; font-size: 32px; color: #202124;34 }35 .search-label { flex: 1; font-weight: 600; }36 .search-actions { display: flex; align-items: center; gap: 18px; color: #5f6368; }37 .filters { margin-top: 16px; display: flex; align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid #e0e0e0; }38 .chip {39 height: 56px; padding: 0 24px; border-radius: 28px; border: 1px solid #dadce0; background: #fff;40 display: inline-flex; align-items: center; gap: 10px; font-size: 28px; color: #3c4043;41 }42 .chip.primary { background: #e8f0fe; border-color: #c6dafc; }43 .quick-actions { display: flex; gap: 18px; padding: 16px 24px; }44 .pill {45 height: 72px; padding: 0 26px; border-radius: 36px; border: 1px solid #dadce0; background: #fff;46 display: inline-flex; align-items: center; gap: 16px; font-size: 30px; color: #1a73e8; box-shadow: 0 2px 4px rgba(0,0,0,0.04);47 }48 .results { padding-bottom: 20px; }49 .card {50 margin: 18px 24px; border-radius: 24px; background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,0.08);51 padding-bottom: 20px;52 }53 .image-row { display: flex; gap: 20px; padding: 20px; }54 .img {55 width: 320px; height: 220px; background: #E0E0E0; border: 1px solid #BDBDBD;56 display: flex; align-items: center; justify-content: center; color: #757575; border-radius: 22px; font-size: 26px; text-align: center;57 }58 .title-row { display: flex; align-items: center; padding: 0 20px; }59 .title { font-size: 46px; font-weight: 700; flex: 1; margin-top: 6px; }60 .bookmark {61 width: 64px; height: 64px; border-radius: 32px; border: 1px solid #dadce0; display: flex; align-items: center; justify-content: center;62 }63 .meta { padding: 8px 20px 0 20px; font-size: 30px; color: #3c4043; }64 .stars { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; }65 .closed { color: #d93025; font-weight: 600; }66 .review { padding: 12px 20px; display: flex; align-items: center; gap: 14px; color: #3c4043; font-size: 30px; }67 .avatar { width: 32px; height: 32px; border-radius: 16px; background: #8ab4f8; }68 .card-actions { display: flex; gap: 18px; padding: 14px 20px 20px 20px; }69 .floating-map {70 position: absolute; right: 24px; bottom: 160px; width: 120px; height: 120px; border-radius: 28px;71 background: #fff; box-shadow: 0 8px 16px rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center; border: 1px solid #dadce0;72 }73 .discover { position: absolute; left: 0; bottom: 80px; width: 100%; padding: 16px 28px; font-size: 34px; color: #202124; background: #f8f9fa; border-top: 1px solid #e0e0e0; }74 .discover .bar { margin-top: 14px; height: 8px; width: 60%; background: #cfcfcf; border-radius: 4px; }75</style>76</head>77<body>78<div id="render-target">79 80 <!-- Status bar -->81 <div class="status-bar">82 <div class="status-left">83 <div>10:54</div>84 <div class="status-icons">85 <div class="dot"></div>86 <div class="dot"></div>87 <div class="dot"></div>88 <div class="dot"></div>89 <div class="dot" style="margin-left:6px;"></div>90 </div>91 </div>92 <div class="status-right">93 <!-- Location dot -->94 <svg class="icon" width="26" height="26"><circle cx="13" cy="13" r="9" fill="#5f6368"/></svg>95 <!-- Wifi -->96 <svg class="icon" width="28" height="26" viewBox="0 0 28 26">97 <path d="M2 9c6-6 18-6 24 0M6 13c4-4 12-4 16 0M10 17c2-2 6-2 8 0M13 21l2 2" stroke="#5f6368" stroke-width="2" fill="none" stroke-linecap="round"/>98 </svg>99 <!-- Battery -->100 <svg class="icon" width="36" height="20" viewBox="0 0 36 20">101 <rect x="1" y="3" width="30" height="14" rx="3" stroke="#5f6368" fill="none" stroke-width="2"/>102 <rect x="4" y="6" width="22" height="8" rx="2" fill="#5f6368"/>103 <rect x="32" y="7" width="3" height="6" rx="1" fill="#5f6368"/>104 </svg>105 </div>106 </div>107 108 <!-- Header with search -->109 <div class="header">110 <div class="search-row">111 <div class="circle-btn">112 <svg class="icon" width="26" height="26" viewBox="0 0 26 26">113 <path d="M16 5L8 13l8 8" stroke="#3c4043" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>114 </svg>115 </div>116 <div class="search-field">117 <div class="search-label">Attractions</div>118 <div class="search-actions">119 <svg class="icon" width="24" height="24" viewBox="0 0 24 24">120 <path d="M5 5l14 14M19 5L5 19" stroke="#5f6368" stroke-width="2" stroke-linecap="round"/>121 </svg>122 <svg class="icon" width="24" height="24" viewBox="0 0 24 24">123 <rect x="10" y="4" width="4" height="10" rx="2" fill="#5f6368"/>124 <path d="M8 14c0 2 1.5 4 4 4s4-2 4-4" stroke="#5f6368" stroke-width="2" fill="none"/>125 </svg>126 <svg class="icon" width="26" height="26" viewBox="0 0 26 26">127 <circle cx="11" cy="11" r="8" stroke="#5f6368" stroke-width="2" fill="none"/>128 <path d="M17 17l6 6" stroke="#5f6368" stroke-width="2" stroke-linecap="round"/>129 </svg>130 </div>131 </div>132 </div>133 134 <div class="filters">135 <div class="circle-btn" style="width:56px;height:56px;">136 <svg class="icon" width="26" height="26" viewBox="0 0 26 26">137 <path d="M4 6h18M8 13h10M12 20h6" stroke="#3c4043" stroke-width="2" stroke-linecap="round"/>138 </svg>139 </div>140 <div class="chip primary">141 <span>Relevance</span>142 <svg class="icon" width="20" height="20" viewBox="0 0 20 20"><path d="M5 7l5 5 5-5" fill="#1a73e8"/></svg>143 </div>144 <div class="chip">Open now</div>145 <div class="chip">Top-rated</div>146 <div class="chip">More</div>147 </div>148 149 <div class="quick-actions">150 <div class="pill">151 <svg class="icon" width="26" height="26" viewBox="0 0 26 26">152 <path d="M13 3l10 9-10 9L3 12z" stroke="#1a73e8" stroke-width="2" fill="none" stroke-linejoin="round"/>153 </svg>154 <span>Directions</span>155 </div>156 <div class="pill">157 <svg class="icon" width="26" height="26" viewBox="0 0 26 26">158 <path d="M6 4l14 14M18 4l-12 12" stroke="#1a73e8" stroke-width="2" fill="none" stroke-linecap="round"/>159 <path d="M7 19l0 3 3 0" stroke="#1a73e8" stroke-width="2" fill="none" stroke-linecap="round"/>160 </svg>161 <span>Call</span>162 </div>163 <div class="pill">164 <svg class="icon" width="26" height="26" viewBox="0 0 26 26">165 <circle cx="6" cy="14" r="3" stroke="#1a73e8" stroke-width="2" fill="none"/>166 <circle cx="20" cy="6" r="3" stroke="#1a73e8" stroke-width="2" fill="none"/>167 <path d="M9 12l8-4M9 16l8 4" stroke="#1a73e8" stroke-width="2" fill="none"/>168 </svg>169 <span>Share</span>170 </div>171 </div>172 </div>173 174 <div class="results">175 176 <!-- Card 1 -->177 <div class="card">178 <div class="image-row">179 <div class="img">[IMG: Museum Building]</div>180 <div class="img">[IMG: Metal Bison Sculpture]</div>181 <div class="img">[IMG: Museum Flags]</div>182 </div>183 <div class="title-row">184 <div class="title">Pouce Coupe Museum</div>185 <div class="bookmark">186 <svg class="icon" width="28" height="28" viewBox="0 0 28 28">187 <path d="M8 4h12v20l-6-4-6 4z" stroke="#3c4043" stroke-width="2" fill="none"/>188 </svg>189 </div>190 </div>191 <div class="meta">192 <span>4.8</span>193 <span class="stars">194 <svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#fbbc04"/></svg>195 <svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#fbbc04"/></svg>196 <svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#fbbc04"/></svg>197 <svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#fbbc04"/></svg>198 <svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#fbbc04"/></svg>199 </span>200 <span style="color:#5f6368;">(15)</span>201 <div style="margin-top:8px; color:#5f6368;">Tourist attraction · 5006 49th Ave ·202 <svg class="icon" width="22" height="22" viewBox="0 0 22 22" style="vertical-align:middle;">203 <circle cx="11" cy="6" r="3" stroke="#1a73e8" stroke-width="2" fill="none"/>204 <path d="M4 18c2-4 12-4 14 0" stroke="#1a73e8" stroke-width="2" fill="none" stroke-linecap="round"/>205 </svg>206 </div>207 <div style="margin-top:8px;"><span class="closed">Closed</span> · Opens 8 am Fri</div>208 </div>209 <div class="review">210 <div class="avatar"></div>211 <div>"Plus, out buildings to explore."</div>212 </div>213 <div class="card-actions">214 <div class="pill">215 <svg class="icon" width="26" height="26" viewBox="0 0 26 26">216 <path d="M13 3l10 9-10 9L3 12z" stroke="#1a73e8" stroke-width="2" fill="none" stroke-linejoin="round"/>217 </svg>218 <span>Directions</span>219 </div>220 <div class="pill">221 <svg class="icon" width="26" height="26" viewBox="0 0 26 26">222 <path d="M6 4l14 14M18 4l-12 12" stroke="#1a73e8" stroke-width="2" fill="none" stroke-linecap="round"/>223 <path d="M7 19l0 3 3 0" stroke="#1a73e8" stroke-width="2" fill="none" stroke-linecap="round"/>224 </svg>225 <span>Call</span>226 </div>227 <div class="pill">228 <svg class="icon" width="26" height="26" viewBox="0 0 26 26">229 <circle cx="6" cy="14" r="3" stroke="#1a73e8" stroke-width="2" fill="none"/>230 <circle cx="20" cy="6" r="3" stroke="#1a73e8" stroke-width="2" fill="none"/>231 <path d="M9 12l8-4M9 16l8 4" stroke="#1a73e8" stroke-width="2" fill="none"/>232 </svg>233 <span>Share</span>234 </div>235 </div>236 </div>237 238 <!-- Card 2 -->239 <div class="card">240 <div class="image-row">241 <div class="img">[IMG: Wetland Water]</div>242 <div class="img">[IMG: McQueen Slough Sign]</div>243 <div class="img">[IMG: Boardwalk Through Reeds]</div>244 </div>245 <div class="title-row">246 <div class="title">McQueen Slough</div>247 <div class="bookmark">248 <svg class="icon" width="28" height="28" viewBox="0 0 28 28">249 <path d="M8 4h12v20l-6-4-6 4z" stroke="#3c4043" stroke-width="2" fill="none"/>250 </svg>251 </div>252 </div>253 <div class="meta">254 <span>4.7</span>255 <span class="stars">256 <svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#fbbc04"/></svg>257 <svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#fbbc04"/></svg>258 <svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#fbbc04"/></svg>259 <svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#fbbc04"/></svg>260 <svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#fbbc04"/></svg>261 </span>262 <span style="color:#5f6368;">(14)</span>263 <div style="margin-top:8px; color:#5f6368;">Tourist attraction · 7625 Rolla Rd</div>264 </div>265 <div class="review">266 <div class="avatar"></div>267 <div>"Pokestops and a gym, 10/10 and lots of birds"</div>268 </div>269 <div class="card-actions">270 <div class="pill">271 <svg class="icon" width="26" height="26" viewBox="0 0 26 26">272 <path d="M13 3l10 9-10 9L3 12z" stroke="#1a73e8" stroke-width="2" fill="none" stroke-linejoin="round"/>273 </svg>274 <span>Directions</span>275 </div>276 <div class="pill">277 <svg class="icon" width="26" height="26" viewBox="0 0 26 26">278 <path d="M6 4l14 14M18 4l-12 12" stroke="#1a73e8" stroke-width="2" fill="none" stroke-linecap="round"/>279 <path d="M7 19l0 3 3 0" stroke="#1a73e8" stroke-width="2" fill="none" stroke-linecap="round"/>280 </svg>281 <span>Share</span>282 </div>283 </div>284 </div>285 286 </div>287 288 <!-- Floating map button -->289 <div class="floating-map">290 <svg class="icon" width="46" height="46" viewBox="0 0 46 46">291 <path d="M8 10l12-6 12 6 6-2v24l-12 6-12-6-6 2V12z" fill="#1a73e8"/>292 </svg>293 </div>294 295 <!-- Discover more places bottom sheet -->296 <div class="discover">297 Discover more places298 <div class="bar"></div>299 </div>300 301</div>302</body>303</html>