GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Audio Recording UI</title>6<style>7  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width:1080px; height:2400px; position:relative; overflow:hidden;10    background:#12161b; color:#e9edf4;11  }12 13  /* Status bar */14  .status-bar {15    position:absolute; top:0; left:0; width:100%; height:110px;16    color:#cfd8e3; font-size:40px; display:flex; align-items:center; padding:0 40px;17  }18  .sb-left { display:flex; align-items:center; gap:20px; }19  .sb-right { margin-left:auto; display:flex; align-items:center; gap:28px; }20 21  /* Simple status icons */22  .icon-wifi, .icon-battery, .icon-signal { width:52px; height:52px; }23  .icon-battery rect { stroke:#cfd8e3; fill:none; stroke-width:6; }24  .icon-battery .cap { fill:#cfd8e3; }25  .icon-wifi path, .icon-signal rect { stroke:#cfd8e3; stroke-width:6; fill:none; }26 27  /* Header / title */28  .app-header {29    position:absolute; top:110px; left:0; width:100%; height:230px; padding:0 40px;30  }31  .title {32    font-size:72px; font-weight:600; margin-top:10px;33  }34  .header-actions { position:absolute; right:40px; top:40px; display:flex; gap:40px; }35  .action-icon { width:60px; height:60px; opacity:0.9; }36 37  /* Tabs */38  .tabs { position:absolute; bottom:0; left:0; width:100%; display:flex; padding:0 40px 0 40px; }39  .tab {40    font-size:40px; letter-spacing:2px; color:#8ea1b5; padding:28px 0; margin-right:60px;41  }42  .tab.active { color:#3ea1ff; position:relative; }43  .tab.active::after {44    content:""; position:absolute; bottom:0; left:0; width:220px; height:6px; background:#3ea1ff;45  }46 47  /* Content body */48  .content {49    position:absolute; top:360px; left:0; width:100%; height:1540px; text-align:center;50  }51  .record-name {52    font-size:64px; color:#dfe6ef; margin-top:40px;53  }54  .waveform {55    width:92%; height:6px; margin:360px auto 0 auto; position:relative;56    background:repeating-linear-gradient(to right, rgba(120,160,190,0.16) 0 40px, transparent 40px 80px);57    border-top:2px dotted rgba(120,160,190,0.2);58    border-bottom:2px dotted rgba(120,160,190,0.2);59  }60  .wave-progress {61    position:absolute; left:12%; top:-6px; width:8px; height:18px; background:#2f7bd2; border-radius:3px;62  }63 64  /* Bottom panel */65  .bottom-panel {66    position:absolute; bottom:240px; left:0; width:100%; height:330px;67    display:flex; flex-direction:column; align-items:center; justify-content:flex-start;68  }69  .timer {70    font-size:120px; color:#9a9fa7; letter-spacing:6px;71  }72  .paused-label {73    margin-top:10px; font-size:44px; color:#8ea1b5; letter-spacing:2px;74  }75 76  .controls {77    margin-top:36px; width:86%; display:flex; align-items:center; justify-content:space-between;78  }79  .ctrl {80    width:120px; height:120px; display:flex; align-items:center; justify-content:center;81  }82  .mic-button {83    width:180px; height:180px; background:#e4473b; border-radius:90px; box-shadow:0 8px 24px rgba(0,0,0,0.5);84    display:flex; align-items:center; justify-content:center;85  }86  .icon { width:72px; height:72px; }87 88  /* Bottom progress line */89  .bottom-progress {90    position:absolute; bottom:120px; left:40px; width:1000px; height:8px;91    background:linear-gradient(to right, #3ea1ff 0 70%, rgba(90,120,150,0.26) 70% 100%);92    border-radius:4px;93  }94</style>95</head>96<body>97<div id="render-target">98 99  <!-- Status bar -->100  <div class="status-bar">101    <div class="sb-left">102      <div>8:42</div>103      <!-- simple "LR" tag and pause indicator as text -->104      <div style="background:#2b2f36; color:#cfd8e3; font-size:32px; padding:6px 10px; border-radius:6px;">LR</div>105      <div style="width:44px; height:44px; border-radius:8px; background:#2b2f36; display:flex; align-items:center; justify-content:center;">106        <svg class="icon-signal" viewBox="0 0 24 24">107          <rect x="2" y="14" width="4" height="8" fill="#cfd8e3"></rect>108          <rect x="9" y="10" width="4" height="12" fill="#cfd8e3" opacity="0.8"></rect>109          <rect x="16" y="6" width="4" height="16" fill="#cfd8e3" opacity="0.6"></rect>110        </svg>111      </div>112    </div>113    <div class="sb-right">114      <svg class="icon-wifi" viewBox="0 0 24 24">115        <path d="M2 8c6-5 14-5 20 0" stroke="#cfd8e3"></path>116        <path d="M5 11c4-3 10-3 14 0" stroke="#cfd8e3"></path>117        <path d="M9 14c2-2 4-2 6 0" stroke="#cfd8e3"></path>118        <circle cx="12" cy="18" r="2" fill="#cfd8e3"></circle>119      </svg>120      <svg class="icon-battery" viewBox="0 0 26 24">121        <rect x="1" y="5" width="20" height="14" rx="2"></rect>122        <rect class="cap" x="22" y="9" width="3" height="6"></rect>123        <rect x="3" y="7" width="12" height="10" fill="#cfd8e3"></rect>124      </svg>125    </div>126  </div>127 128  <!-- App header -->129  <div class="app-header">130    <div class="title">Recording paused</div>131 132    <div class="header-actions">133      <!-- sliders icon -->134      <svg class="action-icon" viewBox="0 0 24 24">135        <circle cx="7" cy="6" r="2" fill="#cfd8e3"></circle>136        <rect x="2" y="5" width="18" height="2" fill="#cfd8e3" opacity="0.6"></rect>137        <circle cx="12" cy="12" r="2" fill="#cfd8e3"></circle>138        <rect x="2" y="11" width="18" height="2" fill="#cfd8e3" opacity="0.6"></rect>139        <circle cx="16" cy="18" r="2" fill="#cfd8e3"></circle>140        <rect x="2" y="17" width="18" height="2" fill="#cfd8e3" opacity="0.6"></rect>141      </svg>142 143      <!-- more vert icon -->144      <svg class="action-icon" viewBox="0 0 24 24">145        <circle cx="12" cy="5" r="2" fill="#cfd8e3"></circle>146        <circle cx="12" cy="12" r="2" fill="#cfd8e3"></circle>147        <circle cx="12" cy="19" r="2" fill="#cfd8e3"></circle>148      </svg>149    </div>150 151    <div class="tabs">152      <div class="tab active">RECORD</div>153      <div class="tab">LISTEN</div>154    </div>155  </div>156 157  <!-- Content body -->158  <div class="content">159    <div class="record-name">My recording 1.m4a</div>160 161    <div class="waveform">162      <div class="wave-progress"></div>163    </div>164  </div>165 166  <!-- Bottom panel -->167  <div class="bottom-panel">168    <div class="timer">00:42</div>169    <div class="paused-label">PAUSED</div>170 171    <div class="controls">172      <!-- cancel -->173      <div class="ctrl">174        <svg class="icon" viewBox="0 0 24 24">175          <path d="M5 5 L19 19 M19 5 L5 19" stroke="#cfd8e3" stroke-width="3" stroke-linecap="round"></path>176        </svg>177      </div>178 179      <!-- mic main button -->180      <div class="mic-button">181        <svg class="icon" viewBox="0 0 24 24">182          <rect x="10" y="4" width="4" height="8" rx="2" fill="#fff"></rect>183          <path d="M7 10c0 3 2.2 5 5 5s5-2 5-5" stroke="#fff" stroke-width="2" fill="none"></path>184          <path d="M12 15v4" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>185          <path d="M8 19h8" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>186        </svg>187      </div>188 189      <!-- check -->190      <div class="ctrl">191        <svg class="icon" viewBox="0 0 24 24">192          <path d="M4 13l5 5 11-11" stroke="#cfd8e3" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>193        </svg>194      </div>195    </div>196  </div>197 198  <!-- bottom timeline progress -->199  <div class="bottom-progress"></div>200 201</div>202</body>203</html>