GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Flora - How to Grow Arugula</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14  }15 16  /* Top app header area */17  .header {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 340px;23    background: #083b3a;24  }25  .status-bar {26    position: absolute;27    top: 0;28    left: 0;29    height: 80px;30    width: 100%;31    color: #ffffff;32    font-size: 28px;33    line-height: 80px;34    padding: 0 30px;35    display: flex;36    align-items: center;37    justify-content: space-between;38    letter-spacing: 0.5px;39  }40  .status-icons {41    display: flex;42    align-items: center;43    gap: 18px;44    color: #e9f7f6;45    font-size: 26px;46  }47  .status-dot {48    width: 10px; height: 10px; border-radius: 50%; background: #cfe9e7; display: inline-block;49  }50  .section-labels {51    position: absolute;52    top: 120px;53    left: 40px;54    width: calc(100% - 80px);55    display: flex;56    align-items: center;57    justify-content: space-between;58  }59  .label-care {60    font-size: 92px;61    color: rgba(255,255,255,0.85);62    font-weight: 700;63  }64  .label-learn {65    font-size: 64px;66    color: #36a365;67    font-weight: 700;68    margin-right: 40px;69  }70 71  /* Overlay article card */72  .overlay-card {73    position: absolute;74    left: 30px;75    right: 30px;76    top: 240px;77    background: #ffffff;78    border-radius: 60px 60px 0 0;79    box-shadow: 0 6px 18px rgba(0,0,0,0.18);80    overflow: hidden;81  }82  .modal-title {83    display: flex;84    align-items: center;85    justify-content: space-between;86    padding: 34px 44px 26px 44px;87    border-bottom: 1px solid rgba(0,0,0,0.06);88  }89  .modal-title h1 {90    margin: 0;91    font-size: 50px;92    color: #2d3a3a;93    font-weight: 700;94  }95  .icon-btn {96    width: 54px;97    height: 54px;98    cursor: pointer;99  }100  .top-nav {101    display: flex;102    align-items: center;103    gap: 26px;104    padding: 26px 40px 12px 40px;105  }106  .hamburger svg { width: 70px; height: 52px; }107  .brand {108    display: flex;109    align-items: center;110    gap: 20px;111  }112  .brand svg { width: 80px; height: 80px; }113  .brand-name {114    font-size: 52px;115    font-weight: 800;116    color: #0f1a1a;117    letter-spacing: 1px;118  }119 120  /* Article content */121  .content {122    padding: 0 40px 40px 40px;123  }124  .content p {125    font-size: 40px;126    line-height: 56px;127    color: #111;128    margin: 22px 0;129  }130  .image-placeholder {131    width: 420px;132    height: 260px;133    background: #E0E0E0;134    border: 1px solid #BDBDBD;135    display: flex;136    justify-content: center;137    align-items: center;138    color: #757575;139    margin: 40px auto 24px auto;140    border-radius: 16px;141  }142  .section-title {143    font-size: 42px;144    font-weight: 800;145    color: #111;146    margin-top: 26px;147    margin-bottom: 8px;148    letter-spacing: 0.5px;149  }150  .inline-strong {151    font-weight: 800;152  }153  .wide-image {154    width: 840px;155    height: 420px;156    background: #E0E0E0;157    border: 1px solid #BDBDBD;158    display: flex;159    justify-content: center;160    align-items: center;161    color: #757575;162    margin: 40px auto 80px auto;163    border-radius: 40px;164  }165 166  /* Home indicator */167  .home-indicator {168    position: absolute;169    bottom: 26px;170    left: 50%;171    transform: translateX(-50%);172    width: 220px;173    height: 12px;174    background: #BABABA;175    border-radius: 8px;176  }177</style>178</head>179<body>180<div id="render-target">181  <div class="header">182    <div class="status-bar">183      <div>3:46</div>184      <div class="status-icons">185        <span>◦</span>186        <span>◦</span>187        <span>◦</span>188        <span class="status-dot"></span>189        <span>◦</span>190        <span>◦</span>191      </div>192    </div>193 194    <div class="section-labels">195      <div class="label-care">Care</div>196      <div class="label-learn">Learn</div>197    </div>198  </div>199 200  <div class="overlay-card">201    <div class="modal-title">202      <h1>How to Grow Arugula</h1>203      <div class="icon-btn">204        <svg viewBox="0 0 24 24">205          <path d="M5 5 L19 19 M19 5 L5 19" stroke="#8A8A8A" stroke-width="2.5" fill="none" stroke-linecap="round"/>206        </svg>207      </div>208    </div>209 210    <div class="top-nav">211      <div class="hamburger">212        <svg viewBox="0 0 24 24">213          <path d="M3 6 H21 M3 12 H21 M3 18 H21" stroke="#111" stroke-width="2.7" stroke-linecap="round" fill="none"/>214        </svg>215      </div>216      <div class="brand">217        <svg viewBox="0 0 64 64">218          <circle cx="32" cy="32" r="0" fill="none"/>219          <path d="M32 34 C32 22 44 18 52 28 C46 38 38 40 32 40 Z" fill="#56cf93"/>220          <path d="M32 34 C32 22 20 18 12 28 C18 38 26 40 32 40 Z" fill="#2bb47b"/>221          <circle cx="32" cy="40" r="4" fill="#57c89a"/>222        </svg>223        <div class="brand-name">FLORA</div>224      </div>225    </div>226 227    <div class="content">228      <p>After you have planted your original Arugula seeds, replant new seeds every 2 to 3 weeks for a longer harvest.</p>229 230      <div class="image-placeholder">[IMG: Terracotta Pots Illustration]</div>231 232      <div class="section-title">GERMINATING ARUGULA SEEDS:</div>233      <p>Once your Arugula seeds are sowed, the germination process begins. In colder weather, expect your seeds to take about 7 to 9 days to begin germinating. In warmer weather, the germination process will take a week.</p>234      <p><span class="inline-strong">Rule of (Green) Thumb:</span> Germination is the beginning of the growth process of a seed into a sprout.</p>235 236      <div class="wide-image">[IMG: Arugula Leaves Photo]</div>237    </div>238  </div>239 240  <div class="home-indicator"></div>241</div>242</body>243</html>