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 Player Screen</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: "Segoe UI", Roboto, Arial, sans-serif;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #12181d;19    color: #ffffff;20  }21 22  /* Top icons */23  .icon {24    position: absolute;25    width: 56px;26    height: 56px;27    opacity: 0.75;28  }29  .icon.note {30    top: 120px;31    left: 48px;32  }33  .icon.close {34    top: 120px;35    right: 48px;36  }37 38  /* Concentric rings and center avatar */39  .center-visual {40    position: absolute;41    top: 360px;42    left: 50%;43    transform: translateX(-50%);44    width: 920px;45    height: 920px;46    pointer-events: none;47  }48  .ring {49    position: absolute;50    border-radius: 50%;51    border: 2px solid rgba(67, 196, 202, 0.26);52    left: 50%;53    top: 50%;54    transform: translate(-50%, -50%);55  }56  .ring.r1 { width: 920px; height: 920px; border-color: rgba(67,196,202,0.18); }57  .ring.r2 { width: 660px; height: 660px; border-color: rgba(67,196,202,0.30); }58  .ring.r3 { width: 420px; height: 420px; border-color: rgba(67,196,202,0.38); }59 60  .progress-tick {61    position: absolute;62    width: 10px;63    height: 38px;64    background: #5ad2d6;65    left: 50%;66    transform: translateX(-50%);67    top: calc(50% - 330px); /* top of middle ring */68    border-radius: 3px;69    box-shadow: 0 0 10px rgba(90,210,214,0.6);70  }71 72  .avatar-wrap {73    position: absolute;74    left: 50%;75    top: 50%;76    width: 260px;77    height: 260px;78    transform: translate(-50%, -50%);79    border-radius: 50%;80    overflow: hidden;81    box-shadow: 0 0 0 6px rgba(67,196,202,0.12);82    background: #e0e0e0;83    border: 1px solid #bdbdbd;84    display: flex;85    align-items: center;86    justify-content: center;87    color: #555;88    font-size: 28px;89    text-align: center;90    line-height: 1.2;91  }92 93  /* Bottom text area */94  .info {95    position: absolute;96    left: 80px;97    right: 80px;98    bottom: 420px;99    text-align: left;100  }101  .title {102    font-size: 74px;103    font-weight: 700;104    letter-spacing: 0.5px;105    line-height: 1.2;106    color: #e8f0f3;107  }108  .author {109    margin-top: 24px;110    font-size: 44px;111    color: #b7c6cf;112  }113  .session {114    margin-top: 28px;115    font-size: 40px;116    color: #91a1ab;117  }118 119  .time {120    position: absolute;121    left: 0;122    right: 0;123    bottom: 330px;124    text-align: center;125    font-size: 40px;126    color: #a5b3bd;127    letter-spacing: 1px;128  }129 130  .play-btn {131    position: absolute;132    left: 50%;133    bottom: 220px;134    transform: translateX(-50%);135    width: 176px;136    height: 176px;137    border-radius: 50%;138    border: 8px solid rgba(255,255,255,0.85);139    display: flex;140    align-items: center;141    justify-content: center;142    box-shadow: 0 8px 24px rgba(0,0,0,0.5), inset 0 0 0 4px rgba(255,255,255,0.08);143  }144  .home-indicator {145    position: absolute;146    bottom: 46px;147    left: 50%;148    transform: translateX(-50%);149    width: 360px;150    height: 12px;151    background: #ffffff;152    border-radius: 10px;153    opacity: 0.85;154  }155</style>156</head>157<body>158<div id="render-target">159 160  <!-- Music note icon -->161  <svg class="icon note" viewBox="0 0 24 24" fill="#a6b4be">162    <path d="M12 3v11.5a3.5 3.5 0 1 1-2-3.16V7.2l8-2v7.3a3.5 3.5 0 1 1-2-3.16V3l-4 1z"/>163  </svg>164 165  <!-- Close (X) icon -->166  <svg class="icon close" viewBox="0 0 24 24" fill="none" stroke="#e8f0f3" stroke-width="2.6" stroke-linecap="round">167    <path d="M6 6l12 12M18 6l-12 12"/>168  </svg>169 170  <!-- Concentric rings and avatar -->171  <div class="center-visual">172    <div class="ring r1"></div>173    <div class="ring r2"></div>174    <div class="ring r3"></div>175    <div class="progress-tick"></div>176    <div class="avatar-wrap">[IMG: Speaker Portrait]</div>177  </div>178 179  <!-- Text information -->180  <div class="info">181    <div class="title">Rise and Greet the Day</div>182    <div class="author">By Nico Hase</div>183    <div class="session">Session 1 - Awaken With Intention</div>184  </div>185 186  <!-- Time -->187  <div class="time">0:02 / 5:17</div>188 189  <!-- Play/Pause Button -->190  <div class="play-btn">191    <svg width="84" height="84" viewBox="0 0 24 24" fill="#ffffff">192      <rect x="5" y="4" width="5" height="16" rx="1.5"></rect>193      <rect x="14" y="4" width="5" height="16" rx="1.5"></rect>194    </svg>195  </div>196 197  <!-- Home indicator -->198  <div class="home-indicator"></div>199 200</div>201</body>202</html>