GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Flora Article - How to Grow Arugula</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #ffffff;12  }13 14  /* Status bar */15  .status-bar {16    position: absolute; top: 0; left: 0; right: 0;17    height: 120px;18    background: #0a2f30;19    color: #eaf6f5;20    display: flex; align-items: center;21    padding: 0 36px;22    font-size: 36px; letter-spacing: 1px;23  }24  .status-left { display: flex; align-items: center; gap: 18px; }25  .status-right { margin-left: auto; display: flex; align-items: center; gap: 24px; }26  .status-dot { width: 20px; height: 20px; background: #cde9e6; border-radius: 50%; opacity: 0.9; }27  .wifi {28    width: 42px; height: 30px;29  }30  .battery {31    width: 50px; height: 30px;32  }33 34  /* Top app header */35  .app-top {36    position: absolute; top: 120px; left: 0; right: 0;37    height: 170px;38    background: #072a2b;39    border-bottom: 6px solid #1ea56f;40    color: #cde9e6;41    padding: 22px 36px 0 36px;42  }43  .app-top .row {44    display: flex; align-items: center; justify-content: space-between;45  }46  .title-care {47    font-size: 72px; font-weight: 700; letter-spacing: 1px; opacity: 0.65;48  }49  .title-learn {50    font-size: 64px; font-weight: 700; color: #26a866;51  }52 53  /* Hero banner behind sheet */54  .hero {55    position: absolute; top: 290px; left: 0;56    width: 1080px; height: 260px;57    background: #E0E0E0;58    border: 1px solid #BDBDBD;59    display: flex; align-items: flex-end;60    overflow: hidden;61  }62  .hero-label {63    color: #ffffff; font-weight: 800; font-size: 44px;64    padding: 24px 36px;65    text-shadow: 0 2px 6px rgba(0,0,0,0.4);66  }67 68  /* Overlay sheet with article title */69  .overlay-card {70    position: absolute; top: 340px; left: 36px; right: 36px;71    background: #ffffff;72    border-radius: 54px;73    box-shadow: 0 10px 24px rgba(0,0,0,0.16);74    padding: 40px 48px;75  }76  .overlay-title {77    display: flex; align-items: center; justify-content: space-between;78    font-size: 52px; font-weight: 700; color: #2d2d2d;79  }80  .btn-close {81    width: 60px; height: 60px; cursor: pointer;82  }83 84  /* App bar under sheet */85  .nav-bar {86    position: absolute; top: 520px; left: 0; right: 0;87    height: 120px; background: #ffffff;88    display: flex; align-items: center;89    padding: 0 36px;90    box-shadow: 0 8px 18px rgba(0,0,0,0.08);91  }92  .hamburger { width: 84px; height: 60px; margin-right: 24px; }93  .logo-wrap { display: flex; align-items: center; gap: 20px; }94  .flora-text { font-size: 54px; font-weight: 800; color: #222; letter-spacing: 1px; }95 96  /* Article content */97  .content {98    position: absolute; top: 660px; left: 36px; right: 36px;99    color: #1d1d1d;100    font-size: 36px; line-height: 1.65;101  }102  .content p { margin: 28px 0; }103  .content .section-title {104    font-size: 40px; font-weight: 800;105  }106  .content em { font-style: italic; color: #3b3b3b; }107  .bullet { margin: 18px 0 18px 0; }108 109  /* Home indicator */110  .home-indicator {111    position: absolute; bottom: 36px; left: 50%;112    transform: translateX(-50%);113    width: 420px; height: 16px;114    background: #9e9e9e; border-radius: 10px; opacity: 0.7;115  }116</style>117</head>118<body>119<div id="render-target">120 121  <!-- Status bar -->122  <div class="status-bar">123    <div class="status-left">124      <div>3:46</div>125      <div class="status-dot"></div>126      <div class="status-dot"></div>127      <div class="status-dot"></div>128      <div class="status-dot"></div>129      <div class="status-dot"></div>130    </div>131    <div class="status-right">132      <svg class="wifi" viewBox="0 0 24 16">133        <path d="M2 6c6-6 14-6 20 0" stroke="#eaf6f5" stroke-width="2" fill="none"/>134        <path d="M6 9c4-4 8-4 12 0" stroke="#eaf6f5" stroke-width="2" fill="none"/>135        <circle cx="12" cy="13" r="2" fill="#eaf6f5"/>136      </svg>137      <svg class="battery" viewBox="0 0 28 16">138        <rect x="1" y="3" width="22" height="10" rx="2" stroke="#eaf6f5" stroke-width="2" fill="none"/>139        <rect x="3" y="5" width="14" height="6" fill="#eaf6f5"/>140        <rect x="24" y="6" width="3" height="4" rx="1" fill="#eaf6f5"/>141      </svg>142    </div>143  </div>144 145  <!-- App header -->146  <div class="app-top">147    <div class="row">148      <div class="title-care">Care</div>149      <div class="title-learn">Learn</div>150    </div>151  </div>152 153  <!-- Hero banner -->154  <div class="hero">155    <div style="position:absolute; inset:0;">156      <div style="width: 100%; height: 100%; background:#E0E0E0; display:flex; align-items:center; justify-content:center; border: 1px solid #BDBDBD; color:#757575;">157        [IMG: String of Bananas Plant]158      </div>159    </div>160    <div class="hero-label">How To Care For Your String of Bananas</div>161  </div>162 163  <!-- Overlay sheet with article title -->164  <div class="overlay-card">165    <div class="overlay-title">166      <span>How to Grow Arugula</span>167      <svg class="btn-close" viewBox="0 0 24 24">168        <path d="M5 5 L19 19 M19 5 L5 19" stroke="#8a8a8a" stroke-width="2" stroke-linecap="round"/>169      </svg>170    </div>171  </div>172 173  <!-- App bar -->174  <div class="nav-bar">175    <svg class="hamburger" viewBox="0 0 48 36">176      <path d="M4 6 H44 M4 18 H44 M4 30 H44" stroke="#222" stroke-width="4" stroke-linecap="round"/>177    </svg>178    <div class="logo-wrap">179      <!-- Simple leaf logo -->180      <svg viewBox="0 0 90 60" width="90" height="60">181        <circle cx="45" cy="42" r="18" fill="#9FE3C6"/>182        <path d="M30 40c-12-10-12-24 6-26 2 10-2 18-6 26z" fill="#58D39F"/>183        <path d="M60 40c12-10 12-24-6-26-2 10 2 18 6 26z" fill="#58D39F"/>184      </svg>185      <div class="flora-text">FLORA</div>186    </div>187  </div>188 189  <!-- Article content -->190  <div class="content">191    <p>Vegetative growth. In a typical fertilizer there are equal parts nitrogen, phosphate, and potassium.</p>192 193    <p>For a high nitrogen fertilizer, the amount varies between fully nitrogen, to a higher portion of nitrogen over phosphate and potassium. Below is a list of organic and inorganic high nitrogen fertilizers.</p>194 195    <p class="section-title">Inorganic High Nitrogen Fertilizer:</p>196    <p>Non-organic fertilizer is one that is <strong>not</strong> found naturally and is manufactured by humans.</p>197 198    <p>Nitrogen is manufactured by processing nitrogen and hydrogen to create ammonia. The ammonia is then broken down to create the nitrogen that is used in fertilizers.</p>199 200    <p><em>If you choose to use an inorganic fertilizer try one of these:</em></p>201 202    <p class="bullet"><strong>01. Lawn Fertilizer</strong> – typically has a makeup of 20 parts nitrogen, 1 part phosphate, and 5 parts potassium.</p>203 204    <p class="bullet"><strong>02. General Plant Fertilizer</strong>: typically has a mix that increases nitrogen for leafy greens and other plants.</p>205 206    <!-- filler to emulate longer scroll -->207    <p>Arugula prefers cool weather. Plant in early spring or late summer for a fall harvest. Keep soil consistently moist and provide partial sun if growing in hot climates.</p>208    <p>Harvest outer leaves first to encourage continued growth. Regularly pick to prevent bolting, and enjoy fresh in salads or on sandwiches.</p>209  </div>210 211  <!-- Home indicator -->212  <div class="home-indicator"></div>213 214</div>215</body>216</html>