GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI Render</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: linear-gradient(180deg, #2b5f89 0%, #244d74 40%, #244d74 70%, #e9f2e6 70%);13 color: #fff;14 }15 /* Top bar */16 .top-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 padding: 40px 40px 20px 40px;22 box-sizing: border-box;23 }24 .top-row {25 display: flex;26 align-items: center;27 gap: 24px;28 }29 .icon-circle {30 width: 96px;31 height: 96px;32 border-radius: 48px;33 background: rgba(255,255,255,0.12);34 display: flex;35 align-items: center;36 justify-content: center;37 }38 .search-input {39 flex: 1;40 font-size: 54px;41 line-height: 1.2;42 padding: 20px 24px;43 border-radius: 14px;44 border: 2px solid rgba(255,255,255,0.25);45 background: rgba(255,255,255,0.08);46 color: #fff;47 outline: none;48 }49 .chips {50 display: flex;51 gap: 26px;52 margin-top: 26px;53 }54 .chip {55 display: inline-flex;56 align-items: center;57 gap: 18px;58 padding: 26px 32px;59 border-radius: 54px;60 border: 1px solid rgba(255,255,255,0.35);61 color: #fff;62 background: rgba(255,255,255,0.12);63 font-size: 40px;64 }65 .chip svg { opacity: 0.9; }66 /* Result card */67 .results {68 margin-top: 40px;69 padding: 0 40px;70 }71 .result-item {72 display: flex;73 gap: 28px;74 align-items: flex-start;75 }76 .album {77 width: 180px;78 height: 180px;79 background: #E0E0E0;80 border: 1px solid #BDBDBD;81 border-radius: 24px;82 display: flex;83 align-items: center;84 justify-content: center;85 color: #757575;86 font-size: 26px;87 text-align: center;88 padding: 8px;89 }90 .result-text h3 {91 margin: 0 0 16px 0;92 font-size: 48px;93 font-weight: 700;94 color: #fff;95 }96 .result-text .meta {97 font-size: 36px;98 color: rgba(255,255,255,0.85);99 }100 .result-text .time {101 margin-top: 10px;102 font-size: 36px;103 color: #fff;104 }105 /* Keyboard */106 .keyboard {107 position: absolute;108 bottom: 0;109 left: 0;110 width: 1080px;111 height: 900px;112 background: #e9f2e6;113 border-top-left-radius: 32px;114 border-top-right-radius: 32px;115 box-shadow: 0 -4px 12px rgba(0,0,0,0.15);116 color: #2c2c2c;117 }118 .suggestion-bar {119 display: flex;120 align-items: center;121 justify-content: space-between;122 padding: 22px 40px;123 }124 .left-suggest {125 display: flex;126 align-items: center;127 gap: 24px;128 }129 .circle-btn {130 width: 92px;131 height: 92px;132 border-radius: 46px;133 background: #61d66d;134 display: flex;135 align-items: center;136 justify-content: center;137 }138 .sugg-pills {139 display: flex;140 gap: 28px;141 }142 .pill {143 background: #ffffff;144 color: #2c2c2c;145 padding: 18px 32px;146 border-radius: 48px;147 font-size: 38px;148 box-shadow: 0 3px 0 rgba(0,0,0,0.08);149 }150 .mic-btn {151 width: 92px;152 height: 92px;153 border-radius: 46px;154 background: #61d66d;155 display: flex;156 align-items: center;157 justify-content: center;158 }159 .keys {160 padding: 12px 28px 0 28px;161 }162 .row {163 display: flex;164 justify-content: space-between;165 gap: 14px;166 margin: 16px 24px;167 }168 .key {169 background: #fff;170 width: 88px;171 height: 116px;172 border-radius: 28px;173 display: flex;174 align-items: center;175 justify-content: center;176 font-size: 42px;177 box-shadow: 0 4px 0 rgba(0,0,0,0.08);178 }179 .key.wide { width: 140px; }180 .key.space { flex: 1; height: 116px; }181 .key.green { background: #bfe6c0; }182 .key.gray { background: #dfe7dc; }183 .bottom-row {184 display: grid;185 grid-template-columns: 160px 100px 120px 1fr 100px 160px;186 gap: 18px;187 margin: 24px 40px;188 }189 .search-action {190 background: #61d66d;191 color: #fff;192 border-radius: 28px;193 display: flex;194 align-items: center;195 justify-content: center;196 height: 116px;197 box-shadow: 0 4px 0 rgba(0,0,0,0.12);198 font-size: 44px;199 }200</style>201</head>202<body>203<div id="render-target">204 <!-- Top search area -->205 <div class="top-bar">206 <div class="top-row">207 <div class="icon-circle">208 <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff">209 <path d="M15.5 5l-7 7 7 7" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>210 </svg>211 </div>212 <input class="search-input" value="The Grand Plan to rise and Shine" />213 <div class="icon-circle">214 <svg width="36" height="36" viewBox="0 0 24 24">215 <path d="M6 6l12 12M18 6L6 18" stroke="#fff" stroke-width="2" stroke-linecap="round"/>216 </svg>217 </div>218 </div>219 220 <div class="chips">221 <div class="chip">222 <span>Category</span>223 <svg width="28" height="28" viewBox="0 0 24 24" fill="#fff">224 <path d="M6 9l6 6 6-6" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>225 </svg>226 </div>227 <div class="chip">228 <span>Time</span>229 <svg width="28" height="28" viewBox="0 0 24 24" fill="#fff">230 <path d="M6 9l6 6 6-6" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>231 </svg>232 </div>233 </div>234 235 <div class="results">236 <div class="result-item">237 <div class="album">[IMG: Story Cover]</div>238 <div class="result-text">239 <h3>The Grand Plan to Rise and Shine</h3>240 <div class="meta">Frankie Bridge • Sleep Story</div>241 <div class="time">34 min</div>242 </div>243 </div>244 </div>245 </div>246 247 <!-- Keyboard -->248 <div class="keyboard">249 <div class="suggestion-bar">250 <div class="left-suggest">251 <div class="circle-btn">252 <svg width="46" height="46" viewBox="0 0 24 24" fill="#fff">253 <path d="M3 3h8v8H3zM13 3h8v8h-8zM3 13h8v8H3zM13 13h8v8h-8z"/>254 </svg>255 </div>256 <div class="sugg-pills">257 <div class="pill">Shine</div>258 <div class="pill">Shines</div>259 <div class="pill">Shinee</div>260 </div>261 </div>262 <div class="mic-btn">263 <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff">264 <path d="M12 3a3 3 0 013 3v6a3 3 0 01-6 0V6a3 3 0 013-3zM5 11a7 7 0 0014 0M12 18v3M8 21h8" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>265 </svg>266 </div>267 </div>268 269 <div class="keys">270 <div class="row">271 <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>272 </div>273 <div class="row" style="padding: 0 40px;">274 <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>275 </div>276 <div class="row">277 <div class="key green wide">278 <svg width="32" height="32" viewBox="0 0 24 24">279 <path d="M7 17l5-10 5 10" stroke="#2c2c2c" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>280 </svg>281 </div>282 <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>283 <div class="key gray wide">284 <svg width="38" height="38" viewBox="0 0 24 24">285 <path d="M5 7h10l4 5-4 5H5zM8 9l4 3-4 3" fill="none" stroke="#2c2c2c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>286 </svg>287 </div>288 </div>289 <div class="bottom-row">290 <div class="key gray">?123</div>291 <div class="key gray">,</div>292 <div class="key gray">🙂</div>293 <div class="key space"></div>294 <div class="key gray">.</div>295 <div class="search-action">296 <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff">297 <circle cx="11" cy="11" r="7" stroke="#fff" stroke-width="2" fill="none"/>298 <path d="M20 20l-4-4" stroke="#fff" stroke-width="2" stroke-linecap="round"/>299 </svg>300 </div>301 </div>302 </div>303 </div>304</div>305</body>306</html>