GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Audio Player - Deep Sleep</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #0b0f14;14  }15 16  /* Fullscreen background image placeholder */17  .bg-photo {18    position: absolute;19    left: 0; top: 0; width: 1080px; height: 2400px;20    background: #E0E0E0;21    border: 1px solid #BDBDBD;22    color: #757575;23    display: flex; align-items: center; justify-content: center;24    font-size: 28px; letter-spacing: 0.3px;25  }26  /* Soft warm gradient tint similar to screenshot lighting */27  .bg-tint {28    position: absolute; inset: 0;29    background: radial-gradient(1200px 900px at 900px 500px, rgba(255,210,150,0.45), rgba(0,0,0,0.15)),30                linear-gradient(to bottom, rgba(10,20,30,0.15), rgba(10,20,30,0.45));31    pointer-events: none;32  }33 34  /* Top system/status bar */35  .status-bar {36    position: absolute;37    top: 0; left: 0; width: 1080px; height: 120px;38    background: #15355f;39    color: #fff;40  }41  .status-content {42    position: absolute;43    left: 36px; right: 36px; top: 28px; height: 64px;44    display: flex; align-items: center; justify-content: space-between;45    font-weight: 600; font-size: 36px;46  }47  .status-icons {48    display: flex; align-items: center; gap: 28px;49  }50  .status-icons svg { opacity: 0.95; }51 52  /* Floating header icons */53  .chat-icon {54    position: absolute; left: 36px; top: 180px;55    width: 64px; height: 64px;56    opacity: 0.9;57  }58  .close-x {59    position: absolute; right: 36px; top: 200px;60    width: 64px; height: 64px;61    opacity: 0.25;62  }63 64  /* Central player controls */65  .player-ring {66    position: absolute;67    left: 270px; top: 1250px; width: 540px; height: 540px;68    border-radius: 50%;69    border: 6px solid rgba(255,255,255,0.85);70    display: flex; align-items: center; justify-content: center;71    backdrop-filter: blur(2px);72  }73  .pause-btn {74    width: 240px; height: 240px; border-radius: 50%;75    background: linear-gradient(180deg, rgba(110,138,179,0.9), rgba(88,110,152,0.9));76    box-shadow: 0 18px 40px rgba(0,0,0,0.25), inset 0 0 0 2px rgba(255,255,255,0.12);77    display: flex; align-items: center; justify-content: center;78  }79  .pause-btn svg { width: 112px; height: 112px; }80 81  .skip {82    position: absolute; width: 120px; height: 120px; border-radius: 50%;83    border: 4px solid rgba(255,255,255,0.9);84    display: flex; align-items: center; justify-content: center;85    color: #fff; font-size: 34px; font-weight: 600;86  }87  .skip-left { left: 84px; top: 1600px; }88  .skip-right { right: 84px; top: 1600px; }89  .skip svg { position: absolute; width: 90px; height: 90px; top: 12px; left: 15px; opacity: 0.9; }90 91  /* Track info */92  .track-time {93    position: absolute; left: 0; right: 0; top: 1850px;94    text-align: center; color: rgba(255,255,255,0.9); font-size: 40px; font-weight: 600;95    text-shadow: 0 2px 4px rgba(0,0,0,0.4);96  }97  .track-title {98    position: absolute; left: 0; right: 0; top: 1910px;99    text-align: center; color: #fff; font-size: 64px; font-weight: 600;100    text-shadow: 0 3px 6px rgba(0,0,0,0.45);101  }102 103  /* Bottom actions */104  .bottom-actions {105    position: absolute; left: 0; right: 0; top: 2040px;106    display: flex; align-items: center; justify-content: center; gap: 180px;107    color: #fff;108  }109  .action {110    width: 120px; height: 120px; display: flex; align-items: center; justify-content: center;111    opacity: 0.95;112  }113 114  /* Home indicator area */115  .home-area {116    position: absolute; left: 0; bottom: 0; width: 1080px; height: 140px;117    background: #000;118  }119  .home-indicator {120    position: absolute; left: 50%; transform: translateX(-50%);121    bottom: 40px; width: 380px; height: 12px; border-radius: 12px;122    background: rgba(255,255,255,0.85);123  }124</style>125</head>126<body>127<div id="render-target">128  <div class="bg-photo">[IMG: Calm bedroom scene with person resting on pillow]</div>129  <div class="bg-tint"></div>130 131  <!-- Status bar -->132  <div class="status-bar">133    <div class="status-content">134      <div class="time">12:21</div>135      <div class="status-icons">136        <!-- small round dot -->137        <svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="#fff"/></svg>138        <!-- cellular icon -->139        <svg width="28" height="24" viewBox="0 0 24 24">140          <rect x="2" y="16" width="3" height="6" fill="#fff"/>141          <rect x="7" y="12" width="3" height="10" fill="#fff"/>142          <rect x="12" y="8" width="3" height="14" fill="#fff"/>143          <rect x="17" y="4" width="3" height="18" fill="#fff"/>144        </svg>145        <!-- location/triangle -->146        <svg width="28" height="24" viewBox="0 0 24 24">147          <path d="M12 2l8 20-8-6-8 6z" fill="#fff"/>148        </svg>149        <!-- small dot -->150        <svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#fff"/></svg>151        <!-- wifi -->152        <svg width="32" height="24" viewBox="0 0 24 24">153          <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" fill="none"/>154          <path d="M5 12c4-3 10-3 14 0" stroke="#fff" stroke-width="2" fill="none"/>155          <path d="M9 16c2-2 4-2 6 0" stroke="#fff" stroke-width="2" fill="none"/>156          <circle cx="12" cy="19" r="2" fill="#fff"/>157        </svg>158        <!-- battery -->159        <svg width="40" height="24" viewBox="0 0 28 16">160          <rect x="1" y="2" width="24" height="12" rx="2" ry="2" stroke="#fff" stroke-width="2" fill="none"/>161          <rect x="4" y="4" width="16" height="8" fill="#fff"/>162          <rect x="25" y="5" width="2" height="6" fill="#fff"/>163        </svg>164      </div>165    </div>166  </div>167 168  <!-- Chat bubble icon -->169  <svg class="chat-icon" viewBox="0 0 24 24">170    <path d="M3 4h18v12H8l-5 5z" fill="none" stroke="#ffffff" stroke-width="2" />171  </svg>172 173  <!-- Close X icon -->174  <svg class="close-x" viewBox="0 0 24 24">175    <path d="M4 4L20 20M20 4L4 20" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>176  </svg>177 178  <!-- Player ring with pause button -->179  <div class="player-ring">180    <div class="pause-btn">181      <svg viewBox="0 0 100 100">182        <rect x="26" y="20" width="16" height="60" rx="4" fill="#ffffff"/>183        <rect x="58" y="20" width="16" height="60" rx="4" fill="#ffffff"/>184      </svg>185    </div>186  </div>187 188  <!-- Rewind 15 -->189  <div class="skip skip-left">190    <svg viewBox="0 0 24 24">191      <path d="M19 6a8 8 0 1 0 0 12" stroke="#ffffff" stroke-width="2" fill="none"/>192      <path d="M8 6H4v4" stroke="#ffffff" stroke-width="2" fill="none"/>193    </svg>194    <div>15</div>195  </div>196 197  <!-- Forward 15 -->198  <div class="skip skip-right">199    <svg viewBox="0 0 24 24">200      <path d="M5 6a8 8 0 1 1 0 12" stroke="#ffffff" stroke-width="2" fill="none"/>201      <path d="M16 6h4v4" stroke="#ffffff" stroke-width="2" fill="none"/>202    </svg>203    <div>15</div>204  </div>205 206  <!-- Track info -->207  <div class="track-time">23:20</div>208  <div class="track-title">Deep Sleep</div>209 210  <!-- Bottom actions -->211  <div class="bottom-actions">212    <!-- Playlist + -->213    <div class="action">214      <svg width="96" height="96" viewBox="0 0 24 24">215        <path d="M3 6h12M3 10h12M3 14h9" stroke="#ffffff" stroke-width="2" stroke-linecap="round" fill="none"/>216        <path d="M18 9v6M15 12h6" stroke="#ffffff" stroke-width="2" stroke-linecap="round" fill="none"/>217      </svg>218    </div>219    <!-- Heart -->220    <div class="action">221      <svg width="96" height="96" viewBox="0 0 24 24">222        <path d="M12 21s-7-4.5-9-8.5C1.5 9 4 6 7 6c2 0 3.5 1.2 5 3 1.5-1.8 3-3 5-3 3 0 5.5 3 4 6.5C19 16.5 12 21 12 21z" fill="none" stroke="#ffffff" stroke-width="2"/>223      </svg>224    </div>225    <!-- Shuffle/Repeat arrows -->226    <div class="action">227      <svg width="96" height="96" viewBox="0 0 24 24">228        <path d="M3 6h5l2 2h6" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>229        <path d="M17 4l4 4-4 4" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>230        <path d="M3 18h5l7-7h6" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>231        <path d="M17 14l4 4-4 4" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>232      </svg>233    </div>234  </div>235 236  <!-- Home indicator -->237  <div class="home-area">238    <div class="home-indicator"></div>239  </div>240</div>241</body>242</html>