GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Audio Player Mock</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body{margin:0;padding:0;background:transparent;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#e7e7ea;}8  #render-target{9    width:1080px;height:2400px;position:relative;overflow:hidden;10    background:#0f1216;11  }12 13  /* Top status bar */14  .status{15    height:90px; padding:0 40px; display:flex; align-items:center; justify-content:space-between;16    color:#e9e9ef; font-weight:600; font-size:42px; letter-spacing:0.5px;17  }18  .status .right{display:flex; align-items:center; gap:26px; color:#cfd3da;}19  .icon{width:54px;height:54px;display:inline-flex;align-items:center;justify-content:center;color:#cfd3da;}20  .icon svg{width:44px;height:44px;fill:#cfd3da;}21  .thin{stroke:#cfd3da;stroke-width:2;fill:none}22 23  /* App bar */24  .appbar{25    height:110px; padding:0 36px; display:flex; align-items:center; justify-content:space-between;26  }27  .appbar .left, .appbar .right{display:flex;align-items:center;gap:30px;}28  .appbar .icon svg{width:48px;height:48px;fill:#cfd3da;}29 30  /* Big card */31  .card{32    margin:36px; margin-top:20px; background:#1a1d23; border-radius:34px; padding:38px 42px; 33    box-shadow:0 2px 0 rgba(255,255,255,0.02) inset;34  }35  .title{font-size:64px; font-weight:700; margin-bottom:14px;}36  .subtitle{font-size:38px; color:#aeb4bf;}37 38  .wave-holder{39    position:relative; margin-top:46px; height:880px; border-radius:28px;40    background:#161a1f; 41  }42  .wave-inner{43    position:absolute; inset:0; border-radius:28px; overflow:hidden;44    display:flex; align-items:center; justify-content:center;45  }46  .baseline{47    position:absolute; left:0; right:0; bottom:340px; height:0;48    border-bottom:6px dotted #6c7380; opacity:.7;49  }50  .vline{51    position:absolute; top:180px; bottom:180px; left:50%; width:6px; transform:translateX(-50%);52    background:#7f8693; border-radius:3px;53  }54 55  /* Tabs */56  .tabs{57    margin:26px 36px 0; display:flex; gap:26px;58  }59  .chip{60    display:flex; align-items:center; gap:18px; padding:20px 34px; border-radius:50px;61    font-size:44px; background:#2a2f37; color:#cfd4dc;62  }63  .chip.active{background:#3b404a; color:#ffffff;}64  .chip .mini{width:36px;height:36px; opacity:.9;}65  .chip .mini svg{width:36px;height:36px;fill:currentColor;}66 67  /* Progress section */68  .progress-wrap{margin:38px 36px 0;}69  .progress{70    position:relative; height:16px; border-radius:10px; background:#2b3038;71  }72  .progress .fill{73    position:absolute; height:100%; width:68%; background:#55607a; border-radius:10px;74  }75  .progress .marker{76    position:absolute; right:0; transform:translate(0,-50%); top:50%;77    width:34px;height:34px;background:#c7cde0;border-radius:50%; border:6px solid #9aa3b6;78  }79  .time-row{80    display:flex; justify-content:space-between; margin-top:18px; color:#c1c6d0; font-size:40px;81  }82 83  /* Controls */84  .controls{85    margin:38px 0; display:flex; justify-content:space-around; align-items:center;86  }87  .btn-circle{88    width:240px;height:240px;border-radius:50%; background:#242931; display:flex; align-items:center; justify-content:center; color:#dfe3ea;89  }90  .btn-circle svg{width:120px;height:120px;fill:#dfe3ea;}91  .btn-lg{92    width:300px;height:300px;border-radius:50%; background:#cfd5e6; display:flex; align-items:center; justify-content:center;93    box-shadow:0 10px 30px rgba(0,0,0,.35) inset;94  }95  .btn-lg svg{width:130px;height:130px;fill:#243042;}96  .small-note{97    position:absolute; font-size:46px; color:#e6e6ee; font-weight:700;98  }99  .left-note{transform:translate(44px,72px);}100  .right-note{transform:translate(44px,72px);}101 102  /* Bottom gesture pill */103  .gesture{104    position:absolute; left:50%; bottom:34px; transform:translateX(-50%);105    width:560px; height:14px; background:#e3e6ee; border-radius:10px; opacity:.75;106  }107</style>108</head>109<body>110<div id="render-target">111 112  <!-- Android status bar -->113  <div class="status">114    <div>9:13</div>115    <div class="right">116      <div class="icon">117        <!-- tiny cloud -->118        <svg viewBox="0 0 24 24"><path d="M7 18a5 5 0 0 1 0-10c.6-2.4 2.8-4 5.3-4A6.7 6.7 0 0 1 19 11h1a4 4 0 0 1 0 8H7z" fill="#e1e6ef"/></svg>119      </div>120      <div class="icon">121        <!-- wifi -->122        <svg viewBox="0 0 24 24"><path d="M2 8a16 16 0 0 1 20 0l-2 2a13 13 0 0 0-16 0L2 8zm4 5a10 10 0 0 1 12 0l-2 2a7 7 0 0 0-8 0l-2-2zm6 6 3 3-3 3-3-3 3-3z" fill="#e1e6ef"/></svg>123      </div>124      <div class="icon">125        <!-- battery -->126        <svg viewBox="0 0 24 24"><rect x="2" y="6" width="18" height="12" rx="2" fill="#e1e6ef"/><rect x="4" y="8" width="14" height="8" fill="#0f1216"/><rect x="4" y="8" width="10" height="8" fill="#e1e6ef"/><rect x="20" y="9" width="2" height="6" fill="#e1e6ef"/></svg>127      </div>128    </div>129  </div>130 131  <!-- App bar -->132  <div class="appbar">133    <div class="left">134      <div class="icon">135        <svg viewBox="0 0 24 24"><path d="M15.5 19 8.5 12l7-7" stroke="#cfd3da" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>136      </div>137    </div>138    <div class="right">139      <div class="icon">140        <!-- star -->141        <svg viewBox="0 0 24 24"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z" fill="none" stroke="#cfd3da" stroke-width="2"/></svg>142      </div>143      <div class="icon">144        <!-- share -->145        <svg viewBox="0 0 24 24"><path d="M18 8a3 3 0 1 0-2.8-4H15A3 3 0 0 0 9 6l.05.5L9 7a3 3 0 0 0 6 .5V7a3 3 0 0 0 3-3zM6 14a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm12-4a3 3 0 1 0 0 6 3 3 0 0 0 0-6zM8 15l8-4m-8 3 8 4" stroke="#cfd3da" stroke-width="2" fill="none" stroke-linecap="round"/></svg>146      </div>147      <div class="icon">148        <!-- scissors -->149        <svg viewBox="0 0 24 24"><path d="M4 7a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm16-4-8 8M8 11l12 9M4 17a3 3 0 1 0 0 6 3 3 0 0 0 0-6z" stroke="#cfd3da" stroke-width="2" fill="none" stroke-linecap="round"/></svg>150      </div>151      <div class="icon">152        <!-- search -->153        <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="6" stroke="#cfd3da" stroke-width="2" fill="none"/><path d="M15 15l6 6" stroke="#cfd3da" stroke-width="2" fill="none" stroke-linecap="round"/></svg>154      </div>155      <div class="icon">156        <!-- more -->157        <svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="2" fill="#cfd3da"/><circle cx="12" cy="12" r="2" fill="#cfd3da"/><circle cx="19" cy="12" r="2" fill="#cfd3da"/></svg>158      </div>159    </div>160  </div>161 162  <!-- Card with waveform -->163  <div class="card">164    <div class="title">Audio 1</div>165    <div class="subtitle">Fri, Jun 23 · 1:16 PM</div>166 167    <div class="wave-holder">168      <div class="wave-inner">169        <!-- Placeholder "waveform" area -->170        <div class="baseline"></div>171        <div class="vline"></div>172      </div>173    </div>174  </div>175 176  <!-- Tabs -->177  <div class="tabs">178    <div class="chip active">179      <span class="mini">180        <svg viewBox="0 0 24 24"><path d="M3 12h3v6H3v-6zm5-4h3v10H8V8zm5 3h3v7h-3v-7zm5-5h3v12h-3V6z"/></svg>181      </span>182      Audio183    </div>184    <div class="chip">185      <span class="mini">186        <svg viewBox="0 0 24 24"><path d="M4 6h16v2H4V6zm0 5h16v2H4v-2zm0 5h10v2H4v-2z"/></svg>187      </span>188      Transcript189    </div>190  </div>191 192  <!-- Progress -->193  <div class="progress-wrap">194    <div class="progress">195      <div class="fill"></div>196      <div class="marker"></div>197    </div>198    <div class="time-row">199      <div>00:00</div>200      <div>-01:40</div>201    </div>202  </div>203 204  <!-- Controls -->205  <div class="controls">206    <div class="btn-circle" style="position:relative;">207      <svg viewBox="0 0 24 24"><path d="M12 5v3a7 7 0 1 1-6.5 4.5" stroke="#e6e9f2" stroke-width="2.2" fill="none" stroke-linecap="round"/><path d="M9 4 5 7l4 3" fill="none" stroke="#e6e9f2" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>208      <div class="small-note left-note">5</div>209    </div>210    <div class="btn-lg">211      <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>212    </div>213    <div class="btn-circle" style="position:relative;">214      <svg viewBox="0 0 24 24"><path d="M12 5v3a7 7 0 1 0 6.5 4.5" stroke="#e6e9f2" stroke-width="2.2" fill="none" stroke-linecap="round"/><path d="M15 4 19 7l-4 3" fill="none" stroke="#e6e9f2" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>215      <div class="small-note right-note">10</div>216    </div>217  </div>218 219  <!-- Bottom gesture pill -->220  <div class="gesture"></div>221 222</div>223</body>224</html>