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 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #121212; color: #E0E0E0;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute; top: 0; left: 0; width: 100%; height: 110px;18 color: #E0E0E0; font-size: 36px; line-height: 110px; padding: 0 40px;19 }20 .status-left { float: left; }21 .status-right { float: right; display: flex; gap: 26px; align-items: center; height: 110px; }22 .status-icon svg { width: 40px; height: 40px; stroke: #E0E0E0; fill: none; }23 24 /* Top nav row */25 .top-nav {26 position: absolute; top: 110px; left: 0; width: 100%; height: 120px;27 display: flex; align-items: center; justify-content: space-between;28 padding: 0 32px;29 }30 .nav-left, .nav-right { display: flex; align-items: center; gap: 30px; }31 .icon-btn svg { width: 48px; height: 48px; stroke: #BDBDBD; fill: none; }32 .dots-vertical { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }33 .dots-vertical span { display: block; width: 8px; height: 8px; background: #BDBDBD; border-radius: 50%; margin: 3px 0; }34 35 /* Title */36 .title {37 position: absolute; top: 240px; left: 72px;38 font-size: 64px; font-weight: 500; letter-spacing: 0.5px;39 color: #E0E0E0;40 }41 42 /* List area */43 .list { position: absolute; top: 370px; left: 72px; right: 72px; }44 .list-item {45 display: flex; align-items: center; gap: 34px;46 padding: 26px 0;47 }48 .drag {49 width: 44px; height: 44px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 6px;50 }51 .drag div { width: 8px; height: 8px; background: #9E9E9E; border-radius: 50%; }52 .checkbox {53 width: 52px; height: 52px; border: 3px solid #9E9E9E; border-radius: 8px;54 }55 .item-text {56 font-size: 48px; color: #E0E0E0;57 }58 .item-text.muted { color: #B0B0B0; }59 .close-x {60 margin-left: auto; width: 54px; height: 54px; position: relative;61 }62 .close-x:before, .close-x:after {63 content: ""; position: absolute; top: 50%; left: 50%;64 width: 40px; height: 2px; background: #BDBDBD;65 transform-origin: center;66 }67 .close-x:before { transform: translate(-50%, -50%) rotate(45deg); }68 .close-x:after { transform: translate(-50%, -50%) rotate(-45deg); }69 70 .add-row { padding-top: 20px; }71 .add-plus {72 width: 54px; height: 54px; border: 3px solid #9E9E9E; border-radius: 12px; position: relative;73 }74 .add-plus:before, .add-plus:after {75 content: ""; position: absolute; background: #9E9E9E;76 }77 .add-plus:before { width: 28px; height: 4px; left: 50%; top: 50%; transform: translate(-50%, -50%); }78 .add-plus:after { width: 4px; height: 28px; left: 50%; top: 50%; transform: translate(-50%, -50%); }79 80 /* Bottom action bar */81 .action-bar {82 position: absolute; left: 0; right: 0; top: 1160px; height: 110px;83 display: flex; align-items: center; gap: 70px; padding: 0 40px;84 color: #BDBDBD;85 }86 .action-icon svg { width: 54px; height: 54px; stroke: #BDBDBD; fill: none; }87 88 /* Keyboard */89 .keyboard {90 position: absolute; left: 0; right: 0; bottom: 90px; height: 920px;91 background: #1A1A1A; border-top: 1px solid #2A2A2A;92 }93 .kb-toolbar {94 height: 110px; display: flex; align-items: center; justify-content: space-between;95 padding: 0 28px; color: #D0D0D0; font-size: 42px;96 }97 .kb-left, .kb-right { display: flex; align-items: center; gap: 24px; }98 .kb-icon svg { width: 56px; height: 56px; stroke: #D0D0D0; fill: none; }99 100 .kb-keys {101 padding: 16px 18px;102 display: grid; grid-template-rows: repeat(3, 1fr); gap: 22px;103 height: 640px;104 }105 .row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 16px; }106 .row2 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }107 .row3 { grid-template-columns: 1.4fr repeat(7, 1fr) 1.4fr; }108 109 .key {110 background: #2B2B2B; color: #E0E0E0; border-radius: 16px; height: 150px;111 display: flex; align-items: center; justify-content: center; font-size: 44px;112 border: 1px solid #3A3A3A;113 }114 .key.light { background: #39404A; }115 .key.wide { grid-column: span 2; }116 .space-row {117 display: grid; grid-template-columns: 1.2fr 1fr 5fr 1fr 1.2fr; gap: 16px;118 padding: 12px 18px;119 }120 .gesture-bar {121 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);122 width: 320px; height: 10px; background: #CCCCCC; border-radius: 10px; opacity: 0.5;123 }124</style>125</head>126<body>127<div id="render-target">128 129 <!-- Status Bar -->130 <div class="status-bar">131 <div class="status-left">9:21</div>132 <div class="status-right">133 <div class="status-icon">134 <svg viewBox="0 0 24 24"><path d="M3 11h18v2H3z"/></svg>135 </div>136 <div class="status-icon">137 <svg viewBox="0 0 24 24"><path d="M4 12c3-6 13-6 16 0" stroke-width="2"/></svg>138 </div>139 <div class="status-icon">140 <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="3" stroke-width="2"/><path d="M21 10v4" stroke-width="2"/></svg>141 </div>142 </div>143 <div style="clear: both;"></div>144 </div>145 146 <!-- Top Navigation -->147 <div class="top-nav">148 <div class="nav-left">149 <div class="icon-btn">150 <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" stroke-width="2"/></svg>151 </div>152 </div>153 <div class="nav-right">154 <div class="icon-btn">155 <svg viewBox="0 0 24 24"><path d="M12 3c-3.5 0-6 2.7-6 6v3l-2 2h16l-2-2v-3c0-3.3-2.5-6-6-6z" stroke-width="1.6"/></svg>156 </div>157 <div class="icon-btn">158 <svg viewBox="0 0 24 24">159 <rect x="6" y="10" width="12" height="9" rx="2" stroke-width="1.6"/>160 <path d="M9 10V7a3 3 0 0 1 6 0v3" stroke-width="1.6"/>161 </svg>162 </div>163 <div class="icon-btn">164 <svg viewBox="0 0 24 24"><path d="M12 5v8" stroke-width="2"/><path d="M8 9l4 4 4-4" stroke-width="2"/><rect x="4" y="3" width="16" height="18" rx="2" stroke-width="1.6"/></svg>165 </div>166 <div class="dots-vertical">167 <span></span><span></span><span></span>168 </div>169 </div>170 </div>171 172 <!-- Title -->173 <div class="title">New Gardening Tools</div>174 175 <!-- List -->176 <div class="list">177 <div class="list-item">178 <div class="drag">179 <div></div><div></div><div></div>180 <div></div><div></div><div></div>181 </div>182 <div class="checkbox"></div>183 <div class="item-text">Axe</div>184 </div>185 186 <div class="list-item">187 <div class="drag">188 <div></div><div></div><div></div>189 <div></div><div></div><div></div>190 </div>191 <div class="checkbox"></div>192 <div class="item-text">Sickle</div>193 <div class="close-x"></div>194 </div>195 196 <div class="list-item add-row">197 <div class="add-plus"></div>198 <div class="item-text muted">List item</div>199 </div>200 </div>201 202 <!-- Bottom action bar -->203 <div class="action-bar">204 <div class="action-icon">205 <svg viewBox="0 0 24 24"><path d="M12 5v14" stroke-width="2"/><path d="M5 12h14" stroke-width="2"/></svg>206 </div>207 <div class="action-icon">208 <svg viewBox="0 0 24 24">209 <circle cx="12" cy="12" r="7" stroke-width="1.8"/>210 <path d="M12 9a3 3 0 0 0-3 3" stroke-width="1.8"/>211 </svg>212 </div>213 <div class="action-icon"><svg viewBox="0 0 24 24"><path d="M6 18V6h12" stroke-width="2"/><path d="M12 6v12" stroke-width="2"/></svg></div>214 <div class="action-icon"><svg viewBox="0 0 24 24"><path d="M14 7l-6 5 6 5" stroke-width="2"/></svg></div>215 <div class="action-icon"><svg viewBox="0 0 24 24"><path d="M10 7l6 5-6 5" stroke-width="2"/></svg></div>216 <div class="dots-vertical">217 <span></span><span></span><span></span>218 </div>219 </div>220 221 <!-- Keyboard -->222 <div class="keyboard">223 <div class="kb-toolbar">224 <div class="kb-left">225 <div class="kb-icon">226 <svg viewBox="0 0 24 24">227 <rect x="3" y="6" width="18" height="12" rx="2"/>228 <path d="M6 9h3M11 9h3M16 9h3M6 13h3M11 13h3M16 13h3" stroke-width="1.6"/>229 </svg>230 </div>231 </div>232 <div style="font-size: 44px; color:#E0E0E0;">Sickle</div>233 <div class="kb-right">234 <div class="kb-icon">235 <svg viewBox="0 0 24 24"><path d="M12 4a4 4 0 0 1 4 4v3a4 4 0 0 1-8 0V8a4 4 0 0 1 4-4z" stroke-width="1.6"/><path d="M7 16c2.5 1.5 7.5 1.5 10 0" stroke-width="1.6"/></svg>236 </div>237 </div>238 </div>239 240 <div class="kb-keys">241 <div class="row">242 <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>243 </div>244 <div class="row row2">245 <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>246 </div>247 <div class="row row3">248 <div class="key light">⇧</div>249 <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>250 <div class="key light">⌫</div>251 </div>252 </div>253 254 <div class="space-row">255 <div class="key">?123</div>256 <div class="key">,</div>257 <div class="key wide">space</div>258 <div class="key">.</div>259 <div class="key light">↵</div>260 </div>261 </div>262 263 <!-- Gesture bar -->264 <div class="gesture-bar"></div>265 266</div>267</body>268</html>