GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Recordings UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #1e1e1e;13    color: #fff;14  }15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 110px;22    background: #1b1b1b;23    display: flex;24    align-items: center;25    padding: 0 32px;26    box-sizing: border-box;27    font-size: 38px;28    color: #eaeaea;29  }30  .status-left { display: flex; align-items: center; gap: 24px; }31  .status-right { margin-left: auto; display: flex; align-items: center; gap: 24px; }32  .icon-box {33    width: 36px; height: 36px; border-radius: 6px; background: #2e2e2e;34  }35  .battery {36    width: 56px; height: 30px; border: 3px solid #d9d9d9; border-radius: 6px; position: relative;37  }38  .battery::after {39    content: ""; position: absolute; right: -10px; top: 8px; width: 8px; height: 14px; background: #d9d9d9; border-radius: 2px;40  }41  .battery .level { position: absolute; left: 3px; top: 3px; height: 20px; width: 36px; background: #d9d9d9; border-radius: 3px; }42  /* App bar */43  .app-bar {44    position: absolute;45    top: 110px;46    left: 0;47    width: 1080px;48    height: 150px;49    background: #2a2a2a;50    display: flex;51    align-items: center;52    padding: 0 24px;53    box-sizing: border-box;54    border-bottom: 1px solid #3a3a3a;55  }56  .back-btn, .menu-btn { width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; }57  .app-title { font-size: 64px; font-weight: 600; margin-left: 8px; }58  .menu-btn { margin-left: auto; }59  /* List item */60  .list {61    position: absolute;62    top: 260px;63    left: 0;64    width: 1080px;65  }66  .list-item {67    display: flex;68    align-items: center;69    padding: 36px 32px;70    box-sizing: border-box;71    border-bottom: 1px solid #323232;72  }73  .avatar {74    width: 96px; height: 96px; border-radius: 48px; background: #3a3a3a; display: flex; align-items: center; justify-content: center;75    margin-right: 26px;76  }77  .title { font-size: 54px; color: #ff4d4d; line-height: 1.2; }78  .subtitle { font-size: 38px; color: #a0a0a0; margin-top: 10px; }79  .duration { margin-left: auto; font-size: 42px; color: #d0d0d0; }80  /* Ad banner */81  .ad-banner {82    position: absolute;83    bottom: 360px;84    left: 0;85    width: 1080px;86    height: 180px;87    background: #E0E0E0;88    border-top: 1px solid #BDBDBD;89    border-bottom: 1px solid #BDBDBD;90    display: flex;91    align-items: center;92    justify-content: center;93    color: #575757;94    font-size: 40px;95    letter-spacing: 0.5px;96  }97  /* Progress bar */98  .progress-wrap {99    position: absolute;100    bottom: 270px;101    left: 0;102    width: 1080px;103    height: 40px;104    display: flex;105    align-items: center;106    padding: 0 44px;107    box-sizing: border-box;108  }109  .progress-line {110    position: relative;111    width: 992px;112    height: 6px;113    background: #4a1f1f;114    border-radius: 3px;115  }116  .progress-line::before {117    content: "";118    position: absolute;119    left: 0;120    top: -2px;121    width: 920px;122    height: 10px;123    background: #e34a45;124    border-radius: 5px;125  }126  .progress-dot {127    position: absolute;128    left: 920px;129    top: -11px;130    width: 30px;131    height: 30px;132    background: #e34a45;133    border-radius: 50%;134  }135  /* Control bar */136  .controls {137    position: absolute;138    bottom: 90px;139    left: 0;140    width: 1080px;141    height: 180px;142    display: flex;143    align-items: center;144    padding: 0 44px;145    box-sizing: border-box;146    gap: 36px;147  }148  .time-text { font-size: 46px; color: #e6e6e6; width: 160px; }149  .circle-btn {150    width: 100px; height: 100px; border-radius: 50%; background: #2d2d2d;151    display: flex; align-items: center; justify-content: center;152  }153  .play-btn {154    width: 120px; height: 120px; border-radius: 60px; background: #2d2d2d;155    display: flex; align-items: center; justify-content: center;156  }157  .spacer { flex: 1; }158  .small-btn {159    width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; background: #2d2d2d; border-radius: 14px;160  }161  .kebab-vert { width: 22px; height: 22px; background: #dcdcdc; border-radius: 50%; box-shadow: 0 32px 0 #dcdcdc, 0 -32px 0 #dcdcdc; }162  /* SVG helper colors */163  .icon-stroke { stroke: #ffffff; }164  .icon-fill { fill: #ffffff; }165</style>166</head>167<body>168<div id="render-target">169 170  <!-- Status Bar -->171  <div class="status-bar">172    <div class="status-left">173      <div style="font-weight:600;">9:22</div>174      <div class="icon-box"></div>175      <div class="icon-box"></div>176      <div class="icon-box"></div>177    </div>178    <div class="status-right">179      <!-- Simple cloud/wifi placeholders -->180      <svg width="38" height="38">181        <circle cx="19" cy="19" r="16" fill="#d9d9d9" opacity="0.8"></circle>182      </svg>183      <svg width="40" height="40" viewBox="0 0 24 24">184        <path d="M2 8c5-5 15-5 20 0M6 12c3-3 9-3 12 0M10 16c2-2 6-2 8 0M14 20l-2 2-2-2" stroke="#d9d9d9" stroke-width="2" fill="none" stroke-linecap="round"/>185      </svg>186      <div class="battery"><div class="level"></div></div>187    </div>188  </div>189 190  <!-- App Bar -->191  <div class="app-bar">192    <div class="back-btn">193      <svg width="64" height="64" viewBox="0 0 24 24">194        <path d="M15 18L9 12l6-6" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>195      </svg>196    </div>197    <div class="app-title">Recordings</div>198    <div class="menu-btn">199      <svg width="60" height="60" viewBox="0 0 24 24">200        <circle cx="12" cy="5" r="2" fill="#ffffff"></circle>201        <circle cx="12" cy="12" r="2" fill="#ffffff"></circle>202        <circle cx="12" cy="19" r="2" fill="#ffffff"></circle>203      </svg>204    </div>205  </div>206 207  <!-- List -->208  <div class="list">209    <div class="list-item">210      <div class="avatar">211        <svg width="60" height="60" viewBox="0 0 24 24">212          <path d="M9 4v10a3 3 0 1 0 2 2V8h6V6h-6V4z" fill="#cfcfcf"></path>213        </svg>214      </div>215      <div style="display:flex; flex-direction:column;">216        <div class="title">Senorita</div>217        <div class="subtitle">Dec 8, 9:09 AM</div>218      </div>219      <div class="duration">00:32</div>220    </div>221  </div>222 223  <!-- Ad banner -->224  <div class="ad-banner">[IMG: Spotify Ad Banner]</div>225 226  <!-- Progress Bar -->227  <div class="progress-wrap">228    <div class="progress-line">229      <div class="progress-dot"></div>230    </div>231  </div>232 233  <!-- Controls -->234  <div class="controls">235    <div class="time-text">00:32</div>236 237    <div class="circle-btn">238      <!-- Replay/back circular arrow -->239      <svg width="54" height="54" viewBox="0 0 24 24">240        <path d="M12 6a6 6 0 1 1-4.24 10.24" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"></path>241        <path d="M7 7v4l-3-2" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>242      </svg>243    </div>244 245    <div class="play-btn">246      <svg width="70" height="70" viewBox="0 0 24 24">247        <polygon points="8,5 20,12 8,19" fill="#ffffff"></polygon>248      </svg>249    </div>250 251    <div class="circle-btn">252      <!-- Forward circular arrow -->253      <svg width="54" height="54" viewBox="0 0 24 24">254        <path d="M12 6a6 6 0 1 0 4.24 10.24" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"></path>255        <path d="M17 7v4l3-2" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>256      </svg>257    </div>258 259    <div class="spacer"></div>260 261    <div class="small-btn">262      <!-- Share/export icon -->263      <svg width="60" height="60" viewBox="0 0 24 24">264        <rect x="5" y="9" width="12" height="10" stroke="#ffffff" stroke-width="2" fill="none" rx="2"></rect>265        <path d="M12 5l4 4M12 5l-4 4M12 5v8" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>266      </svg>267    </div>268 269    <div style="width: 90px; height: 90px; display:flex; align-items:center; justify-content:center;">270      <div class="kebab-vert"></div>271    </div>272  </div>273 274</div>275</body>276</html>