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>Introduce Plants to Greg</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: #111;14  }15  #render-target {16    position: relative;17    overflow: hidden;18    width: 1080px;19    height: 2400px;20    background: #FBF9F5;21    border-radius: 36px;22    box-shadow: 0 8px 40px rgba(0,0,0,0.12);23  }24 25  /* Status bar */26  .status {27    position: absolute;28    top: 0;29    left: 0;30    width: 1080px;31    height: 120px;32    display: flex;33    align-items: center;34    justify-content: space-between;35    padding: 0 48px;36    color: #282828;37    font-weight: 600;38    font-size: 40px;39    box-sizing: border-box;40    background: rgba(255,255,255,0.9);41  }42  .status-right {43    display: flex;44    gap: 24px;45    align-items: center;46  }47  .status svg {48    width: 48px;49    height: 48px;50    fill: #3A3A3A;51  }52 53  /* Content */54  .content {55    position: absolute;56    top: 340px;57    left: 90px;58    width: 900px;59    text-align: center;60  }61 62  .leaf-icon {63    width: 140px;64    height: 180px;65    margin: 40px auto 20px auto;66  }67 68  .title {69    font-size: 84px;70    line-height: 96px;71    font-weight: 800;72    letter-spacing: 0.4px;73    margin: 20px 0 28px 0;74  }75  .subtitle {76    font-size: 40px;77    line-height: 58px;78    color: #62626B;79    margin: 0 auto 60px auto;80    width: 900px;81  }82 83  .btn {84    width: 880px;85    height: 150px;86    border-radius: 75px;87    font-size: 48px;88    font-weight: 700;89    letter-spacing: 0.5px;90    display: flex;91    align-items: center;92    justify-content: center;93    margin: 38px auto;94    box-sizing: border-box;95    cursor: default;96  }97  .btn-primary {98    background: #4CAF73;99    color: #fff;100    box-shadow: 0 24px 32px rgba(76, 175, 115, 0.35);101  }102  .btn-outline {103    border: 14px solid #4CAF73;104    color: #4CAF73;105    background: transparent;106  }107 108  /* Bottom navigation */109  .bottom-nav {110    position: absolute;111    bottom: 140px;112    left: 0;113    width: 1080px;114    height: 190px;115    background: #F3F3F3;116    border-top: 2px solid rgba(0,0,0,0.08);117    display: flex;118    align-items: center;119    justify-content: space-around;120    box-sizing: border-box;121  }122  .nav-item {123    text-align: center;124    color: #7A7A83;125    font-size: 38px;126    width: 300px;127  }128  .nav-item .icon {129    width: 64px;130    height: 64px;131    margin: 0 auto 12px auto;132    display: block;133  }134  .nav-item.active {135    color: #1F1F25;136  }137  .nav-item.active svg {138    fill: #1F1F25;139  }140  .nav-item svg {141    fill: #A5A5AD;142  }143 144  /* Home indicator */145  .home-indicator {146    position: absolute;147    bottom: 54px;148    left: 50%;149    transform: translateX(-50%);150    width: 300px;151    height: 18px;152    background: #101010;153    border-radius: 12px;154    opacity: 0.9;155  }156</style>157</head>158<body>159<div id="render-target">160  <!-- Status bar -->161  <div class="status">162    <div>3:25</div>163    <div class="status-right">164      <!-- simple dots/icons -->165      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>166      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>167      <svg viewBox="0 0 24 24"><path d="M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm1 14H11v-8h2v8z"/></svg>168      <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 11H5v-2h6v2zm10 6-6-4v8l6-4z"/></svg>169      <svg viewBox="0 0 24 24"><circle cx="2" cy="12" r="2"/></svg>170      <svg viewBox="0 0 24 24"><path d="M3 18h18a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2H3v12zm18-2H5V8h16v8z"/></svg>171      <svg viewBox="0 0 24 24"><path d="M7 21h10V3H7v18zm2-2V5h6v14H9z"/></svg>172    </div>173  </div>174 175  <!-- Center content -->176  <div class="content">177    <!-- Leaf mascot icon -->178    <svg class="leaf-icon" viewBox="0 0 120 160">179      <defs>180        <linearGradient id="g" x1="0" x2="0" y1="0" y2="1">181          <stop offset="0" stop-color="#C9F67E"/>182          <stop offset="1" stop-color="#9DE86A"/>183        </linearGradient>184      </defs>185      <path d="M60 10c-28 18-42 46-36 74 7 32 40 50 66 38 26-12 28-52 6-86C88 18 73 8 60 10z" fill="url(#g)" />186      <circle cx="70" cy="52" r="5" fill="#202020"/>187      <circle cx="92" cy="56" r="5" fill="#202020"/>188      <path d="M74 86l-18 32h16l-8 20 34-44H92l10-18z" fill="#3BB463"/>189      <rect x="58" y="140" width="10" height="20" rx="5" fill="#9DE86A"/>190    </svg>191 192    <div class="title">Let's introduce your plants to Greg</div>193    <div class="subtitle">Greg will scan and identify your plants to give you personalized care information.</div>194 195    <div class="btn btn-primary">Take Photo</div>196    <div class="btn btn-outline">Upload photo</div>197  </div>198 199  <!-- Bottom navigation -->200  <div class="bottom-nav">201    <div class="nav-item active">202      <svg class="icon" viewBox="0 0 24 24">203        <path d="M19 3H5a2 2 0 0 0-2 2v14l4-3h12a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm-3 8H8V9h8v2zm-10 4h10v-2H6v2z"/>204      </svg>205      <div>Schedule</div>206    </div>207    <div class="nav-item">208      <svg class="icon" viewBox="0 0 24 24">209        <path d="M4 6h4l2-2h4l2 2h4v12H4V6zm8 3a5 5 0 1 1 0 10 5 5 0 0 1 0-10z"/>210      </svg>211      <div>Identify/Add</div>212    </div>213    <div class="nav-item">214      <svg class="icon" viewBox="0 0 24 24">215        <path d="M12 3C7 3 3 6.6 3 11c0 2.1 1 4 2.6 5.4L5 21l4.7-2.3c.8.2 1.7.3 2.3.3 5 0 9-3.6 9-8s-4-8-9-8z"/>216      </svg>217      <div>Community</div>218    </div>219  </div>220 221  <div class="home-indicator"></div>222</div>223</body>224</html>