GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Search UI</title>6<style>7  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target {9    width:1080px; height:2400px;10    position:relative; overflow:hidden;11    background:#FBF9F7;12  }13 14  /* Top status bar */15  .status-bar {16    position:absolute; left:0; top:0; width:1080px; height:150px;17    background:#2B252B; color:#fff;18    display:flex; align-items:center; justify-content:space-between;19    padding:0 40px; box-sizing:border-box;20  }21  .status-left { font-size:48px; letter-spacing:1px; }22  .status-right { display:flex; gap:26px; align-items:center; }23  .status-dot, .status-battery {24    width:32px; height:32px; border-radius:50%; background:#EFEFEF; opacity:0.9;25  }26  .status-battery { border-radius:6px; width:50px; }27 28  /* Search header area */29  .search-area {30    position:absolute; left:0; top:150px; width:1080px;31    background:#FFF;32    padding:36px 40px 24px 40px; box-sizing:border-box;33    border-bottom:1px solid #eee;34  }35  .search-row { display:flex; align-items:center; gap:28px; }36  .icon-btn {37    width:64px; height:64px; display:flex; align-items:center; justify-content:center;38    border-radius:16px; background:transparent;39  }40  .search-input {41    flex:1; position:relative; height:70px;42  }43  .search-input .placeholder {44    font-size:48px; color:#242424; opacity:0.9;45  }46  .search-input .underline {47    position:absolute; left:0; bottom:-8px; width:100%; height:2px; background:#D9D9D9;48  }49  .mic-btn { width:64px; height:64px; display:flex; align-items:center; justify-content:center; }50 51  /* Sections */52  .section {53    position:absolute; left:40px; right:40px; box-sizing:border-box;54    color:#8F6A3C;55  }56  .recent { top:360px; }57  .popular { top:650px; }58  .section-title {59    font-size:54px; font-weight:700; margin-bottom:28px;60  }61 62  .recent-card {63    width:100%; height:110px; background:#FFF; border:1px solid #E6E3DF;64    border-radius:18px; display:flex; align-items:center; gap:26px;65    padding:0 28px; box-sizing:border-box; color:#444;66    font-size:44px;67  }68 69  /* Chips */70  .chips {71    display:flex; flex-wrap:wrap; gap:26px;72  }73  .chip {74    display:flex; align-items:center; gap:16px;75    padding:22px 26px; border:1px solid #E1DFDB; border-radius:18px;76    font-size:42px; color:#333; background:#FFF;77  }78 79  /* Home indicator */80  .home-indicator {81    position:absolute; left:50%; bottom:34px; transform:translateX(-50%);82    width:520px; height:14px; background:#D0CFCC; border-radius:12px;83  }84  /* Simple icon styling */85  svg { display:block; }86</style>87</head>88<body>89<div id="render-target">90 91  <!-- Status Bar -->92  <div class="status-bar">93    <div class="status-left">10:45</div>94    <div class="status-right">95      <div class="status-dot"></div>96      <div class="status-dot"></div>97      <div class="status-dot"></div>98      <div class="status-battery"></div>99    </div>100  </div>101 102  <!-- Search Area -->103  <div class="search-area">104    <div class="search-row">105      <div class="icon-btn">106        <!-- Back Arrow -->107        <svg width="48" height="48" viewBox="0 0 48 48">108          <path d="M28 10 L16 24 L28 38" stroke="#3A342F" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>109        </svg>110      </div>111      <div class="search-input">112        <div class="placeholder">Search</div>113        <div class="underline"></div>114      </div>115      <div class="mic-btn">116        <!-- Mic Icon -->117        <svg width="48" height="48" viewBox="0 0 48 48">118          <rect x="18" y="8" width="12" height="20" rx="6" fill="#3A342F"></rect>119          <path d="M12 22 C12 30, 36 30, 36 22" stroke="#3A342F" stroke-width="4" fill="none" />120          <path d="M24 30 V40" stroke="#3A342F" stroke-width="4" stroke-linecap="round" />121          <path d="M18 40 H30" stroke="#3A342F" stroke-width="4" stroke-linecap="round" />122        </svg>123      </div>124    </div>125  </div>126 127  <!-- Recent Searches -->128  <div class="section recent">129    <div class="section-title">Recent Searches</div>130    <div class="recent-card">131      <!-- Clock Icon -->132      <svg width="48" height="48" viewBox="0 0 48 48">133        <circle cx="24" cy="24" r="18" stroke="#8F6A3C" stroke-width="3" fill="none"></circle>134        <path d="M24 14 V24 L32 28" stroke="#8F6A3C" stroke-width="3" stroke-linecap="round" />135      </svg>136      <div>recliners</div>137    </div>138  </div>139 140  <!-- Popular Searches -->141  <div class="section popular">142    <div class="section-title">Popular Searches</div>143    <div class="chips">144      <div class="chip">145        <!-- Trending Arrow -->146        <svg width="40" height="40" viewBox="0 0 40 40">147          <path d="M8 28 L18 18 L24 24 L32 16" stroke="#8F6A3C" stroke-width="3" fill="none" stroke-linecap="round" />148          <path d="M30 16 H34 V20" stroke="#8F6A3C" stroke-width="3" fill="none" />149        </svg>150        <span>bed</span>151      </div>152      <div class="chip">153        <svg width="40" height="40" viewBox="0 0 40 40">154          <path d="M8 28 L18 18 L24 24 L32 16" stroke="#8F6A3C" stroke-width="3" fill="none" stroke-linecap="round" />155          <path d="M30 16 H34 V20" stroke="#8F6A3C" stroke-width="3" fill="none" />156        </svg>157        <span>dining table</span>158      </div>159      <div class="chip">160        <svg width="40" height="40" viewBox="0 0 40 40">161          <path d="M8 28 L18 18 L24 24 L32 16" stroke="#8F6A3C" stroke-width="3" fill="none" stroke-linecap="round" />162          <path d="M30 16 H34 V20" stroke="#8F6A3C" stroke-width="3" fill="none" />163        </svg>164        <span>mirror</span>165      </div>166      <div class="chip">167        <svg width="40" height="40" viewBox="0 0 40 40">168          <path d="M8 28 L18 18 L24 24 L32 16" stroke="#8F6A3C" stroke-width="3" fill="none" stroke-linecap="round" />169          <path d="M30 16 H34 V20" stroke="#8F6A3C" stroke-width="3" fill="none" />170        </svg>171        <span>sofa</span>172      </div>173      <div class="chip">174        <svg width="40" height="40" viewBox="0 0 40 40">175          <path d="M8 28 L18 18 L24 24 L32 16" stroke="#8F6A3C" stroke-width="3" fill="none" stroke-linecap="round" />176          <path d="M30 16 H34 V20" stroke="#8F6A3C" stroke-width="3" fill="none" />177        </svg>178        <span>study table</span>179      </div>180      <div class="chip">181        <svg width="40" height="40" viewBox="0 0 40 40">182          <path d="M8 28 L18 18 L24 24 L32 16" stroke="#8F6A3C" stroke-width="3" fill="none" stroke-linecap="round" />183          <path d="M30 16 H34 V20" stroke="#8F6A3C" stroke-width="3" fill="none" />184        </svg>185        <span>chair</span>186      </div>187      <div class="chip">188        <svg width="40" height="40" viewBox="0 0 40 40">189          <path d="M8 28 L18 18 L24 24 L32 16" stroke="#8F6A3C" stroke-width="3" fill="none" stroke-linecap="round" />190          <path d="M30 16 H34 V20" stroke="#8F6A3C" stroke-width="3" fill="none" />191        </svg>192        <span>dressing table</span>193      </div>194      <div class="chip">195        <svg width="40" height="40" viewBox="0 0 40 40">196          <path d="M8 28 L18 18 L24 24 L32 16" stroke="#8F6A3C" stroke-width="3" fill="none" stroke-linecap="round" />197          <path d="M30 16 H34 V20" stroke="#8F6A3C" stroke-width="3" fill="none" />198        </svg>199        <span>shoe rack</span>200      </div>201      <div class="chip">202        <svg width="40" height="40" viewBox="0 0 40 40">203          <path d="M8 28 L18 18 L24 24 L32 16" stroke="#8F6A3C" stroke-width="3" fill="none" stroke-linecap="round" />204          <path d="M30 16 H34 V20" stroke="#8F6A3C" stroke-width="3" fill="none" />205        </svg>206        <span>sofa cum bed</span>207      </div>208      <div class="chip">209        <svg width="40" height="40" viewBox="0 0 40 40">210          <path d="M8 28 L18 18 L24 24 L32 16" stroke="#8F6A3C" stroke-width="3" fill="none" stroke-linecap="round" />211          <path d="M30 16 H34 V20" stroke="#8F6A3C" stroke-width="3" fill="none" />212        </svg>213        <span>tv unit</span>214      </div>215    </div>216  </div>217 218