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>Details Screen</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #222; }9 * { box-sizing: border-box; }10 #render-target {11 width: 1080px;12 height: 2400px;13 position: relative;14 overflow: hidden;15 background: #ffffff;16 }17 18 /* Top status bar */19 .status-bar {20 height: 110px;21 background: #d9d9d9;22 display: flex;23 align-items: center;24 padding: 0 40px;25 font-size: 40px;26 color: #333;27 }28 .status-left { flex: 0 0 auto; }29 .status-right {30 margin-left: auto;31 display: flex;32 align-items: center;33 gap: 22px;34 }35 .status-dot { width: 16px; height: 16px; background: #6b6b6b; border-radius: 50%; display: inline-block; }36 .wifi {37 width: 36px; height: 24px;38 }39 .battery {40 width: 54px; height: 26px;41 }42 43 /* App bar */44 .app-bar {45 height: 140px;46 background: #ffffff;47 position: relative;48 border-bottom: 1px solid #e6e6e6;49 }50 .back-btn {51 position: absolute;52 left: 30px;53 top: 50%;54 transform: translateY(-50%);55 width: 72px; height: 72px;56 display: flex; align-items: center; justify-content: center;57 }58 .app-title {59 position: absolute;60 left: 0; right: 0; top: 50%;61 transform: translateY(-50%);62 text-align: center;63 font-size: 64px;64 font-weight: 600;65 color: #333;66 }67 68 /* Gallery */69 .gallery {70 height: 620px;71 background: #e5e5e5;72 display: flex;73 align-items: center;74 justify-content: center;75 padding: 40px 0;76 }77 .gallery-inner {78 width: 480px;79 display: flex;80 flex-direction: column;81 align-items: center;82 }83 .img-placeholder {84 width: 480px; height: 480px;85 background: #E0E0E0;86 border: 1px solid #BDBDBD;87 display: flex; align-items: center; justify-content: center;88 color: #757575;89 font-size: 36px;90 text-align: center;91 }92 .carousel-strip {93 width: 480px; height: 90px; background: #0a0a0a; margin-top: 10px;94 display: flex; align-items: center; justify-content: center; gap: 18px;95 }96 .dot {97 width: 26px; height: 26px; border-radius: 50%;98 background: #6f92a8;99 }100 .dot.active { background: #ffffff; }101 102 /* Content */103 .content { padding: 36px 40px 40px 40px; }104 .price {105 font-size: 58px; font-weight: 800; margin-bottom: 24px;106 }107 .subtitle {108 font-size: 46px; font-weight: 600; margin-bottom: 16px;109 }110 .posted {111 font-size: 36px; color: #6b7b86; margin-bottom: 24px;112 }113 .location {114 display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px;115 line-height: 1.35;116 }117 .location-text {118 font-size: 38px; color: #1a73e8; font-weight: 600;119 }120 .divider {121 height: 1px; background: #e3e7ea; margin: 26px 0;122 }123 .label-line {124 font-size: 40px; color: #6b7b86; margin-bottom: 10px;125 font-weight: 600;126 }127 .adid {128 font-size: 38px; color: #6b7b86;129 }130 .desc-text {131 font-size: 38px; color: #444; line-height: 1.45; margin-top: 16px;132 }133 134 .info-row {135 display: flex; align-items: center; gap: 20px; margin: 16px 0;136 }137 .info-label {138 width: 180px; font-size: 38px; color: #6b7b86; font-weight: 600;139 text-align: left;140 }141 .info-value {142 font-size: 38px; color: #394b57;143 }144 .info-link {145 font-size: 38px; color: #1a73e8; text-decoration: none;146 }147 148 .report {149 text-align: center; color: #e53935; font-size: 40px; font-weight: 600; margin: 20px 0 10px 0;150 }151 152 /* Action buttons */153 .actions {154 display: flex; gap: 40px; padding: 10px 40px 200px 40px;155 }156 .btn {157 flex: 1;158 height: 120px; border-radius: 22px; display: flex; align-items: center; justify-content: center;159 gap: 18px; color: #fff; font-size: 40px; font-weight: 700;160 box-shadow: 0 6px 12px rgba(0,0,0,0.15);161 }162 .btn.whatsapp { background: #25D366; }163 .btn.call { background: #4285f4; }164 165 .btn svg { width: 46px; height: 46px; }166 167 /* Bottom navigation */168 .nav-bar {169 position: absolute; left: 0; bottom: 0; width: 1080px; height: 220px;170 background: #ffffff; border-top: 1px solid #e6e6e6;171 display: flex; align-items: center; justify-content: space-around;172 padding-bottom: 18px;173 }174 .nav-item {175 width: 200px; text-align: center;176 color: #5b6a76; font-size: 32px; font-weight: 600;177 }178 .nav-item svg { width: 54px; height: 54px; display: block; margin: 10px auto 8px auto; }179 .fab {180 position: absolute; left: 50%; transform: translateX(-50%);181 bottom: 150px; width: 140px; height: 140px; border-radius: 50%;182 background: #0b4b79; display: flex; align-items: center; justify-content: center;183 box-shadow: 0 8px 20px rgba(0,0,0,0.25);184 border: 12px solid #ffffff;185 }186 .fab svg { width: 64px; height: 64px; }187</style>188</head>189<body>190<div id="render-target">191 192 <!-- Status Bar -->193 <div class="status-bar">194 <div class="status-left">8:21</div>195 <div class="status-right">196 <svg class="wifi" viewBox="0 0 24 24">197 <path d="M2 8c5-4 15-4 20 0" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/>198 <path d="M5 12c4-3 10-3 14 0" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/>199 <path d="M8 16c3-2 5-2 8 0" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/>200 <circle cx="12" cy="19" r="1.8" fill="#555"/>201 </svg>202 <div class="status-dot"></div>203 <div class="status-dot"></div>204 <svg class="battery" viewBox="0 0 28 16">205 <rect x="1" y="2" width="22" height="12" rx="2" ry="2" stroke="#555" fill="none" stroke-width="2"/>206 <rect x="3" y="4" width="16" height="8" fill="#555"/>207 <rect x="24" y="6" width="3" height="4" fill="#555" rx="1"/>208 </svg>209 </div>210 </div>211 212 <!-- App Bar -->213 <div class="app-bar">214 <div class="back-btn">215 <svg viewBox="0 0 24 24">216 <path d="M15 5 L7 12 L15 19" stroke="#333" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>217 </svg>218 </div>219 <div class="app-title">Details</div>220 </div>221 222 <!-- Gallery -->223 <div class="gallery">224 <div class="gallery-inner">225 <div class="img-placeholder">[IMG: Samsung phone front photo]</div>226 <div class="carousel-strip">227 <div class="dot"></div>228 <div class="dot"></div>229 <div class="dot active"></div>230 </div>231 </div>232 </div>233 234 <!-- Content -->235 <div class="content">236 <div class="price">₹ 27,000</div>237 <div class="subtitle">Samsung Galaxy A53 5g</div>238 <div class="posted">Posted on: Sun, Jul 2, 2023 4:03 PM</div>239 240 <div class="location">241 <svg viewBox="0 0 24 24" width="48" height="48">242 <path d="M12 2C8.7 2 6 4.7 6 8c0 4.5 6 12 6 12s6-7.5 6-12c0-3.3-2.7-6-6-6z" fill="#EA4335"/>243 <circle cx="12" cy="8" r="3.2" fill="#4285F4"/>244 </svg>245 <div class="location-text">246 Old Hafeezpet Miyapur Hyderabad,<br/>Hyderabad, Telangana247 </div>248 </div>249 250 <div class="divider"></div>251 252 <div class="label-line">AD ID:</div>253 <div class="adid">AId1688294007339</div>254 255 <div class="divider"></div>256 257 <div class="label-line">Description</div>258 <div class="desc-text">259 super Neet Condition Less used 6 month old phone260 </div>261 262 <div class="divider"></div>263 264 <div class="label-line">Posted By</div>265 <div class="info-row">266 <div class="info-label">Name:</div>267 <div class="info-value">Ashfaq</div>268 </div>269 <div class="info-row">270 <div class="info-label">Email:</div>271 <a href="#" class="info-link">ashfaqfabricators9@gmail.com</a>272 </div>273 274 <div class="divider"></div>275 276 <div class="report">Report This Add</div>277 </div>278 279 <!-- Actions -->280 <div class="actions">281 <div class="btn whatsapp">282 <svg viewBox="0 0 24 24">283 <path d="M3 21l1.6-4.3A8 8 0 1 1 12 20a8.5 8.5 0 0 1-3.4-.7L3 21z" fill="rgba(255,255,255,0.25)"/>284 <path d="M7.5 7.5c0 5 9 8 9 8-1 1-2.3 1.3-3.6.7-1.1-.5-2.6-1.6-4.1-3.1s-2.6-3-3.1-4.1c-.6-1.3-.3-2.6.8-3.5z" fill="#fff"/>285 </svg>286 <span>WhatsApp</span>287 </div>288 <div class="btn call">289 <svg viewBox="0 0 24 24">290 <path d="M6 2c-1 0-2 .8-2 1.8 0 4.6 6.6 11.2 11.2 11.2 1 0 1.8-1 1.8-2l-.1-2.3c0-.5-.4-.9-.9-1l-3.1-.7c-.5-.1-1 .2-1.1.7l-.5 1.4c-1.7-1-3.3-2.6-4.3-4.3l1.4-.5c.5-.2.8-.6.7-1.1l-.7-3.1c-.1-.5-.5-.9-1-.9L6 2z" fill="#fff"/>291 </svg>292 <span>Call</span>293 </div>294 </div>295 296 <!-- Floating Action Button -->297 <div class="fab">298 <svg viewBox="0 0 24 24">299 <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="2.8" stroke-linecap="round"/>300 </svg>301 </div>302 303 <!-- Bottom Navigation -->304 <div class="nav-bar">305 <div class="nav-item">306 <svg viewBox="0 0 24 24">307 <rect x="3" y="3" width="7" height="7" fill="#5b6a76"/>308 <rect x="14" y="3" width="7" height="7" fill="#5b6a76"/>309 <rect x="3" y="14" width="7" height="7" fill="#5b6a76"/>310 <rect x="14" y="14" width="7" height="7" fill="#5b6a76"/>311 </svg>312 Home313 </div>314 <div class="nav-item">315 <svg viewBox="0 0 24 24">316 <path d="M3 12l9-8 9 8v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-8z" fill="#5b6a76"/>317 <rect x="9" y="14" width="6" height="6" fill="#fff"/>318 </svg>319 Properties320 </div>321 <div class="nav-item">322 <svg viewBox="0 0 24 24">323 <rect x="3" y="4" width="18" height="14" rx="2" fill="#5b6a76"/>324 <circle cx="9" cy="10" r="3" fill="#fff"/>325 <path d="M12 14l3-3 5 7H4z" fill="#fff"/>326 </svg>327 My Ads328 </div>329 <div class="nav-item">330 <svg viewBox="0 0 24 24">331 <circle cx="12" cy="8" r="4" fill="#5b6a76"/>332 <path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8" fill="#5b6a76"/>333 </svg>334 Profile335 </div>336 </div>337 338</div>339</body>340</html>