GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>Golden pothos - Add to collection</title>7<style>8  body{margin:0;padding:0;background:transparent;font-family:Roboto, Arial, Helvetica, sans-serif;color:#263238}9  #render-target{10    width:1080px;height:2400px;position:relative;overflow:hidden;11    background:#F4F6F4;12  }13 14  /* Top app bar */15  .appbar{16    position:absolute;left:0;top:0;width:100%;height:220px;17    background:linear-gradient(135deg,#1e7a4e,#167a3e);18    box-shadow:0 2px 8px rgba(0,0,0,0.15);19  }20  .appbar .title{21    position:absolute;left:0;right:0;top:110px;text-align:center;22    color:#D7F1E0;font-weight:700;font-size:54px;letter-spacing:0.5px;23  }24  .icon-btn{25    position:absolute;top:115px;width:96px;height:96px;border:none;background:transparent;cursor:default;26  }27  .icon-left{left:24px}28  .icon-right{right:24px}29 30  /* Content area */31  .content{position:absolute;left:0;right:0;top:240px;bottom:0;overflow:hidden}32  .info-card{33    width:960px;margin:10px auto 36px;background:#CFE7C6;border-radius:28px;padding:32px 36px;34    box-shadow:inset 0 0 0 1px rgba(0,0,0,0.05);35  }36  .info-row{37    display:flex;justify-content:space-between;align-items:center;padding:28px 8px;38    border-bottom:2px dashed rgba(9,71,31,0.35);39    font-size:40px;40  }41  .info-row:last-child{border-bottom:none}42  .info-row .label{font-weight:700;color:#0b6a3b}43  .info-row .value{color:#1b3d2b}44 45  .section-title{46    width:960px;margin:34px auto 18px;font-size:54px;font-weight:800;color:#2d2d2d;47  }48 49  .card{50    width:960px;margin:0 auto;background:#FFFFFF;border-radius:28px;51    box-shadow:0 8px 24px rgba(0,0,0,0.08);52    padding:28px 30px 40px;53  }54  .card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}55  .left-group{display:flex;align-items:center;gap:24px}56  .badge{57    width:108px;height:108px;border-radius:54px;58    background:radial-gradient(circle at 30% 30%, #b7dcff, #69a9ff);59    display:flex;align-items:center;justify-content:center;60  }61  .card-title{font-size:46px;font-weight:700;color:#263238}62  .tip{63    background:#E6D691;border-radius:24px;padding:36px 28px;text-align:center;margin:18px 10px 26px;64    color:#263238;font-size:42px;line-height:1.3;65  }66  .tip b{font-weight:800}67  .card p{68    margin:0 10px;font-size:38px;line-height:1.55;color:#455A64;69  }70 71  /* Bottom sheet overlay */72  .scrim{73    position:absolute;left:0;top:0;width:100%;height:100%;74    background:rgba(0,0,0,0.05);75    z-index:5;76  }77  .sheet{78    position:absolute;left:0;bottom:96px;width:100%;height:760px;background:#fff;79    border-top-left-radius:50px;border-top-right-radius:50px;80    box-shadow:0 -12px 36px rgba(0,0,0,0.25);81    padding:36px 48px 40px;82    z-index:6;83  }84  .sheet-header{85    position:relative;text-align:center;margin-top:12px;margin-bottom:12px;86  }87  .sheet-title{font-size:56px;font-weight:800;color:#212121}88  .sheet .close-btn{position:absolute;right:0;top:0;width:88px;height:88px;border:none;background:transparent}89  .list{margin-top:20px}90  .item{91    display:flex;align-items:center;gap:28px;padding:36px 6px;92    border-top:1px solid #ECEFF1;93  }94  .item:first-child{border-top:1px solid #ECEFF1}95  .item:last-child{border-bottom:1px solid #ECEFF1}96  .item-title{font-size:46px;color:#263238}97  .item .icon{98    width:96px;height:96px;border-radius:16px;background:#E5EAF0;display:flex;align-items:center;justify-content:center;99  }100 101  /* Home indicator */102  .home-indicator{103    position:absolute;left:50%;bottom:24px;transform:translateX(-50%);104    width:300px;height:12px;border-radius:8px;background:#CFCFCF;z-index:7;105  }106</style>107</head>108<body>109<div id="render-target">110 111  <div class="appbar">112    <button class="icon-btn icon-left" aria-label="Back">113      <svg width="96" height="96" viewBox="0 0 48 48">114        <path d="M28 10 L16 24 L28 38" fill="none" stroke="#ECF7EF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>115      </svg>116    </button>117    <div class="title">Golden pothos</div>118    <button class="icon-btn icon-right" aria-label="Close">119      <svg width="96" height="96" viewBox="0 0 48 48">120        <path d="M14 14 L34 34 M34 14 L14 34" stroke="#ECF7EF" stroke-width="4" stroke-linecap="round"/>121      </svg>122    </button>123  </div>124 125  <div class="content">126    <div class="info-card">127      <div class="info-row">128        <div class="label">Native Area</div>129        <div class="value">Solomon Islands</div>130      </div>131      <div class="info-row">132        <div class="label">Planting time</div>133        <div class="value">All year around</div>134      </div>135    </div>136 137    <div class="section-title">Care</div>138 139    <div class="card">140      <div class="card-top">141        <div class="left-group">142          <div class="badge" aria-hidden="true">143            <!-- simple water drop -->144            <svg width="60" height="60" viewBox="0 0 48 48">145              <path d="M24 8 C24 8 10 22 10 30 a14 14 0 0 0 28 0 C38 22 24 8 24 8z" fill="#0f79d3" opacity="0.9"/>146              <circle cx="34" cy="14" r="4" fill="#2d8fea"/>147              <circle cx="14" cy="16" r="4" fill="#2d8fea"/>148            </svg>149          </div>150          <div class="card-title">Water</div>151        </div>152        <svg width="72" height="72" viewBox="0 0 48 48">153          <path d="M12 30 L24 18 L36 30" fill="none" stroke="#9EA7AD" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>154        </svg>155      </div>156 157      <div class="tip">158        Suggested fertilizing<br/>159        frequency<br/>160        <b>Every week</b>161      </div>162 163      <p>164        Your pothos plants will most likely tell you when they need watering. Water immediately when they start to droop. If you wait too long, their leaves may curl and brown at the edges.165      </p>166    </div>167  </div>168 169  <!-- Bottom sheet overlay -->170  <div class="scrim" aria-hidden="true"></div>171 172  <div class="sheet" role="dialog" aria-label="Add to collection">173    <div class="sheet-header">174      <div class="sheet-title">Add to collection</div>175      <button class="close-btn" aria-label="Close">176        <svg width="88" height="88" viewBox="0 0 48 48">177          <path d="M14 14 L34 34 M34 14 L14 34" stroke="#777" stroke-width="4" stroke-linecap="round"/>178        </svg>179      </button>180    </div>181 182    <div class="list">183      <div class="item">184        <div class="icon" aria-hidden="true">185          <!-- Plant pot icon -->186          <svg width="60" height="60" viewBox="0 0 48 48">187            <path d="M12 14 h24 l-2 10 H14z" fill="#9FA8B4"/>188            <path d="M16 26 h16 l-2 10 H18z" fill="#7C8794"/>189            <path d="M18 10 C18 10 22 6 24 6 s6 4 6 4" fill="none" stroke="#7C8794" stroke-width="3" stroke-linecap="round"/>190          </svg>191        </div>192        <div class="item-title">My Plant</div>193      </div>194 195      <div class="item">196        <div class="icon" aria-hidden="true">197          <!-- Folder plus icon -->198          <svg width="60" height="60" viewBox="0 0 48 48">199            <path d="M8 16 h10 l4 4 h18 v16 H8z" fill="#9FA8B4"/>200            <path d="M24 24 v10 M19 29 h10" stroke="#6F7A86" stroke-width="3" stroke-linecap="round"/>201          </svg>202        </div>203        <div class="item-title">Create collection</div>204      </div>205    </div>206  </div>207 208  <div class="home-indicator"></div>209</div>210</body>211</html>