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>Stay connected prompt</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: #FFFFFF; color: #333333;13  }14 15  /* Status bar */16  .statusbar {17    position: absolute; top: 0; left: 0; right: 0;18    height: 120px;19    background: rgba(0,0,0,0.35);20    display: flex; align-items: center; padding: 0 36px;21    box-sizing: border-box;22  }23  .status-time {24    color: #fff; font-weight: 600; font-size: 44px;25  }26  .status-icons { margin-left: auto; display: flex; gap: 28px; align-items: center; }27 28  /* Decorative app preview */29  .hero-mock {30    position: absolute;31    top: 140px; right: -40px;32    width: 820px; height: 620px;33    background: #E0E0E0;34    border: 1px solid #BDBDBD;35    border-radius: 40px;36    box-shadow: 0 18px 40px rgba(0,0,0,0.15);37    display: flex; align-items: center; justify-content: center;38    color: #6B6B6B; font-size: 32px; letter-spacing: .2px;39    text-align: center;40  }41 42  /* Floating notification card */43  .notif-card {44    position: absolute;45    top: 480px; left: 40px;46    width: 760px;47    background: #FFFFFF;48    border-radius: 28px;49    box-shadow: 0 10px 28px rgba(0,0,0,0.12);50    padding: 32px 36px;51    box-sizing: border-box;52  }53  .notif-head {54    display: flex; align-items: center; gap: 12px; color: #6D6D6D; font-weight: 600; font-size: 28px; letter-spacing: .2px;55  }56  .notif-title {57    font-size: 36px; font-weight: 800; margin-top: 14px; color: #222;58  }59  .notif-body {60    font-size: 30px; color: #444; margin-top: 8px; line-height: 1.35;61  }62 63  /* Main copy */64  .content {65    position: absolute;66    top: 840px;67    left: 60px; right: 60px;68  }69  .headline {70    font-size: 72px; line-height: 1.08; font-weight: 800; color: #2E2E2E; letter-spacing: -0.5px;71    margin: 0 0 24px 0;72    max-width: 880px;73  }74  .subcopy {75    font-size: 34px; line-height: 1.55; color: #555; max-width: 900px;76  }77  .bullets {78    margin: 14px 0 0 28px; padding: 0;79    font-size: 34px; line-height: 1.55; color: #555;80  }81 82  /* CTA area */83  .cta-area {84    position: absolute; left: 0; right: 0; bottom: 120px;85    padding: 26px 36px 0 36px; box-sizing: border-box;86    background: #FFFFFF;87    box-shadow: 0 -6px 20px rgba(0,0,0,0.06);88  }89  .btn {90    height: 120px; border-radius: 18px; font-size: 40px; font-weight: 700; cursor: default;91    display: flex; align-items: center; justify-content: center;92  }93  .btn-primary {94    background: #F05A28; color: #fff; border: none;95  }96  .btn-outline {97    background: #fff; color: #F05A28; border: 4px solid #F05A28; margin-top: 22px;98  }99 100  /* Gesture bar (device) */101  .gesture-wrap {102    position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: #000;103    display: flex; align-items: center; justify-content: center;104  }105  .gesture-pill {106    width: 240px; height: 14px; background: #DDDDDD; border-radius: 10px;107  }108 109  /* Utility */110  .icon {111    width: 42px; height: 42px;112  }113  .icon-small {114    width: 34px; height: 34px;115  }116</style>117</head>118<body>119<div id="render-target">120 121  <!-- Status bar -->122  <div class="statusbar">123    <div class="status-time">8:33</div>124    <div class="status-icons">125      <!-- Wi-Fi -->126      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">127        <path d="M2 8c5-4 15-4 20 0" />128        <path d="M5 12c3-3 11-3 14 0" />129        <path d="M9 16c2-2 4-2 6 0" />130        <circle cx="12" cy="20" r="1.5" fill="#fff" stroke="none"/>131      </svg>132      <!-- Battery -->133      <svg class="icon" viewBox="0 0 28 16" fill="none">134        <rect x="1" y="3" width="22" height="10" rx="2" stroke="#fff" stroke-width="2"/>135        <rect x="3" y="5" width="18" height="6" rx="1" fill="#fff"/>136        <rect x="24" y="6" width="3" height="4" rx="1" fill="#fff"/>137      </svg>138    </div>139  </div>140 141  <!-- Decorative preview image -->142  <div class="hero-mock">[IMG: Mobile app feed screen]</div>143 144  <!-- Floating notification card -->145  <div class="notif-card">146    <div class="notif-head">147      <!-- Simple Strava-like mark -->148      <svg class="icon-small" viewBox="0 0 24 24" fill="#F05A28">149        <path d="M12 2l5 9h-3l-2-4-2 4H7l5-9z"/>150      </svg>151      <span>STRAVA • Now</span>152    </div>153    <div class="notif-title">Trending challenge among friends</div>154    <div class="notif-body">Peter Lee recently joined the Weekly Hiking Challenge.</div>155  </div>156 157  <!-- Main content -->158  <div class="content">159    <h1 class="headline">Stay connected to what motivates you</h1>160    <div class="subcopy">161      Select "Allow" to receive emails and notifications. You’ll get all the latest on:162      <ul class="bullets">163        <li>Your monthly stats</li>164        <li>New feature updates</li>165        <li>Stories from the community</li>166      </ul>167    </div>168  </div>169 170  <!-- CTA buttons -->171  <div class="cta-area">172    <div class="btn btn-primary">Allow</div>173    <div class="btn btn-outline">Not now</div>174  </div>175 176  <!-- Gesture bar -->177  <div class="gesture-wrap">178    <div class="gesture-pill"></div>179  </div>180</div>181</body>182</html>