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 Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: linear-gradient(180deg, #b47892 0%, #84698d 45%, #2d2e60 80%, #1f2350 100%);13  }14 15  /* Top chevron and title */16  .top-chevron {17    position: absolute; top: 150px; left: 40px; width: 64px; height: 40px; color: #fff;18  }19  .top-chevron svg { width: 64px; height: 40px; }20  .title-row {21    position: absolute; top: 150px; left: 140px; display: flex; align-items: center; gap: 18px; color: #fff;22  }23  .title-badge {24    display: flex; gap: 6px; align-items: center;25  }26  .square {27    width: 48px; height: 48px; border-radius: 6px; background: rgba(255,255,255,0.15);28    border: 1px solid rgba(255,255,255,0.35); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700;29  }30  .app-title {31    font-size: 64px; font-weight: 800; letter-spacing: 1px; color: #fff;32    text-shadow: 0 2px 4px rgba(0,0,0,0.25);33  }34  .pin-icon {35    margin-left: 8px;36  }37  .pin-icon svg { width: 36px; height: 36px; }38 39  /* Faint country labels to emulate the map */40  .map-label {41    position: absolute; color: rgba(255,255,255,0.45); font-size: 36px; font-weight: 600;42  }43 44  /* Marker cards on the map */45  .marker {46    position: absolute; width: 160px; height: 160px;47    border-radius: 24px; background: #fff; box-shadow: 0 8px 22px rgba(0,0,0,0.35);48    display: flex; align-items: center; justify-content: center;49  }50  .marker .img {51    width: 140px; height: 140px; border-radius: 18px;52    background: #E0E0E0; border: 1px solid #BDBDBD;53    display: flex; align-items: center; justify-content: center; color: #757575; font-weight: 700; font-size: 24px; text-align: center; padding: 8px;54  }55  .marker .tip {56    position: absolute; bottom: -44px; left: 50%; transform: translateX(-50%);57    width: 60px; height: 60px; background: #fff; border-radius: 30px; box-shadow: 0 6px 14px rgba(0,0,0,0.3);58  }59 60  /* Filter chips */61  .chip-row {62    position: absolute; left: 50px; right: 50px; top: 1600px; display: flex; gap: 24px; justify-content: center;63  }64  .chip {65    height: 96px; padding: 0 40px; border-radius: 48px;66    background: rgba(255,255,255,0.2); backdrop-filter: blur(2px);67    color: #eae6f3; display: flex; align-items: center; gap: 18px; font-size: 34px; font-weight: 700;68    border: 1px solid rgba(255,255,255,0.25);69  }70  .chip svg { width: 40px; height: 40px; fill: #eae6f3; }71 72  /* Recommendation panel */73  .panel {74    position: absolute; left: 40px; right: 40px; top: 1760px; height: 520px;75    background: rgba(195,195,215,0.35); border: 1px solid rgba(255,255,255,0.25);76    border-radius: 36px; box-shadow: 0 10px 24px rgba(0,0,0,0.35);77    padding: 36px;78  }79  .panel h3 {80    margin: 0 0 24px 0; color: #fff; font-size: 36px; letter-spacing: 2px; font-weight: 800;81  }82  .album-row {83    display: flex; gap: 28px; margin-bottom: 30px;84  }85  .album {86    width: 160px; height: 160px; border-radius: 24px;87    background: #E0E0E0; border: 1px solid #BDBDBD;88    display: flex; align-items: center; justify-content: center; color: #757575; font-weight: 700; text-align: center; font-size: 26px; padding: 10px;89  }90  .feature {91    display: flex; align-items: center; justify-content: space-between; gap: 24px;92    padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.25);93  }94  .feature-left { display: flex; align-items: center; gap: 24px; }95  .feature .thumb {96    width: 140px; height: 140px; border-radius: 20px;97    background: #E0E0E0; border: 1px solid #BDBDBD;98    display: flex; align-items: center; justify-content: center; color: #757575; font-weight: 700;99  }100  .feature .info {101    color: #fff;102  }103  .feature .info .title { font-size: 40px; font-weight: 800; margin-bottom: 6px; }104  .feature .info .subtitle { font-size: 28px; opacity: 0.85; }105  .feature .actions { display: flex; gap: 20px; align-items: center; }106  .icon-btn {107    width: 88px; height: 88px; border-radius: 44px; display: flex; align-items: center; justify-content: center;108    background: rgba(255,255,255,0.25); border: 1px solid rgba(255,255,255,0.35);109  }110  .icon-btn svg { width: 44px; height: 44px; fill: #fff; }111 112  /* Footer elements */113  .mapbox-note {114    position: absolute; right: 30px; bottom: 120px; color: rgba(255,255,255,0.5); font-size: 26px;115  }116  .home-indicator {117    position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%);118    width: 400px; height: 14px; border-radius: 7px; background: rgba(255,255,255,0.65);119  }120</style>121</head>122<body>123<div id="render-target">124 125  <!-- Chevron -->126  <div class="top-chevron">127    <svg viewBox="0 0 24 24">128      <path d="M12 15L5 8h14l-7 7z" fill="#fff"></path>129    </svg>130  </div>131 132  <!-- Title -->133  <div class="title-row">134    <div class="title-badge">135      <div class="square">T</div>136      <div class="square">I</div>137    </div>138    <div class="app-title">Explorer</div>139    <div class="pin-icon">140      <svg viewBox="0 0 24 24">141        <path d="M12 2a7 7 0 0 0-7 7c0 4.4 7 13 7 13s7-8.6 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z" fill="#fff"></path>142      </svg>143    </div>144  </div>145 146  <!-- Map labels (faint) -->147  <div class="map-label" style="top: 560px; left: 320px;">Kazakhstan</div>148  <div class="map-label" style="top: 820px; left: 150px;">Uzbekistan</div>149  <div class="map-label" style="top: 840px; left: 420px;">Kyrgyzstan</div>150  <div class="map-label" style="top: 940px; left: 380px;">Tajikistan</div>151  <div class="map-label" style="top: 1080px; left: 160px;">Afghanistan</div>152  <div class="map-label" style="top: 1240px; left: 180px;">Pakistan</div>153  <div class="map-label" style="top: 1200px; left: 760px;">Bangladesh</div>154  <div class="map-label" style="top: 1180px; left: 920px;">Myanmar (Burma)</div>155  <div class="map-label" style="top: 1550px; left: 420px;">India</div>156  <div class="map-label" style="top: 1780px; left: 430px; font-size: 30px;">Maldives</div>157 158  <!-- Map markers -->159  <div class="marker" style="top: 1080px; left: 480px;">160    <div class="img">[IMG: Station]</div>161    <div class="tip"></div>162  </div>163 164  <div class="marker" style="top: 1260px; left: 770px;">165    <div class="img">[IMG: Radio Logo]</div>166    <div class="tip"></div>167  </div>168 169  <div class="marker" style="top: 1400px; left: 470px;">170    <div class="img">[IMG: Bollywood]</div>171    <div class="tip"></div>172  </div>173 174  <div class="marker" style="top: 1600px; left: 540px;">175    <div class="img">[IMG: Station]</div>176    <div class="tip"></div>177  </div>178 179  <!-- Filter chips -->180  <div class="chip-row">181    <div class="chip">182      <svg viewBox="0 0 24 24"><path d="M10 2a8 8 0 1 0 5.3 14.1l4.3 4.3 1.4-1.4-4.3-4.3A8 8 0 0 0 10 2zm0 14a6 6 0 1 1 0-12 6 6 0 0 1 0 12z"></path></svg>183      SEARCH184    </div>185    <div class="chip">186      <svg viewBox="0 0 24 24"><path d="M12 3c2 0 3 .7 3 2.2V18a3 3 0 1 1-2-2.8V5.2c0-.8-2-.6-2-.2v9.5A3 3 0 1 1 9 18V5.2C9 3.7 10 3 12 3z"></path></svg>187      ALL MUSIC188    </div>189    <div class="chip">190      <svg viewBox="0 0 24 24"><path d="M12 3c2 0 3 .7 3 2.2V18a3 3 0 1 1-2-2.8V5.2c0-.8-2-.6-2-.2v9.5A3 3 0 1 1 9 18V5.2C9 3.7 10 3 12 3z"></path></svg>191      TOP 40192    </div>193    <div class="chip">194      <svg viewBox="0 0 24 24"><path d="M12 3c2 0 3 .7 3 2.2V18a3 3 0 1 1-2-2.8V5.2c0-.8-2-.6-2-.2v9.5A3 3 0 1 1 9 18V5.2C9 3.7 10 3 12 3z"></path></svg>195      HIP-HOP196    </div>197  </div>198 199  <!-- Recommendation panel -->200  <div class="panel">201    <h3>RECOMMENDED FOR YOU</h3>202    <div class="album-row">203      <div class="album">[IMG: ABC Jazz]</div>204      <div class="album">[IMG: Album 88]</div>205      <div class="album">[IMG: Jazz Groove]</div>206      <div class="album">[IMG: Jazz FM]</div>207      <div class="album">[IMG: Giants of Jazz]</div>208    </div>209    <div class="feature">210      <div class="feature-left">211        <div class="thumb">[IMG: JAZZ RADIO]</div>212        <div class="info">213          <div class="title">JAZZ RADIO NEW ORLEANS</div>214          <div class="subtitle">La radio de référence Jazz New Orleans</div>215        </div>216      </div>217      <div class="actions">218        <div class="icon-btn">219          <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.7-7-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.3-7 10-7 10H12z" fill="#fff"></path></svg>220        </div>221        <div class="icon-btn" style="background: #5e5b83;">222          <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7-11-7z" fill="#fff"></path></svg>223        </div>224      </div>225    </div>226  </div>227 228  <!-- Attribution & home indicator -->229  <div class="mapbox-note">© Mapbox • © OpenStreetMap</div>230  <div class="home-indicator"></div>231</div>232</body>233</html>