GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Shopping List UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #0F0F0F;14 color: #FFFFFF;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 110px;24 background: #3A3A3A;25 display: flex;26 align-items: center;27 padding: 0 36px;28 box-sizing: border-box;29 color: #EAEAEA;30 font-size: 36px;31 letter-spacing: 0.5px;32 }33 .status-left { display: flex; align-items: center; gap: 24px; }34 .status-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }35 36 /* App bar */37 .app-bar {38 position: absolute;39 top: 110px;40 left: 0;41 width: 1080px;42 height: 170px;43 background: #3A3A3A;44 box-sizing: border-box;45 padding: 28px 32px;46 display: flex;47 align-items: center;48 gap: 22px;49 }50 .app-title {51 font-size: 72px;52 font-weight: 700;53 margin-right: auto;54 letter-spacing: 0.5px;55 }56 .app-icon {57 width: 72px;58 height: 72px;59 display: inline-flex;60 justify-content: center;61 align-items: center;62 border-radius: 12px;63 color: #EDEDED;64 }65 .app-icon svg { width: 56px; height: 56px; fill: none; stroke: #EDEDED; stroke-width: 6; }66 67 /* List area */68 .list-area {69 position: absolute;70 top: 280px;71 left: 0;72 width: 1080px;73 height: 2120px;74 box-sizing: border-box;75 padding: 28px;76 }77 .task-card {78 width: 100%;79 background: #1B1B1B;80 border-radius: 36px;81 padding: 34px 40px;82 margin-bottom: 34px;83 display: flex;84 align-items: flex-start;85 box-shadow: 0 2px 0 rgba(255,255,255,0.02) inset;86 }87 .task-check {88 width: 90px;89 height: 90px;90 border-radius: 45px;91 border: 6px solid #7C7C7C;92 margin-right: 28px;93 flex: 0 0 auto;94 box-sizing: border-box;95 background: #232323;96 }97 .task-content { flex: 1; }98 .task-title {99 font-size: 54px;100 font-weight: 800;101 color: #FFFFFF;102 line-height: 1.1;103 margin-top: 8px;104 }105 .task-sub {106 margin-top: 22px;107 display: flex;108 align-items: center;109 gap: 18px;110 color: #CFCFCF;111 font-size: 36px;112 }113 .sub-icon svg { width: 44px; height: 44px; stroke: #CFCFCF; fill: none; stroke-width: 6; }114 115 /* Floating Action Button */116 .fab {117 position: absolute;118 right: 48px;119 bottom: 120px;120 width: 150px;121 height: 150px;122 border-radius: 75px;123 background: #F3B53E;124 box-shadow: 0 14px 32px rgba(0,0,0,0.55);125 display: flex;126 justify-content: center;127 align-items: center;128 }129 .fab svg { width: 74px; height: 74px; fill: none; stroke: #1B1B1B; stroke-width: 12; }130 131 /* Utility small dots */132 .divider-dot {133 width: 8px;134 height: 8px;135 background: #BFBFBF;136 border-radius: 50%;137 display: inline-block;138 margin: 0 8px;139 opacity: 0.8;140 }141</style>142</head>143<body>144<div id="render-target">145 146 <!-- Status Bar -->147 <div class="status-bar">148 <div class="status-left">149 <div>12:15</div>150 <div>☁️ 88°</div>151 <div>△</div>152 <div>en</div>153 <div>•</div>154 </div>155 <div class="status-right">156 <div>📶</div>157 <div>🔋</div>158 </div>159 </div>160 161 <!-- App Bar -->162 <div class="app-bar">163 <!-- Hamburger -->164 <div class="app-icon">165 <svg viewBox="0 0 24 24">166 <path d="M3 6h18M3 12h18M3 18h18"></path>167 </svg>168 </div>169 170 <div class="app-title">Shopping</div>171 172 <!-- Search -->173 <div class="app-icon">174 <svg viewBox="0 0 24 24">175 <circle cx="10.5" cy="10.5" r="6.5"></circle>176 <path d="M16 16l5 5"></path>177 </svg>178 </div>179 180 <!-- Sort -->181 <div class="app-icon">182 <svg viewBox="0 0 24 24">183 <path d="M6 4v16M6 20l-3-3M6 20l3-3"></path>184 <path d="M12 7h9M12 12h7M12 17h5"></path>185 </svg>186 </div>187 188 <!-- Check mark icon -->189 <div class="app-icon">190 <svg viewBox="0 0 24 24">191 <path d="M4 12l6 6L20 6"></path>192 </svg>193 </div>194 195 <!-- More (kebab) -->196 <div class="app-icon">197 <svg viewBox="0 0 24 24">198 <circle cx="12" cy="5" r="2"></circle>199 <circle cx="12" cy="12" r="2"></circle>200 <circle cx="12" cy="19" r="2"></circle>201 </svg>202 </div>203 </div>204 205 <!-- List Area -->206 <div class="list-area">207 <!-- Card 1 -->208 <div class="task-card">209 <div class="task-check"></div>210 <div class="task-content">211 <div class="task-title">Buy New Balance Hiking shoes</div>212 <div class="task-sub">213 <span class="sub-icon">214 <svg viewBox="0 0 24 24">215 <rect x="3" y="4" width="18" height="17" rx="2"></rect>216 <path d="M7 2v4M17 2v4"></path>217 <path d="M7 11h10"></path>218 </svg>219 </span>220 <span>Sa, Dec 23 02:00 PM</span>221 <span class="divider-dot"></span>222 <span class="sub-icon">223 <svg viewBox="0 0 24 24">224 <path d="M12 3a9 9 0 1 0 9 9"></path>225 <path d="M12 7v6l4 2"></path>226 </svg>227 </span>228 </div>229 </div>230 </div>231 232 <!-- Card 2 -->233 <div class="task-card">234 <div class="task-check"></div>235 <div class="task-content">236 <div class="task-title">Buy groceries</div>237 </div>238 </div>239 240 <!-- Card 3 -->241 <div class="task-card">242 <div class="task-check"></div>243 <div class="task-content">244 <div class="task-title">Buy Milk and Chicken</div>245 </div>246 </div>247 </div>248 249 <!-- Floating Action Button -->250 <div class="fab">251 <svg viewBox="0 0 24 24">252 <path d="M12 5v14M5 12h14"></path>253 </svg>254 </div>255 256</div>257</body>258</html>