GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI - YouTube Style</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin:0; padding:0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target{9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#0f0f0f; color:#fff;11 }12 13 /* Status bar */14 .status-bar{15 height:80px; padding:0 28px; display:flex; align-items:center; justify-content:space-between;16 color:#fff; font-weight:600; font-size:32px; letter-spacing:0.5px;17 }18 .sb-icons{ display:flex; gap:22px; align-items:center; }19 .dot{ width:10px; height:10px; background:#fff; border-radius:50%; opacity:.7; }20 .icon{21 width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; opacity:.9;22 }23 .icon svg{ width:100%; height:100%; fill:#fff; }24 25 /* Video player */26 .video-wrap{ position:relative; width:100%; height:640px; background:#222; }27 .video-img{28 position:absolute; inset:0; display:flex; align-items:center; justify-content:center;29 background:#E0E0E0; color:#555; border-top:1px solid #bdbdbd; border-bottom:1px solid #bdbdbd;30 font-size:34px;31 }32 /* top overlay icons on video */33 .video-top{34 position:absolute; top:12px; left:18px; right:18px; display:flex; align-items:center; justify-content:space-between;35 }36 .video-top .left, .video-top .right{ display:flex; align-items:center; gap:22px; }37 .round{38 width:64px; height:64px; background:rgba(0,0,0,0.45); border-radius:50%; display:flex; align-items:center; justify-content:center;39 }40 .round svg{ width:36px; height:36px; fill:#fff; }41 .center-play{42 position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);43 width:120px; height:120px; border-radius:50%; background:rgba(0,0,0,0.55); display:flex; align-items:center; justify-content:center;44 }45 .center-play svg{ width:70px; height:70px; fill:#fff; }46 /* caption */47 .caption{48 position:absolute; left:60px; right:60px; bottom:120px;49 background:rgba(0,0,0,0.8); padding:18px 22px; border-radius:6px; font-size:34px; line-height:40px;50 }51 /* time + chapter row */52 .time-chapter{53 position:absolute; left:24px; right:24px; bottom:60px; display:flex; align-items:center; justify-content:space-between;54 font-size:30px; color:#d7d7d7;55 }56 .chapter{57 color:#eaeaea; font-weight:600;58 }59 .fullscreen{ width:46px; height:46px; border:2px solid #eaeaea; }60 /* progress */61 .progress{62 position:absolute; left:0; right:0; bottom:0; height:18px; background:#2a2a2a;63 }64 .progress .filled{65 position:absolute; left:0; top:0; height:100%; width:72%;66 background:#ff0000;67 }68 .progress .knob{69 position:absolute; left:72%; top:50%; transform:translate(-50%,-50%);70 width:28px; height:28px; background:#ff3b30; border-radius:50%;71 }72 73 /* Content area */74 .content{ padding:26px 28px 0 28px; }75 76 .title{77 font-size:44px; font-weight:800; line-height:56px; margin:10px 0 8px 0;78 }79 .meta{80 color:#bdbdbd; font-size:30px; margin-bottom:12px;81 }82 .tags{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:12px; }83 .tag{84 font-size:28px; padding:10px 16px; background:#1a1a1a; border:1px solid #2e2e2e; border-radius:18px; color:#d9d9d9;85 }86 87 .channel-row{88 display:flex; align-items:center; justify-content:space-between; margin:16px 0 8px;89 }90 .channel-info{ display:flex; align-items:center; gap:18px; }91 .avatar{92 width:78px; height:78px; border-radius:50%; background:#E0E0E0; border:1px solid #bdbdbd; color:#666; display:flex; align-items:center; justify-content:center; font-size:20px;93 }94 .ch-text{ display:flex; flex-direction:column; }95 .ch-name{ font-size:34px; font-weight:700; }96 .ch-subs{ font-size:26px; color:#c9c9c9; }97 .subscribe{98 background:#fff; color:#000; padding:18px 28px; border-radius:40px; font-weight:700; font-size:30px;99 }100 101 /* Actions row */102 .actions{ display:flex; gap:24px; margin:22px 0; flex-wrap:wrap; }103 .action{104 background:#1a1a1a; border-radius:26px; padding:18px 24px; display:flex; align-items:center; gap:18px;105 border:1px solid #2c2c2c;106 }107 .ab-ico{ width:52px; height:52px; background:#2a2a2a; border-radius:50%; display:flex; align-items:center; justify-content:center; }108 .ab-ico svg{ width:30px; height:30px; fill:#fff; }109 .action span{ font-size:28px; color:#e8e8e8; }110 111 /* Comments */112 .comments-wrap{ margin-top:6px; }113 .comments-title{ font-size:34px; font-weight:800; margin-bottom:12px; }114 .comment-card{115 background:#181818; border:1px solid #2b2b2b; border-radius:22px; padding:22px; color:#e4e4e4; font-size:30px; line-height:42px;116 }117 .comment-top{ display:flex; align-items:center; gap:14px; margin-bottom:6px; color:#ffd85e; }118 .emoji{ font-size:30px; }119 .ellipsis{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }120 121 /* Store */122 .store-head{123 margin:28px 0 10px; font-size:38px; font-weight:800;124 }125 .store-sub{ color:#bdbdbd; font-size:28px; margin-bottom:18px; }126 .cards{ display:flex; gap:22px; }127 .card{128 width:320px; background:#141414; border:1px solid #2b2b2b; border-radius:18px; overflow:hidden;129 }130 .card .img{131 height:330px; background:#E0E0E0; border-bottom:1px solid #bdbdbd; display:flex; align-items:center; justify-content:center; color:#666; font-size:28px; padding:10px; text-align:center;132 }133 .price{ padding:14px 16px; font-size:28px; color:#eaeaea; }134 135 /* Ad banner */136 .ad{137 margin-top:26px; background:#dbeeff; color:#000; border-radius:16px; padding:34px 24px;138 }139 .ad .line1{ font-size:48px; font-weight:800; }140 .ad .line2{ font-size:48px; font-weight:800; }141</style>142</head>143<body>144<div id="render-target">145 146 <!-- Status bar -->147 <div class="status-bar">148 <div>9:58</div>149 <div class="sb-icons">150 <div class="dot"></div>151 <div class="dot"></div>152 <div class="dot"></div>153 <div class="dot"></div>154 <div class="icon">155 <svg viewBox="0 0 24 24"><path d="M17,7H7C5.34,7 4,8.34 4,10v4c0,1.66 1.34,3 3,3h10c1.66,0 3-1.34 3-3v-4C20,8.34 18.66,7 17,7zM7,15c-0.55,0-1-0.45-1-1v-4c0-0.55 0.45-1 1-1h10c0.55,0 1,0.45 1,1v4c0,0.55-0.45,1-1,1H7z"/></svg>156 </div>157 <div class="icon">158 <svg viewBox="0 0 24 24"><path d="M12 4a8 8 0 100 16 8 8 0 000-16zm1 9h-2V7h2v6zm0 4h-2v-2h2v2z"/></svg>159 </div>160 </div>161 </div>162 163 <!-- Video player -->164 <div class="video-wrap">165 <div class="video-img">[IMG: Video frame - Singapore Travel]</div>166 167 <div class="video-top">168 <div class="left">169 <div class="round"><svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></div>170 <div class="round"><svg viewBox="0 0 24 24"><path d="M10 8v8l6-4-6-4z"/></svg></div>171 </div>172 <div class="right">173 <div class="round"><svg viewBox="0 0 24 24"><path d="M21 3H3v18h18V3zm-2 16H5V5h14v14z"/></svg></div>174 <div class="round"><svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14l4-4h12c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></svg></div>175 <div class="round"><svg viewBox="0 0 24 24"><path d="M12 8v8M8 12h8" stroke="#fff" stroke-width="2" fill="none"/></svg></div>176 <div class="round"><svg viewBox="0 0 24 24"><path d="M6 6h12v12H6z" fill="none" stroke="#fff" stroke-width="2"/></svg></div>177 </div>178 </div>179 180 <div class="center-play">181 <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>182 </div>183 184 <div class="caption">Some of the main attractions in the airport include:</div>185 186 <div class="time-chapter">187 <div>8:01 / 12:49 · <span class="chapter">5. Changi Airport</span></div>188 <div class="fullscreen"></div>189 </div>190 191 <div class="progress">192 <div class="filled"></div>193 <div class="knob"></div>194 </div>195 </div>196 197 <!-- Content -->198 <div class="content">199 <div class="title">TOP 10 things to do in SINGAPORE | Travel Guide 4K</div>200 <div class="meta">1.8M views · 3y ago</div>201 <div class="tags">202 <div class="tag">#singapore</div>203 <div class="tag">#travelguide</div>204 <div class="tag">#more</div>205 </div>206 207 <div class="channel-row">208 <div class="channel-info">209 <div class="avatar">Logo</div>210 <div class="ch-text">211 <div class="ch-name">Hungry Passport</div>212 <div class="ch-subs">244K subscribers</div>213 </div>214 </div>215 <div class="subscribe">Subscribe</div>216 </div>217 218 <div class="actions">219 <div class="action">220 <div class="ab-ico"><svg viewBox="0 0 24 24"><path d="M12 21s-6-4.35-8.5-7.14C1.57 11.74 1 9.97 1 8.5 1 6 3 4 5.5 4 7 4 8.5 4.81 9.4 6.09 10.3 4.81 11.8 4 13.3 4 15.8 4 17.8 6 17.8 8.5c0 1.47-.57 3.24-2.5 5.36C18 16.65 12 21 12 21z"/></svg></div>221 <span>15K</span>222 </div>223 <div class="action">224 <div class="ab-ico"><svg viewBox="0 0 24 24"><path d="M4 12v-2h11V7l5 5-5 5v-3z"/></svg></div>225 <span>Share</span>226 </div>227 <div class="action">228 <div class="ab-ico"><svg viewBox="0 0 24 24"><path d="M7 7h10v2H7zm0 4h10v2H7zm0 4h10v2H7z"/></svg></div>229 <span>Remix</span>230 </div>231 <div class="action">232 <div class="ab-ico"><svg viewBox="0 0 24 24"><path d="M5 20h14v-2H5m7-14l-5.5 6H11v6h2v-6h4.5L12 4z"/></svg></div>233 <span>Download</span>234 </div>235 </div>236 237 <div class="comments-wrap">238 <div class="comments-title">Comments 453</div>239 <div class="comment-card">240 <div class="comment-top"><span class="emoji">🐣</span> Top comment</div>241 <div class="ellipsis">Singapore is the country that I never get tired of visiting. Cleanest and most efficient country of the wo...</div>242 </div>243 </div>244 245 <div class="store-head">Shop the Hungry Passport store</div>246 <div class="store-sub">From Spring</div>247 <div class="cards">248 <div class="card">249 <div class="img">[IMG: Blue Hoodie - Los Angeles print]</div>250 <div class="price">₹3,842.92</div>251 </div>252 <div class="card">253 <div class="img">[IMG: Navy T‑Shirt - Los Angeles print]</div>254 <div class="price">₹2,046.77</div>255 </div>256 <div class="card">257 <div class="img">[IMG: Black T‑Shirt - Los Angeles print]</div>258 <div class="price">₹2,210.58</div>259 </div>260 </div>261 262 <div class="ad" style="margin-bottom:20px;">263 <div class="line1">Go City - Singapore - Buy Direct</div>264 <div class="line2">Official Site</div>265 </div>266 </div>267 268</div>269</body>270</html>