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>Orléans Stations</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: #212222;15    color: #EEE;16  }17 18  /* Header / hero area */19  .hero {20    position: relative;21    height: 460px;22  }23  .hero .img-ph {24    position: absolute;25    left: 0; top: 0; right: 0; bottom: 0;26    background: #E0E0E0;27    border-bottom: 1px solid #BDBDBD;28    display: flex; align-items: center; justify-content: center;29    color: #757575; font-size: 32px; letter-spacing: 0.5px;30  }31  .hero::after {32    content: "";33    position: absolute; inset: 0;34    background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0.65));35  }36 37  .status {38    position: absolute; top: 22px; left: 24px; right: 24px;39    display: flex; align-items: center; justify-content: space-between;40    font-size: 28px; color: #ffffffcc;41  }42  .status .icons { display: flex; gap: 16px; align-items: center; }43  .status svg { width: 30px; height: 30px; stroke: #ffffffcc; fill: none; }44 45  .back {46    position: absolute; top: 110px; left: 24px;47    display: flex; align-items: center; gap: 14px; color: #fff;48    font-size: 38px;49  }50  .back svg { width: 36px; height: 36px; stroke: #fff; fill: none; }51 52  .title-row {53    position: absolute; left: 24px; bottom: 120px; right: 24px;54    display: flex; align-items: center; gap: 20px;55  }56  .badge {57    width: 86px; height: 86px; border-radius: 86px;58    background: #fff; color: #111; display: flex; align-items: center; justify-content: center;59    font-weight: 700; font-size: 40px;60  }61  .title-text {62    flex: 1;63  }64  .city {65    font-size: 86px; line-height: 1; font-weight: 600; color: #fff;66  }67  .subtitle { margin-top: 10px; font-size: 32px; color: #cfcfcf; }68 69  .hero-right {70    position: absolute; right: 24px; top: 120px; display: flex; flex-direction: column; align-items: flex-end; gap: 26px;71  }72  .share svg { width: 44px; height: 44px; stroke: #fff; }73  .clock-label { font-size: 34px; color: #ffffffcc; }74 75  /* List */76  .list {77    position: absolute; left: 0; right: 0; top: 460px; bottom: 380px;78    overflow: hidden;79    background: #262626;80  }81  .scroll {82    height: 100%; overflow-y: auto; padding-bottom: 40px;83  }84  .item {85    height: 120px; display: flex; align-items: center; justify-content: space-between;86    padding: 0 30px; font-size: 42px; color: #eaeaea;87    border-bottom: 1px solid #3a3a3a;88  }89  .item .right { display: flex; align-items: center; }90  .item.active {91    background: #07c160; color: #fff; font-weight: 600;92  }93  .item.active .right svg { stroke: #fff; }94  .item .divider { height: 1px; background: #3a3a3a; }95 96  .heart-icon { width: 48px; height: 48px; stroke: #bdbdbd; fill: none; }97 98  /* Player bottom sheet */99  .player {100    position: absolute; left: 0; right: 0; bottom: 0; height: 380px;101    background: #1f1f1f; border-top: 1px solid #333;102  }103  .grabber {104    width: 160px; height: 10px; border-radius: 6px; background: #3a3a3a;105    margin: 18px auto;106  }107  .now-row {108    display: flex; align-items: flex-start; justify-content: space-between;109    padding: 0 32px;110  }111  .now-title { font-size: 52px; color: #07c160; font-weight: 600; }112  .now-sub { font-size: 32px; color: #c9c9c9; margin-top: 6px; }113 114  .controls { display: flex; gap: 34px; align-items: center; }115  .controls svg { width: 56px; height: 56px; stroke: #ddd; fill: none; }116 117  .nav {118    position: absolute; left: 0; right: 0; bottom: 52px;119    display: flex; justify-content: space-around; align-items: center;120    padding: 0 24px;121  }122  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 14px; color: #cfcfcf; }123  .nav-item.active .label { color: #07c160; }124  .nav-item svg { width: 64px; height: 64px; stroke: #ddd; fill: none; }125  .nav-item.active svg { stroke: #07c160; }126  .label { font-size: 28px; }127 128  .home-indicator {129    position: absolute; left: 50%; transform: translateX(-50%);130    bottom: 16px; width: 280px; height: 12px; border-radius: 8px; background: #cfcfcf66;131  }132</style>133</head>134<body>135<div id="render-target">136  <!-- Header with map image placeholder -->137  <div class="hero">138    <div class="img-ph">[IMG: Satellite Map with neon green dots]</div>139 140    <div class="status">141      <div>12:51</div>142      <div class="icons">143        <!-- simple status dots -->144        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke-width="2"/></svg>145        <svg viewBox="0 0 24 24"><path d="M3 12h18" stroke-width="2"/></svg>146        <svg viewBox="0 0 24 24"><path d="M4 20l16-16" stroke-width="2"/></svg>147        <svg viewBox="0 0 24 24"><path d="M12 3a9 9 0 110 18 9 9 0 010-18z" stroke-width="2"/></svg>148      </div>149    </div>150 151    <div class="back">152      <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>153      <span>Back</span>154    </div>155 156    <div class="hero-right">157      <div class="share">158        <svg viewBox="0 0 24 24"><circle cx="6" cy="12" r="2" stroke-width="2"/><circle cx="18" cy="6" r="2" stroke-width="2"/><circle cx="18" cy="18" r="2" stroke-width="2"/><path d="M8 12l8-6M8 12l8 6" stroke-width="2"/></svg>159      </div>160      <div class="clock-label">20:21</div>161    </div>162 163    <div class="title-row">164      <div class="badge">13</div>165      <div class="title-text">166        <div class="city">Orléans</div>167        <div class="subtitle">All Stations</div>168      </div>169    </div>170  </div>171 172  <!-- Scroll list of stations -->173  <div class="list">174    <div class="scroll">175      <div class="item">Collector Radio</div>176      <div class="item">Forum</div>177      <div class="item active">178        <div>Forum 2000</div>179        <div class="right">180          <svg class="heart-icon" viewBox="0 0 24 24"><path d="M12 20s-7-4.35-7-9a4 4 0 017-3 4 4 0 017 3c0 4.65-7 9-7 9z" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/></svg>181        </div>182      </div>183      <div class="item">Forum 70's</div>184      <div class="item">Forum 80's</div>185      <div class="item">Forum 90's</div>186      <div class="item">Hit a Jam</div>187      <div class="item">Radio Campus Orleans</div>188      <div class="item">Vibration</div>189      <div class="item">Vibration 2000</div>190      <div class="item">Vibration 80's</div>191      <div class="item">Vibration 90's</div>192      <div class="item">Vibration @Work</div>193    </div>194  </div>195 196  <!-- Bottom player and navigation -->197  <div class="player">198    <div class="grabber"></div>199    <div class="now-row">200      <div>201        <div class="now-title">Forum 2000</div>202        <div class="now-sub">MIKA - Love Today</div>203      </div>204      <div class="controls">205        <!-- sliders -->206        <svg viewBox="0 0 24 24">207          <path d="M6 4v16M12 4v16M18 4v16" stroke-width="2"/>208          <circle cx="6" cy="9" r="2" stroke-width="2"/>209          <circle cx="12" cy="14" r="2" stroke-width="2"/>210          <circle cx="18" cy="8" r="2" stroke-width="2"/>211        </svg>212        <!-- timer -->213        <svg viewBox="0 0 24 24">214          <circle cx="12" cy="12" r="9" stroke-width="2"/>215          <path d="M12 12l4-3" stroke-width="2" stroke-linecap="round"/>216        </svg>217        <!-- stop -->218        <svg viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="12" stroke-width="2"/></svg>219        <!-- play -->220        <svg viewBox="0 0 24 24"><path d="M8 5l12 7-12 7V5z" stroke-width="2" fill="none"/></svg>221      </div>222    </div>223 224    <div class="nav">225      <div class="nav-item active">226        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke-width="2"/></svg>227        <div class="label">Explore</div>228      </div>229      <div class="nav-item">230        <svg viewBox="0 0 24 24"><path d="M12 20s-7-4.35-7-9a4 4 0 017-3 4 4 0 017 3c0 4.65-7 9-7 9z" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/></svg>231        <div class="label">Favorites</div>232      </div>233      <div class="nav-item">234        <svg viewBox="0 0 24 24"><path d="M3 18l6-3 6 3 6-3V6l-6 3-6-3-6 3v12z" stroke-width="2" stroke-linejoin="round"/></svg>235        <div class="label">Browse</div>236      </div>237      <div class="nav-item">238        <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="6" stroke-width="2"/><path d="M15 15l6 6" stroke-width="2" stroke-linecap="round"/></svg>239        <div class="label">Search</div>240      </div>241      <div class="nav-item">242        <svg viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h16" stroke-width="2" stroke-linecap="round"/></svg>243        <div class="label">Settings</div>244      </div>245    </div>246 247    <div class="home-indicator"></div>248  </div>249</div>250</body>251</html>