GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Playback Paused UI</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background:#ffffff; border-radius:0;10  }11 12  /* Status bar */13  .status-bar {14    position:absolute; top:0; left:0; right:0; height:100px;15    background:#1e73c9; color:#fff; display:flex; align-items:center;16    padding:0 32px; font-size:40px;17  }18  .status-icons { margin-left:auto; display:flex; gap:22px; align-items:center; }19  .status-icons svg { width:40px; height:40px; fill:#fff; }20 21  /* App bar */22  .app-bar {23    position:absolute; top:100px; left:0; right:0; height:250px;24    background:#2577d5; color:#fff; box-sizing:border-box; padding:26px 32px;25  }26  .app-title { font-size:64px; font-weight:700; margin-top:10px; }27  .app-actions { position:absolute; top:30px; right:24px; display:flex; gap:38px; }28  .app-actions svg { width:56px; height:56px; fill:#fff; }29  .tabs {30    position:absolute; bottom:0; left:0; right:0; height:100px;31    display:flex; align-items:center; padding:0 36px; gap:60px;32  }33  .tab { color:#dfe9ff; font-size:40px; letter-spacing:3px; }34  .tab.active { color:#ffffff; font-weight:700; }35  .tab-indicator {36    position:absolute; bottom:0; left:540px; width:160px; height:6px; background:#fff; border-radius:3px;37  }38 39  /* Ads strip */40  .ads-strip {41    position:absolute; top:350px; left:0; right:0; height:140px;42    display:flex; align-items:center; gap:18px; padding:0 18px;43    background:#e9f2ff;44  }45  .ad-card {46    width:210px; height:140px; background:#E0E0E0; border:1px solid #BDBDBD;47    position:relative; display:flex; align-items:center; justify-content:center; color:#757575; font-size:28px;48    border-radius:6px;49  }50  .price-tag {51    position:absolute; bottom:-10px; left:16px; background:#fff; color:#2d2d2d;52    padding:6px 14px; border-radius:28px; font-size:28px; box-shadow:0 2px 4px rgba(0,0,0,0.1);53    border:1px solid #d9d9d9;54  }55 56  /* Recording card */57  .record-card {58    position:absolute; top:510px; left:0; right:0; margin:0 0;59    padding:24px 32px; box-sizing:border-box;60  }61  .card {62    background:#215ec5; color:#fff; border-radius:8px; padding:32px; box-sizing:border-box;63  }64  .card-header {65    display:flex; justify-content:space-between; align-items:flex-start;66  }67  .file-title { font-size:46px; font-weight:700; line-height:1.3; }68  .file-meta {69    text-align:right; font-size:36px; margin-top:6px; opacity:0.95;70  }71  .date-line { font-size:34px; color:#dfe7ff; margin-top:12px; }72  .card-actions {73    display:flex; gap:36px; margin-top:26px;74  }75  .icon-btn svg { width:56px; height:56px; fill:#fff; }76  .more-menu { margin-left:auto; }77 78  /* Spacer to mimic large white area */79  .spacer {80    position:absolute; top:800px; left:0; right:0; bottom:320px; background:#ffffff;81  }82 83  /* Playback bar */84  .playback-bar {85    position:absolute; bottom:0; left:0; right:0; height:280px; background:#2778d6;86    box-sizing:border-box; padding:26px 40px; color:#fff;87  }88  .time-row {89    display:flex; align-items:center; gap:24px; color:#fff; font-size:40px; margin-top:20px;90  }91  .time-row .spacer-line {92    flex:1; height:6px; background:#ffffff55; border-radius:3px; position:relative;93  }94  .slider-knob {95    position:absolute; top:-12px; left:160px; width:26px; height:26px; background:#fff; border-radius:50%;96    box-shadow:0 0 0 3px rgba(255,255,255,0.4);97  }98  .controls {99    margin-top:36px; display:flex; align-items:center; justify-content:center; gap:80px;100  }101  .play-btn {102    width:160px; height:160px; background:#fff; border-radius:80px; display:flex; align-items:center; justify-content:center;103    box-shadow:0 6px 12px rgba(0,0,0,0.15);104  }105  .controls svg { fill:#fff; }106 107  /* Snackbar */108  .snackbar {109    position:absolute; bottom:300px; left:24px; right:24px;110    background:#2b2b2b; color:#fff; border-radius:12px; padding:26px 28px;111    font-size:36px; box-shadow:0 6px 16px rgba(0,0,0,0.25);112  }113</style>114</head>115<body>116<div id="render-target">117 118  <!-- Status Bar -->119  <div class="status-bar">120    <div>12:44</div>121    <div class="status-icons">122      <!-- message icon -->123      <svg viewBox="0 0 24 24"><path d="M3 4h18v12H7l-4 4V4z"/></svg>124      <!-- wifi icon -->125      <svg viewBox="0 0 24 24"><path d="M12 18l3 3-3 3-3-3 3-3zm-7-8c4-3 14-3 18 0l-2 2c-3-2-11-2-14 0L5 10zm3 4c2-1 8-1 10 0l-2 2c-2-1-6-1-8 0l0-0 0 0-2-2z"/></svg>126      <!-- battery icon -->127      <svg viewBox="0 0 24 24"><path d="M18 6h2v12h-2V6zM3 7h14v10H3V7z"/></svg>128    </div>129  </div>130 131  <!-- App Bar with title and actions -->132  <div class="app-bar">133    <div class="app-title">Playback paused</div>134    <div class="app-actions">135      <!-- Search -->136      <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="6"></circle><path d="M21 21l-5-5" stroke="#fff" stroke-width="2" fill="none"/></svg>137      <!-- Filter/Sort -->138      <svg viewBox="0 0 24 24"><path d="M3 6h14v2H3zM3 11h18v2H3zM3 16h10v2H3z"/><circle cx="20" cy="7" r="2"/><circle cx="14" cy="17" r="2"/></svg>139      <!-- More -->140      <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>141    </div>142    <div class="tabs">143      <div class="tab">RECORD</div>144      <div class="tab active">LISTEN</div>145    </div>146    <div class="tab-indicator"></div>147  </div>148 149  <!-- Ads strip -->150  <div class="ads-strip">151    <div class="ad-card"><span>[IMG: Appliance]</span><div class="price-tag">₹436</div></div>152    <div class="ad-card"><span>[IMG: Office Chair]</span><div class="price-tag">₹217</div></div>153    <div class="ad-card"><span>[IMG: Monitor]</span><div class="price-tag">₹543</div></div>154    <div class="ad-card"><span>[IMG: Samsung Smart TV]</span><div class="price-tag">₹1,126</div></div>155    <div class="ad-card"><span>[IMG: Monitor]</span><div class="price-tag">₹543</div></div>156  </div>157 158  <!-- Recording card -->159  <div class="record-card">160    <div class="card">161      <div class="card-header">162        <div>163          <div class="file-title">renewable energy lecture practice.m4a</div>164          <div class="date-line">November 22, 11:28 AM</div>165        </div>166        <div class="file-meta">167          <div>01:35</div>168          <div style="margin-top:8px; font-size:34px; color:#dfe7ff;">1.1 MB</div>169        </div>170      </div>171      <div class="card-actions">172        <!-- Share -->173        <div class="icon-btn">174          <svg viewBox="0 0 24 24"><circle cx="6" cy="12" r="2"/><circle cx="18" cy="6" r="2"/><circle cx="18" cy="18" r="2"/><path d="M8 11l8-5M8 13l8 5" stroke="#fff" stroke-width="2" fill="none"/></svg>175        </div>176        <!-- Delete -->177        <div class="icon-btn">178          <svg viewBox="0 0 24 24"><path d="M7 6h10l-1 14H8L7 6z"/><path d="M9 6V4h6v2" stroke="#fff" stroke-width="2" fill="none"/></svg>179        </div>180        <!-- Edit -->181        <div class="icon-btn">182          <svg viewBox="0 0 24 24"><path d="M4 17l1-4 9-9 4 4-9 9-4 1z"/><path d="M13 4l4 4" stroke="#fff" stroke-width="2" fill="none"/></svg>183        </div>184        <!-- More vertical -->185        <div class="icon-btn more-menu" style="margin-left:auto;">186          <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>187        </div>188      </div>189    </div>190  </div>191 192  <div class="spacer"></div>193 194  <!-- Snackbar -->195  <div class="snackbar">“My recording 2.m4a” deleted</div>196 197  <!-- Playback bar -->198  <div class="playback-bar">199    <div class="time-row">200      <div>00:05</div>201      <div class="spacer-line">202        <div class="slider-knob"></div>203      </div>204      <div>01:35</div>205    </div>206    <div class="controls">207      <!-- Skip back -->208      <svg width="72" height="72" viewBox="0 0 24 24"><path d="M6 5h2v14H6zM20 19l-12-7 12-7v14z"/></svg>209      <!-- Play -->210      <div class="play-btn">211        <svg width="80" height="80" viewBox="0 0 24 24"><path d="M8 5l12 7-12 7V5z" fill="#2577d5"/></svg>212      </div>213      <!-- Skip forward -->214      <svg width="72" height="72" viewBox="0 0 24 24"><path d="M16 5h2v14h-2zM4 19l12-7L4 5v14z"/></svg>215    </div>216  </div>217 218</div>219</body>220</html>