GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Search Screen Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  :root{9    --bg:#ffffff;10    --green:#1A8F2E;11    --green-dark:#0D5223;12    --green-light:#EAF5EA;13    --green-muted:#C8DEC8;14    --text:#0c2c1a;15    --muted:#9aa3a0;16    --yellow:#f2c200;17  }18  body{ margin:0; padding:0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color:#222; }19  #render-target{20    width:1080px; height:2400px; position:relative; overflow:hidden;21    background: var(--bg);22  }23 24  /* Status bar */25  .status-bar{26    position:absolute; top:0; left:0; width:100%; height:120px;27    display:flex; align-items:center; justify-content:space-between;28    padding:0 48px; color:#555;29  }30  .status-left{ display:flex; align-items:center; gap:18px; }31  .time{ font-weight:600; font-size:44px; letter-spacing:0.5px; color:#4a4a4a; }32  .status-right{ display:flex; align-items:center; gap:30px; }33 34  /* Search box */35  .search-wrapper{36    position:absolute; top:160px; left:60px; right:60px;37  }38  .search-box{39    height:140px; border-radius:36px; background:var(--green-light);40    display:flex; align-items:center; padding:0 40px; color:var(--green-muted);41    font-size:46px;42  }43 44  /* Tabs */45  .tabs{46    position:absolute; top:360px; left:0; width:100%;47    display:flex; flex-direction:column; align-items:center;48  }49  .tab-labels{50    width:100%; display:flex; justify-content:space-between;51    padding:0 130px; box-sizing:border-box;52  }53  .tab{54    font-size:54px; font-weight:700;55  }56  .tab.plants{ color:var(--green-dark); }57  .tab.people{ color:var(--green); }58  .tab-underline{59    margin-top:26px; width:100%; height:10px; display:flex;60  }61  .tab-underline .active{ width:50%; background:var(--green); }62  .tab-underline .inactive{ width:50%; background:#E6F1E6; }63 64  /* Hint text */65  .hint{66    position:absolute; top:940px; left:0; width:100%;67    text-align:center; color:var(--green-muted); font-size:60px; font-weight:600;68  }69 70  /* Bottom navigation */71  .nav{72    position:absolute; bottom:0; left:0; width:100%; height:240px;73    background:#ffffff;74    box-shadow: 0 -12px 30px rgba(0,0,0,0.06);75    border-top-left-radius:30px; border-top-right-radius:30px;76  }77  .home-indicator{78    position:absolute; top:-44px; left:50%; transform:translateX(-50%);79    width:300px; height:14px; background:#9e9e9e; border-radius:8px;80  }81  .nav-inner{82    position:absolute; bottom:24px; left:0; right:0;83    display:flex; align-items:center; justify-content:space-between;84    padding:0 70px;85  }86  .nav-btn{87    width:140px; height:140px; display:flex; align-items:center; justify-content:center;88  }89  .nav-btn.circle{90    background:var(--green); color:#fff; border-radius:50%;91  }92  .nav-label-dot{93    position:absolute; bottom:16px; left:50%; transform:translateX(-50%);94    width:16px; height:16px; background:var(--green); border-radius:50%;95  }96  /* Icon sizes */97  svg{ display:block; }98</style>99</head>100<body>101<div id="render-target">102 103  <!-- Status Bar -->104  <div class="status-bar">105    <div class="status-left">106      <div class="time">9:08</div>107      <!-- Weather/Cloud icon -->108      <svg width="56" height="30" viewBox="0 0 56 30">109        <path d="M18 24h18c8 0 12-10-1-12-1-7-9-10-15-5-7-1-11 5-9 10 2 5 5 7 7 7z" fill="#8a8f94"></path>110      </svg>111    </div>112    <div class="status-right">113      <!-- WiFi -->114      <svg width="44" height="34" viewBox="0 0 44 34">115        <path d="M2 10c10-10 30-10 40 0" stroke="#6f7378" stroke-width="4" fill="none" stroke-linecap="round"/>116        <path d="M8 16c7-7 21-7 28 0" stroke="#6f7378" stroke-width="4" fill="none" stroke-linecap="round"/>117        <circle cx="22" cy="24" r="3.5" fill="#6f7378"/>118      </svg>119      <!-- Battery -->120      <svg width="44" height="34" viewBox="0 0 44 34">121        <rect x="2" y="6" width="34" height="22" rx="4" ry="4" stroke="#6f7378" stroke-width="4" fill="none"/>122        <rect x="38" y="12" width="6" height="10" rx="2" fill="#6f7378"/>123      </svg>124    </div>125  </div>126 127  <!-- Search Box -->128  <div class="search-wrapper">129    <div class="search-box">Search …</div>130  </div>131 132  <!-- Tabs -->133  <div class="tabs">134    <div class="tab-labels">135      <div class="tab plants">Plants</div>136      <div class="tab people">People</div>137    </div>138    <div class="tab-underline">139      <div class="active"></div>140      <div class="inactive"></div>141    </div>142  </div>143 144  <!-- Hint -->145  <div class="hint">Tap the search box to write</div>146 147  <!-- Bottom Navigation -->148  <div class="home-indicator"></div>149  <div class="nav">150    <div class="nav-inner">151      <!-- Camera (active) -->152      <div class="nav-btn circle">153        <svg width="72" height="72" viewBox="0 0 72 72">154          <rect x="10" y="18" width="52" height="38" rx="10" ry="10" fill="#ffffff"/>155          <circle cx="36" cy="37" r="12" fill="#1A8F2E"/>156          <circle cx="36" cy="37" r="8" fill="#ffffff"/>157          <rect x="22" y="12" width="28" height="8" rx="4" fill="#ffffff"/>158        </svg>159      </div>160 161      <!-- Stacked cards (inactive) -->162      <div class="nav-btn">163        <svg width="72" height="72" viewBox="0 0 72 72">164          <rect x="16" y="16" width="34" height="26" rx="6" ry="6" fill="none" stroke="#cfdccd" stroke-width="6"/>165          <rect x="26" y="28" width="30" height="26" rx="6" ry="6" fill="none" stroke="#cfdccd" stroke-width="6"/>166        </svg>167      </div>168 169      <!-- Location (inactive) -->170      <div class="nav-btn">171        <svg width="72" height="72" viewBox="0 0 72 72">172          <path d="M36 12c-10 0-18 8-18 18 0 14 18 30 18 30s18-16 18-30c0-10-8-18-18-18z" fill="none" stroke="#cfdccd" stroke-width="6"/>173          <circle cx="36" cy="30" r="6" fill="#cfdccd"/>174        </svg>175      </div>176 177      <!-- Search (active) -->178      <div class="nav-btn" style="position:relative;">179        <svg width="72" height="72" viewBox="0 0 72 72">180          <circle cx="30" cy="30" r="18" fill="none" stroke="#1A8F2E" stroke-width="6"/>181          <path d="M46 46l16 16" stroke="#1A8F2E" stroke-width="6" stroke-linecap="round"/>182        </svg>183        <div class="nav-label-dot"></div>184      </div>185 186      <!-- Person (inactive) -->187      <div class="nav-btn">188        <svg width="72" height="72" viewBox="0 0 72 72">189          <circle cx="36" cy="26" r="12" fill="none" stroke="#cfdccd" stroke-width="6"/>190          <path d="M12 60c6-12 42-12 48 0" stroke="#cfdccd" stroke-width="6" fill="none" stroke-linecap="round"/>191        </svg>192      </div>193 194      <!-- Crown (highlight) -->195      <div class="nav-btn">196        <svg width="72" height="72" viewBox="0 0 72 72">197          <path d="M12 52h48l-4 8H16l-4-8z" fill="none" stroke="#f2c200" stroke-width="6"/>198          <path d="M16 52l8-14 12 10 12-10 8 14" fill="none" stroke="#f2c200" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>199        </svg>200      </div>201    </div>202  </div>203 204</div>205</body>206</html>