GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Care Learn Feed</title>6<style>7 body { margin:0; padding:0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; }8 #render-target {9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background: linear-gradient(180deg, #0c4b50 0%, #093a41 35%, #082f36 100%);11 color:#ffffff;12 }13 14 /* Status bar */15 .status {16 position:absolute; top:20px; left:40px; right:40px; height:60px;17 display:flex; align-items:center; justify-content:space-between; color:#ffffff;18 opacity:0.9;19 font-weight:600; font-size:38px;20 }21 .status .left, .status .right { display:flex; align-items:center; gap:24px; }22 .dot { width:10px; height:10px; background:#b8d2d5; border-radius:50%; display:inline-block; }23 24 .icon-wifi, .icon-battery { width:44px; height:44px; }25 .icon-wifi path { fill:none; stroke:#e6fbff; stroke-width:6; stroke-linecap:round; }26 .icon-battery rect, .icon-battery path { fill:#e6fbff; }27 28 /* Header titles */29 .header {30 position:absolute; top:100px; left:0; right:0; height:140px;31 display:flex; align-items:center; justify-content:space-between; padding:0 48px;32 }33 .header .title-left {34 font-size:86px; font-weight:800; color:#9db6b8; letter-spacing:1px;35 }36 .header .title-right {37 font-size:86px; font-weight:800; color:#39d07a; letter-spacing:1px;38 }39 .segment-line {40 position:absolute; top:210px; left:0; right:0; height:8px;41 background: linear-gradient(90deg, #34c471 55%, #1f6d5f 55%);42 }43 44 /* Card list */45 .content {46 position:absolute; top:248px; left:40px; right:40px; bottom:330px;47 padding-bottom:20px;48 }49 .card {50 position:relative; width:100%; height:520px; border-radius:36px; overflow:hidden;51 margin:40px 0;52 box-shadow: 0 18px 40px rgba(0,0,0,0.35);53 }54 .card .img {55 position:absolute; inset:0;56 background:#E0E0E0;57 border:1px solid #BDBDBD;58 display:flex; align-items:center; justify-content:center;59 color:#757575; font-size:36px; font-weight:600;60 }61 .card .overlay {62 position:absolute; inset:0;63 background: linear-gradient(180deg, rgba(20,31,36,0.55) 10%, rgba(8,20,24,0.25) 40%, rgba(0,0,0,0.5) 100%);64 pointer-events:none;65 }66 .card .text {67 position:absolute; left:40px; right:40px; bottom:40px; color:#ffffff;68 }69 .card .date {70 position:absolute; top:40px; left:40px; color:#e4eff0; font-size:34px; font-weight:600; opacity:0.9;71 }72 .card .title {73 font-size:60px; font-weight:800; line-height:1.15; margin-bottom:26px;74 text-shadow: 0 3px 6px rgba(0,0,0,0.25);75 }76 .card .more {77 position:absolute; right:40px; bottom:40px; color:#54cbe6; font-size:40px; font-weight:700;78 }79 80 /* Show more + Add button */81 .more-section {82 position:absolute; left:0; right:0; bottom:560px; text-align:center;83 color:#7fd6e8; font-size:44px; font-weight:700;84 }85 .add-btn {86 position:absolute; left:50%; transform:translateX(-50%); bottom:440px;87 width:340px; height:120px; border-radius:60px;88 background: linear-gradient(180deg, #53e381 0%, #2fc66f 100%);89 box-shadow: 0 18px 30px rgba(30, 180, 110, 0.45), inset 0 2px 0 rgba(255,255,255,0.35);90 display:flex; align-items:center; justify-content:center; gap:22px;91 color:#ffffff; font-size:50px; font-weight:800;92 }93 .add-btn .plus {94 width:72px; height:72px; background:rgba(255,255,255,0.18); border-radius:50%;95 display:flex; align-items:center; justify-content:center;96 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5);97 }98 .add-btn .plus svg { width:40px; height:40px; }99 .add-btn .plus path { stroke:#ffffff; stroke-width:10; stroke-linecap:round; }100 101 /* Bottom nav */102 .nav {103 position:absolute; left:0; right:0; bottom:120px; height:220px;104 background: #0a2d34;105 box-shadow: 0 -10px 30px rgba(0,0,0,0.35);106 display:flex; align-items:center; justify-content:space-around;107 }108 .nav-item {109 width:160px; height:160px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;110 color:#cfe6e8; font-size:36px; font-weight:700;111 }112 .nav-item svg { width:72px; height:72px; }113 .nav-item.active { color:#36ce77; }114 .nav-item.active svg path, .nav-item.active svg circle, .nav-item.active svg rect { fill:#36ce77; stroke:#36ce77; }115 .nav-item .indicator {116 position:absolute; top:26px; right:26px; width:22px; height:22px; background:#47e38c; border-radius:50%; border:3px solid #0a2d34;117 }118 119 /* Home indicator */120 .home-indicator {121 position:absolute; left:50%; transform:translateX(-50%); bottom:40px;122 width:360px; height:16px; background:#e9f1f3; border-radius:10px; opacity:0.85;123 }124</style>125</head>126<body>127<div id="render-target">128 129 <!-- Status bar -->130 <div class="status">131 <div class="left">132 <div>3:42</div>133 <span class="dot"></span><span class="dot"></span><span class="dot"></span>134 </div>135 <div class="right">136 <svg class="icon-wifi" viewBox="0 0 24 24">137 <path d="M3 8c9-7 9-7 18 0M6 11c6-5 6-5 12 0M9 14c3-3 3-3 6 0M12 18l0.01 0"></path>138 </svg>139 <svg class="icon-battery" viewBox="0 0 28 18">140 <rect x="1" y="3" width="22" height="12" rx="2"></rect>141 <rect x="24" y="6" width="3" height="6" rx="1"></rect>142 </svg>143 </div>144 </div>145 146 <!-- Header -->147 <div class="header">148 <div class="title-left">Care</div>149 <div class="title-right">Learn</div>150 </div>151 <div class="segment-line"></div>152 153 <!-- Content cards -->154 <div class="content">155 <!-- Card 1 -->156 <div class="card">157 <div class="img">[IMG: Hedge plants]</div>158 <div class="overlay"></div>159 <div class="date">September 02, 2022</div>160 <div class="text">161 <div class="title">5 Best Hedge Plants for your Garden</div>162 </div>163 <div class="more">Read more</div>164 </div>165 166 <!-- Card 2 -->167 <div class="card">168 <div class="img">[IMG: Vertical garden layered planters]</div>169 <div class="overlay"></div>170 <div class="date">September 02, 2022</div>171 <div class="text">172 <div class="title">Best Vertical Garden Ideas for 2022</div>173 </div>174 <div class="more">Read more</div>175 </div>176 177 <!-- Card 3 -->178 <div class="card">179 <div class="img">[IMG: Snake plant pots]</div>180 <div class="overlay"></div>181 <div class="date">September 02, 2022</div>182 <div class="text">183 <div class="title">Snake Plant Benefits - All You Need to Know</div>184 </div>185 <div class="more">Read more</div>186 </div>187 </div>188 189 <!-- Show more & Add -->190 <div class="more-section">Show more</div>191 <div class="add-btn">192 <div class="plus">193 <svg viewBox="0 0 24 24">194 <path d="M12 5v14M5 12h14"></path>195 </svg>196 </div>197 <div>+ Add</div>198 </div>199 200 <!-- Bottom navigation -->201 <div class="nav">202 <div class="nav-item active">203 <svg viewBox="0 0 24 24">204 <path d="M12 3l9 8v8a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1v-8l9-8z" fill="#cfe6e8"></path>205 </svg>206 <div>Home</div>207 </div>208 <div class="nav-item">209 <svg viewBox="0 0 24 24">210 <path d="M12 2c3 5-2 9-2 9s6-2 9 3c-5 3-9-2-9-2s-4 7-3 9c-5-3-3-10 1-14 3-3 4-4 4-5z" fill="#cfe6e8"></path>211 </svg>212 <div>Plants</div>213 </div>214 <div class="nav-item">215 <svg viewBox="0 0 24 24">216 <path d="M12 4c3 0 5 2 5 5v7c0 2-2 4-5 4s-5-2-5-4V9c0-3 2-5 5-5zm-2 6a2 2 0 1 0 4 0" fill="#cfe6e8"></path>217 </svg>218 <div>Pod</div>219 </div>220 <div class="nav-item" style="position:relative;">221 <span class="indicator"></span>222 <svg viewBox="0 0 24 24">223 <path d="M12 2c-3 4-5 7-5 10 0 3 2 5 5 5s5-2 5-5c0-3-2-6-5-10zm-2 13l7-7" fill="none" stroke="#cfe6e8" stroke-width="2"></path>224 </svg>225 <div>Community</div>226 </div>227 <div class="nav-item">228 <svg viewBox="0 0 24 24">229 <circle cx="12" cy="8" r="4" fill="#cfe6e8"></circle>230 <path d="M4 21c0-4 4-7 8-7s8 3 8 7" fill="#cfe6e8"></path>231 </svg>232 <div>Profile</div>233 </div>234 </div>235 236 <div class="home-indicator"></div>237</div>238</body>239</html>