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>How to Grow Arugula - UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: linear-gradient(180deg, #052e2f 0%, #083a39 220px, #0a3c3a 360px, #ffffff 360px);15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 20px;21    left: 24px;22    right: 24px;23    height: 40px;24    color: #ffffff;25    display: flex;26    align-items: center;27    font-size: 34px;28    letter-spacing: 0.5px;29  }30  .status-bar .spacer { flex: 1; }31  .status-icons {32    display: flex;33    align-items: center;34    gap: 18px;35    color: #dcefe9;36    font-size: 26px;37  }38  .battery {39    width: 44px; height: 22px; border: 2px solid #dcefe9; border-radius: 4px; position: relative;40  }41  .battery::after {42    content: ""; position: absolute; right: -8px; top: 5px; width: 6px; height: 12px; background: #dcefe9; border-radius: 2px;43  }44  .battery .level { position: absolute; left: 3px; top: 3px; height: 14px; width: 28px; background: #dcefe9; border-radius: 2px; }45 46  /* Large headings behind sheet */47  .bg-labels {48    position: absolute;49    top: 100px;50    left: 40px;51    right: 40px;52    display: flex;53    justify-content: space-between;54    align-items: center;55  }56  .bg-labels .care {57    font-size: 86px;58    font-weight: 700;59    color: #7fb9b1;60    opacity: 0.35;61  }62  .bg-labels .learn {63    font-size: 86px;64    font-weight: 700;65    color: #32a05a;66    opacity: 0.9;67  }68 69  /* Background banner image placeholder */70  .banner {71    position: absolute;72    top: 260px;73    left: 24px;74    right: 24px;75    height: 220px;76    background: #E0E0E0;77    border: 1px solid #BDBDBD;78    border-radius: 16px;79    display: flex;80    align-items: flex-end;81    overflow: hidden;82  }83  .banner .label {84    width: 100%;85    height: 100%;86    display: flex;87    align-items: center;88    justify-content: center;89    color: #757575;90    font-size: 34px;91    letter-spacing: 0.3px;92  }93 94  /* Sheet / overlay card */95  .sheet {96    position: absolute;97    top: 360px;98    left: 0;99    width: 1080px;100    height: 2040px;101    background: #ffffff;102    border-top-left-radius: 60px;103    border-top-right-radius: 60px;104    box-shadow: 0 8px 20px rgba(0,0,0,0.15);105  }106 107  /* Sheet header with title and close */108  .sheet-header {109    height: 120px;110    display: flex;111    align-items: center;112    padding: 0 40px;113    border-bottom: 1px solid #eeeeee;114  }115  .sheet-header .title {116    font-size: 48px;117    font-weight: 700;118    color: #2b2b2b;119  }120  .sheet-header .close {121    margin-left: auto;122    width: 72px; height: 72px;123    border-radius: 36px;124    display: flex; align-items: center; justify-content: center;125    background: #f2f2f2;126  }127  .icon-close svg { width: 36px; height: 36px; }128  .icon-close path { stroke: #7a7a7a; stroke-width: 6; stroke-linecap: round; }129 130  /* App bar with hamburger + logo */131  .appbar {132    height: 120px;133    display: flex;134    align-items: center;135    padding: 0 40px;136    gap: 36px;137    background: #ffffff;138    box-shadow: 0 3px 8px rgba(0,0,0,0.08);139    position: sticky;140    top: 0; /* keep feel of bar at top of sheet */141  }142  .hamburger svg { width: 72px; height: 72px; }143  .hamburger rect { fill: #1b1b1b; }144  .brand {145    display: flex; align-items: center; gap: 22px;146    margin-left: 10px;147  }148  .brand .logo svg { width: 80px; height: 80px; }149  .brand .logo .leaf1 { fill: #56d28a; }150  .brand .logo .leaf2 { fill: #36c372; }151  .brand .name {152    font-size: 48px;153    font-weight: 800;154    color: #111111;155    letter-spacing: 1px;156  }157 158  /* Content */159  .content {160    padding: 48px 48px 120px 48px;161    color: #222;162    line-height: 1.66;163    font-size: 38px;164  }165  .content p { margin: 28px 0; }166  .content .section-title {167    font-size: 44px; font-weight: 800;168  }169  .content em { font-style: italic; color: #333; }170  .content strong { font-weight: 800; }171  .content .numbered { margin-top: 18px; }172  .image-placeholder {173    width: 360px; height: 220px; margin: 80px auto 40px auto;174    background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 14px;175    display: flex; align-items: center; justify-content: center;176    color: #757575; font-size: 34px;177  }178 179  /* Home indicator */180  .home-indicator {181    position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);182    width: 360px; height: 16px; background: #9e9e9e; border-radius: 8px; opacity: 0.65;183  }184</style>185</head>186<body>187<div id="render-target">188 189  <!-- Status Bar -->190  <div class="status-bar">191    <div>3:46</div>192    <div class="spacer"></div>193    <div class="status-icons">194      <span>• • •</span>195      <span>◔</span>196      <span>∿</span>197      <div class="battery"><div class="level"></div></div>198    </div>199  </div>200 201  <!-- Large background labels -->202  <div class="bg-labels">203    <div class="care">Care</div>204    <div class="learn">Learn</div>205  </div>206 207  <!-- Background banner -->208  <div class="banner">209    <div class="label">[IMG: Plant Article Banner]</div>210  </div>211 212  <!-- White overlay sheet -->213  <div class="sheet">214    <div class="sheet-header">215      <div class="title">How to Grow Arugula</div>216      <div class="close icon-close">217        <svg viewBox="0 0 24 24">218          <path d="M5 5 L19 19 M19 5 L5 19" fill="none"></path>219        </svg>220      </div>221    </div>222 223    <div class="appbar">224      <div class="hamburger">225        <svg viewBox="0 0 24 24">226          <rect x="2" y="4" width="20" height="2"></rect>227          <rect x="2" y="11" width="20" height="2"></rect>228          <rect x="2" y="18" width="20" height="2"></rect>229        </svg>230      </div>231      <div class="brand">232        <div class="logo">233          <svg viewBox="0 0 64 64">234            <path class="leaf1" d="M32 34c-12 0-18 6-18 14 9 0 18-6 18-14z"></path>235            <path class="leaf2" d="M32 34c12 0 18 6 18 14-9 0-18-6-18-14z"></path>236            <circle cx="32" cy="28" r="6" fill="#a8e6c0"></circle>237          </svg>238        </div>239        <div class="name">FLORA</div>240      </div>241    </div>242 243    <div class="content">244      <p class="section-title">Organic High Nitrogen Fertilizer:</p>245      <p>Organic fertilizer is a fertilizer that is naturally produced. This means there are no artificial chemicals or products in it.</p>246 247      <p><em>If you choose to use an organic fertilizer try one of these:</em></p>248 249      <p class="numbered"><strong>01. Blood Meal:</strong> blood meal is a powder that is a byproduct of blood from cows and hogs found in slaughterhouses.</p>250 251      <p class="numbered"><strong>02. Feather Meal:</strong> feather meal is created when high temperatures are applied to bird feathers and ground up into a small powder. The keratin that is found in feathers is high in nitrogen, making this a high nitrogen fertilizer.</p>252 253      <div class="image-placeholder">[IMG: Snail Illustration]</div>254 255      <p class="section-title">ARUGULA DISEASES &amp; PESTS:</p>256      <p>Arugula, like any other plant is susceptible to pests and diseases. Here are few to look out for and how to manage them.</p>257    </div>258  </div>259 260  <div class="home-indicator"></div>261</div>262</body>263</html>