GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Recording Screen</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: Arial, Helvetica, sans-serif;11  }12  #render-target {13    width: 1080px;14    height: 2400px;15    position: relative;16    overflow: hidden;17    background: #1b1b1b;18    color: #fff;19  }20 21  /* Top bar with back arrow */22  .top-bar {23    position: absolute;24    top: 0;25    left: 0;26    width: 1080px;27    height: 160px;28    background: #0f0f0f;29  }30  .back-btn {31    position: absolute;32    left: 36px;33    top: 52px;34    width: 64px;35    height: 64px;36    cursor: pointer;37  }38  .back-btn svg {39    width: 64px;40    height: 64px;41    fill: none;42    stroke: #cfcfcf;43    stroke-width: 8;44    stroke-linecap: round;45    stroke-linejoin: round;46  }47 48  /* Title */49  .title {50    position: absolute;51    top: 840px;52    width: 100%;53    text-align: center;54    font-size: 68px;55    font-weight: 600;56    letter-spacing: 1px;57    color: #eaeaea;58  }59  .title:after {60    content: "";61    display: block;62    margin: 26px auto 0;63    width: 380px;64    height: 4px;65    background: #6e6e6e;66    border-radius: 2px;67  }68 69  /* Player card */70  .player-card {71    position: absolute;72    top: 1000px;73    left: 60px;74    width: 960px;75    height: 300px;76    background: #2f2f2f;77    border-radius: 26px;78    box-shadow: 0 8px 24px rgba(0,0,0,0.4);79    padding: 40px 48px;80  }81  .player-row {82    display: flex;83    align-items: center;84    gap: 36px;85  }86  .play-icon {87    width: 72px;88    height: 72px;89    display: flex;90    justify-content: center;91    align-items: center;92  }93  .play-icon svg {94    width: 72px;95    height: 72px;96    fill: #ffffff;97  }98 99  .progress-area {100    position: relative;101    flex: 1;102    margin-right: 24px;103  }104  .progress-track {105    height: 4px;106    background: #4a4a4a;107    border-radius: 2px;108    position: relative;109    top: 22px;110  }111  .progress-dot {112    position: absolute;113    left: 0px;114    top: 10px;115    width: 26px;116    height: 26px;117    background: #e24444;118    border-radius: 50%;119    box-shadow: 0 0 0 4px rgba(226,68,68,0.2);120  }121  .time-row {122    margin-top: 46px;123    display: flex;124    justify-content: space-between;125    color: #cfcfcf;126    font-size: 40px;127    letter-spacing: 1px;128  }129 130  /* Delete button at bottom */131  .delete-row {132    position: absolute;133    bottom: 220px;134    width: 100%;135    display: flex;136    justify-content: center;137    align-items: center;138    color: #f3f3f3;139    font-size: 50px;140    gap: 24px;141  }142  .trash-icon {143    width: 52px;144    height: 52px;145  }146  .trash-icon svg {147    width: 52px;148    height: 52px;149    fill: none;150    stroke: #ffffff;151    stroke-width: 6;152    stroke-linecap: round;153    stroke-linejoin: round;154  }155 156  /* Home indicator */157  .home-indicator {158    position: absolute;159    bottom: 60px;160    left: 50%;161    transform: translateX(-50%);162    width: 360px;163    height: 12px;164    background: #e9e9e9;165    border-radius: 8px;166    opacity: 0.85;167  }168</style>169</head>170<body>171<div id="render-target">172  <div class="top-bar">173    <div class="back-btn">174      <svg viewBox="0 0 24 24">175        <path d="M15 19L8 12l7-7"/>176      </svg>177    </div>178  </div>179 180  <div class="title">Recording 2</div>181 182  <div class="player-card">183    <div class="player-row">184      <div class="play-icon">185        <svg viewBox="0 0 24 24">186          <path d="M8 5l12 7-12 7z"/>187        </svg>188      </div>189      <div class="progress-area">190        <div class="progress-dot"></div>191        <div class="progress-track"></div>192      </div>193    </div>194    <div class="time-row">195      <div>00:00</div>196      <div>00:38</div>197    </div>198  </div>199 200  <div class="delete-row">201    <div class="trash-icon">202      <svg viewBox="0 0 24 24">203        <path d="M3 6h18"/>204        <path d="M8 6V4h8v2"/>205        <path d="M7 6l1 14h8l1-14"/>206        <path d="M10 10v8M14 10v8"/>207      </svg>208    </div>209    <div>Delete</div>210  </div>211 212  <div class="home-indicator"></div>213</div>214</body>215</html>