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 UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Top hero area */18  .top-hero {19    position: absolute;20    left: 0;21    top: 0;22    width: 1080px;23    height: 380px;24    background: linear-gradient(180deg, #062E2E 0%, #0A3A39 100%);25  }26  .top-hero .word {27    position: absolute;28    font-weight: 700;29    letter-spacing: 0.5px;30  }31  .word.care {32    left: 80px;33    top: 150px;34    font-size: 120px;35    color: #CFECEC;36    opacity: 0.9;37  }38  .word.learn {39    right: 60px;40    top: 110px;41    font-size: 120px;42    color: #2CB66D;43  }44 45  /* Search pill overlay */46  .search-pill {47    position: absolute;48    left: 40px;49    top: 270px;50    width: 1000px;51    height: 160px;52    background: #ffffff;53    border-radius: 80px;54    box-shadow: 0 8px 18px rgba(0,0,0,0.18);55    display: flex;56    align-items: center;57    padding: 0 48px;58  }59  .search-pill .title {60    font-size: 54px;61    font-weight: 700;62    color: #2D3440;63    flex: 1;64  }65  .icon-btn {66    width: 80px;67    height: 80px;68    display: flex;69    align-items: center;70    justify-content: center;71  }72  .icon-btn svg {73    width: 56px;74    height: 56px;75  }76 77  /* Brand navigation bar */78  .brand-bar {79    position: absolute;80    left: 0;81    top: 500px;82    width: 1080px;83    height: 150px;84    background: #ffffff;85    box-shadow: 0 8px 20px rgba(0,0,0,0.12);86    display: flex;87    align-items: center;88    padding: 0 40px;89  }90  .hamburger {91    margin-right: 30px;92  }93  .flora-mark {94    display: flex;95    align-items: center;96    gap: 22px;97  }98  .flora-name {99    font-size: 64px;100    font-weight: 800;101    letter-spacing: 1px;102    color: #0B0C0D;103  }104 105  /* Promo banner placeholder */106  .promo {107    position: absolute;108    left: 60px;109    top: 720px;110    width: 960px;111    height: 370px;112    background: #E0E0E0;113    border: 1px solid #BDBDBD;114    border-radius: 28px;115    display: flex;116    align-items: center;117    justify-content: center;118    color: #757575;119    font-size: 40px;120    text-align: center;121    padding: 20px;122  }123 124  /* Big white space area (content) */125  .content-spacer {126    position: absolute;127    left: 0;128    top: 1120px;129    width: 1080px;130    height: 420px;131    background: #ffffff;132  }133 134  /* Footer */135  .footer {136    position: absolute;137    left: 0;138    top: 1540px;139    width: 1080px;140    height: 760px;141    background: #1F2328;142    color: #FFFFFF;143    padding: 80px 70px;144    box-sizing: border-box;145  }146  .footer-brand {147    display: flex;148    align-items: center;149    gap: 24px;150    margin-bottom: 60px;151  }152  .footer-brand .name {153    font-size: 56px;154    font-weight: 800;155    letter-spacing: 1px;156  }157  .footer-grid {158    display: grid;159    grid-template-columns: 1fr 1fr;160    column-gap: 80px;161    row-gap: 44px;162  }163  .footer a, .footer .item {164    font-size: 46px;165    color: #FFFFFF;166    text-decoration: none;167  }168  .footer .row {169    display: flex;170    align-items: center;171    gap: 22px;172  }173  .social svg {174    width: 60px;175    height: 60px;176  }177 178  /* Home indicator bar */179  .home-indicator {180    position: absolute;181    left: 50%;182    bottom: 38px;183    transform: translateX(-50%);184    width: 420px;185    height: 14px;186    background: #C0C4C7;187    border-radius: 7px;188  }189</style>190</head>191<body>192<div id="render-target">193 194  <!-- Top Hero -->195  <div class="top-hero">196    <div class="word care">Care</div>197    <div class="word learn">Learn</div>198  </div>199 200  <!-- Search pill -->201  <div class="search-pill">202    <div class="title">How to Grow Arugula</div>203    <div class="icon-btn" aria-label="Close">204      <svg viewBox="0 0 24 24">205        <path d="M6 6 L18 18 M18 6 L6 18" stroke="#78838F" stroke-width="2.6" stroke-linecap="round" fill="none"/>206      </svg>207    </div>208  </div>209 210  <!-- Brand Bar -->211  <div class="brand-bar">212    <div class="hamburger">213      <svg viewBox="0 0 24 24">214        <path d="M3 6 H21 M3 12 H21 M3 18 H15" stroke="#1E1F21" stroke-width="2.8" stroke-linecap="round" fill="none"/>215      </svg>216    </div>217    <div class="flora-mark">218      <!-- Simple leaf logo -->219      <svg width="120" height="80" viewBox="0 0 120 80">220        <defs>221          <linearGradient id="g1" x1="0" y1="0" x2="1" y2="1">222            <stop offset="0" stop-color="#9CF3DB"/>223            <stop offset="1" stop-color="#2ACB87"/>224          </linearGradient>225        </defs>226        <!-- center bud -->227        <path d="M60 10 C72 10 80 22 80 34 C80 46 72 58 60 58 C48 58 40 46 40 34 C40 22 48 10 60 10Z" fill="#BDF6E8"/>228        <!-- left leaf -->229        <path d="M25 45 C25 25 45 15 58 38 C54 54 42 63 30 60 C26 58 25 52 25 45Z" fill="url(#g1)"/>230        <!-- right leaf -->231        <path d="M95 45 C95 25 75 15 62 38 C66 54 78 63 90 60 C94 58 95 52 95 45Z" fill="#2ED695"/>232      </svg>233      <div class="flora-name">FLORA</div>234    </div>235  </div>236 237  <!-- Promo banner placeholder -->238  <div class="promo">239    [IMG: Promotional banner showing Flora app screens and plants]240  </div>241 242  <!-- Spacer content area -->243  <div class="content-spacer"></div>244 245  <!-- Footer -->246  <div class="footer">247    <div class="footer-brand">248      <!-- Reuse logo -->249      <svg width="120" height="80" viewBox="0 0 120 80">250        <defs>251          <linearGradient id="g2" x1="0" y1="0" x2="1" y2="1">252            <stop offset="0" stop-color="#9CF3DB"/>253            <stop offset="1" stop-color="#2ACB87"/>254          </linearGradient>255        </defs>256        <path d="M60 10 C72 10 80 22 80 34 C80 46 72 58 60 58 C48 58 40 46 40 34 C40 22 48 10 60 10Z" fill="#BDF6E8"/>257        <path d="M25 45 C25 25 45 15 58 38 C54 54 42 63 30 60 C26 58 25 52 25 45Z" fill="url(#g2)"/>258        <path d="M95 45 C95 25 75 15 62 38 C66 54 78 63 90 60 C94 58 95 52 95 45Z" fill="#2ED695"/>259      </svg>260      <div class="name">FLORA</div>261    </div>262 263    <div class="footer-grid">264      <div class="col">265        <div class="item">Home</div>266        <div class="item">The Flora Pod</div>267        <div class="item">Blog</div>268        <div class="item">Explore Plants</div>269        <div class="item">Terms of Services</div>270      </div>271      <div class="col">272        <div class="item">Contact Us</div>273        <div class="row social">274          <!-- Facebook -->275          <svg viewBox="0 0 24 24">276            <circle cx="12" cy="12" r="11" fill="#3B5998"/>277            <path d="M14.5 8.5H13.2C12.7 8.5 12.5 8.8 12.5 9.3V10.6H14.4L14.1 12.7H12.5V18H10.3V12.7H9V10.6H10.3V9.1C10.3 7.7 11.2 6.9 12.9 6.9H14.5V8.5Z" fill="#fff"/>278          </svg>279          <div class="item">Facebook</div>280        </div>281        <div class="row social">282          <!-- Instagram -->283          <svg viewBox="0 0 24 24">284            <rect x="3" y="3" width="18" height="18" rx="5" fill="#E1306C"/>285            <circle cx="12" cy="12" r="4.3" fill="#fff"/>286            <circle cx="17.2" cy="6.8" r="1.5" fill="#fff"/>287          </svg>288          <div class="item">Instagram</div>289        </div>290        <div class="row social">291          <!-- TikTok -->292          <svg viewBox="0 0 24 24">293            <circle cx="12" cy="12" r="11" fill="#000"/>294            <path d="M13.5 6.5C14.6 8 16.1 9.1 17.9 9.3V11.5C16.1 11.3 14.6 10.6 13.5 9.6V14.3C13.5 16.2 12 17.6 10.2 17.6C8.4 17.6 7 16.2 7 14.4C7 12.6 8.4 11.2 10.2 11.2C10.7 11.2 11.2 11.3 11.6 11.5V13.6C11.3 13.4 10.9 13.3 10.5 13.3C9.6 13.3 8.9 14 8.9 14.9C8.9 15.8 9.6 16.5 10.5 16.5C11.4 16.5 12.1 15.8 12.1 14.9V6.5H13.5Z" fill="#25F4EE"/>295          </svg>296          <div class="item">TikTok</div>297        </div>298        <div class="item" style="margin-top: 10px; font-weight: 700;">Get our app</div>299      </div>300    </div>301  </div>302 303  <!-- Home indicator bar -->304  <div class="home-indicator"></div>305</div>306</body>307</html>