GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Lotus Temple - UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #111316;13 color: #e9e9e9;14 }15 /* General helpers */16 .row { display: flex; align-items: center; }17 .space-between { justify-content: space-between; }18 .muted { color: #9aa0a6; }19 .accent { color: #8ab4f8; }20 .green { color: #4caf50; }21 .divider { height: 1px; background: #2a2d33; margin: 24px 0; }22 .section { padding: 0 40px; }23 .chip {24 background: #1f2329;25 border: 1px solid #2a2d33;26 color: #e9e9e9;27 padding: 18px 26px;28 border-radius: 36px;29 display: inline-flex;30 align-items: center;31 gap: 16px;32 font-size: 34px;33 }34 .card {35 background: #171a1f;36 border: 1px solid #2a2d33;37 border-radius: 24px;38 padding: 28px;39 margin: 18px 0;40 }41 /* Status bar */42 .status-bar {43 height: 96px;44 padding: 0 32px;45 font-size: 36px;46 color: #e0e0e0;47 display: flex;48 align-items: center;49 justify-content: space-between;50 }51 /* App bar */52 .app-bar {53 height: 120px;54 padding: 0 24px;55 border-bottom: 1px solid #22262c;56 display: flex;57 align-items: center;58 gap: 24px;59 }60 .app-title {61 font-size: 48px;62 font-weight: 600;63 }64 .icon-btn {65 width: 90px;66 height: 90px;67 display: flex;68 align-items: center;69 justify-content: center;70 border-radius: 18px;71 }72 /* Tabs */73 .tabs {74 display: flex;75 gap: 36px;76 padding: 24px 40px;77 font-size: 34px;78 border-bottom: 1px solid #22262c;79 }80 .tab { color: #9aa0a6; }81 .tab.active { color: #8ab4f8; }82 /* Tickets header */83 .title-row { font-size: 46px; font-weight: 600; margin: 24px 0 8px; }84 .ticket-item { display: flex; justify-content: space-between; align-items: center; padding: 26px 0; font-size: 40px; }85 .small-icon {86 width: 58px; height: 58px; border-radius: 14px;87 background: #1f2329; border: 1px solid #2a2d33;88 display: inline-flex; align-items: center; justify-content: center; margin-right: 18px;89 }90 /* Info rows */91 .info-row { display: flex; align-items: center; gap: 22px; padding: 22px 0; font-size: 38px; }92 .see-all {93 text-align: center; font-size: 40px; color: #8ab4f8; padding: 22px 0;94 }95 /* Description */96 .desc { font-size: 40px; line-height: 56px; color: #cfcfcf; padding: 26px 0; }97 /* Rating */98 .rating { display: flex; align-items: flex-start; gap: 36px; padding: 20px 0 30px; }99 .rating .score { font-size: 78px; font-weight: 700; }100 .stars { display: flex; gap: 6px; margin-top: 8px; }101 .bar-group { margin-top: 8px; }102 .bar { width: 540px; height: 10px; background: #2a2d33; margin: 16px 0; position: relative; border-radius: 10px; }103 .bar .fill { position: absolute; left: 0; top: 0; height: 10px; background: #f1b81c; border-radius: 10px; }104 /* Experiences */105 .exp-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 0 18px; }106 .carousel { display: flex; gap: 24px; overflow: hidden; padding-bottom: 220px; }107 .img-ph {108 width: 320px; height: 220px; background: #E0E0E0; border: 1px solid #BDBDBD;109 display: flex; align-items: center; justify-content: center; color: #757575; border-radius: 16px;110 }111 /* Bottom floating action bar */112 .bottom-bar {113 position: absolute;114 left: 0; right: 0; bottom: 0;115 height: 220px;116 background: rgba(10,12,14,0.96);117 border-top: 1px solid #22262c;118 display: flex;119 align-items: center;120 justify-content: space-around;121 padding: 0 24px;122 }123 .circle-btn {124 width: 112px; height: 112px;125 border-radius: 56px;126 background: #1f2329;127 border: 1px solid #2a2d33;128 display: flex; align-items: center; justify-content: center;129 }130 .chip-lg { font-size: 42px; padding: 26px 36px; }131</style>132</head>133<body>134<div id="render-target">135 136 <!-- Status bar -->137 <div class="status-bar section">138 <div class="row" style="gap:16px;">139 <div>1:53</div>140 <div class="muted">• • •</div>141 </div>142 <div class="row muted" style="gap:18px;">143 <div>⌖</div>144 <div>◉</div>145 <div>🔋</div>146 </div>147 </div>148 149 <!-- App bar -->150 <div class="app-bar">151 <div class="icon-btn">152 <!-- Back -->153 <svg width="48" height="48" viewBox="0 0 24 24" fill="#e9e9e9"><path d="M15 18l-6-6 6-6" stroke="#e9e9e9" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>154 </div>155 <div class="app-title">Lotus Temple</div>156 <div style="flex:1;"></div>157 <div class="icon-btn">158 <!-- Search -->159 <svg width="42" height="42" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#e9e9e9" stroke-width="2" fill="none"/><path d="M20 20l-4.5-4.5" stroke="#e9e9e9" stroke-width="2" stroke-linecap="round"/></svg>160 </div>161 <div class="icon-btn">162 <!-- More -->163 <svg width="32" height="32" viewBox="0 0 24 24" fill="#e9e9e9"><circle cx="12" cy="5" r="2" /><circle cx="12" cy="12" r="2" /><circle cx="12" cy="19" r="2" /></svg>164 </div>165 </div>166 167 <!-- Tabs -->168 <div class="tabs">169 <div class="tab active">OVERVIEW</div>170 <div class="tab">TICKETS</div>171 <div class="tab">DIRECTORY</div>172 <div class="tab">REVIEWS</div>173 <div class="tab">PHOTOS</div>174 </div>175 176 <!-- Tickets Section -->177 <div class="section">178 <div class="title-row">Tickets</div>179 180 <div class="card">181 <div class="ticket-item">182 <div class="row">183 <div class="small-icon">184 <svg width="34" height="34" viewBox="0 0 24 24" fill="#8ab4f8"><path d="M4 8a4 4 0 014-4h8a4 4 0 014 4v8a4 4 0 01-4 4H8a4 4 0 01-4-4V8z"/><path d="M7 12h10" stroke="#111316" stroke-width="2"/></svg>185 </div>186 <div>Lotus Temple</div>187 </div>188 <div class="muted">Free</div>189 </div>190 191 <div class="divider"></div>192 193 <div class="info-row">194 <!-- Location icon -->195 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 21s-7-7.3-7-11a7 7 0 0114 0c0 3.7-7 11-7 11z" fill="none" stroke="#8ab4f8" stroke-width="2"/><circle cx="12" cy="10" r="3" fill="#8ab4f8"/></svg>196 <div>197 <div>Lotus Temple Rd Bahapur, Kalkaji, New Delhi, Delhi 110019</div>198 </div>199 <div style="margin-left:auto;">200 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#e9e9e9" stroke-width="2" fill="none"/></svg>201 </div>202 </div>203 204 <div class="info-row">205 <!-- Clock icon -->206 <svg width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="#8ab4f8" stroke-width="2" fill="none"/><path d="M12 7v6l4 2" stroke="#8ab4f8" stroke-width="2" stroke-linecap="round"/></svg>207 <div class="row" style="gap:12px;">208 <span class="green">Open</span>209 <span class="muted">•</span>210 <span>Closes 6 pm</span>211 </div>212 <div class="muted" style="font-size:30px; margin-left:18px;">Updated by phone call 5 weeks ago</div>213 <div style="margin-left:auto;">214 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#e9e9e9" stroke-width="2" fill="none"/></svg>215 </div>216 </div>217 218 <div class="info-row">219 <!-- Globe -->220 <svg width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="#8ab4f8" stroke-width="2" fill="none"/><path d="M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18" stroke="#8ab4f8" stroke-width="1.5"/></svg>221 <div class="accent">https://bahaihouseofworship.in/</div>222 </div>223 224 <div class="info-row">225 <!-- Pencil -->226 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M3 17l2 4 4-2 10-10-4-4L5 15z" fill="#8ab4f8"/></svg>227 <div class="muted">Suggest an edit</div>228 </div>229 </div>230 231 <div class="see-all">See all</div>232 233 <div class="desc">234 Religious site also known as the Bahá’í House of Worship, opened in 1986 to those of all religions.235 </div>236 237 <div class="card">238 <div class="rating">239 <div>240 <div class="score">4.5</div>241 <div class="stars">242 <svg width="38" height="38" viewBox="0 0 24 24"><path d="M12 2l3 6 6 1-4.5 4 1 6-5.5-3-5.5 3 1-6L3 9l6-1z" fill="#f1b81c"/></svg>243 <svg width="38" height="38" viewBox="0 0 24 24"><path d="M12 2l3 6 6 1-4.5 4 1 6-5.5-3-5.5 3 1-6L3 9l6-1z" fill="#f1b81c"/></svg>244 <svg width="38" height="38" viewBox="0 0 24 24"><path d="M12 2l3 6 6 1-4.5 4 1 6-5.5-3-5.5 3 1-6L3 9l6-1z" fill="#f1b81c"/></svg>245 <svg width="38" height="38" viewBox="0 0 24 24"><path d="M12 2l3 6 6 1-4.5 4 1 6-5.5-3-5.5 3 1-6L3 9l6-1z" fill="#f1b81c"/></svg>246 <svg width="38" height="38" viewBox="0 0 24 24"><path d="M12 2l3 6 6 1-4.5 4 1 6-5.5-3-5.5 3 1-6L3 9l6-1z" fill="#f1b81c" opacity="0.5"/></svg>247 </div>248 <div class="muted" style="font-size:32px; margin-top:6px;">(51,057)</div>249 </div>250 <div class="bar-group">251 <div class="bar"><div class="fill" style="width:520px;"></div></div>252 <div class="bar"><div class="fill" style="width:300px;"></div></div>253 <div class="bar"><div class="fill" style="width:200px;"></div></div>254 <div class="bar"><div class="fill" style="width:180px;"></div></div>255 <div class="bar"><div class="fill" style="width:160px;"></div></div>256 </div>257 <div style="margin-left:auto;">258 <svg width="38" height="38" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="#9aa0a6" stroke-width="2" fill="none"/><text x="12" y="16" font-size="10" text-anchor="middle" fill="#9aa0a6">i</text></svg>259 </div>260 </div>261 <div class="see-all">See all reviews</div>262 </div>263 264 <div class="exp-header">265 <div style="font-size:46px; font-weight:700;">Experiences</div>266 <div class="row" style="gap:10px;">267 <div class="muted">About these results</div>268 <svg width="30" height="30" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="#9aa0a6" stroke-width="2" fill="none"/><text x="12" y="16" font-size="10" text-anchor="middle" fill="#9aa0a6">i</text></svg>269 </div>270 </div>271 272 <div class="carousel">273 <div class="img-ph">[IMG: Lotus Temple domes]</div>274 <div class="img-ph">[IMG: Lotus Temple view]</div>275 <div class="img-ph">[IMG: Complex panorama]</div>276 <div class="img-ph">[IMG: Garden and temple]</div>277 </div>278 </div>279 280 <!-- Bottom floating actions -->281 <div class="bottom-bar">282 <div class="circle-btn">283 <!-- compass/nearby -->284 <svg width="46" height="46" viewBox="0 0 24 24"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm4 6l-6 2-2 6 6-2 2-6z" fill="#8ab4f8"/></svg>285 </div>286 <div class="circle-btn">287 <!-- navigation arrow -->288 <svg width="46" height="46" viewBox="0 0 24 24"><path d="M12 3l7 7-7 7-7-7 7-7z" fill="#8ab4f8"/></svg>289 </div>290 <div class="chip chip-lg">291 <svg width="38" height="38" viewBox="0 0 24 24"><path d="M3 7h18v10H3zM6 7l3 3M18 7l-3 3" stroke="#e9e9e9" stroke-width="2" fill="none"/></svg>292 <span>Tickets</span>293 </div>294 <div class="chip chip-lg">295 <svg width="38" height="38" viewBox="0 0 24 24"><path d="M6 2h12v6H6zM4 10h16v12H4z" fill="#e9e9e9"/></svg>296 <span>Call</span>297 </div>298 <div class="chip chip-lg">299 <svg width="38" height="38" viewBox="0 0 24 24"><path d="M4 8h16v12H4zM8 4h8v4H8z" fill="#e9e9e9"/></svg>300 <span>Directory</span>301 </div>302 </div>303 304</div>305</body>306</html>