GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Cart Confirm Remove</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: #0d0d0f;13    color: #fff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 110px;23    padding: 30px 40px 0 40px;24    box-sizing: border-box;25    color: #ffffff;26    font-size: 40px;27    display: flex;28    align-items: center;29    justify-content: space-between;30  }31  .status-icons {32    display: flex;33    gap: 26px;34    align-items: center;35  }36  .dot { width: 18px; height: 18px; background: #fff; border-radius: 50%; opacity: 0.9; }37 38  /* Page header */39  .page-header {40    position: absolute;41    top: 140px;42    left: 40px;43    font-size: 66px;44    font-weight: 700;45    letter-spacing: 1px;46    color: #cfcfcf;47  }48 49  .delivery-note {50    position: absolute;51    top: 260px;52    left: 0;53    width: 1080px;54    text-align: center;55    color: #c43832;56    font-size: 38px;57    font-weight: 700;58  }59 60  /* Cart item */61  .cart-item {62    position: absolute;63    top: 380px;64    left: 60px;65    right: 60px;66    height: 420px;67    display: flex;68    gap: 40px;69    align-items: center;70  }71  .book-img {72    width: 220px;73    height: 320px;74    background: #E0E0E0;75    border: 1px solid #BDBDBD;76    display: flex;77    align-items: center;78    justify-content: center;79    color: #757575;80    font-size: 28px;81    text-align: center;82  }83  .item-info {84    flex: 1;85    height: 100%;86    display: flex;87    flex-direction: column;88    justify-content: center;89    gap: 18px;90  }91  .item-title {92    font-size: 42px;93    font-weight: 700;94    color: #d9d9d9;95  }96  .item-author {97    font-size: 34px;98    color: #8c8c8c;99  }100  .item-actions {101    display: flex;102    align-items: center;103    gap: 40px;104    margin-top: 22px;105  }106  .action-btn {107    display: inline-flex;108    align-items: center;109    gap: 16px;110    color: #c9c9c9;111    font-size: 36px;112  }113  .action-btn.remove { color: #de4a43; font-weight: 700; }114  .divider {115    width: 2px;116    height: 42px;117    background: #333;118  }119  .price {120    font-size: 44px;121    color: #dcdcdc;122    font-weight: 700;123    margin-left: auto;124  }125 126  /* Buy Now bar */127  .buy-bar {128    position: absolute;129    bottom: 360px;130    left: 130px;131    width: 820px;132    height: 120px;133    background: #5a2b86;134    border-radius: 60px;135    display: flex;136    align-items: center;137    justify-content: center;138    color: #e9d8ff;139    font-size: 44px;140    box-shadow: 0 12px 24px rgba(0,0,0,0.6);141  }142 143  /* Bottom navigation */144  .bottom-nav {145    position: absolute;146    bottom: 190px;147    left: 0;148    width: 1080px;149    height: 160px;150    background: #121218;151    display: flex;152    justify-content: space-around;153    align-items: center;154    color: #bfbfbf;155    border-top: 1px solid #1f1f25;156  }157  .nav-item {158    display: flex;159    flex-direction: column;160    align-items: center;161    gap: 16px;162    font-size: 30px;163  }164  .nav-icon { width: 64px; height: 64px; }165 166  /* Overlay and dialog */167  .overlay {168    position: absolute;169    top: 0; left: 0; width: 1080px; height: 2400px;170    background: rgba(0,0,0,0.55);171  }172  .dialog {173    position: absolute;174    top: 920px;175    left: 110px;176    width: 860px;177    background: #0f1013;178    border-radius: 16px;179    padding: 60px 60px 50px 60px;180    box-shadow: 0 18px 36px rgba(0,0,0,0.7);181    text-align: center;182    border: 1px solid #1d1e22;183  }184  .dialog-title {185    font-size: 60px;186    font-weight: 800;187    color: #f7f7f7;188    margin-bottom: 22px;189  }190  .dialog-sub {191    font-size: 38px;192    color: #a6a6a6;193    margin-bottom: 48px;194  }195  .dialog-actions {196    display: flex;197    justify-content: center;198    gap: 80px;199  }200  .dialog-btn {201    width: 200px;202    height: 120px;203    background: #ffffff;204    color: #222;205    border-radius: 18px;206    display: flex;207    align-items: center;208    justify-content: center;209    font-size: 44px;210    font-weight: 800;211    box-shadow: 0 8px 16px rgba(0,0,0,0.4);212  }213  .dialog-btn.yes { color: #e53935; }214  .dialog-btn.no { color: #21b54b; }215</style>216</head>217<body>218<div id="render-target">219 220  <!-- Status bar -->221  <div class="status-bar">222    <div>7:52</div>223    <div class="status-icons">224      <!-- simple signal icon -->225      <svg class="nav-icon" viewBox="0 0 24 24" width="42" height="42" fill="#fff">226        <rect x="2" y="16" width="3" height="6"></rect>227        <rect x="7" y="12" width="3" height="10"></rect>228        <rect x="12" y="8" width="3" height="14"></rect>229        <rect x="17" y="4" width="3" height="18"></rect>230      </svg>231      <!-- upload icon -->232      <svg class="nav-icon" viewBox="0 0 24 24" width="42" height="42" fill="#fff">233        <path d="M12 3l4 4h-3v7h-2V7H8l4-4z"></path>234        <path d="M5 19h14v2H5z"></path>235      </svg>236      <!-- bell icon -->237      <svg class="nav-icon" viewBox="0 0 24 24" width="42" height="42" fill="#fff">238        <path d="M12 2a4 4 0 0 0-4 4v3.5C8 12 6 13 6 15v3h12v-3c0-2-2-3-2-5.5V6a4 4 0 0 0-4-4z"></path>239        <circle cx="12" cy="21" r="2" fill="#fff"></circle>240      </svg>241      <div class="dot"></div>242      <!-- wifi icon -->243      <svg class="nav-icon" viewBox="0 0 24 24" width="42" height="42" fill="#fff">244        <path d="M2 8c5-5 15-5 20 0l-2 2c-4-4-12-4-16 0L2 8zM6 12c3-3 9-3 12 0l-2 2c-2-2-6-2-8 0l-2-2z"></path>245        <circle cx="12" cy="18" r="2" fill="#fff"></circle>246      </svg>247      <!-- battery icon -->248      <svg class="nav-icon" viewBox="0 0 24 24" width="42" height="42" fill="#fff">249        <rect x="2" y="6" width="18" height="12" rx="2"></rect>250        <rect x="21" y="10" width="2" height="4"></rect>251        <rect x="4" y="8" width="10" height="8" fill="#fff"></rect>252      </svg>253    </div>254  </div>255 256  <!-- Header -->257  <div class="page-header">CART</div>258  <div class="delivery-note">Same delivery charge for one or more items</div>259 260  <!-- Cart item -->261  <div class="cart-item">262    <div class="book-img">[IMG: Book Cover - Do It Now]</div>263    <div class="item-info">264      <div class="item-title">Do It Now! X 1</div>265      <div class="item-author">Napolean Hill</div>266      <div class="item-actions">267        <div class="action-btn remove">268          <svg width="40" height="40" viewBox="0 0 24 24">269            <circle cx="12" cy="12" r="10" fill="none" stroke="#de4a43" stroke-width="2"></circle>270            <rect x="7" y="11" width="10" height="2" fill="#de4a43"></rect>271          </svg>272          <span>Remove</span>273        </div>274        <div class="divider"></div>275        <div class="action-btn">276          <svg width="40" height="40" viewBox="0 0 24 24" fill="#c9c9c9">277            <rect x="4" y="6" width="16" height="2"></rect>278            <rect x="4" y="11" width="16" height="2"></rect>279            <rect x="4" y="16" width="16" height="2"></rect>280          </svg>281          <span>Details</span>282        </div>283        <div class="price">₹149</div>284      </div>285    </div>286  </div>287 288  <!-- Buy Now bar -->289  <div class="buy-bar">Buy Now ₹149</div>290 291  <!-- Bottom navigation -->292  <div class="bottom-nav">293    <div class="nav-item">294      <svg class="nav-icon" viewBox="0 0 24 24" fill="#bfbfbf">295        <rect x="3" y="3" width="7" height="7"></rect>296        <rect x="14" y="3" width="7" height="7"></rect>297        <rect x="3" y="14" width="7" height="7"></rect>298        <rect x="14" y="14" width="7" height="7"></rect>299      </svg>300    </div>301    <div class="nav-item">302      <svg class="nav-icon" viewBox="0 0 24 24" fill="#bfbfbf">303        <circle cx="10" cy="10" r="6" fill="none" stroke="#bfbfbf" stroke-width="2"></circle>304        <line x1="15" y1="15" x2="21" y2="21" stroke="#bfbfbf" stroke-width="2"></line>305      </svg>306    </div>307    <div class="nav-item">308      <svg class="nav-icon" viewBox="0 0 24 24" fill="#bfbfbf">309        <path d="M7 6h14l-2 9H8L7 6z"></path>310        <circle cx="9" cy="20" r="2"></circle>311        <circle cx="18" cy="20" r="2"></circle>312        <rect x="2" y="3" width="4" height="4" fill="#bfbfbf"></rect>313      </svg>314    </div>315    <div class="nav-item">316      <svg class="nav-icon" viewBox="0 0 24 24" fill="#bfbfbf">317        <circle cx="12" cy="8" r="4"></circle>318        <path d="M4 21c0-4 4-7 8-7s8 3 8 7H4z"></path>319      </svg>320    </div>321  </div>322 323  <!-- Overlay confirmation dialog -->324  <div class="overlay"></div>325  <div class="dialog">326    <div class="dialog-title">Do you want to remove?</div>327    <div class="dialog-sub">Do It Now! X 1</div>328    <div class="dialog-actions">329      <div class="dialog-btn yes">YES</div>330      <div class="dialog-btn no">No</div>331    </div>332  </div>333 334</div>335</body>336</html>