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>Audiomack Ads Modal UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;13    color: #fff;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #000;21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    width: 1080px;29    height: 120px;30    padding: 0 40px;31    box-sizing: border-box;32    display: flex;33    align-items: center;34    justify-content: space-between;35    color: #fff;36    background: rgba(0,0,0,0.85);37    z-index: 40;38  }39  .status-left {40    font-size: 44px;41    font-weight: 600;42    letter-spacing: 0.5px;43  }44  .status-right {45    display: flex;46    align-items: center;47    gap: 24px;48  }49  .status-dot {50    width: 12px;51    height: 12px;52    background: #bbb;53    border-radius: 50%;54    opacity: 0.8;55  }56 57  /* Background content (dimmed by backdrop) */58  .album-art {59    position: absolute;60    top: 360px;61    left: 150px;62    width: 780px;63    height: 780px;64    background: #E0E0E0;65    border: 1px solid #BDBDBD;66    display: flex;67    align-items: center;68    justify-content: center;69    color: #757575;70    font-size: 40px;71    font-weight: 600;72    z-index: 0;73  }74 75  /* Backdrop overlay */76  .backdrop {77    position: absolute;78    inset: 0;79    background: rgba(0,0,0,0.65);80    z-index: 10;81  }82 83  /* Modal card */84  .modal-card {85    position: absolute;86    left: 70px;87    top: 700px;88    width: 940px;89    background: #2b2b2b;90    border-radius: 28px;91    box-shadow: 0 30px 60px rgba(0,0,0,0.6);92    padding: 64px;93    box-sizing: border-box;94    z-index: 20;95  }96  .modal-title {97    font-size: 72px;98    font-weight: 700;99    margin: 0 0 24px 0;100    color: #ffffff;101  }102  .modal-desc {103    font-size: 36px;104    line-height: 1.55;105    color: #dcdcdc;106    margin-bottom: 36px;107  }108  .benefits {109    list-style: none;110    padding: 0;111    margin: 0 0 48px 0;112  }113  .benefits li {114    display: flex;115    align-items: center;116    font-size: 36px;117    color: #e6e6e6;118    margin: 18px 0;119  }120  .benefits .dot {121    width: 12px;122    height: 12px;123    background: #FFB300;124    border-radius: 50%;125    margin-right: 18px;126    flex-shrink: 0;127  }128  .benefits .emoji {129    margin-right: 14px;130    font-size: 36px;131  }132  .upgrade-line {133    font-size: 40px;134    font-weight: 700;135    color: #ffffff;136    line-height: 1.4;137    margin-bottom: 36px;138    text-align: left;139  }140  .primary-btn {141    display: block;142    width: 812px;143    height: 144px;144    margin: 0 auto 24px auto;145    border: none;146    border-radius: 72px;147    background: #FFA600;148    color: #1a1a1a;149    font-size: 42px;150    font-weight: 800;151    letter-spacing: 0.3px;152    cursor: pointer;153    box-shadow: inset 0 -8px 0 rgba(0,0,0,0.15);154  }155  .secondary-link {156    text-align: center;157    font-size: 34px;158    color: #bdbdbd;159  }160 161  /* Close X outside the card */162  .close-x {163    position: absolute;164    right: 60px;165    top: 720px;166    z-index: 30;167    font-size: 88px;168    color: #ffffff;169    line-height: 1;170    user-select: none;171  }172 173  /* Bottom ad banner (behind backdrop) */174  .bottom-ad {175    position: absolute;176    left: 0;177    bottom: 160px;178    width: 1080px;179    height: 180px;180    background: #121212;181    border-top: 1px solid #333;182    display: flex;183    align-items: center;184    padding: 0 28px;185    box-sizing: border-box;186    z-index: 1;187    gap: 24px;188  }189  .ad-img {190    width: 160px;191    height: 140px;192    background: #E0E0E0;193    border: 1px solid #BDBDBD;194    color: #757575;195    display: flex;196    align-items: center;197    justify-content: center;198    font-size: 28px;199  }200  .ad-text {201    font-size: 36px;202    color: #f5f5f5;203    flex: 1;204  }205  .ad-btn {206    background: #FFD54F;207    color: #111;208    font-weight: 800;209    font-size: 34px;210    padding: 26px 36px;211    border-radius: 999px;212  }213  .ad-icon {214    width: 100px;215    height: 100px;216    background: #E0E0E0;217    border: 1px solid #BDBDBD;218    color: #757575;219    display: flex;220    align-items: center;221    justify-content: center;222    font-size: 22px;223    border-radius: 22px;224  }225 226  /* Home indicator */227  .home-indicator {228    position: absolute;229    bottom: 60px;230    left: 50%;231    transform: translateX(-50%);232    width: 300px;233    height: 12px;234    background: #ffffff;235    opacity: 0.85;236    border-radius: 6px;237    z-index: 50;238  }239</style>240</head>241<body>242<div id="render-target">243 244  <!-- Status bar -->245  <div class="status-bar">246    <div class="status-left">8:28</div>247    <div class="status-right">248      <!-- simple inline icons -->249      <svg width="42" height="24" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">250        <path d="M2 6c5-4 15-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>251        <path d="M5 9c4-3 10-3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>252        <path d="M9 12c2-2 4-2 6 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>253        <circle cx="12" cy="14" r="1.5" fill="#fff"/>254      </svg>255      <div class="status-dot"></div>256      <svg width="40" height="20" viewBox="0 0 28 14" fill="none" xmlns="http://www.w3.org/2000/svg">257        <rect x="1" y="2" width="22" height="10" rx="2" stroke="#fff" stroke-width="2"/>258        <rect x="24" y="5" width="3" height="4" fill="#fff"/>259      </svg>260    </div>261  </div>262 263  <!-- Background album art -->264  <div class="album-art">[IMG: Album Art]</div>265 266  <!-- Backdrop -->267  <div class="backdrop"></div>268 269  <!-- Close X -->270  <div class="close-x">×</div>271 272  <!-- Modal Card -->273  <div class="modal-card">274    <div class="modal-title">Ads</div>275    <div class="modal-desc">276      Streaming on Audiomack is completely free of charge thanks to ads, which we use to:277    </div>278    <ul class="benefits">279      <li><span class="dot"></span><span class="emoji">💰</span> Pay artists</li>280      <li><span class="dot"></span><span class="emoji">🛠️</span> Build new features</li>281      <li><span class="dot"></span><span class="emoji">🏃</span> Keep Audiomack running</li>282    </ul>283    <div class="upgrade-line">If you'd prefer to use Audiomack without ads, get Audiomack+</div>284    <button class="primary-btn">Try Audiomack+ for FREE</button>285    <div class="secondary-link">Continue with ads</div>286  </div>287 288  <!-- Bottom ad banner (dimmed behind backdrop) -->289  <div class="bottom-ad">290    <div class="ad-img">[IMG: App Ad Banner]</div>291    <div class="ad-text">Start chatting now!</div>292    <div class="ad-btn">OPEN</div>293    <div class="ad-icon">[Icon]</div>294  </div>295 296  <!-- Home indicator -->297  <div class="home-indicator"></div>298 299</div>300</body>301</html>