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>Flora - How to Grow Arugula</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden; background: #ffffff;11  }12 13  /* Top system/status area */14  .statusbar {15    position: relative;16    height: 100px;17    background: #0c3a38;18    color: #fff;19    display: flex;20    align-items: center;21    padding: 0 40px;22    font-weight: 600;23  }24  .status-left { font-size: 40px; }25  .status-center { display: flex; gap: 24px; margin-left: 20px; }26  .dot {27    width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,0.9);28  }29  .status-right { margin-left: auto; display: flex; align-items: center; gap: 24px; }30  .status-right svg { fill: #fff; }31 32  /* App header area */33  .top-banner {34    background: #0c3a38;35    height: 240px;36    position: relative;37    color: #fff;38    padding: 20px 40px 0;39    box-sizing: border-box;40    border-bottom: 4px solid rgba(33, 150, 83, 0.6);41  }42  .top-banner .title-care {43    font-size: 88px;44    line-height: 1;45    opacity: 0.35;46    font-weight: 700;47  }48  .top-banner .title-learn {49    position: absolute;50    right: 40px;51    top: 80px;52    color: #1fb56b;53    font-size: 64px;54    font-weight: 700;55  }56 57  /* Article card behind sheet */58  .article-preview {59    position: relative;60    width: 100%;61    height: 200px;62    background: #E0E0E0;63    border: 1px solid #BDBDBD;64    display: flex;65    align-items: center;66    padding-left: 40px;67    color: #757575;68    font-size: 44px;69    font-weight: 700;70  }71 72  /* White sheet/modal */73  .sheet {74    position: absolute;75    left: 0;76    top: 260px;77    width: 100%;78    background: #fff;79    border-radius: 48px 48px 0 0;80    box-shadow: 0 8px 24px rgba(0,0,0,0.12);81  }82  .sheet-header {83    display: flex;84    align-items: center;85    padding: 36px 40px;86  }87  .sheet-title {88    font-size: 54px;89    font-weight: 700;90    color: #2d2d2d;91  }92  .close-btn {93    margin-left: auto;94    width: 64px; height: 64px;95  }96 97  /* App toolbar under sheet header */98  .toolbar {99    display: flex;100    align-items: center;101    gap: 24px;102    padding: 24px 40px 12px;103    border-bottom: 1px solid #eee;104  }105  .hamburger { width: 70px; height: 48px; }106  .flora-logo {107    display: flex;108    align-items: center;109    gap: 20px;110    margin-left: 20px;111    font-weight: 800;112    font-size: 54px;113    color: #222;114  }115  .flora-logo svg { width: 80px; height: 80px; }116 117  /* Content text */118  .content {119    padding: 20px 40px 160px;120    font-size: 36px;121    line-height: 52px;122    color: #111;123  }124  .section-title {125    font-size: 44px;126    font-weight: 800;127    margin-top: 24px;128    margin-bottom: 16px;129  }130  .strong { font-weight: 800; }131  .img-placeholder {132    width: 240px; height: 240px;133    background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 120px;134    display: flex; justify-content: center; align-items: center;135    color: #757575; margin: 40px auto;136    text-align: center; font-size: 32px;137  }138 139  /* Home indicator */140  .home-indicator {141    position: absolute;142    bottom: 28px;143    left: 50%;144    transform: translateX(-50%);145    width: 360px; height: 14px;146    background: #A6A6A6;147    border-radius: 8px;148  }149</style>150</head>151<body>152<div id="render-target">153 154  <!-- Status bar -->155  <div class="statusbar">156    <div class="status-left">3:46</div>157    <div class="status-center">158      <div class="dot"></div>159      <div class="dot"></div>160      <div class="dot"></div>161      <div class="dot"></div>162    </div>163    <div class="status-right">164      <!-- wifi -->165      <svg width="46" height="46" viewBox="0 0 24 24">166        <path d="M12 18.5c.9 0 1.6.7 1.6 1.5s-.7 1.5-1.6 1.5-1.6-.7-1.6-1.5.7-1.5 1.6-1.5zM3 9.5a14 14 0 0 1 18 0l-1.7 1.7a11 11 0 0 0-14.6 0L3 9.5zm4.2 4a9 9 0 0 1 9.6 0l-1.7 1.6a6.5 6.5 0 0 0-6.2 0l-1.7-1.6z"/>167      </svg>168      <!-- battery -->169      <svg width="46" height="46" viewBox="0 0 24 24">170        <rect x="2" y="6" width="18" height="12" rx="2" ry="2"></rect>171        <rect x="20.5" y="9" width="2" height="6" rx="1"></rect>172        <rect x="4" y="8" width="12" height="8" fill="#fff"></rect>173      </svg>174    </div>175  </div>176 177  <!-- App header banner -->178  <div class="top-banner">179    <div class="title-care">Care</div>180    <div class="title-learn">Learn</div>181  </div>182 183  <div class="article-preview">[IMG: How To Care For Your String of Bananas]</div>184 185  <!-- White sheet -->186  <div class="sheet">187    <div class="sheet-header">188      <div class="sheet-title">How to Grow Arugula</div>189      <!-- Close icon -->190      <svg class="close-btn" viewBox="0 0 24 24">191        <path d="M5 5 L19 19 M19 5 L5 19" stroke="#8a8f9c" stroke-width="2.6" stroke-linecap="round" fill="none"/>192      </svg>193    </div>194 195    <!-- Toolbar -->196    <div class="toolbar">197      <!-- Hamburger -->198      <svg class="hamburger" viewBox="0 0 24 24">199        <path d="M3 6h18M3 12h18M3 18h18" stroke="#111" stroke-width="2.6" stroke-linecap="round" fill="none"/>200      </svg>201 202      <!-- Flora logo + text -->203      <div class="flora-logo">204        <svg viewBox="0 0 64 64">205          <path d="M32 38c-8-6-12-16-8-20 4-4 14 2 14 10 0 6-3 8-6 10z" fill="#24c28a"/>206          <path d="M20 30c-6-4-10-12-7-15 3-3 10 2 10 8 0 5-2 6-3 7z" fill="#2dd19a"/>207          <path d="M44 30c6-4 10-12 7-15-3-3-10 2-10 8 0 5 2 6 3 7z" fill="#2dd19a"/>208        </svg>209        FLORA210      </div>211    </div>212 213    <!-- Content -->214    <div class="content">215      <p>01. Flea Beetles: These are tiny black or brown insects, that will chew through your plant's leaves. You may realize you have a flea beetle issue if you notice tiny holes on the foliage. You can treat this by using an insecticide, but make sure you're vigilant! These tend to come back!</p>216 217      <div class="section-title">02. Slugs and Snails</div>218      <p>These critters love moist leaves and soil, so they will more likely show up on watering days. You can get rid of slugs by removing them from your garden by hand, or setting traps to lure them into.</p>219      <p><span class="strong">Rule of (Green) Thumb:</span> The best way to prevent future pests in your garden, is by rotating your crops. – Plant your seeds in a different location each season.</p>220 221      <div class="img-placeholder">[IMG: Paw Icon]</div>222 223      <div class="section-title">ARUGULA TOXICITY:</div>224      <p>Though arugula is a popular veggie, if consumed in large quantities it can actually be harmful to pets. Keep your furry friends safe by monitoring what they munch in the garden.</p>225    </div>226  </div>227 228  <div class="home-indicator"></div>229</div>230</body>231</html>