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>Voice Recorder - UI Mock</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #111319; /* deep charcoal */20    color: #E9ECEF;21  }22  .screen {23    padding: 60px 56px 0 56px;24  }25 26  /* Search row */27  .search-row {28    display: flex;29    align-items: center;30    justify-content: space-between;31    margin-top: 56px;32  }33  .search-left {34    display: flex;35    align-items: center;36    gap: 28px;37  }38  .search-text {39    color: #A7ADB6;40    font-size: 44px;41    letter-spacing: 0.2px;42  }43  .icon {44    width: 56px;45    height: 56px;46  }47  .avatar-wrap {48    width: 82px;49    height: 82px;50    border-radius: 50%;51    display: flex;52    align-items: center;53    justify-content: center;54    border: 4px solid #9EA3FF;55    color: #C7CBFF;56  }57 58  /* Section title */59  .section-title {60    margin-top: 64px;61    font-size: 64px;62    font-weight: 600;63    color: #E6E8EE;64  }65 66  /* Cards */67  .card {68    background: #171A22;69    border-radius: 44px;70    padding: 44px 44px 52px 44px;71    margin-top: 42px;72    box-shadow: 0 8px 32px rgba(0,0,0,0.45);73  }74  .card-top {75    display: flex;76    align-items: center;77    justify-content: space-between;78  }79  .card-title {80    font-size: 48px;81    font-weight: 500;82    color: #EEF1F5;83  }84  .play-btn {85    width: 68px;86    height: 68px;87    border: none;88    background: transparent;89    border-radius: 50%;90    display: flex;91    align-items: center;92    justify-content: center;93    cursor: default;94  }95  .meta {96    display: flex;97    align-items: center;98    justify-content: space-between;99    margin-top: 22px;100    color: #A7ADB6;101    font-size: 34px;102  }103  .progress {104    width: 100%;105    height: 14px;106    background: #5F6570;107    border-radius: 8px;108    margin-top: 26px;109    overflow: hidden;110    position: relative;111  }112  .progress .fill {113    height: 100%;114    background: #7EA6FF;115    border-radius: 8px 0 0 8px;116  }117 118  /* Big record button */119  .record-btn {120    position: absolute;121    left: 50%;122    transform: translateX(-50%);123    bottom: 240px;124    width: 240px;125    height: 240px;126    background: #E66F64;127    border-radius: 50%;128    box-shadow: 0 18px 36px rgba(0,0,0,0.45);129    display: flex;130    align-items: center;131    justify-content: center;132  }133  .record-btn .inner-dot {134    width: 64px;135    height: 64px;136    background: #611A16;137    border-radius: 50%;138  }139 140  /* Bottom handle */141  .home-handle {142    position: absolute;143    left: 50%;144    transform: translateX(-50%);145    bottom: 64px;146    width: 360px;147    height: 14px;148    background: #E0E0E0;149    border-radius: 10px;150    opacity: 0.9;151  }152</style>153</head>154<body>155<div id="render-target">156  <div class="screen">157    <!-- Search Row -->158    <div class="search-row">159      <div class="search-left">160        <svg class="icon" viewBox="0 0 24 24" fill="none">161          <circle cx="11" cy="11" r="7" stroke="#B7BCC7" stroke-width="2.2"></circle>162          <path d="M20 20l-4.2-4.2" stroke="#B7BCC7" stroke-width="2.2" stroke-linecap="round"></path>163        </svg>164        <div class="search-text">Search your recordings</div>165      </div>166      <div class="avatar-wrap">167        <svg width="56" height="56" viewBox="0 0 24 24" fill="none">168          <circle cx="12" cy="8" r="3.5" stroke="#B8BDFF" stroke-width="1.8"/>169          <path d="M4.5 19c2.2-3.8 12.8-3.8 15 0" stroke="#B8BDFF" stroke-width="1.8" stroke-linecap="round"/>170        </svg>171      </div>172    </div>173 174    <!-- Section -->175    <div class="section-title">July</div>176 177    <!-- Card 1 -->178    <div class="card">179      <div class="card-top">180        <div class="card-title">Wednesday at 12:57 am</div>181        <button class="play-btn" aria-label="Play">182          <svg width="40" height="40" viewBox="0 0 24 24" fill="#C7CCF4">183            <path d="M8 5l11 7-11 7V5z"></path>184          </svg>185        </button>186      </div>187      <div class="meta">188        <span>Jul 6</span>189        <span>00:16</span>190      </div>191      <div class="progress">192        <div class="fill" style="width: 86%;"></div>193      </div>194    </div>195 196    <!-- Card 2 -->197    <div class="card">198      <div class="card-top">199        <div class="card-title">Wednesday at 12:07 PM</div>200        <button class="play-btn" aria-label="Play">201          <svg width="40" height="40" viewBox="0 0 24 24" fill="#C7CCF4">202            <path d="M8 5l11 7-11 7V5z"></path>203          </svg>204        </button>205      </div>206      <div class="meta">207        <span>Jul 5</span>208        <span>00:12</span>209      </div>210      <div class="progress">211        <div class="fill" style="width: 54%;"></div>212      </div>213    </div>214 215    <!-- Card 3 -->216    <div class="card">217      <div class="card-top">218        <div class="card-title">Wednesday at 12:06 PM</div>219        <button class="play-btn" aria-label="Play">220          <svg width="40" height="40" viewBox="0 0 24 24" fill="#C7CCF4">221            <path d="M8 5l11 7-11 7V5z"></path>222          </svg>223        </button>224      </div>225      <div class="meta">226        <span>Jul 5</span>227        <span>00:06</span>228      </div>229      <div class="progress">230        <div class="fill" style="width: 92%;"></div>231      </div>232    </div>233  </div>234 235  <!-- Big record button -->236  <div class="record-btn" aria-label="Record">237    <div class="inner-dot"></div>238  </div>239 240  <!-- Bottom handle -->241  <div class="home-handle"></div>242</div>243</body>244</html>