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>Chinese Evergreen - UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #FFFFFF; border-radius: 24px;13    box-shadow: 0 12px 40px rgba(0,0,0,0.08);14    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;15    color: #111;16  }17 18  /* Status bar */19  .status-bar {20    height: 120px;21    padding: 28px 40px 0 40px;22    display: flex; align-items: center; justify-content: space-between;23    color: #2E2E2E; font-weight: 600; font-size: 36px;24  }25  .sb-left, .sb-right { display: flex; align-items: center; gap: 18px; }26  .sb-center { display: flex; align-items: center; gap: 24px; opacity: 0.9; }27  .sb-dot { width: 10px; height: 10px; background:#6f6f6f; border-radius: 50%; }28 29  /* Content area */30  .content { padding: 8px 64px 120px 64px; }31  .back-row { margin-top: 12px; height: 72px; display:flex; align-items:center; }32  .back-row svg { width: 48px; height: 48px; }33 34  .hero { margin-top: 28px; position: relative; }35  .hero .avatar {36    width: 160px; height: 160px; border-radius: 32px;37    position: absolute; right: 0; top: -10px;38    background: #E0E0E0; border: 1px solid #BDBDBD;39    display: flex; align-items: center; justify-content: center;40    color: #757575; font-size: 28px;41  }42  .title {43    font-size: 72px; font-weight: 800; line-height: 1.1; margin-top: 170px;44  }45  .subtitle {46    font-size: 36px; color: #7A7A7A; margin-top: 10px;47  }48 49  /* Feature row */50  .features {51    margin-top: 56px; display: flex; align-items: center; justify-content: space-between;52  }53  .feature { width: 30%; text-align: center; }54  .feature .label { margin-top: 22px; color: #8A8A8A; font-size: 32px; line-height: 1.3; }55  .divider {56    width: 2px; height: 88px; background: #D1D1D6; align-self: center;57  }58  .icon { width: 72px; height: 72px; margin: 0 auto; display:block; }59 60  /* About section */61  .section-title {62    margin-top: 88px; font-size: 56px; font-weight: 800; color: #444254;63  }64 65  .gallery {66    margin-top: 32px;67    display: grid;68    grid-template-columns: 1fr 0.88fr;69    grid-template-rows: 380px 380px;70    grid-gap: 36px;71  }72  .gallery .img {73    background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;74    display: flex; align-items: center; justify-content: center;75    font-size: 30px; border-radius: 40px;76  }77  .gallery .large { grid-row: 1 / span 2; height: 780px; }78 79  /* Text block */80  .block-title { margin-top: 52px; font-size: 44px; font-weight: 800; color: #333648; }81  .subtext { margin-top: 22px; font-size: 34px; color: #6E6E6E; line-height: 1.5; }82  .paragraph { margin-top: 26px; font-size: 34px; color: #3E3E3E; line-height: 1.6; }83  .link { margin-top: 18px; font-size: 34px; color: #10A37F; font-weight: 600; }84 85  /* Home indicator */86  .home-indicator {87    position: absolute; bottom: 32px; left: 50%;88    transform: translateX(-50%);89    width: 240px; height: 12px; background: #111;90    border-radius: 12px; opacity: 0.22;91  }92</style>93</head>94<body>95<div id="render-target">96 97  <!-- Status Bar -->98  <div class="status-bar">99    <div class="sb-left">100      <div>3:28</div>101      <!-- small leaf icon -->102      <svg class="icon" viewBox="0 0 24 24">103        <path d="M4 14c5-8 12-9 16-9-3 5-8 8-14 10 5 0 8 2 10 5-6-1-10-3-12-6z" fill="#2C8C56"></path>104      </svg>105      <div style="font-size:32px; color:#555;">33°</div>106      <!-- globe icon -->107      <svg class="icon" viewBox="0 0 24 24">108        <circle cx="12" cy="12" r="10" fill="none" stroke="#666" stroke-width="2"></circle>109        <path d="M4 12h16M12 4c3 4 3 12 0 16M12 4c-3 4-3 12 0 16" stroke="#666" stroke-width="1.5" fill="none"></path>110      </svg>111      <div class="sb-dot"></div>112    </div>113    <div class="sb-right">114      <!-- WiFi -->115      <svg width="42" height="42" viewBox="0 0 24 24">116        <path d="M2 9c5-5 15-5 20 0" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>117        <path d="M5 12c3-3 11-3 14 0" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>118        <path d="M8 15c2-2 6-2 8 0" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>119        <circle cx="12" cy="18" r="1.8" fill="#333"/>120      </svg>121      <!-- Battery -->122      <svg width="42" height="42" viewBox="0 0 24 24">123        <rect x="3" y="7" width="16" height="10" rx="2" stroke="#333" stroke-width="2" fill="none"/>124        <rect x="5" y="9" width="10" height="6" rx="1" fill="#333"/>125        <rect x="19" y="9" width="3" height="6" rx="1" fill="#333"/>126      </svg>127    </div>128  </div>129 130  <div class="content">131 132    <!-- Back arrow -->133    <div class="back-row">134      <svg viewBox="0 0 24 24">135        <path d="M15 5L7 12l8 7" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>136      </svg>137    </div>138 139    <!-- Header / Hero -->140    <div class="hero">141      <div class="avatar">[IMG: Plant Avatar]</div>142      <div class="title">Chinese Evergreen</div>143      <div class="subtitle">Aglaonema</div>144    </div>145 146    <!-- Feature row -->147    <div class="features">148      <div class="feature">149        <!-- Warning triangle -->150        <svg class="icon" viewBox="0 0 24 24">151          <path d="M12 3L2 20h20L12 3z" fill="#F5C147" stroke="#D89D1C" stroke-width="1.5"></path>152          <rect x="11" y="9" width="2" height="6" fill="#7A5B00"></rect>153          <circle cx="12" cy="17.5" r="1.4" fill="#7A5B00"></circle>154        </svg>155        <div class="label">Toxic to pets & children</div>156      </div>157      <div class="divider"></div>158      <div class="feature">159        <!-- Flashlight -->160        <svg class="icon" viewBox="0 0 24 24">161          <rect x="8" y="9" width="8" height="9" rx="2" fill="#5B8FA6"></rect>162          <rect x="7" y="6" width="10" height="3" rx="1" fill="#88B9CC"></rect>163          <circle cx="16.5" cy="7.5" r="2.2" fill="#C8E6FF"></circle>164        </svg>165        <div class="label">Tolerates low light</div>166      </div>167      <div class="divider"></div>168      <div class="feature">169        <!-- Water Drop -->170        <svg class="icon" viewBox="0 0 24 24">171          <path d="M12 2C9 6 7 10 7 14c0 4 3 7 5 7s5-3 5-7c0-4-2-8-5-12z" fill="#78B8F4" stroke="#62A8E8" stroke-width="1.5"></path>172        </svg>173        <div class="label">Needs frequent watering</div>174      </div>175    </div>176 177    <!-- About section -->178    <div class="section-title">About Me</div>179 180    <div class="gallery">181      <div class="img large">[IMG: Large Chinese Evergreen plant]</div>182      <div class="img">[IMG: Chinese Evergreen on table]</div>183      <div class="img">[IMG: Chinese Evergreen close-up]</div>184    </div>185 186    <!-- Text content -->187    <div class="block-title">Chinese Evergreen</div>188    <div class="subtext">Also known as: Golden Evergreen, Philippine Evergreen, Posion Dart Plant</div>189    <div class="paragraph">190      Chinese evergreens have been growing in homes throughout Asia for centuries as symbols of good fortune. They were introduced to the Western world and quickly became popular for their attractive foliage and easy care.191    </div>192    <div class="link">Show more</div>193 194  </div>195 196  <!-- Home indicator -->197  <div class="home-indicator"></div>198</div>199</body>200</html>