GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Plant Detail - Rosemary</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: "SF Pro Display", Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #0f2a37;13    color: #fff;14  }15 16  /* Top white hero with image */17  .hero {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 950px;23    background: #ffffff;24    border-bottom-left-radius: 80px;25    border-bottom-right-radius: 80px;26    overflow: hidden;27  }28  .hero .image {29    position: absolute;30    left: 140px;31    top: 110px;32    width: 800px;33    height: 760px;34    background: #E0E0E0;35    border: 1px solid #BDBDBD;36    display: flex;37    align-items: flex-end;38    justify-content: center;39    color: #757575;40    border-radius: 10px;41  }42 43  /* Back button */44  .back-btn {45    position: absolute;46    top: 120px;47    left: 70px;48    width: 120px;49    height: 120px;50    background: #ecf0f3;51    border-radius: 60px;52    box-shadow: 0 2px 6px rgba(0,0,0,0.08);53    display: flex;54    align-items: center;55    justify-content: center;56  }57  .icon {58    width: 48px;59    height: 48px;60  }61 62  /* Title block */63  .title-block {64    position: absolute;65    top: 980px;66    left: 60px;67    right: 60px;68  }69  .plant-name {70    font-size: 72px;71    font-weight: 700;72    letter-spacing: 0.5px;73    margin: 0 0 22px 0;74  }75  .subtitle {76    font-size: 34px;77    color: #91b7c7;78    margin: 0 0 30px 0;79  }80  .fav-btn {81    position: absolute;82    right: 0;83    top: 10px;84    width: 90px;85    height: 90px;86    border-radius: 45px;87    background: rgba(255,255,255,0.06);88    display: flex;89    align-items: center;90    justify-content: center;91    border: 1px solid rgba(255,255,255,0.12);92  }93 94  /* Feature grid */95  .grid {96    position: absolute;97    top: 1160px;98    left: 40px;99    width: 1000px;100    display: flex;101    flex-wrap: wrap;102    gap: 36px;103  }104  .card {105    width: 300px;106    height: 360px;107    border-radius: 34px;108    background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02));109    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);110    padding: 30px;111  }112  .card .label {113    font-size: 28px;114    color: #a6c3cf;115    margin-top: 6px;116  }117  .card .value {118    font-size: 44px;119    font-weight: 700;120    margin-top: 20px;121  }122 123  /* Add Plant button */124  .add-plant {125    position: absolute;126    left: 60px;127    bottom: 380px;128    width: 960px;129    height: 130px;130    border-radius: 32px;131    background: linear-gradient(90deg, #86e170, #35c3a8);132    display: flex;133    align-items: center;134    justify-content: center;135    color: #0f2a37;136    font-size: 46px;137    font-weight: 700;138    letter-spacing: 0.5px;139  }140  .bottom-heart {141    position: absolute;142    right: 60px;143    bottom: 380px;144    transform: translateY(160%);145    width: 120px;146    height: 120px;147    border-radius: 60px;148    background: rgba(255,255,255,0.06);149    border: 1px solid rgba(255,255,255,0.12);150    display: flex;151    align-items: center;152    justify-content: center;153  }154 155  /* iOS-like home indicator */156  .home-indicator {157    position: absolute;158    bottom: 30px;159    left: 50%;160    transform: translateX(-50%);161    width: 220px;162    height: 10px;163    background: rgba(255,255,255,0.6);164    border-radius: 6px;165  }166</style>167</head>168<body>169<div id="render-target">170 171  <div class="hero">172    <div class="back-btn">173      <svg class="icon" viewBox="0 0 24 24" fill="none">174        <path d="M15 19L8 12L15 5" stroke="#2c3e50" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>175      </svg>176    </div>177    <div class="image">[IMG: Potted Rosemary Plant]</div>178  </div>179 180  <div class="title-block">181    <h1 class="plant-name">Rosemary</h1>182    <div class="subtitle">Salvia rosmarinus</div>183    <div class="fav-btn">184      <svg class="icon" viewBox="0 0 24 24" fill="none">185        <path d="M12 21s-7-4.5-9-8.5C1.5 9 3.5 6 7 6c2.1 0 3.4 1.1 5 3 1.6-1.9 2.9-3 5-3 3.5 0 5.5 3 4 6.5-2 4-9 8.5-9 8.5z" stroke="#fff" stroke-width="2" fill="none" />186      </svg>187    </div>188  </div>189 190  <div class="grid">191 192    <!-- Level card -->193    <div class="card">194      <svg class="icon" viewBox="0 0 24 24" fill="none">195        <path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1 3-6z" fill="#a7e274"/>196      </svg>197      <div class="label">Level</div>198      <div class="value">Beginner</div>199    </div>200 201    <!-- Water card -->202    <div class="card" style="background: linear-gradient(180deg, rgba(64,170,220,0.16), rgba(255,255,255,0.03));">203      <svg class="icon" viewBox="0 0 24 24" fill="none">204        <path d="M12 3C9 7 6 10 6 13.5A6 6 0 0 0 18 13.5C18 10 15 7 12 3z" fill="#7fd3ff"/>205      </svg>206      <div class="label">Water</div>207      <div class="value">Every 7d</div>208    </div>209 210    <!-- Temperature card -->211    <div class="card" style="background: linear-gradient(180deg, rgba(220,64,100,0.14), rgba(255,255,255,0.03));">212      <svg class="icon" viewBox="0 0 24 24" fill="none">213        <rect x="9" y="3" width="6" height="12" rx="3" stroke="#ff7b7b" stroke-width="2"/>214        <circle cx="12" cy="17" r="4" fill="#ff7b7b"/>215      </svg>216      <div class="label">Temperature</div>217      <div class="value">60° - 85°</div>218    </div>219 220    <!-- Light card -->221    <div class="card">222      <svg class="icon" viewBox="0 0 24 24" fill="none">223        <circle cx="12" cy="12" r="4" fill="#ffd15c"/>224        <g stroke="#ffd15c" stroke-width="2">225          <line x1="12" y1="2" x2="12" y2="6"/>226          <line x1="12" y1="18" x2="12" y2="22"/>227          <line x1="2" y1="12" x2="6" y2="12"/>228          <line x1="18" y1="12" x2="22" y2="12"/>229          <line x1="4" y1="4" x2="7" y2="7"/>230          <line x1="17" y1="17" x2="20" y2="20"/>231          <line x1="17" y1="7" x2="20" y2="4"/>232          <line x1="4" y1="20" x2="7" y2="17"/>233        </g>234      </svg>235      <div class="label">Light</div>236      <div class="value">Direct Sun</div>237    </div>238 239    <!-- Pet card -->240    <div class="card">241      <svg class="icon" viewBox="0 0 24 24" fill="none">242        <circle cx="7" cy="8" r="3" fill="#a3e882"/>243        <circle cx="17" cy="8" r="3" fill="#a3e882"/>244        <circle cx="9" cy="16" r="3" fill="#a3e882"/>245        <circle cx="15" cy="16" r="3" fill="#a3e882"/>246        <ellipse cx="12" cy="12" rx="5" ry="4" stroke="#a3e882" stroke-width="2"/>247      </svg>248      <div class="label">Pet</div>249      <div class="value">Friendly</div>250    </div>251 252    <!-- Humidity card -->253    <div class="card">254      <svg class="icon" viewBox="0 0 24 24" fill="none">255        <path d="M8 15c0-2 2-4 4-4s4 2 4 4" stroke="#9fe0ff" stroke-width="2"/>256        <path d="M5 16c0-3 3-5 7-5s7 2 7 5c0 2-2 4-7 4s-7-2-7-4z" fill="#9fe0ff"/>257      </svg>258      <div class="label">Humidity</div>259      <div class="value">65%</div>260    </div>261 262  </div>263 264  <div class="add-plant">Add Plant</div>265 266  <div class="bottom-heart">267    <svg class="icon" viewBox="0 0 24 24" fill="none">268      <path d="M12 21s-7-4.5-9-8.5C1.5 9 3.5 6 7 6c2.1 0 3.4 1.1 5 3 1.6-1.9 2.9-3 5-3 3.5 0 5.5 3 4 6.5-2 4-9 8.5-9 8.5z" stroke="#fff" stroke-width="2" fill="none" />269    </svg>270  </div>271 272  <div class="home-indicator"></div>273</div>274</body>275</html>