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; }7 #render-target {8 width: 1080px; height: 2400px;9 position: relative; overflow: hidden;10 background: #0b0b0b; color: #fff; font-family: Arial, Helvetica, sans-serif;11 }12 .status-bar {13 height: 90px; background: #000; padding: 0 30px;14 display: flex; align-items: center; justify-content: space-between;15 font-size: 32px; color: #dcdcdc;16 }17 .status-left { display: flex; align-items: center; gap: 18px; }18 .status-right { display: flex; align-items: center; gap: 24px; }19 .icon {20 width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;21 fill: #dcdcdc;22 }23 .search-bar {24 height: 120px; background: #0b0b0b; display: flex; align-items: center;25 padding: 0 24px; gap: 24px;26 border-bottom: 1px solid #141414;27 }28 .round {29 width: 86px; height: 86px; border-radius: 50%; background: #1f1f1f;30 display: flex; align-items: center; justify-content: center;31 }32 .back-btn { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }33 .search-input {34 flex: 1; height: 86px; border-radius: 43px; background: #1d1d1d; color: #fff;35 display: flex; align-items: center; padding: 0 36px; font-size: 36px; border: 1px solid #2a2a2a;36 }37 .search-input span { color: #cfcfcf; }38 .section { padding: 20px 0; }39 .img-placeholder {40 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;41 display: flex; align-items: center; justify-content: center; text-align: center;42 font-size: 30px; line-height: 1.3;43 }44 .ad-card { padding: 24px; }45 .ad-header { display: flex; align-items: center; gap: 24px; }46 .fb-logo {47 width: 70px; height: 70px; border-radius: 50%; background: #1877F2;48 display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 42px;49 }50 .title-row { display: flex; justify-content: space-between; align-items: center; }51 .video-title {52 font-size: 38px; line-height: 48px; color: #fff; margin-top: 10px;53 }54 .subtitle { color: #b8b8b8; font-size: 30px; margin-top: 6px; }55 .ad-meta { color: #b8b8b8; font-size: 30px; margin-top: 8px; }56 .ad-actions { display: flex; gap: 24px; margin-top: 22px; }57 .btn-dark {58 background: #1b1b1b; color: #fff; border: 2px solid #2a2a2a; border-radius: 50px;59 padding: 22px 60px; font-size: 38px;60 }61 .btn-primary {62 background: #4ea1ff; color: #fff; border: none; border-radius: 50px;63 padding: 22px 60px; font-size: 38px;64 box-shadow: inset 0 -4px 0 rgba(0,0,0,0.15);65 }66 .video-card { padding: 0 24px; }67 .thumb {68 width: 1032px; height: 552px; border-radius: 12px; overflow: hidden;69 position: relative;70 }71 .duration {72 position: absolute; bottom: 18px; right: 18px;73 background: rgba(0,0,0,0.75); color: #fff; padding: 10px 14px; border-radius: 8px;74 font-size: 28px;75 }76 .video-meta { display: flex; align-items: flex-start; justify-content: space-between; margin-top: 16px; }77 .meta-left { max-width: 900px; }78 .menu-dot { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }79 /* mini player */80 .mini-player {81 position: absolute; bottom: 240px; left: 0; width: 100%;82 background: #101010; border-top: 1px solid #222;83 padding: 16px 24px; display: flex; align-items: center; gap: 20px;84 }85 .mini-progress {86 position: absolute; top: -6px; left: 0; width: 100%; height: 6px; background: #ff0000;87 }88 .mini-thumb { width: 180px; height: 100px; border-radius: 8px; overflow: hidden; }89 .mini-info { flex: 1; }90 .mini-title { font-size: 34px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }91 .mini-channel { font-size: 26px; color: #b8b8b8; margin-top: 4px; }92 .mini-controls { display: flex; align-items: center; gap: 26px; }93 /* bottom nav */94 .bottom-nav {95 position: absolute; bottom: 0; left: 0; width: 100%; height: 240px;96 background: #0f0f0f; border-top: 1px solid #202020;97 display: flex; justify-content: space-around; align-items: center;98 }99 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 16px; color: #cfcfcf; font-size: 28px; }100 .nav-icon { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; fill: #cfcfcf; }101</style>102</head>103<body>104<div id="render-target">105 106 <!-- Status bar -->107 <div class="status-bar">108 <div class="status-left">109 <span>11:36</span>110 </div>111 <div class="status-right">112 <!-- simple wifi -->113 <svg class="icon" viewBox="0 0 24 24">114 <path d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 4c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm6 6l-3-3 3-3 3 3-3 3z"></path>115 </svg>116 <!-- tiny ring to hint cellular -->117 <svg class="icon" viewBox="0 0 24 24">118 <path d="M3 17h2V7H3v10zm4 0h2V10H7v7zm4 0h2V4h-2v13zm4 0h2V13h-2v4zm4 0h2V6h-2v11z"></path>119 </svg>120 <!-- battery -->121 <svg class="icon" viewBox="0 0 24 24">122 <path d="M17 6h2v2h2v8h-2v2h-2V6zM2 8c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2v8c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V8zm2 0h10v8H4V8z"></path>123 </svg>124 </div>125 </div>126 127 <!-- Search header -->128 <div class="search-bar">129 <div class="back-btn">130 <svg class="icon" viewBox="0 0 24 24">131 <path d="M20 11H7.8l6.4-6.4L13 3 4 12l9 9 1.2-1.6L7.8 13H20z"></path>132 </svg>133 </div>134 <div class="search-input">135 <span>pop music.</span>136 </div>137 <div class="round">138 <svg class="icon" viewBox="0 0 24 24">139 <path d="M12 3c1.7 0 3 1.3 3 3v6c0 1.7-1.3 3-3 3s-3-1.3-3-3V6c0-1.7 1.3-3 3-3zm-1 15h2v3h-2z"></path>140 </svg>141 </div>142 <div class="round" style="background:#1f1f1f;">143 <svg class="icon" viewBox="0 0 24 24">144 <path d="M3 5h18v10H3V5zm2 12h14v2H5v-2zm12-8H7v4h10V9z"></path>145 </svg>146 </div>147 <div class="round" style="background:#1f1f1f;">148 <svg class="icon" viewBox="0 0 24 24">149 <path d="M12 5a2 2 0 110 4 2 2 0 010-4zm0 5a2 2 0 110 4 2 2 0 010-4zm0 5a2 2 0 110 4 2 2 0 010-4z"></path>150 </svg>151 </div>152 </div>153 154 <!-- Ad image -->155 <div class="section">156 <div class="img-placeholder" style="width:1080px; height:560px;">157 [IMG: Outdoor selfie with friends by riverside]158 </div>159 </div>160 161 <!-- Ad details -->162 <div class="ad-card">163 <div class="ad-header title-row">164 <div style="display:flex; align-items:center; gap:24px;">165 <div class="fb-logo">f</div>166 <div>167 <div style="font-size:42px; font-weight:bold;">Make Your Profile More Private | Facebook</div>168 <div class="subtitle">Lock your profile to share tension free with only your friends on Facebook</div>169 <div class="ad-meta">Ad · 4.0★ FREE</div>170 </div>171 </div>172 <div class="menu-dot">173 <svg class="icon" viewBox="0 0 24 24">174 <path d="M12 5a2 2 0 110 4 2 2 0 010-4zm0 5a2 2 0 110 4 2 2 0 010-4zm0 5a2 2 0 110 4 2 2 0 010-4z"></path>175 </svg>176 </div>177 </div>178 <div class="ad-actions">179 <div class="btn-dark">Watch</div>180 <div class="btn-primary">Install</div>181 </div>182 </div>183 184 <!-- Video item -->185 <div class="video-card">186 <div class="thumb">187 <div class="img-placeholder" style="width:100%; height:100%">188 [IMG: Top Songs 2023 poster with Billboard, Spotify & TikTok logos]189 </div>190 <div class="duration">2:34:46</div>191 </div>192 193 <div class="video-meta">194 <div class="meta-left">195 <div class="video-title">Billboard Hot 100 - Best Pop Music Playlist 2023 - Miley Cyrus, Rihanna, Selena Gomez, Th...</div>196 <div class="subtitle">Music Collection · 1.7K views · 1 day ago</div>197 </div>198 <div class="menu-dot">199 <svg class="icon" viewBox="0 0 24 24">200 <path d="M12 5a2 2 0 110 4 2 2 0 010-4zm0 5a2 2 0 110 4 2 2 0 010-4zm0 5a2 2 0 110 4 2 2 0 010-4z"></path>201 </svg>202 </div>203 </div>204 </div>205 206 <!-- Mini player -->207 <div class="mini-player">208 <div class="mini-progress"></div>209 <div class="mini-thumb img-placeholder">[IMG: Music playlist thumbnail]</div>210 <div class="mini-info">211 <div class="mini-title">Billboard Hot 100 - Best Pop Music...</div>212 <div class="mini-channel">Music Collection</div>213 </div>214 <div class="mini-controls">215 <svg class="icon" viewBox="0 0 24 24" style="width:60px;height:60px;">216 <path d="M8 5h3v14H8V5zm5 0h3v14h-3V5z"></path>217 </svg>218 <svg class="icon" viewBox="0 0 24 24" style="width:60px;height:60px;">219 <path d="M6 6l12 6-12 6V6z"></path>220 </svg>221 <svg class="icon" viewBox="0 0 24 24" style="width:60px;height:60px;">222 <path d="M6 6l12 12M6 18L18 6" stroke="#dcdcdc" stroke-width="2" fill="none"></path>223 </svg>224 </div>225 </div>226 227 <!-- Bottom navigation -->228 <div class="bottom-nav">229 <div class="nav-item">230 <svg class="nav-icon" viewBox="0 0 24 24">231 <path d="M12 3l9 8h-3v8H6v-8H3l9-8z"></path>232 </svg>233 <div>Home</div>234 </div>235 <div class="nav-item">236 <svg class="nav-icon" viewBox="0 0 24 24">237 <path d="M6 4l12 8-12 8V4z"></path>238 </svg>239 <div>Shorts</div>240 </div>241 <div class="nav-item">242 <svg class="nav-icon" viewBox="0 0 24 24">243 <path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5z"></path>244 </svg>245 </div>246 <div class="nav-item">247 <svg class="nav-icon" viewBox="0 0 24 24">248 <path d="M4 6h16v2H4V6zm0 5h16v2H4v-2zm0 5h16v2H4v-2z"></path>249 </svg>250 <div>Subscriptions</div>251 </div>252 <div class="nav-item">253 <svg class="nav-icon" viewBox="0 0 24 24">254 <path d="M4 6h10v12H4V6zm12 0h4v12h-4V6z"></path>255 </svg>256 <div>Library</div>257 </div>258 </div>259 260</div>261</body>262</html>