GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Attractions UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #ffffff;12 box-sizing: border-box;13 }14 15 /* General */16 .row { display: flex; align-items: center; }17 .text-muted { color: #6f6f6f; }18 .divider { height: 1px; background: #e5e5e5; width: 100%; }19 20 /* Status bar */21 .status-bar {22 height: 70px; padding: 0 28px;23 display: flex; align-items: center; justify-content: space-between;24 font-size: 28px; color: #333;25 }26 .status-icons { display: flex; gap: 18px; align-items: center; }27 .dot { width: 8px; height: 8px; background: #666; border-radius: 50%; display: inline-block; margin: 0 6px; }28 29 /* Header search */30 .header {31 height: 120px; padding: 0 20px;32 display: flex; align-items: center; gap: 16px;33 }34 .back-btn {35 width: 72px; height: 72px; border-radius: 36px;36 background: #f0f0f0; display: flex; align-items: center; justify-content: center;37 }38 .search-field {39 flex: 1; height: 80px; border-radius: 40px;40 background: #f5f5f7; display: flex; align-items: center; padding: 0 26px;41 box-shadow: 0 0 0 1px #e2e2e2 inset;42 font-size: 34px; color: #222; font-weight: 600;43 gap: 20px;44 }45 .search-right {46 margin-left: auto; display: flex; align-items: center; gap: 18px;47 }48 .icon-btn {49 width: 60px; height: 60px; border-radius: 30px; background: #f0f0f0;50 display: flex; align-items: center; justify-content: center;51 }52 53 /* Filters */54 .filters { padding: 12px 20px; display: flex; align-items: center; gap: 16px; }55 .filter-icon { width: 64px; height: 64px; border-radius: 20px; background: #f0f0f0; display: flex; align-items: center; justify-content: center; }56 .chip {57 padding: 18px 26px; border-radius: 32px; border: 1px solid #d6d6d6;58 font-size: 28px; color: #222; background: #fff; display: inline-flex; align-items: center; gap: 10px;59 }60 .chip .caret { border-top: 8px solid #666; border-left: 8px solid transparent; border-right: 8px solid transparent; width: 0; height: 0; display: inline-block; margin-left: 6px; }61 62 /* Map area */63 .map-area {64 height: 620px; margin: 0 20px; border-radius: 24px; overflow: hidden;65 position: relative; box-shadow: 0 2px 8px rgba(0,0,0,0.08);66 }67 .img-placeholder {68 width: 100%; height: 100%; background: #E0E0E0;69 border: 1px solid #BDBDBD; color: #757575;70 display: flex; align-items: center; justify-content: center; text-align: center;71 font-size: 30px; padding: 10px;72 }73 .floating-layer {74 position: absolute; right: 18px; top: 18px;75 width: 88px; height: 88px; border-radius: 44px; background: #fff;76 display: flex; align-items: center; justify-content: center;77 box-shadow: 0 2px 8px rgba(0,0,0,0.15);78 }79 80 /* Card section */81 .card {82 margin: 24px 20px 0; background: #fff; border-radius: 24px;83 }84 .thumbs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }85 .thumb {86 height: 290px; border-radius: 18px; overflow: hidden;87 }88 .thumb .img-placeholder { font-size: 26px; }89 .card-body { padding: 22px 8px 0; }90 .title-row { display: flex; align-items: center; justify-content: space-between; }91 .card-title { font-size: 48px; font-weight: 700; color: #222; padding-left: 12px; }92 .save-btn {93 width: 94px; height: 94px; border-radius: 22px; background: #fff;94 display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 6px rgba(0,0,0,0.12);95 margin-right: 8px;96 }97 .rating-row {98 padding-left: 12px; margin-top: 12px; display: flex; align-items: center; gap: 10px; font-size: 30px; color: #333;99 }100 .stars { display: inline-flex; gap: 6px; }101 .star { width: 28px; height: 28px; display: inline-block; }102 .details-row {103 padding-left: 12px; margin-top: 14px; display: flex; align-items: center; gap: 14px; color: #4b4b4b; font-size: 30px;104 }105 .dot-sep { width: 6px; height: 6px; background: #888; border-radius: 3px; display: inline-block; margin: 0 8px; }106 .status-row { padding-left: 12px; margin-top: 12px; font-size: 30px; }107 .status-row .open { color: #087c34; font-weight: 700; }108 .desc { padding-left: 12px; margin-top: 16px; font-size: 30px; color: #444; line-height: 1.35; }109 .actions { margin-top: 24px; display: flex; gap: 20px; padding: 0 12px 20px; }110 .action-btn {111 flex: 1; height: 96px; border-radius: 48px; background: #f5f5f7; border: 1px solid #e2e2e2;112 display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 34px; color: #1a73e8; font-weight: 700;113 }114 115 /* Secondary section */116 .section-title { padding: 16px 20px; font-size: 44px; font-weight: 700; color: #222; }117 .gallery { padding: 0 20px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }118 .gallery .thumb { height: 300px; }119 .floating-map {120 position: absolute; right: 30px; bottom: 520px;121 background: #fff; border-radius: 28px; box-shadow: 0 4px 18px rgba(0,0,0,0.18);122 padding: 22px 26px; display: flex; align-items: center; gap: 18px; font-size: 36px; color: #1a73e8; font-weight: 700;123 }124 125 /* Bottom gesture bar */126 .gesture-bar {127 position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);128 width: 380px; height: 14px; background: #cfcfcf; border-radius: 8px;129 }130 131 /* Simple SVG styling */132 svg { display: block; }133</style>134</head>135<body>136<div id="render-target">137 <!-- Status Bar -->138 <div class="status-bar">139 <div>8:23</div>140 <div class="status-icons">141 <span>📶</span>142 <span class="dot"></span>143 <span>🔔</span>144 <span>📍</span>145 <span>🔋</span>146 </div>147 </div>148 149 <!-- Header Search -->150 <div class="header">151 <div class="back-btn">152 <svg width="28" height="28" viewBox="0 0 24 24">153 <path d="M15.5 4l-8 8 8 8" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>154 </svg>155 </div>156 <div class="search-field">157 <span>Attractions</span>158 <div class="search-right" style="margin-left:auto;">159 <div class="icon-btn">160 <svg width="24" height="24" viewBox="0 0 24 24">161 <circle cx="10" cy="10" r="7" fill="none" stroke="#555" stroke-width="2"/>162 <path d="M21 21l-5-5" stroke="#555" stroke-width="2" stroke-linecap="round"/>163 </svg>164 </div>165 </div>166 </div>167 </div>168 169 <!-- Filters -->170 <div class="filters">171 <div class="filter-icon">172 <svg width="28" height="28" viewBox="0 0 24 24">173 <path d="M4 6h16M7 12h10M10 18h4" stroke="#333" stroke-width="2" stroke-linecap="round"/>174 </svg>175 </div>176 <div class="chip">Relevance <span class="caret"></span></div>177 <div class="chip">Open now</div>178 <div class="chip">Top-rated</div>179 </div>180 181 <!-- Map -->182 <div class="map-area">183 <div class="img-placeholder">[IMG: Map with attractions pins]</div>184 <div class="floating-layer">185 <svg width="28" height="28" viewBox="0 0 24 24">186 <path d="M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2V6z" fill="none" stroke="#333" stroke-width="2" stroke-linejoin="round"/>187 </svg>188 </div>189 </div>190 191 <!-- Card: Leisure Valley Park -->192 <div class="card">193 <div class="thumbs">194 <div class="thumb"><div class="img-placeholder">[IMG: Ferris wheel and crowd]</div></div>195 <div class="thumb"><div class="img-placeholder">[IMG: Evening fountain and pool]</div></div>196 <div class="thumb"><div class="img-placeholder">[IMG: Gazebo in lawn]</div></div>197 </div>198 199 <div class="card-body">200 <div class="title-row">201 <div class="card-title">Leisure Valley Park</div>202 <div class="save-btn">203 <svg width="30" height="30" viewBox="0 0 24 24">204 <path d="M6 4h12v16l-6-4-6 4z" fill="none" stroke="#555" stroke-width="2" stroke-linejoin="round"/>205 </svg>206 </div>207 </div>208 209 <div class="rating-row">210 <span>4.3</span>211 <div class="stars">212 <svg class="star" viewBox="0 0 24 24"><path d="M12 3l3.2 6.5 7.1 1-5.2 5 1.4 7-6.5-3.5-6.5 3.5 1.4-7-5.2-5 7.1-1z" fill="#fbbc04"/></svg>213 <svg class="star" viewBox="0 0 24 24"><path d="M12 3l3.2 6.5 7.1 1-5.2 5 1.4 7-6.5-3.5-6.5 3.5 1.4-7-5.2-5 7.1-1z" fill="#fbbc04"/></svg>214 <svg class="star" viewBox="0 0 24 24"><path d="M12 3l3.2 6.5 7.1 1-5.2 5 1.4 7-6.5-3.5-6.5 3.5 1.4-7-5.2-5 7.1-1z" fill="#fbbc04"/></svg>215 <svg class="star" viewBox="0 0 24 24"><path d="M12 3l3.2 6.5 7.1 1-5.2 5 1.4 7-6.5-3.5-6.5 3.5 1.4-7-5.2-5 7.1-1z" fill="#fbbc04"/></svg>216 <svg class="star" viewBox="0 0 24 24"><path d="M12 3l3.2 6.5 7.1 1-5.2 5 1.4 7-6.5-3.5-6.5 3.5 1.4-7-5.2-5 7.1-1z" fill="#ddd"/></svg>217 </div>218 <span class="text-muted">(15,418)</span>219 </div>220 221 <div class="details-row">222 <span>Tourist attraction</span>223 <span class="dot-sep"></span>224 <svg width="28" height="28" viewBox="0 0 24 24">225 <circle cx="12" cy="12" r="9" fill="none" stroke="#555" stroke-width="2"/>226 <path d="M8 12h8" stroke="#555" stroke-width="2" stroke-linecap="round"/>227 </svg>228 <span>6.0 mi</span>229 </div>230 231 <div class="status-row">232 <span class="open">Open</span> · <span>Closes 9 pm</span>233 </div>234 235 <div class="desc">236 Urban park space offering a rose garden, picnic spots, a cafe & a fountain with musical water shows.237 </div>238 239 <div class="actions">240 <div class="action-btn">241 <svg width="30" height="30" viewBox="0 0 24 24">242 <path d="M12 2l7 7-7 7-7-7z" fill="none" stroke="#1a73e8" stroke-width="2"/>243 </svg>244 <span>Directions</span>245 </div>246 <div class="action-btn">247 <svg width="28" height="28" viewBox="0 0 24 24">248 <path d="M4 12l8 6 8-6-8-6-8 6z" fill="none" stroke="#1a73e8" stroke-width="2" stroke-linejoin="round"/>249 </svg>250 <span>Share</span>251 </div>252 </div>253 </div>254 </div>255 256 <!-- Secondary listing -->257 <div class="section-title">Surajkund lake</div>258 <div class="gallery">259 <div class="thumb"><div class="img-placeholder">[IMG: Folk art gate sculpture]</div></div>260 <div class="thumb"><div class="img-placeholder">[IMG: Decorated elephant parade]</div></div>261 <div class="thumb"><div class="img-placeholder">[IMG: Sculpture park view]</div></div>262 </div>263 264 <!-- Floating "View map" -->265 <div class="floating-map">266 <svg width="30" height="30" viewBox="0 0 24 24">267 <path d="M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2V6z" fill="none" stroke="#1a73e8" stroke-width="2" stroke-linejoin="round"/>268 </svg>269 <span>View map</span>270 </div>271 272 <!-- Bottom gesture bar -->273 <div class="gesture-bar"></div>274</div>275</body>276</html>