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>Care Plan Ready</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;13    color: #1B1C1E;14  }15 16  #render-target {17    width: 1080px;18    height: 2400px;19    position: relative;20    overflow: hidden;21    background: #FFFFFF;22  }23 24  .content {25    position: relative;26    width: 100%;27    height: 100%;28    text-align: center;29  }30 31  .illustration {32    width: 560px;33    height: 560px;34    margin: 260px auto 40px auto;35    background: #E0E0E0;36    border: 1px solid #BDBDBD;37    border-radius: 24px;38    display: flex;39    align-items: center;40    justify-content: center;41    color: #757575;42    font-size: 32px;43    letter-spacing: 0.2px;44  }45 46  .title {47    font-size: 58px;48    font-weight: 800;49    margin: 10px 80px 22px 80px;50  }51 52  .subtitle {53    color: #98A3B3;54    font-size: 36px;55    line-height: 1.5;56    margin: 0 auto 60px auto;57    max-width: 880px;58  }59 60  .cta {61    width: 1000px;62    height: 128px;63    margin: 0 auto 36px auto;64    background: #0ACF9F;65    border-radius: 64px;66    display: flex;67    align-items: center;68    justify-content: center;69    color: #FFFFFF;70    font-size: 44px;71    font-weight: 700;72    box-shadow: 0 6px 12px rgba(10, 207, 159, 0.25);73    letter-spacing: 0.3px;74  }75 76  .secondary {77    font-size: 36px;78    color: #9BA6B2;79    margin-top: 18px;80  }81 82  /* Bottom gesture area */83  .gesture-wrap {84    position: absolute;85    bottom: 0;86    left: 0;87    width: 1080px;88    height: 140px;89    background: #000000;90    display: flex;91    align-items: center;92    justify-content: center;93  }94 95  .gesture-bar {96    width: 280px;97    height: 12px;98    background: #D6D6D6;99    border-radius: 12px;100    opacity: 0.9;101  }102</style>103</head>104<body>105  <div id="render-target">106    <div class="content">107      <div class="illustration">[IMG: Plant Illustration]</div>108 109      <div class="title">Care plan is ready!</div>110      <div class="subtitle">PlantIn has created a custom care plan specially for you.</div>111 112      <div class="cta">Open Plant</div>113      <div class="secondary">Not now</div>114    </div>115 116    <div class="gesture-wrap">117      <div class="gesture-bar"></div>118    </div>119  </div>120</body>121</html>