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>Favorites Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #FFFFFF;14 color: #1f1f1f;15 }16 17 /* Status bar */18 .status-bar {19 height: 70px;20 padding: 0 28px;21 display: flex;22 align-items: center;23 font-size: 34px;24 color: #212121;25 }26 .status-right {27 margin-left: auto;28 display: flex;29 gap: 18px;30 align-items: center;31 }32 .dot { width: 14px; height: 14px; background: #444; border-radius: 50%; display: inline-block; }33 .signal { width: 26px; height: 26px; border: 2px solid #444; border-top-color: transparent; border-right-color: transparent; transform: rotate(45deg); border-radius: 4px; }34 .battery { width: 36px; height: 18px; border: 2px solid #444; position: relative; border-radius: 4px; }35 .battery:after { content: ""; position: absolute; right: -6px; top: 4px; width: 4px; height: 10px; background: #444; border-radius: 2px; }36 37 /* App bar */38 .app-bar {39 height: 120px;40 padding: 0 24px;41 display: flex;42 align-items: center;43 border-bottom: 1px solid #ececec;44 }45 .icon-btn {46 width: 90px;47 height: 90px;48 border-radius: 50%;49 display: flex;50 align-items: center;51 justify-content: center;52 }53 .title-area {54 margin-left: 10px;55 }56 .title {57 font-size: 54px;58 font-weight: 600;59 line-height: 1.1;60 }61 .subtitle {62 margin-top: 8px;63 display: flex;64 align-items: center;65 gap: 14px;66 color: #616161;67 font-size: 34px;68 }69 .lock {70 width: 28px;71 height: 28px;72 border: 2px solid #616161;73 border-radius: 4px;74 position: relative;75 }76 .lock:before {77 content: "";78 position: absolute;79 width: 18px; height: 12px; border: 2px solid #616161; border-bottom: none;80 top: -12px; left: 2px; border-radius: 10px 10px 0 0;81 }82 83 .content {84 height: calc(2400px - 70px - 120px);85 overflow-y: auto;86 padding-bottom: 160px;87 }88 89 .section {90 padding: 24px;91 }92 93 /* Image row */94 .image-row {95 display: grid;96 grid-template-columns: 1fr 1fr;97 gap: 24px;98 }99 .img-box {100 height: 380px;101 background: #E0E0E0;102 border: 1px solid #BDBDBD;103 border-radius: 26px;104 position: relative;105 display: flex;106 align-items: center;107 justify-content: center;108 color: #757575;109 font-size: 32px;110 text-align: center;111 padding: 16px;112 }113 .overlay-pill {114 position: absolute;115 top: 22px; left: 22px;116 background: rgba(0,0,0,0.65);117 color: #fff;118 padding: 18px 28px;119 border-radius: 40px;120 font-size: 34px;121 display: flex;122 gap: 16px;123 align-items: center;124 }125 .more-vert {126 position: absolute;127 top: 22px; right: 22px;128 width: 52px; height: 52px;129 border-radius: 50%;130 background: rgba(255,255,255,0.92);131 display: flex;132 align-items: center;133 justify-content: center;134 }135 .more-vert div {136 width: 6px; height: 6px; background: #333; border-radius: 50%;137 box-shadow: 0 12px 0 #333, 0 -12px 0 #333;138 }139 140 /* Text blocks */141 .place-title {142 font-size: 52px;143 font-weight: 600;144 margin: 24px 0 8px;145 }146 .desc {147 font-size: 38px;148 color: #555;149 margin-bottom: 12px;150 }151 .link {152 color: #1a73e8;153 font-size: 38px;154 margin-top: 10px;155 }156 157 /* Buttons */158 .actions {159 display: flex;160 gap: 24px;161 margin-top: 26px;162 }163 .btn {164 height: 110px;165 padding: 0 42px;166 border-radius: 70px;167 border: 1px solid #d5d5d5;168 display: flex;169 align-items: center;170 gap: 22px;171 font-size: 40px;172 color: #1f1f1f;173 background: #fff;174 }175 .btn.primary {176 background: #1a73e8;177 border-color: #1a73e8;178 color: #fff;179 }180 181 /* Second card details */182 .rating-row {183 display: flex;184 align-items: center;185 gap: 12px;186 margin-top: 6px;187 font-size: 34px;188 color: #616161;189 }190 .stars { color: #f6b500; letter-spacing: 4px; font-size: 36px; }191 .meta {192 margin-top: 10px;193 color: #616161;194 font-size: 36px;195 }196 .open-row {197 margin-top: 12px;198 font-size: 36px;199 }200 .badge-open {201 color: #0a8a3f;202 margin-right: 10px;203 font-weight: 600;204 }205 206 /* Floating view map */207 .fab-map {208 position: absolute;209 right: 28px;210 bottom: 36px;211 background: #fff;212 border-radius: 30px;213 box-shadow: 0 8px 24px rgba(0,0,0,0.18);214 padding: 24px 32px;215 display: flex;216 align-items: center;217 gap: 22px;218 border: 1px solid #eaeaea;219 }220 .fab-map .label { font-size: 42px; color: #0b57d0; }221 222 /* Simple SVG icons */223 .ico { width: 48px; height: 48px; }224 .ico-small { width: 34px; height: 34px; }225</style>226</head>227<body>228<div id="render-target">229 230 <!-- Status Bar -->231 <div class="status-bar">232 8:34233 <div class="status-right">234 <span class="dot"></span>235 <span class="dot"></span>236 <span class="dot"></span>237 <span class="dot"></span>238 <span class="dot"></span>239 <span class="signal"></span>240 <span class="battery"></span>241 </div>242 </div>243 244 <!-- App Bar -->245 <div class="app-bar">246 <div class="icon-btn">247 <svg class="ico" viewBox="0 0 24 24">248 <path d="M15.5 4L7 12l8.5 8" fill="none" stroke="#1f1f1f" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"/>249 </svg>250 </div>251 <div class="title-area">252 <div class="title">Favorites</div>253 <div class="subtitle">254 <span class="lock"></span>255 <span>Private · 2 places</span>256 </div>257 </div>258 <div class="icon-btn" style="margin-left:auto;">259 <svg class="ico" viewBox="0 0 24 24">260 <circle cx="12" cy="5" r="2.2" fill="#303030"/>261 <circle cx="12" cy="12" r="2.2" fill="#303030"/>262 <circle cx="12" cy="19" r="2.2" fill="#303030"/>263 </svg>264 </div>265 </div>266 267 <div class="content">268 <!-- First Card -->269 <div class="section">270 <div class="image-row">271 <div class="img-box">272 [IMG: Train tracks at sunset]273 <div class="overlay-pill">274 <svg class="ico-small" viewBox="0 0 24 24">275 <path d="M7 8l2-2h6l2 2h2v10H3V8h4z" fill="#fff" opacity="0.95"/>276 <circle cx="12" cy="13" r="3.2" fill="#000"/>277 <circle cx="12" cy="13" r="2.2" fill="#fff"/>278 </svg>279 <span>Choose photo</span>280 </div>281 </div>282 <div class="img-box">283 [IMG: Old building facade]284 <div class="more-vert"><div></div></div>285 </div>286 </div>287 288 <div class="place-title">Funes</div>289 <div class="desc">my favorite destination place</div>290 <div class="link">Edit note</div>291 292 <div class="actions">293 <div class="btn primary">294 <svg class="ico" viewBox="0 0 24 24">295 <path d="M12 2l4 8-4 12-4-12 4-8z" fill="#fff"/>296 </svg>297 <span>Directions</span>298 </div>299 <div class="btn">300 <svg class="ico" viewBox="0 0 24 24">301 <path d="M18 8l-6 6-6-6" fill="none" stroke="#1f1f1f" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>302 <path d="M6 16v4h12v-4" fill="none" stroke="#1f1f1f" stroke-width="2.5" stroke-linecap="round"/>303 </svg>304 <span>Share</span>305 </div>306 </div>307 </div>308 309 <!-- Divider -->310 <div style="height:24px;background:#f7f7f7;border-top:1px solid #eee;border-bottom:1px solid #eee;"></div>311 312 <!-- Second Card -->313 <div class="section">314 <div class="image-row">315 <div class="img-box">316 [IMG: Ice cream shop interior]317 <div class="overlay-pill">318 <svg class="ico-small" viewBox="0 0 24 24">319 <path d="M7 8l2-2h6l2 2h2v10H3V8h4z" fill="#fff" opacity="0.95"/>320 <circle cx="12" cy="13" r="3.2" fill="#000"/>321 <circle cx="12" cy="13" r="2.2" fill="#fff"/>322 </svg>323 <span>Choose photo</span>324 </div>325 </div>326 <div class="img-box">327 [IMG: Ice cream with whipped cream]328 <div class="more-vert"><div></div></div>329 </div>330 </div>331 332 <div class="place-title">Heladería Catania</div>333 <div class="rating-row">334 <span>4.7</span>335 <span class="stars">★★★★★</span>336 <span>(8,898)</span>337 </div>338 <div class="meta">Ice Cream · ♿ · ₹₹</div>339 <div class="open-row">340 <span class="badge-open">Open</span>· Closes 1:30 AM341 </div>342 343 <div class="link" style="margin-top:22px;">Add note</div>344 345 <div class="actions" style="margin-top:36px;">346 <div class="btn primary">347 <svg class="ico" viewBox="0 0 24 24">348 <path d="M12 2l4 8-4 12-4-12 4-8z" fill="#fff"/>349 </svg>350 <span>Directions</span>351 </div>352 <div class="btn">353 <svg class="ico" viewBox="0 0 24 24">354 <path d="M6 2h4l2 4 4 2-3 3 1 5-4-2-4 2 1-5-3-3 4-2 2-4z" fill="none" stroke="#1f1f1f" stroke-width="1.7"/>355 </svg>356 <span>Call</span>357 </div>358 <div class="btn">359 <svg class="ico" viewBox="0 0 24 24">360 <path d="M18 8l-6 6-6-6" fill="none" stroke="#1f1f1f" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>361 <path d="M6 16v4h12v-4" fill="none" stroke="#1f1f1f" stroke-width="2.5" stroke-linecap="round"/>362 </svg>363 <span>Share</span>364 </div>365 </div>366 </div>367 </div>368 369 <!-- Floating View Map -->370 <div class="fab-map">371 <svg class="ico" viewBox="0 0 24 24">372 <path d="M12 2l7 4v12l-7-4-7 4V6l7-4z" fill="#0b57d0"/>373 </svg>374 <div class="label">View map</div>375 </div>376 377</div>378</body>379</html>