GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4  <meta charset="utf-8">5  <meta name="viewport" content="width=1080, initial-scale=1.0">6  <style>7    body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", "Inter", "Segoe UI", Arial, sans-serif; }8    #render-target {9      width: 1080px;10      height: 2400px;11      position: relative;12      overflow: hidden;13      background: #141016;14      color: #EEE;15    }16 17    /* Top status bar */18    .status-bar {19      position: absolute;20      top: 22px;21      left: 36px;22      right: 36px;23      height: 80px;24      display: flex;25      align-items: center;26      justify-content: space-between;27    }28    .status-left {29      display: flex;30      align-items: center;31      gap: 18px;32      font-size: 36px;33      color: #EDE7F6;34    }35    .status-icons { display: flex; align-items: center; gap: 16px; }36    .status-dot {37      width: 14px;38      height: 14px;39      background: #8A8693;40      border-radius: 50%;41      opacity: .7;42    }43    .mic-pill {44      background: #27D885;45      color: #0D0F11;46      border-radius: 34px;47      padding: 14px 26px;48      display: flex;49      align-items: center;50      gap: 12px;51      font-weight: 600;52      font-size: 28px;53    }54    .mic-pill svg { display: block; }55 56    /* Title */57    .title {58      position: absolute;59      top: 150px;60      left: 48px;61      right: 120px;62      font-size: 72px;63      font-weight: 600;64      color: #F3EFFA;65    }66    .menu {67      position: absolute;68      top: 170px;69      right: 44px;70      display: flex;71      flex-direction: column;72      gap: 8px;73    }74    .menu span {75      width: 10px;76      height: 10px;77      background: #9B94A7;78      border-radius: 50%;79    }80 81    /* Main waveform card */82    .card {83      position: absolute;84      left: 36px;85      top: 360px;86      width: 1008px;87      height: 1100px;88      background: #1B1620;89      border-radius: 56px;90      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);91    }92    .dotted {93      position: absolute;94      right: 64px;95      bottom: 160px;96      width: 820px;97      height: 0;98      border-top: 8px dotted rgba(230,225,240,0.7);99    }100 101    /* Segmented control */102    .segmented {103      position: absolute;104      left: 150px;105      top: 1460px;106      width: 780px;107      height: 120px;108      background: #2A2430;109      border-radius: 60px;110      display: flex;111      align-items: center;112      padding: 10px;113      gap: 18px;114    }115    .seg-btn {116      flex: 1;117      height: 100px;118      border-radius: 50px;119      display: flex;120      align-items: center;121      justify-content: center;122      gap: 16px;123      font-size: 42px;124      color: #CFC7DA;125    }126    .seg-btn.active { background: #3A3440; color: #FFFFFF; }127    .seg-btn svg { width: 42px; height: 42px; }128 129    /* Timer and controls */130    .timer {131      position: absolute;132      top: 1650px;133      left: 0; right: 0;134      display: flex;135      align-items: center;136      justify-content: center;137      gap: 20px;138      font-size: 72px;139      font-weight: 600;140      color: #FFFFFF;141    }142    .timer .dot {143      width: 22px;144      height: 22px;145      background: #FF5B55;146      border-radius: 50%;147    }148    .label-left, .label-right {149      position: absolute;150      top: 1870px;151      font-size: 44px;152      color: #EAE6F2;153    }154    .label-left { left: 140px; }155    .label-right { right: 140px; }156 157    .controls {158      position: absolute;159      top: 1880px;160      left: 0; right: 0;161      display: flex;162      align-items: center;163      justify-content: center;164    }165    .pause-btn {166      width: 260px;167      height: 260px;168      background: #F06A5C;169      border-radius: 56px;170      display: flex;171      align-items: center;172      justify-content: center;173    }174    .pause-btn svg { width: 110px; height: 110px; }175 176    /* Home indicator */177    .home-bar {178      position: absolute;179      bottom: 36px;180      left: 50%;181      transform: translateX(-50%);182      width: 420px;183      height: 14px;184      background: #D0CDD5;185      border-radius: 8px;186      opacity: .85;187    }188  </style>189</head>190<body>191  <div id="render-target">192    <!-- Status bar -->193    <div class="status-bar">194      <div class="status-left">195        <div>12:52</div>196        <div class="status-icons">197          <!-- simple bars icon -->198          <svg width="36" height="36" viewBox="0 0 24 24" aria-hidden="true">199            <path fill="#9B94A7" d="M3 12h3v2H3v-2zm5-4h3v6H8V8zm5-2h3v10h-3V6zm5-4h3v14h-3V2z"></path>200          </svg>201          <div class="status-dot"></div>202          <div class="status-dot"></div>203        </div>204      </div>205      <div class="mic-pill">206        <svg viewBox="0 0 24 24" width="28" height="28" aria-hidden="true">207          <path fill="#0a2f1f" d="M9 4a3 3 0 016 0v6a3 3 0 01-6 0V4zm-1 8a5 5 0 0010 0h2a7 7 0 01-6 6.9V21h-4v-2.1A7 7 0 015 12h3z"></path>208        </svg>209        <span>Mic</span>210      </div>211    </div>212 213    <!-- Title -->214    <div class="title">Tuesday at 12:52 PM</div>215    <div class="menu"><span></span><span></span><span></span></div>216 217    <!-- Main card with dotted waveform line -->218    <div class="card">219      <div class="dotted"></div>220    </div>221 222    <!-- Segmented control -->223    <div class="segmented">224      <div class="seg-btn active">225        <svg viewBox="0 0 24 24" aria-hidden="true">226          <path fill="#FFFFFF" d="M5 14h2v6H5v-6zm5-4h2v10h-2V10zm5-7h2v17h-2V3z"></path>227        </svg>228        <span>Audio</span>229      </div>230      <div class="seg-btn">231        <svg viewBox="0 0 24 24" aria-hidden="true">232          <path fill="#CFC7DA" d="M4 6h16v2H4V6zm0 5h16v2H4v-2zm0 5h16v2H4v-2z"></path>233        </svg>234        <span>Transcript</span>235      </div>236    </div>237 238    <!-- Timer -->239    <div class="timer">240      <div class="dot"></div>241      <div>00:01.6</div>242    </div>243 244    <!-- Labels -->245    <div class="label-left">Delete</div>246    <div class="label-right">Save</div>247 248    <!-- Pause control -->249    <div class="controls">250      <div class="pause-btn">251        <svg viewBox="0 0 24 24" aria-hidden="true">252          <rect x="6" y="5" width="5" height="14" rx="1" fill="#7A3A35"></rect>253          <rect x="13" y="5" width="5" height="14" rx="1" fill="#7A3A35"></rect>254        </svg>255      </div>256    </div>257 258    <!-- Home indicator -->259    <div class="home-bar"></div>260  </div>261</body>262</html>