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>Playlists Screen</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #121212; color: #FFFFFF;12  }13 14  /* Status bar */15  .status-bar {16    position: absolute; top: 0; left: 0; width: 100%; height: 90px;17    display: flex; align-items: center; justify-content: space-between;18    padding: 0 36px; color: #fff; font-size: 36px; opacity: 0.9;19  }20  .status-icons { display: flex; gap: 24px; align-items: center; }21 22  /* Header */23  .header {24    position: absolute; top: 90px; left: 0; width: 100%; height: 220px;25    padding: 0 36px;26  }27  .header-top {28    display: flex; align-items: center; justify-content: space-between;29  }30  .left-group { display: flex; align-items: center; gap: 24px; }31  .title { font-weight: 700; font-size: 96px; line-height: 1.1; margin-top: 12px; }32  .actions { display: flex; gap: 36px; align-items: center; }33  .icon-btn { width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center; }34  .icon-btn svg { width: 48px; height: 48px; }35 36  /* Filter pill */37  .filter-row { margin-top: 24px; display: flex; align-items: center; gap: 24px; }38  .pill {39    background: #2A2A2A; border-radius: 48px; padding: 20px 28px;40    display: inline-flex; align-items: center; gap: 14px; font-size: 40px;41  }42  .pill svg { width: 36px; height: 36px; }43 44  /* List */45  .content {46    position: absolute; top: 310px; left: 0; right: 0; bottom: 400px;47    padding: 0 36px; overflow-y: auto;48  }49  .list-row {50    display: flex; gap: 28px; align-items: center;51    margin-bottom: 34px;52  }53  .thumb {54    width: 480px; height: 270px; border-radius: 28px;55    background: #E0E0E0; border: 1px solid #BDBDBD;56    display: flex; align-items: center; justify-content: center;57    color: #757575; font-size: 34px; text-align: center; padding: 12px;58    position: relative;59  }60  .badge {61    position: absolute; bottom: 16px; right: 16px;62    background: rgba(0,0,0,0.7); color: #fff; font-size: 32px;63    padding: 8px 14px; border-radius: 14px;64    display: flex; align-items: center; gap: 8px;65  }66  .row-info { flex: 1; }67  .row-title { font-size: 52px; font-weight: 700; margin-bottom: 8px; }68  .row-sub { font-size: 36px; color: #B0B0B0; }69  .row-menu { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }70 71  /* Create new playlist button */72  .create-btn {73    width: 100%; height: 120px; background: #2A2A2A; border-radius: 60px;74    display: flex; align-items: center; justify-content: center;75    font-size: 44px; font-weight: 600; margin: 24px 0 36px 0;76  }77 78  /* Toast card */79  .toast {80    background: #FFFFFF; color: #000; border-radius: 28px;81    padding: 28px; display: flex; align-items: center; justify-content: space-between;82    font-size: 42px; margin-bottom: 24px;83  }84  .toast .action { color: #3AB4FF; font-weight: 600; }85 86  /* Mini player */87  .mini-player {88    position: absolute; left: 0; right: 0; bottom: 220px;89    height: 180px; background: #1A1A1A; border-top: 1px solid #2A2A2A;90    display: flex; align-items: center; padding: 0 24px; gap: 24px;91  }92  .mini-thumb {93    width: 210px; height: 140px; border-radius: 14px;94    background: #E0E0E0; border: 1px solid #BDBDBD;95    display: flex; align-items: center; justify-content: center;96    color: #757575; font-size: 28px;97  }98  .mini-info { flex: 1; min-width: 0; }99  .mini-title {100    font-size: 40px; color: #FFFFFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;101  }102  .mini-sub { font-size: 32px; color: #B0B0B0; }103  .mini-actions { display: flex; gap: 24px; }104 105  /* Bottom navigation */106  .bottom-nav {107    position: absolute; left: 0; right: 0; bottom: 0;108    height: 220px; background: #0F0F0F; display: flex;109    align-items: center; justify-content: space-around; border-top: 1px solid #202020;110  }111  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #CCCCCC; }112  .nav-item .label { font-size: 30px; }113  .nav-item svg { width: 56px; height: 56px; }114  .nav-center {115    width: 120px; height: 120px; background: #2A2A2A; border-radius: 60px;116    display: flex; align-items: center; justify-content: center; margin-top: -40px;117  }118  .notif-dot {119    position: absolute; width: 18px; height: 18px; background: #E53935; border-radius: 50%;120    right: -6px; top: -6px;121  }122 123  /* Gesture bar */124  .gesture {125    position: absolute; left: 50%; transform: translateX(-50%);126    bottom: 240px; width: 180px; height: 10px; border-radius: 5px; background: #EAEAEA; opacity: 0.8;127  }128 129  /* Simple helper */130  .muted { color: #B0B0B0; }131</style>132</head>133<body>134<div id="render-target">135 136  <!-- Status Bar -->137  <div class="status-bar">138    <div>8:29</div>139    <div class="status-icons">140      <!-- simple dots to represent status icons -->141      <svg width="28" height="28"><circle cx="14" cy="14" r="6" fill="#fff"/></svg>142      <svg width="28" height="28"><rect x="6" y="6" width="16" height="16" fill="#fff"/></svg>143      <svg width="28" height="28"><circle cx="14" cy="14" r="12" fill="none" stroke="#fff" stroke-width="2"/></svg>144      <svg width="28" height="28"><circle cx="14" cy="14" r="3" fill="#fff"/></svg>145      <svg width="28" height="28"><path d="M4 22 L24 22" stroke="#fff" stroke-width="3"/></svg>146    </div>147  </div>148 149  <!-- Header -->150  <div class="header">151    <div class="header-top">152      <div class="left-group">153        <div class="icon-btn" aria-label="Back">154          <svg viewBox="0 0 48 48">155            <path d="M30 10 L16 24 L30 38" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>156          </svg>157        </div>158      </div>159      <div class="actions">160        <!-- Cast -->161        <div class="icon-btn" aria-label="Cast">162          <svg viewBox="0 0 48 48">163            <rect x="6" y="10" width="30" height="22" rx="3" ry="3" stroke="#fff" stroke-width="3" fill="none"/>164            <path d="M6 34 Q12 34 16 38" stroke="#fff" stroke-width="3" fill="none"/>165            <path d="M6 34 Q8 34 10 36" stroke="#fff" stroke-width="3" fill="none"/>166          </svg>167        </div>168        <!-- Search -->169        <div class="icon-btn" aria-label="Search">170          <svg viewBox="0 0 48 48">171            <circle cx="21" cy="21" r="12" stroke="#fff" stroke-width="3" fill="none"/>172            <path d="M32 32 L42 42" stroke="#fff" stroke-width="3" stroke-linecap="round"/>173          </svg>174        </div>175        <!-- Kebab -->176        <div class="icon-btn" aria-label="More">177          <svg viewBox="0 0 48 48">178            <circle cx="24" cy="10" r="3" fill="#fff"/>179            <circle cx="24" cy="24" r="3" fill="#fff"/>180            <circle cx="24" cy="38" r="3" fill="#fff"/>181          </svg>182        </div>183      </div>184    </div>185    <div class="title">Playlists</div>186    <div class="filter-row">187      <div class="pill">188        <span>Recently added</span>189        <svg viewBox="0 0 24 24">190          <path d="M6 9 L12 15 L18 9" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>191        </svg>192      </div>193    </div>194  </div>195 196  <!-- Content -->197  <div class="content">198    <!-- Row: Watch later -->199    <div class="list-row">200      <div class="thumb">[IMG: Watch later tile]201        <div class="badge">202          <svg width="28" height="28" viewBox="0 0 24 24">203            <circle cx="12" cy="12" r="9" stroke="#fff" stroke-width="2" fill="none"/>204            <path d="M12 7 L12 12 L16 14" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>205          </svg>206          <span>0</span>207        </div>208      </div>209      <div class="row-info">210        <div class="row-title">Watch later</div>211        <div class="row-sub">Private</div>212      </div>213    </div>214 215    <!-- Row: wedding dresses and makeup ideas -->216    <div class="list-row">217      <div class="thumb">[IMG: Fashion runway video]</div>218      <div class="row-info">219        <div class="row-title">wedding dresses and makeup ideas</div>220        <div class="row-sub">Private · Playlist<span class="muted"> · Updated today</span></div>221      </div>222      <div class="row-menu">223        <svg viewBox="0 0 48 48">224          <circle cx="24" cy="12" r="4" fill="#fff"/>225          <circle cx="24" cy="24" r="4" fill="#fff"/>226          <circle cx="24" cy="36" r="4" fill="#fff"/>227        </svg>228      </div>229    </div>230 231    <!-- Row: News video playlist -->232    <div class="list-row">233      <div class="thumb">[IMG: News video thumbnail]234        <div class="badge">235          <svg width="28" height="28" viewBox="0 0 24 24">236            <rect x="4" y="6" width="16" height="12" stroke="#fff" stroke-width="2" fill="none" rx="2" ry="2"/>237            <path d="M10 9 L15 12 L10 15 Z" fill="#fff"/>238          </svg>239          <span>5</span>240        </div>241      </div>242      <div class="row-info">243        <div class="row-title">News & clips</div>244        <div class="row-sub">Private</div>245      </div>246    </div>247 248    <!-- Row: Scenic portrait video -->249    <div class="list-row">250      <div class="thumb">[IMG: Scenic portrait video]</div>251      <div class="row-info">252        <div class="row-title">Travel moments</div>253        <div class="row-sub">Private</div>254      </div>255      <div class="row-menu">256        <svg viewBox="0 0 48 48">257