GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Plant Identification UI</title>6<style>7  body{margin:0;padding:0;background:transparent;font-family:Arial,Helvetica,sans-serif;color:#111;}8  #render-target{9    width:1080px;height:2400px;position:relative;overflow:hidden;10    background:#ffffff;border-radius:0;11  }12  /* Top photo area */13  .photo-area{14    position:absolute;left:0;top:0;width:1080px;height:720px;15    background:#E0E0E0;border-bottom:1px solid #BDBDBD;16    display:flex;align-items:center;justify-content:center;color:#757575;font-size:28px;17  }18  /* Status bar */19  .status-bar{20    position:absolute;left:0;top:0;width:100%;height:90px;21    display:flex;align-items:center;gap:22px;padding:0 28px;color:#ffffff;22    box-sizing:border-box;23  }24  .status-time{font-size:34px;font-weight:600;color:#ffffff;}25  .status-icons{display:flex;align-items:center;gap:20px;}26  .icon{27    width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;28  }29  /* Circular overlay buttons */30  .circle-btn{31    position:absolute;width:110px;height:110px;border-radius:55px;32    background:rgba(0,0,0,0.55);display:flex;align-items:center;justify-content:center;33    top:140px;34  }35  .circle-btn.left{left:40px;}36  .circle-btn.right{right:40px;}37  /* Main white sheet with rounded top */38  .sheet{39    position:absolute;left:0;top:640px;width:100%;height:1760px;background:#fff;40    border-top-left-radius:28px;border-top-right-radius:28px;41    box-shadow:0 -2px 0 rgba(0,0,0,0.06);padding:32px 32px 140px;box-sizing:border-box;42    overflow:auto;43  }44  .card-title{45    font-size:60px;font-weight:700;margin:16px 0 12px;color:#222;46  }47  .sub-label{color:#7b7b7b;font-size:34px;margin-top:8px;}48  .sub-text{color:#222;font-size:36px;line-height:1.5;margin:8px 0 16px;}49  .botanical{50    display:flex;align-items:flex-end;gap:12px;margin-top:12px;margin-bottom:12px;51    flex-wrap:wrap;52  }53  .botanical .label{font-size:36px;color:#7b7b7b;}54  .botanical .name{font-size:42px;font-weight:700;color:#222;}55  .thumbs{display:flex;gap:22px;margin:12px 0 32px;}56  .thumb{57    width:224px;height:210px;background:#E0E0E0;border:1px solid #BDBDBD;58    display:flex;align-items:center;justify-content:center;color:#757575;font-size:24px;border-radius:8px;59  }60  .divider{height:1px;background:#e6e6e6;margin:18px 0 10px;}61  /* bottom navigation pill */62  .bottom-pill{63    position:absolute;left:50%;transform:translateX(-50%);64    bottom:26px;width:240px;height:16px;border-radius:8px;background:#d7d7d7;65  }66</style>67</head>68<body>69<div id="render-target">70 71  <!-- Top plant photo -->72  <div class="photo-area">[IMG: Plant leaves close-up]</div>73 74  <!-- Status bar -->75  <div class="status-bar">76    <div class="status-time">11:10</div>77    <div class="status-icons">78      <!-- simple search icon -->79      <div class="icon">80        <svg width="30" height="30" viewBox="0 0 24 24" fill="none">81          <circle cx="10" cy="10" r="6" stroke="#ffffff" stroke-width="2"/>82          <line x1="15.5" y1="15.5" x2="21" y2="21" stroke="#ffffff" stroke-width="2"/>83        </svg>84      </div>85      <!-- small dot icon -->86      <div class="icon">87        <svg width="26" height="26" viewBox="0 0 24 24">88          <circle cx="12" cy="12" r="3" fill="#ffffff"/>89        </svg>90      </div>91      <!-- video icon -->92      <div class="icon">93        <svg width="30" height="30" viewBox="0 0 24 24" fill="none">94          <rect x="3" y="5" width="14" height="14" rx="2" stroke="#ffffff" stroke-width="2"/>95          <polygon points="11,9 16,12 11,15" fill="#ffffff"/>96        </svg>97      </div>98      <!-- dots icon -->99      <div class="icon">100        <svg width="28" height="28" viewBox="0 0 24 24">101          <circle cx="5" cy="12" r="2" fill="#ffffff"/>102          <circle cx="12" cy="12" r="2" fill="#ffffff"/>103          <circle cx="19" cy="12" r="2" fill="#ffffff"/>104        </svg>105      </div>106    </div>107    <div style="margin-left:auto;display:flex;align-items:center;gap:18px;">108      <!-- wifi -->109      <svg width="32" height="32" viewBox="0 0 24 24">110        <path d="M2 8c5-4 15-4 20 0" stroke="#ffffff" stroke-width="2" fill="none"/>111        <path d="M5 12c3-3 11-3 14 0" stroke="#ffffff" stroke-width="2" fill="none"/>112        <path d="M9 16c2-2 4-2 6 0" stroke="#ffffff" stroke-width="2" fill="none"/>113        <circle cx="12" cy="19" r="1.5" fill="#ffffff"/>114      </svg>115      <!-- battery -->116      <svg width="36" height="32" viewBox="0 0 28 18" fill="none">117        <rect x="1" y="3" width="22" height="12" rx="2" stroke="#ffffff" stroke-width="2"/>118        <rect x="24" y="7" width="3" height="4" rx="1" fill="#ffffff"/>119        <rect x="3" y="5" width="16" height="8" rx="1" fill="#ffffff"/>120      </svg>121    </div>122  </div>123 124  <!-- back button -->125  <div class="circle-btn left">126    <svg width="48" height="48" viewBox="0 0 24 24">127      <path d="M15 6l-6 6 6 6" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>128    </svg>129  </div>130  <!-- close button -->131  <div class="circle-btn right">132    <svg width="48" height="48" viewBox="0 0 24 24">133      <path d="M6 6l12 12M18 6l-12 12" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>134    </svg>135  </div>136 137  <!-- Main white sheet -->138  <div class="sheet">139    <!-- Card 1 -->140    <div class="card-title">Tomato</div>141    <div class="sub-label">Also known as</div>142    <div class="sub-text">گوجه فرنگی, Garden tomato, Cherry tomato, రామ మూలగ (తామూలగ)</div>143    <div class="botanical">144      <div class="label">Botanical name</div>145      <div class="name">Lycopersicon esculentum</div>146    </div>147    <div class="thumbs">148      <div class="thumb">[IMG: Tomato plant]</div>149      <div class="thumb">[IMG: Tomato leaves]</div>150      <div class="thumb">[IMG: Potted tomato]</div>151      <div class="thumb">[IMG: Stem & leaves]</div>152    </div>153 154    <div class="divider"></div>155 156    <!-- Card 2 -->157    <div class="card-title" style="margin-top:22px;">Garden tomato</div>158    <div class="sub-label">Also known as</div>159    <div class="sub-text">Tomato, Cherry Tomatoes, Roma Tomato, Cherry Tomato, Pear tomato</div>160    <div class="botanical">161      <div class="label">Botanical name</div>162      <div class="name">Solanum lycopersicum</div>163    </div>164    <div class="thumbs">165      <div class="thumb">[IMG: Tomato plant]</div>166      <div class="thumb">[IMG: Vine & fruit]</div>167      <div class="thumb">[IMG: Potted plant]</div>168      <div class="thumb">[IMG: Leaves close-up]</div>169    </div>170 171  </div>172 173  <!-- Bottom gesture pill -->174  <div class="bottom-pill"></div>175 176</div>177</body>178</html>