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">6<title>UI Mock</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; font-family:system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;13 }14 15 /* Status bar */16 .status-bar {17 position:absolute; top:0; left:0; right:0;18 height:110px;19 padding:20px 32px 0 32px;20 box-sizing:border-box;21 color:#E0E0E0;22 font-size:34px; font-weight:500;23 display:flex; align-items:center; justify-content:space-between;24 }25 .status-right { display:flex; gap:26px; align-items:center; }26 .status-dot { width:12px; height:12px; background:#BDBDBD; border-radius:50%; opacity:.9; }27 .status-icon {28 width:36px; height:36px; border-radius:8px;29 border:1px solid #505050; display:flex; align-items:center; justify-content:center;30 }31 .status-time { letter-spacing:0.5px; }32 33 /* Header / title */34 .header {35 position:absolute; top:110px; left:0; right:0;36 padding:20px 32px;37 box-sizing:border-box;38 }39 .back-row {40 display:flex; align-items:center; gap:24px;41 }42 .back-btn { width:64px; height:64px; display:flex; align-items:center; justify-content:center; }43 .title-row {44 margin-top:18px;45 display:flex; align-items:flex-start; justify-content:space-between;46 }47 .title {48 font-size:64px; line-height:74px; font-weight:500; color:#F1F1F1;49 }50 .title-actions { display:flex; gap:26px; align-items:center; }51 .action-icon { width:56px; height:56px; border:1px solid #3d3d3d; border-radius:12px; display:flex; align-items:center; justify-content:center; opacity:.9; }52 53 /* List area */54 .list-area { margin-top:40px; }55 .list-item {56 display:flex; align-items:center; gap:24px;57 padding:16px 0;58 }59 .drag-dots {60 width:40px; height:40px; display:grid; grid-template-columns:repeat(3, 8px); grid-auto-rows:8px; gap:6px;61 opacity:.8;62 }63 .drag-dots span { width:8px; height:8px; background:#9E9E9E; border-radius:50%; }64 .checkbox {65 width:48px; height:48px; border:2px solid #9E9E9E; border-radius:8px;66 }67 .text-input {68 flex:1; border:none; background:transparent; color:#E0E0E0;69 font-size:46px; outline:none;70 }71 .cancel-x { width:56px; height:56px; display:flex; align-items:center; justify-content:center; border-radius:12px; border:1px solid #3d3d3d; }72 73 .add-item {74 display:flex; align-items:center; gap:24px; color:#BDBDBD;75 padding:8px 0;76 }77 .plus-icon {78 width:48px; height:48px; border-radius:50%; border:2px solid #9E9E9E; display:flex; align-items:center; justify-content:center; color:#9E9E9E; font-size:36px;79 }80 81 /* Bottom editor toolbar */82 .editor-toolbar {83 position:absolute; left:0; right:0; bottom:820px;84 padding:18px 28px;85 display:flex; align-items:center; justify-content:space-between;86 color:#D0D0D0;87 }88 .toolbar-left, .toolbar-right { display:flex; gap:34px; align-items:center; }89 .tb { width:72px; height:72px; border-radius:14px; border:1px solid #424242; display:flex; align-items:center; justify-content:center; }90 91 /* Keyboard */92 .keyboard {93 position:absolute; left:0; right:0; bottom:140px;94 background:#181818; border-top:1px solid #2f2f2f;95 height:670px;96 }97 .suggest-row {98 height:90px; display:flex; align-items:center; justify-content:space-between;99 padding:0 24px; box-sizing:border-box; color:#E0E0E0;100 }101 .suggest-left { display:flex; align-items:center; gap:24px; }102 .kbd-icon { width:56px; height:56px; background:#2b2b2b; border-radius:12px; display:flex; align-items:center; justify-content:center; }103 .suggests { display:flex; gap:30px; align-items:center; opacity:.95; font-size:36px; }104 .suggests .sep { color:#6f6f6f; }105 .mic { width:56px; height:56px; border-radius:12px; border:1px solid #424242; display:flex; align-items:center; justify-content:center; }106 107 .keys {108 padding:8px 24px 24px;109 display:flex; flex-direction:column; gap:22px;110 }111 .row { display:flex; justify-content:center; gap:16px; }112 .key {113 min-width:86px; height:110px; background:#2C2C2C; border-radius:20px; color:#EAEAEA;114 display:flex; align-items:center; justify-content:center; font-size:42px; box-shadow:inset 0 0 0 1px #3a3a3a;115 }116 .key.small { min-width:72px; }117 .key.wide { min-width:200px; }118 .key.space { flex:1; min-width:400px; }119 .key.icon { color:#CFCFCF; }120 .bottom-row { display:flex; align-items:center; gap:16px; padding:0 24px; }121 .pill {122 position:absolute; bottom:64px; left:50%; transform:translateX(-50%);123 width:260px; height:12px; background:#E0E0E0; border-radius:8px; opacity:.9;124 }125 126 /* Simple SVG styles */127 svg { width:32px; height:32px; fill:none; stroke:#CFCFCF; stroke-width:3; }128 .large svg { width:40px; height:40px; }129</style>130</head>131<body>132<div id="render-target">133 <!-- Status bar -->134 <div class="status-bar">135 <div class="status-time">9:20</div>136 <div class="status-right">137 <div class="status-icon"><svg viewBox="0 0 24 24"><path d="M4 7h16v10H4z"/><path d="M6 9h12v6H6z"/></svg></div>138 <div class="status-icon"><svg viewBox="0 0 24 24"><path d="M20 6l-8-4-8 4v8l8 4 8-4V6z"/></svg></div>139 <div class="status-icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/></svg></div>140 <div class="status-dot"></div>141 <div class="status-icon"><svg viewBox="0 0 24 24"><path d="M3 12h18"/><path d="M18 12l-3-3"/><path d="M18 12l-3 3"/></svg></div>142 <div class="status-icon"><svg viewBox="0 0 24 24"><path d="M7 10a5 5 0 0 1 10 0v6H7v-6z"/><path d="M11 17v2h2v-2"/></svg></div>143 </div>144 </div>145 146 <!-- Header -->147 <div class="header">148 <div class="back-row">149 <div class="back-btn">150 <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></svg>151 </div>152 </div>153 154 <div class="title-row">155 <div class="title">New Gardening Tools</div>156 <div class="title-actions">157 <div class="action-icon"><svg viewBox="0 0 24 24"><path d="M12 5v14"/><path d="M5 12h14"/></svg></div>158 <div class="action-icon"><svg viewBox="0 0 24 24"><path d="M12 3v3"/><path d="M6 6h12v12H6z"/></svg></div>159 <div class="action-icon"><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></div>160 </div>161 </div>162 163 <!-- List area -->164 <div class="list-area">165 <div class="list-item">166 <div class="drag-dots">167 <span></span><span></span><span></span>168 <span></span><span></span><span></span>169 <span></span><span></span><span></span>170 </div>171 <div class="checkbox"></div>172 <input class="text-input" value="Axe" />173 <div class="cancel-x"><svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg></div>174 </div>175 176 <div class="add-item">177 <div class="plus-icon">+</div>178 <div style="font-size:44px;">List item</div>179 </div>180 </div>181 </div>182 183 <!-- Bottom editor toolbar -->184 <div class="editor-toolbar">185 <div class="toolbar-left">186 <div class="tb"><svg viewBox="0 0 24 24"><rect x="5" y="5" width="14" height="14"/><path d="M9 12h6"/></svg></div>187 <div class="tb"><svg viewBox="0 0 24 24"><path d="M12 3v6M6 9h12" /></svg></div>188 <div class="tb"><span style="font-size:38px; color:#E0E0E0;">A</span></div>189 <div class="tb"><svg viewBox="0 0 24 24"><path d="M15 15l-6-6"/><path d="M9 15V9h6"/></svg></div>190 <div class="tb"><svg viewBox="0 0 24 24"><path d="M9 9l6 6"/><path d="M15 9v6H9"/></svg></div>191 </div>192 <div class="toolbar-right">193 <div class="tb"><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></div>194 </div>195 </div>196 197 <!-- Keyboard -->198 <div class="keyboard">199 <div class="suggest-row">200 <div class="suggest-left">201 <div class="kbd-icon"><svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12"/><path d="M5 9h2M9 9h2M13 9h2M17 9h2M5 13h2M9 13h2M13 13h2M17 13h2"/></svg></div>202 <div class="suggests">203 <span>Axe</span>204 <span class="sep">|</span>205 <span>Ace</span>206 <span class="sep">|</span>207 <span>🪓</span>208 </div>209 </div>210 <div class="mic"><svg viewBox="0 0 24 24"><path d="M12 4a3 3 0 0 1 3 3v4a3 3 0 0 1-6 0V7a3 3 0 0 1 3-3z"/><path d="M5 11a7 7 0 0 0 14 0"/><path d="M12 18v3"/></svg></div>211 </div>212 213 <div class="keys">214 <div class="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><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>216 </div>217 <div class="row">218 <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><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>219 </div>220 <div class="row">221 <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>222 <div class="key icon large"><svg viewBox="0 0 24 24"><path d="M5 7l10 0"/><path d="M15 7l-3 3"/><path d="M12 10l3 3"/></svg></div>223 </div>224 <div class="bottom-row">225 <div class="key wide">?123</div>226 <div class="key small">,</div>227 <div class="key small">🙂</div>228 <div class="key space"> </div>229 <div class="key small">.</div>230 <div class="key wide icon"><svg viewBox="0 0 24 24"><path d="M6 12h10"/><path d="M12 7l5 5-5 5"/></svg></div>231 </div>232 </div>233 </div>234 235 <!-- Gesture pill -->236 <div class="pill"></div>237</div>238</body>239</html>