GD-ML/AndroidCode

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>Podcast Screen</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #F3F5F8; border-radius: 32px; box-shadow: 0 18px 36px rgba(0,0,0,0.18);12    color: #1f2937;13  }14  /* App bar */15  .appbar {16    position: absolute; left: 0; top: 0; width: 100%; height: 220px;17    background: #2AA9B2;18    box-shadow: 0 2px 0 rgba(0,0,0,0.06);19  }20  .status {21    position: absolute; top: 26px; left: 32px; right: 32px; height: 48px; color: rgba(255,255,255,0.95);22    display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 34px;23  }24  .status-icons { display: flex; align-items: center; gap: 26px; }25  .back-wrap {26    position: absolute; top: 120px; left: 24px; width: 120px; height: 72px; display: flex; align-items: center;27  }28  .back-wrap svg { width: 54px; height: 54px; fill: none; stroke: #FFFFFF; stroke-width: 8; }29  /* List area */30  .list {31    position: absolute; top: 220px; left: 0; right: 0; padding: 24px 40px 0 40px;32  }33  .list-item { position: relative; padding: 28px 0 28px 0; }34  .item-title { font-size: 46px; font-weight: 800; color: #1e2430; }35  .item-date { margin-top: 8px; font-size: 30px; letter-spacing: 1px; color: #9aa3af; }36  .item-desc { margin-top: 18px; font-size: 34px; line-height: 50px; color: #495262; max-width: 880px; }37  .divider { height: 1px; background: #E3E6EB; margin: 26px 0; }38  .menu-dot { position: absolute; right: 12px; top: 20px; }39  .menu-dot svg { width: 48px; height: 48px; fill: #2F3747; opacity: 0.6; }40  /* Bottom sheet */41  .sheet {42    position: absolute; left: 0; right: 0; top: 980px; height: 560px;43    background: #FFFFFF; border-top-left-radius: 36px; border-top-right-radius: 36px;44    box-shadow: 0 -10px 24px rgba(0,0,0,0.08);45  }46  .sheet .btn {47    position: absolute; left: 80px; right: 80px; top: 78px; height: 120px;48    background: #151931; color: #FFFFFF; border-radius: 60px;49    display: flex; align-items: center; justify-content: center;50    font-size: 36px; font-weight: 800; letter-spacing: 3px;51    text-transform: uppercase;52  }53  .sheet .accent {54    position: absolute; left: 76px; top: 118px; width: 14px; height: 14px; border-radius: 50%;55    background: rgba(255,255,255,0.15);56  }57  /* Episode content */58  .episode {59    position: absolute; left: 40px; right: 40px; top: 1190px;60  }61  .episode-header { display: flex; align-items: center; justify-content: space-between; }62  .play { display: flex; align-items: center; gap: 28px; }63  .play .circle {64    width: 90px; height: 90px; border-radius: 50%; border: 3px solid #2F3747;65    display: flex; align-items: center; justify-content: center;66  }67  .play .circle svg { width: 40px; height: 40px; fill: #2F3747; }68  .episode-title { font-size: 52px; font-weight: 800; color: #1e2430; }69  .share svg { width: 54px; height: 54px; fill: none; stroke: #2F3747; stroke-width: 6; }70  .epi-meta {71    margin: 46px 0 20px 118px; font-size: 32px; letter-spacing: 2px; color: #9aa3af;72  }73  .epi-desc {74    margin-left: 118px; font-size: 36px; line-height: 58px; color: #2d3748;75    max-width: 960px;76  }77  /* Footer note */78  .footer-note {79    position: absolute; left: 118px; right: 80px; top: 2080px; font-size: 34px; color: #5b6475; line-height: 52px;80  }81  /* Gesture bar */82  .gesture {83    position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);84    width: 360px; height: 14px; background: #A8AFB9; border-radius: 7px;85  }86</style>87</head>88<body>89<div id="render-target">90 91  <!-- App Bar -->92  <div class="appbar">93    <div class="status">94      <div>9:44</div>95      <div class="status-icons">96        <!-- mute icon -->97        <svg width="34" height="34" viewBox="0 0 24 24">98          <path d="M4 9v6h3l5 4V5L7 9H4z" fill="rgba(255,255,255,0.95)"></path>99          <path d="M16 9l4 4M20 9l-4 4" stroke="rgba(255,255,255,0.95)" stroke-width="2" fill="none"></path>100        </svg>101        <!-- wifi icon -->102        <svg width="34" height="34" viewBox="0 0 24 24">103          <path d="M2 8c5-4 15-4 20 0M5 12c3-2 11-2 14 0M8 16c2-1 6-1 8 0" stroke="rgba(255,255,255,0.95)" stroke-width="2" fill="none" stroke-linecap="round"></path>104          <circle cx="12" cy="19" r="1.8" fill="rgba(255,255,255,0.95)"></circle>105        </svg>106        <!-- battery icon -->107        <svg width="40" height="34" viewBox="0 0 28 16">108          <rect x="1" y="2" width="22" height="12" rx="2" ry="2" fill="none" stroke="rgba(255,255,255,0.95)" stroke-width="2"></rect>109          <rect x="3" y="4" width="14" height="8" fill="rgba(255,255,255,0.95)"></rect>110          <rect x="24" y="6" width="3" height="4" rx="1" fill="rgba(255,255,255,0.95)"></rect>111        </svg>112      </div>113    </div>114    <div class="back-wrap">115      <svg viewBox="0 0 24 24">116        <path d="M15 19L8 12l7-7" stroke-linecap="round" stroke-linejoin="round"></path>117      </svg>118    </div>119  </div>120 121  <!-- List of episodes (top preview) -->122  <div class="list">123    <div class="list-item">124      <div class="item-title">The 'Marc on Movies' Special</div>125      <div class="item-date">12/25/2023</div>126      <div class="item-desc">For Christmas Day, Marc presents a special collection of exclusive segment…</div>127      <div class="menu-dot">128        <svg viewBox="0 0 24 24">129          <circle cx="5" cy="12" r="2.2"></circle>130          <circle cx="12" cy="12" r="2.2"></circle>131          <circle cx="19" cy="12" r="2.2"></circle>132        </svg>133      </div>134      <div class="divider"></div>135    </div>136 137    <div class="list-item">138      <div class="item-title">The 'Marc on Movies' Special</div>139      <div class="item-date">12/25/2023</div>140      <div class="item-desc">For Christmas Day, Marc presents a special collection of exclusive segment…</div>141      <div class="menu-dot">142        <svg viewBox="0 0 24 24">143          <circle cx="5" cy="12" r="2.2"></circle>144          <circle cx="12" cy="12" r="2.2"></circle>145          <circle cx="19" cy="12" r="2.2"></circle>146        </svg>147      </div>148      <div class="divider"></div>149    </div>150  </div>151 152  <!-- Bottom Sheet -->153  <div class="sheet">154    <div class="accent"></div>155    <div class="btn">Cancel Download</div>156  </div>157 158  <!-- Current Episode Details -->159  <div class="episode">160    <div class="episode-header">161      <div class="play">162        <div class="circle">163          <svg viewBox="0 0 24 24">164            <path d="M8 5l10 7-10 7z"></path>165          </svg>166        </div>167        <div class="episode-title">Episode 1498 - Blitz Bazawule</div>168      </div>169      <div class="share">170        <svg viewBox="0 0 24 24">171          <path d="M4 12c0 4.4 3.6 8 8 8s8-3.6 8-8" stroke-dasharray="0"></path>172          <path d="M12 4v8M12 4l-3 3M12 4l3 3" stroke-linecap="round" stroke-linejoin="round"></path>173        </svg>174      </div>175    </div>176 177    <div class="epi-meta">Dec 21, 2023 · 01:36:17</div>178 179    <div class="epi-desc">180      Growing up in Ghana, director Blitz Bazawule relied on three things to transport him to other worlds: movies, American hip-hop, and his grandmother’s stories. Blitz tells Marc how he combined all three in his work as a director, how his style of visual poetry attracted the attention of Beyoncé, and how he suddenly found himself at the helm of his first major studio film, the musical version of The Color Purple. Sign up here for WTF+ to get the full show archives and weekly bonus material! https://plus.acast.com/s/wtf-with-marc-maron-podcast.181      <br><br>182      Hosted on Acast. See acast.com/privacy for more information.183    </div>184  </div>185 186  <div class="footer-note"></div>187 188  <!-- Gesture bar -->189  <div class="gesture"></div>190</div>191</body>192</html>