GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>UI Render</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #121212;14 font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;15 color: #fff;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 110px;25 padding: 0 36px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 color: #EDEDED;30 font-size: 36px;31 letter-spacing: 0.5px;32 }33 .status-left, .status-right {34 display: flex;35 align-items: center;36 gap: 22px;37 }38 .status-dot {39 width: 16px;40 height: 16px;41 background: #DCDCDC;42 border-radius: 50%;43 opacity: 0.8;44 }45 .battery {46 width: 48px; height: 24px; border: 3px solid #EDEDED; border-radius: 4px; position: relative;47 }48 .battery::after { content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 12px; background: #EDEDED; border-radius: 2px; }49 .battery-level { position: absolute; left: 3px; top: 3px; height: 16px; width: 28px; background: #EDEDED; }50 51 /* App bar */52 .app-bar {53 position: absolute;54 top: 110px;55 left: 0;56 width: 1080px;57 height: 160px;58 display: flex;59 align-items: center;60 padding: 0 36px;61 }62 .app-title {63 flex: 1;64 text-align: center;65 font-size: 60px;66 font-weight: 500;67 }68 .icon-btn {69 width: 72px;70 height: 72px;71 display: flex;72 align-items: center;73 justify-content: center;74 border-radius: 36px;75 }76 .icon {77 width: 56px;78 height: 56px;79 }80 81 /* Search field under title */82 .search-area {83 position: absolute;84 top: 270px;85 left: 0;86 width: 1080px;87 padding: 0 36px;88 height: 140px;89 }90 .search-row {91 display: flex;92 align-items: center;93 justify-content: space-between;94 height: 100px;95 }96 .search-placeholder {97 color: #BDBDBD;98 font-size: 42px;99 }100 .divider {101 height: 2px;102 background: #5E5E5E;103 width: 100%;104 opacity: 0.7;105 }106 107 /* Content area (empty dark list) */108 .content {109 position: absolute;110 top: 410px;111 left: 0;112 width: 1080px;113 bottom: 1040px; /* leaves space for keyboard */114 background: #151515;115 }116 117 /* Keyboard */118 .keyboard {119 position: absolute;120 bottom: 80px; /* leave space for gesture bar */121 left: 0;122 width: 1080px;123 height: 1000px;124 background: #1B1B1B;125 border-top: 1px solid #2A2A2A;126 box-sizing: border-box;127 padding: 24px 28px 28px 28px;128 }129 130 .kb-tools {131 display: flex;132 align-items: center;133 justify-content: space-between;134 padding: 8px 8px 16px;135 }136 .tool {137 width: 92px; height: 92px; background: #2A2A2A; border-radius: 46px;138 display: flex; align-items: center; justify-content: center; color: #EDEDED; font-size: 28px;139 border: 1px solid #3A3A3A;140 }141 .tool.wide { width: 120px; }142 143 .kb-row {144 display: grid;145 grid-auto-rows: 120px;146 column-gap: 12px;147 row-gap: 16px;148 margin-top: 10px;149 }150 .kb-row.row1 { grid-template-columns: repeat(10, 1fr); }151 .kb-row.row2 { grid-template-columns: repeat(9, 1fr); padding: 0 52px; } /* slight inset */152 .key {153 background: #2F2F2F;154 border: 1px solid #3A3A3A;155 border-radius: 24px;156 display: flex; align-items: center; justify-content: center;157 color: #F3F3F3; font-size: 44px; text-transform: lowercase;158 }159 160 .kb-row-flex {161 display: flex; gap: 12px; align-items: center; margin-top: 16px;162 }163 .key.shift, .key.backspace { width: 150px; font-size: 36px; text-transform: none; }164 .key.mid { flex: 1; }165 166 .kb-bottom {167 display: flex; align-items: center; gap: 12px; margin-top: 18px;168 }169 .key.circle {170 width: 140px; height: 140px; border-radius: 70px;171 display: flex; align-items: center; justify-content: center;172 font-size: 40px;173 }174 .key.special { background: #3A3F44; color: #EDEDED; }175 .key.space { flex: 1; height: 140px; font-size: 32px; color: #CFCFCF; }176 .key.small { width: 140px; height: 140px; font-size: 44px; }177 .key.search { background: #C8D8F6; color: #121212; border-color: #B7C9EE; }178 179 /* Gesture bar */180 .gesture-bar {181 position: absolute;182 bottom: 20px;183 left: 50%;184 transform: translateX(-50%);185 width: 280px;186 height: 10px;187 background: #EDEDED;188 border-radius: 8px;189 opacity: 0.9;190 }191 192 /* Simple SVG icons color helpers */193 .stroke-white * { stroke: #FFFFFF; }194 .fill-white * { fill: #FFFFFF; }195</style>196</head>197<body>198<div id="render-target">199 200 <!-- Status Bar -->201 <div class="status-bar">202 <div class="status-left">203 <div>9:29</div>204 <div class="status-dot"></div>205 <div class="status-dot"></div>206 <div class="status-dot"></div>207 <!-- simple search glyph on status -->208 <svg class="icon" viewBox="0 0 24 24">209 <circle cx="10" cy="10" r="7" fill="none" stroke="#EDEDED" stroke-width="2"></circle>210 <line x1="15" y1="15" x2="22" y2="22" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"></line>211 </svg>212 <div class="status-dot" style="width: 8px; height: 8px;"></div>213 </div>214 <div class="status-right">215 <svg class="icon" viewBox="0 0 24 24">216 <path d="M4 9h16v6H4z" fill="none" stroke="#EDEDED" stroke-width="2"></path>217 <line x1="2" y1="12" x2="22" y2="12" stroke="#EDEDED" stroke-width="2"></line>218 </svg>219 <svg class="icon" viewBox="0 0 24 24">220 <path d="M4 18l8-12 8 12H4z" fill="none" stroke="#EDEDED" stroke-width="2"></path>221 </svg>222 <div class="battery"><div class="battery-level"></div></div>223 </div>224 </div>225 226 <!-- App Bar -->227 <div class="app-bar">228 <div class="icon-btn">229 <svg class="icon" viewBox="0 0 24 24">230 <polyline points="15,5 7,12 15,19" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></polyline>231 </svg>232 </div>233 <div class="app-title">Main Group</div>234 <div class="icon-btn">235 <svg class="icon" viewBox="0 0 24 24">236 <circle cx="10" cy="10" r="7" fill="none" stroke="#FFFFFF" stroke-width="2"></circle>237 <line x1="15" y1="15" x2="22" y2="22" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"></line>238 </svg>239 </div>240 </div>241 242 <!-- Search input area -->243 <div class="search-area">244 <div class="search-row">245 <div class="search-placeholder">Enter name of city or timezone</div>246 <div class="icon-btn">247 <svg class="icon" viewBox="0 0 24 24">248 <circle cx="10" cy="10" r="7" fill="none" stroke="#FFFFFF" stroke-width="2"></circle>249 <line x1="15" y1="15" x2="22" y2="22" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"></line>250 </svg>251 </div>252 </div>253 <div class="divider"></div>254 </div>255 256 <!-- Content placeholder -->257 <div class="content"></div>258 259 <!-- Keyboard -->260 <div class="keyboard">261 <div class="kb-tools">262 <div class="tool">⌘</div>263 <div class="tool">🙂</div>264 <div class="tool wide">GIF</div>265 <div class="tool">⚙️</div>266 <div class="tool">G↔︎</div>267 <div class="tool">🎨</div>268 <div class="tool">🎤</div>269 </div>270 271 <div class="kb-row row1">272 <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>273 <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>274 </div>275 276 <div class="kb-row row2">277 <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>278 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>279 </div>280 281 <div class="kb-row-flex">282 <div class="key shift">⇧</div>283 <div class="key mid">z</div><div class="key mid">x</div><div class="key mid">c</div><div class="key mid">v</div>284 <div class="key mid">b</div><div class="key mid">n</div><div class="key mid">m</div>285 <div class="key backspace">286 <svg width="56" height="56" viewBox="0 0 24 24">287 <path d="M4 12l5-5h9a2 2 0 012 2v6a2 2 0 01-2 2H9l-5-5z" fill="none" stroke="#FFFFFF" stroke-width="2"></path>288 <line x1="11" y1="9" x2="16" y2="14" stroke="#FFFFFF" stroke-width="2"></line>289 <line x1="16" y1="9" x2="11" y2="14" stroke="#FFFFFF" stroke-width="2"></line>290 </svg>291 </div>292 </div>293 294 <div class="kb-bottom">295 <div class="key circle special">?123</div>296 <div class="key small">,</div>297 <div class="key circle special">🙂</div>298 <div class="key space">space</div>299 <div class="key small">.</div>300 <div class="key circle search">301 <svg width="50" height="50" viewBox="0 0 24 24">302 <circle cx="10" cy="10" r="7" fill="none" stroke="#121212" stroke-width="2"></circle>303 <line x1="15" y1="15" x2="22" y2="22" stroke="#121212" stroke-width="2" stroke-linecap="round"></line>304 </svg>305 </div>306 </div>307 </div>308 309 <!-- Gesture bar -->310 <div class="gesture-bar"></div>311 312</div>313</body>314</html>