GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>YouTube Style Video Page - Singapore</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: #121212;13 color: #fff;14 }15 16 /* Status bar */17 .status-bar {18 height: 90px;19 padding: 0 36px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 color: #eaeaea;24 font-size: 36px;25 }26 .status-left { display: flex; align-items: center; gap: 20px; }27 .status-right { display: flex; align-items: center; gap: 26px; }28 .dot { width: 10px; height: 10px; background: #eaeaea; border-radius: 50%; display: inline-block; }29 30 /* Video area */31 .video-area {32 position: relative;33 width: 100%;34 height: 620px;35 background: #1a1a1a;36 }37 .video-thumb {38 position: absolute;39 inset: 0;40 background: #E0E0E0;41 border: 1px solid #BDBDBD;42 display: flex;43 align-items: center;44 justify-content: center;45 color: #555;46 font-size: 34px;47 letter-spacing: 0.5px;48 }49 .video-controls {50 position: absolute;51 inset: 0;52 padding: 20px 30px;53 display: flex;54 flex-direction: column;55 justify-content: space-between;56 }57 .vc-top {58 display: flex;59 align-items: center;60 justify-content: space-between;61 }62 .vc-top-left, .vc-top-right { display: flex; align-items: center; gap: 24px; }63 .icon-btn {64 width: 56px; height: 56px; border-radius: 28px;65 display: flex; align-items: center; justify-content: center;66 background: rgba(255,255,255,0.1);67 }68 .icon-btn svg { width: 30px; height: 30px; fill: #fff; }69 .center-controls {70 display: flex; align-items: center; justify-content: center; gap: 120px;71 }72 .center-round {73 width: 86px; height: 86px; background: rgba(255,255,255,0.12); border-radius: 43px;74 display: flex; align-items: center; justify-content: center;75 }76 .center-round svg { width: 42px; height: 42px; fill: #fff; }77 .vc-bottom {78 display: flex; align-items: center; justify-content: space-between; color: #ddd;79 font-size: 28px;80 }81 .progress-wrap { position: relative; height: 8px; background: #333; border-radius: 4px; margin-top: 12px; }82 .progress {83 position: absolute; left: 0; top: 0; height: 8px; width: 320px; background: #e53935; border-radius: 4px;84 }85 .progress-dot {86 position: absolute; left: 300px; top: -6px; width: 20px; height: 20px; background: #e53935; border-radius: 50%;87 box-shadow: 0 0 0 3px rgba(229,57,53,0.4);88 }89 90 /* Content section */91 .content {92 padding: 24px 36px 0 36px;93 }94 .title {95 font-size: 52px;96 font-weight: 700;97 line-height: 1.2;98 margin-top: 18px;99 }100 .meta {101 margin-top: 18px; color: #bdbdbd; font-size: 28px;102 }103 .channel-row {104 margin-top: 26px;105 display: flex; align-items: center; justify-content: space-between;106 }107 .channel-left { display: flex; align-items: center; gap: 24px; }108 .avatar {109 width: 84px; height: 84px; border-radius: 50%; background: #E0E0E0; border: 1px solid #BDBDBD;110 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 20px;111 }112 .ch-name { font-size: 36px; font-weight: 700; }113 .subs { font-size: 28px; color: #bdbdbd; }114 .subscribe-btn {115 background: #fff; color: #000; padding: 22px 34px; border-radius: 40px; font-weight: 700; font-size: 30px;116 }117 118 /* Action buttons */119 .actions { margin-top: 20px; display: flex; gap: 20px; flex-wrap: nowrap; overflow: hidden; }120 .action-btn {121 flex: 0 0 200px;122 background: #1f1f1f; border-radius: 40px; padding: 18px 24px;123 display: flex; align-items: center; justify-content: center; gap: 12px; color: #fff;124 }125 .action-btn svg { width: 26px; height: 26px; fill: #fff; }126 .action-label { font-size: 28px; }127 .count { color: #bdbdbd; font-size: 26px; margin-left: 6px; }128 129 /* Comments card */130 .comments-card {131 margin-top: 28px;132 background: #1a1a1a; border-radius: 24px; padding: 28px; border: 1px solid #262626;133 }134 .comments-header { color: #fff; font-size: 36px; font-weight: 700; display: flex; align-items: center; gap: 14px; }135 .comment-body { margin-top: 20px; display: flex; align-items: flex-start; gap: 18px; color: #e0e0e0; font-size: 30px; line-height: 1.4; }136 .emoji {137 width: 60px; height: 60px; border-radius: 30px; background: #f1c40f; display: flex; align-items: center; justify-content: center; color: #000; font-weight: 700;138 }139 .chevron {140 margin-left: auto;141 width: 36px; height: 36px;142 }143 144 /* Store */145 .store-title {146 margin-top: 40px;147 font-size: 42px;148 font-weight: 700;149 }150 .from-spring {151 color: #bdbdbd; font-size: 30px; margin-top: 8px;152 }153 .products {154 margin-top: 26px;155 display: grid;156 grid-template-columns: repeat(4, 1fr);157 gap: 20px;158 }159 .product-card {160 background: #1a1a1a; border-radius: 26px; padding: 20px; border: 1px solid #252525;161 }162 .prod-img {163 height: 280px; background: #E0E0E0; border: 1px solid #BDBDBD;164 display: flex; align-items: center; justify-content: center; color: #666; font-size: 28px;165 border-radius: 16px;166 }167 .price { margin-top: 12px; color: #e0e0e0; font-size: 28px; }168 169 /* Bottom banner */170 .banner {171 margin-top: 40px;172 background: #cfe8ff;173 color: #000;174 border-radius: 10px;175 padding: 32px 28px;176 font-size: 58px;177 font-weight: 700;178 line-height: 1.2;179 }180 181 /* Divider lines and helpers */182 .thin-divider { height: 1px; background: #222; margin-top: 16px; }183</style>184</head>185<body>186<div id="render-target">187 188 <!-- Status Bar -->189 <div class="status-bar">190 <div class="status-left">191 <span>9:55</span>192 <span class="dot"></span>193 <span class="dot"></span>194 <span class="dot"></span>195 <span class="dot"></span>196 </div>197 <div class="status-right">198 <!-- WiFi Icon -->199 <svg viewBox="0 0 24 24" width="40" height="40">200 <path fill="#eaeaea" d="M2 8c5.5-4.5 14.5-4.5 20 0l-2 2c-4.5-3.5-11.5-3.5-16 0L2 8zm4 4c3.8-3 10.2-3 14 0l-2 2c-2.8-2.2-7.2-2.2-10 0l-2-2zm4 4c2-1.5 6-1.5 8 0l-4 4-4-4z"/>201 </svg>202 <!-- Battery Icon -->203 <svg viewBox="0 0 24 24" width="40" height="40">204 <rect x="1" y="6" width="18" height="12" rx="2" ry="2" fill="#eaeaea"></rect>205 <rect x="3" y="8" width="12" height="8" fill="#2ecc71"></rect>206 <rect x="19" y="10" width="3" height="8" fill="#eaeaea"></rect>207 </svg>208 </div>209 </div>210 211 <!-- Video Area -->212 <div class="video-area">213 <div class="video-thumb">[IMG: Singapore riverside night view with boats]</div>214 215 <div class="video-controls">216 <div class="vc-top">217 <div class="vc-top-left">218 <div class="icon-btn">219 <!-- Back Arrow -->220 <svg viewBox="0 0 24 24"><path d="M15 6 L9 12 L15 18" stroke="#fff" stroke-width="2" fill="none"/></svg>221 </div>222 </div>223 <div class="vc-top-right">224 <div class="icon-btn">225 <!-- Cast -->226 <svg viewBox="0 0 24 24"><path d="M4 6h16v10h-8M2 18h3c-1.5-2-3-3-5-3v3z" fill="#fff"/></svg>227 </div>228 <div class="icon-btn">229 <!-- CC -->230 <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2" fill="#fff"/><text x="12" y="15" font-size="9" text-anchor="middle" fill="#000">CC</text></svg>231 </div>232 <div class="icon-btn">233 <!-- Gear -->234 <svg viewBox="0 0 24 24"><path d="M12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm9 4l-2 1 1 3-2 2-3-1-1 2h-4l-1-2-3 1-2-2 1-3-2-1V8l2-1-1-3 2-2 3 1 1-2h4l1 2 3-1 2 2-1 3 2 1v4z" fill="#fff"/></svg>235 </div>236 <div class="icon-btn">237 <!-- Close -->238 <svg viewBox="0 0 24 24"><path d="M6 6 L18 18 M18 6 L6 18" stroke="#fff" stroke-width="2" /></svg>239 </div>240 </div>241 </div>242 243 <div class="center-controls">244 <div class="center-round">245 <!-- Replay 10 -->246 <svg viewBox="0 0 24 24"><path d="M12 6v-4l-4 4 4 4V8c2.2 0 4 1.8 4 4s-1.8 4-4 4a4 4 0 0 1-4-4H6c0 3.3 2.7 6 6 6s6-2.7 6-6-2.7-6-6-6z" /></svg>247 </div>248 <div class="center-round" style="width:100px;height:100px;border-radius:50px;background:rgba(255,255,255,0.15);">249 <!-- Play -->250 <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7-11-7z"/></svg>251 </div>252 <div class="center-round">253 <!-- Forward 10 -->254 <svg viewBox="0 0 24 24"><path d="M12 6v-4l4 4-4 4V8c-2.2 0-4 1.8-4 4s1.8 4 4 4a4 4 0 0 0 4-4h2c0 3.3-2.7 6-6 6s-6-2.7-6-6 2.7-6 6-6z"/></svg>255 </div>256 </div>257 258 <div class="vc-bottom">259 <div>5:11 / 12:49 • 6. Shopping</div>260 <div>261 <!-- Fullscreen icon -->262 <svg viewBox="0 0 24 24" width="40" height="40"><path fill="#ddd" d="M7 7h4V5H5v6h2V7zm10 0v4h2V5h-6v2h4zm0 10h-4v2h6v-6h-2v4zM7 17v-4H5v6h6v-2H7z"/></svg>263 </div>264 </div>265 <div class="progress-wrap">266 <div class="progress"></div>267 <div class="progress-dot"></div>268 </div>269 </div>270 </div>271 272 <!-- Content -->273 <div class="content">274 <div class="title">TOP 10 things to do in SINGAPORE | Travel Guide 4K</div>275 <div class="meta">1.8M views • 3y ago • #singapore #travelguide ...more</div>276 277 <div class="channel-row">278 <div class="channel-left">279 <div class="avatar">[Avatar]</div>280 <div>281 <div class="ch-name">Hungry Passport</div>282 <div class="subs">244K</div>283 </div>284 </div>285 <div class="subscribe-btn">Subscribe</div>286 </div>287 288 <!-- Action buttons -->289 <div class="actions">290 <div class="action-btn">291 <svg viewBox="0 0 24 24"><path d="M12 21l-1.5-1.4C5 15 2 12.4 2 9.2 2 7 3.7 5 6 5c1.6 0 3 .8 4 2.1C11 5.8 12.4 5 14 5c2.3 0 4 2 4 4.2 0 3.2-3 5.8-8.5 10.4L12 21z"/></svg>292 <span class="action-label">Like</span>293 <span class="count">15K</span>294 </div>295 <div class="action-btn">296 <svg viewBox="0 0 24 24"><path d="M4 4h16v2H4zm0 7h10v2H4zm0 7h16v2H4z"/></svg>297 <span class="action-label">Comments</span>298 </div>299 <div class="action-btn">300 <svg viewBox="0 0 24 24"><path d="M12 5l7 7-7 7v-4H5v-6h7V5z"/></svg>301 <span class="action-label">Share</span>302 </div>303 <div class="action-btn">304 <svg viewBox="0 0 24 24"><circle cx="8" cy="12" r="3"/><circle cx="16" cy="12" r="3"/><path d="M12 10v4"/></svg>305 <span class="action-label">Remix</span>306 </div>307 <div class="action-btn">308 <svg viewBox="0 0 24 24"><path d="M5 20h14v-8h-4V4H9v8H5z"/></svg>309 <span class="action-label">Download</span>310 </div>311 </div>312 313 <!-- Comments card -->314 <div class="comments-card">315 <div class="comments-header">316 <span>Comments</span>317 <span style="color:#bdbdbd; font-weight:400;">453</span>318 </div>319 <div class="comment-body">320 <div class="emoji">😊</div>321 <div style="flex:1;">322 Singapore is the country that i never get tired of visiting. Cleanest and most efficient country of the world...323 </div>324 <svg class="chevron" viewBox="0 0 24 24">325 <path d="M8 10l4 4 4-4" stroke="#bdbdbd" stroke-width="2" fill="none"/>326 </svg>327 </div>328 </div>329 330 <!-- Store -->331 <div class="store-title">Shop the Hungry Passport store</div>332 <div class="from-spring">From Spring</div>333 334 <div class="products">335 <div class="product-card">336 <div class="prod-img">[IMG: Los Angeles hoodie]</div>337 <div class="price">₹3,842.92</div>338 </div>339 <div class="product-card">340 <div class="prod-img">[IMG: Los Angeles T-Shirt - Navy]</div>341 <div class="price">₹2,046.77</div>342 </div>343 <div class="product-card">344 <div class="prod-img">[IMG: Los Angeles T-Shirt - Black]</div>345 <div class="price">₹2,210.58</div>346 </div>347 <div class="product-card">348 <div class="prod-img">[IMG: Los Angeles Hoodie - White]</div>349 <div class="price">₹—</div>350 </div>351 </div>352 353 <!-- Bottom banner ad -->354 <div class="banner">355 Go City® - Singapore - Buy Direct<br>356 - Official Site357 </div>358 </div>359 360</div>361</body>362</html>