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 Screen</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #FFFFFF;13  }14 15  /* Status bar */16  .status-bar {17    height: 110px;18    display: flex;19    align-items: center;20    justify-content: space-between;21    padding: 0 40px;22    color: #2D2D2D;23    font-size: 34px;24    letter-spacing: 0.2px;25  }26  .status-icons {27    display: flex; align-items: center; gap: 26px; color: #616161;28    font-size: 30px;29  }30  .status-icons svg { width: 40px; height: 40px; }31 32  /* Search header */33  .search-bar {34    height: 150px;35    display: flex; align-items: center;36    padding: 0 40px;37    color: #9E9E9E;38  }39  .search-input {40    flex: 1;41    margin: 0 24px;42    font-size: 42px;43    color: #9E9E9E;44  }45  .icon-btn svg { width: 54px; height: 54px; fill: none; stroke: #2D2D2D; stroke-width: 40; }46 47  .divider { height: 2px; background: #ECECEC; margin: 0 0 10px 0; }48 49  /* Sections */50  .section {51    padding: 36px 40px;52    border-bottom: 2px solid #F0F0F0;53  }54  .section.row {55    display: flex; align-items: center; justify-content: space-between;56  }57  .section-title {58    font-weight: 700; text-transform: uppercase;59    letter-spacing: 3px; color: #222; font-size: 34px;60  }61  .section-action { color: #4A4A4A; font-weight: 700; font-size: 34px; }62  .chev-right svg { width: 40px; height: 40px; stroke: #444; stroke-width: 40; }63 64  /* List */65  .history-list { padding: 10px 40px 900px 40px; }66  .history-item {67    font-size: 40px; color: #333;68    padding: 30px 0;69  }70 71  /* Keyboard mock */72  .keyboard {73    position: absolute; left: 0; bottom: 0;74    width: 1080px; height: 780px;75    background: #1E1E1E; color: #E0E0E0;76    box-shadow: 0 -6px 20px rgba(0,0,0,0.25);77  }78  .kb-top {79    height: 110px; display: flex; align-items: center; gap: 42px;80    padding: 0 40px; color: #CFCFCF; font-size: 34px;81  }82  .kb-row {83    display: flex; justify-content: center; gap: 18px;84    padding: 16px 28px;85  }86  .key {87    background: #2C2C2C; color: #F1F1F1;88    width: 88px; height: 110px; border-radius: 18px;89    display: flex; align-items: center; justify-content: center;90    font-size: 42px;91  }92  .key.wide { width: 180px; }93  .space { flex: 1; width: auto; min-width: 480px; }94  .key.gray { background: #4A4A4A; color: #fff; }95  .key.circle { width: 120px; height: 120px; border-radius: 60px; background: #C8CFDA; color: #2D2D2D; }96  .key-icon svg { width: 56px; height: 56px; stroke: #F1F1F1; stroke-width: 40; fill: none; }97  .key-icon.dark svg { stroke: #2D2D2D; }98</style>99</head>100<body>101<div id="render-target">102 103  <!-- Status bar -->104  <div class="status-bar">105    <div>9:19</div>106    <div class="status-icons">107      <!-- Location dot -->108      <svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="12" fill="#616161"/></svg>109      <!-- Lock -->110      <svg viewBox="0 0 100 100">111        <rect x="20" y="40" width="60" height="40" rx="8" fill="#616161"/>112        <rect x="34" y="25" width="32" height="20" rx="10" fill="#616161"/>113      </svg>114      <!-- Notification -->115      <svg viewBox="0 0 100 100">116        <path d="M20 70h60V30L60 20H20v50z" fill="#616161"/>117      </svg>118      <!-- Bluetooth -->119      <svg viewBox="0 0 100 100">120        <path d="M40 20v60l24-24-24-24 24-24-24 24" stroke="#616161" stroke-width="8" fill="none"/>121      </svg>122      <!-- Tools -->123      <svg viewBox="0 0 100 100"><path d="M20 60l40-40 20 20-40 40H20V60z" fill="#616161"/></svg>124      <span>•</span>125      <!-- WiFi -->126      <svg viewBox="0 0 100 100">127        <path d="M10 40c20-20 60-20 80 0" stroke="#616161" stroke-width="8" fill="none"/>128        <path d="M25 55c15-15 35-15 50 0" stroke="#616161" stroke-width="8" fill="none"/>129        <circle cx="50" cy="70" r="6" fill="#616161"/>130      </svg>131      <!-- Battery -->132      <svg viewBox="0 0 140 100">133        <rect x="10" y="25" width="110" height="50" rx="10" stroke="#616161" stroke-width="8" fill="none"/>134        <rect x="18" y="33" width="94" height="34" rx="6" fill="#616161"/>135        <rect x="122" y="35" width="10" height="30" rx="3" fill="#616161"/>136      </svg>137      <span>100%</span>138    </div>139  </div>140 141  <!-- Search header -->142  <div class="search-bar">143    <!-- Back arrow -->144    <div class="icon-btn">145      <svg viewBox="0 0 120 120"><path d="M80 20L40 60l40 40" stroke="#2D2D2D" stroke-width="12" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>146    </div>147    <div class="search-input">Find products...</div>148    <!-- Camera icon -->149    <div class="icon-btn">150      <svg viewBox="0 0 120 120">151        <rect x="18" y="34" width="84" height="54" rx="8" />152        <rect x="36" y="24" width="24" height="14" rx="4" />153        <circle cx="60" cy="61" r="16" />154      </svg>155    </div>156  </div>157  <div class="divider"></div>158 159  <!-- Recently Viewed -->160  <div class="section row">161    <div class="section-title">RECENTLY VIEWED</div>162    <div class="chev-right">163      <svg viewBox="0 0 120 120"><path d="M40 20l40 40-40 40" fill="none" stroke="#444" stroke-width="12" stroke-linecap="round" stroke-linejoin="round"/></svg>164    </div>165  </div>166 167  <!-- Search history header -->168  <div class="section row" style="border-bottom: none;">169    <div class="section-title">SEARCH HISTORY</div>170    <div class="section-action">CLEAR ALL</div>171  </div>172 173  <!-- History list -->174  <div class="history-list">175    <div class="history-item">mens shorts</div>176    <div class="history-item">shorts</div>177    <div class="history-item">adidas shorts</div>178    <div class="history-item">track pants</div>179    <div class="history-item">track suite</div>180    <div class="history-item">troysers</div>181    <div class="history-item">Adidas shoes</div>182    <div class="history-item">adidas</div>183  </div>184 185  <!-- Keyboard mock -->186  <div class="keyboard">187    <div class="kb-top">188      <div>◻◻</div>189      <div>🙂</div>190      <div>GIF</div>191      <div>⚙️</div>192      <div>Gᵗʳ</div>193      <div>🎨</div>194      <div class="key-icon"><svg viewBox="0 0 120 120"><path d="M60 20v60" /><circle cx="60" cy="100" r="10"/></svg></div>195    </div>196 197    <!-- Row 1 -->198    <div class="kb-row">199      <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div>200      <div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>201    </div>202    <!-- Row 2 -->203    <div class="kb-row">204      <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>205      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>206      <div class="key key-icon"><svg viewBox="0 0 120 120"><path d="M90 30L60 60l30 30" stroke="#F1F1F1" stroke-width="12" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></div>207    </div>208    <!-- Row 3 -->209    <div class="kb-row">210      <div class="key wide gray">?123</div>211      <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div>212      <div class="key">n</div><div class="key">m</div>213      <div class="key key-icon"><svg viewBox="0 0 120 120"><path d="M30 40h60" stroke="#F1F1F1" stroke-width="12" fill="none" stroke-linecap="round"/></svg></div>214      <div class="key circle key-icon dark">215        <svg viewBox="0 0 120 120">216          <circle cx="50" cy="50" r="30" fill="none"/>217          <path d="M80 80l20 20" stroke="#2D2D2D" stroke-width="8" />218          <circle cx="50" cy="50" r="26" stroke="#2D2D2D" stroke-width="8" fill="none"/>219        </svg>220      </div>221    </div>222    <!-- Space row -->223    <div class="kb-row" style="padding-top: 0;">224      <div class="key space gray"> </div>225    </div>226  </div>227 228</div>229</body>230</html>