GD-ML/AndroidCode

1<!DOCTYPE html>2<html>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; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14  }15 16  /* Top dark app area (status + background) */17  .top-bg {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 320px;23    background: #0a3b3e;24  }25  .status {26    color: #eaf6f7;27    font-weight: 600;28    font-size: 34px;29    letter-spacing: 0.2px;30    position: absolute;31    top: 24px;32    left: 28px;33    display: flex;34    align-items: center;35    gap: 24px;36  }37  .status .dot { width: 8px; height: 8px; background: #cde4e6; border-radius: 50%; display: inline-block; }38  .status-right {39    position: absolute;40    top: 24px;41    right: 28px;42    display: flex;43    align-items: center;44    gap: 20px;45    color: #eaf6f7;46    font-size: 28px;47  }48  .learn-text {49    position: absolute;50    right: 40px;51    bottom: 32px;52    color: #2db46c;53    font-size: 64px;54    font-weight: 700;55    opacity: 0.9;56  }57 58  /* White sheet overlay */59  .sheet {60    position: absolute;61    top: 220px;62    left: 0;63    width: 1080px;64    height: 2180px;65    background: #ffffff;66    border-top-left-radius: 80px;67    border-top-right-radius: 80px;68    box-shadow: 0 10px 24px rgba(0,0,0,0.15);69    overflow: hidden;70  }71  .sheet-header {72    display: flex;73    align-items: center;74    justify-content: space-between;75    padding: 52px 52px 38px 52px;76  }77  .title {78    font-size: 58px;79    color: #2a2a2a;80    font-weight: 700;81  }82  .close-btn {83    width: 76px;84    height: 76px;85    border: none;86    background: transparent;87    padding: 0;88  }89  .close-btn svg { width: 76px; height: 76px; }90  .divider {91    height: 4px;92    background: #e9eef0;93    width: 100%;94  }95 96  /* Top navigation with burger + logo */97  .top-nav {98    display: flex;99    align-items: center;100    gap: 28px;101    padding: 36px 40px 26px 40px;102  }103  .menu-btn {104    width: 88px;105    height: 88px;106    border: none;107    background: transparent;108    padding: 0;109  }110  .brand {111    display: flex;112    align-items: center;113    gap: 22px;114  }115  .brand-name {116    font-size: 48px;117    font-weight: 800;118    color: #111;119    letter-spacing: 1px;120  }121  .leaf-logo { width: 110px; height: 82px; }122 123  /* Banner image placeholder */124  .banner {125    margin: 0 40px;126    height: 280px;127    background: #E0E0E0;128    border: 1px solid #BDBDBD;129    border-radius: 30px;130    display: flex; align-items: center; justify-content: center;131    color: #757575; font-size: 36px; font-weight: 600;132  }133 134  /* Content sections */135  .content {136    padding: 10px 40px 40px 40px;137  }138  .icon-center { display: flex; justify-content: center; margin-top: 80px; margin-bottom: 40px; }139  .droplet { width: 220px; height: 260px; }140  .section-title {141    font-size: 44px;142    font-weight: 800;143    color: #111111;144    margin: 24px 0 16px 0;145    text-transform: uppercase;146    letter-spacing: 0.3px;147  }148  .section-text {149    font-size: 34px;150    line-height: 1.45;151    color: #222;152  }153 154  /* Placeholder for complex icon */155  .icon-placeholder {156    width: 240px; height: 220px;157    background: #E0E0E0;158    border: 1px solid #BDBDBD;159    border-radius: 20px;160    margin: 50px auto 20px auto;161    display: flex; align-items: center; justify-content: center;162    color: #757575; font-size: 28px; font-weight: 600;163  }164 165  /* Home indicator */166  .home-indicator {167    position: absolute;168    bottom: 24px;169    left: 50%;170    transform: translateX(-50%);171    width: 300px;172    height: 14px;173    background: #C0C3C7;174    border-radius: 10px;175    opacity: 0.9;176  }177</style>178</head>179<body>180<div id="render-target">181  <div class="top-bg">182    <div class="status">183      <span>3:45</span>184      <span class="dot"></span><span class="dot"></span><span class="dot"></span>185      <span class="dot"></span>186    </div>187    <div class="status-right">188      <span>◦</span>189      <span>⌁</span>190      <span>🔋</span>191    </div>192    <div class="learn-text">Learn</div>193  </div>194 195  <div class="sheet">196    <div class="sheet-header">197      <div class="title">How to Grow Arugula</div>198      <button class="close-btn" aria-label="Close">199        <svg viewBox="0 0 48 48">200          <line x1="10" y1="10" x2="38" y2="38" stroke="#7b8794" stroke-width="4" stroke-linecap="round"></line>201          <line x1="38" y1="10" x2="10" y2="38" stroke="#7b8794" stroke-width="4" stroke-linecap="round"></line>202        </svg>203      </button>204    </div>205    <div class="divider"></div>206 207    <div class="top-nav">208      <button class="menu-btn" aria-label="Menu">209        <svg viewBox="0 0 100 100">210          <rect x="10" y="20" width="80" height="8" fill="#111"></rect>211          <rect x="10" y="46" width="80" height="8" fill="#111"></rect>212          <rect x="10" y="72" width="80" height="8" fill="#111"></rect>213        </svg>214      </button>215      <div class="brand">216        <svg class="leaf-logo" viewBox="0 0 120 90">217          <!-- center leaf -->218          <path d="M60 20 C70 35 70 55 60 70 C50 55 50 35 60 20 Z" fill="#51d1a6"></path>219          <!-- left leaf -->220          <path d="M36 30 C20 45 20 65 36 72 C40 60 45 50 48 42 C43 38 39 34 36 30 Z" fill="#64e0b6"></path>221          <!-- right leaf -->222          <path d="M84 30 C100 45 100 65 84 72 C80 60 75 50 72 42 C77 38 81 34 84 30 Z" fill="#38cfa1"></path>223        </svg>224        <span class="brand-name">FLORA</span>225      </div>226    </div>227 228    <div class="banner">[IMG: Arugula Banner]</div>229 230    <div class="content">231      <div class="icon-center">232        <svg class="droplet" viewBox="0 0 200 240">233          <!-- droplet -->234          <path d="M100 20 L135 80 A85 85 0 1 1 65 80 Z" fill="#b8e2f2" stroke="#79b8d1" stroke-width="6"></path>235          <!-- highlights -->236          <circle cx="122" cy="70" r="10" fill="#d8f1fb"></circle>237          <rect x="110" y="52" width="20" height="10" rx="5" fill="#d8f1fb"></rect>238          <!-- percent sign -->239          <line x1="70" y1="150" x2="130" y2="110" stroke="#0b2b33" stroke-width="10" stroke-linecap="round"></line>240          <circle cx="60" cy="170" r="16" fill="none" stroke="#0b2b33" stroke-width="10"></circle>241          <circle cx="140" cy="98" r="16" fill="none" stroke="#0b2b33" stroke-width="10"></circle>242        </svg>243      </div>244 245      <div class="section-title">Arugula Humidity Requirements:</div>246      <div class="section-text">247        Arugula prefers drier climates, so providing any excessive levels of humidity is not preferred. - Remember though, that the drier the climate the more frequently you'll have to water your plant!248      </div>249 250      <div class="icon-placeholder">[ICON: Hand with Plant]</div>251 252      <div class="section-title">Arugula Soil:</div>253      <div class="section-text">254        Now that you have the perfect spot for your little Arugula seedlings, you have to ensure that the soil is just right!255      </div>256    </div>257  </div>258 259  <div class="home-indicator"></div>260</div>261</body>262</html>