GD-ML/AndroidCode
13.4k
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 - Flora</title>7<style>8 body{margin:0;padding:0;background:transparent;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#111;}9 #render-target{10 position:relative;11 overflow:hidden;12 width:1080px;13 height:2400px;14 background:#ffffff;15 border-radius:24px;16 box-shadow:0 8px 24px rgba(0,0,0,0.08);17 }18 19 /* Top dark header */20 .top-bar{21 position:absolute;22 left:0;top:0;width:100%;23 height:260px;24 background:#0b3a3b;25 }26 .status{27 height:110px; padding:0 36px; color:#f0f7f7;28 display:flex; align-items:center; justify-content:space-between;29 font-weight:600; font-size:38px;30 }31 .status-right{display:flex; align-items:center; gap:18px;}32 .dot{width:12px;height:12px;background:#cfe9e9;border-radius:50%;}33 .title-row{34 position:absolute; left:0; top:110px; width:100%;35 display:flex; justify-content:space-between; align-items:flex-end;36 padding:0 36px;37 }38 .title-left{font-size:96px; font-weight:700; color:rgba(255,255,255,0.65);}39 .title-right{font-size:84px; font-weight:700; color:#33a266;}40 41 /* Banner image behind sheet */42 .banner{43 position:absolute; left:0; top:260px; width:100%; height:240px;44 display:flex; align-items:center; justify-content:flex-start;45 padding-left:36px;46 background:#E0E0E0; border-top:1px solid #BDBDBD; border-bottom:1px solid #BDBDBD;47 color:#757575; font-weight:600;48 }49 .banner::after{50 content:"[IMG: Plant banner]";51 }52 53 /* The white rounded sheet */54 .sheet{55 position:absolute; left:24px; right:24px; top:350px;56 background:#ffffff;57 border-radius:48px;58 box-shadow:0 8px 18px rgba(0,0,0,0.15);59 }60 .sheet-header{61 display:flex; align-items:center; justify-content:space-between;62 padding:40px 48px 30px;63 border-bottom:1px solid rgba(0,0,0,0.06);64 }65 .sheet-title{66 font-size:48px; font-weight:700; color:#1b1b1b;67 }68 .icon-btn{width:64px;height:64px;border:none;background:transparent;display:flex;align-items:center;justify-content:center;}69 .icon{width:44px;height:44px}70 71 /* Brand row */72 .brand{73 display:flex; align-items:center; gap:28px;74 padding:28px 48px;75 }76 .hamburger .icon{width:60px;height:60px}77 .logo{78 display:flex; align-items:center; gap:22px;79 }80 .logo-text{font-weight:800; font-size:52px; letter-spacing:1px;}81 82 /* Article content */83 .content{84 padding:10px 64px 140px;85 font-size:36px; line-height:54px; color:#222;86 }87 .content p{margin:28px 0;}88 .content em{font-style:italic;}89 .content b{font-weight:800;}90 91 .img-placeholder{92 width:240px; height:240px; margin:40px auto;93 background:#E0E0E0; border:1px solid #BDBDBD;94 display:flex; align-items:center; justify-content:center;95 color:#757575; font-weight:600; border-radius:20px;96 }97 98 .section-title{99 margin-top:28px;100 font-size:40px; font-weight:900; letter-spacing:0.4px;101 }102 103 /* Bottom gesture bar */104 .gesture{105 position:absolute; left:50%; transform:translateX(-50%);106 bottom:24px; width:320px; height:20px; background:#c9c9c9; border-radius:12px;107 }108</style>109</head>110<body>111<div id="render-target">112 113 <!-- Dark header with status and page titles -->114 <div class="top-bar">115 <div class="status">116 <div>3:46</div>117 <div class="status-right">118 <div class="dot"></div>119 <div class="dot"></div>120 <div class="dot"></div>121 <div class="dot"></div>122 <div class="dot"></div>123 </div>124 </div>125 <div class="title-row">126 <div class="title-left">Care</div>127 <div class="title-right">Learn</div>128 </div>129 </div>130 131 <!-- Banner image placeholder -->132 <div class="banner"></div>133 134 <!-- White sheet with title -->135 <div class="sheet">136 <div class="sheet-header">137 <div class="sheet-title">How to Grow Arugula</div>138 <button class="icon-btn" aria-label="Close">139 <svg class="icon" viewBox="0 0 24 24">140 <path d="M6 6 L18 18 M18 6 L6 18" stroke="#808080" stroke-width="2.6" stroke-linecap="round" fill="none"/>141 </svg>142 </button>143 </div>144 145 <!-- Brand row -->146 <div class="brand">147 <div class="hamburger">148 <svg class="icon" viewBox="0 0 24 24">149 <path d="M3 6 H21 M3 12 H21 M3 18 H16" stroke="#111" stroke-width="2.6" stroke-linecap="round" fill="none"/>150 </svg>151 </div>152 <div class="logo">153 <svg width="88" height="60" viewBox="0 0 88 60">154 <path d="M20 42 C12 34 12 22 20 14 C24 10 30 8 36 8 C34 18 28 28 20 42" fill="#6ed0a4"/>155 <path d="M68 42 C76 34 76 22 68 14 C64 10 58 8 52 8 C54 18 60 28 68 42" fill="#3ac08f"/>156 <rect x="40" y="26" width="8" height="22" rx="4" fill="#3ac08f"/>157 </svg>158 <div class="logo-text">FLORA</div>159 </div>160 </div>161 162 <!-- Article content -->163 <div class="content">164 <p>The perfect soil for your Arugula plant is <b><em>loamy soil</em></b>. Loamy soil is well-draining and fertile soil. It is equal parts sand/silt/clay. This soil type tends to be acidic but is high in nutrients and retains moisture very well.</p>165 166 <p>In addition to loamy soil, your Arugula plant thrives in slightly acidic soil. Soil with a pH level between 6 and 7 is perfect for this plant.</p>167 168 <div class="img-placeholder">[IMG: Plant illustration]</div>169 170 <div class="section-title">SOWING ARUGULA SEEDS:</div>171 <p>Once you have a sunny spot and have prepared your garden with loamy soil, it is time to sow your Arugula seed!</p>172 173 <p>Your seeds should be placed about ¼ an inch into the soil and about 1 inch apart. For each row of seeds, make sure there is about 10 inches between each Arugula plant spacing.</p>174 175 <p>Water gently and keep the soil consistently moist while the seeds germinate. Thin seedlings if they become crowded to ensure healthy growth.</p>176 </div>177 </div>178 179 <!-- Bottom gesture bar -->180 <div class="gesture"></div>181</div>182</body>183</html>