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 { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, system-ui, -apple-system, Helvetica, Arial, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #FAF8F2;15  }16 17  /* Subtle background leaf outlines */18  .bg-shape {19    position: absolute;20    border: 6px solid rgba(0,0,0,0.05);21    border-radius: 60px;22    transform: rotate(12deg);23    filter: blur(0.1px);24  }25  .bg1 { width: 520px; height: 420px; top: 180px; left: -120px; }26  .bg2 { width: 540px; height: 460px; top: 160px; right: -90px; transform: rotate(-8deg); }27  .bg3 { width: 420px; height: 360px; bottom: 200px; right: -80px; transform: rotate(18deg); }28  .bg4 { width: 380px; height: 320px; bottom: 260px; left: -60px; transform: rotate(-12deg); }29 30  /* Status bar */31  .status-bar {32    position: absolute;33    top: 0;34    left: 0;35    width: 100%;36    height: 140px;37    background: #ffffff;38    display: flex;39    align-items: center;40    justify-content: space-between;41    padding: 0 48px;42    box-sizing: border-box;43  }44  .status-left, .status-right {45    display: flex; align-items: center; gap: 24px; color: #2D2D2D; font-weight: 600; font-size: 40px;46  }47  .dot { width: 14px; height: 14px; background:#6b6b6b; border-radius: 50%; display:inline-block; }48 49  .status-icon {50    width: 40px; height: 40px;51  }52  .status-right .status-icon { width: 48px; height: 48px; }53 54  /* Main content */55  .content {56    position: absolute;57    top: 380px;58    left: 0;59    width: 100%;60    padding: 0 90px;61    box-sizing: border-box;62    text-align: center;63  }64  .leaf-icon {65    width: 140px;66    height: 160px;67    margin: 0 auto 40px;68  }69 70  .title {71    font-size: 72px;72    font-weight: 800;73    color: #101010;74    line-height: 1.15;75    letter-spacing: 0.2px;76    margin: 0 0 36px;77  }78  .subtitle {79    font-size: 36px;80    color: #5E5D70;81    line-height: 1.5;82    margin-bottom: 80px;83  }84 85  .btn {86    width: 900px;87    height: 130px;88    margin: 0 auto 40px;89    border-radius: 65px;90    font-size: 42px;91    font-weight: 800;92    letter-spacing: 0.2px;93    display: flex;94    align-items: center;95    justify-content: center;96    box-sizing: border-box;97    cursor: default;98  }99  .btn.primary {100    background: #16A34A;101    color: #ffffff;102    box-shadow: 0 14px 0 rgba(0,0,0,0.08);103  }104  .btn.outline {105    background: #ffffff;106    color: #16A34A;107    border: 10px solid #16A34A;108  }109 110  /* Bottom nav bar */111  .tabbar {112    position: absolute;113    bottom: 120px;114    left: 0;115    width: 100%;116    height: 180px;117    background: #ffffff;118    border-top: 1px solid rgba(0,0,0,0.1);119    display: flex;120    align-items: center;121    justify-content: space-around;122    box-sizing: border-box;123  }124  .tabitem {125    display: flex;126    flex-direction: column;127    align-items: center;128    gap: 20px;129    color: #9A9AA1;130    font-size: 36px;131    font-weight: 600;132  }133  .tabitem.active { color: #2E2A39; }134  .tabicon { width: 64px; height: 64px; }135 136  /* Home indicator */137  .home-indicator {138    position: absolute;139    bottom: 40px;140    left: 50%;141    transform: translateX(-50%);142    width: 260px;143    height: 16px;144    border-radius: 10px;145    background: rgba(0,0,0,0.85);146  }147</style>148</head>149<body>150<div id="render-target">151  <!-- faint decorative outlines -->152  <div class="bg-shape bg1"></div>153  <div class="bg-shape bg2"></div>154  <div class="bg-shape bg3"></div>155  <div class="bg-shape bg4"></div>156 157  <!-- Status bar -->158  <div class="status-bar">159    <div class="status-left">160      <span>11:41</span>161      <!-- simple weather icon -->162      <svg class="status-icon" viewBox="0 0 24 24">163        <circle cx="12" cy="12" r="10" fill="#888" />164        <text x="12" y="16" font-size="10" text-anchor="middle" fill="#fff">32°</text>165      </svg>166      <!-- globe icons -->167      <svg class="status-icon" viewBox="0 0 24 24">168        <circle cx="12" cy="12" r="10" fill="#777"/>169        <path d="M2 12h20M12 2v20" stroke="#fff" stroke-width="2"/>170      </svg>171      <svg class="status-icon" viewBox="0 0 24 24">172        <circle cx="12" cy="12" r="10" fill="#777"/>173        <path d="M2 12h20M12 2v20" stroke="#fff" stroke-width="2"/>174      </svg>175      <span class="dot"></span>176    </div>177    <div class="status-right">178      <svg class="status-icon" viewBox="0 0 24 24">179        <path d="M2 9l6-6h12v18H8L2 15V9z" fill="#666"/>180      </svg>181      <svg class="status-icon" viewBox="0 0 24 24">182        <rect x="3" y="5" width="18" height="14" rx="2" fill="#666"/>183        <rect x="19" y="8" width="2" height="8" fill="#ccc"/>184      </svg>185    </div>186  </div>187 188  <!-- Main content -->189  <div class="content">190    <!-- Leaf mascot icon -->191    <svg class="leaf-icon" viewBox="0 0 120 140">192      <path d="M60 10c35 12 48 44 36 72S58 130 36 110 12 44 36 24 60 10 60 10z" fill="#B8F178" stroke="#27AE60" stroke-width="4"/>193      <!-- lightning -->194      <path d="M56 58l16-8-10 18h12l-24 20 8-18H48l8-12z" fill="#16A34A"/>195      <!-- face -->196      <circle cx="46" cy="50" r="4" fill="#333"/>197      <circle cx="64" cy="50" r="4" fill="#333"/>198      <path d="M48 62c6 6 12 6 18 0" stroke="#333" stroke-width="3" fill="none" stroke-linecap="round"/>199      <!-- stem -->200      <rect x="72" y="116" width="8" height="20" rx="4" fill="#27AE60"/>201    </svg>202 203    <h1 class="title">Let's introduce your<br>plants to Greg</h1>204    <p class="subtitle">Greg will scan and identify your plants to give<br>you personalized care information.</p>205 206    <div class="btn primary">Take Photo</div>207    <div class="btn outline">Upload photo</div>208  </div>209 210  <!-- Bottom tab bar -->211  <div class="tabbar">212    <div class="tabitem active">213      <svg class="tabicon" viewBox="0 0 24 24">214        <rect x="4" y="4" width="16" height="16" rx="3" fill="none" stroke="#2E2A39" stroke-width="2"/>215        <path d="M8 12l3 3 5-7" stroke="#2E2A39" stroke-width="2" fill="none" stroke-linecap="round"/>216      </svg>217      <div>Schedule</div>218    </div>219    <div class="tabitem">220      <svg class="tabicon" viewBox="0 0 24 24">221        <rect x="3" y="3" width="18" height="18" rx="3" fill="none" stroke="#9A9AA1" stroke-width="2"/>222        <rect x="8" y="8" width="8" height="8" rx="2" fill="none" stroke="#9A9AA1" stroke-width="2"/>223      </svg>224      <div>Identify/Add</div>225    </div>226    <div class="tabitem">227      <svg class="tabicon" viewBox="0 0 24 24">228        <path d="M4 6h16v9H8l-4 5V6z" fill="none" stroke="#9A9AA1" stroke-width="2"/>229      </svg>230      <div>Community</div>231    </div>232  </div>233 234  <div class="home-indicator"></div>235</div>236</body>237</html>