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</title>7<style>8 :root{9 --bg:#1f2123;10 --panel:#232527;11 --key:#2b2d2f;12 --key-dark:#292b2d;13 --text:#e6e7e8;14 --sub:#b9bec4;15 --accent:#9aa0a6;16 --border:#2e3133;17 }18 body{ margin:0; padding:0; background:transparent; font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial; }19 #render-target{20 position:relative; overflow:hidden;21 width:1080px; height:2400px;22 background:var(--bg);23 border-radius:40px;24 box-shadow:0 30px 60px rgba(0,0,0,0.45);25 color:var(--text);26 }27 /* Status bar */28 .status-bar{29 height:112px;30 padding:0 36px;31 display:flex; align-items:center; justify-content:space-between;32 color:#fff; font-weight:500; letter-spacing:0.2px;33 }34 .status-left{ font-size:44px; }35 .status-right{ display:flex; gap:22px; align-items:center; }36 .dot{ width:10px; height:10px; background:#cacaca; border-radius:50%; display:inline-block; margin:0 3px; opacity:.7; }37 .icon-16 svg{ width:42px; height:42px; fill:none; stroke:#e6e7e8; stroke-width:3; opacity:.9; }38 /* App toolbar (back + actions) */39 .app-toolbar{40 height:120px; display:flex; align-items:center; justify-content:space-between;41 padding:0 36px;42 }43 .back{ display:flex; align-items:center; gap:16px; }44 .back svg{ width:56px; height:56px; stroke:#e6e7e8; stroke-width:4; }45 .toolbar-actions{ display:flex; align-items:center; gap:34px; }46 .tool-icon svg{ width:52px; height:52px; stroke:#e6e7e8; stroke-width:3; fill:none; opacity:.9; }47 /* Title row */48 .title-row{49 display:flex; align-items:center; justify-content:space-between;50 padding:0 36px; margin-top:8px;51 }52 .title{ font-size:68px; font-weight:500; letter-spacing:.2px; }53 .kebab svg{ width:44px; height:44px; stroke:#e6e7e8; stroke-width:4; }54 /* List controls */55 .list-tools{56 display:flex; align-items:center; justify-content:space-between;57 padding:24px 36px 0;58 }59 .list-left{ display:flex; align-items:center; gap:28px; }60 .grid9 svg{ width:52px; height:52px; stroke:#cfd3d7; stroke-width:3; }61 .checkbox svg{ width:52px; height:52px; stroke:#cfd3d7; stroke-width:4; }62 .caret{ width:4px; height:56px; background:#cfd3d7; border-radius:2px; }63 .close-x svg{ width:56px; height:56px; stroke:#cfd3d7; stroke-width:4; }64 /* Add item hint */65 .add-item{66 display:flex; align-items:center; gap:28px;67 padding:28px 36px 10px;68 color:var(--sub); font-size:44px;69 }70 .plus svg{ width:52px; height:52px; stroke:#cfd3d7; stroke-width:4; }71 /* Spacer content area */72 .content-area{73 height:760px;74 margin:0 36px;75 border-top:1px solid var(--border);76 border-bottom:1px solid var(--border);77 }78 /* Bottom action row above keyboard */79 .bottom-actions{80 padding:18px 30px;81 display:flex; align-items:center; gap:44px;82 color:#d9dcdf;83 }84 .action svg{ width:52px; height:52px; stroke:#d9dcdf; stroke-width:3; fill:none; }85 .action-label{ font-size:36px; color:#cfd3d7; }86 /* Keyboard accessory row */87 .kb-accessory{88 display:flex; align-items:center; gap:38px;89 padding:10px 26px 16px;90 color:#dfe2e5;91 }92 .acc svg{ width:60px; height:60px; stroke:#dde1e5; stroke-width:3; fill:none; opacity:.9; }93 .gif{ font-weight:700; letter-spacing:2px; font-size:36px; }94 /* Keyboard */95 .keyboard{96 background:var(--panel);97 padding:14px 22px 18px;98 border-top:1px solid var(--border);99 position:absolute; bottom:96px; left:0; right:0;100 }101 .kb-row{ display:grid; grid-template-columns: repeat(10, 1fr); gap:16px; padding:14px 12px; }102 .key{103 background:var(--key); color:#e7eaee; text-align:center;104 height:120px; line-height:120px; border-radius:22px; font-size:44px; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05);105 }106 .kb-row.mid{ grid-template-columns: repeat(9, 1fr); padding:10px 66px; }107 .kb-row.bottom{ grid-template-columns: 1.5fr 1fr 1fr 4fr 1fr 1.6fr; padding:10px 12px; }108 .key.dark{ background:var(--key-dark); }109 .space{ letter-spacing:8px; color:#cfd3d7; }110 .emoji-key{ font-size:48px; }111 .enter{ background:#9aa7ff22; }112 .backspace svg{ width:56px; height:56px; stroke:#e7eaee; stroke-width:3; fill:none; vertical-align:middle; }113 /* Gesture pill */114 .gesture{115 position:absolute; bottom:24px; left:50%; transform:translateX(-50%);116 width:320px; height:16px; background:#cfd3d74a; border-radius:10px;117 }118</style>119</head>120<body>121<div id="render-target">122 <!-- Status bar -->123 <div class="status-bar">124 <div class="status-left">9:16</div>125 <div class="status-right">126 <span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span>127 <div class="icon-16">128 <!-- Signal -->129 <svg viewBox="0 0 24 24"><path d="M3 18h2M6 15h2M9 12h2M12 9h2M15 6h2"/></svg>130 </div>131 <div class="icon-16">132 <!-- WiFi -->133 <svg viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0M5 11c3-2 11-2 14 0M8 14c2-1 6-1 8 0"/><circle cx="12" cy="17" r="1.5" fill="#e6e7e8"/></svg>134 </div>135 <div class="icon-16">136 <!-- Battery -->137 <svg viewBox="0 0 28 24"><rect x="2" y="6" width="20" height="12" rx="2"></rect><rect x="23" y="9" width="3" height="6" rx="1"></rect><rect x="5" y="9" width="12" height="6" fill="#e6e7e8" stroke="none"></rect></svg>138 </div>139 </div>140 </div>141 142 <!-- App toolbar -->143 <div class="app-toolbar">144 <div class="back">145 <svg viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>146 </div>147 <div class="toolbar-actions">148 <!-- Bell -->149 <div class="tool-icon"><svg viewBox="0 0 24 24"><path d="M12 21a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2Z"/><path d="M18 15V10a6 6 0 1 0-12 0v5l-2 2h16l-2-2Z"/></svg></div>150 <!-- Lock -->151 <div class="tool-icon"><svg viewBox="0 0 24 24"><rect x="5" y="10" width="14" height="10" rx="2"></rect><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg></div>152 <!-- Archive/Save -->153 <div class="tool-icon"><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="5" rx="2"></rect><rect x="5" y="9" width="14" height="11" rx="2"></rect><path d="M9 13h6"/></svg></div>154 </div>155 </div>156 157 <!-- Title -->158 <div class="title-row">159 <div class="title">New Gardening Tools</div>160 <div class="kebab">161 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>162 </div>163 </div>164 165 <!-- List tools -->166 <div class="list-tools">167 <div class="list-left">168 <div class="grid9">169 <svg viewBox="0 0 24 24"><path d="M3 3h5v5H3zM10 3h5v5h-5zM17 3h4v5h-4zM3 10h5v5H3zM10 10h5v5h-5zM17 10h4v5h-4zM3 17h5v4H3zM10 17h5v4h-5zM17 17h4v4h-4z"/></svg>170 </div>171 <div class="checkbox">172 <svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="2"></rect></svg>173 </div>174 <div class="caret"></div>175 </div>176 <div class="close-x">177 <svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19"/></svg>178 </div>179 </div>180 181 <!-- Add item -->182 <div class="add-item">183 <div class="plus"><svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg></div>184 <div class="action-label">List item</div>185 </div>186 187 <div class="content-area"></div>188 189 <!-- Bottom actions -->190 <div class="bottom-actions">191 <div class="action"><svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg></div>192 <div class="action"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v10M7 12h10"/></svg></div>193 <div class="action"><svg viewBox="0 0 24 24"><path d="M6 6h12M6 12h12M6 18h12"/></svg></div>194 <div class="action"><svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg></div>195 <div class="action"><svg viewBox="0 0 24 24"><path d="M6 12h12M10 8l-4 4 4 4"/></svg></div>196 <div class="action"><svg viewBox="0 0 24 24"><path d="M18 12H6M14 8l4 4-4 4"/></svg></div>197 <div class="action"><svg viewBox="0 0 24 24"><circle cx="12" cy="5.5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="18.5" r="1.5"/></svg></div>198 </div>199 200 <!-- Keyboard accessory row -->201 <div class="kb-accessory">202 <div class="acc"><svg viewBox="0 0 24 24"><path d="M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z"/></svg></div>203 <div class="acc"><svg viewBox="0 0 24 24"><circle cx="12" cy="9" r="4"/><path d="M4 20a8 8 0 0 1 16 0"/></svg></div>204 <div class="gif">GIF</div>205 <div class="acc"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg></div>206 <div class="acc"><svg viewBox="0 0 24 24"><path d="M7 7h10M7 12h10M7 17h10"/><path d="M17 5l2 2M17 10l2 2M17 15l2 2"/></svg></div>207 <div class="acc"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M4 12h16"/></svg></div>208 <div class="acc"><svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19"/></svg></div>209 </div>210 211 <!-- Keyboard -->212 <div class="keyboard">213 <!-- Row 1 -->214 <div class="kb-row">215 <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>216 <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>217 </div>218 <!-- Row 2 -->219 <div class="kb-row mid">220 <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>221 <div class="key">H</div><div class="key">J</div><div class="key">K</div><div class="key">L</div>222 </div>223 <!-- Row 3 -->224 <div class="kb-row">225 <div class="key dark">226 <!-- Shift -->227 <svg viewBox="0 0 24 24"><path d="M12 5l6 6H6l6-6Z"/><path d="M8 17h8"/></svg>228 </div>229 <div class="key">Z</div><div class="key">X</div><div class="key">C</div><div class="key">V</div>230 <div class="key">B</div><div class="key">N</div><div class="key">M</div>231 <div class="key backspace">232 <svg viewBox="0 0 24 24"><path d="M5 7l5-3h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H10l-5-3V7Z"/><path d="M12 9l4 3-4 3"/></svg>233 </div>234 </div>235 <!-- Row 4 -->236 <div class="kb-row bottom">237 <div class="key dark">?123</div>238 <div class="key">,</div>239 <div class="key emoji-key">🙂</div>240 <div class="key space">Space</div>241 <div class="key">.</div>242 <div class="key enter">243 <svg viewBox="0 0 24 24"><path d="M4 12h12v4"/><path d="M12 16l4-4-4-4"/></svg>244 </div>245 </div>246 </div>247 248 <div class="gesture"></div>249</div>250</body>251</html>