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, Arial, sans-serif;13    color: #111;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #FFFFFF;21  }22 23  /* Layout */24  .content {25    position: absolute;26    top: 0;27    left: 0;28    width: 1080px;29    height: 2400px;30    display: flex;31    flex-direction: column;32    align-items: center;33  }34 35  .illustration {36    width: 640px;37    height: 640px;38    background: #E0E0E0;39    border: 1px solid #BDBDBD;40    border-radius: 28px;41    display: flex;42    align-items: center;43    justify-content: center;44    color: #757575;45    font-size: 34px;46    text-align: center;47    margin-top: 320px;48  }49 50  h1 {51    margin: 48px 0 16px;52    font-size: 54px;53    line-height: 1.2;54    font-weight: 800;55    text-align: center;56    color: #0B0B0B;57  }58 59  .subtitle {60    width: 900px;61    text-align: center;62    font-size: 34px;63    line-height: 1.6;64    color: #97A1B3;65    margin-bottom: 56px;66  }67 68  .primary-btn {69    width: 940px;70    height: 132px;71    background: #11C7A1;72    border-radius: 66px;73    display: flex;74    align-items: center;75    justify-content: center;76    color: #FFFFFF;77    font-size: 44px;78    font-weight: 700;79    text-decoration: none;80    box-shadow: 0 8px 20px rgba(17,199,161,0.25);81  }82 83  .later {84    margin-top: 48px;85    font-size: 36px;86    color: #97A1B3;87  }88 89  /* Simulated device navbar */90  .device-navbar {91    position: absolute;92    bottom: 0;93    left: 0;94    width: 1080px;95    height: 140px;96    background: #000;97    display: flex;98    align-items: center;99    justify-content: center;100  }101  .home-indicator {102    width: 300px;103    height: 10px;104    border-radius: 8px;105    background: #D0D0D0;106    opacity: 0.9;107  }108</style>109</head>110<body>111  <div id="render-target">112    <div class="content">113      <div class="illustration">[IMG: Cute plant illustration]</div>114 115      <h1>Care plan is ready!</h1>116      <div class="subtitle">117        PlantIn has created a custom care plan specially for you.118      </div>119 120      <a href="#" class="primary-btn">Open Plant</a>121 122      <div class="later">Not now</div>123    </div>124 125    <div class="device-navbar">126      <div class="home-indicator"></div>127    </div>128  </div>129</body>130</html>