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>Windy PRO - Subscription</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #123a53;15    border-radius: 28px;16    box-shadow: 0 20px 60px rgba(0,0,0,0.35);17    color: #fff;18  }19 20  /* Fullscreen photo placeholder */21  .bg-photo {22    position: absolute; inset: 0;23    background: #E0E0E0;24    border: 1px solid #BDBDBD;25    display: flex; align-items: center; justify-content: center;26    color: #757575; font-size: 28px; letter-spacing: 0.4px;27    z-index: 0;28  }29  .overlay {30    position: absolute; inset: 0; z-index: 1;31    background: linear-gradient(180deg,32      rgba(10,20,30,0.25) 0%,33      rgba(10,40,60,0.35) 20%,34      rgba(8,54,80,0.65) 55%,35      rgba(5,45,70,0.85) 75%,36      rgba(1,30,50,0.95) 100%);37  }38 39  /* Status bar */40  .status {41    position: absolute; top: 24px; left: 40px; right: 40px; z-index: 2;42    display: flex; align-items: center; justify-content: space-between;43    font-size: 32px; opacity: 0.95;44  }45  .status-icons { display: flex; gap: 22px; align-items: center; }46  .icon-wifi, .icon-battery { width: 36px; height: 24px; display: inline-block; }47  .icon-wifi svg, .icon-battery svg { width: 100%; height: 100%; }48  .signal-dot { width: 8px; height: 8px; background: #fff; border-radius: 50%; opacity: 0.8; }49 50  /* Close button */51  .close-btn {52    position: absolute; top: 150px; left: 48px; z-index: 2;53    width: 96px; height: 96px; border: 3px solid rgba(255,255,255,0.9);54    border-radius: 22px; display: flex; align-items: center; justify-content: center;55    backdrop-filter: blur(2px);56  }57  .close-btn svg { width: 44px; height: 44px; stroke: #fff; stroke-width: 8; }58 59  /* Hero */60  .hero {61    position: absolute; top: 320px; left: 60px; right: 60px; z-index: 2;62    text-align: center;63  }64  .brand {65    font-size: 74px; font-weight: 800; letter-spacing: 0.5px;66  }67  .pro-pill {68    display: inline-block; margin-left: 16px;69    background: #f7c34b; color: #2b2b2b; font-weight: 800;70    padding: 10px 24px; border-radius: 24px; font-size: 40px; vertical-align: middle;71  }72  .hero h1 {73    margin: 28px auto 0;74    width: 860px;75    font-size: 64px; font-weight: 800; line-height: 1.22;76    text-shadow: 0 2px 6px rgba(0,0,0,0.35);77  }78 79  /* Plans */80  .plans { position: absolute; top: 1280px; left: 60px; right: 60px; z-index: 2; display: grid; gap: 46px; }81  .card {82    background: rgba(48,93,118,0.75);83    border-radius: 28px;84    padding: 36px 40px;85    color: #e9f3f7;86    box-shadow: 0 10px 24px rgba(0,0,0,0.25);87  }88  .card-row { display: flex; justify-content: space-between; align-items: center; }89  .title { font-size: 40px; font-weight: 800; }90  .sub { font-size: 32px; opacity: 0.8; margin-top: 12px; }91  .price { font-size: 38px; font-weight: 800; text-align: right; }92  .month { font-size: 30px; opacity: 0.8; margin-top: 12px; text-align: right; }93 94  .trial { border: 4px solid #f7c34b; }95  .trial .title, .trial .price { color: #f7c34b; }96 97  .offer {98    background: rgba(40,78,98,0.8);99    position: relative;100  }101  .ribbon {102    position: absolute; left: 14px; top: -22px;103    height: 72px; padding: 0 30px;104    background: #c8232a; color: #fff; font-weight: 900; font-size: 34px;105    display: flex; align-items: center; border-radius: 12px;106    box-shadow: 0 8px 18px rgba(0,0,0,0.35);107    clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 50%, calc(100% - 34px) 100%, 0 100%, 0 0);108  }109 110  .lifetime { background: rgba(40,78,98,0.65); }111 112  /* CTA */113  .cta {114    position: absolute; bottom: 360px; left: 60px; right: 60px; z-index: 2;115    background: #f7c34b; color: #1a2730; font-weight: 800; font-size: 44px;116    height: 140px; border-radius: 28px; display: flex; align-items: center; justify-content: center;117    box-shadow: 0 10px 24px rgba(0,0,0,0.3);118  }119 120  .footnote {121    position: absolute; bottom: 240px; left: 0; right: 0; text-align: center; z-index: 2;122    color: #d6e5ee; font-size: 32px; line-height: 1.6; opacity: 0.9;123  }124 125  .home-indicator {126    position: absolute; bottom: 180px; left: 50%; transform: translateX(-50%);127    width: 320px; height: 14px; background: #eaeaea; border-radius: 8px; opacity: 0.9;128  }129</style>130</head>131<body>132<div id="render-target">133  <div class="bg-photo">[IMG: Hot air balloons background]</div>134  <div class="overlay"></div>135 136  <div class="status">137    <div style="font-weight:700;">10:09</div>138    <div class="status-icons">139      <div class="icon-wifi">140        <svg viewBox="0 0 24 24" fill="none">141          <path d="M2 8c6-5 14-5 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>142          <path d="M6 12c4-3 8-3 12 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>143          <circle cx="12" cy="17" r="2" fill="#fff"/>144        </svg>145      </div>146      <div class="signal-dot"></div>147      <div class="icon-battery">148        <svg viewBox="0 0 28 18" fill="none">149          <rect x="1" y="3" width="22" height="12" rx="2" stroke="#fff" stroke-width="2"/>150          <rect x="3" y="5" width="12" height="8" rx="1" fill="#fff"/>151          <rect x="24" y="7" width="3" height="4" rx="1" fill="#fff"/>152        </svg>153      </div>154    </div>155  </div>156 157  <div class="close-btn">158    <svg viewBox="0 0 24 24" fill="none">159      <path d="M4 4 L20 20 M20 4 L4 20" />160    </svg>161  </div>162 163  <div class="hero">164    <div class="brand">Windy <span class="pro-pill">PRO</span></div>165    <h1>Get access to all weather tools</h1>166  </div>167 168  <div class="plans">169    <div class="card trial">170      <div class="card-row">171        <div>172          <div class="title">7-day trial</div>173          <div class="sub">Try before you buy</div>174        </div>175        <div>176          <div class="price">then ₹3,900.00/year</div>177          <div class="month">₹325.00/month</div>178        </div>179      </div>180    </div>181 182    <div class="card offer">183      <div class="ribbon">25% OFF</div>184      <div class="card-row">185        <div>186          <div class="title">Special offer</div>187        </div>188        <div>189          <div class="price">₹2,900.00/year</div>190          <div class="month">₹241.67/month</div>191        </div>192      </div>193    </div>194 195    <div class="card lifetime">196      <div class="card-row">197        <div>198          <div class="title">Lifetime</div>199          <div class="sub">Pay only once</div>200        </div>201        <div>202          <div class="price">₹9,700.00</div>203        </div>204      </div>205    </div>206  </div>207 208  <div class="cta">Start my free week</div>209 210  <div class="footnote">211    Auto-renews automatically<br/>Cancel anytime.212  </div>213 214  <div class="home-indicator"></div>215</div>216</body>217</html>