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>Explorer UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: linear-gradient(180deg, #b17293 0%, #8373a7 35%, #596aa2 60%, #20254a 100%);15    color: #fff;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 22px;22    left: 28px;23    right: 28px;24    height: 72px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #ffffff;29    opacity: 0.95;30    font-size: 34px;31    letter-spacing: 0.5px;32  }33  .status-left, .status-right { display: flex; align-items: center; gap: 18px; }34  .icon-dot {35    width: 10px; height: 10px; background: #fff; border-radius: 50%;36    display: inline-block; opacity: 0.8;37  }38 39  /* App header */40  .app-header {41    position: absolute;42    top: 140px;43    left: 56px;44    display: flex; align-items: center; gap: 18px;45  }46  .chevron {47    width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;48  }49  .brand { display: flex; align-items: center; gap: 16px; }50  .tile {51    width: 58px; height: 58px; border-radius: 8px; background: rgba(255,255,255,0.18);52    border: 1px solid rgba(255,255,255,0.45); display: flex; align-items: center; justify-content: center;53    font-weight: 700; font-size: 34px;54  }55  .title {56    font-weight: 800; font-size: 74px; letter-spacing: 1px; display: flex; align-items: center; gap: 10px;57    text-shadow: 0 2px 4px rgba(0,0,0,0.25);58  }59  .title .dim { opacity: 0.95; }60 61  /* Chips */62  .chips {63    position: absolute;64    top: 1420px;65    left: 28px;66    right: 28px;67    display: flex;68    align-items: center;69    gap: 26px;70    flex-wrap: nowrap;71  }72  .chip {73    display: inline-flex;74    align-items: center;75    gap: 16px;76    padding: 22px 34px;77    border-radius: 60px;78    background: rgba(255,255,255,0.20);79    border: 1px solid rgba(255,255,255,0.35);80    color: #eee;81    font-size: 34px;82    white-space: nowrap;83    backdrop-filter: blur(2px);84  }85  .chip.location {86    background: rgba(255,255,255,0.28);87    color: #1f244b;88    font-weight: 700;89  }90  .chip .x {91    width: 38px; height: 38px; border-radius: 19px;92    display: inline-flex; align-items: center; justify-content: center;93    background: rgba(31,36,75,0.15);94    color: #1f244b;95  }96  .chip .note {97    width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;98  }99 100  /* Recommendation Card */101  .rec-card {102    position: absolute;103    left: 40px; right: 40px; bottom: 190px;104    background: rgba(255,255,255,0.12);105    border: 1px solid rgba(255,255,255,0.28);106    border-radius: 28px;107    padding: 34px;108    box-shadow: 0 10px 40px rgba(0,0,0,0.25) inset, 0 8px 18px rgba(0,0,0,0.18);109  }110  .rec-title {111    font-size: 30px; letter-spacing: 2px; opacity: 0.9; font-weight: 800;112    margin-bottom: 26px;113  }114  .album-row {115    display: flex; gap: 26px; margin-bottom: 26px;116  }117  .img-ph {118    width: 160px; height: 160px; background: #E0E0E0; border: 1px solid #BDBDBD;119    color: #757575; display: flex; align-items: center; justify-content: center; text-align: center;120    font-size: 26px; border-radius: 18px; padding: 10px;121  }122  .divider {123    height: 1px; background: rgba(255,255,255,0.3); margin: 18px 0 20px 0; opacity: 0.4;124  }125  .feature {126    display: flex; align-items: center; gap: 22px;127  }128  .feature .cover {129    width: 115px; height: 115px; border-radius: 18px;130  }131  .feature .texts {132    color: #fff;133  }134  .feature .title {135    font-size: 40px; font-weight: 800; text-shadow: none;136  }137  .feature .subtitle {138    font-size: 28px; opacity: 0.85; margin-top: 6px;139  }140  .feature .actions {141    margin-left: auto; display: flex; align-items: center; gap: 22px;142  }143  .heart {144    width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;145    opacity: 0.9;146  }147  .play {148    width: 90px; height: 90px; border-radius: 50%;149    background: rgba(31,36,75,0.55);150    border: 1px solid rgba(255,255,255,0.4);151    display: inline-flex; align-items: center; justify-content: center;152  }153 154  .attribution {155    position: absolute; right: 24px; bottom: 122px; font-size: 22px; opacity: 0.5;156  }157 158  /* Home indicator */159  .home-indicator {160    position: absolute; left: 50%; transform: translateX(-50%);161    bottom: 40px; width: 320px; height: 10px; border-radius: 10px; background: rgba(255,255,255,0.7);162  }163</style>164</head>165<body>166<div id="render-target">167 168  <!-- Status bar -->169  <div class="status-bar">170    <div class="status-left">171      <div style="font-weight:700;">12:57</div>172      <!-- simple icons -->173      <svg width="30" height="30" viewBox="0 0 24 24" fill="none">174        <path d="M12 3a7.5 7.5 0 1 0 6.7 11.1A8.5 8.5 0 1 1 12 3z" fill="#fff" opacity="0.9"/>175      </svg>176      <div style="width:28px;height:28px;border-radius:50%;border:2px solid #fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;">P</div>177      <span class="icon-dot"></span>178    </div>179    <div class="status-right">180      <!-- WiFi -->181      <svg width="34" height="34" viewBox="0 0 24 24" fill="none">182        <path d="M2 8c5.5-4.5 14.5-4.5 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>183        <path d="M5 11c4-3.2 10-3.2 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>184        <path d="M8.5 14.5c2.5-2 6.5-2 9 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>185        <circle cx="12" cy="18.5" r="1.5" fill="#fff"/>186      </svg>187      <!-- Battery -->188      <svg width="36" height="36" viewBox="0 0 26 26" fill="none">189        <rect x="2" y="7" width="18" height="12" rx="2" stroke="#fff" stroke-width="2"/>190        <rect x="4" y="9" width="10" height="8" rx="1" fill="#fff"/>191        <rect x="21" y="11" width="3" height="4" rx="1" fill="#fff"/>192      </svg>193    </div>194  </div>195 196  <!-- App header -->197  <div class="app-header">198    <div class="chevron">199      <svg width="56" height="56" viewBox="0 0 24 24" fill="none">200        <path d="M6 9l6 6 6-6" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>201      </svg>202    </div>203    <div class="brand">204      <div class="tile">T</div>205      <div class="tile">I</div>206      <div class="title">207        <span class="dim">Explorer</span>208        <svg width="32" height="32" viewBox="0 0 24 24" fill="none">209          <path d="M12 2C8.7 2 6 4.6 6 7.9c0 4.6 6 13.1 6 13.1s6-8.5 6-13.1C18 4.6 15.3 2 12 2z" stroke="#fff" stroke-width="1.8"/>210          <circle cx="12" cy="8.2" r="2.2" fill="#fff"/>211        </svg>212      </div>213    </div>214  </div>215 216  <!-- Chips -->217  <div class="chips">218    <div class="chip location">219      <span>LYONS, FRANCE.</span>220      <span class="x">221        <svg width="20" height="20" viewBox="0 0 24 24" fill="none">222          <path d="M6 6l12 12M18 6L6 18" stroke="#1f244b" stroke-width="2" stroke-linecap="round"/>223        </svg>224      </span>225    </div>226    <div class="chip">227      <span class="note">228        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">229          <path d="M9 4v10.5a3 3 0 1 1-2-2.8V7h10V4H9z" fill="#fff" opacity="0.9"/>230        </svg>231      </span>232      <span>ALL MUSIC</span>233    </div>234    <div class="chip">235      <span class="note">236        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">237          <path d="M9 4v10.5a3 3 0 1 1-2-2.8V7h10V4H9z" fill="#fff" opacity="0.9"/>238        </svg>239      </span>240      <span>TOP 40</span>241    </div>242    <div class="chip">243      <span class="note">244        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">245          <path d="M9 4v10.5a3 3 0 1 1-2-2.8V7h10V4H9z" fill="#fff" opacity="0.9"/>246        </svg>247      </span>248      <span>HIP-HOP</span>249    </div>250  </div>251 252  <!-- Recommendation card -->253  <div class="rec-card">254    <div class="rec-title">RECOMMENDED FOR YOU</div>255    <div class="album-row">256      <div class="img-ph">[IMG: ABC Jazz]</div>257      <div class="img-ph">[IMG: Album 88]</div>258      <div class="img-ph">[IMG: Jazz Groove]</div>259      <div class="img-ph">[IMG: Jazz FM]</div>260      <div class="img-ph">[IMG: Giants of Jazz]</div>261    </div>262    <div class="divider"></div>263    <div class="feature">264      <div class="img-ph cover">[IMG: Jazz Radio]</div>265      <div class="texts">266        <div class="title">JAZZ RADIO NEW ORLEANS</div>267        <div class="subtitle">La radio de référence Jazz • New Orleans</div>268      </div>269      <div class="actions">270        <div class="heart">271          <svg width="36" height="36" viewBox="0 0 24 24" fill="none">272            <path d="M12 20s-7-4.6-7-9.5A4.5 4.5 0 0 1 12 7a4.5 4.5 0 0 1 7 3.5C19 15.4 12 20 12 20z" stroke="#fff" stroke-width="1.7" fill="none"/>273          </svg>274        </div>275        <div class="play">276          <svg width="40" height="40" viewBox="0 0 24 24" fill="none">277            <path d="M8 6l10 6-10 6V6z" fill="#fff"/>278          </svg>279        </div>280      </div>281    </div>282  </div>283 284  <!-- Map attribution -->285  <div class="attribution">© Mapbox • © OpenStreetMap</div>286 287  <!-- Home indicator -->288  <div class="home-indicator"></div>289</div>290</body>291</html>