GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8" />5<meta name="viewport" content="width=1080, initial-scale=1.0" />6<title>Cart - Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:#111; }9  #render-target{10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#F7F7F7;12  }13 14  /* Header / search */15  .top-gradient{16    height:300px;17    background: linear-gradient(90deg, #6bd6c9, #7ee0d1);18    padding: 34px 36px 0 36px;19  }20  .status-row{21    height:60px; display:flex; align-items:center; justify-content:space-between; color:#0a2b2b; opacity:.9; font-weight:600;22  }23  .search-bar{24    margin-top:28px;25    height:100px; border-radius:24px; background:#fff;26    display:flex; align-items:center; padding:0 28px;27    box-shadow: 0 6px 14px rgba(0,0,0,.18);28  }29  .search-input{30    flex:1; font-size:42px; color:#444;31  }32  .icon{ width:52px; height:52px; display:inline-flex; align-items:center; justify-content:center; color:#777; }33  .qr{34    width:76px;height:76px;border-radius:18px;background:#fff; display:flex; align-items:center; justify-content:center;35    box-shadow: 0 2px 8px rgba(0,0,0,.16) inset;36  }37 38  /* Subtotal area */39  .content{ padding: 32px 36px 180px 36px; }40  .subtotal{ background:#fff; padding: 36px; border-radius: 8px; }41  .subtotal h2{ margin:0 0 8px 0; font-size:54px; font-weight:800; letter-spacing:-0.5px; }42  .elig{43    margin-top:16px; display:flex; gap:18px; align-items:flex-start; color:#0c7c59; font-size:34px; line-height:42px;44  }45  .elig a{ color:#0C7C59; text-decoration:underline; }46  .cta{47    margin-top:28px;48    background:#ffd814; color:#111; height:120px; border-radius:20px; display:flex; align-items:center; justify-content:center;49    font-size:44px; font-weight:700; box-shadow: 0 4px 0 #c7a700;50  }51 52  .gift{53    display:flex; align-items:center; gap:26px; margin:34px 0;54    font-size:36px; color:#333;55  }56  .checkbox{57    width:48px;height:48px;border:2px solid #c7c7c7;border-radius:8px;background:#fff;58  }59  .divider{ height:2px; background:#e6e6e6; margin:18px 0 28px; }60 61  /* Cart item card */62  .card{63    background:#fff; border-radius:24px; padding:28px; box-shadow: 0 2px 0 rgba(0,0,0,.06);64    border:1px solid #eee;65  }66  .card-row{ display:flex; gap:26px; }67  .prod-img{68    width:300px; height:300px; background:#E0E0E0; border:1px solid #BDBDBD;69    display:flex; align-items:center; justify-content:center; color:#757575; border-radius:14px; text-align:center; padding:8px;70  }71  .info{ flex:1; }72  .title{73    font-size:40px; line-height:48px; font-weight:700; color:#222; margin-bottom:12px;74  }75  .badges{ display:flex; gap:14px; margin:10px 0 16px; }76  .badge-red{ background:#e53935; color:#fff; padding:10px 16px; border-radius:12px; font-size:30px; font-weight:800; }77  .badge-orange{ background:#ef6c00; color:#fff; padding:10px 16px; border-radius:12px; font-size:30px; font-weight:800; }78  .price-row{ display:flex; align-items:baseline; gap:18px; margin:6px 0 8px; }79  .price{ font-size:58px; font-weight:800; }80  .mrp{ color:#666; font-size:34px; }81  .mrp del{ color:#8a8a8a; }82  .shipping{ font-size:34px; color:#444; margin:8px 0; }83  .stock{ color:#0a8f36; font-size:36px; margin:8px 0; }84  .link{ color:#0a7c86; font-size:34px; margin:4px 0 12px; }85  .size{ color:#333; font-size:34px; }86 87  .controls{ display:flex; gap:18px; align-items:center; margin-top:20px; flex-wrap:wrap; }88  .icon-btn{89    width:110px; height:88px; border-radius:16px; border:1px solid #ddd; background:#fff;90    display:flex; align-items:center; justify-content:center;91  }92  .qty{93    display:flex; align-items:center; border:1px solid #ddd; border-radius:16px; overflow:hidden; height:88px;94  }95  .qty button{96    width:90px; height:88px; border:none; background:#fff; font-size:46px; color:#333;97  }98  .qty .val{ width:100px; text-align:center; font-size:40px; font-weight:700; }99  .pill{100    padding:22px 34px; border-radius:18px; background:#fff; border:1px solid #e0e0e0; font-size:34px; color:#333;101    box-shadow: 0 2px 6px rgba(0,0,0,.06);102  }103  .see-more{ margin-top:16px; display:inline-block; padding:26px 42px; border-radius:22px; background:#fff; border:1px solid #e0e0e0; font-size:36px; }104 105  /* Feature icons row */106  .features{ margin:32px 0 18px; padding:24px 0; border-top:1px solid #e9e9e9; border-bottom:1px solid #e9e9e9; display:flex; justify-content:space-around; align-items:center; }107  .feat{ display:flex; flex-direction:column; align-items:center; gap:12px; color:#0a7c86; font-size:36px; }108  .feat .circ{ width:120px; height:120px; border-radius:50%; background:#fff; border:1px solid #e0e0e0; display:flex; align-items:center; justify-content:center; }109 110  /* Bottom nav */111  .bottom-nav{112    position:absolute; left:0; right:0; bottom:0; height:176px; background:#fff; border-top:1px solid #eaeaea;113    display:flex; justify-content:space-around; align-items:center;114  }115  .nav-item{ display:flex; flex-direction:column; align-items:center; gap:10px; color:#6a6a6a; font-size:30px; }116  .nav-item.active{ color:#0a7c86; }117</style>118</head>119<body>120<div id="render-target">121 122  <div class="top-gradient">123    <div class="status-row">124      <div style="font-size:34px;">11:55</div>125      <div style="display:flex; gap:20px; align-items:center;">126        <svg width="36" height="36" viewBox="0 0 24 24" fill="#3d3d3d"><path d="M12 8a4 4 0 0 0 0 8 4 4 0 0 0 0-8Zm0-6a1 1 0 0 1 1 1v1a1 1 0 1 1-2 0V3a1 1 0 0 1 1-1ZM3 11H2a1 1 0 1 0 0 2h1a1 1 0 1 0 0-2Zm19 0h-1a1 1 0 1 0 0 2h1a1 1 0 1 0 0-2ZM5.05 5.05a1 1 0 0 1 1.41 0l.7.7a1 1 0 1 1-1.41 1.42l-.7-.71a1 1 0 0 1 0-1.41Z"/></svg>127        <svg width="36" height="36" viewBox="0 0 24 24" fill="#3d3d3d"><path d="M3 7h18v10H3V7Zm2 2v6h14V9H5Z"/></svg>128        <svg width="36" height="36" viewBox="0 0 24 24" fill="#3d3d3d"><path d="M12 4a8 8 0 0 0-7 4h14a8 8 0 0 0-7-4Zm-8 6v4a8 8 0 0 0 16 0v-4H4Z"/></svg>129      </div>130    </div>131 132    <div class="search-bar">133      <span class="icon">134        <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.35-4.35"/></svg>135      </span>136      <div class="search-input">quinoa</div>137      <div class="qr">138        <svg width="48" height="48" viewBox="0 0 24 24" fill="#666">139          <path d="M3 3h8v8H3V3Zm2 2v4h4V5H5Zm8-2h8v8h-8V3Zm2 2v4h4V5h-4ZM3 13h8v8H3v-8Zm2 2v4h4v-4H5Zm12 0h-2v2h2v2h2v-2h2v-2h-2v-2h-2v2Z"/>140        </svg>141      </div>142    </div>143  </div>144 145  <div class="content">146    <div class="subtotal">147      <h2>Subtotal ₹819.00</h2>148      <div class="elig">149        <span>150          <svg width="48" height="48" viewBox="0 0 24 24" fill="#0c7c59">151            <circle cx="12" cy="12" r="10" fill="#dff3ea"/>152            <path d="M10 14.2 6.8 11l-1.4 1.4L10 17 19 8l-1.4-1.4Z" fill="#0c7c59"/>153          </svg>154        </span>155        <span>Your order is eligible for FREE Delivery. Select this option at checkout. <a href="#">Details</a></span>156      </div>157      <div class="cta">Proceed to Buy (1 item)</div>158    </div>159 160    <div class="gift">161      <div class="checkbox"></div>162      <div>Send as a gift. Include custom message</div>163    </div>164 165    <div class="divider"></div>166 167    <div class="card">168      <div class="card-row">169        <div class="prod-img">[IMG: True Elements Quinoa Combo Pack]</div>170        <div class="info">171          <div class="title">True Elements Monthly Essentials Quinoa 3kg Combo (Buy One Get One) by True Elements</div>172          <div class="badges">173            <div class="badge-red">58% off</div>174            <div class="badge-orange">Deal of the Day</div>175          </div>176 177          <div class="price-row">178            <div class="price">₹819.00</div>179            <div class="mrp">M.R.P.: <del>₹1,950.00</del></div>180          </div>181          <div class="shipping">Eligible for FREE Shipping</div>182          <div class="stock">In stock</div>183          <div class="link">See offers & discounts</div>184          <div class="size"><b>Size:</b> Quinoa 2kg + 1kg FREE</div>185 186          <div class="controls">187            <div class="icon-btn" title="Delete">188              <svg width="44" height="44" viewBox="0 0 24 24" fill="#666">189                <path d="M7 8h10l-1 12H8L7 8Zm10-3h-3.5l-1-1h-3L8 5H5v2h14V5Z"/>190              </svg>191            </div>192            <div class="qty">193              <button>-</button>194              <div class="val">1</div>195              <button>+</button>196            </div>197            <div class="pill">Delete</div>198            <div class="pill">Save for later</div>199          </div>200 201          <a class="see-more" href="#">See more like this</a>202        </div>203      </div>204    </div>205 206    <div class="features">207      <div class="feat">208        <div class="circ">209          <svg width="64" height="64" viewBox="0 0 24 24" fill="#0a7c86">210            <path d="M12 2 3 7v10l9 5 9-5V7l-9-5Zm0 2.2 6.5 3.6v2.7c0 3.8-2.5 7.3-6.2 8.4h-.6C8 17.8 5.5 14.3 5.5 10.5V7.8L12 4.2Z"/>211            <path d="M11 12h2v4h-2z"/>212          </svg>213        </div>214        <div>Secure Payment</div>215      </div>216      <div class="feat">217        <div class="circ">218          <svg width="70" height="70" viewBox="0 0 24 24" fill="#0a7c86">219            <path d="M3 7h13l4 5v7H3V7Zm2 2v8h13v-4l-2-2H5Z"/>220            <circle cx="9" cy="18" r="1.5" fill="#0a7c86"/>221            <circle cx="16" cy="18" r="1.5" fill="#0a7c86"/>222          </svg>223        </div>224        <div>Amazon Delivered</div>225      </div>226    </div>227  </div>228 229  <div class="bottom-nav">230    <div class="nav-item">231      <svg width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="#6a6a6a" stroke-width="2">232        <path d="M3 11.5 12 4l9 7.5V21H3v-9.5Z"/><path d="M9 21v-6h6v6"/>233      </svg>234      <div>Home</div>235    </div>236    <div class="nav-item">237      <svg width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="#6a6a6a" stroke-width="2">238        <circle cx="12" cy="8" r="4"/><path d="M4 20c1.5-4 14.5-4 16 0"/>239      </svg>240      <div>You</div>241    </div>242    <div class="nav-item">243      <svg width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="#6a6a6a" stroke-width="2">244        <path d="M4 8l8-4 8 4-8 4-8-4Z"/><path d="M4 14l8 4 8-4"/>245      </svg>246      <div>More</div>247    </div>248    <div class="nav-item active">249      <svg width="52" height="52" viewBox="0 0 24 24" fill="#0a7c86">250        <path d="M7 6h13l-2 8H8L7 6Zm-1 0H3v2h2v10h12v-2H6V6Z"/>251      </svg>252      <div>Cart</div>253    </div>254    <div class="nav-item">255      <svg width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="#6a6a6a" stroke-width="2">256        <path d="M3 6h18M3 12h18M3 18h18"/>257      </svg>258      <div>Menu</div>259    </div>260  </div>261 262</div>263</body>264</html>