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 Detail UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: "Inter", Arial, Helvetica, sans-serif;13    color: #0e1a33;14  }15  #render-target {16    position: relative;17    overflow: hidden;18    width: 1080px;19    height: 2400px;20    background: linear-gradient(180deg, #58cbd6 0%, #cfeef2 40%, #ffffff 75%);21  }22 23  /* Status bar */24  .statusbar {25    height: 110px;26    padding: 32px 40px 0 40px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #0e1a33;31    opacity: 0.9;32    font-weight: 600;33    font-size: 38px;34  }35  .status-icons {36    display: flex;37    align-items: center;38    gap: 30px;39  }40  .icon {41    width: 38px;42    height: 38px;43  }44 45  /* Back row */46  .back-row {47    display: flex;48    align-items: center;49    height: 80px;50    padding-left: 40px;51    margin-top: 10px;52  }53  .back-arrow {54    width: 46px;55    height: 46px;56  }57 58  /* Hero banner */59  .hero {60    width: 980px;61    height: 520px;62    margin: 30px auto 0;63    position: relative;64    border-radius: 32px;65    box-shadow: 0 24px 40px rgba(10, 30, 60, 0.25);66    overflow: hidden;67  }68  .hero .img {69    width: 100%;70    height: 100%;71    background: #E0E0E0;72    border: 1px solid #BDBDBD;73    display: flex;74    align-items: center;75    justify-content: center;76    color: #757575;77    font-size: 36px;78    letter-spacing: 0.5px;79  }80  .cover-overlay {81    position: absolute;82    left: 50%;83    bottom: -80px;84    transform: translateX(-50%);85    width: 260px;86    height: 260px;87    border-radius: 24px;88    background: #E0E0E0;89    border: 1px solid #BDBDBD;90    display: flex;91    align-items: center;92    justify-content: center;93    color: #444;94    font-weight: 700;95    font-size: 34px;96    box-shadow: 0 28px 40px rgba(0, 0, 0, 0.25);97    text-align: center;98  }99 100  /* Title area */101  .title-wrap {102    margin-top: 140px;103    text-align: center;104    padding: 0 50px;105  }106  .title-wrap .title {107    font-size: 86px;108    font-weight: 800;109    letter-spacing: -1px;110    color: #0e1a33;111  }112  .title-wrap .subtitle {113    margin-top: 12px;114    font-size: 36px;115    color: #94a6b8;116    font-weight: 600;117  }118 119  /* Actions row */120  .actions {121    width: 980px;122    margin: 40px auto 0;123    display: flex;124    align-items: center;125    justify-content: space-between;126  }127  .action-item {128    display: flex;129    align-items: center;130    gap: 22px;131    color: #1c2a47;132    font-weight: 800;133    letter-spacing: 2px;134    font-size: 34px;135  }136  .play-btn {137    width: 220px;138    height: 220px;139    background: #0f1a34;140    border-radius: 50%;141    display: flex;142    align-items: center;143    justify-content: center;144    box-shadow: 0 16px 24px rgba(15, 26, 52, 0.35);145  }146  .play-btn svg {147    width: 92px;148    height: 92px;149    fill: #ffffff;150  }151 152  /* Description */153  .desc {154    width: 980px;155    margin: 40px auto;156    font-size: 36px;157    line-height: 1.55;158    color: #1f2a42;159  }160 161  /* Ad banner placeholder */162  .ad {163    width: 980px;164    height: 150px;165    margin: 30px auto;166    background: #E0E0E0;167    border: 1px solid #BDBDBD;168    display: flex;169    align-items: center;170    justify-content: center;171    color: #6a6a6a;172    font-size: 32px;173    border-radius: 12px;174  }175 176  /* Mini player */177  .miniplayer {178    position: absolute;179    left: 0;180    right: 0;181    bottom: 230px;182    height: 150px;183    background: #f3f4f6;184    border-top: 1px solid #e0e0e0;185    box-shadow: 0 -8px 16px rgba(0,0,0,0.08);186    display: flex;187    align-items: center;188    padding: 0 32px;189    gap: 30px;190  }191  .mini-cover {192    width: 110px;193    height: 110px;194    background: #E0E0E0;195    border: 1px solid #BDBDBD;196    display: flex;197    align-items: center;198    justify-content: center;199    color: #666;200    font-size: 26px;201    border-radius: 12px;202  }203  .mini-text {204    flex: 1;205  }206  .mini-title {207    font-weight: 800;208    font-size: 36px;209    color: #0f1a33;210  }211  .mini-sub {212    font-size: 28px;213    color: #64748b;214    margin-top: 6px;215  }216  .mini-actions {217    display: flex;218    align-items: center;219    gap: 28px;220  }221  .mini-icon {222    width: 52px;223    height: 52px;224    fill: #0f1a33;225  }226  .pause-btn {227    width: 70px;228    height: 70px;229    border-radius: 50%;230    background: #0f1a33;231    display: flex;232    align-items: center;233    justify-content: center;234  }235  .pause-btn svg {236    width: 36px;237    height: 36px;238    fill: #ffffff;239  }240 241  /* Bottom nav */242  .nav {243    position: absolute;244    left: 0;245    right: 0;246    bottom: 0;247    height: 190px;248    background: #f8f8f9;249    border-top: 1px solid #e4e6eb;250    display: flex;251    align-items: center;252    justify-content: space-around;253  }254  .nav-item {255    display: flex;256    flex-direction: column;257    align-items: center;258    gap: 16px;259    color: #656d7a;260    font-size: 28px;261    font-weight: 700;262  }263  .nav-item.active {264    color: #0f1a33;265  }266  .nav-icon {267    width: 48px;268    height: 48px;269    fill: currentColor;270  }271 272  .scroll-indicator {273    position: absolute;274    bottom: 210px;275    left: 50%;276    transform: translateX(-50%);277    width: 180px;278    height: 12px;279    background: #d3d7de;280    border-radius: 8px;281  }282</style>283</head>284<body>285<div id="render-target">286  <div class="statusbar">287    <div>9:42</div>288    <div class="status-icons">289      <!-- simple indicators -->290      <svg class="icon" viewBox="0 0 24 24">291        <path d="M12 4c5 0 9 3 10 5l-2 2c-1.3-2.2-4.3-4-8-4s-6.7 1.8-8 4L2 9c1-2 5-5 10-5z"></path>292      </svg>293      <svg class="icon" viewBox="0 0 24 24">294        <path d="M3 11h18v2H3zM19 7h2v10h-2z"></path>295      </svg>296      <svg class="icon" viewBox="0 0 24 24">297        <path d="M6 2h12v20H6z"></path>298      </svg>299    </div>300  </div>301 302  <div class="back-row">303    <svg class="back-arrow" viewBox="0 0 24 24">304      <path d="M15 18l-6-6 6-6" fill="none" stroke="#0e1a33" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>305    </svg>306  </div>307 308  <div class="hero">309    <div class="img">[IMG: Podcast Studio Banner]</div>310    <div class="cover-overlay">[IMG: WTF Podcast Cover]</div>311  </div>312 313  <div class="title-wrap">314    <div class="title">WTF with Marc Maron Podcast</div>315    <div class="subtitle">WTF with Marc Maron ></div>316  </div>317 318  <div class="actions">319    <div class="action-item">320      <svg class="nav-icon" viewBox="0 0 24 24">321        <path d="M12 21s-6-4.7-8.5-7.2C1.4 11.7 1 9.7 2.1 8.4 3.4 7 5.7 7.2 7 8.6l1 .9 1-.9c1.3-1.4 3.6-1.5 4.9-.2 1.1 1.3.7 3.3-1.4 5.4C18 16.3 12 21 12 21z" fill="none" stroke="#0f1a33" stroke-width="2">