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=1080, initial-scale=1.0">6<title>Grocery Note UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #121212;15 font-family: "Roboto", "Segoe UI", Arial, sans-serif;16 color: #E0E0E0;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0;23 left: 0;24 width: 1080px;25 height: 120px;26 padding: 0 40px;27 box-sizing: border-box;28 display: flex;29 align-items: center;30 justify-content: space-between;31 color: #FFFFFF;32 font-size: 40px;33 letter-spacing: 0.5px;34 opacity: 0.95;35 }36 .status-left { display: flex; align-items: center; gap: 20px; }37 .status-right { display: flex; align-items: center; gap: 22px; }38 .status-icon svg { display: block; }39 40 /* Top section */41 .back-btn {42 position: absolute;43 top: 220px;44 left: 40px;45 width: 80px;46 height: 80px;47 display: flex;48 align-items: center;49 justify-content: center;50 opacity: 0.8;51 }52 .top-actions {53 position: absolute;54 top: 320px;55 right: 60px;56 display: flex;57 gap: 64px;58 opacity: 0.6;59 }60 .top-actions svg { width: 64px; height: 64px; }61 62 .title {63 position: absolute;64 top: 380px;65 left: 120px;66 font-size: 96px;67 font-weight: 500;68 color: #BDBDBD;69 }70 71 .list {72 position: absolute;73 top: 550px;74 left: 120px;75 width: 840px;76 color: #8C8C8C;77 font-size: 58px;78 line-height: 88px;79 }80 81 /* Bottom sheet */82 .bottom-sheet {83 position: absolute;84 left: 0;85 bottom: 0;86 width: 1080px;87 height: 920px;88 background: #2A2A2A;89 box-sizing: border-box;90 padding: 40px 40px 140px 40px;91 }92 .sheet-item {93 display: flex;94 align-items: center;95 gap: 34px;96 height: 120px;97 color: #D9D9D9;98 font-size: 54px;99 }100 .sheet-icon {101 width: 72px;102 height: 72px;103 display: flex;104 align-items: center;105 justify-content: center;106 opacity: 0.9;107 }108 .home-indicator {109 position: absolute;110 bottom: 28px;111 left: 50%;112 transform: translateX(-50%);113 width: 280px;114 height: 12px;115 border-radius: 6px;116 background: #FFFFFF;117 opacity: 0.85;118 }119</style>120</head>121<body>122<div id="render-target">123 124 <!-- Status Bar -->125 <div class="status-bar">126 <div class="status-left">127 <div>8:01</div>128 </div>129 <div class="status-right">130 <!-- WiFi -->131 <div class="status-icon">132 <svg width="42" height="42" viewBox="0 0 42 42">133 <path d="M6 15c6-6 24-6 30 0" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/>134 <path d="M11 21c4-4 16-4 20 0" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/>135 <circle cx="21" cy="28" r="3.5" fill="#fff"/>136 </svg>137 </div>138 <!-- Signal (simplified) -->139 <div class="status-icon">140 <svg width="42" height="42" viewBox="0 0 42 42">141 <rect x="5" y="24" width="6" height="12" fill="#fff"/>142 <rect x="15" y="20" width="6" height="16" fill="#fff" opacity="0.85"/>143 <rect x="25" y="14" width="6" height="22" fill="#fff" opacity="0.7"/>144 <rect x="35" y="8" width="6" height="28" fill="#fff" opacity="0.55"/>145 </svg>146 </div>147 <!-- Battery -->148 <div class="status-icon">149 <svg width="70" height="42" viewBox="0 0 70 42">150 <rect x="2" y="8" width="58" height="26" rx="5" stroke="#fff" stroke-width="3" fill="none"/>151 <rect x="5" y="11" width="52" height="20" rx="3" fill="#fff"/>152 <rect x="62" y="15" width="6" height="12" rx="2" fill="#fff"/>153 </svg>154 </div>155 <div>100%</div>156 </div>157 </div>158 159 <!-- Back Arrow -->160 <div class="back-btn">161 <svg width="72" height="72" viewBox="0 0 72 72">162 <path d="M44 16 L24 36 L44 56" stroke="#BDBDBD" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>163 </svg>164 </div>165 166 <!-- Title -->167 <div class="title">Grocery</div>168 169 <!-- Top Right Actions -->170 <div class="top-actions">171 <!-- Pin -->172 <svg viewBox="0 0 64 64">173 <path d="M24 8 l20 14 -10 6 8 16 -6 4 -8-16 -10 6 z" stroke="#BDBDBD" stroke-width="3" fill="none" stroke-linejoin="round"/>174 </svg>175 <!-- Bell -->176 <svg viewBox="0 0 64 64">177 <path d="M32 10 c10 0 16 8 16 18 v10 l6 8 H10 l6-8 V28 c0-10 6-18 16-18z" stroke="#BDBDBD" stroke-width="3" fill="none" stroke-linejoin="round"/>178 <circle cx="32" cy="54" r="4" fill="#BDBDBD"/>179 </svg>180 <!-- Download/Archive -->181 <svg viewBox="0 0 64 64">182 <rect x="10" y="36" width="44" height="18" rx="3" stroke="#BDBDBD" stroke-width="3" fill="none"/>183 <path d="M32 10 v20" stroke="#BDBDBD" stroke-width="3" stroke-linecap="round"/>184 <path d="M24 24 l8 8 8-8" stroke="#BDBDBD" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>185 </svg>186 </div>187 188 <!-- Grocery List -->189 <div class="list">190 <div>Strawberry</div>191 <div>Potatoes</div>192 <div>Rice</div>193 <div>Tea</div>194 <div>Milk</div>195 <div>Flour</div>196 <div>Sugar</div>197 </div>198 199 <!-- Bottom Sheet -->200 <div class="bottom-sheet">201 <div class="sheet-item">202 <div class="sheet-icon">203 <svg width="72" height="72" viewBox="0 0 72 72">204 <rect x="20" y="26" width="32" height="30" rx="4" stroke="#DADADA" stroke-width="4" fill="none"/>205 <rect x="26" y="20" width="20" height="6" rx="3" fill="#DADADA"/>206 </svg>207 </div>208 <div>Delete</div>209 </div>210 211 <div class="sheet-item">212 <div class="sheet-icon">213 <svg width="72" height="72" viewBox="0 0 72 72">214 <rect x="16" y="20" width="28" height="32" rx="4" stroke="#DADADA" stroke-width="4" fill="none"/>215 <rect x="28" y="26" width="28" height="32" rx="4" fill="none" stroke="#DADADA" stroke-width="4"/>216 </svg>217 </div>218 <div>Make a copy</div>219 </div>220 221 <div class="sheet-item">222 <div class="sheet-icon">223 <svg width="72" height="72" viewBox="0 0 72 72">224 <circle cx="18" cy="48" r="6" fill="#DADADA"/>225 <circle cx="36" cy="26" r="6" fill="#DADADA"/>226 <circle cx="54" cy="48" r="6" fill="#DADADA"/>227 <path d="M20 46 L34 28 L52 46" stroke="#DADADA" stroke-width="4" fill="none" stroke-linecap="round"/>228 </svg>229 </div>230 <div>Send</div>231 </div>232 233 <div class="sheet-item">234 <div class="sheet-icon">235 <svg width="72" height="72" viewBox="0 0 72 72">236 <circle cx="30" cy="28" r="10" stroke="#DADADA" stroke-width="4" fill="none"/>237 <path d="M18 54 c4-8 20-8 24 0" stroke="#DADADA" stroke-width="4" fill="none" stroke-linecap="round"/>238 <path d="M50 26 v12" stroke="#DADADA" stroke-width="4"/>239 <path d="M44 32 h12" stroke="#DADADA" stroke-width="4"/>240 </svg>241 </div>242 <div>Collaborator</div>243 </div>244 245 <div class="sheet-item">246 <div class="sheet-icon">247 <svg width="72" height="72" viewBox="0 0 72 72">248 <path d="M20 24 h22 l10 10 -10 10 H20 z" stroke="#DADADA" stroke-width="4" fill="none" stroke-linejoin="round"/>249 <circle cx="26" cy="34" r="3" fill="#DADADA"/>250 </svg>251 </div>252 <div>Labels</div>253 </div>254 255 <div class="sheet-item">256 <div class="sheet-icon">257 <svg width="72" height="72" viewBox="0 0 72 72">258 <circle cx="36" cy="36" r="26" stroke="#DADADA" stroke-width="4" fill="none"/>259 <path d="M36 24 c6 0 10 4 10 8 0 4-3 6-6 7 -3 1 -4 2 -4 6" stroke="#DADADA" stroke-width="4" fill="none" stroke-linecap="round"/>260 <circle cx="36" cy="50" r="3" fill="#DADADA"/>261 </svg>262 </div>263 <div>Help & feedback</div>264 </div>265 </div>266 267 <!-- Home indicator -->268 <div class="home-indicator"></div>269 270</div>271</body>272</html>