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>New Gardening Tools - Mock UI</title>7<style>8 body { margin:0; padding:0; background:transparent; }9 #render-target {10 width:1080px; height:2400px;11 position:relative; overflow:hidden;12 background:#121212; color:#E0E0E0;13 font-family: Arial, Helvetica, sans-serif;14 }15 16 /* Status bar */17 .status-bar {18 position:absolute; top:0; left:0; width:100%; height:120px;19 color:#DCDCDC; font-weight:600;20 }21 .status-content { display:flex; align-items:center; justify-content:space-between; padding:0 36px; height:100%; }22 .status-icons { display:flex; gap:22px; align-items:center; }23 .dot { width:10px; height:10px; background:#DCDCDC; border-radius:50%; opacity:.8; }24 25 /* Header and title */26 .header {27 position:absolute; top:128px; left:0; width:100%; height:88px; display:flex; align-items:center;28 padding:0 28px;29 }30 .title {31 position:absolute; top:226px; left:64px; right:64px;32 font-size:58px; line-height:64px; font-weight:500; color:#E6E6E6;33 }34 .title-actions {35 position:absolute; top:236px; right:40px; display:flex; gap:26px; align-items:center;36 }37 38 /* List */39 .list {40 position:absolute; top:420px; left:64px; right:64px;41 }42 .list-row {43 display:flex; align-items:center; gap:28px; height:92px;44 }45 .drag-icon svg circle { fill:#9AA0A6; }46 .checkbox { width:42px; height:42px; border:2px solid #9AA0A6; border-radius:6px; }47 .row-label { font-size:40px; color:#D5D5D5; }48 .row-input {49 flex:1; max-width:520px; font-size:40px; color:#EAEAEA; border:none; outline:none; background:transparent;50 border-bottom:2px solid #2A2A2A; padding:8px 4px;51 }52 .clear-btn { margin-left:auto; }53 .add-row { color:#B0BEC5; font-size:38px; display:flex; align-items:center; gap:24px; margin-top:12px; }54 .plus-circle {55 width:44px; height:44px; border-radius:50%; border:2px solid #B0BEC5; display:flex; justify-content:center; align-items:center;56 }57 58 /* Lower tools row */59 .tools {60 position:absolute; top:1120px; left:36px; right:36px; height:88px;61 display:flex; align-items:center; gap:68px; color:#C7C7C7;62 }63 .tool { display:flex; align-items:center; gap:10px; font-size:34px; }64 .kebab-vertical { display:flex; flex-direction:column; gap:6px; justify-content:center; align-items:center; }65 .kebab-vertical .dot { width:10px; height:10px; background:#C7C7C7; }66 67 /* Suggestions bar above keyboard */68 .suggestions {69 position:absolute; top:1310px; left:0; right:0; height:120px;70 background:#1A1A1A; display:flex; align-items:center; padding:0 24px; gap:22px; color:#E0E0E0;71 border-top:1px solid #282828; border-bottom:1px solid #282828;72 }73 .pill {74 padding:18px 32px; background:#2A2A2A; border-radius:28px; font-size:36px; color:#E0E0E0;75 }76 .suggestions .spacer { flex:1; }77 78 /* Keyboard */79 .keyboard {80 position:absolute; bottom:64px; left:0; right:0; height:940px; background:#181818;81 padding:24px 24px 18px 24px;82 }83 .key-row { display:flex; justify-content:center; gap:16px; margin-bottom:24px; }84 .key {85 min-width:84px; height:120px; background:#2C2C2C; border-radius:22px; display:flex; justify-content:center; align-items:center;86 color:#E0E0E0; font-size:46px; box-shadow: inset 0 0 0 1px #3A3A3A;87 }88 .key.small { min-width:120px; }89 .key.wide { min-width:280px; }90 .key.space { flex:1; min-width:420px; }91 .key.special { background:#37474F; color:#E9F0FF; }92 .keyboard .bottom-row { display:flex; align-items:center; gap:16px; padding:0 12px; }93 .gesture-bar {94 position:absolute; bottom:20px; left:50%; transform:translateX(-50%);95 width:240px; height:8px; background:#D0D0D0; border-radius:6px; opacity:.85;96 }97 98 /* Icon base */99 svg { display:block; }100 .icon-btn { width:56px; height:56px; display:flex; justify-content:center; align-items:center; }101 .icon-24 { width:48px; height:48px; }102 .muted { color:#9AA0A6; }103</style>104</head>105<body>106<div id="render-target">107 108 <!-- Status Bar -->109 <div class="status-bar">110 <div class="status-content">111 <div style="font-size:40px;">9:23</div>112 <div class="status-icons">113 <div class="dot"></div>114 <div class="dot"></div>115 <div class="dot"></div>116 <div class="dot"></div>117 <!-- Wi-Fi icon -->118 <svg class="icon-24" viewBox="0 0 48 48">119 <path d="M4 16c10-10 30-10 40 0" stroke="#DCDCDC" stroke-width="4" fill="none" stroke-linecap="round"/>120 <path d="M10 24c7-7 21-7 28 0" stroke="#DCDCDC" stroke-width="4" fill="none" stroke-linecap="round"/>121 <path d="M18 31c4-4 8-4 12 0" stroke="#DCDCDC" stroke-width="4" fill="none" stroke-linecap="round"/>122 <circle cx="24" cy="37" r="3.5" fill="#DCDCDC"/>123 </svg>124 <!-- Battery -->125 <svg class="icon-24" viewBox="0 0 48 48">126 <rect x="4" y="12" width="36" height="24" rx="4" stroke="#DCDCDC" stroke-width="3" fill="none"/>127 <rect x="8" y="16" width="18" height="16" fill="#DCDCDC"/>128 <rect x="42" y="18" width="4" height="12" rx="2" fill="#DCDCDC"/>129 </svg>130 </div>131 </div>132 </div>133 134 <!-- Header -->135 <div class="header">136 <!-- Back arrow -->137 <div class="icon-btn" style="margin-left:8px;">138 <svg viewBox="0 0 48 48" width="48" height="48">139 <path d="M26 10 L12 24 L26 38" stroke="#E0E0E0" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>140 </svg>141 </div>142 143 <!-- Right header actions -->144 <div style="margin-left:auto; display:flex; gap:26px; margin-right:24px;">145 <!-- Bell -->146 <svg class="icon-24" viewBox="0 0 48 48">147 <path d="M24 8c-6 0-10 6-10 12v8l-4 4h28l-4-4v-8c0-6-4-12-10-12z" stroke="#C7C7C7" stroke-width="3" fill="none"/>148 <circle cx="24" cy="40" r="3" fill="#C7C7C7"/>149 </svg>150 <!-- Lock -->151 <svg class="icon-24" viewBox="0 0 48 48">152 <rect x="10" y="20" width="28" height="20" rx="3" stroke="#C7C7C7" stroke-width="3" fill="none"/>153 <path d="M16 20v-4c0-4 4-8 8-8s8 4 8 8v4" stroke="#C7C7C7" stroke-width="3" fill="none"/>154 </svg>155 <!-- Download -->156 <svg class="icon-24" viewBox="0 0 48 48">157 <path d="M24 8v18" stroke="#C7C7C7" stroke-width="4" stroke-linecap="round"/>158 <path d="M16 22l8 8 8-8" stroke="#C7C7C7" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>159 <rect x="10" y="36" width="28" height="4" rx="2" fill="#C7C7C7"/>160 </svg>161 </div>162 </div>163 164 <!-- Title -->165 <div class="title">New Gardening Tools</div>166 <div class="title-actions">167 <!-- Vertical kebab -->168 <div class="kebab-vertical">169 <div class="dot"></div>170 <div class="dot"></div>171 <div class="dot"></div>172 </div>173 </div>174 175 <!-- List -->176 <div class="list">177 <!-- Row: Axe -->178 <div class="list-row">179 <div class="drag-icon">180 <svg width="40" height="40" viewBox="0 0 40 40">181 <circle cx="8" cy="8" r="3"></circle><circle cx="20" cy="8" r="3"></circle><circle cx="32" cy="8" r="3"></circle>182 <circle cx="8" cy="20" r="3"></circle><circle cx="20" cy="20" r="3"></circle><circle cx="32" cy="20" r="3"></circle>183 <circle cx="8" cy="32" r="3"></circle><circle cx="20" cy="32" r="3"></circle><circle cx="32" cy="32" r="3"></circle>184 </svg>185 </div>186 <div class="checkbox"></div>187 <div class="row-label">Axe</div>188 </div>189 190 <!-- Row: Sickle -->191 <div class="list-row">192 <div class="drag-icon">193 <svg width="40" height="40" viewBox="0 0 40 40">194 <circle cx="8" cy="8" r="3"></circle><circle cx="20" cy="8" r="3"></circle><circle cx="32" cy="8" r="3"></circle>195 <circle cx="8" cy="20" r="3"></circle><circle cx="20" cy="20" r="3"></circle><circle cx="32" cy="20" r="3"></circle>196 <circle cx="8" cy="32" r="3"></circle><circle cx="20" cy="32" r="3"></circle><circle cx="32" cy="32" r="3"></circle>197 </svg>198 </div>199 <div class="checkbox"></div>200 <div class="row-label">Sickle</div>201 </div>202 203 <!-- Row: Spade (editing) -->204 <div class="list-row">205 <div class="drag-icon">206 <svg width="40" height="40" viewBox="0 0 40 40">207 <circle cx="8" cy="8" r="3"></circle><circle cx="20" cy="8" r="3"></circle><circle cx="32" cy="8" r="3"></circle>208 <circle cx="8" cy="20" r="3"></circle><circle cx="20" cy="20" r="3"></circle><circle cx="32" cy="20" r="3"></circle>209 <circle cx="8" cy="32" r="3"></circle><circle cx="20" cy="32" r="3"></circle><circle cx="32" cy="32" r="3"></circle>210 </svg>211 </div>212 <div class="checkbox"></div>213 <input class="row-input" value="Spade">214 <div class="clear-btn icon-btn">215 <svg viewBox="0 0 48 48" width="48" height="48">216 <path d="M14 14 L34 34 M34 14 L14 34" stroke="#B0BEC5" stroke-width="4" stroke-linecap="round"/>217 </svg>218 </div>219 </div>220 221 <!-- Add list item row -->222 <div class="add-row">223 <div class="plus-circle">224 <svg viewBox="0 0 48 48" width="32" height="32">225 <path d="M24 12v24M12 24h24" stroke="#B0BEC5" stroke-width="4" stroke-linecap="round"/>226 </svg>227 </div>228 <span>List item</span>229 </div>230 </div>231 232 <!-- Lower tools row -->233 <div class="tools">234 <div class="tool">235 <svg viewBox="0 0 48 48" width="48" height="48">236 <rect x="8" y="8" width="32" height="32" rx="6" stroke="#C7C7C7" stroke-width="3" fill="none"/>237 <path d="M16 24h16M24 16v16" stroke="#C7C7C7" stroke-width="3" stroke-linecap="round"/>238 </svg>239 </div>240 <div class="tool">241 <!-- Palette -->242 <svg viewBox="0 0 48 48" width="48" height="48">243 <circle cx="24" cy="24" r="18" stroke="#C7C7C7" stroke-width="3" fill="none"/>244 <circle cx="16" cy="20" r="3" fill="#C7C7C7"/>245 <circle cx="24" cy="16" r="3" fill="#C7C7C7"/>246 <circle cx="32" cy="20" r="3" fill="#C7C7C7"/>247 <path d="M28 34c-5 0-6-4-2-6" stroke="#C7C7C7" stroke-width="3" fill="none" stroke-linecap="round"/>248 </svg>249 </div>250 <div class="tool">251 <span style="font-size:44px; font-weight:700;">A</span>252 </div>253 <div class="tool">254 <!-- Undo -->255 <svg viewBox="0 0 48 48" width="48" height="48">256 <path d="M18 18l-8 8 8 8" stroke="#C7C7C7" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>257 <path d="M18 34h10c6 0 10-4 10-10" stroke="#C7C7C7" stroke-width="3" fill="none" stroke-linecap="round"/>258 </svg>259 </div>260 <div class="tool">261 <!-- Redo -->262 <svg viewBox="0 0 48 48" width="48" height="48">263 <path d="M30 18l8 8-8 8" stroke="#C7C7C7" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>264 <path d="M30 34H20c-6 0-10-4-10-10" stroke="#C7C7C7" stroke-width="3" fill="none" stroke-linecap="round"/>265 </svg>266 </div>267 <div class="tool">268 <div class="kebab-vertical">269 <div class="dot"></div><div class="dot"></div><div class="dot"></div>270 </div>271 </div>272 </div>273 274 <!-- Suggestions Bar -->275 <div class="suggestions">276 <!-- Keyboard icon grid -->277 <svg viewBox="0 0 48 48" width="60" height="60">278 <rect x="6" y="10" width="36" height="28" rx="4" stroke="#E0E0E0" stroke-width="3" fill="none"/>279 <circle cx="14" cy="18" r="2.3" fill="#E0E0E0"/><circle cx="22" cy="18" r="2.3" fill="#E0E0E0"/><circle cx="30" cy="18" r="2.3" fill="#E0E0E0"/>280 <circle cx="14" cy="26" r="2.3" fill="#E0E0E0"/><circle cx="22" cy="26" r="2.3" fill="#E0E0E0"/><circle cx="30" cy="26" r="2.3" fill="#E0E0E0"/>281 </svg>282 283 <div class="pill">Spade</div>284 <div class="pill muted" style="opacity:.9;">Spades</div>285 <div class="pill muted" style="opacity:.9;">Apade</div>286 <div class="spacer"></div>287 288 <!-- Mic -->289 <svg viewBox="0 0 48 48" width="48" height="48">290 <rect x="18" y="10" width="12" height="20" rx="6" stroke="#E0E0E0" stroke-width="3" fill="none"/>291 <path d="M12 24c0 8 6 12 12 12s12-4 12-12M24 36v6" stroke="#E0E0E0" stroke-width="3" fill="none" stroke-linecap="round"/>292 </svg>293 </div>294 295 <!-- Keyboard -->296 <div class="keyboard">297 <!-- Row 1 -->298 <div class="key-row">299 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div>300 <div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>301 </div>302 <!-- Row 2 -->303 <div class="key-row">304 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>305 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>306 </div>307 <!-- Row 3 -->308 <div class="key-row">309 <div class="key small">310 <!-- Shift -->311 <svg viewBox="0 0 48 48" width="42" height="42">312 <path d="M24 10l12 12h-8v14h-8V22h-8z" fill="#E0E0E0"/>313 </svg>314 </div>315 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>316 <div class="key small">317 <!-- Backspace -->318 <svg viewBox="0 0 48 48" width="44" height="44">319 <path d="M18 12l-8 12 8 12h20c2 0 4-2 4-4V16c0-2-2-4-4-4z" stroke="#E0E0E0" stroke-width="3" fill="none"/>320 <path d="M26 18l8 8m0-8l-8 8" stroke="#E0E0E0" stroke-width="3" stroke-linecap="round"/>321 </svg>322 </div>323 </div>324 <!-- Row 4 -->325 <div class="bottom-row">326 <div class="key small muted">?123</div>327 <div class="key small">,</div>328 <div class="key small">🙂</div>329 <div class="key space"> </div>330 <div class="key small">.</div>331 <div class="key small special">332 <!-- Enter -->333 <svg viewBox="0 0 48 48" width="44" height="44">334 <path d="M12 12v10h20" stroke="#E9F0FF" stroke-width="4" fill="none" stroke-linecap="round"/>335 <path d="M26 28l6-6-6-6" stroke="#E9F0FF" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>336 </svg>337 </div>338 </div>339 <div class="gesture-bar"></div>340 </div>341 342</div>343</body>344</html>