GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Recorder UI</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Roboto, Arial, sans-serif; }7  #render-target {8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background:#0f0f0f; color:#fff;10  }11  /* Status bar */12  .status-bar {13    position:absolute; top:0; left:0; width:100%; height:120px;14    display:flex; align-items:center; justify-content:space-between;15    padding:0 40px; color:#e6e6e6; font-size:40px;16  }17  .status-icons { display:flex; gap:26px; align-items:center; }18  .icon-dot { width:18px; height:18px; border-radius:50%; background:#cfcfcf; opacity:.7; }19  .icon-battery { width:34px; height:20px; border:2px solid #cfcfcf; border-radius:3px; position:relative; }20  .icon-battery:after { content:""; position:absolute; right:-8px; top:5px; width:6px; height:10px; background:#cfcfcf; border-radius:2px; }21  .icon-search { width:28px; height:28px; border:3px solid #cfcfcf; border-radius:50%; position:relative; }22  .icon-search:after { content:""; position:absolute; right:-6px; bottom:-6px; width:20px; height:4px; background:#cfcfcf; transform:rotate(45deg); border-radius:2px; }23  /* Top thumbnails strip */24  .thumbs-strip {25    position:absolute; top:120px; left:0; width:100%; height:160px;26    display:flex; align-items:center; gap:20px; padding:0 20px;27    background:#1a1a1a;28  }29  .thumb {30    width:150px; height:130px; background:#E0E0E0; border:1px solid #BDBDBD;31    display:flex; justify-content:center; align-items:center; color:#757575; font-size:26px;32    border-radius:8px;33  }34  /* Header title */35  .title-row {36    position:absolute; top:300px; left:40px; right:40px; display:flex; align-items:center; gap:20px;37    color:#eaeaea;38  }39  .caret {40    width:36px; height:36px; border-left:12px solid transparent; border-right:12px solid transparent;41    border-top:16px solid #cfcfcf; transform:rotate(180deg);42  }43  .title-row .title { font-size:60px; letter-spacing:1px; }44  /* Timer */45  .timer {46    position:absolute; top:380px; width:100%; text-align:center; font-size:150px; letter-spacing:2px; color:#f5f5f5;47  }48  /* Waveform area */49  .waveform {50    position:absolute; top:560px; left:0; width:100%; height:760px;51  }52  .wave-bg {53    position:absolute; left:0; top:0; width:100%; height:100%; background:#0f0f0f;54  }55  .baseline {56    position:absolute; left:40px; right:40px; top:400px; height:2px; background:linear-gradient(to right,#444 10px, transparent 10px);57    background-size:20px 2px;58  }59  .bars { position:absolute; left:40px; top:300px; height:200px; display:flex; align-items:flex-end; gap:10px; }60  .bar { width:12px; background:#ff8a50; border-radius:3px; }61  .playhead {62    position:absolute; left:50%; top:0; width:4px; height:100%; background:#ff8a50; opacity:.95;63  }64  /* Timeline ticks */65  .ticks {66    position:absolute; bottom:0; left:0; width:100%; height:120px;67    display:flex; align-items:flex-end; justify-content:space-between; padding:0 40px 10px 40px; color:#bdbdbd; font-size:32px;68  }69  .tick { position:relative; padding-top:40px; }70  .tick:before {71    content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);72    width:2px; height:30px; background:#444;73  }74  /* Controls panel */75  .controls {76    position:absolute; top:1460px; left:40px; width:1000px; height:220px;77    background:#171717; border-radius:20px; display:flex; align-items:center; justify-content:space-around;78  }79  .circle-btn {80    width:180px; height:180px; border-radius:50%;81    background:#222; border:2px solid #333; display:flex; align-items:center; justify-content:center;82    color:#fff; font-size:58px; position:relative;83  }84  .circle-btn.small { width:160px; height:160px; }85  .badge {86    position:absolute; bottom:20px; right:22px; width:60px; height:60px; border-radius:50%;87    background:#2a2a2a; border:2px solid #3a3a3a; font-size:36px; display:flex; align-items:center; justify-content:center; color:#fff;88  }89  .play-triangle {90    width:0; height:0; border-left:48px solid #fff; border-top:28px solid transparent; border-bottom:28px solid transparent; margin-left:10px;91  }92  /* Bottom actions */93  .bottom-actions {94    position:absolute; bottom:140px; left:40px; right:40px; display:flex; align-items:center; justify-content:space-between;95  }96  .action {97    display:flex; align-items:center; gap:18px;98  }99  .pill {100    padding:22px 40px; border-radius:60px; background:#242424; color:#fff; font-size:50px; border:2px solid #333;101  }102  .pill.orange { background:#26201b; border-color:#ff8a50; color:#fff; }103  .pill .dot {104    width:26px; height:26px; border-radius:50%; background:#ff8a50; display:inline-block; margin-right:18px;105  }106  .action .sub {107    color:#bcbcbc; font-size:36px; text-align:center;108  }109  .icon-round {110    width:120px; height:120px; border-radius:50%; background:#222; border:2px solid #333; display:flex; align-items:center; justify-content:center; font-size:60px;111  }112</style>113</head>114<body>115<div id="render-target">116 117  <div class="status-bar">118    <div class="time">8:41</div>119    <div class="status-icons">120      <div class="icon-search"></div>121      <div style="font-size:44px; opacity:.8;">S</div>122      <div class="icon-dot"></div>123      <div class="icon-dot"></div>124      <div class="icon-battery"></div>125    </div>126  </div>127 128  <div class="thumbs-strip">129    <div class="thumb">[IMG: Info Icon]</div>130    <div class="thumb">[IMG: Side Table]</div>131    <div class="thumb">[IMG: Armchair]</div>132    <div class="thumb">[IMG: Blue Recliner]</div>133    <div class="thumb">[IMG: Daybed]</div>134    <div class="thumb">[IMG: Smart TV UI]</div>135    <div class="thumb">[IMG: TV Screen]</div>136    <div class="thumb">[IMG: Sunset Ship]</div>137  </div>138 139  <div class="title-row">140    <div class="caret"></div>141    <div class="title">Recording 1</div>142  </div>143 144  <div class="timer">00:31.15</div>145 146  <div class="waveform">147    <div class="wave-bg"></div>148    <div class="baseline"></div>149    <div class="bars">150      <div class="bar" style="height:30px;"></div>151      <div class="bar" style="height:50px;"></div>152      <div class="bar" style="height:80px;"></div>153      <div class="bar" style="height:120px;"></div>154      <div class="bar" style="height:160px;"></div>155      <div class="bar" style="height:140px;"></div>156      <div class="bar" style="height:110px;"></div>157      <div class="bar" style="height:90px;"></div>158      <div class="bar" style="height:60px;"></div>159      <div class="bar" style="height:50px;"></div>160      <div class="bar" style="height:40px;"></div>161      <div class="bar" style="height:30px;"></div>162      <div class="bar" style="height:42px;"></div>163      <div class="bar" style="height:65px;"></div>164      <div class="bar" style="height:85px;"></div>165      <div class="bar" style="height:60px;"></div>166      <div class="bar" style="height:40px;"></div>167      <div class="bar" style="height:20px;"></div>168    </div>169    <div class="playhead"></div>170 171    <div class="ticks">172      <div class="tick">00:29</div>173      <div class="tick">00:30</div>174      <div class="tick">00:31</div>175      <div class="tick">00:32</div>176      <div class="tick">00:33</div>177      <div class="tick">00:34</div>178    </div>179  </div>180 181  <div class="controls">182    <div class="circle-btn small">183      ↺184      <div class="badge">3</div>185    </div>186    <div class="circle-btn">187      <div class="play-triangle"></div>188    </div>189    <div class="circle-btn small">190      ↻191      <div class="badge">3</div>192    </div>193  </div>194 195  <div class="bottom-actions">196    <div class="action" style="flex-direction:column; align-items:center;">197      <div class="icon-round">✕</div>198      <div class="sub">Discard</div>199    </div>200 201    <div class="action">202      <div class="pill orange"><span class="dot"></span>Resume</div>203    </div>204 205    <div class="action" style="flex-direction:column; align-items:center;">206      <div class="icon-round">✓</div>207      <div class="sub">Save</div>208    </div>209  </div>210 211</div>212</body>213</html>