GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Cart Screen</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #ffffff;19  }20 21  /* Status bar */22  .statusbar {23    position: absolute;24    top: 0;25    left: 0;26    width: 1080px;27    height: 120px;28    background: #ffffff;29  }30  .status-time {31    position: absolute;32    left: 32px;33    top: 0;34    height: 120px;35    line-height: 120px;36    font-size: 44px;37    color: #616161;38    letter-spacing: 0.5px;39  }40  .status-icons {41    position: absolute;42    right: 32px;43    top: 0;44    height: 120px;45    display: flex;46    align-items: center;47    gap: 28px;48    color: #616161;49  }50  .status-icons svg {51    width: 42px;52    height: 42px;53    fill: none;54    stroke: #616161;55    stroke-width: 6;56  }57  .battery {58    display: flex;59    align-items: center;60    gap: 12px;61    color: #616161;62    font-size: 38px;63  }64  .battery svg {65    width: 52px;66    height: 32px;67    stroke-width: 6;68  }69 70  /* Header */71  .header {72    position: absolute;73    top: 120px;74    left: 0;75    width: 1080px;76    height: 140px;77    background: #ffffff;78    border-bottom: 1px solid #E5E5E5;79  }80  .header-title {81    position: absolute;82    left: 0;83    right: 0;84    top: 0;85    height: 140px;86    line-height: 140px;87    text-align: center;88    font-size: 64px;89    font-weight: 700;90    color: #2E7D32;91  }92  .back-btn {93    position: absolute;94    left: 36px;95    top: 50%;96    transform: translateY(-50%);97    width: 72px;98    height: 72px;99  }100  .back-btn svg {101    width: 72px;102    height: 72px;103    stroke: #2E7D32;104    stroke-width: 10;105    fill: none;106    stroke-linecap: round;107    stroke-linejoin: round;108  }109 110  /* Content area */111  .content {112    position: absolute;113    top: 260px; /* statusbar + header */114    left: 0;115    width: 1080px;116    height: calc(2400px - 260px - 120px); /* subtract bottom nav */117    background: #F3F3F3;118  }119 120  /* Left scrollbar indicator */121  .scroll-indicator {122    position: absolute;123    left: 24px;124    top: 980px;125    width: 10px;126    height: 280px;127    background: #9E9E9E;128    border-radius: 6px;129  }130 131  /* Spinner */132  .spinner {133    position: absolute;134    left: 50%;135    top: 1200px;136    width: 100px;137    height: 100px;138    transform: translateX(-50%);139    border-radius: 50%;140    border: 12px solid #2E7D32;141    border-top-color: transparent;142    border-right-color: transparent;143  }144 145  /* Bottom navigation bar (system) */146  .bottom-nav {147    position: absolute;148    left: 0;149    bottom: 0;150    width: 1080px;151    height: 120px;152    background: #000000;153  }154</style>155</head>156<body>157<div id="render-target">158  <!-- Status Bar -->159  <div class="statusbar">160    <div class="status-time">10:12</div>161    <div class="status-icons">162      <!-- Do Not Disturb icon -->163      <svg viewBox="0 0 24 24">164        <circle cx="12" cy="12" r="9"></circle>165        <line x1="7" y1="12" x2="17" y2="12"></line>166      </svg>167      <!-- WiFi icon (simplified) -->168      <svg viewBox="0 0 24 24">169        <path d="M3 9c4.5-4 13.5-4 18 0"></path>170        <path d="M6 12c3-2.5 9-2.5 12 0"></path>171        <path d="M9 15c1.5-1 4.5-1 6 0"></path>172        <circle cx="12" cy="18" r="1"></circle>173      </svg>174      <!-- Battery + percentage -->175      <div class="battery">176        <svg viewBox="0 0 28 16">177          <rect x="1" y="1" width="24" height="14" rx="2"></rect>178          <rect x="3" y="3" width="18" height="10" fill="#616161" stroke="none"></rect>179          <rect x="25" y="5" width="2" height="6" rx="1"></rect>180        </svg>181        <span>100%</span>182      </div>183    </div>184  </div>185 186  <!-- Header -->187  <div class="header">188    <div class="back-btn">189      <svg viewBox="0 0 24 24">190        <path d="M15 5l-7 7 7 7"></path>191      </svg>192    </div>193    <div class="header-title">Cart</div>194  </div>195 196  <!-- Content Area -->197  <div class="content">198    <div class="scroll-indicator"></div>199    <div class="spinner"></div>200  </div>201 202  <!-- Bottom Navigation Bar -->203  <div class="bottom-nav"></div>204</div>205</body>206</html>