GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>TOI Podcasts - Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Top system/status bar */18 .status-bar {19 height: 120px;20 background: #121212;21 color: #fff;22 display: flex;23 align-items: center;24 padding: 0 40px;25 font-size: 40px;26 letter-spacing: 0.5px;27 }28 .status-left { display: flex; align-items: center; gap: 24px; }29 .status-right { margin-left: auto; display: flex; align-items: center; gap: 28px; }30 31 .icon { width: 48px; height: 48px; display: inline-block; }32 .icon svg { width: 100%; height: 100%; fill: #fff; }33 34 /* Browser header */35 .web-header {36 height: 140px;37 background: #121212;38 color: #fff;39 display: flex;40 align-items: center;41 padding: 0 36px;42 box-sizing: border-box;43 }44 .wh-left { display: flex; align-items: center; gap: 24px; }45 .site-block { display: flex; flex-direction: column; }46 .site-title { font-size: 48px; font-weight: 700; }47 .site-url { font-size: 32px; color: #cfcfcf; }48 .wh-right { margin-left: auto; display: flex; align-items: center; gap: 32px; }49 50 /* Ad area */51 .ad-strip {52 height: 220px;53 background: #f5f5f5;54 display: flex;55 align-items: center;56 justify-content: center;57 border-bottom: 1px solid #e5e5e5;58 }59 .ad-circle {60 width: 140px; height: 140px;61 background: #ffffff;62 border: 2px solid #d9d9d9;63 border-radius: 50%;64 color: #9e9e9e;65 display: flex; align-items: center; justify-content: center;66 font-size: 40px;67 }68 69 /* Featured section */70 .section-title {71 font-size: 46px;72 font-weight: 800;73 color: #222;74 padding: 36px 40px 16px 40px;75 }76 77 .cards-row {78 display: flex;79 gap: 28px;80 padding: 0 40px 10px 40px;81 }82 .card {83 width: 320px;84 border-radius: 20px;85 background: #fff;86 box-shadow: 0 2px 0 rgba(0,0,0,0.08);87 border: 1px solid #eeeeee;88 overflow: hidden;89 }90 .thumb {91 position: relative;92 width: 100%;93 height: 220px;94 background: #E0E0E0;95 border-bottom: 1px solid #BDBDBD;96 display: flex; align-items: center; justify-content: center;97 color: #757575; font-size: 32px;98 }99 .badge-playing {100 position: absolute;101 bottom: 12px; left: 12px;102 background: #f44336;103 color: #fff;104 font-size: 28px;105 font-weight: 700;106 padding: 8px 14px;107 border-radius: 10px;108 display: flex; align-items: center; gap: 10px;109 box-shadow: 0 2px 4px rgba(0,0,0,0.15);110 }111 .time-badge {112 position: absolute;113 bottom: 12px; left: 12px;114 background: #e53935;115 color: #fff;116 font-size: 28px;117 font-weight: 700;118 padding: 8px 12px;119 border-radius: 10px;120 display: flex; align-items: center; gap: 10px;121 }122 .toi-corner {123 position: absolute; top: 12px; right: 12px;124 background: #d32f2f; color: #fff;125 font-size: 26px; font-weight: 800;126 padding: 6px 10px; border-radius: 8px;127 }128 129 .card-body { padding: 18px 16px 16px 16px; }130 .card-title {131 font-size: 36px;132 font-weight: 700;133 color: #1f1f1f;134 line-height: 1.25;135 min-height: 92px;136 }137 .card-meta {138 margin-top: 12px;139 font-size: 26px;140 color: #757575;141 }142 143 .divider {144 height: 24px;145 background: #f0f0f0;146 margin-top: 24px;147 border-top: 1px solid #e8e8e8;148 border-bottom: 1px solid #e8e8e8;149 }150 151 /* Top shows */152 .banner {153 margin: 22px 40px 0 40px;154 height: 620px;155 background: #E0E0E0;156 border: 1px solid #BDBDBD;157 border-radius: 16px;158 display: flex; align-items: center; justify-content: center;159 color: #757575; font-size: 40px; text-align: center;160 }161 162 /* Audio player bar */163 .audio-bar {164 position: absolute;165 left: 0; right: 0; bottom: 100px;166 height: 220px;167 background: #000;168 color: #fff;169 box-shadow: 0 -4px 12px rgba(0,0,0,0.25);170 display: flex;171 flex-direction: column;172 padding: 22px 40px;173 box-sizing: border-box;174 }175 .audio-title {176 font-size: 36px;177 font-weight: 600;178 white-space: nowrap;179 overflow: hidden;180 text-overflow: ellipsis;181 margin-bottom: 22px;182 }183 .audio-controls {184 display: flex; align-items: center; gap: 22px;185 }186 .replay-btn {187 width: 78px; height: 78px; border-radius: 50%;188 background: #c62828;189 display: flex; align-items: center; justify-content: center;190 }191 .time-label { font-size: 34px; color: #fff; }192 .progress {193 flex: 1;194 height: 10px;195 background: #3b3b3b;196 border-radius: 8px;197 position: relative;198 }199 .progress .bar {200 position: absolute; top: 0; left: 0;201 height: 100%;202 width: 70%;203 background: #d32f2f;204 border-radius: 8px;205 }206 207 /* Home indicator */208 .home-indicator {209 position: absolute;210 bottom: 24px;211 left: 50%;212 transform: translateX(-50%);213 width: 240px;214 height: 10px;215 background: #cfcfcf;216 border-radius: 6px;217 }218</style>219</head>220<body>221<div id="render-target">222 223 <!-- Status bar -->224 <div class="status-bar">225 <div class="status-left">226 <div>10:07</div>227 <span class="icon">228 <!-- simple play-store like triangle -->229 <svg viewBox="0 0 24 24"><path d="M3 4l15 8-15 8z"/></svg>230 </span>231 <span class="icon">232 <!-- small G circle -->233 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="#fff" stroke-width="2"/><path d="M12 7v10M7 12h10" stroke="#fff" stroke-width="2"/></svg>234 </span>235 </div>236 <div class="status-right">237 <span class="icon">238 <!-- wifi -->239 <svg viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0M5 12c3-3 11-3 14 0M8 16c2-2 6-2 8 0M12 19a2 2 0 1 0 0.001 0z" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>240 </span>241 <span class="icon">242 <!-- battery -->243 <svg viewBox="0 0 24 24"><rect x="2" y="6" width="18" height="12" rx="2" fill="none" stroke="#fff" stroke-width="2"/><rect x="20" y="10" width="2" height="4" fill="#fff"/></svg>244 </span>245 </div>246 </div>247 248 <!-- Web header -->249 <div class="web-header">250 <div class="wh-left">251 <span class="icon">252 <!-- back -->253 <svg viewBox="0 0 24 24"><path d="M15 6L9 12l6 6" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>254 </span>255 <span class="icon">256 <!-- lock -->257 <svg viewBox="0 0 24 24"><rect x="5" y="10" width="14" height="10" rx="2" fill="none" stroke="#fff" stroke-width="2"/><path d="M12 6a4 4 0 0 1 4 4H8a4 4 0 0 1 4-4z" fill="none" stroke="#fff" stroke-width="2"/></svg>258 </span>259 <div class="site-block">260 <div class="site-title">TOI Podcasts</div>261 <div class="site-url">m.timesofindia.com</div>262 </div>263 </div>264 <div class="wh-right">265 <span class="icon">266 <!-- share -->267 <svg viewBox="0 0 24 24"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="M8 12l8-7M8 12l8 7" fill="none" stroke="#fff" stroke-width="2"/></svg>268 </span>269 <span class="icon">270 <!-- overflow -->271 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>272 </span>273 </div>274 </div>275 276 <!-- Ad strip -->277 <div class="ad-strip">278 <div class="ad-circle">Ad</div>279 </div>280 281 <!-- Featured -->282 <div class="section-title">FEATURED</div>283 <div class="cards-row">284 <!-- Card 1 -->285 <div class="card">286 <div class="thumb">287 [IMG: Podcast cover - Open for Business]288 <div class="badge-playing">289 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M6 18V6M12 18V8M18 18V10" stroke="#fff" stroke-width="3" stroke-linecap="round"/></svg>290 PLAYING291 </div>292 </div>293 <div class="card-body">294 <div class="card-title">Open for Business - Episode 5 with Kunal...</div>295 <div class="card-meta">12 Jan 2023, 14.17 | Source: TOI.in</div>296 </div>297 </div>298 299 <!-- Card 2 -->300 <div class="card">301 <div class="thumb">302 [IMG: TOI article image - Himachal floods]303 <div class="toi-corner">TOI</div>304 <div class="time-badge">305 <svg width="26" height="26" viewBox="0 0 24 24"><path d="M8 5l10 7-10 7z" fill="#fff"/></svg>306 17:34307 </div>308 </div>309 <div class="card-body">310 <div class="card-title">From Himachal Pradesh to Delhi, ho...</div>311 <div class="card-meta">17 Jul 2023, 06.00 | Source: TOI.in</div>312 </div>313 </div>314 315 <!-- Card 3 -->316 <div class="card">317 <div class="thumb">318 [IMG: Podcast thumbnail]319 <div class="time-badge">320 <svg width="26" height="26" viewBox="0 0 24 24"><path d="M8 5l10 7-10 7z" fill="#fff"/></svg>321 25:35322 </div>323 </div>324 <div class="card-body">325 <div class="card-title">Omar Abdullah on the state of Kashm...</div>326 <div class="card-meta">26 Jul 2023, 06.00 | Source: TOI.in</div>327 </div>328 </div>329 </div>330 331 <div class="divider"></div>332 333 <!-- Top Shows -->334 <div class="section-title" style="padding-top: 28px;">TOP SHOWS</div>335 <div class="banner">[IMG: Large podcast series banner - Cognizant | D&I: Allyship is leadership]</div>336 337 <!-- Audio player -->338 <div class="audio-bar">339 <div class="audio-title">Open for Business - Episode 5 with Kunal Rohatgi</div>340 <div class="audio-controls">341 <div class="replay-btn">342 <svg viewBox="0 0 24 24" width="42" height="42">343 <path d="M12 5a7 7 0 1 1-7 7" fill="none" stroke="#fff" stroke-width="2"/>344 <path d="M6 6v5h5" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>345 </svg>346 </div>347 <div class="time-label">14:26</div>348 <div class="progress"><div class="bar"></div></div>349 <div class="time-label">14:26</div>350 </div>351 </div>352 353 <div class="home-indicator"></div>354</div>355</body>356</html>