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>UI Render - New Gardening Tools</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #1E1E1E; color: #E6E6E6; border-radius: 26px;12 box-shadow: 0 20px 60px rgba(0,0,0,0.35);13 }14 /* Status bar */15 .status-bar {16 position: absolute; top: 0; left: 0; width: 100%; height: 110px;17 display: flex; align-items: center; justify-content: space-between;18 padding: 0 32px; color: #DADADA; font-size: 34px;19 }20 .status-left { display: flex; align-items: center; gap: 16px; }21 .status-right { display: flex; align-items: center; gap: 26px; }22 .icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }23 .icon svg { width: 100%; height: 100%; }24 /* Header action row */25 .app-actions {26 position: absolute; top: 120px; left: 0; width: 100%; height: 80px;27 display: flex; align-items: center; justify-content: space-between; padding: 0 32px;28 }29 .back-btn .icon svg { stroke: #CFCFCF; }30 .actions-right { display: flex; gap: 26px; }31 /* Title */32 .title {33 position: absolute; top: 220px; left: 64px; right: 120px;34 font-size: 66px; font-weight: 500; letter-spacing: 0.5px;35 color: #EDEDED;36 }37 .title-menu {38 position: absolute; top: 240px; right: 52px;39 }40 /* Checklist */41 .checklist { position: absolute; top: 420px; left: 64px; width: 952px; }42 .list-row {43 display: flex; align-items: center; gap: 32px;44 height: 90px; margin-bottom: 26px;45 }46 .drag {47 width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;48 }49 .checkbox {50 width: 58px; height: 58px; border: 3px solid #9E9E9E; border-radius: 8px;51 }52 .list-text { font-size: 42px; color: #CFCFCF; }53 .caret {54 width: 3px; height: 48px; background: #BDBDBD; border-radius: 2px;55 }56 .add-row { margin-top: 16px; }57 .add-row .plus {58 width: 56px; height: 56px; border: 3px solid #A0A0A0; border-radius: 50%;59 display: flex; align-items: center; justify-content: center; color: #CFCFCF; font-size: 40px;60 }61 .dismiss-x {62 position: absolute; top: 620px; right: 64px; color: #AFAFAF; font-size: 60px;63 }64 /* Bottom toolbar (above keyboard) */65 .tools-bar {66 position: absolute; left: 0; width: 100%; top: 1300px; height: 110px;67 display: flex; align-items: center; gap: 34px; padding: 0 36px;68 color: #BEBEBE;69 }70 .tool { width: 74px; height: 74px; display: flex; align-items: center; justify-content: center; border-radius: 14px; border: 1px solid #3A3A3A; background: #232323; }71 .tool svg { width: 60%; height: 60%; }72 /* Keyboard */73 .keyboard {74 position: absolute; left: 0; bottom: 40px; width: 100%; height: 880px;75 background: #2A2A2A; border-top: 1px solid #3A3A3A;76 }77 .kbd-top-row {78 height: 100px; display: flex; align-items: center; gap: 26px; padding: 0 26px; color: #D1D1D1;79 }80 .kbd-top-item { width: 90px; height: 72px; border-radius: 12px; background: #313131; border: 1px solid #3C3C3C; display: flex; align-items: center; justify-content: center; font-size: 30px; }81 .keys { padding: 16px 18px; }82 .key-row { display: flex; justify-content: center; gap: 20px; margin-bottom: 22px; }83 .key {84 width: 88px; height: 120px; background: #3A3A3A; border-radius: 18px; color: #F6F6F6;85 display: flex; align-items: center; justify-content: center; font-size: 44px;86 box-shadow: inset 0 -2px 0 rgba(255,255,255,0.05);87 }88 .key.small { width: 120px; }89 .key.large { width: 240px; }90 .key.icon { font-size: 34px; color: #DADADA; }91 .subnum { position: absolute; top: 10px; font-size: 22px; color: #AFAFAF; }92 .gesture-bar {93 position: absolute; left: 50%; transform: translateX(-50%);94 bottom: 12px; width: 260px; height: 10px; background: #EAEAEA; border-radius: 8px; opacity: 0.9;95 }96</style>97</head>98<body>99<div id="render-target">100 101 <!-- Status Bar -->102 <div class="status-bar">103 <div class="status-left">104 <div>9:20</div>105 <div class="icon"><svg viewBox="0 0 48 48"><circle cx="24" cy="24" r="6" fill="#CFCFCF"/></svg></div>106 </div>107 <div class="status-right">108 <div class="icon" title="Signal"><svg viewBox="0 0 48 48"><rect x="6" y="26" width="6" height="12" fill="#CFCFCF"/><rect x="16" y="22" width="6" height="16" fill="#CFCFCF"/><rect x="26" y="18" width="6" height="20" fill="#CFCFCF"/><rect x="36" y="14" width="6" height="24" fill="#CFCFCF"/></svg></div>109 <div class="icon" title="Wi-Fi"><svg viewBox="0 0 48 48"><path d="M6 18 C18 8,30 8,42 18" stroke="#CFCFCF" stroke-width="4" fill="none"/><path d="M12 26 C18 20,30 20,36 26" stroke="#CFCFCF" stroke-width="4" fill="none"/><circle cx="24" cy="34" r="4" fill="#CFCFCF"/></svg></div>110 <div class="icon" title="Battery"><svg viewBox="0 0 48 48"><rect x="8" y="12" width="30" height="24" rx="4" ry="4" fill="none" stroke="#CFCFCF" stroke-width="3"/><rect x="12" y="16" width="22" height="16" rx="2" ry="2" fill="#CFCFCF"/><rect x="40" y="18" width="4" height="12" rx="1" ry="1" fill="#CFCFCF"/></svg></div>111 </div>112 </div>113 114 <!-- Header Actions -->115 <div class="app-actions">116 <div class="back-btn icon">117 <svg viewBox="0 0 48 48">118 <path d="M30 10 L14 24 L30 38" stroke="#D0D0D0" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>119 </svg>120 </div>121 <div class="actions-right">122 <div class="icon" title="Pin"><svg viewBox="0 0 48 48"><path d="M18 8 L30 8 L26 22 L30 22 L24 40 L20 22 L24 22 Z" fill="#BEBEBE"/></svg></div>123 <div class="icon" title="Lock"><svg viewBox="0 0 48 48"><rect x="10" y="20" width="28" height="20" rx="4" ry="4" fill="none" stroke="#BEBEBE" stroke-width="3"/><path d="M16 20 V14 C16 10,20 8,24 8 C28 8,32 10,32 14 V20" stroke="#BEBEBE" stroke-width="3" fill="none"/></svg></div>124 <div class="icon" title="Archive"><svg viewBox="0 0 48 48"><rect x="8" y="12" width="32" height="24" rx="4" ry="4" fill="none" stroke="#BEBEBE" stroke-width="3"/><path d="M18 24 L24 30 L30 24" stroke="#BEBEBE" stroke-width="3" fill="none" stroke-linecap="round"/></svg></div>125 </div>126 </div>127 128 <!-- Title -->129 <div class="title">New Gardening Tools</div>130 <div class="title-menu icon">131 <svg viewBox="0 0 48 48">132 <circle cx="24" cy="10" r="4" fill="#BEBEBE"/>133 <circle cx="24" cy="24" r="4" fill="#BEBEBE"/>134 <circle cx="24" cy="38" r="4" fill="#BEBEBE"/>135 </svg>136 </div>137 138 <!-- Checklist -->139 <div class="checklist">140 <div class="list-row">141 <div class="drag">142 <svg viewBox="0 0 48 48">143 <circle cx="12" cy="12" r="3" fill="#AFAFAF"/><circle cx="24" cy="12" r="3" fill="#AFAFAF"/><circle cx="36" cy="12" r="3" fill="#AFAFAF"/>144 <circle cx="12" cy="24" r="3" fill="#AFAFAF"/><circle cx="24" cy="24" r="3" fill="#AFAFAF"/><circle cx="36" cy="24" r="3" fill="#AFAFAF"/>145 <circle cx="12" cy="36" r="3" fill="#AFAFAF"/><circle cx="24" cy="36" r="3" fill="#AFAFAF"/><circle cx="36" cy="36" r="3" fill="#AFAFAF"/>146 </svg>147 </div>148 <div class="checkbox"></div>149 <div class="list-text">Axe</div>150 </div>151 152 <div class="list-row">153 <div class="drag">154 <svg viewBox="0 0 48 48">155 <circle cx="12" cy="12" r="3" fill="#AFAFAF"/><circle cx="24" cy="12" r="3" fill="#AFAFAF"/><circle cx="36" cy="12" r="3" fill="#AFAFAF"/>156 <circle cx="12" cy="24" r="3" fill="#AFAFAF"/><circle cx="24" cy="24" r="3" fill="#AFAFAF"/><circle cx="36" cy="24" r="3" fill="#AFAFAF"/>157 <circle cx="12" cy="36" r="3" fill="#AFAFAF"/><circle cx="24" cy="36" r="3" fill="#AFAFAF"/><circle cx="36" cy="36" r="3" fill="#AFAFAF"/>158 </svg>159 </div>160 <div class="checkbox"></div>161 <div class="caret"></div>162 </div>163 164 <div class="list-row add-row">165 <div class="plus">+</div>166 <div class="list-text" style="color:#B8B8B8;">List item</div>167 </div>168 </div>169 170 <div class="dismiss-x">✕</div>171 172 <!-- Bottom Tools Bar -->173 <div class="tools-bar">174 <div class="tool" title="Add"><svg viewBox="0 0 48 48"><path d="M24 10 V38 M10 24 H38" stroke="#CFCFCF" stroke-width="4" stroke-linecap="round"/></svg></div>175 <div class="tool" title="Palette"><svg viewBox="0 0 48 48"><circle cx="24" cy="24" r="16" fill="none" stroke="#CFCFCF" stroke-width="3"/><circle cx="16" cy="20" r="3" fill="#CFCFCF"/><circle cx="24" cy="16" r="3" fill="#CFCFCF"/><circle cx="32" cy="20" r="3" fill="#CFCFCF"/></svg></div>176 <div class="tool" title="Text"><svg viewBox="0 0 48 48"><path d="M12 36 H36 M24 12 L16 36 M24 12 L32 36" stroke="#CFCFCF" stroke-width="3" fill="none"/></svg></div>177 <div class="tool" title="Undo"><svg viewBox="0 0 48 48"><path d="M20 16 L12 24 L20 32" stroke="#CFCFCF" stroke-width="4" fill="none" stroke-linecap="round"/><path d="M12 24 H30 C36 24 38 30 38 34" stroke="#CFCFCF" stroke-width="3" fill="none"/></svg></div>178 <div class="tool" title="Redo"><svg viewBox="0 0 48 48"><path d="M28 16 L36 24 L28 32" stroke="#CFCFCF" stroke-width="4" fill="none" stroke-linecap="round"/><path d="M36 24 H18 C12 24 10 30 10 34" stroke="#CFCFCF" stroke-width="3" fill="none"/></svg></div>179 <div class="tool" title="More"><svg viewBox="0 0 48 48"><circle cx="24" cy="14" r="4" fill="#CFCFCF"/><circle cx="24" cy="24" r="4" fill="#CFCFCF"/><circle cx="24" cy="34" r="4" fill="#CFCFCF"/></svg></div>180 </div>181 182 <!-- Keyboard -->183 <div class="keyboard">184 <div class="kbd-top-row">185 <div class="kbd-top-item"><svg viewBox="0 0 48 48"><rect x="8" y="8" width="10" height="10" fill="#D0D0D0"/><rect x="20" y="8" width="10" height="10" fill="#D0D0D0"/><rect x="32" y="8" width="10" height="10" fill="#D0D0D0"/><rect x="8" y="20" width="10" height="10" fill="#D0D0D0"/><rect x="20" y="20" width="10" height="10" fill="#D0D0D0"/><rect x="32" y="20" width="10" height="10" fill="#D0D0D0"/></svg></div>186 <div class="kbd-top-item">😊</div>187 <div class="kbd-top-item" style="font-weight:700;">GIF</div>188 <div class="kbd-top-item">⚙️</div>189 <div class="kbd-top-item">G✚</div>190 <div class="kbd-top-item">🎨</div>191 <div class="kbd-top-item">🎙️</div>192 </div>193 194 <div class="keys">195 <div class="key-row">196 <div class="key">Q</div>197 <div class="key">W</div>198 <div class="key">E</div>199 <div class="key">R</div>200 <div class="key">T</div>201 <div class="key">Y</div>202 <div class="key">U</div>203 <div class="key">I</div>204 <div class="key">O</div>205 <div class="key">P</div>206 </div>207 <div class="key-row">208 <div class="key">A</div>209 <div class="key">S</div>210 <div class="key">D</div>211 <div class="key">F</div>212 <div class="key">G</div>213 <div class="key">H</div>214 <div class="key">J</div>215 <div class="key">K</div>216 <div class="key">L</div>217 </div>218 <div class="key-row">219 <div class="key small">↑</div>220 <div class="key">Z</div>221 <div class="key">X</div>222 <div class="key">C</div>223 <div class="key">V</div>224 <div class="key">B</div>225 <div class="key">N</div>226 <div class="key">M</div>227 <div class="key small">⌫</div>228 </div>229 <div class="key-row">230 <div class="key small">?123</div>231 <div class="key">,</div>232 <div class="key small">😊</div>233 <div class="key large"></div>234 <div class="key">.</div>235 <div class="key small">↵</div>236 </div>237 </div>238 </div>239 240 <!-- Gesture navigation bar -->241 <div class="gesture-bar"></div>242 243</div>244</body>245</html>