GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1440, initial-scale=1.0">6<title>My 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, Helvetica, Arial, sans-serif;13 }14 #render-target {15 width: 1440px;16 height: 3120px;17 position: relative;18 overflow: hidden;19 background: #FFFFFF;20 }21 22 /* Top App Bar */23 .app-bar {24 position: absolute;25 top: 0;26 left: 0;27 width: 1440px;28 height: 720px;29 background: #2D6F96;30 color: #ffffff;31 }32 .status-row {33 position: absolute;34 top: 36px;35 left: 40px;36 right: 40px;37 height: 80px;38 display: flex;39 align-items: center;40 justify-content: space-between;41 opacity: 0.95;42 }43 .status-left {44 font-size: 54px;45 font-weight: 600;46 letter-spacing: 1px;47 }48 .status-right {49 display: flex;50 align-items: center;51 gap: 40px;52 }53 .header-row {54 position: absolute;55 top: 180px;56 left: 40px;57 right: 40px;58 height: 120px;59 display: flex;60 align-items: center;61 gap: 40px;62 }63 .header-title {64 font-size: 88px;65 font-weight: 700;66 letter-spacing: 0.5px;67 }68 .header-actions {69 margin-left: auto;70 display: flex;71 align-items: center;72 gap: 60px;73 }74 .icon-btn {75 width: 80px;76 height: 80px;77 }78 79 /* Location bar */80 .location-bar {81 position: absolute;82 top: 720px;83 left: 0;84 width: 1440px;85 height: 180px;86 background: #E7F1F6;87 border-top: 1px solid rgba(0,0,0,0.06);88 border-bottom: 1px solid rgba(0,0,0,0.06);89 display: flex;90 align-items: center;91 padding: 0 60px;92 box-sizing: border-box;93 color: #37474F;94 }95 .loc-row {96 display: flex;97 align-items: center;98 gap: 36px;99 font-size: 56px;100 font-weight: 600;101 }102 .chevron {103 margin-left: 24px;104 }105 106 /* Main content area (empty cart area) */107 .content {108 position: absolute;109 top: 900px;110 left: 0;111 width: 1440px;112 height: 2060px;113 background: #FFFFFF;114 }115 116 /* Bottom system bar */117 .bottom-bar {118 position: absolute;119 bottom: 0;120 left: 0;121 width: 1440px;122 height: 160px;123 background: #000000;124 }125 .home-pill {126 position: absolute;127 top: 52px;128 left: 50%;129 transform: translateX(-50%);130 width: 420px;131 height: 24px;132 background: #DDDDDD;133 border-radius: 16px;134 }135 136 /* Helper: neutral icon color */137 .icon-white path, .icon-white circle, .icon-white rect, .icon-white line {138 stroke: #FFFFFF;139 fill: none;140 }141</style>142</head>143<body>144<div id="render-target">145 146 <!-- App Bar -->147 <div class="app-bar">148 149 <!-- Status Row -->150 <div class="status-row">151 <div class="status-left">9:51</div>152 <div class="status-right">153 <!-- simple search icon (small) -->154 <svg class="icon-btn icon-white" viewBox="0 0 48 48">155 <circle cx="20" cy="20" r="12" stroke-width="4"></circle>156 <line x1="32" y1="32" x2="44" y2="44" stroke-width="4" stroke-linecap="round"></line>157 </svg>158 <!-- warning triangle -->159 <svg class="icon-btn icon-white" viewBox="0 0 48 48">160 <path d="M4 42 L24 6 L44 42 Z" stroke-width="4" fill="none"></path>161 <line x1="24" y1="18" x2="24" y2="30" stroke-width="4" stroke-linecap="round"></line>162 <circle cx="24" cy="36" r="2" stroke-width="4" fill="#FFFFFF"></circle>163 </svg>164 <!-- wifi -->165 <svg class="icon-btn icon-white" viewBox="0 0 48 48">166 <path d="M6 18 C18 8, 30 8, 42 18" stroke-width="4" stroke-linecap="round"></path>167 <path d="M12 26 C20 20, 28 20, 36 26" stroke-width="4" stroke-linecap="round"></path>168 <circle cx="24" cy="34" r="3" fill="#FFFFFF"></circle>169 </svg>170 <!-- battery -->171 <svg class="icon-btn icon-white" viewBox="0 0 60 48">172 <rect x="6" y="10" width="40" height="28" rx="4" ry="4" stroke-width="4"></rect>173 <rect x="48" y="18" width="6" height="12" rx="2" ry="2" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2"></rect>174 <rect x="10" y="14" width="26" height="20" fill="#FFFFFF"></rect>175 </svg>176 </div>177 </div>178 179 <!-- Title Row -->180 <div class="header-row">181 <!-- Back arrow -->182 <svg class="icon-btn" viewBox="0 0 48 48">183 <path d="M30 8 L16 24 L30 40" stroke="#FFFFFF" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>184 </svg>185 186 <div class="header-title">My Cart</div>187 188 <div class="header-actions">189 <!-- Search icon -->190 <svg class="icon-btn icon-white" viewBox="0 0 64 64">191 <circle cx="28" cy="28" r="16" stroke-width="6"></circle>192 <line x1="44" y1="44" x2="60" y2="60" stroke-width="6" stroke-linecap="round"></line>193 </svg>194 <!-- Heart icon -->195 <svg class="icon-btn" viewBox="0 0 64 64">196 <path d="M32 56 C32 56, 10 42, 10 26 C10 18, 16 12, 24 12 C28 12, 32 14, 32 18 C32 14, 36 12, 40 12 C48 12, 54 18, 54 26 C54 42, 32 56, 32 56 Z" fill="#FFFFFF"></path>197 </svg>198 </div>199 </div>200 201 </div>202 203 <!-- Location Bar -->204 <div class="location-bar">205 <div class="loc-row">206 <!-- Location pin -->207 <svg width="64" height="64" viewBox="0 0 48 48">208 <path d="M24 4 C34 4, 42 12, 42 22 C42 32, 24 44, 24 44 C24 44, 6 32, 6 22 C6 12, 14 4, 24 4 Z" fill="#546E7A"></path>209 <circle cx="24" cy="22" r="6" fill="#FFFFFF"></circle>210 </svg>211 <div>Gurgaon 122003</div>212 <!-- Chevron down -->213 <svg class="chevron" width="40" height="40" viewBox="0 0 48 48">214 <path d="M10 18 L24 32 L38 18" stroke="#546E7A" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>215 </svg>216 </div>217 </div>218 219 <!-- Content Area (empty cart) -->220 <div class="content"></div>221 222 <!-- Bottom System Bar -->223 <div class="bottom-bar">224 <div class="home-pill"></div>225 </div>226 227</div>228</body>229</html>