GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>New voice note UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #121418;13    color: #EAEAEA;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 110px;23    padding: 22px 28px;24    box-sizing: border-box;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #FFFFFF;29    font-size: 36px;30    letter-spacing: 0.5px;31  }32  .status-left {33    display: flex;34    align-items: center;35    gap: 24px;36  }37  .status-right {38    display: flex;39    align-items: center;40    gap: 26px;41  }42  .mini-square { width: 26px; height: 26px; background: #EAEAEA; border-radius: 4px; }43  .playstore-tri {44    width: 0; height: 0; border-left: 20px solid #7CB342; border-top: 14px solid transparent; border-bottom: 14px solid transparent;45  }46  .icon-signal, .icon-wifi, .icon-battery { display: inline-block; }47 48  /* Title */49  .title {50    position: absolute;51    top: 120px;52    left: 32px;53    font-size: 64px;54    font-weight: 600;55  }56 57  /* Tabs */58  .tabs {59    position: absolute;60    top: 240px;61    left: 32px;62    right: 32px;63    height: 120px;64    display: flex;65    align-items: flex-end;66    justify-content: flex-start;67    gap: 64px;68  }69  .tab {70    font-size: 34px;71    letter-spacing: 5px;72    text-transform: uppercase;73    color: #8FA4BD;74  }75  .tab.active { color: #BFD7FF; }76  .active-underline {77    position: absolute;78    bottom: 0;79    left: 32px;80    width: 240px;81    height: 6px;82    background: #4A77FF;83    border-radius: 3px;84  }85 86  /* Top action icons (tune and kebab) */87  .top-actions {88    position: absolute;89    top: 245px;90    right: 32px;91    display: flex;92    gap: 34px;93  }94  .action-icon { width: 48px; height: 48px; }95 96  /* Blue recording card */97  .record-card {98    position: absolute;99    top: 360px;100    left: 32px;101    width: 1016px;102    height: 160px;103    background: #2E4DA8;104    border-radius: 18px;105    display: flex;106    align-items: center;107    padding: 0 32px;108    box-sizing: border-box;109    gap: 30px;110  }111  .play-circle {112    width: 90px; height: 90px; border-radius: 50%;113    background: #FFFFFF; position: relative; flex: 0 0 auto;114    display: flex; align-items: center; justify-content: center;115  }116  .play-tri {117    width: 0; height: 0;118    border-left: 28px solid #2E4DA8;119    border-top: 18px solid transparent;120    border-bottom: 18px solid transparent;121    margin-left: 6px;122  }123  .record-title {124    font-size: 44px; color: #FFFFFF; flex: 1;125  }126  .kebab {127    width: 12px; height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;128  }129  .kebab span { width: 12px; height: 12px; background: #FFFFFF; border-radius: 50%; display: block; }130 131  /* Divider / progress line near bottom */132  .bottom-line {133    position: absolute;134    left: 48px;135    right: 48px;136    bottom: 360px;137    height: 4px;138    background: #26303A;139    border-radius: 2px;140  }141 142  /* Storage text */143  .storage-text {144    position: absolute;145    bottom: 300px;146    width: 100%;147    text-align: center;148    font-size: 36px;149    color: #9CA5AF;150  }151 152  /* Mic button */153  .mic-button {154    position: absolute;155    bottom: 180px;156    left: 50%;157    transform: translateX(-50%);158    width: 180px; height: 180px; border-radius: 50%;159    background: #D84334;160    box-shadow: 0 18px 40px rgba(0,0,0,0.4);161    display: flex; align-items: center; justify-content: center;162  }163  .mic-svg { width: 84px; height: 84px; }164 165</style>166</head>167<body>168<div id="render-target">169 170  <!-- Status Bar -->171  <div class="status-bar">172    <div class="status-left">173      <div>8:45</div>174      <div style="display:flex; align-items:center; gap:10px;">175        <div style="color:#EAEAEA; font-size:30px;">LR</div>176        <div class="mini-square"></div>177        <div class="mini-square"></div>178        <div class="playstore-tri"></div>179      </div>180    </div>181    <div class="status-right">182      <!-- cellular -->183      <svg class="icon-signal" width="42" height="32" viewBox="0 0 42 32">184        <rect x="0" y="20" width="8" height="12" fill="#FFFFFF"/>185        <rect x="11" y="14" width="8" height="18" fill="#FFFFFF" opacity="0.8"/>186        <rect x="22" y="8" width="8" height="24" fill="#FFFFFF" opacity="0.7"/>187        <rect x="33" y="2" width="8" height="30" fill="#FFFFFF" opacity="0.6"/>188      </svg>189      <!-- wifi -->190      <svg class="icon-wifi" width="42" height="32" viewBox="0 0 42 32">191        <path d="M3 10 C12 2, 30 2, 39 10" stroke="#FFFFFF" stroke-width="4" fill="none" opacity="0.9"/>192        <path d="M8 16 C16 10, 26 10, 34 16" stroke="#FFFFFF" stroke-width="4" fill="none" opacity="0.8"/>193        <path d="M14 22 C18 18, 24 18, 28 22" stroke="#FFFFFF" stroke-width="4" fill="none" opacity="0.8"/>194        <circle cx="21" cy="27" r="3" fill="#FFFFFF"/>195      </svg>196      <!-- battery -->197      <svg class="icon-battery" width="58" height="32" viewBox="0 0 58 32">198        <rect x="2" y="6" width="48" height="20" rx="4" ry="4" stroke="#FFFFFF" stroke-width="3" fill="none"/>199        <rect x="52" y="12" width="6" height="8" rx="2" fill="#FFFFFF"/>200        <rect x="5" y="9" width="32" height="14" rx="2" fill="#FFFFFF"/>201      </svg>202    </div>203  </div>204 205  <!-- Title -->206  <div class="title">New voice note</div>207 208  <!-- Tabs -->209  <div class="tabs">210    <div class="tab active">Record</div>211    <div class="tab" style="color:#717A85;">Listen</div>212  </div>213  <div class="active-underline"></div>214 215  <!-- Top actions (tune & kebab) -->216  <div class="top-actions">217    <!-- Tune sliders icon -->218    <svg class="action-icon" viewBox="0 0 48 48">219      <line x1="6" y1="12" x2="42" y2="12" stroke="#EAEAEA" stroke-width="4"/>220      <circle cx="20" cy="12" r="6" fill="#EAEAEA"/>221      <line x1="6" y1="24" x2="42" y2="24" stroke="#EAEAEA" stroke-width="4"/>222      <circle cx="32" cy="24" r="6" fill="#EAEAEA"/>223      <line x1="6" y1="36" x2="42" y2="36" stroke="#EAEAEA" stroke-width="4"/>224      <circle cx="12" cy="36" r="6" fill="#EAEAEA"/>225    </svg>226    <!-- Kebab icon -->227    <svg class="action-icon" viewBox="0 0 48 48">228      <circle cx="24" cy="10" r="5" fill="#EAEAEA"/>229      <circle cx="24" cy="24" r="5" fill="#EAEAEA"/>230      <circle cx="24" cy="38" r="5" fill="#EAEAEA"/>231    </svg>232  </div>233 234  <!-- Recording Card -->235  <div class="record-card">236    <div class="play-circle"><div class="play-tri"></div></div>237    <div class="record-title">My recording 1.m4a</div>238    <div class="kebab">239      <span></span><span></span><span></span>240    </div>241  </div>242 243  <!-- Bottom divider line -->244  <div class="bottom-line"></div>245 246  <!-- Storage text -->247  <div class="storage-text">~2179h left on storage</div>248 249  <!-- Microphone button -->250  <div class="mic-button">251    <svg class="mic-svg" viewBox="0 0 64 64">252      <rect x="22" y="12" width="20" height="28" rx="10" fill="#FFFFFF"/>253      <path d="M16 30 C16 44, 48 44, 48 30" stroke="#FFFFFF" stroke-width="6" fill="none"/>254      <rect x="30" y="44" width="4" height="10" fill="#FFFFFF"/>255      <rect x="24" y="54" width="16" height="6" rx="3" fill="#FFFFFF"/>256    </svg>257  </div>258 259</div>260</body>261</html>