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>Trending Searches Screen</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: "Segoe UI", Roboto, Arial, Helvetica, sans-serif;13    color: #222;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #ffffff;21  }22 23  /* Top status bar */24  .status-bar {25    height: 120px;26    background: #08A1A8; /* teal */27    width: 100%;28  }29 30  /* Header with back arrow and search hint */31  .search-header {32    display: flex;33    align-items: center;34    padding: 28px 36px 12px 24px;35  }36  .back-arrow {37    width: 72px;38    height: 72px;39    margin-right: 18px;40    display: flex;41    align-items: center;42    justify-content: center;43  }44  .back-arrow svg {45    width: 48px;46    height: 48px;47    fill: #08A1A8;48  }49  .search-placeholder {50    font-size: 46px;51    color: #bdbdbd;52    font-weight: 500;53    line-height: 1.2;54  }55 56  /* Trending section */57  .content {58    padding: 10px 48px 0 48px;59  }60  .section-title {61    display: flex;62    align-items: center;63    gap: 18px;64    margin-top: 24px;65    margin-bottom: 18px;66  }67  .section-title svg {68    width: 44px;69    height: 44px;70    fill: #9e9e9e;71  }72  .section-title span {73    font-weight: 700;74    font-size: 38px;75    color: #4b4b4b;76  }77 78  .trending-list {79    list-style: none;80    padding: 0;81    margin: 6px 0 0 62px; /* indent to align under title text */82  }83  .trending-list li {84    font-size: 44px;85    padding: 28px 0;86    border-bottom: 0;87    color: #1c1c1c;88  }89 90  /* Bottom navigation pill (gesture area) */91  .nav-pill-area {92    position: absolute;93    bottom: 0;94    left: 0;95    width: 100%;96    height: 120px;97    background: #000000;98    display: flex;99    align-items: center;100    justify-content: center;101  }102  .pill {103    width: 220px;104    height: 12px;105    background: #e6e6e6;106    border-radius: 8px;107    opacity: 0.9;108  }109</style>110</head>111<body>112<div id="render-target">113  <div class="status-bar"></div>114 115  <div class="search-header">116    <div class="back-arrow" aria-label="Back">117      <!-- Left arrow icon -->118      <svg viewBox="0 0 24 24">119        <path d="M14.7 5.3a1 1 0 0 1 0 1.4L10.4 11l4.3 4.3a1 1 0 1 1-1.4 1.4l-5-5a1 1 0 0 1 0-1.4l5-5a1 1 0 0 1 1.4 0z"/>120      </svg>121    </div>122    <div class="search-placeholder">What is on your mind today?</div>123  </div>124 125  <div class="content">126    <div class="section-title">127      <!-- refresh/trend icon -->128      <svg viewBox="0 0 24 24">129        <path d="M12 5a7 7 0 1 1-6.9 8H3l3-3 3 3H7.1A5 5 0 1 0 12 7V5z"/>130      </svg>131      <span>Trending Searches</span>132    </div>133 134    <ul class="trending-list">135      <li>Time Sale</li>136      <li>Mobiles</li>137      <li>T-Shirts</li>138      <li>Headphones</li>139      <li>Shoes</li>140      <li>Sarees</li>141      <li>Shirts</li>142      <li>Watches</li>143      <li>Bedsheets</li>144      <li>Trimmers</li>145    </ul>146  </div>147 148  <div class="nav-pill-area">149    <div class="pill"></div>150  </div>151</div>152</body>153</html>