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 - Dark UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #121212; color: #FFFFFF; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;12  }13 14  /* Status bar */15  .status-bar {16    height: 110px; background: #0E0E0E; padding: 0 36px;17    display: flex; align-items: center; justify-content: space-between;18    box-sizing: border-box; font-size: 38px;19  }20  .status-icons { display: flex; align-items: center; gap: 26px; opacity: 0.9; }21  .status-icons svg { width: 44px; height: 44px; }22 23  /* Search header */24  .search-header {25    height: 140px; background: #1B1B1B; display: flex; align-items: center; padding: 0 28px; box-sizing: border-box;26    border-bottom: 1px solid #1F1F1F;27  }28  .back-btn {29    width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; margin-right: 12px;30  }31  .search-input-faux {32    flex: 1;33    height: 92px; border-radius: 10px;34    background: #2A2A2A; display: flex; align-items: center;35    padding: 0 26px; box-sizing: border-box; color: #BDBDBD; font-size: 40px;36  }37  .caret {38    position: relative; margin-left: 10px; width: 2px; height: 44px; background: #1DB954; display: inline-block;39    animation: blink 1s step-end infinite;40  }41  @keyframes blink { 50% { opacity: 0; } }42 43  /* Content area */44  .content {45    padding: 44px 36px 0; box-sizing: border-box;46  }47  .section-title {48    font-size: 68px; font-weight: 700; margin: 16px 0 40px;49  }50 51  .recent-item {52    display: flex; align-items: center; justify-content: space-between;53    padding: 24px 0; border-bottom: 1px solid #1E1E1E;54  }55  .recent-left { display: flex; align-items: center; gap: 28px; }56  .avatar {57    width: 140px; height: 140px; border-radius: 50%;58    background: #E0E0E0; border: 1px solid #BDBDBD;59    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px; text-align: center;60  }61  .item-text .title { font-size: 48px; font-weight: 600; color: #FFFFFF; }62  .item-text .subtitle { font-size: 32px; color: #A7A7A7; margin-top: 8px; }63 64  .clear-link {65    margin-top: 36px; color: #CFCFCF; font-size: 44px;66  }67  .x-btn svg { width: 60px; height: 60px; opacity: 0.9; }68 69  /* Spacer above keyboard */70  .spacer { height: 880px; }71 72  /* Keyboard mock */73  .keyboard {74    position: absolute; left: 0; right: 0; bottom: 48px;75    height: 860px; background: #1C1C1C; border-top: 1px solid #212121;76    box-sizing: border-box;77    display: flex; flex-direction: column; justify-content: flex-start;78  }79  .kbd-toolbar {80    height: 120px; padding: 0 28px; display: flex; align-items: center; gap: 30px; background: #1A1A1A; box-sizing: border-box;81  }82  .tool-icon {83    width: 86px; height: 86px; border-radius: 22px; background: #2B2B2B;84    display: flex; align-items: center; justify-content: center;85  }86  .tool-icon svg { width: 44px; height: 44px; color: #E0E0E0; }87 88  .keys { padding: 18px 22px 10px; display: flex; flex-direction: column; gap: 18px; box-sizing: border-box; }89  .row { display: flex; gap: 12px; }90  .key {91    flex: 1; height: 120px; background: #2A2A2A; border-radius: 26px; color: #EDEDED;92    display: flex; align-items: center; justify-content: center; font-size: 44px;93  }94  .key-small { flex: 0 0 calc((100% - 9*12px)/10); }95  .key-wide { flex: 1.4; }96  .key-xwide { flex: 2.2; }97  .key-action { background: #3A3A3A; color: #FFFFFF; }98  .enter-btn { background: #9EB4D9; color: #111; }99 100  /* Home indicator */101  .home-pill {102    position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);103    width: 330px; height: 12px; border-radius: 10px; background: #EAEAEA; opacity: 0.9;104  }105</style>106</head>107<body>108<div id="render-target">109 110  <!-- Status Bar -->111  <div class="status-bar">112    <div class="time">5:29</div>113    <div class="status-icons">114      <!-- simple circle icon -->115      <svg viewBox="0 0 24 24" fill="#E0E0E0"><circle cx="12" cy="12" r="9"/></svg>116      <!-- WiFi -->117      <svg viewBox="0 0 24 24" fill="none" stroke="#E0E0E0" stroke-width="2">118        <path d="M2 8c5-4 15-4 20 0"/><path d="M5 11c4-3 10-3 14 0"/><path d="M8 14c3-2 5-2 8 0"/><circle cx="12" cy="18" r="2" fill="#E0E0E0" stroke="none"/>119      </svg>120      <!-- Battery -->121      <svg viewBox="0 0 36 24" fill="none" stroke="#E0E0E0" stroke-width="2">122        <rect x="2" y="5" width="28" height="14" rx="3"></rect>123        <rect x="4" y="7" width="20" height="10" rx="2" fill="#E0E0E0" stroke="none"></rect>124        <rect x="30" y="9" width="4" height="6" rx="1" fill="#E0E0E0" stroke="none"></rect>125      </svg>126    </div>127  </div>128 129  <!-- Search Header -->130  <div class="search-header">131    <div class="back-btn">132      <svg viewBox="0 0 24 24" fill="#FFFFFF">133        <path d="M15.5 4l-8 8 8 8 1.5-1.5L10 12l7-6.5z"/>134      </svg>135    </div>136    <div class="search-input-faux">137      What do you want to listen to?<span class="caret"></span>138    </div>139  </div>140 141  <!-- Content -->142  <div class="content">143    <div class="section-title">Recent searches</div>144 145    <div class="recent-item">146      <div class="recent-left">147        <div class="avatar">[IMG: Artist Avatar]</div>148        <div class="item-text">149          <div class="title">Martin Garrix</div>150          <div class="subtitle">Artist</div>151        </div>152      </div>153      <div class="x-btn">154        <svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round">155          <path d="M5 5l14 14M19 5L5 19"/>156        </svg>157      </div>158    </div>159 160    <div class="clear-link">Clear recent searches</div>161 162    <div class="spacer"></div>163  </div>164 165  <!-- Keyboard Mock -->166  <div class="keyboard">167    <div class="kbd-toolbar">168      <div class="tool-icon">169        <svg viewBox="0 0 24 24" fill="#E0E0E0"><circle cx="12" cy="12" r="10"/></svg>170      </div>171      <div class="tool-icon">172        <svg viewBox="0 0 24 24" fill="#E0E0E0"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>173      </div>174      <div class="tool-icon">175        <svg viewBox="0 0 24 24" fill="#E0E0E0"><text x="4" y="16" font-size="10" font-family="monospace">GIF</text></svg>176      </div>177      <div class="tool-icon">178        <svg viewBox="0 0 24 24" fill="#E0E0E0"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2" stroke="#1C1C1C" stroke-width="2"/></svg>179      </div>180      <div class="tool-icon">181        <svg viewBox="0 0 24 24" fill="#E0E0E0"><path d="M3 3h18v14H3z"/><circle cx="7" cy="19" r="2"/><circle cx="17" cy="19" r="2"/></svg>182      </div>183      <div class="tool-icon">184        <svg viewBox="0 0 24 24" fill="#E0E0E0"><path d="M12 3a5 5 0 00-5 5v4a5 5 0 0010 0V8a5 5 0 00-5-5z"/></svg>185      </div>186    </div>187 188    <div class="keys">189      <!-- Row 1 -->190      <div class="row">191        <div class="key key-small">q</div>192        <div class="key key-small">w</div>193        <div class="key key-small">e</div>194        <div class="key key-small">r</div>195        <div class="key key-small">t</div>196        <div class="key key-small">y</div>197        <div class="key key-small">u</div>198        <div class="key key-small">i</div>199        <div class="key key-small">o</div>200        <div class="key key-small">p</div>201      </div>202      <!-- Row 2 -->203      <div class="row" style="padding: 0 60px;">204        <div class="key">a</div>205        <div class="key">s</div>206        <div class="key">d</div>207        <div class="key">f</div>208        <div class="key">g</div>209        <div class="key">h</div>210        <div class="key">j</div>211        <div class="key">k</div>212        <div class="key">l</div>213      </div>214      <!-- Row 3 -->215      <div class="row">216        <div class="key key-wide key-action">↑</div>217        <div class="key">z</div>218        <div class="key">x</div>219        <div class="key">c</div>220        <div class="key">v</div>221        <div class="key">b</div>222        <div class="key">n</div>223        <div class="key">m</div>224        <div class="key key-wide key-action">225          <svg viewBox="0 0 24 24" width="44" height="44" fill="#EDEDED">226            <path d="M21 4L8 17l-5-5 1.5-1.5L8 14l11.5-11L21 4z"/>227          </svg>228        </div>229      </div>230      <!-- Row 4 -->231      <div class="row">232        <div class="key key-action">?123</div>233        <div class="key key-action">,</div>234        <div class="key key-xwide">🙂</div>235        <div class="key key-xwide">space</div>236        <div class="key key-action">.</div>237        <div class="key enter-btn">238          <svg viewBox="0 0 24 24" width="46" height="46" fill="#111">239            <path d="M10 17l5-5-5-5v10zM4 4h2v16H4z"/>240          </svg>241        </div>242      </div>243    </div>244  </div>245 246  <!-- Home Pill -->247  <div class="home-pill"></div>248</div>249</body>250</html>