GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Choose related type UI</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: "Helvetica Neue", Arial, sans-serif; }7  #render-target {8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background:#ffffff;10  }11 12  /* Top hero image */13  .hero {14    position:absolute; left:0; top:0; width:1080px; height:980px;15    border-bottom-left-radius:60px; border-bottom-right-radius:60px; overflow:hidden;16  }17  .hero .img {18    width:100%; height:100%;19    background:#E0E0E0; border-bottom:1px solid #BDBDBD;20    display:flex; align-items:center; justify-content:center; color:#555; font-size:36px;21  }22  .hero .overlay {23    position:absolute; left:0; top:0; width:100%; height:100%;24    background:linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.35) 20%, rgba(0,0,0,0.15) 60%, rgba(0,0,0,0.0) 100%);25    pointer-events:none;26  }27 28  /* Status bar */29  .status-bar {30    position:absolute; top:24px; left:28px; right:28px; height:72px; color:#fff;31    display:flex; align-items:center; justify-content:space-between; z-index:3;32    font-weight:600;33  }34  .status-left { display:flex; align-items:center; gap:16px; }35  .status-time { font-size:42px; letter-spacing:0.5px; }36  .status-right { display:flex; align-items:center; gap:24px; }37  .icon-cloud svg, .icon-battery svg { display:block; }38 39  /* Header controls */40  .header {41    position:absolute; top:120px; left:36px; right:36px; z-index:3; color:#fff;42    display:flex; align-items:center;43  }44  .back-btn {45    width:72px; height:72px; display:flex; align-items:center; justify-content:center;46  }47  .title {48    flex:1; text-align:center; font-size:72px; font-weight:700; letter-spacing:0.5px;49  }50 51  /* Cards grid */52  .grid {53    position:absolute; left:36px; right:36px; top:1040px; bottom:36px;54    display:flex; flex-wrap:wrap; justify-content:space-between; align-content:flex-start;55    gap:40px;56  }57  .card {58    position:relative; width:480px; height:560px; border-radius:36px; overflow:hidden;59    box-shadow:0 6px 12px rgba(0,0,0,0.08);60    border:1px solid #e6e6e6; background:#fff;61  }62  .card .top-img {63    height:320px; background:#E0E0E0; border-bottom:1px solid #BDBDBD;64    display:flex; align-items:center; justify-content:center; color:#666; font-size:32px;65  }66  .card .bottom {67    position:absolute; left:0; right:0; bottom:0; height:240px;68    display:flex; align-items:flex-end; justify-content:center; padding-bottom:32px; text-align:center;69  }70  .card .label {71    font-size:60px; font-weight:700; color:#3a3a3a;72  }73  .card .circle {74    position:absolute; left:50%; transform:translateX(-50%);75    top:240px; width:220px; height:220px; border-radius:50%;76    background:#fff; box-shadow:0 6px 16px rgba(0,0,0,0.08); display:flex; align-items:center; justify-content:center;77    border:1px solid #ececec;78  }79 80  /* Bottom background colors per type */81  .leaf .bottom { background:#EEF7E9; }82  .flower .bottom { background:#F7ECEE; }83  .fruit .bottom { background:#F3DFE6; }84  .bark .bottom { background:#E9E3DD; }85</style>86</head>87<body>88<div id="render-target">89 90  <!-- Top photo -->91  <div class="hero">92    <div class="img">[IMG: Indoor potted plant]</div>93    <div class="overlay"></div>94  </div>95 96  <!-- Status bar -->97  <div class="status-bar">98    <div class="status-left">99      <div class="status-time">9:25</div>100      <div class="icon-cloud">101        <svg width="42" height="28" viewBox="0 0 42 28" fill="none">102          <path d="M12 22h16a8 8 0 0 0 0-16c-1.7 0-3.3.5-4.6 1.3A10 10 0 0 0 6 12a6 6 0 0 0 6 10z" fill="#ffffff"/>103        </svg>104      </div>105    </div>106    <div class="status-right">107      <div class="icon-battery">108        <svg width="48" height="24" viewBox="0 0 48 24" fill="none">109          <rect x="2" y="4" width="38" height="16" rx="4" stroke="#ffffff" stroke-width="3"></rect>110          <rect x="6" y="8" width="30" height="8" rx="2" fill="#ffffff"></rect>111          <rect x="42" y="9" width="4" height="6" rx="1" fill="#ffffff"></rect>112        </svg>113      </div>114    </div>115  </div>116 117  <!-- Header with back and title -->118  <div class="header">119    <div class="back-btn">120      <svg width="48" height="48" viewBox="0 0 48 48" fill="none">121        <path d="M28 10L14 24l14 14" stroke="#ffffff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>122      </svg>123    </div>124    <div class="title">Choose related type</div>125  </div>126 127  <!-- Cards Grid -->128  <div class="grid">129 130    <!-- Leaf Card -->131    <div class="card leaf">132      <div class="top-img">[IMG: Green leaves close-up]</div>133      <div class="circle">134        <!-- Leaf icon -->135        <svg width="120" height="120" viewBox="0 0 120 120" fill="none">136          <path d="M70 20c-22 8-34 25-36 52 18-10 34-26 36-52z" fill="#79C56E"></path>137          <path d="M52 38c-18 8-28 22-28 38 0 16 12 26 30 26s30-10 30-26c0-22-14-32-32-38z" fill="#9AD686" stroke="#2d6a3b" stroke-width="6" stroke-linejoin="round"></path>138          <path d="M52 42v48" stroke="#2d6a3b" stroke-width="6" stroke-linecap="round"></path>139          <path d="M38 66l14 12M38 54l14 10" stroke="#2d6a3b" stroke-width="6" stroke-linecap="round"></path>140        </svg>141      </div>142      <div class="bottom">143        <div class="label" style="color:#61a65c;">Leaf</div>144      </div>145    </div>146 147    <!-- Flower Card -->148    <div class="card flower">149      <div class="top-img">[IMG: Pink roses with leaves]</div>150      <div class="circle">151        <!-- Flower icon -->152        <svg width="120" height="120" viewBox="0 0 120 120" fill="none">153          <circle cx="60" cy="60" r="16" fill="#F7B7C5" stroke="#7A4B57" stroke-width="6"></circle>154          <circle cx="36" cy="48" r="18" fill="#F9C7D3" stroke="#7A4B57" stroke-width="6"></circle>155          <circle cx="84" cy="48" r="18" fill="#F9C7D3" stroke="#7A4B57" stroke-width="6"></circle>156          <circle cx="36" cy="78" r="18" fill="#F9C7D3" stroke="#7A4B57" stroke-width="6"></circle>157          <circle cx="84" cy="78" r="18" fill="#F9C7D3" stroke="#7A4B57" stroke-width="6"></circle>158          <circle cx="60" cy="60" r="6" fill="#7A4B57"></circle>159        </svg>160      </div>161      <div class="bottom">162        <div class="label" style="color:#a76b79;">Flower</div>163      </div>164    </div>165 166    <!-- Fruit Card -->167    <div class="card fruit">168      <div class="top-img">[IMG: Red grapes in soft light]</div>169      <div class="circle">170        <!-- Fruit icon (apple slice) -->171        <svg width="120" height="120" viewBox="0 0 120 120" fill="none">172          <path d="M76 34c-8 0-12-6-12-10 0 0-4 8-12 10-16 4-26 18-26 34 0 18 14 30 32 30s32-12 32-30c0-16-10-30-26-34z" fill="#FA6A6A" stroke="#6B2B2B" stroke-width="6" stroke-linejoin="round"></path>173          <path d="M60 58c-12 0-20 8-20 18s8 18 20 18 20-8 20-18-8-18-20-18z" fill="#FFD27D" stroke="#6B2B2B" stroke-width="6"></path>174          <circle cx="52" cy="78" r="3" fill="#6B2B2B"></circle>175          <circle cx="68" cy="78" r="3" fill="#6B2B2B"></circle>176          <path d="M70 24c6-2 10-6 12-12" stroke="#6B2B2B" stroke-width="6" stroke-linecap="round"></path>177        </svg>178      </div>179      <div class="bottom">180        <div class="label" style="color:#b95062;">Fruit</div>181      </div>182    </div>183 184    <!-- Bark Card -->185    <div class="card bark">186      <div class="top-img">[IMG: Tree trunk with texture]</div>187      <div class="circle">188        <!-- Bark icon (trunk + mushroom) -->189        <svg width="120" height="120" viewBox="0 0 120 120" fill="none">190          <rect x="34" y="28" width="24" height="64" rx="6" fill="#C08A5C" stroke="#6A4A2E" stroke-width="6"></rect>191          <path d="M58 68h18" stroke="#6A4A2E" stroke-width="6" stroke-linecap="round"></path>192          <path d="M76 70c12 0 18 6 18 12H58c0-6 6-12 18-12z" fill="#E8C879" stroke="#6A4A2E" stroke-width="6" stroke-linejoin="round"></path>193          <circle cx="80" cy="58" r="8" fill="#6A4A2E"></circle>194          <path d="M46 40l12 12" stroke="#6A4A2E" stroke-width="6" stroke-linecap="round"></path>195        </svg>196      </div>197      <div class="bottom">198        <div class="label" style="color:#6a4a2e;">Bark</div>199      </div>200    </div>201 202  </div>203 204</div>205</body>206</html>