GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Cart Screen</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    background: #FFFFFF; box-shadow: 0 10px 30px rgba(0,0,0,0.08); border-radius: 28px;11    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;12    color: #111;13  }14  .status-bar {15    height: 110px; padding: 0 36px; display: flex; align-items: center; justify-content: space-between;16    color: #666; font-size: 42px;17  }18  .status-right { display: flex; align-items: center; gap: 24px; }19  .header {20    height: 120px; display: flex; align-items: center; position: relative; padding: 0 36px;21  }22  .back-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }23  .header-title { position: absolute; left: 0; right: 0; text-align: center; font-weight: 700; color: #1F8E2C; font-size: 56px; }24  .content {25    position: absolute; left: 0; right: 0; top: 230px; bottom: 260px;26    overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 36px 40px;27  }28  .card {29    background: #FAFAFA; border: 1px solid #E0E0E0; border-radius: 20px;30    padding: 34px; margin-bottom: 34px;31  }32  .card-row { display: flex; gap: 30px; }33  .card-left { flex: 1; }34  .card-title { font-size: 44px; line-height: 1.2; font-weight: 700; margin-bottom: 12px; }35  .card-price { font-size: 40px; font-weight: 700; margin-bottom: 26px; }36  .stepper { display: flex; align-items: center; border: 1px solid #DFDFDF; border-radius: 12px; overflow: hidden; width: 360px; height: 120px; margin-bottom: 26px; }37  .stepper div { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 48px; color: #333; }38  .stepper .sep { width: 1px; background: #E5E5E5; }39  .card-right { width: 280px; display: flex; align-items: center; justify-content: center; }40  .img-placeholder {41    width: 260px; height: 360px; background: #E0E0E0; border: 1px solid #BDBDBD;42    border-radius: 18px; display: flex; align-items: center; justify-content: center; color: #757575; text-align: center; font-size: 30px; padding: 10px;43  }44  .card-actions { display: flex; margin-top: 24px; border-top: 1px solid #E6E6E6; }45  .card-actions button { flex: 1; padding: 36px 20px; background: transparent; border: none; font-size: 40px; font-weight: 700; color: #222; }46  .card-actions button + button { border-left: 1px solid #E6E6E6; }47 48  .list-row {49    background: #FFFFFF; border-top: 1px solid #EEEEEE; border-bottom: 1px solid #EEEEEE;50    border-radius: 18px; padding: 30px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;51  }52  .list-left { display: flex; align-items: center; gap: 24px; font-size: 40px; font-weight: 700; color: #222; }53  .section-title { font-size: 46px; font-weight: 800; margin: 32px 0 12px; }54  .subtext { color: #666; font-size: 34px; }55 56  .total-row { display: flex; align-items: center; justify-content: space-between; padding: 18px 6px; }57  .total-row .label { font-size: 42px; font-weight: 800; }58  .total-row .amount { font-size: 42px; font-weight: 800; }59 60  .info-row { display: flex; align-items: center; gap: 18px; color: #555; font-size: 34px; padding: 12px 6px 24px; }61 62  .options { display: flex; gap: 24px; margin-top: 18px; }63  .option-card {64    flex: 1; background: #F2F2F2; border: 1px solid #D9D9D9; border-radius: 20px;65    padding: 38px 24px; display: flex; flex-direction: column; align-items: center; gap: 18px;66  }67  .option-title { font-size: 36px; color: #333; }68 69  .hint { margin: 30px 6px; font-size: 34px; color: #333; }70 71  .bottom-bar {72    position: absolute; left: 0; right: 0; bottom: 0; height: 240px;73    background: #FFFFFF; border-top-left-radius: 24px; border-top-right-radius: 24px;74    box-shadow: 0 -8px 20px rgba(0,0,0,0.08);75    padding: 26px 36px; display: flex; flex-direction: column; justify-content: center; gap: 22px;76  }77  .bottom-total { text-align: center; font-size: 40px; font-weight: 700; color: #333; }78  .checkout-btn {79    background: #2E8F34; color: #FFFFFF; border: none; height: 120px; border-radius: 26px;80    font-size: 44px; font-weight: 800; letter-spacing: 0.3px;81  }82 83  /* simple icon styles for consistency */84  .icon { width: 48px; height: 48px; }85  .icon-green { color: #2E8F34; }86</style>87</head>88<body>89<div id="render-target">90 91  <!-- Status Bar -->92  <div class="status-bar">93    <div>10:12</div>94    <div class="status-right">95      <!-- Do Not Disturb -->96      <svg class="icon" viewBox="0 0 24 24">97        <circle cx="12" cy="12" r="10" fill="#888"/>98        <rect x="6" y="11" width="12" height="2" fill="#fff"/>99      </svg>100      <!-- Wifi -->101      <svg class="icon" viewBox="0 0 24 24">102        <path d="M2 8c5-4 15-4 20 0M6 12c3-3 9-3 12 0M10 16c2-2 4-2 6 0M12 20l2-2-2-2-2 2 2 2z" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/>103      </svg>104      <!-- Battery -->105      <svg class="icon" viewBox="0 0 28 24">106        <rect x="2" y="6" width="22" height="12" rx="2" ry="2" fill="#666"/>107        <rect x="24" y="9" width="3" height="6" rx="1" fill="#666"/>108        <rect x="4" y="8" width="18" height="8" fill="#fff"/>109      </svg>110      <div style="font-size:34px; color:#666;">100%</div>111    </div>112  </div>113 114  <!-- Header -->115  <div class="header">116    <div class="back-btn">117      <svg class="icon" viewBox="0 0 24 24">118        <path d="M15 5l-7 7 7 7" stroke="#2E8F34" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>119      </svg>120    </div>121    <div class="header-title">Cart</div>122  </div>123 124  <!-- Scrollable Content -->125  <div class="content">126    <!-- Product Card -->127    <div class="card">128      <div class="card-row">129        <div class="card-left">130          <div class="card-title">Silk Original Almond Milk, Half Gallon</div>131          <div class="card-price">$3.49</div>132 133          <div class="stepper">134            <div style="font-weight:800;">−</div>135            <div class="sep"></div>136            <div>1</div>137            <div class="sep"></div>138            <div style="font-weight:800;">+</div>139          </div>140        </div>141        <div class="card-right">142          <div class="img-placeholder">[IMG: Silk Almond Milk Carton]</div>143        </div>144      </div>145      <div class="card-actions">146        <button>Remove</button>147        <button>Move to favorites</button>148      </div>149    </div>150 151    <!-- Apply Coupon Row -->152    <div class="list-row">153      <div class="list-left">154        <svg class="icon" viewBox="0 0 24 24">155          <circle cx="12" cy="12" r="10" stroke="#2E8F34" stroke-width="2" fill="none"/>156          <text x="12" y="16" text-anchor="middle" font-size="12" fill="#2E8F34">%</text>157        </svg>158        <span>Apply Coupon</span>159      </div>160      <svg class="icon" viewBox="0 0 24 24">161        <path d="M9 6l6 6-6 6" stroke="#999" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>162      </svg>163    </div>164 165    <!-- Price Information -->166    <div class="section-title">Price Information <span style="font-size:34px; font-weight:600; color:#666;">(1 Items)</span></div>167    <div class="total-row">168      <div class="label">Total</div>169      <div class="amount">$3.49</div>170    </div>171    <div class="info-row">172      <svg class="icon" viewBox="0 0 24 24">173        <path d="M12 2l9 6v6c0 5-4 8-9 8S3 19 3 14V8l9-6z" fill="#C9CED6"/>174        <circle cx="12" cy="12" r="3" fill="#fff"/>175      </svg>176      <div>100% secure & safe payment process.</div>177    </div>178 179    <!-- Delivery Options -->180    <div class="section-title" style="margin-top:10px;">Choose Delivery Options</div>181    <div class="options">182      <div class="option-card">183        <svg class="icon" viewBox="0 0 24 24" style="width:96px;height:96px;">184          <rect x="2" y="9" width="14" height="8" fill="#111"/>185          <rect x="16" y="11" width="6" height="6" fill="#111"/>186          <circle cx="7" cy="18" r="2" fill="#111"/>187          <circle cx="18" cy="18" r="2" fill="#111"/>188        </svg>189        <div class="option-title">Local Delivery</div>190      </div>191      <div class="option-card">192        <svg class="icon" viewBox="0 0 24 24" style="width:96px;height:96px;">193          <path d="M3 10h18l-2 8H5l-2-8zm2-4h14l2 4H3l2-4z" fill="#111"/>194          <rect x="7" y="14" width="10" height="4" fill="#fff"/>195        </svg>196        <div class="option-title">Store Pickup</div>197      </div>198    </div>199 200    <div class="hint">Enter your zip code into the field below to check if we deliver to your area:</div>201 202    <!-- (Zip field placeholder area could be below the visible area) -->203    <div style="height: 500px;"></div>204  </div>205 206  <!-- Bottom Payment Bar -->207  <div class="bottom-bar">208    <div class="bottom-total">Total Payment: $3.49</div>209    <button class="checkout-btn">Check Out</button>210  </div>211 212</div>213</body>214</html>