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>Audio Recorder UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #2a1714;13    font-family: "Segoe UI", Roboto, Arial, sans-serif;14    color: #eec6b1;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute; left: 0; top: 0; width: 1080px; height: 120px;20    padding: 34px 40px 0 40px; box-sizing: border-box; color: #f5d2c2;21    font-size: 36px; letter-spacing: 0.5px;22  }23  .status-right { position: absolute; right: 40px; top: 34px; display: flex; align-items: center; gap: 26px; }24  .status-icon svg { width: 34px; height: 34px; fill: none; stroke: #f5d2c2; stroke-width: 3; }25 26  /* Top app actions */27  .app-actions {28    position: absolute; left: 32px; top: 140px; display: flex; gap: 50px; align-items: center;29  }30  .action-btn {31    width: 58px; height: 58px; display: flex; align-items: center; justify-content: center;32  }33  .action-btn svg { width: 42px; height: 42px; stroke: #f5d2c2; fill: none; stroke-width: 3; }34 35  /* Main card */36  .card {37    position: absolute; left: 32px; top: 230px; width: 1016px; height: 1200px;38    background: #301c17; border-radius: 60px; box-sizing: border-box; padding: 60px;39  }40  .title { font-size: 58px; font-weight: 600; margin-bottom: 16px; color: #f1cdbb; }41  .subtitle { font-size: 32px; opacity: 0.8; color: #eec6b1; }42 43  /* Waveform area simulation */44  .wave-area {45    position: absolute; left: 32px; right: 32px; top: 470px; bottom: 120px;46    border-radius: 40px; overflow: hidden;47  }48  .timeline {49    position: absolute; left: 0; right: 0; bottom: 140px; height: 6px;50    border-bottom: 6px dotted #8c6e63; opacity: 0.6;51  }52  .cursor {53    position: absolute; left: 420px; bottom: 120px; width: 6px; height: 340px;54    background: #8c6e63;55  }56  .mini-bars {57    position: absolute; left: 460px; bottom: 136px; display: flex; align-items: flex-end; gap: 20px;58  }59  .mini-bars span { display: inline-block; width: 10px; height: 40px; background: #8c6e63; border-radius: 4px; }60 61  /* Segmented control */62  .segment {63    position: absolute; left: 140px; bottom: 260px; width: 800px; height: 120px;64    background: #3a2823; border-radius: 60px; display: flex; align-items: center; padding: 0 24px; box-sizing: border-box;65    gap: 24px;66  }67  .seg {68    flex: 1; height: 88px; border-radius: 44px; display: flex; align-items: center; justify-content: center; gap: 18px;69    color: #f1ccbb; font-size: 36px;70  }71  .seg.active { background: #4a3833; }72  .seg svg { width: 34px; height: 34px; stroke: #f1ccbb; fill: none; stroke-width: 3; }73 74  /* Playback slider */75  .scrub-wrap {76    position: absolute; left: 90px; bottom: 180px; width: 900px; height: 40px;77  }78  .scrub-track {79    position: absolute; top: 18px; left: 0; right: 0; height: 8px; background: #6a5550; border-radius: 4px;80  }81  .scrub-progress {82    position: absolute; top: 18px; left: 0; width: 360px; height: 8px; background: #6177b3; border-radius: 4px;83  }84  .scrub-thumb {85    position: absolute; top: 6px; left: 0; width: 24px; height: 24px; background: #f3c7b6; border-radius: 50%;86    box-shadow: 0 0 0 4px rgba(243,199,182,0.15);87  }88  .time-left {89    position: absolute; left: 90px; bottom: 120px; font-size: 36px; color: #f3c7b6;90  }91  .time-right {92    position: absolute; right: 90px; bottom: 120px; font-size: 36px; color: #f3c7b6;93  }94 95  /* Playback controls */96  .controls {97    position: absolute; left: 60px; bottom: 20px; width: 960px; display: flex; justify-content: space-between; align-items: center;98  }99  .ctrl {100    width: 270px; height: 270px; border-radius: 50%; background: #3a2823; display: flex; align-items: center; justify-content: center;101    position: relative; color: #f3c7b6;102  }103  .ctrl.play { background: #f5bf9f; color: #2a1714; }104  .ctrl svg { width: 90px; height: 90px; stroke: currentColor; fill: none; stroke-width: 5; }105  .ctrl .label {106    position: absolute; bottom: 38px; font-size: 42px; font-weight: 600; color: #f3c7b6; opacity: 0.9;107  }108  .ctrl.play .label { display: none; }109 110  /* Gesture bar */111  .gesture {112    position: absolute; left: 420px; bottom: 12px; width: 240px; height: 14px; background: #e8d7d2; border-radius: 7px; opacity: 0.8;113  }114</style>115</head>116<body>117<div id="render-target">118 119  <!-- Status bar -->120  <div class="status-bar">121    <div>2:38</div>122    <div class="status-right">123      <div class="status-icon">124        <!-- Do Not Disturb -->125        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><line x1="7" y1="12" x2="17" y2="12"></line></svg>126      </div>127      <div class="status-icon">128        <!-- Wi-Fi -->129        <svg viewBox="0 0 24 24"><path d="M3 9c4-3 14-3 18 0"></path><path d="M6 12c3-2 9-2 12 0"></path><path d="M9 15c2-1 4-1 6 0"></path><circle cx="12" cy="18" r="1.5" fill="#f5d2c2" stroke="none"></circle></svg>130      </div>131      <div style="font-size:34px;">100%</div>132      <div class="status-icon">133        <!-- Battery -->134        <svg viewBox="0 0 28 16"><rect x="1" y="2" width="22" height="12" rx="2"></rect><rect x="24" y="6" width="3" height="4"></rect><rect x="3" y="4" width="18" height="8" fill="#f5d2c2" stroke="none"></rect></svg>135      </div>136    </div>137  </div>138 139  <!-- App actions -->140  <div class="app-actions">141    <div class="action-btn">142      <!-- Back -->143      <svg viewBox="0 0 24 24"><path d="M14 6L8 12l6 6"></path><path d="M8 12h10"></path></svg>144    </div>145    <div class="action-btn">146      <!-- Star -->147      <svg viewBox="0 0 24 24"><path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"></path></svg>148    </div>149    <div class="action-btn">150      <!-- Share -->151      <svg viewBox="0 0 24 24"><circle cx="6" cy="12" r="2"></circle><circle cx="16" cy="7" r="2"></circle><circle cx="18" cy="17" r="2"></circle><path d="M7.8 11l6.4-3"></path><path d="M7.8 13l8.2 3.5"></path></svg>152    </div>153    <div class="action-btn">154      <!-- Scissors -->155      <svg viewBox="0 0 24 24"><circle cx="6" cy="18" r="3"></circle><circle cx="6" cy="6" r="3"></circle><path d="M20 5L10 12"></path><path d="M20 19L10 12"></path></svg>156    </div>157    <div class="action-btn">158      <!-- Search -->159      <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="6"></circle><path d="M20 20l-4.5-4.5"></path></svg>160    </div>161    <div class="action-btn">162      <!-- More -->163      <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="none"></circle><circle cx="12" cy="12" r="2" fill="none"></circle><circle cx="12" cy="19" r="2" fill="none"></circle></svg>164    </div>165  </div>166 167  <!-- Main content card -->168  <div class="card">169    <div class="title">Wednesday at 12:17 PM</div>170    <div class="subtitle">Wed, Dec 27 • 12:17 PM</div>171 172    <div class="wave-area">173      <div class="cursor"></div>174      <div class="mini-bars"><span style="height:34px"></span><span style="height:48px"></span><span style="height:28px"></span></div>175      <div class="timeline"></div>176    </div>177  </div>178 179  <!-- Segmented control -->180  <div class="segment">181    <div class="seg active">182      <svg viewBox="0 0 24 24"><path d="M5 18V6"></path><path d="M12 18V8"></path><path d="M19 18V12"></path></svg>183      <span>Audio</span>184    </div>185    <div class="seg">186      <svg viewBox="0 0 24 24"><path d="M4 6h16"></path><path d="M4 12h12"></path><path d="M4 18h16"></path></svg>187      <span>Transcript</span>188    </div>189  </div>190 191  <!-- Scrubber -->192  <div class="scrub-wrap">193    <div class="scrub-track"></div>194    <div class="scrub-progress"></div>195    <div class="scrub-thumb" style="left: 0;"></div>196  </div>197  <div class="time-left">00:00</div>198  <div class="time-right">-00:29</div>199 200  <!-- Controls -->201  <div class="controls">202    <div class="ctrl">203      <!-- Rewind 5 -->204      <svg viewBox="0 0 24 24"><path d="M12 5v4l-3-2"></path><path d="M12 19a7 7 0 1 1 0-14"></path></svg>205      <div class="label">5↺</div>206    </div>207    <div class="ctrl play">208      <!-- Play icon -->209      <svg viewBox="0 0 24 24"><polygon points="8,6 8,18 18,12" fill="currentColor" stroke="none"></polygon></svg>210    </div>211    <div class="ctrl">212      <!-- Forward 10 -->213      <svg viewBox="0 0 24 24"><path d="M12 5v4l3-2"></path><path d="M12 19a7 7 0 1 0 0-14"></path></svg>214      <div class="label">↻10</div>215    </div>216  </div>217 218  <!-- Gesture bar -->219  <div class="gesture"></div>220</div>221</body>222</html>