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 History List</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16    color: #212121;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 140px;26    background: #8A8A8A;27    color: #FFFFFF;28    padding: 0 36px;29    box-sizing: border-box;30    display: flex;31    align-items: center;32    justify-content: space-between;33  }34  .status-time {35    font-size: 40px;36    letter-spacing: 1px;37  }38  .status-icons {39    display: flex;40    align-items: center;41    gap: 20px;42  }43  .status-icons svg { width: 46px; height: 46px; fill: #fff; }44 45  /* Header / App bar */46  .app-bar {47    position: absolute;48    top: 140px;49    left: 0;50    width: 1080px;51    height: 140px;52    background: #FFFFFF;53    border-bottom: 1px solid #E6E6E6;54    display: flex;55    align-items: center;56    padding: 0 28px;57    box-sizing: border-box;58  }59  .back-btn {60    width: 96px;61    height: 96px;62    display: flex;63    align-items: center;64    justify-content: center;65    margin-right: 10px;66  }67  .app-title {68    font-size: 46px;69    color: #4A4A4A;70  }71  .app-actions {72    margin-left: auto;73    width: 96px;74    height: 96px;75    display: flex;76    align-items: center;77    justify-content: center;78  }79  .app-actions svg { width: 40px; height: 40px; fill: #2E2E2E; }80 81  /* List section */82  .list {83    position: absolute;84    top: 280px; /* status + app bar */85    left: 0;86    right: 0;87    bottom: 920px; /* space for keyboard */88    overflow: hidden;89    background: #FFFFFF;90  }91  .item {92    padding: 34px 28px;93    display: flex;94    align-items: center;95    box-sizing: border-box;96    border-bottom: 1px solid #E6E6E6;97  }98  .item .icon {99    width: 70px;100    height: 70px;101    margin-right: 28px;102    display: flex;103    align-items: center;104    justify-content: center;105  }106  .item .texts {107    display: flex;108    flex-direction: column;109    gap: 8px;110  }111  .item .title {112    font-weight: 700;113    font-size: 44px;114    color: #2D2D2D;115  }116  .item .subtitle {117    font-size: 36px;118    color: #8A8A8A;119  }120 121  /* Keyboard mock */122  .keyboard {123    position: absolute;124    left: 0;125    right: 0;126    bottom: 0;127    height: 920px;128    background: #2A2422;129    border-top: 1px solid rgba(255,255,255,0.08);130    box-sizing: border-box;131    padding: 24px 24px 80px;132  }133  .kb-top-tools {134    display: flex;135    gap: 40px;136    margin-bottom: 26px;137  }138  .tool {139    width: 88px; height: 88px;140    border-radius: 22px;141    background: rgba(255,255,255,0.1);142  }143 144  .kb-grid {145    display: grid;146    grid-template-columns: repeat(10, 1fr);147    grid-auto-rows: 120px;148    gap: 18px;149    margin-bottom: 18px;150  }151  .key {152    border-radius: 22px;153    background: #3A3432;154    display: flex;155    align-items: center;156    justify-content: center;157    color: #E7D7CF;158    font-size: 40px;159  }160  .kb-row-last {161    display: grid;162    grid-template-columns: 1.2fr 1fr 3fr 1fr 1.2fr;163    gap: 18px;164    height: 120px;165  }166  .gesture-bar {167    position: absolute;168    left: 50%;169    transform: translateX(-50%);170    bottom: 24px;171    width: 360px;172    height: 12px;173    background: #DCDCDC;174    opacity: 0.9;175    border-radius: 12px;176  }177 178  /* Utility for subtle dim text weight where needed */179  .muted { color: #9E9E9E; }180</style>181</head>182<body>183<div id="render-target">184 185  <!-- Status Bar -->186  <div class="status-bar">187    <div class="status-time">11:36</div>188    <div class="status-icons">189      <!-- Wi-Fi -->190      <sv