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 Recent Screen</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15  }16 17  /* Top teal header (status + app bar) */18  .top-header {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 260px;24    background: #4FA9AE; /* teal */25  }26  .status-bar {27    height: 90px;28    display: flex;29    align-items: center;30    padding: 0 40px;31    color: #FFFFFF;32    font-size: 36px;33    justify-content: space-between;34  }35  .status-left { display: flex; align-items: center; gap: 12px; }36  .status-right { display: flex; align-items: center; gap: 28px; }37  .status-icon svg { width: 42px; height: 42px; }38 39  .app-bar {40    height: 170px;41    display: flex;42    align-items: center;43    padding: 0 40px;44    color: #FFFFFF;45  }46  .back-btn svg { width: 64px; height: 64px; }47  .title {48    font-size: 54px;49    line-height: 1;50    margin-left: 26px;51    flex: 1;52    text-transform: lowercase;53  }54  .close-btn svg { width: 64px; height: 64px; }55 56  /* Content */57  .content {58    position: absolute;59    top: 260px;60    left: 0;61    right: 0;62    bottom: 160px;63    padding: 30px 40px;64    color: #212121;65  }66  .recent-row {67    display: flex;68    align-items: center;69    padding: 30px 0 10px 0;70  }71  .recent-row .clock-icon svg { width: 52px; height: 52px; }72  .recent-title {73    font-size: 38px;74    font-weight: 600;75    color: #7A7A7A;76    margin-left: 20px;77  }78  .clear {79    margin-left: auto;80    font-size: 38px;81    color: #9E9E9E;82  }83  .list {84    margin-top: 20px;85    padding-left: 72px; /* small indent similar to screenshot */86  }87  .list-item {88    font-size: 46px;89    color: #101010;90    padding: 26px 0;91  }92 93  /* Bottom gesture/nav bar */94  .gesture-bar {95    position: absolute;96    bottom: 0;97    left: 0;98    width: 1080px;99    height: 160px;100    background: #000000;101    display: flex;102    align-items: center;103    justify-content: center;104  }105  .gesture-pill {106    width: 260px;107    height: 12px;108    background: #CFCFCF;109    border-radius: 12px;110  }111</style>112</head>113<body>114<div id="render-target">115  <div class="top-header">116    <div class="status-bar">117      <div class="status-left">118        <span>11:02</span>119      </div>120      <div class="status-right">121        <!-- Wi-Fi icon -->122        <span class="status-icon">123          <svg viewBox="0 0 24 24">124            <path d="M2 8c5-4 15-4 20 0" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>125            <path d="M5 12c4-3 10-3 14 0" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>126            <path d="M9 16c3-2 3-2 6 0" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>127            <circle cx="12" cy="19" r="1.5" fill="#FFFFFF"/>128          </svg>129        </span>130        <!-- Battery icon -->131        <span class="status-icon">132          <svg viewBox="0 0 32 24">133            <rect x="2" y="6" width="24" height="12" rx="2" ry="2" fill="none" stroke="#FFFFFF" stroke-width="2"/>134            <rect x="4" y="8" width="18" height="8" fill="#FFFFFF"/>135            <rect x="26" y="9" width="4" height="6" fill="#FFFFFF"/>136          </svg>137        </span>138        <span style="color:#FFFFFF;font-size:36px;">100%</span>139      </div>140    </div>141 142    <div class="app-bar">143      <div class="back-btn">144        <svg viewBox="0 0 24 24">145          <path d="M15 6 L9 12 L15 18" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>146        </svg>147      </div>148      <div class="title">screwdriver kit</div>149      <div class="close-btn">150        <svg viewBox="0 0 24 24">151          <path d="M6 6 L18 18 M18 6 L6 18" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round"/>152        </svg>153      </div>154    </div>155  </div>156 157  <div class="content">158    <div class="recent-row">159      <div class="clock-icon">160        <svg viewBox="0 0 24 24">161          <circle cx="12" cy="12" r="8.5" fill="none" stroke="#B0B0B0" stroke-width="2"/>162          <path d="M12 7 L12 12 L16 14" stroke="#B0B0B0" stroke-width="2" stroke-linecap="round"/>163        </svg>164      </div>165      <div class="recent-title">Recent Searches</div>166      <div class="clear">Clear</div>167    </div>168 169    <div class="list">170      <div class="list-item">Screwdriver kit</div>171      <div class="list-item">Wrench tool</div>172      <div class="list-item">Visko hammer</div>173      <div class="list-item">Viski</div>174      <div class="list-item">Taparia measuring tape</div>175    </div>176  </div>177 178  <div class="gesture-bar">179    <div class="gesture-pill"></div>180  </div>181</div>182</body>183</html>