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>Search Screen</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;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #232427;15    color: #FFFFFF;16  }17 18  /* Top area with search */19  .top { padding: 60px 48px 0 48px; }20  .search-row {21    margin-top: 80px;22    display: flex;23    align-items: center;24    justify-content: space-between;25  }26  .back-btn, .filter-btn {27    width: 72px; height: 72px;28    display: flex; align-items: center; justify-content: center;29  }30  .back-btn svg {31    width: 48px; height: 48px; stroke: #ff5c7f; stroke-width: 8; fill: none;32  }33  .filter-btn svg {34    width: 56px; height: 56px; stroke: #ff5c7f; stroke-width: 8; fill: none;35  }36  .fake-input {37    flex: 1;38    height: 120px;39    margin: 0 28px;40    border: 4px solid #666a70;41    border-radius: 60px;42    display: flex;43    align-items: center;44    padding: 0 40px;45    background: rgba(255,255,255,0.02);46  }47  .fake-input svg {48    width: 44px; height: 44px; stroke: #9ea2a8; stroke-width: 6; fill: none; margin-right: 24px;49  }50  .fake-input .placeholder {51    font-size: 44px; font-weight: 700; color: #d2d3d6;52  }53 54  /* Center illustration placeholder */55  .donut-holder {56    position: absolute; left: 50%; top: 1320px; transform: translateX(-50%);57  }58  .img-placeholder {59    width: 420px; height: 420px;60    background: #E0E0E0; border: 1px solid #BDBDBD;61    display: flex; align-items: center; justify-content: center;62    color: #757575; font-size: 36px; border-radius: 16px;63  }64 65  /* Bottom navigation */66  .bottom-nav {67    position: absolute; bottom: 0; left: 0; right: 0;68    height: 220px; background: rgba(0,0,0,0.20);69    border-top: 1px solid rgba(255,255,255,0.08);70    padding-top: 24px;71  }72  .nav-items {73    display: flex; justify-content: space-around; align-items: center;74    height: 160px;75  }76  .nav-item {77    display: flex; flex-direction: column; align-items: center; gap: 16px;78    color: #9aa0a6; font-size: 34px;79  }80  .nav-item .label { font-weight: 600; }81  .nav-item svg { width: 64px; height: 64px; stroke: #a0a4ab; stroke-width: 6; fill: none; }82  .nav-item.active { color: #ff1f73; }83  .nav-item.active svg { stroke: #ff1f73; }84  .profile-dot {85    width: 72px; height: 72px; border-radius: 50%;86    background: #9f7d6b; color: #fff; display: flex; align-items: center; justify-content: center;87    font-weight: 700; font-size: 36px;88  }89 90  /* Gesture bar */91  .gesture-bar {92    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);93    width: 320px; height: 12px; background: #e8e8ea; border-radius: 8px; opacity: 0.85;94  }95</style>96</head>97<body>98<div id="render-target">99 100  <div class="top">101    <div class="search-row">102      <div class="back-btn" aria-label="Back">103        <svg viewBox="0 0 24 24">104          <path d="M15 5 L8 12 L15 19" />105        </svg>106      </div>107 108      <div class="fake-input" aria-label="Search input">109        <svg viewBox="0 0 24 24">110          <circle cx="10" cy="10" r="6" />111          <line x1="14.5" y1="14.5" x2="20" y2="20" />112        </svg>113        <div class="placeholder">apple pie</div>114      </div>115 116      <div class="filter-btn" aria-label="Filters">117        <svg viewBox="0 0 24 24">118          <line x1="4" y1="7" x2="20" y2="7" />119          <circle cx="9" cy="7" r="2" />120          <line x1="4" y1="17" x2="20" y2="17" />121          <circle cx="15" cy="17" r="2" />122        </svg>123      </div>124    </div>125  </div>126 127  <div class="donut-holder">128    <div class="img-placeholder">[IMG: Donut Illustration]</div>129  </div>130 131  <div class="bottom-nav">132    <div class="nav-items">133      <div class="nav-item active">134        <svg viewBox="0 0 24 24">135          <circle cx="11" cy="11" r="7"></circle>136          <line x1="16" y1="16" x2="22" y2="22"></line>137        </svg>138        <div class="label">Discover</div>139      </div>140      <div class="nav-item">141        <svg viewBox="0 0 24 24">142          <rect x="5" y="9" width="14" height="9" rx="2"></rect>143          <path d="M8 9 V7 a4 4 0 0 1 8 0 v2"></path>144          <path d="M9 12 h6"></path>145        </svg>146        <div class="label">Community</div>147      </div>148      <div class="nav-item">149        <svg viewBox="0 0 24 24">150          <path d="M3 6 h3 l2 9 h10"></path>151          <circle cx="9" cy="19" r="2"></circle>152          <circle cx="17" cy="19" r="2"></circle>153        </svg>154        <div class="label">My Cart</div>155      </div>156      <div class="nav-item">157        <div class="profile-dot">I</div>158        <div class="label">Profile</div>159      </div>160    </div>161  </div>162 163  <div class="gesture-bar"></div>164</div>165</body>166</html>