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</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #1f1f1f;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 140px;24    background: #0e0e0e;25    color: #ffffff;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 40px;30    box-sizing: border-box;31    letter-spacing: 0.5px;32  }33  .status-time {34    font-size: 46px;35    font-weight: 600;36  }37  .status-icons {38    display: flex;39    align-items: center;40    gap: 28px;41  }42  .status-icons svg {43    width: 44px;44    height: 44px;45    fill: none;46    stroke: #fff;47    stroke-width: 3;48  }49 50  /* Top actions (clock, waveform/refresh, menu) */51  .top-actions {52    position: absolute;53    top: 180px;54    right: 60px;55    display: flex;56    align-items: center;57    gap: 48px;58    color: #bdbdbd;59  }60  .top-actions svg {61    width: 66px;62    height: 66px;63    stroke: #bdbdbd;64    fill: none;65    stroke-width: 3;66  }67  .menu-dots {68    width: 10px;69    height: 10px;70    background: #bdbdbd;71    border-radius: 50%;72    box-shadow: 0 26px 0 #bdbdbd, 0 -26px 0 #bdbdbd;73  }74 75  /* Equalizer dots */76  .equalizer {77    position: absolute;78    top: 620px;79    left: 180px;80    width: 720px;81    display: grid;82    grid-template-columns: repeat(7, 1fr);83    column-gap: 26px;84    row-gap: 22px;85    padding: 20px 0;86  }87  .dot {88    width: 26px;89    height: 26px;90    border-radius: 50%;91    background: #333333;92  }93 94  /* Mic button */95  .mic-wrapper {96    position: absolute;97    top: 1400px;98    left: 50%;99    transform: translateX(-50%);100    width: 360px;101    height: 360px;102    border-radius: 50%;103    background: #262626;104    box-shadow: 0 18px 48px rgba(0,0,0,0.6) inset, 0 26px 60px rgba(0,0,0,0.6);105    display: flex;106    align-items: center;107    justify-content: center;108  }109  .mic-inner {110    width: 250px;111    height: 250px;112    border-radius: 50%;113    background: #e74c3c;114    box-shadow: 0 8px 20px rgba(0,0,0,0.55);115    display: flex;116    align-items: center;117    justify-content: center;118  }119  .mic-inner svg {120    width: 90px;121    height: 90px;122    fill: none;123    stroke: #ffffff;124    stroke-width: 9;125    stroke-linecap: round;126    stroke-linejoin: round;127  }128 129  /* Bottom recordings shortcut */130  .recordings {131    position: absolute;132    right: 60px;133    bottom: 160px;134    display: flex;135    align-items: center;136    gap: 22px;137    color: #eaeaea;138    font-size: 44px;139  }140  .recordings .icon {141    width: 64px;142    height: 64px;143    border: 3px solid #eaeaea;144    border-radius: 8px;145    position: relative;146    box-sizing: border-box;147  }148  .recordings .icon::after {149    content: "";150    position: absolute;151    width: 24px;152    height: 24px;153    background: #eaeaea;154    border-radius: 4px;155    left: 20px;156    top: 20px;157  }158 159  /* Gesture bar */160  .gesture-bar {161    position: absolute;162    bottom: 36px;163    left: 50%;164    transform: translateX(-50%);165    width: 300px;166    height: 16px;167    background: #ffffff;168    border-radius: 10px;169    opacity: 0.8;170  }171</style>172</head>173<body>174<div id="render-target">175 176  <!-- Status bar -->177  <div class="status-bar">178    <div class="status-time">4:38</div>179    <div class="status-icons">180      <!-- Wi-Fi icon -->181      <svg viewBox="0 0 24 24">182        <path d="M2 8c5-4 15-4 20 0"/>183        <path d="M5 12c3-3 11-3 14 0"/>184        <path d="M8 16c2-2 6-2 8 0"/>185        <circle cx="12" cy="19" r="2" fill="#fff" stroke="none"/>186      </svg>187      <!-- Battery icon -->188      <svg viewBox="0 0 28 24">189        <rect x="2" y="5" width="20" height="14" rx="2" ry="2"/>190        <rect x="23" y="9" width="3" height="6" rx="1" ry="1"/>191        <rect x="4" y="7" width="16" height="10" fill="#fff" stroke="none"/>192      </svg>193    </div>194  </div>195 196  <!-- Top right actions -->197  <div class="top-actions">198    <!-- Clock icon -->199    <svg viewBox="0 0 24 24">200      <circle cx="12" cy="12" r="9"/>201      <path d="M12 6v6l4 2"/>202    </svg>203 204    <!-- Waveform with refresh arrow -->205    <svg viewBox="0 0 28 24">206      <path d="M2 18v-6M6 18v-8M10 18v-10M14 18v-8M18 18v-6M22 18v-7" />207      <path d="M16 4c3 0 5 2 5 5" />208      <path d="M21 9h-3" />209      <path d="M16 4l2-2" />210    </svg>211 212    <!-- Overflow menu (vertical three dots) -->213    <div class="menu-dots"></div>214  </div>215 216  <!-- Equalizer dots grid -->217  <div class="equalizer">218    <!-- Column 1 -->219    <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>220    <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>221    <!-- Column 2 -->222    <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>223    <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>224    <!-- Column 3 -->225    <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>226    <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>227    <!-- Column 4 -->228    <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>229    <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>230    <!-- Column 5 -->231    <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>232    <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>233    <!-- Column 6 -->234    <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>235    <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>236    <!-- Column 7 -->237    <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>238    <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>239  </div>240 241  <!-- Microphone action button -->242  <div class="mic-wrapper">243    <div class="mic-inner">244      <svg viewBox="0 0 24 24">245        <path d="M12 4a3 3 0 0 1 3 3v5a3 3 0 0 1-6 0V7a3 3 0 0 1 3-3z"/>246        <path d="M6 11c0 3.3 2.7 6 6 6s6-2.7 6-6"/>247        <path d="M12 17v4"/>248      </svg>249    </div>250  </div>251 252  <!-- Bottom shortcut -->253  <div class="recordings">254    <div class="icon"></div>255    <div>Recordings</div>256  </div>257 258  <!-- Gesture bar -->259  <div class="gesture-bar"></div>260</div>261</body>262</html>