GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Cart UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13    color: #111;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #FFFFFF;21  }22 23  /* Top App Bar */24  .appbar {25    position: absolute;26    top: 0;27    left: 0;28    width: 1080px;29    height: 180px;30    background: #17337A; /* deep navy */31    color: #fff;32    display: flex;33    align-items: center;34    padding: 0 48px;35    box-sizing: border-box;36  }37  .appbar .title {38    font-size: 56px;39    font-weight: 700;40    margin-left: 28px;41    letter-spacing: 0.2px;42  }43 44  /* Main content area (empty cart) */45  .content {46    position: absolute;47    top: 180px;48    left: 0;49    right: 0;50    bottom: 280px; /* space for summary + checkout bar */51    background: #fff;52  }53 54  /* Summary row above checkout */55  .summary {56    position: absolute;57    left: 0;58    right: 0;59    bottom: 160px;60    height: 120px;61    padding: 0 48px;62    box-sizing: border-box;63    display: flex;64    align-items: center;65    justify-content: space-between;66    font-size: 36px;67  }68  .summary .amount {69    font-size: 38px;70  }71  .summary .amount .value {72    color: #1E3F93; /* blue for $0 */73    font-weight: 700;74    margin-left: 12px;75  }76 77  /* Checkout bottom bar */78  .checkout-bar {79    position: absolute;80    left: 0;81    right: 0;82    bottom: 0;83    height: 160px;84    background: #17337A;85    color: #fff;86    display: flex;87    align-items: center;88    justify-content: center;89    gap: 26px;90    padding: 0 40px;91    box-sizing: border-box;92  }93  .checkout-bar .label {94    font-size: 48px;95    font-weight: 600;96    letter-spacing: 0.3px;97  }98 99  /* Icon styles */100  .icon {101    display: inline-block;102  }103</style>104</head>105<body>106<div id="render-target">107  <!-- Top App Bar -->108  <div class="appbar">109    <!-- Back arrow icon -->110    <svg class="icon" width="64" height="64" viewBox="0 0 80 80" aria-hidden="true">111      <path d="M50 15 L25 40 L50 65" stroke="#FFFFFF" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>112    </svg>113    <div class="title">Cart</div>114  </div>115 116  <!-- Empty content area -->117  <div class="content"></div>118 119  <!-- Summary Row -->120  <div class="summary">121    <div>Total 0 items</div>122    <div class="amount">Total HKD <span class="value">$0</span></div>123  </div>124 125  <!-- Checkout Bottom Bar -->126  <div class="checkout-bar">127    <svg class="icon" width="64" height="64" viewBox="0 0 24 24" aria-hidden="true">128      <path d="M3 6h2l3 9h9l2-7H8" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>129      <circle cx="10" cy="19" r="2" fill="#FFFFFF"></circle>130      <circle cx="17" cy="19" r="2" fill="#FFFFFF"></circle>131    </svg>132    <div class="label">Checkout</div>133  </div>134</div>135</body>136</html>