GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Search Results UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", "Segoe UI", Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #202225;14    border-radius: 36px;15    box-shadow: 0 20px 60px rgba(0,0,0,0.4);16    color: #E0E0E0;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 120px;26    background: #1a1b1e;27    color: #fff;28  }29  .status-inner {30    height: 100%;31    display: flex;32    align-items: center;33    padding: 0 36px;34    font-weight: 600;35    font-size: 42px;36  }37  .status-time { margin-right: 24px; }38  .status-icons {39    margin-left: auto;40    display: flex;41    align-items: center;42    gap: 28px;43  }44  .status-midicons {45    margin-left: 28px;46    display: flex;47    align-items: center;48    gap: 22px;49    opacity: 0.85;50  }51  .icon { fill: none; stroke: #fff; stroke-width: 4; }52 53  /* App bar */54  .appbar {55    position: absolute;56    top: 120px;57    left: 0;58    width: 1080px;59    height: 140px;60    background: #26272b;61    display: flex;62    align-items: center;63    padding: 0 28px;64    box-sizing: border-box;65  }66  .back-btn {67    width: 96px;68    height: 96px;69    display: flex;70    align-items: center;71    justify-content: center;72    margin-right: 8px;73  }74  .app-title {75    font-size: 56px;76    font-weight: 500;77    color: #EAEAEA;78    letter-spacing: 0.5px;79  }80  .more-btn {81    margin-left: auto;82    width: 96px;83    height: 96px;84    display: flex;85    align-items: center;86    justify-content: center;87  }88 89  /* Overflow menu */90  .menu {91    position: absolute;92    top: 220px;93    right: 36px;94    width: 380px;95    background: #33363b;96    border-radius: 22px;97    box-shadow: 0 16px 40px rgba(0,0,0,0.5);98    overflow: hidden;99  }100  .menu-item {101    padding: 32px 36px;102    font-size: 44px;103    color: #f1f1f1;104    border-bottom: 1px solid rgba(255,255,255,0.06);105  }106  .menu-item:last-child { border-bottom: none; }107 108  /* Content */109  .content {110    position: absolute;111    top: 260px;112    left: 0;113    width: 100%;114    padding: 24px 48px 160px 48px;115    box-sizing: border-box;116  }117  .results-label {118    font-size: 32px;119    letter-spacing: 2px;120    color: #9aa0a6;121    text-transform: uppercase;122    margin: 18px 0 30px 0;123  }124  .result {125    margin-bottom: 64px;126  }127  .result-header {128    display: flex;129    align-items: center;130    gap: 22px;131    margin-bottom: 18px;132  }133  .result-title {134    font-size: 44px;135    font-weight: 700;136    color: #e5e5e5;137    margin-right: 16px;138  }139  .result-meta {140    font-size: 34px;141    color: #9aa0a6;142  }143  .preview {144    font-size: 42px;145    line-height: 64px;146    color: #e7e7e7;147  }148  .hl {149    background: #4EA9FF;150    color: #ffffff;151    padding: 4px 10px;152    border-radius: 8px;153  }154 155  /* Bottom home indicator */156  .home-indicator {157    position: absolute;158    bottom: 42px;159    left: 50%;160    transform: translateX(-50%);161    width: 480px;162    height: 16px;163    background: #d9d9d9;164    border-radius: 16px;165    opacity: 0.9;166  }167</style>168</head>169<body>170<div id="render-target">171  <!-- Status Bar -->172  <div class="status-bar">173    <div class="status-inner">174      <div class="status-time">9:23</div>175      <div class="status-midicons">176        <!-- Mail icon -->177        <svg width="48" height="48" class="icon" viewBox="0 0 48 48">178          <rect x="6" y="10" width="36" height="28" rx="4"></rect>179          <path d="M6 12 L24 24 L42 12"></path>180        </svg>181        <!-- Cloud icon -->182        <svg width="48" height="48" viewBox="0 0 48 48" class="icon">183          <path d="M16 30c-6 0-9-3-9-8s4-8 9-8c2-6 14-6 16 3 6 0 9 3 9 8s-3 8-10 8H16z"></path>184        </svg>185      </div>186      <div class="status-icons">187        <!-- WiFi icon -->188        <svg width="54" height="48" viewBox="0 0 54 48" class="icon">189          <path d="M6 18c9-9 33-9 42 0"></path>190          <path d="M12 24c7-7 23-7 30 0"></path>191          <path d="M20 30c4-4 10-4 14 0"></path>192          <circle cx="27" cy="36" r="3" fill="#fff" stroke="none"></circle>193        </svg>194        <!-- Battery icon -->195        <svg width="60" height="48" viewBox="0 0 60 48" class="icon">196          <rect x="6" y="10" width="44" height="28" rx="4"></rect>197          <rect x="52" y="18" width="6" height="12" rx="2"></rect>198          <rect x="10" y="14" width="36" height="20" fill="#fff" stroke="none"></rect>199        </svg>200      </div>201    </div>202  </div>203 204  <!-- App Bar -->205  <div class="appbar">206    <div class="back-btn">207      <svg width="54" height="54" viewBox="0 0 54 54" class="icon">208        <path d="M34 10 L18 27 L34 44"></path>209      </svg>210    </div>211    <div class="app-title">schools</div>212    <div class="more-btn">213      <svg width="54" height="54" viewBox="0 0 54 54" class="icon">214        <circle cx="27" cy="12" r="4" fill="#fff" stroke="none"></circle>215        <circle cx="27" cy="27" r="4" fill="#fff" stroke="none"></circle>216        <circle cx="27" cy="42" r="4" fill="#fff" stroke="none"></circle>217      </svg>218    </div>219  </div>220 221  <!-- Overflow Menu -->222  <div class="menu">223    <div class="menu-item">Settings</div>224    <div class="menu-item">Help</div>225    <div class="menu-item">Feedback</div>226  </div>227 228  <!-- Content -->229  <div class="content">230    <div class="results-label">5 Results in This Book</div>231 232    <div class="result">233      <div class="result-header">234        <svg width="54" height="54" viewBox="0 0 54 54" class="icon">235          <circle cx="24" cy="24" r="16"></circle>236          <path d="M38 38 L50 50"></path>237        </svg>238        <div class="result-title">Foreword</div>239        <div class="result-meta">at page 5</div>240      </div>241      <div class="preview">242        A real student will not merely read this book, he will absorb its contents and make them his own. This book should be adopted by all high <span class="hl">schools</span> and no boy or girl should be permitted to graduate without having satisfactorily passed an examination on it. This philosophy will not take the place of the subjects taught in schools, but it will enable one to organize and apply the knowledge acquired, and convert it into useful service and adequate compensation without waste of time.243      </div>244    </div>245 246    <div class="result">247      <div class="result-header">248        <svg width="54" height="54" viewBox="0 0 54 54" class="icon">249          <circle cx="24" cy="24" r="16"></circle>250          <path d="M38 38 L50 50"></path>251        </svg>252        <div class="result-title">Foreword</div>253        <div class="result-meta">at page 5</div>254      </div>255      <div class="preview">256        This book should be adopted by all high schools and no boy or girl should be permitted to graduate without having satisfactorily passed an examination on it. This philosophy will not take the place of the subjects taught in <span class="hl">schools</span>, but it will enable one to organize and apply the knowledge acquired, and convert it into useful service and adequate compensation without waste of time. Dr.257      </div>258    </div>259 260    <div class="result">261      <div class="result-header">262        <svg width="54" height="54" viewBox="0 0 54 54" class="icon">263          <circle cx="24" cy="24" r="16"></circle>264          <path d="M38 38 L50 50"></path>265        </svg>266        <div class="result-title">Author’s Preface</div>267        <div class="result-meta">at page 11</div>268      </div>269    </div>270  </div>271 272  <!-- Home indicator -->273  <div class="home-indicator"></div>274</div>275</body>276</html>