GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Grocery List UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #102C30; /* dark teal */14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 height: 120px;22 width: 100%;23 padding: 0 40px;24 color: #E8F1F3;25 display: flex;26 align-items: center;27 justify-content: space-between;28 box-sizing: border-box;29 opacity: 0.9;30 }31 .status-left {32 display: flex;33 align-items: center;34 gap: 28px;35 font-size: 44px;36 letter-spacing: 0.5px;37 }38 .status-icons {39 display: flex;40 align-items: center;41 gap: 16px;42 }43 .status-dot {44 width: 16px;45 height: 16px;46 background: #E8F1F3;47 border-radius: 50%;48 opacity: 0.8;49 }50 51 /* Top action row */52 .top-actions {53 position: absolute;54 top: 150px;55 left: 40px;56 right: 40px;57 height: 80px;58 display: flex;59 align-items: center;60 justify-content: space-between;61 color: #7B8E93;62 }63 .top-right-icons {64 display: flex;65 gap: 44px;66 align-items: center;67 }68 .icon {69 width: 64px;70 height: 64px;71 opacity: 0.85;72 }73 74 /* Title and note */75 .content {76 position: absolute;77 top: 280px;78 left: 56px;79 right: 56px;80 color: #7B8E93;81 }82 .title {83 font-size: 84px;84 font-weight: 600;85 margin-bottom: 24px;86 letter-spacing: 0.5px;87 }88 .subtitle {89 font-size: 40px;90 line-height: 56px;91 max-width: 860px;92 opacity: 0.8;93 }94 95 /* Bottom sheet */96 .bottom-sheet {97 position: absolute;98 bottom: 0;99 left: 0;100 width: 100%;101 height: 880px;102 background: #256E7B; /* teal sheet */103 border-top-left-radius: 0;104 border-top-right-radius: 0;105 box-sizing: border-box;106 padding: 40px 60px;107 color: #DCECEF;108 }109 .menu {110 margin-top: 40px;111 display: flex;112 flex-direction: column;113 gap: 42px;114 }115 .menu-item {116 display: flex;117 align-items: center;118 gap: 34px;119 }120 .menu-item .label {121 font-size: 48px;122 letter-spacing: 0.2px;123 }124 .menu-icon {125 width: 64px;126 height: 64px;127 stroke: #DCECEF;128 fill: none;129 opacity: 0.95;130 }131 132 /* Home indicator */133 .home-indicator {134 position: absolute;135 bottom: 32px;136 left: 50%;137 transform: translateX(-50%);138 width: 360px;139 height: 14px;140 background: #FFFFFF;141 border-radius: 10px;142 opacity: 0.95;143 }144</style>145</head>146<body>147<div id="render-target">148 149 <!-- Status Bar -->150 <div class="status-bar">151 <div class="status-left">152 <div>6:32</div>153 <div class="status-icons">154 <div class="status-dot"></div>155 <div class="status-dot"></div>156 <div class="status-dot"></div>157 <div class="status-dot"></div>158 <div class="status-dot"></div>159 </div>160 </div>161 <div class="status-icons">162 <svg class="icon" viewBox="0 0 24 24">163 <path fill="#E8F1F3" d="M12 3l4 4h-3v7h-2V7H8l4-4zm7 13v4H5v-4h2v2h10v-2h2z"/>164 </svg>165 </div>166 </div>167 168 <!-- Top actions -->169 <div class="top-actions">170 <!-- Back arrow -->171 <svg class="icon" viewBox="0 0 24 24">172 <path fill="#7B8E93" d="M14 7l-5 5 5 5-1.4 1.4L6.2 12l6.4-6.4L14 7z"/>173 </svg>174 175 <div class="top-right-icons">176 <!-- Bell -->177 <svg class="icon" viewBox="0 0 24 24">178 <path fill="#7B8E93" d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6V11c0-3.3-2.7-6-6-6S6 7.7 6 11v5l-2 2h16l-2-2z"/>179 </svg>180 <!-- Bell with dot -->181 <svg class="icon" viewBox="0 0 24 24">182 <circle cx="18.5" cy="6.5" r="2.5" fill="#7B8E93"></circle>183 <path fill="#7B8E93" d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6V11c0-3.3-2.7-6-6-6S6 7.7 6 11v5l-2 2h16l-2-2z"/>184 </svg>185 <!-- Download box -->186 <svg class="icon" viewBox="0 0 24 24">187 <path fill="#7B8E93" d="M5 20h14v-8h-2v6H7v-6H5v8zm7-16l4 4h-3v5h-2V8H8l4-4z"/>188 </svg>189 </div>190 </div>191 192 <!-- Content -->193 <div class="content">194 <div class="title">Grocery List</div>195 <div class="subtitle">Quinoa, dairy products, fruits and vegetables, and lean meatsn</div>196 </div>197 198 <!-- Bottom sheet -->199 <div class="bottom-sheet">200 <div class="menu">201 <div class="menu-item">202 <svg class="menu-icon" viewBox="0 0 24 24">203 <path stroke-width="1.8" d="M7 5h10l-1 14H8L7 5z"></path>204 <path stroke-width="1.8" d="M9 5V4h6v1"></path>205 </svg>206 <div class="label">Delete</div>207 </div>208 209 <div class="menu-item">210 <svg class="menu-icon" viewBox="0 0 24 24">211 <rect x="6" y="7" width="10" height="12" rx="1.5" stroke-width="1.8"></rect>212 <rect x="9" y="5" width="10" height="12" rx="1.5" stroke-width="1.8"></rect>213 </svg>214 <div class="label">Make a copy</div>215 </div>216 217 <div class="menu-item">218 <svg class="menu-icon" viewBox="0 0 24 24">219 <circle cx="6" cy="12" r="2" stroke-width="1.8"></circle>220 <circle cx="18" cy="6" r="2" stroke-width="1.8"></circle>221 <circle cx="18" cy="18" r="2" stroke-width="1.8"></circle>222 <path stroke-width="1.8" d="M7.7 10.9l8.1-4.2M7.7 13.1l8.1 4.2"></path>223 </svg>224 <div class="label">Send</div>225 </div>226 227 <div class="menu-item">228 <svg class="menu-icon" viewBox="0 0 24 24">229 <circle cx="11" cy="10" r="4" stroke-width="1.8"></circle>230 <path stroke-width="1.8" d="M4 20c0-3.3 3.1-6 7-6s7 2.7 7 6"></path>231 <path stroke-width="1.8" d="M17 8h3M18.5 6.5v3"></path>232 </svg>233 <div class="label">Collaborator</div>234 </div>235 236 <div class="menu-item">237 <svg class="menu-icon" viewBox="0 0 24 24">238 <path stroke-width="1.8" d="M4 8l7-3h6l3 3-9 9-7-9z"></path>239 <circle cx="9" cy="9" r="1.6" stroke-width="1.2"></circle>240 </svg>241 <div class="label">Labels</div>242 </div>243 244 <div class="menu-item">245 <svg class="menu-icon" viewBox="0 0 24 24">246 <circle cx="12" cy="12" r="9" stroke-width="1.8"></circle>247 <path stroke-width="1.8" d="M12 8.2c1.7 0 3 .9 3 2.4 0 1.4-1.1 2-2.2 2.4-.8.3-1.4.8-1.4 1.7v.5M12 17.8h0"></path>248 </svg>249 <div class="label">Help & feedback</div>250 </div>251 </div>252 </div>253 254 <!-- Home indicator -->255 <div class="home-indicator"></div>256 257</div>258</body>259</html>