GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Radioline UI - HTML Mock</title>5<style>6 body {7 margin: 0;8 padding: 0;9 background: transparent;10 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;11 }12 #render-target {13 width: 1080px;14 height: 2400px;15 position: relative;16 overflow: hidden;17 background: linear-gradient(180deg, #0e2b4b 0%, #0b2037 40%, #0a0f14 100%);18 color: #ffffff;19 }20 21 /* Status bar */22 .status-bar {23 height: 90px;24 padding: 0 40px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #e6eef8;29 font-weight: 600;30 font-size: 36px;31 opacity: 0.95;32 }33 .status-right {34 display: flex;35 gap: 24px;36 align-items: center;37 }38 .icon {39 width: 36px;40 height: 36px;41 }42 43 /* Top header */44 .top-bar {45 height: 150px;46 padding: 0 40px;47 display: flex;48 align-items: center;49 justify-content: space-between;50 }51 .brand {52 display: flex;53 align-items: center;54 gap: 24px;55 }56 .brand-logo {57 width: 70px;58 height: 70px;59 border-radius: 50%;60 background: radial-gradient(circle at 35% 35%, #59b7ff, #306ae6 60%, #173a85);61 box-shadow: 0 8px 30px rgba(0,0,0,0.35);62 }63 .brand-name {64 font-size: 56px;65 font-weight: 700;66 letter-spacing: 0.5px;67 }68 .round-btn {69 width: 74px;70 height: 74px;71 border-radius: 50%;72 background: rgba(255,255,255,0.08);73 display: flex;74 align-items: center;75 justify-content: center;76 border: 1px solid rgba(255,255,255,0.14);77 }78 79 /* Section headers */80 .section {81 padding: 20px 40px;82 }83 .section-header {84 display: flex;85 align-items: center;86 justify-content: space-between;87 margin-bottom: 24px;88 }89 .section-title {90 font-size: 64px;91 font-weight: 800;92 }93 .pill {94 font-size: 34px;95 padding: 18px 28px;96 border-radius: 16px;97 border: 1px solid rgba(255,255,255,0.25);98 color: #d9e6ff;99 background: rgba(255,255,255,0.06);100 }101 102 /* Grids */103 .grid {104 display: grid;105 grid-template-columns: repeat(4, 1fr);106 gap: 28px;107 }108 .card-square {109 height: 185px;110 border-radius: 26px;111 background: #E0E0E0;112 border: 1px solid #BDBDBD;113 display: flex;114 align-items: center;115 justify-content: center;116 color: #4f4f4f;117 font-weight: 600;118 text-align: center;119 padding: 16px;120 }121 122 /* Podcasts */123 .podcasts-grid {124 display: grid;125 grid-template-columns: repeat(3, 1fr);126 gap: 36px 28px;127 margin-top: 8px;128 }129 .podcast-card {130 display: flex;131 flex-direction: column;132 gap: 18px;133 }134 .podcast-thumb {135 width: 100%;136 height: 220px;137 border-radius: 26px;138 background: #E0E0E0;139 border: 1px solid #BDBDBD;140 display: flex;141 align-items: center;142 justify-content: center;143 color: #555;144 font-weight: 600;145 }146 .podcast-title {147 font-size: 36px;148 line-height: 1.2;149 color: #f0f4ff;150 }151 152 /* Music on air player */153 .player-section {154 padding: 32px 40px 20px;155 }156 .player-title {157 font-size: 64px;158 font-weight: 800;159 margin-bottom: 20px;160 }161 .player-bar {162 width: 100%;163 height: 170px;164 border-radius: 28px;165 background: linear-gradient(90deg, rgba(42,61,98,0.55), rgba(17,28,46,0.8));166 border: 1px solid rgba(255,255,255,0.15);167 display: flex;168 align-items: center;169 padding: 20px 28px;170 gap: 28px;171 }172 .album {173 width: 110px;174 height: 110px;175 border-radius: 16px;176 background: #E0E0E0;177 border: 1px solid #BDBDBD;178 display: flex;179 align-items: center;180 justify-content: center;181 color: #555;182 font-weight: 600;183 text-align: center;184 padding: 8px;185 flex-shrink: 0;186 }187 .track-info {188 flex: 1;189 font-size: 42px;190 font-weight: 600;191 }192 .player-actions {193 display: flex;194 align-items: center;195 gap: 26px;196 }197 .icon-heart, .icon-plus {198 width: 74px;199 height: 74px;200 border-radius: 50%;201 background: rgba(255,255,255,0.1);202 border: 1px solid rgba(255,255,255,0.18);203 display: flex;204 align-items: center;205 justify-content: center;206 }207 .icon-play {208 width: 110px;209 height: 110px;210 border-radius: 50%;211 background: rgba(255,255,255,0.15);212 border: 2px solid rgba(255,255,255,0.35);213 display: flex;214 align-items: center;215 justify-content: center;216 }217 .small-note {218 width: 74px;219 height: 74px;220 border-radius: 18px;221 background: rgba(255,255,255,0.1);222 border: 1px solid rgba(255,255,255,0.18);223 display: flex;224 align-items: center;225 justify-content: center;226 }227 228 /* Bottom nav */229 .bottom-nav {230 position: absolute;231 bottom: 0;232 left: 0;233 width: 100%;234 height: 160px;235 background: rgba(10,15,19,0.9);236 border-top: 1px solid rgba(255,255,255,0.12);237 display: flex;238 align-items: center;239 justify-content: space-around;240 }241 .nav-item {242 display: flex;243 flex-direction: column;244 align-items: center;245 color: #dfeaff;246 gap: 12px;247 }248 .nav-icon-wrap {249 width: 80px;250 height: 80px;251 border-radius: 24px;252 background: rgba(255,255,255,0.08);253 border: 1px solid rgba(255,255,255,0.15);254 display: flex;255 align-items: center;256 justify-content: center;257 }258 .nav-label {259 font-size: 32px;260 font-weight: 600;261 }262 263 /* Helpers */264 .muted {265 color: #bfcfea;266 }267</style>268</head>269<body>270<div id="render-target">271 272 <!-- Status bar -->273 <div class="status-bar">274 <div>9:21</div>275 <div class="status-right">276 <!-- Silent icon -->277 <svg class="icon" viewBox="0 0 24 24" fill="none">278 <path d="M3 9v6h4l5 4V5L7 9H3z" stroke="#e6eef8" stroke-width="2" />279 <path d="M19 5l-14 14" stroke="#e6eef8" stroke-width="2" />280 </svg>281 <!-- WiFi icon -->282 <svg class="icon" viewBox="0 0 24 24" fill="none">283 <path d="M2 9c5-5 15-5 20 0" stroke="#e6eef8" stroke-width="2" />284 <path d="M5 12c3-3 11-3 14 0" stroke="#e6eef8" stroke-width="2" />285 <path d="M8 15c2-2 6-2 8 0" stroke="#e6eef8" stroke-width="2" />286 <circle cx="12" cy="18" r="1.8" fill="#e6eef8" />287 </svg>288 <!-- Battery icon -->289 <svg class="icon" viewBox="0 0 26 24" fill="none">290 <rect x="2" y="6" width="18" height="12" rx="2" stroke="#e6eef8" stroke-width="2"></rect>291 <rect x="4" y="8" width="12" height="8" rx="1.5" fill="#e6eef8"></rect>292 <rect x="21" y="9" width="3" height="6" rx="1" fill="#e6eef8"></rect>293 </svg>294 </div>295 </div>296 297 <!-- Top bar with settings, brand and search -->298 <div class="top-bar">299 <div class="round-btn" aria-label="Settings">300 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">301 <circle cx="12" cy="12" r="3.2" stroke="#cfe0ff" stroke-width="2"></circle>302 <path d="M12 2v3M12 19v3M4.6 4.6l2.1 2.1M17.3 17.3l2.1 2.1M2 12h3M19 12h3M4.6 19.4l2.1-2.1M17.3 6.7l2.1-2.1" stroke="#cfe0ff" stroke-width="2" stroke-linecap="round"></path>303 </svg>304 </div>305 <div class="brand">306 <div class="brand-logo"></div>307 <div class="brand-name">Radioline</div>308 </div>309 <div class="round-btn" aria-label="Search">310 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">311 <circle cx="11" cy="11" r="7" stroke="#cfe0ff" stroke-width="2"></circle>312 <path d="M21 21l-4.5-4.5" stroke="#cfe0ff" stroke-width="2" stroke-linecap="round"></path>313 </svg>314 </div>315 </div>316 317 <!-- Stations -->318 <div class="section">319 <div class="section-header">320 <div class="section-title">Stations</div>321 <div class="pill">DISCOVER MORE</div>322 </div>323 324 <div class="grid">325 <div class="card-square">[IMG: NPR Logo]</div>326 <div class="card-square">[IMG: WTOP Logo]</div>327 <div class="card-square">[IMG: WCBS 880 Logo]</div>328 <div class="card-square">[IMG: 104.3 MYfm Logo]</div>329 330 <div class="card-square">[IMG: Fox News Radio Logo]</div>331 <div class="card-square">[IMG: 1010 WINS Logo]</div>332 <div class="card-square">[IMG: Z100 New York Logo]</div>333 <div class="card-square">[IMG: KFI AM 640 Logo]</div>334 335 <div class="card-square">[IMG: CNN Logo]</div>336 <div class="card-square">[IMG: 102.7 KIIS FM Logo]</div>337 <div class="card-square">[IMG: WFAN Sports Radio Logo]</div>338 <div class="card-square">[IMG: fm97 WLAN Logo]</div>339 </div>340 </div>341 342 <!-- Podcasts -->343 <div class="section">344 <div class="section-header">345 <div class="section-title">Podcasts</div>346 <div class="pill">DISCOVER MORE</div>347 </div>348 349 <div class="podcasts-grid">350 <div class="podcast-card">351 <div class="podcast-thumb">[IMG: Mortal Sin Cover]</div>352 <div class="podcast-title">Mortal Sin</div>353 </div>354 <div class="podcast-card">355 <div class="podcast-thumb">[IMG: On Musk Cover]</div>356 <div class="podcast-title">On Musk with Walter Isaacson</div>357 </div>358 <div class="podcast-card">359 <div class="podcast-thumb">[IMG: New Heights Cover]</div>360 <div class="podcast-title">New Heights</div>361 </div>362 363 <div class="podcast-card">364 <div class="podcast-thumb">[IMG: Who Shat on the Floor Cover]</div>365 <div class="podcast-title">Who shat on the floor at my...</div>366 </div>367 <div class="podcast-card">368 <div class="podcast-thumb">[IMG: Tucker Carlson Podcast Cover]</div>369 <div class="podcast-title">The Tucker Carlson Podcast</div>370 </div>371 <div class="podcast-card">372 <div class="podcast-thumb">[IMG: Musiclane Stories Cover]</div>373 <div class="podcast-title">Musiclane Stories</div>374 </div>375 </div>376 </div>377 378 <!-- Music on air -->379 <div class="player-section">380 <div class="player-title">Music on air</div>381 <div class="player-bar">382 <div class="album">[IMG: Latina Stereo]</div>383 <div class="track-info">Latina Stereo</div>384 <div class="player-actions">385 <div class="icon-heart">386 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">387 <path d="M12 21s-7-4.7-9-8.3C1.4 9.8 3.4 7 6.5 7c2 0 3.1 1 3.5 2 0.4-1 1.5-2 3.5-2 3.1 0 5.1 2.8 3.5 5.7C19 16.3 12 21 12 21z" stroke="#ffffff" stroke-width="2" fill="none"/>388 </svg>389 </div>390 <div class="icon-play">391 <svg width="60" height="60" viewBox="0 0 24 24" fill="none">392 <path d="M8 5v14l11-7-11-7z" fill="#ffffff"></path>393 </svg>394 </div>395 <div class="small-note">396 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">397 <path d="M9 3v12.5a3.5 3.5 0 1 1-2-3.2V7h10v8.5a3.5 3.5 0 1 1-2-3.2V5H9z" stroke="#ffffff" stroke-width="2" fill="none"></path>398 </svg>399 </div>400 </div>401 </div>402 </div>403 404 <!-- Bottom navigation -->405 <div class="bottom-nav">406 <div class="nav-item">407 <div class="nav-icon-wrap">408 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">409 <path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1v-9z" stroke="#dfeaff" stroke-width="2"></path>410 </svg>411 </div>412 <div class="nav-label">Home</div>413 </div>414 <div class="nav-item">415 <div class="nav-icon-wrap">416 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">417 <path d="M12 21s-7-4.7-9-8.3C1.4 9.8 3.4 7 6.5 7c2 0 3.1 1 3.5 2 0.4-1 1.5-2 3.5-2 3.1 0 5.1 2.8 3.5 5.7C19 16.3 12 21 12 21z" stroke="#dfeaff" stroke-width="2" fill="none"/>418 </svg>419 </div>420 <div class="nav-label">Favorites</div>421 </div>422 <div class="nav-item">423 <div class="nav-icon-wrap">424 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">425 <circle cx="12" cy="12" r="8" stroke="#dfeaff" stroke-width="2"></circle>426 <path d="M12 7v5l4 2" stroke="#dfeaff" stroke-width="2"></path>427 </svg>428 </div>429 <div class="nav-label">Discover</div>430 </div>431 <div class="nav-item">432 <div class="nav-icon-wrap">433 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">434 <path d="M20 16a4 4 0 0 0-3.5-3.9 6 6 0 0 0-11.5 1A3.5 3.5 0 0 0 5 20h12a3 3 0 0 0 3-4z" stroke="#dfeaff" stroke-width="2"/>435 <path d="M12 14v5M9.5 16.5L12 19l2.5-2.5" stroke="#dfeaff" stroke-width="2" stroke-linecap="round"/>436 </svg>437 </div>438 <div class="nav-label">Offline</div>439 </div>440 </div>441 442</div>443</body>444</html>