GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mexican Mint 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:#1f242a; color:#fff;10  }11  .status-bar {12    position:absolute; top:20px; left:30px; right:30px; height:60px; display:flex; align-items:center; justify-content:space-between; color:#fff; z-index:5;13    font-weight:600;14  }15  .status-left { display:flex; align-items:center; gap:18px; }16  .time { font-size:34px; letter-spacing:0.5px; }17  .status-right { display:flex; align-items:center; gap:20px; }18  .icon-circle {19    width:88px; height:88px; border-radius:44px; background:#0f1419; display:flex; align-items:center; justify-content:center;20    position:absolute; top:80px; left:40px; box-shadow:0 4px 16px rgba(0,0,0,0.45); z-index:6; border:1px solid rgba(255,255,255,0.1);21  }22  .hero-img {23    position:absolute; top:0; left:0; width:1080px; height:560px;24    background:#E0E0E0; border-bottom:1px solid #BDBDBD; display:flex; align-items:flex-end; justify-content:flex-start; color:#757575;25    padding:20px;26  }27  .hero-img span { background:rgba(0,0,0,0.35); padding:8px 12px; border-radius:10px; font-size:24px; }28  .panel {29    position:absolute; top:300px; left:0; width:1080px; height:1900px; background:#262b32; border-top-left-radius:60px; border-top-right-radius:60px;30    box-shadow:0 -20px 40px rgba(0,0,0,0.5);31  }32  .panel-inner { padding:50px 40px; }33  .title { font-size:76px; font-weight:800; margin-top:10px; letter-spacing:0.3px; }34  .subtitle { font-size:36px; color:#bfc7d1; margin-top:18px; }35  .promo {36    margin-top:40px; background:linear-gradient(90deg,#ff8e5b,#ff6b4d); height:160px; border-radius:26px; display:flex; align-items:center; padding:0 32px; position:relative;37  }38  .promo .badge {39    position:absolute; top:20px; left:116px; width:46px; height:46px; background:#6f52ff; color:#fff; font-size:26px; border-radius:23px; display:flex; align-items:center; justify-content:center; font-weight:700; box-shadow:0 4px 10px rgba(0,0,0,0.35);40  }41  .promo-icon {42    width:120px; height:120px; border-radius:18px; background:#ffe3d7; display:flex; align-items:center; justify-content:center; margin-right:28px;43    box-shadow:inset 0 0 0 2px rgba(0,0,0,0.08);44  }45  .promo-text { display:flex; flex-direction:column; color:#fff; }46  .promo-text .line1 { font-size:42px; font-weight:800; }47  .promo-text .line2 { font-size:34px; margin-top:8px; opacity:0.95; }48  .gallery { margin-top:40px; display:flex; gap:30px; }49  .img-large {50    width:640px; height:660px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:20px; display:flex; align-items:center; justify-content:center; color:#757575; text-align:center; padding:10px;51  }52  .img-col { width:330px; display:flex; flex-direction:column; gap:26px; }53  .img-square {54    width:330px; height:320px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:20px; display:flex; align-items:center; justify-content:center; color:#757575; text-align:center; padding:10px;55  }56  .actions { margin-top:40px; display:flex; align-items:center; justify-content:space-between; }57  .btn-primary {58    width:750px; height:120px; background:#43d28b; border-radius:66px; display:flex; align-items:center; justify-content:center; font-size:46px; font-weight:800; color:#103d2a;59    box-shadow:0 10px 24px rgba(34,180,120,0.4);60  }61  .heart-wrap {62    width:160px; height:160px; border-radius:80px; border:6px solid rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; background:#2b3139; margin-right:20px;63    box-shadow:0 6px 20px rgba(0,0,0,0.35);64  }65  .section-title { font-size:54px; font-weight:800; margin-top:60px; }66  .info-row { margin-top:30px; display:flex; align-items:center; gap:28px; }67  .leaf-icon {68    width:110px; height:110px; background:#1f242a; border-radius:24px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,0.1);69    box-shadow:0 6px 16px rgba(0,0,0,0.35);70  }71  .info-text { display:flex; flex-direction:column; }72  .info-text .label { font-size:34px; color:#eaeaea; margin-bottom:6px; }73  .info-text .safe { font-size:36px; color:#cfe5d2; font-weight:700; }74  .para { margin-top:28px; font-size:36px; line-height:1.5; color:#d7dde5; }75  .home-indicator {76    position:absolute; bottom:30px; left:50%; transform:translateX(-50%);77    width:308px; height:10px; background:#cfd4db; border-radius:8px; opacity:0.7;78  }79  /* Simple icon styles */80  .tiny-icon { width:32px; height:32px; opacity:0.9; }81</style>82</head>83<body>84<div id="render-target">85 86  <!-- Top hero image -->87  <div class="hero-img">88    <span>[IMG: Close-up leaves background]</span>89  </div>90 91  <!-- Close button -->92  <div class="icon-circle">93    <svg width="44" height="44" viewBox="0 0 24 24" fill="none">94      <path d="M6 6l12 12M18 6L6 18" stroke="#fff" stroke-width="2" stroke-linecap="round"/>95    </svg>96  </div>97 98  <!-- Status bar -->99  <div class="status-bar">100    <div class="status-left">101      <div class="time">9:20</div>102    </div>103    <div class="status-right">104      <svg class="tiny-icon" viewBox="0 0 24 24">105        <path d="M3 10h18l-4 4H7l-4-4z" fill="#fff"/>106      </svg>107      <svg class="tiny-icon" viewBox="0 0 24 24">108        <path d="M12 2a10 10 0 100 20 10 10 0 000-20zm0 14a4 4 0 110-8 4 4 0 010 8z" fill="#fff"/>109      </svg>110    </div>111  </div>112 113  <!-- Main panel -->114  <div class="panel">115    <div class="panel-inner">116      <div class="title">Mexican mint</div>117      <div class="subtitle">Plectranthus amboinicus</div>118 119      <!-- Promo ribbon -->120      <div class="promo">121        <div class="promo-icon">122          <svg width="72" height="72" viewBox="0 0 24 24">123            <path d="M3 7h18v10H3z" fill="#ffc9b1"/>124            <path d="M3 7l9 6 9-6" stroke="#ff8e5b" stroke-width="2" fill="none"/>125          </svg>126        </div>127        <div class="badge">1</div>128        <div class="promo-text">129          <div class="line1">Free premium available</div>130          <div class="line2">Tap to claim</div>131        </div>132      </div>133 134      <!-- Gallery -->135      <div class="gallery">136        <div class="img-large">[IMG: Tall potted Mexican mint]</div>137        <div class="img-col">138          <div class="img-square">[IMG: Mint leaves close-up]</div>139          <div class="img-square">[IMG: Cluster of plants in pots]</div>140        </div>141      </div>142 143      <!-- Actions -->144      <div class="actions">145        <div class="btn-primary">Get care plan</div>146        <div class="heart-wrap">147          <svg width="64" height="64" viewBox="0 0 24 24" fill="none">148            <path d="M12 20s-7-4.35-7-9a4 4 0 017-3c1.5-2 6-2 7 3 0 4.65-7 9-7 9z" stroke="#ff9f86" stroke-width="2" fill="none"/>149          </svg>150        </div>151      </div>152 153      <!-- General information -->154      <div class="section-title">General information</div>155 156      <div class="info-row">157        <div class="leaf-icon">158          <svg width="64" height="64" viewBox="0 0 24 24" fill="none">159            <path d="M12 3c6 2 9 7 6 11-3 4-8 5-12 2 3-2 6-5 6-9 0-2-1-3 0-4z" fill="#57d687"/>160            <path d="M5 16c4-2 7-5 7-9" stroke="#1c3b2d" stroke-width="2" stroke-linecap="round"/>161          </svg>162        </div>163        <div class="info-text">164          <div class="label">Poisonous</div>165          <div class="safe">Safe to people & animals</div>166        </div>167      </div>168 169      <div class="para">170        Plectranthus amboinicus, once identified as Coleus amboinicus, is a semi-succulent perennial plant in the family Lamiaceae with a pungent oregano-like aroma. It is commonly called Mexican mint and is popular for culinary and medicinal use.171      </div>172    </div>173  </div>174 175  <!-- Home indicator -->176  <div class="home-indicator"></div>177</div>178</body>179</html>