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>Strava Premium Promo</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13    color: #fff;14  }15 16  /* Root render target */17  #render-target {18    width: 1080px;19    height: 2400px;20    position: relative;21    overflow: hidden;22    background: #000;23  }24 25  /* Status bar */26  .status-bar {27    position: absolute;28    top: 0;29    left: 0;30    width: 1080px;31    height: 120px;32    background: linear-gradient(to bottom, rgba(120,120,120,0.9), rgba(120,120,120,0.65));33    display: flex;34    align-items: center;35    justify-content: space-between;36    padding: 0 36px;37    box-sizing: border-box;38  }39  .status-left {40    display: flex;41    align-items: center;42    gap: 16px;43  }44  .time {45    font-size: 36px;46    font-weight: 600;47    letter-spacing: 0.5px;48    color: #fff;49  }50  .status-right {51    display: flex;52    align-items: center;53    gap: 18px;54  }55  .status-icon svg {56    display: block;57  }58 59  /* Hero image placeholder */60  .hero {61    position: relative;62    width: 1080px;63    height: 1250px;64    margin-top: 0;65  }66  .hero .img-ph {67    position: absolute;68    inset: 0;69    background: #E0E0E0;70    border: 1px solid #BDBDBD;71    display: flex;72    align-items: center;73    justify-content: center;74    color: #757575;75    font-size: 30px;76    letter-spacing: 0.2px;77    text-align: center;78    padding: 0 40px;79    box-sizing: border-box;80  }81  .hero::after {82    content: "";83    position: absolute;84    left: 0;85    right: 0;86    bottom: -1px;87    height: 520px;88    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 35%, rgba(0,0,0,0.9) 75%, #000 100%);89    pointer-events: none;90  }91 92  /* Close button */93  .close-btn {94    position: absolute;95    top: 190px;96    left: 64px;97    width: 112px;98    height: 112px;99  }100  .close-btn svg {101    width: 112px;102    height: 112px;103  }104 105  /* Content section */106  .content {107    position: absolute;108    left: 0;109    top: 1180px;110    width: 100%;111    background: #000;112    padding: 40px 40px 160px;113    box-sizing: border-box;114    text-align: center;115  }116  .title {117    font-size: 64px;118    font-weight: 800;119    line-height: 1.15;120    margin: 40px 20px 22px;121    letter-spacing: -0.5px;122  }123  .subtitle {124    font-size: 38px;125    line-height: 1.45;126    color: rgba(255,255,255,0.9);127    max-width: 900px;128    margin: 0 auto 64px;129  }130 131  /* Features */132  .features {133    display: flex;134    justify-content: center;135    gap: 120px;136    margin: 40px auto 80px;137  }138  .feature {139    width: 260px;140    text-align: center;141  }142  .feature .icon {143    width: 132px;144    height: 132px;145    margin: 0 auto 22px;146    border-radius: 28px;147    overflow: hidden;148  }149  .feature .label {150    font-size: 30px;151    line-height: 1.25;152    color: #A3A3A3;153  }154 155  /* CTA Button */156  .cta {157    width: 100%;158    display: flex;159    justify-content: center;160  }161  .join-btn {162    width: 1000px;163    height: 130px;164    background: #F05A28; /* Strava-like orange */165    color: #fff;166    border: none;167    border-radius: 22px;168    font-size: 44px;169    font-weight: 700;170    letter-spacing: 0.3px;171    cursor: pointer;172    box-shadow: 0 6px 0 rgba(0,0,0,0.25);173  }174 175  /* Student link */176  .student {177    margin-top: 28px;178    display: flex;179    gap: 18px;180    align-items: center;181    justify-content: center;182    color: #CFCFCF;183  }184  .student a {185    color: #CFCFCF;186    text-decoration: underline;187    font-size: 32px;188  }189  .student svg {190    width: 44px;191    height: 44px;192  }193 194  /* Home indicator */195  .home-indicator {196    position: absolute;197    bottom: 22px;198    left: 50%;199    transform: translateX(-50%);200    width: 260px;201    height: 10px;202    border-radius: 8px;203    background: rgba(240,240,240,0.9);204  }205 206  /* Small tweaks for visual balance */207  .muted {208    opacity: 0.9;209  }210</style>211</head>212<body>213  <div id="render-target">214    <!-- Status Bar -->215    <div class="status-bar">216      <div class="status-left">217        <div class="time">8:34</div>218        <div class="status-icon" aria-label="download">219          <svg width="28" height="28" viewBox="0 0 24 24" fill="none">220            <path d="M12 3v10" stroke="#fff" stroke-width="2" stroke-linecap="round"/>221            <path d="M8 10l4 4 4-4" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>222            <rect x="4" y="18" width="16" height="2" fill="#fff"/>223          </svg>224        </div>225      </div>226      <div class="status-right">227        <div class="status-icon" aria-label="wifi">228          <svg width="32" height="32" viewBox="0 0 24 24" fill="none">229            <path d="M3 8c5-4 13-4 18 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>230            <path d="M6 12c3-3 9-3 12 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>231            <path d="M9.5 16.2c1.7-1.6 3.3-1.6 5 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>232            <circle cx="12" cy="19" r="1.5" fill="#fff"/>233          </svg>234        </div>235        <div class="status-icon" aria-label="battery">236          <svg width="46" height="32" viewBox="0 0 30 16" fill="none">237            <rect x="1" y="3" width="24" height="10" rx="2" stroke="#fff" stroke-width="2"/>238            <rect x="26" y="6" width="3" height="4" rx="1" fill="#fff"/>239            <rect x="3" y="5" width="18" height="6" rx="1" fill="#fff"/>240          </svg>241        </div>242      </div>243    </div>244 245    <!-- Hero Image Placeholder -->246    <div class="hero">247      <div class="img-ph">248        [IMG: Runners on stairs with city skyline in grayscale]249      </div>250 251      <!-- Close button -->252      <div class="close-btn" aria-label="Close">253        <svg viewBox="0 0 100 100" fill="none">254          <circle cx="50" cy="50" r="46" stroke="#FFFFFF" stroke-width="4"/>255          <path d="M32 32 L68 68" stroke="#FFFFFF" stroke-width="6" stroke-linecap="round"/>256          <path d="M68 32 L32 68" stroke="#FFFFFF" stroke-width="6" stroke-linecap="round"/>257        </svg>258      </div>259    </div>260 261    <!-- Content -->262    <div class="content">263      <div class="title">Get the very best of Strava</div>264      <div class="subtitle">265        Unlock premium Strava features with a subscription!<br>266        Cancel any time.267      </div>268 269      <div class="features">270        <!-- Feature 1 -->271        <div class="feature">272          <div class="icon">273            <svg viewBox="0 0 120 120" width="132" height="132" xmlns="http://www.w3.org/2000/svg">274              <rect width="120" height="120" rx="28" fill="#0EA5E9"/>275              <path d="M28 58l32-18 32 18-32 18-32-18z" fill="#67C5F0"/>276              <path d="M28 76l32-18 32 18v10l-32 18-32-18V76z" fill="#0891B2"/>277              <path d="M36 70l24-13 24 13" stroke="#E0F2FE" stroke-width="4" stroke-linecap="round"/>278            </svg>279          </div>280          <div class="label">Find New<br>Challenges</div>281        </div>282 283        <!-- Feature 2 -->284        <div class="feature">285          <div class="icon">286            <svg viewBox="0 0 120 120" width="132" height="132" xmlns="http://www.w3.org/2000/svg">287              <rect width="120" height="120" rx="28" fill="#F05A28"/>288              <circle cx="60" cy="60" r="40" fill="#FF7A4A"/>289              <path d="M42 28v64M54 24v72M66 28v64M78 34v56" stroke="#7A1E08" stroke-width="6" stroke-linecap="round" opacity="0.55"/>290              <path d="M36 76c8-10 16-10 24 0s16 10 24 0" stroke="#FFE9E3" stroke-width="6" stroke-linecap="round"/>291            </svg>292          </div>293          <div class="label">Crush Your<br>Goals</div>294        </div>295 296        <!-- Feature 3 -->297        <div class="feature">298          <div class="icon">299            <svg viewBox="0 0 120 120" width="132" height="132" xmlns="http://www.w3.org/2000/svg">300              <rect width="120" height="120" rx="28" fill="#5B21B6"/>301              <circle cx="60" cy="60" r="40" fill="#7C3AED"/>302              <rect x="20" y="58" width="80" height="8" rx="4" fill="#2E1065"/>303              <path d="M24 62h12l8-10 10 18 10-12 10 8h22" stroke="#F8FAFC" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>304            </svg>305          </div>306          <div class="label">Gain Insight</div>307        </div>308      </div>309 310      <div class="cta">311        <button class="join-btn">Join Now</button>312      </div>313 314      <div class="student">315        <svg viewBox="0 0 24 24" fill="none">316          <path d="M2 9l10-4 10 4-10 4L2 9z" stroke="#CFCFCF" stroke-width="2" stroke-linejoin="round"/>317          <path d="M6 11v5c4 3 8 3 12 0v-5" stroke="#CFCFCF" stroke-width="2" stroke-linecap="round"/>318        </svg>319        <a href="#">Are you a student?</a>320      </div>321    </div>322 323    <!-- Home indicator -->324    <div class="home-indicator"></div>325  </div>326</body>327</html>