GD-ML/AndroidCode

1<html>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: "Segoe UI", Roboto, 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:1000px;15    background:#E0E0E0;16    border-bottom:1px solid #BDBDBD;17    display:flex; align-items:center; justify-content:center; color:#555;18  }19  .hero::after{20    content:"";21    position:absolute; inset:0;22    background: linear-gradient(to bottom, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.25) 35%, rgba(0,0,0,0.10) 70%, rgba(255,255,255,0) 100%);23    pointer-events:none;24  }25 26  /* Status bar */27  .status-bar{28    position:absolute; left:0; top:20px; width:100%; height:80px; color:#fff;29    padding:0 36px; box-sizing:border-box; display:flex; align-items:center; justify-content:space-between;30    font-weight:600; font-size:40px;31  }32  .sb-right{ display:flex; align-items:center; gap:26px; }33  .sb-dot{ width:18px; height:18px; background:#fff; border-radius:50%; opacity:0.85; }34  .sb-icon{35    width:44px; height:44px; border-radius:50%; border:2px solid #fff; opacity:0.85;36  }37 38  /* Title */39  .title{40    position:absolute; top:180px; left:220px; right:40px; color:#fff;41    font-size:74px; font-weight:700; letter-spacing:0.5px;42  }43 44  /* Back button */45  .back-btn{46    position:absolute; top:150px; left:48px; width:120px; height:120px;47    background:rgba(255,255,255,0.18); border-radius:60px; backdrop-filter: blur(3px);48    display:flex; align-items:center; justify-content:center;49  }50  .back-btn svg{ width:56px; height:56px; }51  .back-btn svg path{ stroke:#fff; stroke-width:12; fill:none; stroke-linecap:round; stroke-linejoin:round; }52 53  /* Content area */54  .content{55    position:absolute; left:0; top:940px; width:100%; height:1460px;56    background:#fff; border-top-left-radius:48px; border-top-right-radius:48px;57    box-shadow: 0 -6px 18px rgba(0,0,0,0.08);58    padding:40px;59    box-sizing:border-box;60  }61 62  .cards{63    display:grid;64    grid-template-columns: repeat(2, 1fr);65    grid-gap:40px;66    margin-top:40px;67  }68  .card{69    background:#ffffff;70    border-radius:36px;71    box-shadow: 0 6px 18px rgba(0,0,0,0.06);72    overflow:hidden;73    position:relative;74    height:560px;75  }76  .card .banner{77    height:300px; background:#E0E0E0; border-bottom:1px solid #BDBDBD;78    display:flex; align-items:center; justify-content:center; color:#757575;79    font-size:34px;80  }81  .card .footer{82    height:260px; display:flex; align-items:flex-end; justify-content:center; padding-bottom:40px;83    font-size:60px; font-weight:800;84  }85 86  /* tinted footers */87  .leaf .footer{ background:#eef7ea; color:#6bb46b; }88  .flower .footer{ background:#f7eded; color:#c9898c; }89  .fruit .footer{ background:#f6e3e8; color:#d25f76; }90  .bark .footer{ background:#e9e5e1; color:#7a5a37; }91 92  /* icon circle overlapping */93  .icon-circle{94    position:absolute; left:50%; top:220px; transform:translateX(-50%);95    width:220px; height:220px; border-radius:50%; background:#fff; box-shadow:0 8px 18px rgba(0,0,0,0.12);96    display:flex; align-items:center; justify-content:center;97  }98  .icon-circle svg{ width:140px; height:140px; }99 100  /* Simple icon colors */101  .icon-leaf path{ stroke:#6bb46b; }102  .icon-flower path{ stroke:#d59aa3; }103  .icon-fruit path{ stroke:#e06a6a; }104  .icon-bark path{ stroke:#7a5a37; }105 106</style>107</head>108<body>109<div id="render-target">110 111  <!-- Top plant hero image -->112  <div class="hero">[IMG: Plant close-up]</div>113 114  <!-- Status bar -->115  <div class="status-bar">116    <div>11:09</div>117    <div class="sb-right">118      <div class="sb-dot"></div>119      <div class="sb-dot"></div>120      <div class="sb-dot"></div>121      <div class="sb-icon"></div>122      <div class="sb-icon"></div>123    </div>124  </div>125 126  <!-- Back button -->127  <div class="back-btn">128    <svg viewBox="0 0 24 24">129      <path d="M15 5 L7 12 L15 19"></path>130    </svg>131  </div>132 133  <!-- Title -->134  <div class="title">Choose related type</div>135 136  <!-- Content with cards -->137  <div class="content">138    <div class="cards">139 140      <!-- Leaf card -->141      <div class="card leaf">142        <div class="banner">[IMG: Green leaves close-up]</div>143        <div class="icon-circle">144          <svg class="icon-leaf" viewBox="0 0 24 24">145            <path d="M6 13c3-4 8-6 12-6-1 5-5 9-9 10-3 1-5-1-3-4z" fill="none" stroke-width="1.6"></path>146            <path d="M9 11l3 3m-5-1l2 2" fill="none" stroke-width="1.6"></path>147            <path d="M5 13c0-3 2-6 6-8" fill="none" stroke-width="1.6"></path>148          </svg>149        </div>150        <div class="footer">Leaf</div>151      </div>152 153      <!-- Flower card -->154      <div class="card flower">155        <div class="banner">[IMG: Pink rose flowers]</div>156        <div class="icon-circle">157          <svg class="icon-flower" viewBox="0 0 24 24">158            <path d="M12 8a4 4 0 0 1 4-4 4 4 0 0 1-4 4z" fill="none" stroke-width="1.6"></path>159            <path d="M12 8a4 4 0 0 1-4-4 4 4 0 0 1 4 4z" fill="none" stroke-width="1.6"></path>160            <path d="M12 8a4 4 0 0 1 4 4 4 4 0 0 1-4-4z" fill="none" stroke-width="1.6"></path>161            <path d="M12 8a4 4 0 0 1-4 4 4 4 0 0 1 4-4z" fill="none" stroke-width="1.6"></path>162            <circle cx="12" cy="12" r="2" fill="none" stroke-width="1.6"></circle>163            <path d="M12 14c0 3-2 5-4 6" fill="none" stroke-width="1.6"></path>164          </svg>165        </div>166        <div class="footer">Flower</div>167      </div>168 169      <!-- Fruit card -->170      <div class="card fruit">171        <div class="banner">[IMG: Fruits on plate]</div>172        <div class="icon-circle">173          <svg class="icon-fruit" viewBox="0 0 24 24">174            <path d="M10 6c1-2 3-2 4-1" fill="none" stroke-width="1.6"></path>175            <path d="M7 11a5 5 0 0 1 10 0c0 4-3 6-5 6s-5-2-5-6z" fill="none" stroke-width="1.6"></path>176            <path d="M9 14h6c-1 2-3 3-3 3s-2-1-3-3z" fill="none" stroke-width="1.6"></path>177            <path d="M13 5c1-1 2-1 3-1" fill="none" stroke-width="1.6"></path>178          </svg>179        </div>180        <div class="footer">Fruit</div>181      </div>182 183      <!-- Bark card -->184      <div class="card bark">185        <div class="banner">[IMG: Tree bark texture]</div>186        <div class="icon-circle">187          <svg class="icon-bark" viewBox="0 0 24 24">188            <path d="M9 5v14m6-10v10" fill="none" stroke-width="1.6"></path>189            <path d="M9 10h6" fill="none" stroke-width="1.6"></path>190            <path d="M6 16c1-2 3-3 4-3" fill="none" stroke-width="1.6"></path>191            <path d="M16 15c1 0 3 1 3 3s-3 2-4 1" fill="none" stroke-width="1.6"></path>192          </svg>193        </div>194        <div class="footer">Bark</div>195      </div>196 197    </div>198  </div>199 200</div>201</body>202</html>