GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Added to Cart Modal UI</title>5<style>6 body {7 margin: 0;8 padding: 0;9 background: transparent;10 }11 #render-target {12 width: 1080px;13 height: 2400px;14 position: relative;15 overflow: hidden;16 background: #f7f7f7;17 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;18 color: #1f1f1f;19 }20 21 /* Status bar */22 .status-bar {23 position: absolute;24 top: 0;25 left: 0;26 width: 1080px;27 height: 90px;28 padding: 0 36px;29 display: flex;30 align-items: center;31 justify-content: space-between;32 font-weight: 600;33 color: #222;34 }35 .status-left { display: flex; align-items: center; gap: 18px; }36 .status-right { display: flex; align-items: center; gap: 18px; }37 .icon-sm {38 width: 28px;39 height: 28px;40 }41 42 /* App bar */43 .app-bar {44 position: absolute;45 top: 90px;46 left: 0;47 width: 1080px;48 height: 96px;49 padding: 0 24px;50 display: flex;51 align-items: center;52 gap: 20px;53 }54 .back-btn {55 width: 64px;56 height: 64px;57 display: flex;58 align-items: center;59 justify-content: center;60 }61 .search-wrap {62 flex: 1;63 height: 64px;64 background: #fff;65 border: 1px solid #ddd;66 border-radius: 32px;67 display: flex;68 align-items: center;69 padding: 0 22px;70 gap: 16px;71 }72 .search-placeholder {73 color: #8a8a8a;74 font-size: 28px;75 }76 .tool-btn {77 width: 64px;78 height: 64px;79 border-radius: 14px;80 background: #fff;81 border: 1px solid #ddd;82 display: flex;83 align-items: center;84 justify-content: center;85 position: relative;86 }87 .badge {88 position: absolute;89 top: -6px;90 right: -6px;91 background: #d32f2f;92 color: #fff;93 width: 32px;94 height: 32px;95 border-radius: 50%;96 font-size: 22px;97 display: flex;98 align-items: center;99 justify-content: center;100 font-weight: 700;101 }102 103 /* Tabs */104 .tabs {105 position: absolute;106 top: 186px;107 left: 0;108 width: 1080px;109 height: 72px;110 display: flex;111 align-items: center;112 gap: 40px;113 padding: 0 24px;114 font-weight: 600;115 color: #333;116 }117 .tab {118 font-size: 32px;119 padding-bottom: 8px;120 }121 .tab.active {122 color: #000;123 border-bottom: 4px solid #ff7a00;124 }125 126 .section-title {127 position: absolute;128 top: 280px;129 left: 24px;130 font-size: 44px;131 font-weight: 700;132 }133 134 /* Overlay and modal */135 .overlay {136 position: absolute;137 inset: 0;138 background: rgba(0,0,0,0.35);139 }140 .modal {141 position: absolute;142 left: 0;143 right: 0;144 top: 430px;145 bottom: 180px;146 background: #ffffff;147 border-top-left-radius: 28px;148 border-top-right-radius: 28px;149 box-shadow: 0 8px 24px rgba(0,0,0,0.15);150 overflow: hidden;151 }152 .modal-header {153 display: flex;154 align-items: center;155 justify-content: space-between;156 padding: 32px 36px 12px 36px;157 }158 .modal-title {159 font-size: 52px;160 font-weight: 800;161 color: #ff7a00;162 }163 .close-btn {164 width: 56px;165 height: 56px;166 border-radius: 50%;167 display: flex;168 align-items: center;169 justify-content: center;170 }171 .modal-subtitle {172 padding: 0 36px;173 font-size: 40px;174 font-weight: 700;175 color: #222;176 }177 .modal-body {178 position: absolute;179 left: 0;180 right: 0;181 top: 160px;182 bottom: 160px;183 padding: 0 24px 24px 24px;184 overflow-y: auto;185 }186 187 /* Product grid */188 .grid {189 display: grid;190 grid-template-columns: repeat(4, 1fr);191 gap: 24px;192 }193 .card {194 background: transparent;195 border-radius: 18px;196 padding-bottom: 8px;197 }198 .img {199 width: 100%;200 height: 260px;201 background: #E0E0E0;202 border: 1px solid #BDBDBD;203 border-radius: 16px;204 display: flex;205 align-items: center;206 justify-content: center;207 color: #757575;208 font-size: 26px;209 text-align: center;210 }211 .price {212 margin-top: 16px;213 font-size: 40px;214 font-weight: 800;215 }216 .moq {217 font-size: 28px;218 color: #767676;219 }220 221 /* Modal actions */222 .modal-actions {223 position: absolute;224 left: 0;225 right: 0;226 bottom: 24px;227 padding: 0 24px;228 display: flex;229 align-items: center;230 justify-content: space-between;231 gap: 24px;232 }233 .btn {234 height: 120px;235 border-radius: 36px;236 font-size: 40px;237 font-weight: 800;238 display: flex;239 align-items: center;240 justify-content: center;241 flex: 1;242 border: none;243 }244 .btn.light {245 background: #ffe9da;246 color: #ff7a00;247 border: 1px solid #ffd2af;248 }249 .btn.primary {250 background: #ff7a00;251 color: #ffffff;252 box-shadow: 0 8px 18px rgba(255,122,0,0.35);253 }254 255 /* Bottom OS indicator (gesture pill) */256 .gesture-pill {257 position: absolute;258 bottom: 22px;259 left: 50%;260 transform: translateX(-50%);261 width: 360px;262 height: 12px;263 background: #1a1a1a;264 border-radius: 8px;265 }266</style>267</head>268<body>269<div id="render-target">270 271 <!-- Status Bar -->272 <div class="status-bar">273 <div class="status-left">274 <div style="font-size:36px;">8:54</div>275 </div>276 <div class="status-right">277 <!-- simple icons -->278 <svg class="icon-sm" viewBox="0 0 24 24"><path d="M2 18l10-12 10 12H2z" fill="#000"/></svg>279 <svg class="icon-sm" viewBox="0 0 24 24"><rect x="2" y="6" width="18" height="12" rx="2" fill="#000"/><rect x="20" y="9" width="2" height="6" fill="#000"/></svg>280 </div>281 </div>282 283 <!-- App Bar -->284 <div class="app-bar">285 <div class="back-btn">286 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>287 </div>288 <div class="search-wrap">289 <svg width="32" height="32" viewBox="0 0 24 24"><circle cx="10" cy="10" r="6" stroke="#666" stroke-width="2" fill="none"/><path d="M21 21l-6-6" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"/></svg>290 <div class="search-placeholder">Search</div>291 </div>292 <div class="tool-btn">293 <svg width="28" height="28" viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12" rx="2" fill="#333"/><circle cx="12" cy="12" r="3" fill="#fff"/></svg>294 </div>295 <div class="tool-btn">296 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M7 7h13l-2 10H7L5 5H2" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>297 <div class="badge">1</div>298 </div>299 <div class="tool-btn">300 <svg width="10" height="28" viewBox="0 0 4 16"><circle cx="2" cy="2" r="2" fill="#333"/><circle cx="2" cy="8" r="2" fill="#333"/><circle cx="2" cy="14" r="2" fill="#333"/></svg>301 </div>302 </div>303 304 <!-- Tabs -->305 <div class="tabs">306 <div class="tab">Overview</div>307 <div class="tab">Details</div>308 <div class="tab active">Recommended</div>309 </div>310 311 <div class="section-title">Product reviews</div>312 313 <!-- Overlay + Modal -->314 <div class="overlay"></div>315 <div class="modal">316 <div class="modal-header">317 <div class="modal-title">Added to Cart !</div>318 <div class="close-btn">319 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" stroke="#666" stroke-width="2" stroke-linecap="round"/></svg>320 </div>321 </div>322 <div class="modal-subtitle">Related products from this Supplier</div>323 324 <div class="modal-body">325 <div class="grid">326 <!-- Row 1 -->327 <div class="card">328 <div class="img">[IMG: Smartphone - Black]</div>329 <div class="price">$89.00</div>330 <div class="moq">1 piece (MOQ)</div>331 </div>332 <div class="card">333 <div class="img">[IMG: Smartphone - Gold]</div>334 <div class="price">$89.00</div>335 <div class="moq">1 piece (MOQ)</div>336 </div>337 <div class="card">338 <div class="img">[IMG: Smartphone - Black/Gold]</div>339 <div class="price">$89.00</div>340 <div class="moq">1 piece (MOQ)</div>341 </div>342 <div class="card">343 <div class="img">[IMG: Smartphone - Grey]</div>344 <div class="price">$89.00</div>345 <div class="moq">1 piece (MOQ)</div>346 </div>347 348 <!-- Row 2 -->349 <div class="card">350 <div class="img">[IMG: Smartphone - Purple]</div>351 <div class="price">$89.00</div>352 <div class="moq">1 piece (MOQ)</div>353 </div>354 <div class="card">355 <div class="img">[IMG: Smartphone - Beige]</div>356 <div class="price">$49.00</div>357 <div class="moq">1 piece (MOQ)</div>358 </div>359 <div class="card">360 <div class="img">[IMG: Smartphone - Purple Two Views]</div>361 <div class="price">$89.00</div>362 <div class="moq">1 piece (MOQ)</div>363 </div>364 <div class="card">365 <div class="img">[IMG: Smartphone - Light Purple]</div>366 <div class="price">$89.00</div>367 <div class="moq">1 piece (MOQ)</div>368 </div>369 370 <!-- Row 3 -->371 <div class="card">372 <div class="img">[IMG: Smartphone - Grey Curved Back]</div>373 <div class="price">$89.00</div>374 <div class="moq">1 piece (MOQ)</div>375 </div>376 <div class="card">377 <div class="img">[IMG: Samsung-style Multi Camera]</div>378 <div class="price">$99.00</div>379 <div class="moq">1 piece (MOQ)</div>380 </div>381 <div class="card">382 <div class="img">[IMG: Smartphone - Grey Notch]</div>383 <div class="price">$89.00</div>384 <div class="moq">1 piece (MOQ)</div>385 </div>386 <div class="card">387 <div class="img">[IMG: Smartphone - Dark Grey]</div>388 <div class="price">$89.00</div>389 <div class="moq">1 piece (MOQ)</div>390 </div>391 </div>392 </div>393 394 <div class="modal-actions">395 <button class="btn light">Continue</button>396 <button class="btn primary">View The Cart</button>397 </div>398 </div>399 400 <div class="gesture-pill"></div>401</div>402</body>403</html>