GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Comedy Podcasts UI</title>6<style>7 body{margin:0;padding:0;background:transparent;font-family:Segoe UI, Arial, Helvetica, sans-serif;}8 #render-target{9 width:1080px;height:2400px;position:relative;overflow:hidden;background:#121212;color:#FFFFFF;10 }11 /* Status bar */12 .status-bar{13 position:absolute;top:0;left:0;width:100%;height:90px;display:flex;14 align-items:center;justify-content:space-between;padding:0 36px;color:#EDEDED;font-weight:600;font-size:42px;15 }16 .status-icons{display:flex;align-items:center;gap:28px;}17 .icon-dot{width:14px;height:14px;background:#CFCFCF;border-radius:50%;}18 .icon-circle{width:28px;height:28px;border:2px solid #CFCFCF;border-radius:50%;}19 .icon-wifi{width:36px;height:24px;border:2px solid #CFCFCF;border-radius:6px;position:relative;}20 .icon-wifi:after{content:"";position:absolute;right:4px;top:4px;width:12px;height:12px;border:2px solid #CFCFCF;border-radius:50%;}21 .icon-battery{22 width:48px;height:26px;border:2px solid #CFCFCF;border-radius:6px;position:relative;23 }24 .icon-battery:after{content:"";position:absolute;right:-8px;top:8px;width:6px;height:10px;background:#CFCFCF;border-radius:2px;}25 .icon-battery .level{position:absolute;left:4px;top:4px;height:16px;width:28px;background:#CFCFCF;border-radius:3px;}26 /* Header */27 .header{28 position:absolute;top:90px;left:0;width:100%;height:120px;display:flex;align-items:center;29 padding:0 30px;gap:20px;30 }31 .back-btn{width:72px;height:72px;display:flex;align-items:center;justify-content:center;}32 .back-btn svg{width:48px;height:48px;fill:none;stroke:#FFFFFF;stroke-width:6;}33 .title{font-size:64px;font-weight:700;letter-spacing:0.5px;}34 /* List */35 .list{36 position:absolute;top:210px;left:0;width:100%;padding:0 32px 260px 32px;overflow:hidden;37 }38 .item{39 display:flex;align-items:center;gap:28px;padding:28px 8px;border-radius:16px;40 }41 .cover{42 width:150px;height:150px;border-radius:28px;background:#E0E0E0;border:1px solid #BDBDBD;43 display:flex;align-items:center;justify-content:center;color:#757575;font-size:26px;text-align:center;padding:8px;44 }45 .meta{flex:1;min-width:0;}46 .name{font-size:46px;font-weight:700;margin-bottom:10px;}47 .desc{font-size:30px;line-height:40px;color:#BDBDBD;max-height:84px;overflow:hidden;}48 .heart{49 width:82px;height:82px;display:flex;align-items:center;justify-content:center;margin-left:8px;50 }51 .heart svg{width:70px;height:70px;stroke:#FFFFFF;stroke-width:6;fill:none;}52 /* Bottom player */53 .player{54 position:absolute;left:24px;right:24px;bottom:34px;height:180px;background:#1E1E1E;55 border-radius:40px;display:flex;align-items:center;padding:0 32px;gap:26px;box-shadow:0 6px 20px rgba(0,0,0,0.5);56 }57 .station-icon{58 width:110px;height:110px;background:#E0E0E0;border:1px solid #BDBDBD;border-radius:22px;59 display:flex;align-items:center;justify-content:center;color:#757575;font-size:26px;text-align:center;padding:8px;60 }61 .player-title{font-size:44px;font-weight:700;flex:1;}62 .player-btn{63 width:120px;height:120px;border-radius:60px;background:#2A2A2A;border:2px solid #3A3A3A;64 display:flex;align-items:center;justify-content:center;65 }66 .player-btn svg{width:60px;height:60px;fill:#FFFFFF;}67 .small-btn{width:86px;height:86px;border-radius:26px;background:#2A2A2A;display:flex;align-items:center;justify-content:center;border:2px solid #3A3A3A;}68 .small-btn svg{width:44px;height:44px;stroke:#FFFFFF;stroke-width:6;fill:none;}69 .player-heart{margin-left:auto;margin-right:8px;}70 /* Separator hint at bottom list */71 .faded{opacity:0.65;}72</style>73</head>74<body>75<div id="render-target">76 77 <!-- Status bar -->78 <div class="status-bar">79 <div>9:22</div>80 <div class="status-icons">81 <div class="icon-circle"></div>82 <div class="icon-circle"></div>83 <div class="icon-circle"></div>84 <div class="icon-dot"></div>85 <div class="icon-wifi"></div>86 <div class="icon-battery"><div class="level"></div></div>87 </div>88 </div>89 90 <!-- Header -->91 <div class="header">92 <div class="back-btn">93 <svg viewBox="0 0 24 24">94 <path d="M15 6 L9 12 L15 18" stroke-linecap="round" stroke-linejoin="round"></path>95 </svg>96 </div>97 <div class="title">Comedy</div>98 </div>99 100 <!-- List of podcasts -->101 <div class="list">102 <!-- The Always Sunny Podcast -->103 <div class="item">104 <div class="cover">[IMG: Podcast Cover]</div>105 <div class="meta">106 <div class="name">The Always Sunny Podcast</div>107 <div class="desc">The Always Sunny Podcast is an unofficial look back on the past fourteen seasons of th…</div>108 </div>109 <div class="heart">110 <svg viewBox="0 0 24 24"><path d="M12 21s-8-5.5-8-11a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.5-8 11-8 11z" stroke-linecap="round" stroke-linejoin="round"></path></svg>111 </div>112 </div>113 114 <!-- Office Ladies -->115 <div class="item">116 <div class="cover">[IMG: Podcast Cover]</div>117 <div class="meta">118 <div class="name">Office Ladies</div>119 <div class="desc">The Office co-stars and best friends, Jenna Fischer and Angela Kinsey, are doing the ulti…</div>120 </div>121 <div class="heart">122 <svg viewBox="0 0 24 24"><path d="M12 21s-8-5.5-8-11a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.5-8 11-8 11z" stroke-linecap="round" stroke-linejoin="round"></path></svg>123 </div>124 </div>125 126 <!-- SmartLess -->127 <div class="item">128 <div class="cover">[IMG: Podcast Cover]</div>129 <div class="meta">130 <div class="name">SmartLess</div>131 <div class="desc">New episodes come out every Monday for free, with 1‑week early access when you join …</div>132 </div>133 <div class="heart">134 <svg viewBox="0 0 24 24"><path d="M12 21s-8-5.5-8-11a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.5-8 11-8 11z" stroke-linecap="round" stroke-linejoin="round"></path></svg>135 </div>136 </div>137 138 <!-- The Joe Rogan Experience Experience -->139 <div class="item">140 <div class="cover">[IMG: Podcast Cover]</div>141 <div class="meta">142 <div class="name">The Joe Rogan Experience Experience</div>143 <div class="desc">Weekly breakdown of The JRE</div>144 </div>145 <div class="heart">146 <svg viewBox="0 0 24 24"><path d="M12 21s-8-5.5-8-11a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.5-8 11-8 11z" stroke-linecap="round" stroke-linejoin="round"></path></svg>147 </div>148 </div>149 150 <!-- How C*m -->151 <div class="item">152 <div class="cover">[IMG: Podcast Cover]</div>153 <div class="meta">154 <div class="name">How C*m</div>155 <div class="desc">Comedian Remy Kassimir had NEVER had an orgasm, so she started this podcast to figure…</div>156 </div>157 <div class="heart">158 <svg viewBox="0 0 24 24"><path d="M12 21s-8-5.5-8-11a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.5-8 11-8 11z" stroke-linecap="round" stroke-linejoin="round"></path></svg>159 </div>160 </div>161 162 <!-- 2 Bears, 1 Cave -->163 <div class="item">164 <div class="cover">[IMG: Podcast Cover]</div>165 <div class="meta">166 <div class="name">2 Bears, 1 Cave with Tom Segura &…</div>167 <div class="desc">Weekly, comedian best friends Tom Segura and Bert Kreischer get together in the bear c…</div>168 </div>169 <div class="heart">170 <svg viewBox="0 0 24 24"><path d="M12 21s-8-5.5-8-11a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.5-8 11-8 11z" stroke-linecap="round" stroke-linejoin="round"></path></svg>171 </div>172 </div>173 174 <!-- Adam Carolla Show -->175 <div class="item">176 <div class="cover">[IMG: Podcast Cover]</div>177 <div class="meta">178 <div class="name">Adam Carolla Show</div>179 <div class="desc">Welcome to the Adam Carolla Show! The new home for the rantings and ravings of Ad…</div>180 </div>181 <div class="heart">182 <svg viewBox="0 0 24 24"><path d="M12 21s-8-5.5-8-11a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.5-8 11-8 11z" stroke-linecap="round" stroke-linejoin="round"></path></svg>183 </div>184 </div>185 186 <!-- Girls Gotta Eat -->187 <div class="item">188 <div class="cover">[IMG: Podcast Cover]</div>189 <div class="meta">190 <div class="name">Girls Gotta Eat</div>191 <div class="desc">Why do guys just want to f*ck you once then stalk your Instagram forever? Should you ditc…</div>192 </div>193 <div class="heart">194 <svg viewBox="0 0 24 24"><path d="M12 21s-8-5.5-8-11a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.5-8 11-8 11z" stroke-linecap="round" stroke-linejoin="round"></path></svg>195 </div>196 </div>197 198 <!-- Partial next item (faded due to player overlay) -->199 <div class="item faded">200 <div class="cover">[IMG: Podcast Cover]</div>201 <div class="meta">202 <div class="name">The Daily Show With Trevor Noah: E…</div>203 <div class="desc">Listen to highlights and extended interviews from the edition of The Daily Show with…</div>204 </div>205 <div class="heart">206 <svg viewBox="0 0 24 24"><path d="M12 21s-8-5.5-8-11a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.5-8 11-8 11z" stroke-linecap="round" stroke-linejoin="round"></path></svg>207 </div>208 </div>209 </div>210 211 <!-- Bottom player -->212 <div class="player">213 <div class="station-icon">[IMG: Station Icon]</div>214 <div class="player-title">Latina Stereo</div>215 <div class="small-btn player-heart">216 <svg viewBox="0 0 24 24"><path d="M12 21s-8-5.5-8-11a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.5-8 11-8 11z" stroke-linecap="round" stroke-linejoin="round"></path></svg>217 </div>218 <div class="player-btn">219 <svg viewBox="0 0 24 24"><polygon points="8,5 20,12 8,19"></polygon></svg>220 </div>221 <div class="small-btn">222 <svg viewBox="0 0 24 24">223 <path d="M7 6h10M7 12h10M7 18h10" stroke-linecap="round"></path>224 </svg>225 </div>226 </div>227 228</div>229</body>230</html>