GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Radioline - Podcasts</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: "Inter", Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: linear-gradient(180deg, #0d2340 0%, #0b1a2d 60%, #0a1526 100%);13 color: #fff;14 }15 16 /* Utility */17 .row { display: flex; align-items: center; }18 .space-between { display: flex; align-items: center; justify-content: space-between; }19 .muted { color: #95a5b5; }20 .title { font-weight: 800; letter-spacing: 0.5px; }21 .section-title { font-size: 56px; font-weight: 800; margin: 40px 0 20px; }22 .pill { padding: 18px 28px; border-radius: 18px; font-weight: 700; letter-spacing: 1px; }23 .pill.outline { border: 2px solid #3c5a7e; color: #c8d3df; background: transparent; }24 .pill.filled { background: #2d56f1; color: #fff; }25 .divider { height: 1px; background: rgba(255,255,255,0.06); margin: 8px 0 24px; }26 27 /* Status bar */28 .statusbar { height: 70px; padding: 24px 32px 0; font-size: 34px; }29 .status-right svg { margin-left: 24px; }30 31 /* Header */32 .header { padding: 18px 32px 8px; }33 .logo-wrap { gap: 18px; }34 .app-badge {35 width: 64px; height: 64px; border-radius: 18px;36 background: #2a7bd9;37 display: flex; align-items: center; justify-content: center;38 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.2);39 }40 .app-name { font-size: 54px; font-weight: 800; letter-spacing: 1px; }41 42 .right-tools { gap: 28px; }43 .flag {44 width: 96px; height: 96px; border-radius: 50%;45 background: #E0E0E0; border: 1px solid #BDBDBD;46 display: flex; align-items: center; justify-content: center; color: #555; font-size: 26px; text-align: center; padding: 8px;47 }48 .country { text-align: right; font-size: 26px; line-height: 1.05; color: #a8b8c8; margin-right: 10px; }49 50 /* Tabs */51 .tabs { padding: 12px 32px; gap: 18px; }52 .tabs .pill { font-size: 30px; }53 54 /* Content area */55 .content { padding: 10px 32px 220px; overflow: hidden; }56 .card-row { display: flex; align-items: center; gap: 26px; margin-bottom: 26px; }57 .thumb {58 width: 170px; height: 170px; border-radius: 26px;59 background: #E0E0E0; border: 1px solid #BDBDBD;60 color: #555; display: flex; align-items: center; justify-content: center;61 font-size: 26px; text-align: center; padding: 10px;62 flex: 0 0 170px;63 }64 .item-title { font-size: 44px; font-weight: 800; }65 .item-sub { font-size: 30px; color: #a6b3c2; line-height: 1.25; margin-top: 8px; max-width: 760px; }66 .arrow { margin-left: 10px; opacity: 0.7; }67 68 /* Bottom mini player */69 .mini-player {70 position: absolute; left: 24px; right: 24px; bottom: 160px;71 background: rgba(20,28,44,0.92);72 border: 1px solid rgba(255,255,255,0.08);73 border-radius: 28px;74 padding: 18px 24px;75 display: flex; align-items: center; gap: 22px;76 box-shadow: 0 18px 40px rgba(0,0,0,0.4);77 }78 .mini-cover {79 width: 120px; height: 120px; border-radius: 18px;80 background: #E0E0E0; border: 1px solid #BDBDBD;81 color: #555; display: flex; align-items: center; justify-content: center; font-size: 22px; text-align: center;82 }83 .mini-title { font-size: 42px; font-weight: 700; }84 .mini-actions { margin-left: auto; display: flex; align-items: center; gap: 28px; }85 .circle-btn {86 width: 110px; height: 110px; border-radius: 50%;87 background: #0e2a4a; border: 1px solid rgba(255,255,255,0.12);88 display: flex; align-items: center; justify-content: center;89 }90 91 /* Bottom navigation */92 .navbar {93 position: absolute; left: 0; right: 0; bottom: 0;94 height: 150px; background: rgba(7,13,24,0.98);95 border-top: 1px solid rgba(255,255,255,0.08);96 display: grid; grid-template-columns: repeat(4, 1fr);97 padding-top: 12px;98 }99 .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #b5c2d1; font-size: 30px; }100 .nav-item.active .nav-icon-wrap { background: #0e2a4a; border-color: #2d56f1; }101 .nav-item.active span { color: #ffffff; font-weight: 700; }102 .nav-icon-wrap {103 width: 92px; height: 92px; border-radius: 50%;104 border: 2px solid rgba(255,255,255,0.12);105 display: flex; align-items: center; justify-content: center;106 margin-bottom: 6px;107 }108 109 /* Small helpers */110 .tiny { font-size: 22px; }111</style>112</head>113<body>114<div id="render-target">115 116 <!-- Status bar -->117 <div class="statusbar space-between">118 <div>9:21</div>119 <div class="row status-right">120 <!-- Silent icon -->121 <svg width="38" height="38" viewBox="0 0 24 24" fill="none">122 <path d="M3 9h3l4-4v14l-4-4H3V9z" stroke="#cfe0ef" stroke-width="1.5"/>123 <path d="M16 9l5-5M16 19l5 5" stroke="#cfe0ef" stroke-width="1.5"/>124 </svg>125 <!-- WiFi -->126 <svg width="38" height="38" viewBox="0 0 24 24" fill="none">127 <path d="M2 8c5-5 15-5 20 0" stroke="#cfe0ef" stroke-width="1.5"/>128 <path d="M5 11c3.5-3.5 10.5-3.5 14 0" stroke="#cfe0ef" stroke-width="1.5"/>129 <path d="M8.5 14.5c2-2 5-2 7 0" stroke="#cfe0ef" stroke-width="1.5"/>130 <circle cx="12" cy="18.5" r="1.5" fill="#cfe0ef"/>131 </svg>132 <!-- Battery -->133 <svg width="44" height="38" viewBox="0 0 26 14" fill="none">134 <rect x="1" y="1" width="20" height="12" rx="2" stroke="#cfe0ef" stroke-width="1.5"/>135 <rect x="3" y="3" width="16" height="8" rx="1" fill="#cfe0ef"/>136 <rect x="22" y="4" width="3" height="6" rx="1" fill="#cfe0ef"/>137 </svg>138 </div>139 </div>140 141 <!-- Header -->142 <div class="header space-between">143 <div class="row logo-wrap">144 <div class="app-badge">145 <!-- simple wave icon -->146 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">147 <path d="M2 12c4 0 4-6 8-6s4 12 8 12 4-6 8-6" stroke="#fff" stroke-width="2" opacity="0.8"/>148 </svg>149 </div>150 <div class="app-name">Radioline</div>151 </div>152 <div class="row right-tools">153 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">154 <circle cx="10.5" cy="10.5" r="6.5" stroke="#fff" stroke-width="2"/>155 <path d="M15.5 15.5L21 21" stroke="#fff" stroke-width="2" stroke-linecap="round"/>156 </svg>157 <div class="row">158 <div class="country tiny">159 SELECT160 <br>161 COUNTRY162 </div>163 <div class="flag">[IMG: US Flag]</div>164 </div>165 </div>166 </div>167 168 <!-- Tabs -->169 <div class="tabs row">170 <div class="pill outline">STATIONS</div>171 <div class="pill filled">PODCASTS</div>172 </div>173 174 <div class="content">175 <!-- Popular Podcasts -->176 <div class="row section-title">Popular Podcasts177 <svg class="arrow" width="36" height="36" viewBox="0 0 24 24" fill="none">178 <path d="M8 5l8 7-8 7" stroke="#cfe0ef" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>179 </svg>180 </div>181 <div class="card-row">182 <div class="thumb">[IMG: Podcast Cover]</div>183 <div>184 <div class="item-title">Mortal Sin</div>185 <div class="item-sub">Dawn and Nick Hacheney are the perfect couple: spiritual, loving, and...</div>186 </div>187 </div>188 189 <!-- News -->190 <div class="row section-title">News191 <svg class="arrow" width="36" height="36" viewBox="0 0 24 24" fill="none">192 <path d="M8 5l8 7-8 7" stroke="#cfe0ef" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>193 </svg>194 </div>195 <div class="card-row">196 <div class="thumb">[IMG: Up First Logo]</div>197 <div>198 <div class="item-title">Up First</div>199 <div class="item-sub">NPR's Up First is the news you need to start your day. The three b...</div>200 </div>201 </div>202 203 <!-- Comedy -->204 <div class="row section-title">Comedy205 <svg class="arrow" width="36" height="36" viewBox="0 0 24 24" fill="none">206 <path d="M8 5l8 7-8 7" stroke="#cfe0ef" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>207 </svg>208 </div>209 <div class="card-row">210 <div class="thumb">[IMG: The Always Sunny Podcast]</div>211 <div>212 <div class="item-title">The Always Sunny Podcast</div>213 <div class="item-sub">An unofficial look back on the past fo...</div>214 </div>215 </div>216 217 <!-- Society & Culture -->218 <div class="row section-title">Society & Culture219 <svg class="arrow" width="36" height="36" viewBox="0 0 24 24" fill="none">220 <path d="M8 5l8 7-8 7" stroke="#cfe0ef" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>221 </svg>222 </div>223 <div class="card-row">224 <div class="thumb">[IMG: anything goes Cover]</div>225 <div>226 <div class="item-title">anything goes with emma ch...</div>227 <div class="item-sub">emma prefers to share her thoughts with a microphone rathe...</div>228 </div>229 </div>230 231 <!-- True crime -->232 <div class="row section-title">True crime233 <svg class="arrow" width="36" height="36" viewBox="0 0 24 24" fill="none">234 <path d="M8 5l8 7-8 7" stroke="#cfe0ef" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>235 </svg>236 </div>237 <div class="card-row">238 <div class="thumb">[IMG: Crime Junkie Cover]</div>239 <div>240 <div class="item-title">Crime Junkie</div>241 <div class="item-sub">If you can never get enough true crime... Congratulations, you've fo...</div>242 </div>243 </div>244 </div>245 246 <!-- Mini Player -->247 <div class="mini-player">248 <div class="mini-cover">[IMG: Station]</div>249 <div class="mini-title">Latina Stereo</div>250 <div class="mini-actions">251 <!-- Heart -->252 <div class="circle-btn">253 <svg width="38" height="38" viewBox="0 0 24 24" fill="none">254 <path d="M12 20s-7-4.4-7-9c0-2.2 1.8-4 4-4 1.6 0 2.6.8 3 1.7.4-.9 1.4-1.7 3-1.7 2.2 0 4 1.8 4 4 0 4.6-7 9-7 9z" stroke="#fff" stroke-width="1.8" fill="none"/>255 </svg>256 </div>257 <!-- Play -->258 <div class="circle-btn" style="background:#2d56f1;border-color:#2d56f1;">259 <svg width="46" height="46" viewBox="0 0 24 24" fill="none">260 <path d="M8 5l11 7-11 7V5z" fill="#fff"/>261 </svg>262 </div>263 <!-- Music note -->264 <div class="circle-btn">265 <svg width="38" height="38" viewBox="0 0 24 24" fill="none">266 <path d="M9 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm6-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z" fill="#fff"/>267 <path d="M11 18V6l8-2v12" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>268 </svg>269 </div>270 </div>271 </div>272 273 <!-- Bottom Navigation -->274 <div class="navbar">275 <div class="nav-item">276 <div class="nav-icon-wrap">277 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">278 <path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2h-4v-7H9v7H5a2 2 0 0 1-2-2v-9z" stroke="#cfe0ef" stroke-width="1.6"/>279 </svg>280 </div>281 <span>Home</span>282 </div>283 <div class="nav-item">284 <div class="nav-icon-wrap">285 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">286 <path d="M12 21s-7-4.5-7-9.5C5 9 6.8 7 9 7c1.7 0 2.7.9 3 1.8C12.3 7.9 13.3 7 15 7c2.2 0 4 2 4 4.5 0 5-7 9.5-7 9.5z" stroke="#cfe0ef" stroke-width="1.6"/>287 </svg>288 </div>289 <span>Favorites</span>290 </div>291 <div class="nav-item active">292 <div class="nav-icon-wrap">293 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">294 <circle cx="11" cy="11" r="6" stroke="#cfe0ef" stroke-width="1.6"/>295 <path d="M16.5 16.5L22 22" stroke="#cfe0ef" stroke-width="1.6" stroke-linecap="round"/>296 </svg>297 </div>298 <span>Discover</span>299 </div>300 <div class="nav-item">301 <div class="nav-icon-wrap">302 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">303 <rect x="4" y="5" width="16" height="14" rx="2" stroke="#cfe0ef" stroke-width="1.6"/>304 <path d="M8 5V3h8v2" stroke="#cfe0ef" stroke-width="1.6"/>305 </svg>306 </div>307 <span>Offline</span>308 </div>309 </div>310 311</div>312</body>313</html>