GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Search UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #ffffff;12  }13 14  /* Status bar */15  .status-bar {16    position: absolute; top: 0; left: 0; width: 100%; height: 96px;17    display: flex; align-items: center; justify-content: space-between;18    padding: 0 32px; color: #616161; font-weight: 500; font-size: 34px;19  }20  .status-right { display: flex; gap: 28px; align-items: center; }21  .sb-icon svg { width: 36px; height: 36px; fill: #616161; }22 23  /* Search area */24  .content { position: absolute; left: 0; right: 0; top: 96px; }25  .search-wrap { padding: 24px 24px 12px 24px; }26  .search-box {27    height: 112px; border-radius: 56px; border: 1px solid #DADCE0;28    background: #F1F3F4; display: flex; align-items: center; padding: 0 24px; gap: 24px;29  }30  .search-box .placeholder { color: #757575; font-size: 40px; flex: 1; }31  .search-box .icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }32  .search-box .icon svg { width: 48px; height: 48px; fill: #5F6368; }33 34  /* Quick chips */35  .chips { display: flex; align-items: center; gap: 36px; padding: 18px 8px 8px 8px; }36  .chip { display: flex; align-items: center; gap: 18px; }37  .chip .circle {38    width: 72px; height: 72px; border-radius: 50%; background: #F1F3F4; border: 1px solid #E0E0E0;39    display: flex; align-items: center; justify-content: center;40  }41  .chip .circle svg { width: 40px; height: 40px; fill: #616161; }42  .chip .texts .title { font-size: 36px; color: #212121; }43  .chip .texts .sub { font-size: 28px; color: #9E9E9E; }44  .divider-vert { width: 1px; height: 56px; background: #E0E0E0; }45  .more-pill {46    width: 72px; height: 72px; border-radius: 50%; border: 1px solid #E0E0E0; background: #F8F9FA;47    display: flex; align-items: center; justify-content: center;48  }49  .section-divider { height: 14px; background: #F5F5F5; margin-top: 12px; }50 51  /* Recent header */52  .recent-header { display: flex; justify-content: space-between; align-items: center; padding: 24px; }53  .recent-title { font-size: 34px; color: #616161; }54  .info-icon { width: 44px; height: 44px; border-radius: 50%; background: #F1F3F4; border: 1px solid #E0E0E0;55    display: flex; align-items: center; justify-content: center; }56  .info-icon svg { width: 28px; height: 28px; fill: #616161; }57 58  /* List */59  .list { }60  .item { display: flex; gap: 28px; align-items: flex-start; padding: 28px 24px; }61  .item + .item { border-top: 1px solid #EEEEEE; }62  .lead {63    width: 72px; height: 72px; border-radius: 50%; background: #F1F3F4; border: 1px solid #E0E0E0;64    display: flex; align-items: center; justify-content: center;65  }66  .lead.clock svg { width: 36px; height: 36px; fill: #757575; }67  .lead.transit { background: #E3F2FD; border-color: #BBDEFB; }68  .lead.transit svg { width: 36px; height: 36px; fill: #1A73E8; }69  .texts .name { font-size: 40px; color: #212121; line-height: 1.2; }70  .texts .sub { font-size: 30px; color: #757575; margin-top: 8px; }71 72  /* Keyboard mock */73  .keyboard {74    position: absolute; left: 0; bottom: 88px; width: 100%; height: 900px;75    background: #1E1E1E; border-top-left-radius: 24px; border-top-right-radius: 24px;76    box-shadow: 0 -6px 16px rgba(0,0,0,0.25);77  }78  .kb-top { display: flex; align-items: center; gap: 24px; padding: 20px 24px; color: #E0E0E0; }79  .kb-top .back { width: 88px; height: 88px; border-radius: 50%; background: #BFE8FF; display: flex; align-items: center; justify-content: center; }80  .kb-top .back svg { width: 44px; height: 44px; fill: #1E1E1E; }81  .kb-top .tag { padding: 14px 18px; background: #2A2A2A; border-radius: 14px; font-size: 28px; }82  .keys { padding: 10px 24px 0 24px; }83  .row { display: flex; justify-content: space-between; padding: 16px 0; }84  .key {85    width: 92px; height: 108px; border-radius: 18px; background: #2B2B2B; color: #FAFAFA;86    display: flex; align-items: center; justify-content: center; font-size: 42px;87  }88  .key.wide { width: 140px; }89  .key.xwide { width: 180px; }90  .key.space { flex: 1; margin: 0 12px; }91  .key.blue { background: #BFE8FF; color: #0D47A1; }92  .key.dark { background: #242424; color: #BDBDBD; font-size: 30px; }93  .kb-bottom { display: flex; align-items: center; padding: 16px 24px; }94  .kb-bottom .search-btn {95    margin-left: auto; width: 112px; height: 112px; border-radius: 50%; background: #BFE8FF;96    display: flex; align-items: center; justify-content: center;97  }98  .kb-bottom .search-btn svg { width: 48px; height: 48px; fill: #0D47A1; }99 100  /* Home indicator */101  .home-indicator {102    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);103    width: 360px; height: 14px; border-radius: 7px; background: #E0E0E0;104  }105</style>106</head>107<body>108<div id="render-target">109 110  <!-- Status bar -->111  <div class="status-bar">112    <div class="status-left">4:01</div>113    <div class="status-right">114      <div class="sb-icon">115        <svg viewBox="0 0 24 24"><path d="M12 2c3.3 0 6 2.7 6 6 0 4.5-6 14-6 14S6 12.5 6 8c0-3.3 2.7-6 6-6zm0 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>116      </div>117      <div class="sb-icon">118        <svg viewBox="0 0 24 24"><path d="M2 18h20L12 6 2 18z"/></svg>119      </div>120      <div class="sb-icon">121        <svg viewBox="0 0 24 24"><path d="M16 4H8v16h8c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-6 2h6v12H10V6z"/></svg>122      </div>123    </div>124  </div>125 126  <div class="content">127    <div class="search-wrap">128      <div class="search-box">129        <div class="icon">130