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 Mock</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;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #072F31;15  }16 17  /* Top status + header background */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 96px;24    color: #ffffff;25    display: flex;26    align-items: center;27    padding: 0 36px;28    box-sizing: border-box;29    font-weight: 600;30    font-size: 34px;31  }32  .status-right {33    margin-left: auto;34    display: flex;35    align-items: center;36    gap: 24px;37  }38  .header-bg {39    position: absolute;40    top: 96px;41    left: 0;42    width: 1080px;43    height: 260px;44    background: #093A3C;45  }46  .header-text {47    position: absolute;48    top: 140px;49    left: 40px;50    color: rgba(255,255,255,0.7);51    font-size: 88px;52    font-weight: 700;53    letter-spacing: 0.5px;54  }55  .header-text.right {56    left: auto;57    right: 40px;58    color: #34A853;59  }60 61  /* White overlay sheet */62  .sheet {63    position: absolute;64    top: 280px;65    left: 0;66    width: 1080px;67    height: 2120px;68    background: #ffffff;69    border-radius: 60px 60px 0 0;70    box-shadow: 0 -6px 18px rgba(0,0,0,0.25);71  }72 73  .sheet-header {74    display: flex;75    align-items: center;76    padding: 40px 48px 28px 48px;77    box-sizing: border-box;78  }79  .sheet-title {80    font-size: 52px;81    font-weight: 700;82    color: #2B3A3B;83  }84  .sheet-close {85    margin-left: auto;86    width: 64px;87    height: 64px;88    cursor: default;89  }90  .divider {91    height: 2px;92    background: #E6E6E6;93    width: 100%;94  }95 96  /* App header row under sheet header */97  .appbar {98    display: flex;99    align-items: center;100    padding: 34px 40px;101    box-sizing: border-box;102    border-bottom: 1px solid #EEEEEE;103  }104  .hamburger {105    width: 72px;106    height: 48px;107    margin-right: 24px;108  }109  .brand {110    display: flex;111    align-items: center;112    gap: 20px;113    margin-left: 8px;114  }115  .brand svg { width: 96px; height: 72px; }116  .brand-name {117    font-size: 44px;118    font-weight: 800;119    color: #222;120    letter-spacing: 1px;121  }122 123  /* Content */124  .content {125    padding: 32px 40px 140px 40px;126    box-sizing: border-box;127  }128  .img-block {129    width: 900px;130    height: 900px;131    background: #E0E0E0;132    border: 1px solid #BDBDBD;133    border-radius: 42px;134    margin: 24px auto 0 auto;135    display: flex;136    align-items: center;137    justify-content: center;138    color: #757575;139    font-size: 40px;140    text-align: center;141  }142 143  .icon-block {144    width: 220px;145    height: 220px;146    background: #E0E0E0;147    border: 1px solid #BDBDBD;148    border-radius: 24px;149    margin: 56px auto 20px auto;150    display: flex;151    align-items: center;152    justify-content: center;153    color: #757575;154    font-size: 34px;155    text-align: center;156  }157 158  .section-title {159    margin: 28px 0 12px 0;160    font-size: 44px;161    font-weight: 800;162    color: #111;163    letter-spacing: 0.5px;164  }165  .paragraph {166    font-size: 36px;167    line-height: 1.6;168    color: #333;169  }170 171  /* Home indicator */172  .home-indicator {173    position: absolute;174    bottom: 32px;175    left: 50%;176    transform: translateX(-50%);177    width: 360px;178    height: 16px;179    border-radius: 12px;180    background: #C8C8C8;181  }182</style>183</head>184<body>185<div id="render-target">186 187  <!-- Status bar -->188  <div class="status-bar">189    3:46190    <div class="status-right">191      <!-- Wifi icon -->192      <svg width="44" height="44" viewBox="0 0 24 24" fill="none">193        <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>194        <path d="M5 11c4-3 10-3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>195        <path d="M8 14c3-2 5-2 8 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>196        <circle cx="12" cy="18" r="1.6" fill="#fff"/>197      </svg>198      <!-- Battery icon -->199      <svg width="56" height="44" viewBox="0 0 30 16" fill="none">200        <rect x="1" y="3" width="24" height="10" rx="2" stroke="#fff" stroke-width="2"/>201        <rect x="3" y="5" width="18" height="6" rx="1" fill="#fff"/>202        <rect x="26" y="5" width="3" height="6" rx="1" fill="#fff"/>203      </svg>204    </div>205  </div>206 207  <!-- Dark header background and texts -->208  <div class="header-bg"></div>209  <div class="header-text">Care</div>210  <div class="header-text right">Learn</div>211 212  <!-- White overlay sheet -->213  <div class="sheet">214    <div class="sheet-header">215      <div class="sheet-title">How to Grow Arugula</div>216      <svg class="sheet-close" viewBox="0 0 24 24">217        <path d="M5 5 L19 19 M19 5 L5 19" stroke="#7A7A7A" stroke-width="3" stroke-linecap="round"/>218      </svg>219    </div>220    <div class="divider"></div>221 222    <!-- App bar -->223    <div class="appbar">224      <svg class="hamburger" viewBox="0 0 24 24">225        <path d="M3 6h18M3 12h18M3 18h18" stroke="#333" stroke-width="3" stroke-linecap="round"/>226      </svg>227      <div class="brand">228        <!-- Simple leaf logo -->229        <svg viewBox="0 0 100 70">230          <circle cx="30" cy="40" r="18" fill="#5FD3AE"/>231          <circle cx="70" cy="40" r="18" fill="#5FD3AE"/>232          <path d="M50 10 C40 26 40 42 50 58 C60 42 60 26 50 10 Z" fill="#5FD3AE"/>233        </svg>234        <div class="brand-name">FLORA</div>235      </div>236    </div>237 238    <!-- Content -->239    <div class="content">240      <div class="img-block">[IMG: Arugula bunch on brown surface]</div>241 242      <div class="icon-block">[IMG: Fertilizer bag icon]</div>243 244      <div class="section-title">ARUGULA FERTILIZER:</div>245      <div class="paragraph">246        The Arugula is an extremely fast growing plant on its own, but if you want to give it some extra nutrients to support faster growing, give it a small, singular application of a high nitrogen fertilizer or some compost.247      </div>248 249      <div class="paragraph" style="margin-top: 36px;">250        Nitrogen in fertilizer is used specifically for251      </div>252    </div>253  </div>254 255  <!-- Home indicator -->256  <div class="home-indicator"></div>257</div>258</body>259</html>