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>Music Search UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #0b0b0b;12    color: #fff;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute; top: 0; left: 0; right: 0;18    height: 90px; padding: 0 36px;19    display: flex; align-items: center; justify-content: space-between;20    color: #eaeaea; font-size: 40px; letter-spacing: 1px;21  }22  .status-right { display: flex; align-items: center; gap: 24px; font-size: 34px; }23  .icon { width: 40px; height: 40px; display: inline-block; }24  .icon svg { width: 100%; height: 100%; fill: #eaeaea; }25 26  /* Search bar */27  .search-wrap { position: absolute; top: 120px; left: 30px; right: 30px; }28  .search-bar {29    background: #1f1f1f; border-radius: 18px; height: 120px;30    display: flex; align-items: center; padding: 0 36px; border: 1px solid #2a2a2a;31  }32  .search-input {33    flex: 1; color: #d9d9d9; font-size: 46px;34  }35  .mic {36    width: 56px; height: 56px;37  }38  .mic svg { fill: #d9d9d9; }39 40  /* Sections */41  .section { padding: 40px 30px 0 30px; position: absolute; left: 0; right: 0; }42  .section-title {43    font-size: 54px; font-weight: 700; margin-bottom: 24px;44  }45 46  /* Song list */47  .list { display: flex; flex-direction: column; gap: 28px; }48  .row {49    display: flex; align-items: center; gap: 28px;50    padding: 24px 10px; border-radius: 12px;51  }52  .album-art {53    width: 150px; height: 150px;54    background: #E0E0E0; border: 1px solid #BDBDBD;55    display: flex; align-items: center; justify-content: center;56    color: #757575; font-size: 28px; text-align: center; border-radius: 14px;57  }58  .row-content { flex: 1; }59  .song-title {60    font-size: 44px; color: #ff9a1f; line-height: 1.2;61  }62  .artist {63    font-size: 36px; color: #9a9a9a; margin-top: 10px;64  }65  .ellipsis {66    width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;67  }68  .ellipsis svg { fill: #9a9a9a; }69 70  .see-more {71    margin-top: 16px; font-size: 42px; color: #b5b5b5;72  }73 74  /* Lyrics section positioning */75  #songs-section { top: 280px; }76  #lyrics-section { top: 1180px; }77 78  .lyric-subtitle { font-size: 38px; color: #c7a76b; margin-top: 8px; }79 80  /* Bottom navigation */81  .bottom-nav {82    position: absolute; bottom: 0; left: 0; right: 0;83    height: 210px; background: #111; border-top: 1px solid #222;84    display: flex; align-items: center; justify-content: space-around;85    padding-bottom: 20px;86  }87  .nav-item {88    display: flex; flex-direction: column; align-items: center; gap: 16px;89    color: #bfbfbf; font-size: 36px;90  }91  .nav-item .nav-icon { width: 80px; height: 80px; }92  .nav-item.active { color: #ff8a22; }93  .home-pill {94    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);95    width: 360px; height: 14px; background: #eaeaea; border-radius: 8px; opacity: 0.85;96  }97 98  /* YouTube card overlay (right side) to mimic screenshot) */99  .yt-card {100    position: absolute; top: 1550px; right: 30px;101    width: 660px; height: 360px;102    background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 16px;103    display: flex; align-items: center; justify-content: center;104    color: #757575; font-size: 34px;105  }106 107</style>108</head>109<body>110<div id="render-target">111 112  <!-- Status Bar -->113  <div class="status-bar">114    <div>11:49</div>115    <div class="status-right">116      <span class="icon">117        <svg viewBox="0 0 24 24"><path d="M12 4a8 8 0 018 8h-2a6 6 0 00-6-6V4zM12 8a4 4 0 014 4h-2a2 2 0 00-2-2V8z"/></svg>118      </span>119      <span class="icon">120        <svg viewBox="0 0 24 24"><path d="M2 12l6 6 14-14-1.4-1.4L8 15.2 3.4 10.6 2 12z"/></svg>121      </span>122      <span class="icon">123        <svg viewBox="0 0 24 24"><path d="M12 1l.9 2.8h3l-2.4 1.8.9 2.8L12 6.6 9.6 8.4l.9-2.8L8.1 3.8h3z"/></svg>124      </span>125      <span class="icon">126        <svg viewBox="0 0 24 24"><path d="M3 3h18v2H3V3zm3 6h12v2H6V9zm3 6h6v2H9v-2z"/></svg>127      </span>128      <span>100%</span>129      <span class="icon">130        <svg viewBox="0 0 24 24"><path d="M16 7H8a2 2 0 00-2 2v6a2 2 0 002 2h8a2 2 0 002-2V9a2 2 0 00-2-2zm1 8H7V9h10v6zm-3.5-10h-5l1-2h3l1 2z"/></svg>131      </span>132    </div>133  </div>134 135  <!-- Search Bar -->136  <div class="search-wrap">137    <div class="search-bar">138      <div class="icon" style="margin-right:18px;">139        <svg viewBox="0 0 24 24"><path d="M10 2a8 8 0 105.3 14.1l4.3 4.3 1.4-1.4-4.3-4.3A8 8 0 0010 2zm0 2a6 6 0 110 12A6 6 0 0110 4z"/></svg>140      </div>141      <div class="search-input">Christian Fromont</div>142      <div class="mic">143        <svg viewBox="0 0 24 24"><path d="M12 3a3 3 0 013 3v5a3 3 0 01-6 0V6a3 3 0 013-3zm6 8a6 6 0 01-12 0H4a8 8 0 0016 0h-2zm-6 9h-2v-2h2v2z"/></svg>144      </div>145    </div>146  </div>147 148  <!-- Songs Section -->149  <div id="songs-section" class="section">150    <div class="section-title">Songs</div>151 152    <div class="list">153      <div class="row">154        <div class="album-art">[IMG: Album Art]</div>155        <div class="row-content">156          <div class="song-title">Wolfgang Amadeus Mozart, un e...</div>157          <div class="artist">Christian Fromont</div>158        </div>159        <div class="ellipsis">160          <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>161        </div>162      </div>163 164      <div class="row">165        <div class="album-art">[IMG: Album Art]</div>166        <div class="row-content">167          <div class="song-title">Les menaces du comte Dracula</div>168          <div class="artist">Bram Stoker</div>169        </div>170        <div class="ellipsis">171          <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>172        </div>173      </div>174 175      <div class="row">176        <div class="album-art">[IMG: Album Art]</div>177        <div class="row-content">178          <div class="song-title">Dernière chance de fuir pour Jon...</div>179          <div class="artist">Bram Stoker</div>180        </div>181        <div class="ellipsis">182          <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>183        </div>184      </div>185    </div>186 187    <div class="see-more">See more ></div>188  </div>189 190  <!-- Lyrics Section -->191  <div id="lyrics-section" class="section">192    <div class="section-title">Lyrics</div>193 194    <div class="list">195      <div class="row">196        <div class="album-art">[IMG: Album Cover]</div>197        <div class="row-content">198          <div class="song-title" style="color:#fff">Witchcraft - Frank Sinatra</div>199          <div class="lyric-subtitle">What good would common sense for it do</div>200        </div>201        <div class="ellipsis">202          <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>203        </div>204      </div>205 206      <div class="row">207        <div class="album-art">[IMG: Album Cover]</div>208        <div class="row-content">209          <div class="song-title" style="color:#fff">All Of Me</div>210          <div class="lyric-subtitle">, you're my mus...</div>211        </div>212      </div>213 214      <div class="row">215        <div class="album-art">[IMG: Album Cover]</div>216        <div class="row-content">217          <div class="song-title" style="color:#fff">Thinking Out Loud - Ed Sheeran</div>218          <div class="lyric-subtitle">smile from your cheeks. And darling I...</div>219        </div>220        <div class="ellipsis">221          <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>222        </div>223      </div>224    </div>225  </div>226 227  <!-- YouTube overlay card -->228  <div class="yt-card">[IMG: YouTube Thumbnail]</div>229 230  <!-- Bottom Navigation -->231  <div class="bottom-nav">232    <div class="nav-item">233      <div class="nav-icon">234        <svg viewBox="0 0 24 24" fill="#bfbfbf"><path d="M12 3l1.5 3 3 .5-2.2 2.1.5 3-2.8-1.5-2.8 1.5.5-3L7.5 6.5l3-.5L12 3z"/></svg>235      </div>236      <div>History</div>237    </div>238 239    <div class="nav-item active">240      <div class="nav-icon">241        <svg viewBox="0 0 24 24" fill="#ff8a22"><path d="M12 2C8 7 6 9.5 6 12a6 6 0 0012 0c0-2.5-2-5-6-10z"/></svg>242      </div>243      <div>Search</div>244    </div>245 246    <div class="nav-item">247      <div class="nav-icon">248        <svg viewBox="0 0 24 24" fill="#bfbfbf"><path d="M4 5h16v2H4V5zm0 6h12v2H4v-2zm0 6h8v2H4v-2z"/></svg>249      </div>250      <div>Playlists</div>251    </div>252 253    <div class="home-pill"></div>254  </div>255 256</div>257</body>258</html>