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>Flora - How to Grow Arugula</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #111; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Top dark header */18  .top-hero {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 300px;24    background: #0d2f2f;25  }26 27  /* Status bar */28  .status {29    position: absolute;30    top: 10px;31    left: 24px;32    right: 24px;33    height: 48px;34    display: flex;35    align-items: center;36    color: #e9f4f3;37    font-weight: 600;38  }39  .status .time { font-size: 34px; margin-right: 20px; }40  .status .icons { flex: 1; display: flex; align-items: center; gap: 16px; color: #cfe5e2; }41  .status .right { display: flex; align-items: center; gap: 20px; }42 43  /* Large section label inside hero */44  .hero-label {45    position: absolute;46    bottom: 28px;47    left: 40px;48    font-size: 96px;49    font-weight: 700;50    letter-spacing: 0.5px;51    color: rgba(255,255,255,0.85);52  }53  .hero-learn {54    position: absolute;55    bottom: 34px;56    right: 40px;57    font-size: 72px;58    font-weight: 700;59    color: #2bb463;60  }61 62  /* Overlay title card */63  .overlay-title {64    position: absolute;65    top: 220px;66    left: 24px;67    width: 1032px;68    height: 140px;69    background: #ffffff;70    border-radius: 60px;71    box-shadow: 0 8px 16px rgba(0,0,0,0.18);72    display: flex;73    align-items: center;74    padding: 0 48px;75    z-index: 3;76  }77  .overlay-title h1 {78    margin: 0;79    font-size: 56px;80    font-weight: 800;81    color: #2b2d30;82    letter-spacing: 0.2px;83    flex: 1;84  }85  .icon-btn {86    width: 60px;87    height: 60px;88    display: inline-flex;89    align-items: center;90    justify-content: center;91  }92  .icon-btn svg { width: 44px; height: 44px; }93 94  /* App bar below overlay */95  .appbar {96    position: absolute;97    top: 370px;98    left: 0;99    width: 1080px;100    height: 120px;101    background: #ffffff;102    box-shadow: 0 6px 14px rgba(0,0,0,0.12);103    display: flex;104    align-items: center;105    padding: 0 36px;106    z-index: 2;107  }108  .hamburger svg { width: 72px; height: 72px; }109  .brand {110    margin: 0 auto;111    display: flex;112    align-items: center;113    gap: 20px;114    transform: translateX(-40px); /* approximate center alignment with left icon present */115  }116  .brand .logo svg { width: 90px; height: 90px; }117  .brand .name {118    font-size: 56px;119    font-weight: 800;120    color: #111;121    letter-spacing: 2px;122  }123 124  /* Content */125  .content {126    position: absolute;127    top: 520px;128    left: 0;129    width: 100%;130    padding: 0 44px 120px 44px;131  }132  .content h2 {133    margin: 24px 0 16px 0;134    font-size: 44px;135    font-weight: 900;136    letter-spacing: 0.6px;137  }138  .content p {139    font-size: 40px;140    line-height: 1.55;141    color: #222;142    margin: 22px 0;143  }144 145  /* Image placeholder card */146  .image-card {147    width: 992px;148    height: 520px;149    border-radius: 36px;150    overflow: hidden;151    margin: 40px auto 0 auto;152    border: 1px solid #BDBDBD;153    background: #E0E0E0;154    display: flex;155    align-items: center;156    justify-content: center;157    color: #757575;158    font-size: 36px;159  }160 161  /* Home indicator */162  .home-indicator {163    position: absolute;164    bottom: 60px;165    left: 50%;166    width: 340px;167    height: 16px;168    background: #BEBEBE;169    border-radius: 10px;170    transform: translateX(-50%);171    opacity: 0.7;172  }173</style>174</head>175<body>176<div id="render-target">177 178  <!-- Dark header area -->179  <div class="top-hero">180    <div class="status">181      <div class="time">3:45</div>182