GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Audio Recorder UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", "Segoe UI", Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #2b1713; /* deep chocolate brown */15    color: #f6d7c6;16  }17 18  .status-bar {19    position: absolute; left: 0; top: 0; width: 100%; height: 110px;20    padding: 26px 40px;21    box-sizing: border-box;22    color: #f6d7c6;23    font-size: 30px; letter-spacing: 0.5px;24  }25  .status-right { position: absolute; right: 40px; top: 26px; display: flex; gap: 22px; align-items: center; }26  .dot { width: 12px; height: 12px; border-radius: 50%; background: #f6d7c6; opacity: 0.7; }27 28  .top-actions {29    position: absolute; left: 32px; right: 32px; top: 120px;30    display: flex; gap: 58px; align-items: center; color: #f1c7b1;31  }32  .icon-btn svg { width: 44px; height: 44px; stroke: #f1c7b1; fill: none; stroke-width: 4; }33 34  .card {35    position: absolute; left: 32px; right: 32px; top: 220px; height: 1050px;36    background: #3a231e; border-radius: 52px;37    box-sizing: border-box; padding: 56px;38  }39  .title { font-weight: 700; font-size: 64px; margin-bottom: 10px; color: #f3d1bf; }40  .subtitle { font-size: 34px; color: #d7b1a2; }41 42  .wave-area {43    position: absolute; left: 56px; right: 56px; bottom: 56px; top: 240px;44    border-radius: 24px; color: #b28f86;45  }46  .wave-center-line {47    position: absolute; left: 48%;48    top: 0; bottom: 0; width: 6px; background: #8f6f69; opacity: 0.75; border-radius: 3px;49  }50  .wave-dots {51    position: absolute; right: 40px; left: 40px; bottom: 60px; height: 10px; display: flex; gap: 16px; align-items: center;52  }53  .wave-dots span { width: 10px; height: 10px; background: #8f6f69; border-radius: 50%; opacity: 0.6; }54  .wave-bars {55    position: absolute; left: calc(48% - 24px); bottom: 52px; display: flex; gap: 10px; align-items: flex-end;56  }57  .wave-bars i { display: block; width: 8px; background: #bda199; height: 26px; border-radius: 4px; }58 59  .chips {60    position: absolute; left: 140px; right: 140px; top: 1300px;61    display: flex; gap: 24px; justify-content: center; align-items: center;62  }63  .chip {64    display: flex; align-items: center; gap: 18px; padding: 24px 42px;65    border-radius: 60px; font-size: 38px; color: #f1c7b1;66    background: #4a3833;67  }68  .chip.active { background: #5a433e; }69  .chip svg { width: 40px; height: 40px; stroke: #f1c7b1; fill: none; stroke-width: 4; }70 71  .progress {72    position: absolute; left: 60px; right: 60px; top: 1468px;73  }74  .track {75    position: relative; height: 12px; background: #5b4743; border-radius: 6px;76  }77  .track .filled { position: absolute; left: 0; top: 0; bottom: 0; width: 360px; background: #6f7fb8; border-radius: 6px; }78  .knob {79    position: absolute; left: -6px; top: 50%; transform: translate(-50%, -50%);80    width: 30px; height: 30px; background: #f1c1a6; border-radius: 50%; border: 4px solid #2b1713;81  }82  .time-row {83    position: absolute; left: 60px; right: 60px; top: 1508px;84    display: flex; justify-content: space-between; font-size: 40px; color: #f1c7b1;85  }86 87  .controls {88    position: absolute; left: 64px; right: 64px; top: 1650px;89    display: flex; justify-content: space-between; align-items: center;90  }91  .circle {92    width: 270px; height: 270px; border-radius: 50%;93    background: #3d2a26; display: flex; justify-content: center; align-items: center;94    color: #f6d7c6; font-size: 54px; position: relative;95  }96  .circle.main { background: #f1b796; color: #2b1713; }97  .circle .num { position: absolute; bottom: 88px; font-size: 40px; opacity: 0.9; }98  .circle svg { width: 80px; height: 80px; stroke-width: 6; }99 100  .gesture {101    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);102    width: 280px; height: 10px; background: #e8e8e8; border-radius: 8px; opacity: 0.9;103  }104</style>105</head>106<body>107<div id="render-target">108 109  <!-- Status bar -->110  <div class="status-bar">111    <div>2:40</div>112    <div class="status-right">113      <div class="dot" style="opacity:0.35"></div>114      <svg width="28" height="28" viewBox="0 0 24 24">115        <circle cx="12" cy="12" r="9" stroke="#f6d7c6" fill="none" stroke-width="2"/>116        <line x1="12" y1="7" x2="12" y2="12" stroke="#f6d7c6" stroke-width="2"/>117        <circle cx="12" cy="16" r="1.5" fill="#f6d7c6"/>118      </svg>119      <svg width="28" height="28" viewBox="0 0 24 24">120        <path d="M3 12l4 0 3 6 3-12 3 6 5 0" stroke="#f6d7c6" stroke-width="2" fill="none" stroke-linecap="round"/>121      </svg>122      <div style="font-size:28px;">100%</div>123    </div>124  </div>125 126  <!-- Top Action icons -->127  <div class="top-actions">128    <div class="icon-btn">129      <svg viewBox="0 0 24 24">130        <path d="M15 5 L7 12 L15 19" stroke-linecap="round" stroke-linejoin="round"/>131      </svg>132    </div>133    <div class="icon-btn">134      <svg viewBox="0 0 24 24">135        <path d="M12 3 L14.5 8 L20 9 L16 13 L17 19 L12 16 L7 19 L8 13 L4 9 L9.5 8 Z" />136      </svg>137    </div>138    <div class="icon-btn">139      <svg viewBox="0 0 24 24">140        <circle cx="6" cy="12" r="2"/>141        <circle cx="12" cy="7" r="2"/>142        <circle cx="18" cy="12" r="2"/>143        <path d="M7.5 10.8 L10.5 8.2 M13.5 8.2 L16.5 10.8" stroke-linecap="round"/>144      </svg>145    </div>146    <div class="icon-btn">147      <svg viewBox="0 0 24 24">148        <circle cx="6.5" cy="6.5" r="2.5"/>149        <circle cx="6.5" cy="17.5" r="2.5"/>150        <path d="M14 5 L20 11 M14 19 L20 13" stroke-linecap="round"/>151      </svg>152    </div>153    <div class="icon-btn">154      <svg viewBox="0 0 24 24">155        <circle cx="11" cy="11" r="7"/>156        <path d="M16.5 16.5 L21 21" stroke-linecap="round"/>157      </svg>158    </div>159    <div class="icon-btn">160      <svg viewBox="0 0 24 24">161        <circle cx="12" cy="5" r="1.8" fill="#f1c7b1" stroke="none"/>162        <circle cx="12" cy="12" r="1.8" fill="#f1c7b1" stroke="none"/>163        <circle cx="12" cy="19" r="1.8" fill="#f1c7b1" stroke="none"/>164      </svg>165    </div>166  </div>167 168  <!-- Main card -->169  <div class="card">170    <div class="title">My audio</div>171    <div class="subtitle">Wed, Dec 27 • 12:17 PM</div>172 173    <div class="wave-area">174      <div class="wave-center-line"></div>175      <div class="wave-bars"><i style="height:18px"></i><i style="height:26px"></i><i style="height:18px"></i></div>176      <div class="wave-dots">177        <span></span><span></span><span></span><span></span><span></span>178        <span></span><span></span><span></span><span></span><span></span>179        <span></span><span></span><span></span><span></span><span></span>180        <span></span><span></span><span></span><span></span><span></span>181      </div>182    </div>183  </div>184 185  <!-- Chips -->186  <div class="chips">187    <div class="chip active">188      <svg viewBox="0 0 24 24">189        <path d="M6 16 V8 M12 16 V6 M18 16 V10" stroke-linecap="round"/>190      </svg>191      <span>Audio</span>192    </div>193    <div class="chip">194      <svg viewBox="0 0 24 24">195        <path d="M5 7 H19 M5 12 H15 M5 17 H13" stroke-linecap="round"/>196      </svg>197      <span>Transcript</span>198    </div>199  </div>200 201  <!-- Progress -->202  <div class="progress">203    <div class="track">204      <div class="filled"></div>205      <div class="knob"></div>206    </div>207  </div>208  <div class="time-row">209    <div>00:00</div>210    <div>-00:29</div>211  </div>212 213  <!-- Controls -->214  <div class="controls">215    <div class="circle">216      <svg viewBox="0 0 24 24">217        <path d="M15.5 7.5 A5.5 5.5 0 1 0 18 12" fill="none" stroke="#f6d7c6" stroke-linecap="round"/>218        <path d="M18 8 L18 12 L14 12" fill="none" stroke="#f6d7c6" stroke-linecap="round"/>219      </svg>220      <div class="num">5</div>221    </div>222    <div class="circle main">223      <svg viewBox="0 0 24 24">224        <polygon points="8,6 18,12 8,18" fill="#2b1713" stroke="none"/>225      </svg>226    </div>227    <div class="circle">228      <svg viewBox="0 0 24 24">229        <path d="M8.5 7.5 A5.5 5.5 0 1 1 6 12" fill="none" stroke="#f6d7c6" stroke-linecap="round"/>230        <path d="M6 8 L6 12 L10 12" fill="none" stroke="#f6d7c6" stroke-linecap="round"/>231      </svg>232      <div class="num">10</div>233    </div>234  </div>235 236  <!-- Gesture bar -->237  <div class="gesture"></div>238</div>239</body>240</html>