GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Snap results</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16    color: #1f2b25;17  }18 19  .app {20    width: 100%;21    height: 100%;22  }23 24  /* Top bar */25  .topbar {26    position: relative;27    padding: 40px 40px 24px 40px;28  }29  .title {30    text-align: center;31    font-weight: 700;32    font-size: 48px;33    color: #0f6b45;34  }35  .icon-btn {36    position: absolute;37    top: 44px;38    width: 64px;39    height: 64px;40    display: flex;41    align-items: center;42    justify-content: center;43    border-radius: 16px;44    color: #0f6b45;45  }46  .icon-left { left: 24px; }47  .icon-right { right: 24px; }48 49  /* Large snapped photo */50  .hero {51    margin: 8px 32px 24px 32px;52    height: 980px;53    border-radius: 36px;54    background: #E0E0E0;55    border: 1px solid #BDBDBD;56    display: flex;57    align-items: center;58    justify-content: center;59    color: #5f5f5f;60    font-size: 40px;61  }62 63  .section-title {64    font-size: 48px;65    font-weight: 700;66    color: #1fa047;67    margin: 16px 40px 24px 40px;68  }69 70  /* Horizontal results list */71  .results-row {72    display: flex;73    gap: 28px;74    padding: 0 32px 12px 32px;75    overflow-x: auto;76    scroll-snap-type: x mandatory;77  }78  .results-row::-webkit-scrollbar { height: 0; }79 80  .card {81    position: relative;82    width: 480px;83    height: 560px;84    border-radius: 32px;85    background: #E0E0E0;86    border: 1px solid #BDBDBD;87    flex: 0 0 auto;88    scroll-snap-align: start;89    overflow: hidden;90  }91  .card .img {92    position: absolute;93    inset: 0;94    background: #E0E0E0;95    display: flex;96    align-items: center;97    justify-content: center;98    color: #6a6a6a;99    font-size: 34px;100  }101  .save-pill {102    position: absolute;103    top: 20px;104    right: 20px;105    background: #14863b;106    color: #ffffff;107    font-weight: 800;108    font-size: 36px;109    padding: 12px 28px;110    border-radius: 16px;111    border: 4px solid #ffffff;112    box-shadow: 0 2px 0 rgba(0,0,0,0.05);113  }114  .caption {115    position: absolute;116    left: 20px;117    right: 20px;118    bottom: 18px;119    background: #ffffff;120    border-radius: 22px;121    padding: 24px 26px;122    box-shadow: 0 6px 12px rgba(0,0,0,0.12);123    border: 1px solid #e5e5e5;124  }125  .caption .title {126    font-size: 38px;127    font-weight: 800;128    text-align: left;129    color: #1f2b25;130    margin: 0 0 6px 0;131  }132  .caption .subtitle {133    font-size: 30px;134    color: #4fa96b;135    margin: 0;136  }137 138  /* Action buttons */139  .actions {140    padding: 28px 32px 0 32px;141  }142  .cta {143    width: 100%;144    height: 148px;145    border-radius: 74px;146    display: flex;147    align-items: center;148    justify-content: center;149    font-size: 44px;150    font-weight: 700;151    color: #168247;152    background: #e7f5ea;153    margin-bottom: 28px;154    border: 1px solid #d3ead7;155  }156  .cta.secondary {157    background: #eef8f0;158  }159 160  /* Home indicator */161  .home-indicator {162    position: absolute;163    bottom: 24px;164    left: 50%;165    transform: translateX(-50%);166    width: 360px;167    height: 14px;168    border-radius: 8px;169    background: #cfcfcf;170    opacity: 0.9;171  }172</style>173</head>174<body>175<div id="render-target">176  <div class="app">177    <div class="topbar">178      <div class="icon-btn icon-left" aria-label="Back">179        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">180          <path d="M14.5 5L7.5 12l7 7" stroke="#0f6b45" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>181        </svg>182      </div>183      <div class="title">Snap results</div>184      <div class="icon-btn icon-right" aria-label="Menu">185        <svg width="44" height="44" viewBox="0 0 24 24" fill="#0f6b45">186          <circle cx="12" cy="5" r="2.2"></circle>187          <circle cx="12" cy="12" r="2.2"></circle>188          <circle cx="12" cy="19" r="2.2"></circle>189        </svg>190      </div>191    </div>192 193    <div class="hero">[IMG: Photo of plant]</div>194 195    <div class="section-title">Top results</div>196 197    <div class="results-row">198      <div class="card">199        <div class="img">[IMG: Plant close-up]</div>200        <div class="save-pill">Save</div>201        <div class="caption">202          <p class="title">Schefflera arboricola</p>203          <p class="subtitle">Dwarf Umbrella Tree</p>204        </div>205      </div>206 207      <div class="card">208        <div class="img">[IMG: Leafy plant with red stems]</div>209        <div class="save-pill">Save</div>210        <div class="caption">211          <p class="title">Schefflera alpina</p>212          <p class="subtitle"></p>213        </div>214      </div>215 216      <div class="card">217        <div class="img">[IMG: Mossy tree bark]</div>218        <div class="save-pill">Save</div>219        <div class="caption">220          <p class="title">Ceiba speciosa</p>221          <p class="subtitle">Silk floss tree</p>222        </div>223      </div>224    </div>225 226    <div class="actions">227      <div class="cta">Re-frame photo and try again</div>228      <div class="cta secondary">Post to community</div>229    </div>230 231    <div class="home-indicator"></div>232  </div>233</div>234</body>235</html>