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 {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13    color: #212121;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #ffffff;21  }22 23  /* Status bar */24  .status-bar {25    height: 120px;26    background: #E9E9E9;27    display: flex;28    align-items: center;29    justify-content: space-between;30    padding: 0 36px;31    box-sizing: border-box;32    font-weight: 600;33    color: #4a4a4a;34    letter-spacing: 0.5px;35  }36  .status-icons {37    display: flex;38    align-items: center;39    gap: 24px;40  }41  .status-dot {42    width: 26px;43    height: 26px;44    background: #8d8d8d;45    border-radius: 50%;46    opacity: 0.8;47  }48  .status-signal {49    width: 36px;50    height: 26px;51    border: 2px solid #6f6f6f;52    border-radius: 4px;53  }54  .status-battery {55    width: 40px;56    height: 20px;57    border: 2px solid #6f6f6f;58    border-radius: 3px;59    position: relative;60  }61  .status-battery:after {62    content: "";63    position: absolute;64    right: -6px;65    top: 5px;66    width: 4px;67    height: 10px;68    background: #6f6f6f;69    border-radius: 2px;70  }71 72  /* Search bar */73  .search-area {74    height: 128px;75    display: flex;76    align-items: center;77    padding: 0 28px;78    border-bottom: 1px solid #eeeeee;79    box-sizing: border-box;80  }81  .search-box {82    width: 100%;83    height: 88px;84    border: 1px solid #e6e6e6;85    border-radius: 10px;86    display: flex;87    align-items: center;88    padding: 0 24px;89    box-sizing: border-box;90    background: #ffffff;91    gap: 20px;92  }93  .search-placeholder {94    flex: 1;95    color: #9e9e9e;96    font-size: 30px;97  }98  .icon {99    width: 40px;100    height: 40px;101    display: inline-flex;102    align-items: center;103    justify-content: center;104    color: #616161;105  }106  .icon svg {107    width: 40px;108    height: 40px;109  }110 111  /* Recent searches */112  .recent-list {113    padding: 10px 0 0 0;114  }115  .recent-item {116    display: flex;117    align-items: center;118    padding: 26px 32px;119    gap: 24px;120    border-bottom: 1px solid #f0f0f0;121    font-size: 34px;122    color: #3d3d3d;123  }124  .recent-item .text {125    flex: 1;126  }127  .recent-label {128    padding: 12px 32px 6px;129    font-size: 28px;130    color: #8b8b8b;131    display: none;132  }133 134  /* Discover more */135  .discover {136    padding: 26px 32px 0;137  }138  .discover h3 {139    margin: 0 0 20px 0;140    font-size: 34px;141    font-weight: 600;142    color: #3d3d3d;143  }144  .chips {145    display: flex;146    flex-wrap: wrap;147    gap: 22px;148  }149  .chip {150    padding: 20px 26px;151    border-radius: 12px;152    background: #FAFAFA;153    border: 1px solid #EBEBEB;154    font-size: 32px;155    color: #4F46E5;156    box-shadow: 0 2px 0 rgba(0,0,0,0.04);157    white-space: nowrap;158  }159 160  /* Spacer area above keyboard */161  .content-spacer {162    height: 650px;163  }164 165  /* Keyboard mock */166  .keyboard {167    position: absolute;168    bottom: 0;169    left: 0;170    width: 1080px;171    height: 860px;172    background: #2b211e;173    color: #f3e6df;174    box-sizing: border-box;175    padding: 18px 18px 30px;176  }177  .kbd-top {178    display: flex;179    align-items: center;180    justify-content: space-between;181    padding: 6px 8px 18px;182  }183  .kbd-tool {184    width: 88px;185    height: 72px;186    border-radius: 18px;187    background: rgba(255,255,255,0.08);188    display: flex;189    align-items: center;190    justify-content: center;191    font-weight: 700;192    font-size: 24px;193  }194  .keys {195    display: grid;196    grid-template-columns: repeat(10, 1fr);197    gap: 14px;198    padding: 0 8px;199  }200  .key {201    height: 104px;202    border-radius: 18px;203    background: rgba(255,255,255,0.08);204    display: flex;205    align-items: center;206    justify-content: center;207    font-size: 38px;208    letter-spacing: 1px;209  }210  .keys-row {211    margin-top: 14px;212    display: grid;213    grid-template-columns: 0.7fr repeat(8, 1fr) 1.2fr;214    gap: 14px;215    padding: 0 8px;216  }217  .keys-row-3 {218    margin-top: 14px;219    display: grid;220    grid-template-columns: 1.4fr repeat(7, 1fr) 1.4fr;221    gap: 14px;222    padding: 0 8px;223  }224  .keys-row-4 {225    margin-top: 14px;226    display: grid;227    grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1.2fr;228    gap: 14px;229    padding: 0 8px;230  }231  .space-row {232    margin-top: 16px;233    display: grid;234    grid-template-columns: 1.3fr 1fr 4fr 1fr 1.3fr;235    gap: 14px;236    padding: 0 8px;237  }238</style>239</head>240<body>241<div id="render-target">242 243  <!-- Status Bar -->244  <div class="status-bar">245    <div class="time">12:09</div>246    <div class="status-icons">247      <div class="status-dot">