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>Plant details UI</title>7<style>8  :root{9    --green:#1F7A2E;10    --light-green:#E9F5E9;11    --text:#13312C;12    --muted:#4D5D57;13  }14  body{ margin:0; padding:0; background:transparent; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; color:var(--text); }15  #render-target{16    width:1080px; height:2400px; position:relative; overflow:hidden;17    background:#ffffff;18  }19 20  /* Status bar */21  .status-bar{22    height:120px; padding:0 40px;23    display:flex; align-items:flex-end; justify-content:space-between; color:#616161;24    font-size:40px;25  }26  .status-right{ display:flex; align-items:flex-end; gap:28px; }27  .icon-cloud, .icon-signal, .icon-battery{ width:44px; height:44px; }28  .icon-cloud{ border-radius:22px; background:#D8D8D8; }29  .icon-signal{ border-bottom:18px solid #888; border-left:18px solid transparent; height:0; width:36px; }30  .icon-battery{ border:4px solid #888; border-radius:6px; position:relative; }31  .icon-battery::after{ content:""; position:absolute; right:-10px; top:12px; width:8px; height:20px; background:#888; border-radius:2px; }32 33  /* Header */34  .header{ position:relative; height:120px; margin-top:12px; }35  .back-btn{ position:absolute; left:36px; top:12px; width:80px; height:80px; background:transparent; border:none; }36  .back-btn svg{ width:80px; height:80px; }37  .title{ text-align:center; font-weight:700; color:var(--green); font-size:64px; line-height:120px; }38 39  /* Content */40  .content{ padding:0 36px; }41 42  .image-card{43    margin-top:32px; height:640px; border-radius:28px; position:relative; overflow:hidden;44  }45  .image-card .img{46    width:100%; height:100%;47    background:#E0E0E0; border:1px solid #BDBDBD;48    display:flex; justify-content:center; align-items:center; color:#757575; font-size:44px;49  }50  .expand-icon{ position:absolute; right:24px; top:24px; width:70px; height:70px; opacity:0.95; }51  .expand-icon svg{ width:70px; height:70px; }52  .carousel-dots{ position:absolute; bottom:92px; left:50%; transform:translateX(-50%); display:flex; gap:18px; }53  .carousel-dots span{ width:16px; height:16px; background:#fff; opacity:0.9; border-radius:8px; }54  .page-chip{55    position:absolute; right:24px; bottom:24px;56    background:rgba(255,255,255,0.8); color:#666; font-size:40px; padding:12px 22px; border-radius:26px;57  }58 59  .name-card{60    margin-top:24px; background:var(--light-green); border-radius:28px; padding:36px; position:relative;61  }62  .plant-title{ font-size:64px; font-weight:800; color:var(--green); margin-bottom:18px; }63  .plant-sub{ font-size:44px; color:#243A35; opacity:0.9; }64  .share-btn{65    position:absolute; right:28px; bottom:28px; width:86px; height:86px; border-radius:24px;66    display:flex; align-items:center; justify-content:center;67  }68  .share-btn svg{ width:64px; height:64px; }69 70  .tabs{ display:flex; align-items:center; gap:40px; margin-top:36px; padding:0 8px; font-size:48px; }71  .tab{ color:#5A7A71; }72  .tab.active{ color:var(--green); font-weight:700; }73  .crown{ width:50px; height:50px; vertical-align:middle; margin-right:12px; }74  .underline{ height:8px; background:#CFE4CF; margin-top:14px; border-radius:4px; overflow:hidden; }75  .underline .progress{ width:45%; height:100%; background:var(--green); }76 77  .desc-card{ margin-top:32px; background:var(--light-green); border-radius:28px; padding:36px; }78  .desc-card p{ font-size:42px; line-height:64px; color:#1F2E2A; }79  .desc-card .read-more{ color:var(--green); font-weight:700; }80 81  .promo-card{ margin-top:28px; border-radius:28px; position:relative; overflow:hidden; }82  .promo-bg{83    width:100%; height:520px; background:#E0E0E0; border:1px solid #BDBDBD;84    display:flex; align-items:center; justify-content:center; color:#757575; font-size:40px;85    border-radius:28px;86  }87  .promo-content{88    position:absolute; left:0; top:0; width:100%; height:520px; display:flex; flex-direction:column;89    align-items:center; justify-content:center; text-align:center; padding:0 40px;90  }91  .promo-text{ font-size:48px; line-height:72px; color:#1E3A33; font-weight:700; max-width:900px; }92  .cta-btn{93    margin-top:36px; background:var(--green); color:#fff; border:none; border-radius:48px; padding:32px 120px;94    font-size:52px; font-weight:800; box-shadow:0 4px 0 rgba(0,0,0,0.08);95  }96 97  /* Gesture bar */98  .gesture-bar{99    position:absolute; bottom:28px; left:50%; transform:translateX(-50%);100    width:360px; height:18px; background:#CFCFCF; border-radius:12px;101  }102</style>103</head>104<body>105<div id="render-target">106 107  <div class="status-bar">108    <div style="display:flex; align-items:flex-end; gap:16px;">109      <div style="font-weight:600;">9:10</div>110      <div class="icon-cloud"></div>111    </div>112    <div class="status-right">113      <div class="icon-signal"></div>114      <div class="icon-battery"></div>115    </div>116  </div>117 118  <div class="header">119    <button class="back-btn" aria-label="Back">120      <svg viewBox="0 0 24 24">121        <path d="M15 18l-6-6 6-6" stroke="#1F7A2E" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>122      </svg>123    </button>124    <div class="title">Plant details</div>125  </div>126 127  <div class="content">128 129    <div class="image-card">130      <div class="img">[IMG: Plant photo]</div>131      <div class="expand-icon">132        <svg viewBox="0 0 24 24">133          <path d="M4 10V4h6M20 10V4h-6M4 14v6h6M20 14v6h-6" stroke="#FFFFFF" stroke-width="2.2" fill="none" stroke-linecap="round"/>134        </svg>135      </div>136      <div class="carousel-dots">137        <span></span><span></span><span></span><span></span><span></span><span></span><span></span>138      </div>139      <div class="page-chip">1 / 8</div>140    </div>141 142    <div class="name-card">143      <div class="plant-title">Schefflera actinophylla</div>144      <div class="plant-sub">Schefflera versteegii</div>145      <div class="share-btn" aria-label="Share">146        <svg viewBox="0 0 24 24">147          <path d="M12 4v9M8 8l4-4 4 4" stroke="#1F7A2E" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>148          <path d="M5 20h14" stroke="#1F7A2E" stroke-width="2.2" fill="none" stroke-linecap="round"/>149        </svg>150      </div>151    </div>152 153    <div class="tabs">154      <div class="tab active">Description</div>155      <div class="tab">156        <svg class="crown" viewBox="0 0 24 24">157          <path d="M3 17h18l-2-8-4 3-4-5-4 5-4-3z" fill="#F4C21E"/>158        </svg>159        How to grow160      </div>161    </div>162    <div class="underline"><div class="progress"></div></div>163 164    <div class="desc-card">165      <p>Schefflera versteegii is a species of flowering plant in the family Araliaceae, native to Papua New Guinea. It is a small tree or shrub that can grow up to 6 meters tall. The leaves a… <span class="read-more">Read more</span></p>166    </div>167 168    <div class="promo-card">169      <div class="promo-bg">[IMG: Watercolor leaves background]</div>170      <div class="promo-content">171        <div class="promo-text">New detailed plant care instructions are a premium feature!</div>172        <button class="cta-btn">Claim my offer</button>173      </div>174    </div>175 176  </div>177 178  <div class="gesture-bar"></div>179</div>180</body>181</html>