GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Amazon iPhone 15 - 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: linear-gradient(180deg, #a8e0df 0%, #c9ebe9 30%, #ffffff 55%, #ffffff 100%);13 color: #222;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 80px;23 display: flex;24 align-items: center;25 padding: 0 32px;26 font-weight: 600;27 font-size: 34px;28 color: #1f1f1f;29 }30 .status-bar .right {31 margin-left: auto;32 display: flex;33 align-items: center;34 gap: 22px;35 }36 37 /* Header / search */38 .header {39 position: absolute;40 top: 80px;41 left: 0;42 width: 1080px;43 padding: 24px 32px 20px 32px;44 }45 .back-btn {46 position: absolute;47 left: 24px;48 top: 30px;49 width: 72px;50 height: 72px;51 display: flex;52 align-items: center;53 justify-content: center;54 }55 56 .search-bar {57 margin-left: 88px;58 margin-right: 32px;59 height: 96px;60 background: #fff;61 border-radius: 24px;62 box-shadow: 0 2px 0 rgba(0,0,0,0.06) inset;63 border: 1px solid #dcdcdc;64 display: flex;65 align-items: center;66 padding: 0 28px;67 gap: 22px;68 font-size: 36px;69 color: #222;70 }71 .search-bar .text {72 flex: 1;73 }74 .search-icon, .camera-icon {75 width: 42px;76 height: 42px;77 color: #555;78 }79 80 /* Content area */81 .content {82 position: absolute;83 top: 220px;84 left: 0;85 width: 1080px;86 padding: 0 36px;87 }88 89 .note-line {90 display: flex;91 align-items: center;92 gap: 18px;93 color: #2a7a84;94 font-size: 32px;95 margin-top: 20px;96 }97 98 .badge-green {99 color: #2e9e36;100 font-weight: 700;101 font-size: 42px;102 margin: 34px 0 24px 0;103 }104 105 .pill-btn {106 width: 100%;107 height: 116px;108 border-radius: 58px;109 display: flex;110 align-items: center;111 justify-content: center;112 font-size: 40px;113 font-weight: 700;114 letter-spacing: 0.2px;115 }116 .btn-cart {117 background: #f7d957;118 color: #3b2e00;119 border: 1px solid #e5c54a;120 margin-bottom: 26px;121 }122 .btn-buy {123 background: #f2a03f;124 color: #2b1a00;125 border: 1px solid #e0892f;126 margin-bottom: 24px;127 }128 129 .secure {130 display: flex;131 align-items: center;132 gap: 18px;133 font-size: 36px;134 color: #2a7a84;135 margin: 24px 0 22px 0;136 }137 .lock-icon {138 width: 42px;139 height: 42px;140 color: #6a6a6a;141 }142 143 .kv-row { 144 display: grid; 145 grid-template-columns: 280px 1fr; 146 gap: 16px; 147 font-size: 34px; 148 margin: 8px 0; 149 }150 .kv-row .key { color: #6b6b6b; }151 .kv-row .val { color: #222; font-weight: 600; }152 .teal-link { color: #2a7a84; font-size: 34px; margin: 22px 0; }153 154 .divider {155 height: 1px; background: #e8e8e8; margin: 24px 0;156 }157 158 /* Feature badges row */159 .feature-row {160 display: flex;161 gap: 36px;162 margin: 22px 0 28px 0;163 align-items: flex-start;164 flex-wrap: wrap;165 }166 .feature {167 width: 184px;168 text-align: center;169 }170 .feature .circle {171 width: 132px; height: 132px; border-radius: 66px;172 border: 2px solid #e6e6e6;173 background: #fafafa;174 display: flex; align-items: center; justify-content: center;175 margin: 0 auto 14px auto;176 }177 .feature .label {178 font-size: 30px; color: #2a7a84; line-height: 1.2;179 }180 181 /* Details section */182 .section-title {183 font-size: 46px;184 font-weight: 800;185 margin: 24px 0 18px 0;186 }187 .details-table {188 border-top: 1px solid #eaeaea;189 padding-top: 16px;190 }191 .details-row {192 display: grid;193 grid-template-columns: 420px 1fr;194 gap: 16px;195 font-size: 36px;196 padding: 18px 0;197 }198 .details-row .label { color: #333; font-weight: 700; }199 .details-row .value { color: #1f1f1f; }200 201 /* Bottom navigation */202 .bottom-nav {203 position: absolute;204 bottom: 120px;205 left: 0;206 width: 1080px;207 height: 160px;208 background: #ffffff;209 border-top: 1px solid #e6e6e6;210 display: flex;211 align-items: center;212 justify-content: space-around;213 }214 .nav-item {215 width: 160px;216 display: flex;217 flex-direction: column;218 align-items: center;219 color: #1f1f1f;220 font-size: 30px;221 gap: 12px;222 }223 .nav-item .icon {224 width: 74px; height: 74px; color: #1f1f1f;225 }226 .nav-item.active { color: #2a7a84; }227 .home-pill {228 position: absolute;229 bottom: 64px;230 left: 50%;231 transform: translateX(-50%);232 width: 420px;233 height: 14px;234 border-radius: 8px;235 background: #bfbfbf;236 }237</style>238</head>239<body>240<div id="render-target">241 242 <!-- Status Bar -->243 <div class="status-bar">244 <div>9:58</div>245 <div class="right">246 <!-- WiFi icon -->247 <svg class="icon" viewBox="0 0 24 24">248 <path d="M12 18c.8 0 1.5.7 1.5 1.5S12.8 21 12 21s-1.5-.7-1.5-1.5S11.2 18 12 18zm-6.5-6c4.3-3.3 10.7-3.3 15 0l-1.6 1.6c-3.6-2.8-8.2-2.8-11.9 0L5.5 12zm3.6 3.4c2.8-2 6.6-2 9.4 0l-1.6 1.6c-2-1.5-4.6-1.5-6.6 0l-1.6-1.6z" fill="#333"/>249 </svg>250 <!-- Battery icon -->251 <svg class="icon" viewBox="0 0 24 24">252 <rect x="2" y="7" width="18" height="10" rx="2" ry="2" fill="#333"></rect>253 <rect x="20" y="9" width="2" height="6" fill="#333"></rect>254 </svg>255 </div>256 </div>257 258 <!-- Header with Search -->259 <div class="header">260 <div class="back-btn">261 <svg class="icon" viewBox="0 0 24 24">262 <path d="M15 6l-6 6 6 6" stroke="#1f1f1f" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>263 </svg>264 </div>265 266 <div class="search-bar">267 <svg class="search-icon" viewBox="0 0 24 24">268 <circle cx="10" cy="10" r="7" stroke="#666" stroke-width="2" fill="none"></circle>269 <path d="M15.5 15.5L22 22" stroke="#666" stroke-width="2" stroke-linecap="round"/>270 </svg>271 <div class="text">iphone 15</div>272 <svg class="camera-icon" viewBox="0 0 24 24">273 <rect x="3" y="7" width="18" height="12" rx="2" ry="2" stroke="#666" stroke-width="2" fill="none"/>274 <rect x="10" y="10" width="4" height="4" fill="#666"/>275 </svg>276 </div>277 </div>278 279 <!-- Content -->280 <div class="content">281 282 <div class="note-line">283 <!-- small clock to hint delivery time -->284 <svg class="icon" viewBox="0 0 24 24" style="width:40px;height:40px;color:#2a7a84">285 <circle cx="12" cy="12" r="9" stroke="#2a7a84" stroke-width="2" fill="none"/>286 <path d="M12 7v6l4 2" stroke="#2a7a84" stroke-width="2" fill="none" stroke-linecap="round"/>287 </svg>288 <span>hrs 32 mins. Details</span>289 </div>290 291 <div class="note-line" style="margin-top:16px;">292 <svg class="icon" viewBox="0 0 24 24" style="width:40px;height:40px;color:#2a7a84">293 <path d="M12 2C8 2 5 5.2 5 9.2c0 5.4 7 12.6 7 12.6s7-7.2 7-12.6C19 5.2 16 2 12 2zm0 9.2a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" fill="#2a7a84"/>294 </svg>295 <span>Delivering to Delhi 110001 - Update location</span>296 </div>297 298 <div class="badge-green">In stock</div>299 300 <div class="pill-btn btn-cart">Add to Cart</div>301 <div class="pill-btn btn-buy">Buy Now</div>302 303 <div class="secure">304 <svg class="lock-icon" viewBox="0 0 24 24">305 <path d="M6 10V8a6 6 0 1 1 12 0v2h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1h1zm2 0h8V8a4 4 0 0 0-8 0v2z" fill="#6a6a6a"/>306 </svg>307 <span>Secure transaction</span>308 </div>309 310 <div class="kv-row">311 <div class="key">Ships from</div>312 <div class="val">Amazon</div>313 </div>314 <div class="kv-row">315 <div class="key">Sold by</div>316 <div class="val">Appario Retail Private Ltd</div>317 </div>318 319 <div class="teal-link">Gift-wrap available.</div>320 <div class="teal-link">Add to Wish List</div>321 322 <div class="divider"></div>323 324 <!-- Feature badges -->325 <div class="feature-row">326 <div class="feature">327 <div class="circle">328 <svg viewBox="0 0 24 24" class="icon" style="width:64px;height:64px;color:#9c9c9c">329 <rect x="6" y="6" width="12" height="12" stroke="#bfbfbf" stroke-width="2" fill="none"/>330 <path d="M6 12h12" stroke="#bfbfbf" stroke-width="2"/>331 </svg>332 </div>333 <div class="label">7 days Replacement</div>334 </div>335 336 <div class="feature">337 <div class="circle">338 <svg viewBox="0 0 24 24" class="icon" style="width:64px;height:64px;color:#9c9c9c">339 <path d="M3 16h18M5 16l2-6h10l2 6" stroke="#bfbfbf" stroke-width="2" fill="none"/>340 <text x="9" y="12" font-size="6" fill="#bfbfbf">FREE</text>341 </svg>342 </div>343 <div class="label">Free Delivery</div>344 </div>345 346 <div class="feature">347 <div class="circle">348 <svg viewBox="0 0 24 24" class="icon" style="width:64px;height:64px;color:#9c9c9c">349 <path d="M12 6l6 6-6 6-6-6 6-6z" stroke="#bfbfbf" stroke-width="2" fill="none"/>350 <path d="M12 9l3 3-3 3-3-3 3-3z" fill="#bfbfbf"/>351 </svg>352 </div>353 <div class="label">Warranty Policy</div>354 </div>355 356 <div class="feature">357 <div class="circle">358 <svg viewBox="0 0 24 24" class="icon" style="width:64px;height:64px;color:#9c9c9c">359 <path d="M4 18h16l-2-8H6l-2 8z" stroke="#bfbfbf" stroke-width="2" fill="none"/>360 <path d="M12 9l2 2-2 2-2-2 2-2z" fill="#bfbfbf"/>361 </svg>362 </div>363 <div class="label">Top Brand</div>364 </div>365 366 <div class="feature">367 <div class="circle">368 <svg viewBox="0 0 24 24" class="icon" style="width:64px;height:64px;color:#9c9c9c">369 <path d="M12 4v16M4 12h16" stroke="#bfbfbf" stroke-width="2"/>370 </svg>371 </div>372 <div class="label">Setup & delivery</div>373 </div>374 </div>375 376 <div class="divider"></div>377 378 <div class="section-title">Details</div>379 380 <div class="details-table">381 <div class="details-row">382 <div class="label">Brand</div>383 <div class="value">Apple</div>384 </div>385 <div class="details-row">386 <div class="label">Model Name</div>387 <div class="value">iPhone 15</div>388 </div>389 <div class="details-row">390 <div class="label">Network Service Provider</div>391 <div class="value">Unlocked for All Carriers</div>392 </div>393 <div class="details-row">394 <div class="label">Operating System</div>395 <div class="value">iOS</div>396 </div>397 </div>398 399 </div>400 401 <!-- Bottom Navigation -->402 <div class="bottom-nav">403 <div class="nav-item active">404 <svg class="icon" viewBox="0 0 24 24">405 <path d="M3 11l9-7 9 7v8a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1v-8z" fill="#2a7a84"/>406 </svg>407 <div>Home</div>408 </div>409 <div class="nav-item">410 <svg class="icon" viewBox="0 0 24 24">411 <circle cx="12" cy="8" r="4" fill="#1f1f1f"/>412 <path d="M4 20c0-4 4-6 8-6s8 2 8 6" stroke="#1f1f1f" stroke-width="2" fill="none"/>413 </svg>414 <div>You</div>415 </div>416 <div class="nav-item">417 <svg class="icon" viewBox="0 0 24 24">418 <rect x="4" y="6" width="16" height="12" rx="2" stroke="#1f1f1f" stroke-width="2" fill="none"/>419 <path d="M9 6l3 3 3-3" stroke="#1f1f1f" stroke-width="2" fill="none"/>420 </svg>421 <div>More</div>422 </div>423 <div class="nav-item">424 <svg class="icon" viewBox="0 0 24 24">425 <path d="M6 6h14l-2 10H7L6 6zm2 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" fill="#1f1f1f"/>426 </svg>427 <div>Cart</div>428 </div>429 <div class="nav-item">430 <svg class="icon" viewBox="0 0 24 24">431 <path d="M3 6h18M3 12h18M3 18h18" stroke="#1f1f1f" stroke-width="2"/>432 </svg>433 <div>Menu</div>434 </div>435 </div>436 437 <div class="home-pill"></div>438 439</div>440</body>441</html>