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 App Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: linear-gradient(180deg, #083f44 0%, #0a3a3f 50%, #08363a 100%);12    color: #e9f6f6;13  }14  .status-bar {15    position: absolute; top: 12px; left: 24px; right: 24px; height: 60px; display: flex; align-items: center; justify-content: space-between;16    font-weight: 600; font-size: 40px; opacity: 0.9;17  }18  .status-icons { display: flex; gap: 26px; align-items: center; }19  .dot { width: 12px; height: 12px; background: #cfe7e7; border-radius: 50%; display: inline-block; }20  .wifi-battery { display: flex; gap: 24px; align-items: center; }21  .banner {22    position: absolute; top: 96px; left: 0; right: 0; height: 150px;23    background: #0c3b3f; border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05);24    display: flex; align-items: center; justify-content: center;25  }26  .banner-inner { width: 980px; display: flex; align-items: center; justify-content: space-between; }27  .banner-text { font-size: 54px; font-weight: 700; letter-spacing: 0.5px; }28  .banner-text .plus { color: #ffcf57; }29  .pill {30    background: linear-gradient(90deg, #56d56d 0%, #7ae0c8 100%);31    color: #103b3f; font-weight: 700; font-size: 44px; border-radius: 48px; height: 110px;32    display: flex; align-items: center; padding: 0 40px; gap: 26px;33    box-shadow: 0 10px 20px rgba(0,0,0,0.25);34  }35  .feedback {36    position: absolute; top: 270px; left: 60px; width: 960px;37  }38  .heading {39    position: absolute; top: 420px; left: 60px; font-size: 120px; font-weight: 800; letter-spacing: 1px;40  }41  .heading .accent { color: #1cd594; }42  .ring-wrap {43    position: absolute; top: 460px; right: 60px; width: 260px; height: 260px;44  }45  .ring {46    width: 260px; height: 260px; border-radius: 50%;47    border: 30px solid #143f47; position: relative;48    box-shadow: inset 0 0 0 6px rgba(255,255,255,0.05);49  }50  .ring::after {51    content: ""; position: absolute; inset: -10px; border-radius: 50%;52    border: 28px solid transparent; border-top-color: #21d28c; border-right-color: #21d28c;53    transform: rotate(20deg);54  }55  .ring-center {56    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center;57    color: #b9dcdf; font-size: 48px;58  }59  .ring-center small { display: block; font-size: 32px; color: #86b8bb; }60  .weather-pill {61    position: absolute; top: 580px; left: 60px; display: inline-flex; align-items: center; gap: 18px;62    background: #455732; color: #ffedd2; font-weight: 700; font-size: 40px; height: 96px; padding: 0 28px; border-radius: 48px;63    box-shadow: 0 8px 16px rgba(0,0,0,0.25);64  }65  .plus-badge {66    position: absolute; top: -14px; right: -14px; width: 44px; height: 44px; background: #ffcf57; color: #2b3a39; border-radius: 50%;67    display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 800;68    box-shadow: 0 6px 12px rgba(0,0,0,0.25);69  }70 71  .switch-bar {72    position: absolute; top: 720px; left: 60px; right: 60px; display: flex; justify-content: space-between; align-items: center;73    color: #72e79f;74  }75  .switch-left, .switch-right { font-size: 70px; font-weight: 800; }76  .switch-right { color: #b2c9ca; }77  .progress-line { position: absolute; top: 810px; left: 60px; right: 60px; height: 6px; background: #738589; }78  .progress-line::before { content: ""; display: block; width: 36%; height: 6px; background: #39da8a; }79 80  .tabs {81    position: absolute; top: 880px; left: 60px; right: 60px; display: flex; gap: 60px; align-items: center;82    color: #98b7bb; font-size: 50px;83  }84  .tab-pill {85    background: #2a615f; color: #bff7cf; border-radius: 36px; padding: 22px 36px; font-weight: 700;86    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.05);87  }88 89  .message {90    position: absolute; top: 1040px; left: 60px; right: 60px; text-align: center; color: #54cbe1;91    font-size: 64px; line-height: 1.35; font-weight: 700;92  }93 94  .koala-img {95    position: absolute; top: 1320px; left: 120px; width: 840px; height: 520px;96    background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; justify-content: center; align-items: center; color: #757575;97    border-radius: 24px;98  }99 100  .add-btn {101    position: absolute; top: 1900px; left: 50%; transform: translateX(-50%);102    width: 360px; height: 110px; border-radius: 56px;103    background: linear-gradient(90deg, #55d173 0%, #8de46f 100%); color: #08363b; font-weight: 900; font-size: 48px;104    display: flex; align-items: center; justify-content: center; gap: 20px;105    box-shadow: 0 16px 30px rgba(0,0,0,0.35);106  }107  .preorder-banner {108    position: absolute; top: 2040px; left: 40px; right: 40px; height: 120px; border-radius: 28px;109    background: #7ed3dd; color: #08363b; font-size: 46px; font-weight: 700; padding: 0 36px;110    display: flex; align-items: center; justify-content: space-between;111    box-shadow: 0 10px 20px rgba(0,0,0,0.25);112  }113 114  .bottom-nav {115    position: absolute; bottom: 120px; left: 0; right: 0; height: 180px; background: rgba(6,30,34,0.95);116    display: flex; justify-content: space-around; align-items: center; color: #cfe7e7; border-top: 1px solid rgba(255,255,255,0.06);117  }118  .nav-item { width: 160px; display: flex; flex-direction: column; align-items: center; gap: 16px; font-size: 36px; }119  .nav-item.active .label { color: #5de28f; font-weight: 800; }120  .notif-dot { position: absolute; top: -4px; right: 36px; width: 18px; height: 18px; background: #5de28f; border-radius: 50%; border: 2px solid #0a3a3f; }121 122  .home-indicator {123    position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);124    width: 360px; height: 16px; border-radius: 12px; background: rgba(255,255,255,0.6);125  }126  /* Utility */127  .svg-ic { width: 46px; height: 46px; }128  .svg-ic.medium { width: 56px; height: 56px; }129  .svg-ic.large { width: 68px; height: 68px; }130</style>131</head>132<body>133<div id="render-target">134 135  <!-- Status bar -->136  <div class="status-bar">137    <div class="status-icons">138      <span>3:41</span>139      <!-- simple app icons -->140      <svg class="svg-ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#cfe7e7"/></svg>141      <svg class="svg-ic" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3" fill="#cfe7e7"/></svg>142      <svg class="svg-ic" viewBox="0 0 24 24"><polygon points="12,2 22,22 2,22" fill="#cfe7e7"/></svg>143      <div class="dot"></div>144    </div>145    <div class="wifi-battery">146      <!-- wifi -->147      <svg class="svg-ic" viewBox="0 0 24 24">148        <path d="M2 9c5-4 15-4 20 0" stroke="#cfe7e7" stroke-width="2" fill="none" />149        <path d="M5 12c3-3 11-3 14 0" stroke="#cfe7e7" stroke-width="2" fill="none" />150        <path d="M8 15c2-2 6-2 8 0" stroke="#cfe7e7" stroke-width="2" fill="none" />151        <circle cx="12" cy="18" r="1.5" fill="#cfe7e7"/>152      </svg>153      <!-- battery -->154      <svg class="svg-ic" viewBox="0 0 24 24">155        <rect x="2" y="7" width="18" height="10" rx="2" stroke="#cfe7e7" stroke-width="2" fill="none"/>156        <rect x="4" y="9" width="10" height="6" rx="1" fill="#cfe7e7"/>157        <rect x="20" y="10" width="2" height="4" rx="1" fill="#cfe7e7"/>158      </svg>159    </div>160  </div>161 162  <!-- Promo banner -->163  <div class="banner">164    <div class="banner-inner">165      <div class="banner-text">Try Flora <span class="plus">Plus</span> for free</div>166      <svg class="svg-ic large" viewBox="0 0 24 24">167        <path d="M8 4l8 8-8 8" stroke="#ffcf57" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>168      </svg>169    </div>170  </div>171 172  <!-- Feedback pill -->173  <div class="feedback pill">174    <svg class="svg-ic medium" viewBox="0 0 24 24">175      <path d="M4 5h16v10H8l-4 4V5z" fill="#ffffff"/>176    </svg>177    <div>Send us Feedback</div>178    <div style="margin-left:auto;">179      <svg class="svg-ic medium" viewBox="0 0 24 24">180        <path d="M8 4l8 8-8 8" stroke="#0a3a3f" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>181      </svg>182    </div>183  </div>184 185  <!-- Heading -->186  <div class="heading">Good <span class="accent">Afternoon!</span></div>187 188  <!-- Progress ring -->189  <div class="ring-wrap">190    <div class="ring"></div>191    <div class="ring-center">192      <svg class="svg-ic" viewBox="0 0 24 24">193        <path d="M12 2c-2 4-5 6-5 9a5 5 0 1 0 10 0c0-3-3-5-5-9z" fill="#ffd87a"/>194      </svg>195      <div>20</div>196      <small>/40</small>197    </div>198  </div>199 200  <!-- Weather pill -->201  <div class="weather-pill">202    <svg class="svg-ic" viewBox="0 0 24 24">203      <path d="M12 2c-2 4-5 6-5 9a5 5 0 1 0 10 0c0-3-3-5-5-9z" fill="#ffcf57"/>204    </svg>205    <span>Flora Plus weather!</span>206    <div class="plus-badge">+</div>207  </div>208 209  <!-- Care/Learn switch -->210  <div class="switch-bar">211    <div class="switch-left">Care</div>212    <div class="switch-right">Learn</div>213  </div>214  <div class="progress-line"></div>215 216  <!-- Tabs -->217  <div class="tabs">218    <div class="tab-pill">Today</div>219    <div>Upcoming</div>220    <div>Vacation mode</div>221  </div>222 223  <!-- Message -->224  <div class="message">225    Your plants are all set for today,<br/> you’ve earned yourself a nap.226  </div>227 228  <!-- Illustration placeholder -->229  <div class="koala-img">[IMG: Sleeping koala illustration on branch]</div>230 231  <!-- Add button -->232  <div class="add-btn">233    <svg class="svg-ic medium" viewBox="0 0 24 24">234      <path d="M12 5v14M5 12h14" stroke="#08363b" stroke-width="3" stroke-linecap="round"/>235    </svg>236    Add237  </div>238 239  <!-- Preorder banner -->240  <div class="preorder-banner">241    <div>Preorder Flora Pod to save your</div>242    <svg class="svg-ic medium" viewBox="0 0 24 24">243      <path d="M8 4l8 8-8 8" stroke="#08363b" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>244    </svg>245  </div>246 247  <!-- Bottom Navigation -->248  <div class="bottom-nav">249    <div class="nav-item active">250      <svg class="svg-ic large" viewBox="0 0 24 24">251        <path d="M3 11l9-7 9 7v9H3v-9z" fill="#5de28f"/>252        <path d="M9 20v-6h6v6" fill="#0a3a3f"/>253      </svg>254      <div class="label">Home</div>255    </div>256    <div class="nav-item">257      <svg class="svg-ic large" viewBox="0 0 24 24">258        <path d="M12 2c-2 4-5 6-5 9a5 5 0 1 0 10 0c0-3-3-5-5-9z" fill="#cfe7e7"/>259      </svg>260      <div class="label">Plants</div>261    </div>262    <div class="nav-item">263      <svg class="svg-ic large" viewBox="0 0 24 24">264        <path d="M7 9a5 5 0 1 1 10 0v7a5 5 0 1 1-10 0V9z" fill="#cfe7e7"/>265        <circle cx="10" cy="12" r="1" fill="#0a3a3f"/>266        <circle cx="14" cy="12" r="1" fill="#0a3a3f"/>267      </svg>268      <div class="label">Pod</div>269    </div>270    <div class="nav-item" style="position:relative;">271      <svg class="svg-ic large" viewBox="0 0 24 24">272        <path d="M4 18l8-3 8 3-8-14-8 14z" fill="#cfe7e7"/>273      </svg>274      <div class="label">Community</div>275      <div class="notif-dot"></div>276    </div>277    <div class="nav-item">278      <svg class="svg-ic large" viewBox="0 0 24 24">279        <circle cx="12" cy="8" r="4" fill="#cfe7e7"/>280        <path d="M4 22c0-4 4-7 8-7s8 3 8 7" fill="#cfe7e7"/>281      </svg>282      <div class="label">Profile</div>283    </div>284  </div>285 286  <!-- Home indicator -->287  <div class="home-indicator"></div>288 289</div>290</body>291</html>