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 Results - Plants</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    position: absolute; top: 0; left: 0; right: 0;18    height: 110px; padding: 0 40px;19    display: flex; align-items: center; justify-content: space-between;20    color: #555;21    font-size: 40px; font-weight: 600;22  }23  .status-left { display: flex; align-items: center; gap: 16px; }24  .status-right { display: flex; align-items: center; gap: 24px; }25  .status-icon { width: 40px; height: 40px; }26 27  /* Search bar */28  .search-wrap {29    position: absolute; top: 130px; left: 48px; right: 48px;30  }31  .search-bar {32    height: 124px; border: 4px solid #1B5E20; border-radius: 28px;33    background: #EAF5E8; display: flex; align-items: center;34    padding: 0 28px;35    box-shadow: 0 2px 0 #1B5E20 inset;36  }37  .search-text {38    flex: 1; color: #2E7D32; font-size: 42px; font-weight: 600;39  }40  .search-actions { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; }41  .icon-x { width: 44px; height: 44px; }42  .icon-x line { stroke: #1B5E20; stroke-width: 6; stroke-linecap: round; }43 44  /* Tabs */45  .tabs {46    position: absolute; top: 290px; left: 0; right: 0;47    text-align: center; color: #1B5E20; font-size: 40px; font-weight: 700;48  }49  .tabs-inner {50    display: flex; align-items: center; justify-content: center; gap: 260px;51    margin-bottom: 28px;52  }53  .tab-indicator {54    position: relative; height: 10px;55  }56  .tab-line-bg {57    position: absolute; left: 60px; right: 60px; height: 6px; background: #E5EAE5; border-radius: 3px;58  }59  .tab-line-active {60    position: absolute; left: 120px; width: 380px; height: 8px; background: #1B5E20; border-radius: 4px;61  }62 63  /* Results list */64  .results {65    position: absolute; top: 380px; left: 48px; right: 48px; bottom: 760px; overflow-y: auto;66  }67  .section-title {68    color: #1B5E20; font-size: 44px; font-weight: 700; margin: 0 12px 18px 12px;69  }70  .item {71    display: flex; align-items: center; gap: 28px;72    padding: 24px 12px;73    border-bottom: 1px solid #EEF1EE;74  }75  .thumb {76    width: 120px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 22px;77    display: flex; justify-content: center; align-items: center; color: #757575; font-size: 26px; text-align: center; padding: 8px;78  }79  .details { flex: 1; }80  .title {81    color: #0B4D26; font-size: 44px; font-weight: 700; line-height: 1.2; margin-bottom: 10px;82  }83  .subtitle {84    color: #666; font-size: 30px; line-height: 1.3;85  }86  .info {87    width: 64px; height: 64px; border: 4px solid #1B5E20; border-radius: 50%;88    display: flex; align-items: center; justify-content: center;89    color: #1B5E20; font-size: 36px; font-weight: 700;90  }91 92  /* Keyboard */93  .keyboard {94    position: absolute; left: 0; right: 0; bottom: 0;95    height: 760px; background: #1F1F21; border-top-left-radius: 24px; border-top-right-radius: 24px;96    box-shadow: 0 -6px 16px rgba(0,0,0,0.2);97  }98  .kbd-suggestion {99    height: 92px; display: flex; align-items: center; padding: 0 28px;100    color: #CFCFD2; font-size: 40px;101  }102  .kbd-row {103    display: flex; justify-content: space-between; padding: 0 40px; margin-top: 22px; gap: 16px;104  }105  .key {106    background: #2B2B2E; color: #FFFFFF; font-size: 42px; border-radius: 22px;107    height: 104px; min-width: 84px; display: flex; align-items: center; justify-content: center;108    box-shadow: inset 0 -2px 0 rgba(255,255,255,0.04);109  }110  .key.wide { min-width: 130px; }111  .key.space { flex: 1; min-width: 400px; }112  .key.circle { border-radius: 36px; min-width: 100px; }113  .gesture-bar {114    position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);115    width: 420px; height: 10px; background: #EAEAEA; border-radius: 8px;116  }117</style>118</head>119<body>120<div id="render-target">121 122  <!-- Status Bar -->123  <div class="status-bar">124    <div class="status-left">125      <div>9:09</div>126      <svg class="status-icon" viewBox="0 0 24 24" aria-hidden="true">127        <path d="M6 14c-1.7 0-3-1.3-3-3 0-1.7 1.3-3 3-3 .6-2 2.5-3 4.3-3C12.8 5 15 7.2 15 9.7h1.5c2 0 3.5 1.5 3.5 3.3 0 1.7-1.4 3-3.2 3H6z" fill="#9E9E9E"/>128      </svg>129    </div>130    <div class="status-right">131      <svg class="status-icon" viewBox="0 0 24 24" aria-hidden="true">132        <path d="M3 17h18v2H3zM5 13h14v2H5zM7 9h10v2H7z" fill="#9E9E9E"/>133      </svg>134      <svg class="status-icon" viewBox="0 0 24 24" aria-hidden="true">135        <rect x="2" y="6" width="18" height="12" rx="2" fill="none" stroke="#9E9E9E" stroke-width="2"/>136        <rect x="3.5" y="7.5" width="14.5" height="9" fill="#9E9E9E"/>137        <rect x="21" y="9" width="2" height="6" rx="1" fill="#9E9E9E"/>138      </svg>139    </div>140  </div>141 142  <!-- Search Bar -->143  <div class="search-wrap">144    <div class="search-bar">145      <div class="search-text">schefflera actinophylla</div>146      <div class="search-actions">147        <svg class="icon-x" viewBox="0 0 24 24" aria-hidden="true">148          <line x1="5" y1="5" x2="19" y2="19"></line>149          <line x1="19" y1="5" x2="5" y2="19"></line>150        </svg>151      </div>152    </div>153  </div>154 155  <!-- Tabs -->156  <div class="tabs">157    <div class="tabs-inner">158      <div>Plants</div>159      <div style="color:#558B2F; opacity:0.7;">People</div>160    </div>161    <div class="tab-indicator">162      <div class="tab-line-bg"></div>163      <div class="tab-line-active"></div>164    </div>165  </div>166 167  <!-- Results -->168  <div class="results">169    <div class="item">170      <div class="thumb">[IMG: Schefflera actinophylla]</div>171      <div class="details">172        <div class="title">Schefflera actinophylla</div>173        <div class="subtitle">Schefflera actinophylla (Schefflera versteegii)</div>174      </div>175      <div class="info">i</div>176    </div>177 178    <div class="item">179      <div class="thumb">[IMG: Schefflera digitata]</div>180      <div class="details">181        <div class="title">Schefflera digitata</div>182      </div>183      <div class="info">i</div>184    </div>185 186    <div class="item">187      <div class="thumb">[IMG: Dwarf Umbrella Tree]</div>188      <div class="details">189        <div class="title">Dwarf Umbrella Tree</div>190        <div class="subtitle">Dwarf Umbrella Tree (Schefflera arboricola)</div>191      </div>192      <div class="info">i</div>193    </div>194 195    <div class="item">196      <div class="thumb">[IMG: Schefflera heptaphylla]</div>197      <div class="details">198        <div class="title">Schefflera heptaphylla</div>199      </div>200      <div class="info">i</div>201    </div>202 203    <div class="item">204      <div class="thumb">[IMG: Schefflera]</div>205      <div class="details">206        <div class="title">Schefflera</div>207      </div>208      <div class="info">i</div>209    </div>210 211    <div class="item">212      <div class="thumb">[IMG: Schefflera awa]</div>213      <div class="details">214        <div class="title">Schefflera awa</div>215      </div>216      <div class="info">i</div>217    </div>218  </div>219 220  <!-- Keyboard -->221  <div class="keyboard">222    <div class="kbd-suggestion">actinophylla</div>223 224    <div class="kbd-row">225      <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>226      <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>227    </div>228 229    <div class="kbd-row" style="padding:0 80px;">230      <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>231      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>232    </div>233 234    <div class="kbd-row">235      <div class="key wide">⇧</div>236      <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><div class="key">n</div><div class="key">m</div>237      <div class="key wide">⌫</div>238    </div>239 240    <div class="kbd-row">241      <div class="key wide">?123</div>242      <div class="key circle">,</div>243      <div class="key circle">🙂</div>244      <div class="key space">actinophylla</div>245      <div class="key circle">🎤</div>246      <div class="key circle">.</div>247      <div class="key wide">✓</div>248    </div>249 250    <div class="gesture-bar"></div>251  </div>252 253</div>254</body>255</html>