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;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #1f2022;15 color: #e8e8e8;16 font-family: Roboto, Arial, sans-serif;17 }18 19 /* Status bar */20 .status-bar {21 height: 120px;22 padding: 0 36px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 color: #d9d9d9;27 font-size: 40px;28 letter-spacing: 0.5px;29 }30 .sb-left, .sb-right { display: flex; align-items: center; gap: 22px; }31 .sb-dot { width: 16px; height: 16px; background: #bdbdbd; border-radius: 50%; opacity: 0.7; }32 .sb-icon {33 width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;34 opacity: 0.85;35 }36 .sb-icon svg { width: 44px; height: 44px; fill: none; stroke: #dcdcdc; stroke-width: 5; }37 38 /* Header / toolbar */39 .toolbar {40 height: 120px;41 display: flex;42 align-items: center;43 padding: 0 36px;44 color: #cfcfcf;45 }46 .toolbar-left { display: flex; align-items: center; gap: 24px; }47 .toolbar-right { margin-left: auto; display: flex; align-items: center; gap: 42px; }48 .icon-btn svg { width: 56px; height: 56px; fill: none; stroke: #cfcfcf; stroke-width: 5; }49 .more-vert { width: 16px; height: 64px; display: flex; align-items: center; justify-content: center; }50 .more-vert span { display: inline-block; width: 8px; height: 8px; background: #cfcfcf; border-radius: 50%; margin: 6px 0; }51 52 /* Title */53 .title {54 font-size: 72px;55 line-height: 82px;56 font-weight: 500;57 padding: 24px 36px 0 120px;58 color: #eeeeee;59 display: flex;60 align-items: center;61 }62 .title .more-wrapper { margin-left: auto; margin-right: 36px; }63 64 /* Checklist */65 .list {66 margin-top: 36px;67 padding-left: 120px;68 padding-right: 36px;69 }70 .list-row {71 display: flex;72 align-items: center;73 gap: 32px;74 padding: 26px 0;75 }76 .drag-dots { width: 40px; height: 40px; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 6px; opacity: 0.75; }77 .drag-dots span { width: 8px; height: 8px; background: #b0b0b0; border-radius: 50%; }78 .checkbox {79 width: 56px; height: 56px; border-radius: 8px;80 border: 4px solid #bdbdbd; opacity: 0.85;81 }82 .row-text {83 font-size: 52px; color: #dcdcdc;84 }85 .row-spacer { flex: 1; }86 .close-x svg { width: 56px; height: 56px; stroke: #bdbdbd; stroke-width: 5; }87 88 .add-row {89 display: flex; align-items: center; gap: 26px;90 padding: 36px 0 8px 0;91 color: #a8c0a8;92 }93 .add-plus {94 width: 52px; height: 52px; border-radius: 50%;95 border: 4px solid #a8c0a8; display: flex; align-items: center; justify-content: center;96 }97 .add-plus svg { width: 36px; height: 36px; stroke: #a8c0a8; stroke-width: 6; }98 .add-row span { font-size: 48px; color: #b9c8b9; }99 100 /* Bottom action bar above keyboard */101 .bottom-actions {102 position: absolute; left: 0; right: 0; bottom: 940px;103 height: 120px; display: flex; align-items: center; gap: 56px;104 padding: 0 36px;105 color: #cfcfcf;106 }107 .ba-btn { width: 96px; height: 96px; border-radius: 16px; border: 2px solid #3a3a3a; background: #262729;108 display: flex; align-items: center; justify-content: center; }109 .ba-btn svg { width: 54px; height: 54px; stroke: #cfcfcf; fill: none; stroke-width: 5; }110 111 /* Keyboard */112 .keyboard {113 position: absolute; left: 0; right: 0; bottom: 0;114 height: 940px; background: #202225; border-top: 1px solid #2c2e31;115 padding: 28px 22px 20px;116 }117 .kb-top-row {118 display: flex; align-items: center; gap: 22px; margin-bottom: 24px;119 }120 .kb-top-row .kb-small { width: 92px; height: 92px; border-radius: 24px; background: #2a2c2f; border: 1px solid #3a3c3f; color: #e4e4e4; font-size: 36px; display: flex; align-items: center; justify-content: center; }121 .kb-row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 18px; margin-bottom: 22px; }122 .kb-key {123 height: 120px; border-radius: 22px;124 background: #2a2c2f; border: 1px solid #3a3c3f; color: #efefef;125 font-size: 44px; display: flex; align-items: center; justify-content: center;126 }127 .kb-row-mid { grid-template-columns: repeat(9, 1fr); }128 .kb-row-bottom { grid-template-columns: repeat(8, 1fr); }129 .kb-space {130 flex: 1;131 height: 120px; border-radius: 28px;132 background: #2a2c2f; border: 1px solid #3a3c3f;133 }134 .kb-bottom-controls {135 display: flex; align-items: center; gap: 18px;136 }137 .kb-wide { width: 170px; }138 .kb-emoji { width: 120px; }139 .kb-dot { width: 120px; }140 .kb-return {141 width: 160px; height: 120px; border-radius: 26px;142 background: #cad2f6; color: #1f1f1f; font-weight: 600;143 display: flex; align-items: center; justify-content: center;144 }145 146 /* Home navigation pill */147 .home-pill {148 position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);149 width: 240px; height: 10px; border-radius: 6px; background: #bfbfbf; opacity: 0.6;150 }151</style>152</head>153<body>154<div id="render-target">155 156 <!-- Status bar -->157 <div class="status-bar">158 <div class="sb-left">159 <div>9:23</div>160 <div class="sb-icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/></svg></div>161 <div class="sb-icon"><svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3"/></svg></div>162 <div class="sb-icon"><svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12" rx="3"/></svg></div>163 <div class="sb-dot"></div>164 </div>165 <div class="sb-right">166 <div class="sb-icon">167 <svg viewBox="0 0 24 24">168 <path d="M4 16h16l-6-8-4 5-2-3-4 6z"/>169 </svg>170 </div>171 <div class="sb-icon">172 <svg viewBox="0 0 24 24">173 <rect x="3" y="5" width="18" height="14" rx="2"/>174 <rect x="16" y="9" width="5" height="6" fill="#dcdcdc" stroke="none"/>175 </svg>176 </div>177 </div>178 </div>179 180 <!-- Toolbar -->181 <div class="toolbar">182 <div class="toolbar-left">183 <div class="icon-btn">184 <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></svg>185 </div>186 </div>187 <div class="toolbar-right">188 <div class="icon-btn">189 <svg viewBox="0 0 24 24"><path d="M12 3v18"/><path d="M3 12h18"/></svg>190 </div>191 <div class="icon-btn">192 <svg viewBox="0 0 24 24"><path d="M12 3v4"/><path d="M6 10v6a6 6 0 0012 0v-6"/><circle cx="12" cy="20" r="1"/></svg>193 </div>194 <div class="icon-btn">195 <svg viewBox="0 0 24 24"><rect x="7" y="8" width="10" height="9" rx="2"/><path d="M9 8V6a3 3 0 016 0v2"/></svg>196 </div>197 <div class="icon-btn">198 <svg viewBox="0 0 24 24"><path d="M6 7h12"/><path d="M6 12h12"/><path d="M6 17h12"/></svg>199 </div>200 </div>201 </div>202 203 <!-- Title -->204 <div class="title">205 <div>New Gardening Tools</div>206 <div class="more-wrapper">207 <div class="more-vert">208 <span></span><span></span><span></span>209 </div>210 </div>211 </div>212 213 <!-- Checklist -->214 <div class="list">215 <div class="list-row">216 <div class="drag-dots">217 <span></span><span></span><span></span>218 <span></span><span></span><span></span>219 </div>220 <div class="checkbox"></div>221 <div class="row-text">Axe</div>222 </div>223 224 <div class="list-row">225 <div class="drag-dots">226 <span></span><span></span><span></span>227 <span></span><span></span><span></span>228 </div>229 <div class="checkbox"></div>230 <div class="row-text">Sickle</div>231 </div>232 233 <div class="list-row">234 <div class="drag-dots">235 <span></span><span></span><span></span>236 <span></span><span></span><span></span>237 </div>238 <div class="checkbox"></div>239 <div class="row-text">Spade</div>240 </div>241 242 <div class="list-row">243 <div class="drag-dots">244 <span></span><span></span><span></span>245 <span></span><span></span><span></span>246 </div>247 <div class="checkbox"></div>248 <div class="row-text" style="color:#9aa0a6;">|</div>249 <div class="row-spacer"></div>250 <div class="close-x">251 <svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19"/></svg>252 </div>253 </div>254 255 <div class="add-row">256 <div class="add-plus">257 <svg viewBox="0 0 24 24"><path d="M12 4v16M4 12h16"/></svg>258 </div>259 <span>List item</span>260 </div>261 </div>262 263 <!-- Bottom actions -->264 <div class="bottom-actions">265 <div class="ba-btn">266 <svg viewBox="0 0 24 24"><path d="M12 4v16M4 12h16"/></svg>267 </div>268 <div class="ba-btn">269 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="7"/></svg>270 </div>271 <div class="ba-btn">272 <svg viewBox="0 0 24 24"><path d="M5 18h14M8 6h8M8 10h8M8 14h8"/></svg>273 </div>274 <div class="ba-btn">275 <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></svg>276 </div>277 <div class="ba-btn">278 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg>279 </div>280 <div class="ba-btn">281 <svg viewBox="0 0 24 24"><path d="M6 7h12M6 12h12M6 17h12"/></svg>282 </div>283 </div>284 285 <!-- Keyboard -->286 <div class="keyboard">287 <div class="kb-top-row">288 <div class="kb-small">◧</div>289 <div class="kb-small">🙂</div>290 <div class="kb-small">GIF</div>291 <div class="kb-small">⚙</div>292 <div class="kb-small">G↔</div>293 <div class="kb-small">🎨</div>294 <div class="kb-small">🎤</div>295 </div>296 297 <div class="kb-row">298 <div class="kb-key">Q</div><div class="kb-key">W</div><div class="kb-key">E</div><div class="kb-key">R</div><div class="kb-key">T</div>299 <div class="kb-key">Y</div><div class="kb-key">U</div><div class="kb-key">I</div><div class="kb-key">O</div><div class="kb-key">P</div>300 </div>301 <div class="kb-row kb-row-mid" style="padding: 0 60px;">302 <div class="kb-key">A</div><div class="kb-key">S</div><div class="kb-key">D</div><div class="kb-key">F</div><div class="kb-key">G</div>303 <div class="kb-key">H</div><div class="kb-key">J</div><div class="kb-key">K</div><div class="kb-key">L</div>304 </div>305 <div class="kb-row kb-row-bottom" style="padding: 0 120px;">306 <div class="kb-key">Z</div><div class="kb-key">X</div><div class="kb-key">C</div><div class="kb-key">V</div>307 <div class="kb-key">B</div><div class="kb-key">N</div><div class="kb-key">M</div><div class="kb-key">⌫</div>308 </div>309 310 <div class="kb-bottom-controls" style="padding: 0 12px; gap: 24px;">311 <div class="kb-key kb-wide">?123</div>312 <div class="kb-key">,</div>313 <div class="kb-key kb-emoji">🙂</div>314 <div class="kb-space"></div>315 <div class="kb-key kb-dot">.</div>316 <div class="kb-return">↵</div>317 </div>318 </div>319 320 <div class="home-pill"></div>321</div>322</body>323</html>