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 position:relative;9 overflow:hidden;10 width:1080px;11 height:2400px;12 background:#f7f9fc;13 border-radius:0;14 }15 /* Top app header */16 .header{17 position:absolute;18 top:0;left:0;right:0;19 height:250px;20 background:#2e8bd6;21 color:#fff;22 }23 .statusbar{24 height:60px;25 display:flex;26 align-items:center;27 padding:0 24px;28 font-weight:600;29 font-size:32px;30 }31 .statusbar .time{flex:0 0 auto;}32 .status-icons{33 margin-left:auto;34 display:flex;35 align-items:center;36 gap:22px;37 }38 .status-icons svg{width:34px;height:34px;fill:#fff;}39 .search-area{40 display:flex;41 align-items:center;42 padding:20px 24px;43 gap:20px;44 }45 .back-btn{46 width:60px;height:60px;display:flex;align-items:center;justify-content:center;47 }48 .search-pill{49 flex:1;50 height:100px;51 border-radius:50px;52 background:#4caaf0;53 display:flex;54 align-items:center;55 padding:0 32px;56 box-shadow:inset 0 0 0 2px rgba(255,255,255,0.25);57 font-size:44px;58 font-weight:600;59 color:#fff;60 }61 .close-btn{62 width:72px;height:72px;background:#66b8f3;border-radius:36px;63 display:flex;align-items:center;justify-content:center;64 box-shadow:inset 0 0 0 2px rgba(255,255,255,0.35);65 }66 .tabs{67 position:absolute;left:0;right:0;top:250px;68 height:90px;background:#ffffff;69 display:flex;align-items:center;padding:0 24px;gap:40px;70 border-bottom:1px solid #e6eef6;71 color:#666;72 font-size:36px;73 font-weight:600;74 }75 .tab{padding:24px 8px;}76 .tab.active{color:#2e8bd6;position:relative;}77 .tab.active::after{78 content:"";position:absolute;left:0;right:0;bottom:-2px;height:6px;background:#2e8bd6;border-radius:3px;79 }80 /* List items */81 .content{82 position:absolute;top:340px;left:0;right:0;bottom:1000px;83 overflow:hidden;84 padding:16px 24px;85 background:#fff;86 }87 .video-item{88 display:flex;gap:24px;align-items:flex-start;89 padding:18px 0;90 border-bottom:1px solid #eef2f7;91 }92 .thumb{93 width:300px;height:170px;background:#E0E0E0;border:1px solid #BDBDBD;94 display:flex;align-items:center;justify-content:center;color:#757575;font-size:28px;font-weight:600;position:relative;95 }96 .duration{97 position:absolute;right:8px;bottom:8px;background:#000;color:#fff;padding:6px 10px;border-radius:6px;font-size:24px;98 opacity:0.8;99 }100 .details{flex:1;}101 .title{102 font-size:40px;color:#1a1a1a;font-weight:700;line-height:1.2;margin-bottom:8px;103 }104 .meta{105 font-size:32px;color:#6b6f78;margin-bottom:8px;106 }107 .stats{108 font-size:30px;color:#7a7f88;109 }110 .dots{111 width:60px;height:60px;display:flex;align-items:center;justify-content:center;margin-left:auto;112 }113 .dots span{114 width:10px;height:10px;background:#7a7f88;border-radius:50%;display:block;margin:4px 0;115 }116 /* Keyboard overlay */117 .keyboard{118 position:absolute;left:0;right:0;bottom:0;height:1000px;background:#1f2124;color:#fff;119 border-top-left-radius:28px;border-top-right-radius:28px;120 box-shadow:0 -6px 18px rgba(0,0,0,0.15);121 }122 .suggestions{123 height:110px;display:flex;align-items:center;gap:28px;padding:0 24px;border-bottom:1px solid #2b2f34;124 font-size:40px;125 }126 .pill{127 background:#2a2d31;color:#cfd8dc;padding:18px 24px;border-radius:18px;128 }129 .suggestions .spacer{flex:1;}130 .keys{131 padding:24px 16px;132 }133 .row{display:flex;justify-content:space-between;margin:24px 0;}134 .key{135 width:90px;height:110px;background:#2b2f34;border-radius:18px;136 display:flex;align-items:center;justify-content:center;font-size:42px;color:#e7ecef;137 box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06);138 }139 .key.wide{width:140px;}140 .space{flex:1;height:110px;background:#2b2f34;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:38px;color:#bec6cb;margin:0 16px;}141 .bottom-row{display:flex;align-items:center;gap:16px;margin-top:20px;}142 .search-circle{143 width:120px;height:120px;border-radius:60px;background:#66b8f3;display:flex;align-items:center;justify-content:center;margin-left:auto;144 }145 .emoji{width:120px;height:110px;background:#2b2f34;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:44px;}146 .comma{width:90px;height:110px;background:#2b2f34;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:44px;}147 .nav-indicator{148 position:absolute;bottom:14px;left:50%;transform:translateX(-50%);149 width:240px;height:10px;background:#cfd8dc;border-radius:5px;opacity:0.6;150 }151</style>152</head>153<body>154<div id="render-target">155 156 <div class="header">157 <div class="statusbar">158 <span class="time">12:52</span>159 <div class="status-icons">160 <!-- simple icons -->161 <svg viewBox="0 0 24 24"><path d="M3 17h18v2H3zM6 13h12v2H6zM9 9h6v2H9z"/></svg>162 <svg viewBox="0 0 24 24"><path d="M16 4h-8l-2 2v12l2 2h8l2-2V6l-2-2zm-8 2h8v12h-8V6z"/></svg>163 <svg viewBox="0 0 24 24"><path d="M7 7h10v10H7z"/></svg>164 </div>165 </div>166 <div class="search-area">167 <div class="back-btn">168 <svg viewBox="0 0 24 24" width="40" height="40" fill="#fff"><path d="M15.5 5l-8 7 8 7v-4.5L11 12l4.5-3.5V5z"/></svg>169 </div>170 <div class="search-pill">stock market tips</div>171 <div class="close-btn">172 <svg viewBox="0 0 24 24" width="36" height="36" fill="#fff"><path d="M18 6L6 18M6 6l12 12" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>173 </div>174 </div>175 </div>176 177 <div class="tabs">178 <div class="tab">My account</div>179 <div class="tab active">On Vimeo</div>180 </div>181 182 <div class="content">183 <!-- Item 1 -->184 <div class="video-item">185 <div class="thumb">186 [IMG: Video Thumbnail]187 <div class="duration">00:56</div>188 </div>189 <div class="details">190 <div class="title">Commodity Tips, Stock Market Tips, Share market ...</div>191 <div class="meta">Ramesh</div>192 <div class="stats">5 years ago</div>193 </div>194 <div class="dots">195 <span></span><span></span><span></span>196 </div>197 </div>198 <!-- Item 2 -->199 <div class="video-item">200 <div class="thumb">201 [IMG: Interview-style Video]202 <div class="duration">01:36</div>203 </div>204 <div class="details">205 <div class="title">Stock Market Tips Train Yourself To Success in Sto...</div>206 <div class="meta">Yatharth Dass</div>207 <div class="stats">9 views • 7 years ago</div>208 </div>209 <div class="dots">210 <span></span><span></span><span></span>211 </div>212 </div>213 <!-- Item 3 -->214 <div class="video-item">215 <div class="thumb">216 [IMG: News Broadcast Frame]217 <div class="duration">02:22</div>218 </div>219 <div class="details">220 <div class="title">Stock Market Trading Tips & News</div>221 <div class="meta">Vaidehi Singh</div>222 <div class="stats">5 views • 4 years ago</div>223 </div>224 <div class="dots">225 <span></span><span></span><span></span>226 </div>227 </div>228 <!-- Item 4 (partial) -->229 <div class="video-item">230 <div class="thumb">231 [IMG: Solid Color Slide]232 </div>233 <div class="details">234 <div class="title">Stock Market Today Tips</div>235 <div class="meta">GilBurt</div>236 </div>237 <div class="dots">238 <span></span><span></span><span></span>239 </div>240 </div>241 </div>242 243 <!-- Keyboard Overlay -->244 <div class="keyboard">245 <div class="suggestions">246 <div class="pill">tips</div>247 <div class="pill">tipsy</div>248 <div class="spacer"></div>249 <svg viewBox="0 0 24 24" width="48" height="48" fill="#cfd8dc">250 <path d="M15.5 14h-.79l-.28-.27A6.5 6.5 0 1 0 16 14.5l.5.5v2l5 5 1.5-1.5-5-5h-2zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/>251 </svg>252 </div>253 <div class="keys">254 <div class="row">255 <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>256 </div>257 <div class="row">258 <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>259 </div>260 <div class="row">261 <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>262 </div>263 <div class="bottom-row">264 <div class="key wide">?123</div>265 <div class="key">,</div>266 <div class="emoji">😊</div>267 <div class="space">space</div>268 <div class="key">.</div>269 <div class="search-circle">270 <svg viewBox="0 0 24 24" width="52" height="52" fill="#fff">271 <path d="M15.5 14h-.79l-.28-.27A6.5 6.5 0 1 0 16 14.5l4.5 4.5-1.5 1.5-4.5-4.5v-1zM9.5 14A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/>272 </svg>273 </div>274 </div>275 </div>276 <div class="nav-indicator"></div>277 </div>278 279</div>280</body>281</html>