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>Wild pansy</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #222; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15  }16 17  .screen-padding { padding: 64px 64px 24px 64px; }18 19  /* Close button */20  .close-wrap {21    position: absolute;22    top: 48px;23    left: 48px;24    width: 120px;25    height: 120px;26    background: #ECEFF5;27    border-radius: 60px;28    display: flex;29    align-items: center;30    justify-content: center;31  }32  .close-wrap svg { width: 48px; height: 48px; stroke: #9AA3B2; }33 34  /* Titles */35  .title { margin-top: 180px; font-size: 88px; line-height: 1.05; font-weight: 800; letter-spacing: -0.5px; }36  .subtitle { margin-top: 12px; font-size: 42px; color: #8D97A8; }37 38  /* Promo banner */39  .promo {40    margin-top: 42px;41    background: linear-gradient(90deg, #FF7F50 0%, #FF6A3A 60%, #FF7B5A 100%);42    border-radius: 36px;43    color: #fff;44    display: flex;45    align-items: center;46    padding: 36px;47    height: 220px;48    box-sizing: border-box;49  }50  .promo .icon {51    width: 160px;52    height: 120px;53    background: #F2F4F8;54    border-radius: 24px;55    margin-right: 32px;56    position: relative;57    display: flex; align-items: center; justify-content: center;58  }59  .promo .icon svg { width: 120px; height: 90px; }60  .promo .badge {61    position: absolute;62    right: -6px; top: -8px;63    width: 52px; height: 52px; border-radius: 26px;64    background: #6C5CE7; color: #fff; font-size: 28px; display: flex; align-items: center; justify-content: center; font-weight: 700;65    box-shadow: 0 4px 8px rgba(0,0,0,0.15);66  }67  .promo .text h3 { margin: 0; font-size: 48px; font-weight: 800; }68  .promo .text p { margin: 8px 0 0 0; font-size: 36px; opacity: 0.95; }69 70  /* Photo grid */71  .photo-grid {72    margin-top: 36px;73    display: grid;74    grid-template-columns: 1.4fr 1fr;75    grid-gap: 24px;76  }77  .img {78    background: #E0E0E0;79    border: 1px solid #BDBDBD;80    border-radius: 28px;81    color: #757575;82    display: flex; align-items: center; justify-content: center;83    text-align: center;84    font-size: 34px;85  }86  .img.large { height: 740px; }87  .right-col { display: grid; grid-template-rows: 1fr 1fr; grid-gap: 24px; }88  .img.small { height: 358px; }89 90  /* Section heading */91  .section-title {92    margin-top: 54px;93    font-size: 64px;94    font-weight: 800;95    color: #2D3138;96  }97 98  /* Info features */99  .features {100    margin-top: 18px;101    display: grid;102    grid-template-columns: 1fr 1fr;103    grid-gap: 28px 28px;104  }105  .feature {106    display: flex;107    align-items: center;108    padding: 24px;109    border-radius: 28px;110    background: #FAFBFD;111  }112  .feature .ico-wrap {113    width: 120px; height: 120px; border-radius: 28px; background: #F0F3F8;114    display: flex; align-items: center; justify-content: center; margin-right: 24px;115  }116  .feature:nth-child(1) .ico-wrap { background: #FFF5B8; }117  .feature:nth-child(2) .ico-wrap { background: #FFF1D6; }118  .feature:nth-child(3) .ico-wrap { background: #EAF6FF; }119  .feature:nth-child(4) .ico-wrap { background: #E8F7FF; }120  .feature .labels { display: flex; flex-direction: column; }121  .feature .labels .k { font-size: 36px; color: #8D97A8; }122  .feature .labels .v { font-size: 44px; font-weight: 700; margin-top: 8px; color: #222; }123 124  /* CTA row */125  .cta-row {126    margin-top: 48px;127    display: flex;128    align-items: center;129  }130  .btn-primary {131    flex: 1;132    height: 132px;133    border-radius: 66px;134    background: #10B981;135    color: #fff;136    font-size: 46px;137    font-weight: 700;138    display: flex; align-items: center; justify-content: center;139  }140  .btn-heart {141    margin-left: 28px;142    width: 132px; height: 132px; border-radius: 66px;143    border: 6px solid #F08A7E;144    background: #fff;145    display: flex; align-items: center; justify-content: center;146  }147  .btn-heart svg { width: 52px; height: 52px; fill: none; stroke: #F08A7E; stroke-width: 7px; }148 149  /* Paragraph */150  .paragraph {151    margin-top: 36px;152    font-size: 36px;153    line-height: 1.55;154    color: #3D4451;155  }156 157  /* Home indicator */158  .home-indicator {159    position: absolute;160    bottom: 18px; left: 50%;161    transform: translateX(-50%);162    width: 360px; height: 10px; border-radius: 6px; background: #000;163    opacity: 0.92;164  }165</style>166</head>167<body>168<div id="render-target">169  <!-- Close button -->170  <div class="close-wrap">171    <svg viewBox="0 0 24 24" fill="none" stroke-width="2">172      <line x1="6" y1="6" x2="18" y2="18" />173      <line x1="18" y1="6" x2="6" y2="18" />174    </svg>175  </div>176 177  <div class="screen-padding">178    <div class="title">Wild pansy</div>179    <div class="subtitle">Viola tricolor</div>180 181    <div class="promo">182      <div class="icon">183        <svg viewBox="0 0 64 40">184          <rect x="2" y="6" width="60" height="28" rx="4" fill="#E7EBF3"></rect>185          <path d="M4 8 L32 26 L60 8" fill="none" stroke="#C8D0DF" stroke-width="4"/>186        </svg>187        <div class="badge">1</div>188      </div>189      <div class="text">190        <h3>Free premium available</h3>191        <p>Tap to claim</p>192      </div>193    </div>194 195    <div class="photo-grid">196      <div class="img large">[IMG: Wild pansy close-up]</div>197      <div class="right-col">198        <div class="img small">[IMG: Wild pansy cluster]</div>199        <div class="img small">[IMG: Violet flowers]</div>200      </div>201    </div>202 203    <div class="section-title">General information</div>204 205    <div class="features">206      <div class="feature">207        <div class="ico-wrap">208          <svg width="72" height="72" viewBox="0 0 72 72">209            <path d="M8 60 C14 50, 22 44, 30 60 L30 60 M24 60 C30 48, 40 44, 46 60 M38 60 C44 50, 54 48, 60 60" stroke="#283618" stroke-width="6" fill="none"/>210          </svg>211        </div>212        <div class="labels">213          <div class="k">Invasive</div>214          <div class="v">Weed</div>215        </div>216      </div>217 218      <div class="feature">219        <div class="ico-wrap">220          <svg width="72" height="72" viewBox="0 0 72 72">221            <circle cx="36" cy="36" r="14" fill="#FDBD3F"></circle>222            <g stroke="#FDBD3F" stroke-width="6">223              <line x1="36" y1="6" x2="36" y2="18"></line>224              <line x1="36" y1="54" x2="36" y2="66"></line>225              <line x1="6" y1="36" x2="18" y2="36"></line>226              <line x1="54" y1="36" x2="66" y2="36"></line>227              <line x1="14" y1="14" x2="22" y2="22"></line>228              <line x1="50" y1="50" x2="58" y2="58"></line>229              <line x1="50" y1="22" x2="58" y2="14"></line>230              <line x1="14" y1="58" x2="22" y2="50"></line>231            </g>232          </svg>233        </div>234        <div class="labels">235          <div class="k">Lighting</div>236          <div class="v">Full sun</div>237        </div>238      </div>239 240      <div class="feature">241        <div class="ico-wrap">242          <svg width="72" height="72" viewBox="0 0 72 72">243            <path d="M36 12 C28 20, 16 30, 16 42 A20 20 0 0 0 56 42 C56 30 44 20 36 12 Z" fill="#9DD5F6" stroke="#7EC8EC" stroke-width="4"/>244          </svg>245        </div>246        <div class="labels">247          <div class="k">Humidity</div>248          <div class="v">High</div>249        </div>250      </div>251 252      <div class="feature">253        <div class="ico-wrap">254          <svg width="72" height="72" viewBox="0 0 72 72">255            <g stroke="#6CC3E0" stroke-width="6" fill="none">256              <line x1="36" y1="8" x2="36" y2="64"></line>257              <line x1="12" y1="20" x2="60" y2="52"></line>258              <line x1="60" y1="20" x2="12" y2="52"></line>259            </g>260            <circle cx="36" cy="36" r="10" fill="#A7E2F2"></circle>261          </svg>262        </div>263        <div class="labels">264          <div class="k">Hardiness zone</div>265          <div class="v">3–8</div>266        </div>267      </div>268    </div>269 270    <div class="cta-row">271      <div class="btn-primary">Get care plan</div>272      <div class="btn-heart">273        <svg viewBox="0 0 24 24">274          <path d="M12 21s-7-4.5-9-8.5C1.5 9 3 6 6 6c2 0 3.5 1.5 4 2.5C10.5 7.5 12 6 14 6c3 0 4.5 3 3 6.5C19 16.5 12 21 12 21z"/>275        </svg>276      </div>277    </div>278 279    <div class="paragraph">280      There are over 500 different species of violas and they are easy to care for. Most of the violas cultivated in gardens are grown as annuals or short‑lived perennials. Many will self‑seed and give you years of delight. Violas are primarily cool‑season bloomers; provide consistent moisture and remove spent flowers to encourage more blooms.281    </div>282  </div>283 284  <div class="home-indicator"></div>285</div>286</body>287</html>