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 UI Mock</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: #FFFFFF;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0; left: 0;21    width: 100%;22    height: 108px;23    padding: 0 36px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    color: #222;28    font-weight: 600;29    font-size: 36px;30    box-sizing: border-box;31  }32  .status-left { display: flex; align-items: center; gap: 16px; }33  .status-right { display: flex; align-items: center; gap: 26px; color: #4A4A4A; }34 35  /* Search header */36  .search-header {37    position: absolute;38    top: 118px;39    left: 24px;40    right: 24px;41    height: 120px;42    display: flex;43    align-items: center;44    gap: 20px;45  }46  .icon-btn {47    width: 84px;48    height: 84px;49    border-radius: 42px;50    background: #FFFFFF;51    display: flex;52    align-items: center;53    justify-content: center;54  }55  .search-field {56    flex: 1;57    height: 92px;58    background: #F4F5F7;59    border-radius: 46px;60    position: relative;61    display: flex;62    align-items: center;63    padding: 0 110px 0 36px;64    box-sizing: border-box;65  }66  .search-text {67    color: #333;68    font-size: 40px;69    white-space: nowrap;70    overflow: hidden;71    text-overflow: ellipsis;72  }73  .underline {74    position: absolute;75    bottom: 10px;76    left: 36px;77    height: 5px;78    width: 82%;79    background: #E91E63;80    border-radius: 3px;81  }82  .clear-btn {83    position: absolute;84    right: 100px;85    width: 54px;86    height: 54px;87    border-radius: 28px;88    background: #EDEDED;89    display: flex; align-items: center; justify-content: center;90  }91  .mic-circle {92    width: 92px;93    height: 92px;94    border-radius: 46px;95    background: #FFE7F0;96    display: flex; align-items: center; justify-content: center;97  }98 99  .divider {100    position: absolute;101    top: 250px;102    left: 0; right: 0;103    height: 2px;104    background: #E8E8E8;105  }106 107  /* Suggestions */108  .suggestions {109    position: absolute;110    top: 270px;111    left: 24px; right: 24px;112  }113  .sugg-item {114    display: flex;115    align NB: center;116 NB:  } </style></head></html>