GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Plant Care - Successfully Added</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: "Helvetica Neue", Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #0d2a35; /* deep navy */13    color: #ffffff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 120px;23    display: flex;24    align-items: center;25    padding: 0 40px;26    box-sizing: border-box;27    color: #dbe8ee;28    font-weight: 600;29    letter-spacing: 0.5px;30    font-size: 42px;31  }32  .status-bar .spacer { flex: 1; }33  .status-icons {34    display: flex;35    align-items: center;36    gap: 26px;37  }38  .icon-dot {39    width: 28px; height: 28px; background: #dbe8ee; border-radius: 50%;40  }41  .icon-battery, .icon-wifi {42    width: 44px; height: 28px; border: 3px solid #dbe8ee; border-radius: 6px; position: relative;43  }44  .icon-battery::after {45    content: ""; position: absolute; right: -10px; top: 8px; width: 6px; height: 12px; background: #dbe8ee; border-radius: 2px;46  }47  .icon-wifi {48    border: none;49  }50  .icon-wifi::before, .icon-wifi::after {51    content: ""; position: absolute; left: 6px; right: 6px; border: 3px solid #dbe8ee; border-color: #dbe8ee transparent transparent transparent; border-radius: 50%; }52  .icon-wifi::before { top: 2px; height: 22px; }53  .icon-wifi::after { top: 10px; height: 12px; }54 55  /* Main content */56  .content {57    position: absolute;58    top: 180px;59    left: 60px;60    right: 60px;61  }62 63  .illustration {64    width: 960px;65    height: 420px;66    margin: 0 auto 40px auto;67    background: #E0E0E0;68    border: 1px solid #BDBDBD;69    border-radius: 24px;70    display: flex;71    align-items: center;72    justify-content: center;73    color: #2f2f2f;74    font-size: 40px;75    font-weight: 600;76  }77 78  .title {79    text-align: center;80    font-size: 72px;81    line-height: 1.15;82    font-weight: 700;83    margin-top: 30px;84    margin-bottom: 16px;85  }86  .plant-name {87    text-align: center;88    font-size: 78px;89    font-weight: 800;90    margin-bottom: 30px;91  }92  .subtitle {93    text-align: center;94    font-size: 42px;95    color: #cfe3ea;96    margin-bottom: 40px;97  }98 99  .card {100    background: #102f3a;101    border-radius: 36px;102    padding: 50px 60px;103    margin: 30px 0;104    box-shadow: 0 10px 20px rgba(0,0,0,0.25) inset;105  }106  .card-row {107    display: flex;108    align-items: center;109  }110  .drop-icon {111    width: 110px; height: 110px; border-radius: 50%;112    background: #5bbcff;113    display: flex; align-items: center; justify-content: center;114    margin-right: 30px;115  }116  .drop-icon svg { width: 64px; height: 64px; }117  .water-text h3 {118    margin: 0; font-size: 56px; font-weight: 800; letter-spacing: 0.5px;119  }120  .water-text p {121    margin: 14px 0 0 0; font-size: 40px; color: #cfe3ea;122  }123  .water-emph { color: #ffffff; font-weight: 800; }124 125  .water-can {126    margin-left: auto;127    width: 260px; height: 180px;128    display: flex; align-items: center; justify-content: center;129    border-radius: 20px;130    border: 1px dashed #3a5663;131    color: #98b9c6; font-size: 30px; font-weight: 700;132  }133 134  /* Second card */135  .check-badge {136    width: 120px; height: 120px; border-radius: 60px; background: #66d37a;137    display: flex; align-items: center; justify-content: center; margin-right: 30px;138  }139  .check-badge svg { width: 70px; height: 70px; }140  .info-text {141    font-size: 40px; color: #cfe3ea; line-height: 1.35;142  }143  .icons-row {144    display: flex; gap: 28px; margin-top: 28px;145  }146  .mini-icon {147    width: 70px; height: 70px; border-radius: 18px; background: #14414f;148    display: flex; align-items: center; justify-content: center;149    border: 1px solid #355a66;150  }151  .mini-icon.sun { background: #ffd45e; border-color: #d3a93b; }152  .mini-icon.pot { background: #d6a15f; }153  .mini-icon.pot2 { background: #c8884c; }154  .mini-icon.seed { background: #7fc66f; }155  .mini-icon.star { background: #334b68; }156  .mini-icon.plus { background: #6bd28a; }157 158  /* Button area */159  .button-area {160    position: absolute;161    left: 60px;162    right: 60px;163    bottom: 160px;164  }165  .decor-sun {166    width: 110px; height: 110px; margin-left: 20px; margin-bottom: 20px;167    position: relative;168  }169  .decor-sun .circle {170    width: 60px; height: 60px; background: #ffd45e; border-radius: 50%; position: absolute; left: 20px; top: 20px;171    box-shadow: 0 0 0 6px rgba(255,212,94,0.4);172  }173  .decor-sun .ray { position: absolute; background: #ffd45e; width: 8px; height: 24px; border-radius: 4px; }174  .decor-sun .ray.r1 { top: 0; left: 48px; }175  .decor-sun .ray.r2 { bottom: 0; left: 48px; }176  .decor-sun .ray.r3 { top: 48px; left: 0; width: 24px; height: 8px; }177  .decor-sun .ray.r4 { top: 48px; right: 0; width: 24px; height: 8px; }178 179  .cta-button {180    width: 100%;181    height: 150px;182    border-radius: 40px;183    background: linear-gradient(90deg, #8bd64f, #5ad1c8);184    display: flex;185    align-items: center;186    justify-content: center;187    color: #08313f;188    font-size: 56px;189    font-weight: 800;190    letter-spacing: 0.5px;191    box-shadow: 0 12px 24px rgba(0,0,0,0.35);192  }193</style>194</head>195<body>196<div id="render-target">197 198  <!-- Status bar -->199  <div class="status-bar">200    1:37201    <div class="spacer"></div>202    <div class="status-icons">203      <div class="icon-dot"></div>204      <div class="icon-dot"></div>205      <div class="icon-dot"></div>206      <div class="icon-dot"></div>207      <div class="icon-wifi"></div>208      <div class="icon-battery"></div>209    </div>210  </div>211 212  <!-- Content -->213  <div class="content">214    <div class="illustration">[IMG: Plant in bowl with green leaves and check mark]</div>215 216    <div class="title">Successfully added</div>217    <div class="plant-name">Ceecee</div>218    <div class="subtitle">Let’s take care of your plant:</div>219 220    <!-- Water Card -->221    <div class="card">222      <div class="card-row">223        <div class="drop-icon">224          <svg viewBox="0 0 64 64">225            <path d="M32 6 C24 20 12 30 12 42 a20 20 0 0 0 40 0 c0-12-12-22-20-36z" fill="#1ea6ff"></path>226          </svg>227        </div>228        <div class="water-text">229          <h3>Water</h3>230          <p>every <span class="water-emph">7 days</span></p>231        </div>232        <div class="water-can">[Icon: Watering Can]</div>233      </div>234    </div>235 236    <!-- Info Card -->237    <div class="card">238      <div class="card-row">239        <div class="check-badge">240          <svg viewBox="0 0 64 64">241            <circle cx="32" cy="32" r="30" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="6"></circle>242            <path d="M18 34 L28 44 L46 24" stroke="#ffffff" stroke-width="8" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>243          </svg>244        </div>245        <div class="info-text">246          Looks like we don’t have information about your plant. Make sure to add it later!247        </div>248      </div>249      <div class="icons-row">250        <div class="mini-icon sun"></div>251        <div class="mini-icon pot"></div>252        <div class="mini-icon pot2"></div>253        <div class="mini-icon seed"></div>254        <div class="mini-icon star"></div>255        <div class="mini-icon plus"></div>256      </div>257    </div>258  </div>259 260  <!-- Bottom Button -->261  <div class="button-area">262    <div class="decor-sun">263      <div class="circle"></div>264      <div class="ray r1"></div>265      <div class="ray r2"></div>266      <div class="ray r3"></div>267      <div class="ray r4"></div>268    </div>269    <div class="cta-button">Go to my Garden</div>270  </div>271 272</div>273</body>274</html>