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: Arial, Helvetica, sans-serif; color:#111; }8  #render-target {9    width:1080px; height:2400px; position:relative; overflow:hidden;10    background:#ffffff;11  }12 13  /* Top header */14  .top-banner {15    position:relative;16    height:260px;17    background:#06393B;18    color:#fff;19  }20  .status-bar {21    height:60px; padding:0 32px;22    display:flex; align-items:center; justify-content:space-between;23    font-size:32px; letter-spacing:0.2px;24  }25  .status-icons { display:flex; align-items:center; gap:22px; }26  .title-overlay {27    position:absolute; left:36px; bottom:18px;28    font-size:86px; font-weight:700; opacity:0.85;29  }30  .title-learn {31    position:absolute; right:36px; bottom:22px;32    font-size:80px; font-weight:700; color:#2BB66A;33  }34 35  /* Sheet with title */36  .sheet {37    position:absolute; top:210px; left:0; width:1080px; height:150px;38    background:#fff;39    border-top-left-radius:56px; border-top-right-radius:56px;40    box-shadow: 0 6px 18px rgba(0,0,0,0.12);41    display:flex; align-items:center;42  }43  .sheet h1 {44    font-size:54px; font-weight:700; margin:0; margin-left:48px; color:#222;45  }46  .sheet .close {47    margin-left:auto; margin-right:38px;48  }49 50  /* App bar */51  .appbar {52    position:relative;53    margin-top:370px; /* after sheet */54    height:120px;55    display:flex; align-items:center; justify-content:center;56  }57  .hamburger {58    position:absolute; left:32px; top:50%;59    transform:translateY(-50%);60  }61  .brand {62    display:flex; align-items:center; gap:18px;63  }64  .brand .name {65    font-size:56px; font-weight:800; letter-spacing:1px;66  }67 68  /* Image placeholder */69  .hero-img {70    width:1000px; height:540px; margin:22px auto 26px;71    background:#E0E0E0; border:1px solid #BDBDBD;72    border-radius:36px;73    display:flex; align-items:center; justify-content:center;74    color:#757575; font-size:34px;75    text-align:center;76  }77 78  /* Info table */79  .info-table {80    width:1000px; margin:0 auto; border:3px solid #222; border-radius:6px; overflow:hidden;81    font-size:36px;82  }83  .info-table table { width:100%; border-collapse:collapse; }84  .info-table th, .info-table td {85    border:3px solid #222; padding:26px 24px; vertical-align:middle;86  }87  .info-table th.label { width:45%; font-weight:800; }88  .info-table th.value { width:55%; font-weight:800; font-style:italic; }89  .info-table td.label { font-weight:700; color:#222; }90  .info-table td.value { color:#222; }91 92  /* Rule of Thumb */93  .rule {94    width:1000px; margin:32px auto 0; font-size:40px; line-height:1.35;95  }96  .rule b { font-weight:800; }97 98  /* Home indicator */99  .home-indicator {100    position:absolute; bottom:36px; left:50%; transform:translateX(-50%);101    width:340px; height:14px; background:#B5B5B5; border-radius:10px;102  }103</style>104</head>105<body>106<div id="render-target">107 108  <!-- Top dark banner -->109  <div class="top-banner">110    <div class="status-bar">111      <div>3:45</div>112      <div class="status-icons">113        <!-- simple dots to mimic small icons -->114        <svg width="26" height="26"><circle cx="13" cy="13" r="5" fill="#fff"/></svg>115        <svg width="26" height="26"><circle cx="13" cy="13" r="5" fill="#fff"/></svg>116        <svg width="26" height="26"><circle cx="13" cy="13" r="5" fill="#fff"/></svg>117        <svg width="36" height="26" viewBox="0 0 36 26">118          <!-- wifi arcs -->119          <path d="M3 10c12-10 18-10 30 0" stroke="#fff" stroke-width="3" fill="none"/>120          <path d="M8 15c8-7 12-7 20 0" stroke="#fff" stroke-width="3" fill="none"/>121          <circle cx="18" cy="20" r="2.5" fill="#fff"/>122        </svg>123        <svg width="40" height="26" viewBox="0 0 40 26">124          <!-- battery -->125          <rect x="2" y="5" width="30" height="16" rx="3" fill="none" stroke="#fff" stroke-width="3"/>126          <rect x="5" y="8" width="22" height="10" rx="2" fill="#fff"/>127          <rect x="34" y="10" width="4" height="6" rx="1" fill="#fff"/>128        </svg>129      </div>130    </div>131    <div class="title-overlay">Care</div>132    <div class="title-learn">Learn</div>133  </div>134 135  <!-- White sheet with title -->136  <div class="sheet">137    <h1>How to Grow Arugula</h1>138    <div class="close">139      <svg width="48" height="48" viewBox="0 0 48 48">140        <path d="M12 12 L36 36 M36 12 L12 36" stroke="#6A6A6A" stroke-width="4" stroke-linecap="round"/>141      </svg>142    </div>143  </div>144 145  <!-- App bar with hamburger and brand -->146  <div class="appbar">147    <div class="hamburger">148      <svg width="68" height="54" viewBox="0 0 68 54">149        <rect x="6" y="8" width="56" height="6" rx="3" fill="#111"/>150        <rect x="6" y="24" width="56" height="6" rx="3" fill="#111"/>151        <rect x="6" y="40" width="56" height="6" rx="3" fill="#111"/>152      </svg>153    </div>154    <div class="brand">155      <!-- simple leaf logo -->156      <svg width="92" height="72" viewBox="0 0 92 72">157        <circle cx="46" cy="52" r="6" fill="#40C7A4"/>158        <path d="M46 52c-20 0-26-18-26-18s18-2 26 18z" fill="#37D7A3"/>159        <path d="M46 52c20 0 26-18 26-18s-18-2-26 18z" fill="#55D3B6"/>160      </svg>161      <div class="name">FLORA</div>162    </div>163  </div>164 165  <!-- Image -->166  <div class="hero-img">[IMG: Arugula plants close-up]</div>167 168  <!-- Info Table -->169  <div class="info-table">170    <table>171      <tr>172        <th class="label">Botanical Name:</th>173        <th class="value">Eruca vesicaria</th>174      </tr>175      <tr>176        <td class="label">Common Name(s):</td>177        <td class="value">Arugula, Rocket Salad, Roquette</td>178      </tr>179      <tr>180        <td class="label">Plant Type</td>181        <td class="value">Perennial herb</td>182      </tr>183      <tr>184        <td class="label">Place of Origin:</td>185        <td class="value">Mediterranean, Turkey, Western Asia</td>186      </tr>187      <tr>188        <td class="label">Sun Exposure:</td>189        <td class="value">Direct, full sun</td>190      </tr>191      <tr>192        <td class="label">Watering Schedule:</td>193        <td class="value">Every 7–10 days</td>194      </tr>195      <tr>196        <td class="label">Seasonality:</td>197        <td class="value">Spring</td>198      </tr>199      <tr>200        <td class="label">Bloom Time:</td>201        <td class="value">Summer</td>202      </tr>203      <tr>204        <td class="label">Toxicity:</td>205        <td class="value">Safe for cats and dogs</td>206      </tr>207    </table>208  </div>209 210  <!-- Rule of Thumb -->211  <div class="rule">212    <b>Rule of (Green) Thumb:</b> Arugula is a shallow-rooted plant, that grows in rosettes.213  </div>214 215  <!-- Home indicator -->216  <div class="home-indicator"></div>217</div>218</body>219</html>