GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>How to Grow Arugula - UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;15    color: #111;16  }17 18  /* Top status/header area */19  .top-area {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 360px;25    background: #08363A;26  }27  .status-bar {28    height: 120px;29    color: #fff;30    font-weight: 600;31    font-size: 42px;32    display: flex;33    align-items: center;34    justify-content: space-between;35    padding: 0 40px;36    opacity: 0.95;37  }38  .status-right {39    display: flex;40    align-items: center;41    gap: 24px;42  }43  .status-icon {44    width: 48px; height: 48px;45  }46 47  .header-labels {48    position: absolute;49    top: 120px;50    left: 0;51    width: 100%;52    padding: 0 40px;53    display: flex;54    justify-content: space-between;55    align-items: center;56  }57  .label-care {58    font-size: 90px;59    font-weight: 700;60    color: rgba(255,255,255,0.6);61  }62  .label-learn {63    font-size: 72px;64    font-weight: 700;65    color: #22A561;66  }67 68  .article-preview {69    position: absolute;70    bottom: 0;71    left: 0;72    width: 1080px;73    height: 200px;74    padding: 0 40px;75  }76  .article-image {77    width: 100%;78    height: 100%;79    background: #E0E0E0;80    border: 1px solid #BDBDBD;81    border-top-left-radius: 12px;82    border-top-right-radius: 12px;83    display: flex;84    align-items: center;85    padding-left: 28px;86    color: #757575;87    font-size: 42px;88    font-weight: 600;89  }90 91  /* White sheet */92  .sheet {93    position: absolute;94    top: 320px;95    left: 0;96    width: 1080px;97    height: 2080px;98    background: #ffffff;99    border-top-left-radius: 64px;100    border-top-right-radius: 64px;101    box-shadow: 0 -6px 16px rgba(0,0,0,0.15);102  }103  .sheet-header {104    height: 140px;105    border-bottom: 2px solid #E9E9E9;106    padding: 0 48px;107    display: flex;108    align-items: center;109    justify-content: space-between;110  }111  .sheet-title {112    font-size: 54px;113    font-weight: 700;114    color: #2b2b2b;115  }116  .close-btn {117    width: 64px; height: 64px; border: none; background: none; cursor: default;118  }119 120  /* Brand bar */121  .brand-bar {122    height: 120px;123    display: flex;124    align-items: center;125    justify-content: center;126    gap: 18px;127    position: relative;128    border-bottom: 2px solid #E9E9E9;129  }130  .burger {131    position: absolute;132    left: 40px;133    top: 50%;134    transform: translateY(-50%);135    width: 96px; height: 64px;136  }137  .flora-text {138    font-size: 58px;139    font-weight: 800;140    letter-spacing: 1px;141  }142 143  /* Content */144  .content {145    padding: 36px 56px 160px 56px;146  }147  .content p {148    font-size: 38px;149    line-height: 56px;150    margin: 24px 0 40px;151    color: #1a1a1a;152  }153  .content .promo-img {154    width: 968px;155    height: 360px;156    background: #E0E0E0;157    border: 1px solid #BDBDBD;158    border-radius: 28px;159    display: flex;160    align-items: center;161    justify-content: center;162    color: #757575;163    font-size: 40px;164    font-weight: 600;165    margin: 36px auto 64px;166  }167  .rule-title {168    font-size: 44px;169    font-weight: 800;170    margin-bottom: 16px;171  }172  .illustration {173    width: 220px;174    height: 160px;175    background: #E0E0E0;176    border: 1px solid #BDBDBD;177    border-radius: 20px;178    display: flex;179    align-items: center;180    justify-content: center;181    color: #757575;182    font-size: 32px;183    margin-top: 40px;184  }185 186  /* Home indicator */187  .home-indicator {188    position: absolute;189    bottom: 36px;190    left: 50%;191    transform: translateX(-50%);192    width: 420px;193    height: 12px;194    background: #C7C7C7;195    border-radius: 12px;196  }197</style>198</head>199<body>200<div id="render-target">201 202  <!-- Dark top area -->203  <div class="top-area">204    <div class="status-bar">205      <div>3:45</div>206      <div class="status-right">207        <!-- Simple Wi-Fi icon -->208        <svg class="status-icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">209          <path d="M2 8c5-4 15-4 20 0"/>210          <path d="M5 12c3-3 11-3 14 0"/>211          <path d="M8 16c2-2 6-2 8 0"/>212          <circle cx="12" cy="20" r="1" fill="#fff"></circle>213        </svg>214        <!-- Battery icon -->215        <svg class="status-icon" viewBox="0 0 30 18" fill="none" stroke="#fff" stroke-width="2">216          <rect x="2" y="3" width="24" height="12" rx="2"></rect>217          <rect x="4" y="5" width="18" height="8" fill="#fff"></rect>218          <rect x="26" y="6" width="2.5" height="6" rx="1" fill="#fff"></rect>219        </svg>220      </div>221    </div>222 223    <div class="header-labels">224      <div class="label-care">Care</div>225      <div class="label-learn">Learn</div>226    </div>227 228    <div class="article-preview">229      <div class="article-image">[IMG: Plant article banner] How To Care For Your String of Bananas</div>230    </div>231  </div>232 233  <!-- White content sheet -->234  <div class="sheet">235    <div class="sheet-header">236      <div class="sheet-title">How to Grow Arugula</div>237      <button class="close-btn" aria-label="Close">238        <svg viewBox="0 0 24 24" width="64" height="64" stroke="#7B8794" stroke-width="2" fill="none" stroke-linecap="round">239          <path d="M5 5 L19 19"></path>240          <path d="M19 5 L5 19"></path>241        </svg>242      </button>243    </div>244 245    <div class="brand-bar">246      <svg class="burger" viewBox="0 0 80 60" stroke="#111" stroke-width="6" fill="none" stroke-linecap="round">247        <path d="M10 12 H70"></path>248        <path d="M10 30 H70"></path>249        <path d="M10 48 H70"></path>250      </svg>251 252      <!-- Simple leaf logo -->253      <svg width="84" height="84" viewBox="0 0 84 84">254        <circle cx="42" cy="42" r="42" fill="none"></circle>255        <path d="M42 46c-10 0-18-8-18-18 12 0 18 8 18 18z" fill="#49D4A0"></path>256        <path d="M42 46c10 0 18-8 18-18-12 0-18 8-18 18z" fill="#7BE6B7"></path>257        <rect x="40" y="46" width="4" height="16" rx="2" fill="#49D4A0"></rect>258      </svg>259      <div class="flora-text">FLORA</div>260    </div>261 262    <div class="content">263      <p>Consistently moist. Although your plant’s soil should be watered regularly, be sure not to overwater to protect your plant from bolting.</p>264 265      <p><strong><em>Bolting</em></strong> is a process that occurs when your Arugula plant receives too much water or too much sunlight. Bolting is when the plant goes straight to flowering. When Arugula bolts, its flower sprouts and disperses seeds without developing much foliage.</p>266 267      <div class="promo-img">[IMG: Flora app promotion banner]</div>268 269      <div class="rule-title">Rule of (Green) Thumb:</div>270      <p>How much you water your arugula will depend on your climate. The drier it is, the more frequently you'll have to water your plant!</p>271 272      <div class="illustration">[IMG: Sun & cactus illustration]</div>273    </div>274  </div>275 276  <!-- Home indicator -->277  <div class="home-indicator"></div>278</div>279</body>280</html>