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>PlantVision Camera UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: linear-gradient(180deg, #cfcfcf 0%, #a9a9a9 35%, #8f8f8f 100%);12  }13 14  /* Status bar */15  .status-bar {16    position: absolute; top: 24px; left: 36px; right: 36px; height: 80px;17    display: flex; align-items: center; justify-content: space-between; color: #2e2e2e;18    font-weight: 600; font-size: 42px;19  }20  .status-left, .status-right { display: flex; align-items: center; gap: 24px; }21  .dot { width: 14px; height: 14px; background: #2e2e2e; border-radius: 50%; opacity: 0.7; }22 23  /* Brand / header row */24  .header-row {25    position: absolute; top: 140px; left: 36px; right: 36px; height: 96px;26    display: flex; align-items: center; justify-content: space-between;27  }28  .app-icon {29    width: 92px; height: 92px; border-radius: 50%; background: #A684FF; display: flex; align-items: center; justify-content: center;30    box-shadow: 0 2px 6px rgba(0,0,0,0.1);31  }32  .app-icon svg { width: 48px; height: 48px; }33  .brand {34    display: flex; align-items: center; gap: 18px;35  }36  .brand .bolt {37    width: 38px; height: 38px; border-radius: 50%; background: #38d26a; display: flex; align-items: center; justify-content: center;38  }39  .brand .bolt svg { width: 22px; height: 22px; }40  .brand .name { color: #ffffff; font-weight: 700; font-size: 58px; letter-spacing: 0.2px; }41  .header-actions { display: flex; align-items: center; gap: 28px; }42  .eq-icon { width: 52px; height: 52px; border-radius: 12px; background: rgba(255,255,255,0.35); display: flex; align-items: center; justify-content: center; }43  .video-toggle {44    width: 170px; height: 70px; border-radius: 36px; background: #24d27d; display: flex; align-items: center; justify-content: center;45    box-shadow: 0 4px 10px rgba(0,0,0,0.15);46  }47 48  /* Big camera view placeholder */49  .camera-view {50    position: absolute; top: 240px; left: 36px; right: 36px; bottom: 360px;51    border: 1px solid #BDBDBD; background: #E0E0E0;52    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 40px;53  }54  /* Scan frame overlay (corners) */55  .scan-frame {56    position: absolute; left: 50%; top: 50%;57    width: 820px; height: 1000px; transform: translate(-50%, -48%);58  }59  .corner {60    position: absolute; width: 180px; height: 180px; border-radius: 40px; border: 0 solid transparent;61  }62  .corner.tl { top: 80px; left: 80px; border-top: 14px solid #ffffff; border-left: 14px solid #ffffff; }63  .corner.tr { top: 80px; right: 80px; border-top: 14px solid #ffffff; border-right: 14px solid #ffffff; }64  .corner.bl { bottom: 80px; left: 80px; border-bottom: 14px solid #ffffff; border-left: 14px solid #ffffff; }65  .corner.br { bottom: 80px; right: 80px; border-bottom: 14px solid #ffffff; border-right: 14px solid #ffffff; }66 67  /* Bottom controls */68  .controls {69    position: absolute; left: 0; right: 0; bottom: 270px; height: 200px; display: flex; align-items: center; justify-content: center;70  }71  .gallery-btn {72    position: absolute; left: 140px; width: 120px; height: 88px; display: flex; align-items: center; justify-content: center;73  }74  .shutter {75    width: 190px; height: 190px; border-radius: 50%; border: 12px solid #ffffff; background: #cfd8dc;76    box-shadow: 0 10px 18px rgba(0,0,0,0.25);77  }78 79  /* Bottom nav bar */80  .bottom-nav {81    position: absolute; bottom: 120px; left: 0; right: 0; height: 210px; background: #ffffff; display: flex; align-items: center; justify-content: space-around;82    box-shadow: 0 -8px 20px rgba(0,0,0,0.15);83  }84  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 18px; color: #6b6b6b; font-size: 40px; }85  .nav-item.active { color: #20c981; font-weight: 700; }86  .nav-icon { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; }87 88  /* Home indicator */89  .home-indicator {90    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);91    width: 420px; height: 14px; background: #000000; opacity: 0.7; border-radius: 10px;92  }93</style>94</head>95<body>96<div id="render-target">97 98  <!-- Status bar -->99  <div class="status-bar">100    <div class="status-left">101      <div>11:42</div>102      <!-- simple icons -->103      <svg width="36" height="36" viewBox="0 0 24 24" fill="#3b3b3b" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C7 2 3 6 3 11s4 9 9 9 9-4 9-9-4-9-9-9zm0 3a6 6 0 100 12 6 6 0 000-12z"/></svg>104      <div style="font-size:34px;">32°</div>105      <svg width="36" height="36" viewBox="0 0 24 24" fill="#3b3b3b" xmlns="http://www.w3.org/2000/svg"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm0 3c1.9 0 3.6.6 5 1.6-1.3 1-3 1.6-5 1.6S8.3 7.6 7 6.6C8.4 5.6 10.1 5 12 5zm-7 7c0-.4 0-.7.1-1 1.8 1.2 4.2 2 6.9 2s5-0.8 6.9-2c.1.3.1.6.1 1 0 2.1-.9 4-2.4 5.4-1.4-1-3.1-1.4-4.6-1.4-1.5 0-3.2.4-4.6 1.4A7.9 7.9 0 015 12z"/></svg>106      <svg width="36" height="36" viewBox="0 0 24 24" fill="#3b3b3b" xmlns="http://www.w3.org/2000/svg"><path d="M12 2l5 9H7l5-9zm0 20a9 9 0 01-9-9h18a9 9 0 01-9 9z"/></svg>107    </div>108    <div class="status-right">109      <div class="dot"></div>110    </div>111  </div>112 113  <!-- Header with brand and actions -->114  <div class="header-row">115    <div class="app-icon">116      <!-- leaf icon -->117      <svg viewBox="0 0 24 24" fill="#5a3bd7" xmlns="http://www.w3.org/2000/svg">118        <path d="M12 3C7 6 5 10 5 13c0 4 3 6 7 6 4 0 7-2 7-6 0-5-4-8-7-10 0 0-1 1-1 0z"/>119      </svg>120    </div>121 122    <div class="brand">123      <div class="bolt">124        <svg viewBox="0 0 24 24" fill="#fff" xmlns="http://www.w3.org/2000/svg"><path d="M13 2L6 13h5l-1 9 8-12h-5l1-8z"/></svg>125      </div>126      <div class="name">PlantVision</div>127    </div>128 129    <div class="header-actions">130      <div class="eq-icon">131        <!-- equalizer bars -->132        <svg width="36" height="36" viewBox="0 0 24 24" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">133          <rect x="4" y="8" width="3" height="10" rx="1"></rect>134          <rect x="10.5" y="4" width="3" height="14" rx="1"></rect>135          <rect x="17" y="6" width="3" height="12" rx="1"></rect>136        </svg>137      </div>138      <div class="video-toggle">139        <!-- camera icon -->140        <svg width="44" height="44" viewBox="0 0 24 24" fill="#0a7a4a" xmlns="http://www.w3.org/2000/svg">141          <path d="M4 7a3 3 0 00-3 3v4a3 3 0 003 3h9a3 3 0 003-3v-1l4 3V8l-4 3V10a3 3 0 00-3-3H4z" fill="#ffffff"/>142        </svg>143      </div>144    </div>145  </div>146 147  <!-- Camera view placeholder -->148  <div class="camera-view">[IMG: Camera View]</div>149 150  <!-- Scan frame corners -->151  <div class="scan-frame">152    <div class="corner tl"></div>153    <div class="corner tr"></div>154    <div class="corner bl"></div>155    <div class="corner br"></div>156  </div>157 158  <!-- Bottom controls -->159  <div class="controls">160    <div class="gallery-btn">161      <!-- gallery icon -->162      <svg width="120" height="88" viewBox="0 0 24 24" fill="none" stroke="#e9e9e9" stroke-width="1.8" xmlns="http://www.w3.org/2000/svg">163        <rect x="3" y="5" width="18" height="14" rx="3" stroke="#ffffff"></rect>164        <path d="M7 15l3-4 3 3 3-2 3 3" stroke="#ffffff"></path>165        <circle cx="9" cy="10" r="1.8" fill="#ffffff"></circle>166      </svg>167    </div>168    <div class="shutter"></div>169  </div>170 171  <!-- Bottom navigation -->172  <div class="bottom-nav">173    <div class="nav-item">174      <div class="nav-icon">175        <!-- checklist icon -->176        <svg width="80" height="80" viewBox="0 0 24 24" fill="#8c8c8c" xmlns="http://www.w3.org/2000/svg">177          <path d="M5 4h14v2H5V4zm0 6h10v2H5v-2zm0 6h14v2H5v-2z"/>178          <path d="M7 11l2 2 4-4-1.4-1.4L9 10.2 8.4 9.6 7 11z" />179        </svg>180      </div>181      <div>Schedule</div>182    </div>183 184    <div class="nav-item active">185      <div class="nav-icon">186        <!-- scan frame icon -->187        <svg width="80" height="80" viewBox="0 0 24 24" fill="#20c981" xmlns="http://www.w3.org/2000/svg">188          <path d="M5 7a2 2 0 012-2h3V3H7a4 4 0 00-4 4v3h2V7zM19 7a2 2 0 00-2-2h-3V3h3a4 4 0 014 4v3h-2V7zM5 17a2 2 0 002 2h3v2H7a4 4 0 01-4-4v-3h2v3zM19 17a2 2 0 01-2 2h-3v2h3a4 4 0 004-4v-3h-2v3z"/>189        </svg>190      </div>191      <div>Identify/Add</div>192    </div>193 194    <div class="nav-item">195      <div class="nav-icon">196        <!-- chat bubble -->197        <svg width="80" height="80" viewBox="0 0 24 24" fill="#8c8c8c" xmlns="http://www.w3.org/2000/svg">198          <path d="M4 4h16v12H7l-3 3V4z"/>199        </svg>200      </div>201      <div>Community</div>202    </div>203  </div>204 205  <!-- Home indicator -->206  <div class="home-indicator"></div>207 208</div>209</body>210</html>