GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Search Results - Young Adult</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: Arial, Helvetica, sans-serif;12    color: #212121;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #FFFFFF;20    box-sizing: border-box;21  }22 23  /* Top blue bars */24  .topbar {25    background: #1E88E5;26    color: #FFFFFF;27    height: 120px;28    padding: 0 36px;29    display: flex;30    align-items: center;31    font-size: 40px;32    box-sizing: border-box;33  }34  .topbar .right-icons {35    margin-left: auto;36    display: flex;37    align-items: center;38    gap: 24px;39  }40  .appbar {41    background: #1E88E5;42    height: 160px;43    display: flex;44    align-items: center;45    padding: 0 24px;46    box-sizing: border-box;47  }48  .appbar .back {49    width: 80px;50    height: 80px;51    display: flex;52    justify-content: center;53    align-items: center;54    margin-right: 12px;55  }56  .search-field {57    background: #FFFFFF;58    height: 96px;59    border-radius: 8px;60    flex: 1;61    display: flex;62    align-items: center;63    padding: 0 20px;64    box-sizing: border-box;65    font-size: 40px;66    color: #212121;67  }68  .search-field .placeholder-text {69    flex: 1;70  }71  .search-field .icon {72    width: 64px;73    height: 64px;74    display: flex;75    justify-content: center;76    align-items: center;77  }78  .divider {79    height: 6px;80    background: #E0E0E0;81  }82 83  /* Section header */84  .section-header {85    height: 120px;86    display: flex;87    align-items: center;88    padding: 0 36px;89    font-size: 38px;90    color: #616161;91    box-sizing: border-box;92    border-bottom: 1px solid #EEEEEE;93  }94  .section-header .title {95    color: #424242;96    font-weight: 500;97  }98  .section-header .view-all {99    margin-left: auto;100    color: #1E88E5;101    display: flex;102    align-items: center;103    gap: 10px;104    font-weight: 600;105  }106 107  /* List items */108  .list {109    padding-bottom: 20px;110  }111  .result-row {112    display: flex;113    align-items: center;114    padding: 26px 36px;115    box-sizing: border-box;116    border-bottom: 1px solid #EEEEEE;117  }118  .thumb {119    width: 110px;120    height: 150px;121    background: #E0E0E0;122    border: 1px solid #BDBDBD;123    display: flex;124    justify-content: center;125    align-items: center;126    color: #757575;127    font-size: 26px;128    margin-right: 28px;129  }130  .result-title {131    font-size: 40px;132    color: #424242;133    flex: 1;134  }135  .open-icon {136    width: 64px;137    height: 64px;138    display: flex;139    justify-content: center;140    align-items: center;141  }142 143  /* Keyboard overlay */144  .keyboard {145    position: absolute;146    bottom: 0;147    left: 0;148    width: 1080px;149    height: 900px;150    background: #212328;151    color: #EDEDED;152    box-shadow: 0 -6px 12px rgba(0,0,0,0.15);153  }154  .kb-suggestions {155    height: 120px;156    border-top: 1px solid #2f3238;157    border-bottom: 1px solid #2f3238;158    display: flex;159    align-items: center;160    padding: 0 24px;161    gap: 32px;162    box-sizing: border-box;163    font-size: 38px;164    color: #CFCFCF;165  }166  .kb-row {167    display: flex;168    align-items: center;169    justify-content: center;170    gap: 14px;171    padding: 18px 24px;172    box-sizing: border-box;173  }174  .key {175    flex: 1;176    min-width: 0;177    height: 120px;178    background: #33373D;179    border-radius: 16px;180    display: flex;181    align-items: center;182    justify-content: center;183    font-size: 46px;184    color: #FFFFFF;185  }186  .key.small {187    flex: 0 0 110px;188  }189  .key.wide {190    flex: 2.6;191  }192  .key.return {193    background: #BBD5F6;194    color: #1E88E5;195    font-weight: 700;196  }197  .kb-bottom {198    padding: 10px 24px 24px;199  }200</style>201</head>202<body>203<div id="render-target">204 205  <!-- Status bar -->206  <div class="topbar">207    <div>7:15</div>208    <div class="right-icons">209      <!-- simple status icons -->210      <svg width="40" height="40" viewBox="0 0 24 24">211        <circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2"/>212        <circle cx="12" cy="12" r="4" fill="#fff"/>213      </svg>214      <svg width="40" height="40" viewBox="0 0 24 24">215        <path d="M3 18h18M6 14h12M9 10h6M12 6h0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>216      </svg>217      <svg width="40" height="40" viewBox="0 0 24 24">218        <path d="M3 11l9-8 9 8v9H3z" fill="none" stroke="#fff" stroke-width="2"/>219      </svg>220      <svg width="40" height="40" viewBox="0 0 24 24">221        <rect x="3" y="4" width="18" height="16" rx="2" fill="none" stroke="#fff" stroke-width="2"/>222        <rect x="5" y="6" width="14" height="12" fill="#fff"/>223      </svg>224    </div>225  </div>226 227  <!-- App bar with search -->228  <div class="appbar">229    <div class="back">230      <svg width="60" height="60" viewBox="0 0 24 24">231        <path d="M15 18l-6-6 6-6" stroke="#fff" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>232      </svg>233    </div>234    <div class="search-field">235      <div class="placeholder-text">Young Adult</div>236      <div class="icon">237        <svg width="48" height="48" viewBox="0 0 24 24">238          <circle cx="11" cy="11" r="6.5" fill="none" stroke="#757575" stroke-width="2"/>239          <line x1="16" y1="16" x2="22" y2="22" stroke="#757575" stroke-width="2" stroke-linecap="round"/>240        </svg>241      </div>242    </div>243  </div>244  <div class="divider"></div>245 246  <!-- Section header -->247  <div class="section-header">248    <div class="title">Results in Books (101)</div>249    <div class="view-all">View All250      <svg width="40" height="40" viewBox="0 0 24 24">251        <path d="M8 5l8 7-8 7" fill="none" stroke="#1E88E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>252      </svg>253    </div>254  </div>255 256  <!-- Results list -->257  <div class="list">258    <div class="result-row">259      <div class="thumb">[IMG: Book Cover]</div>260      <div class="result-title">Moss And Adams Heart Disease In Infants Children And Ad...</div>261      <div class="open-icon">262        <svg width="44" height="44" viewBox="0 0 24 24">263          <path d="M7 17l10-10M10 7h7v7" fill="none" stroke="#757575" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>264        </svg>265      </div>266    </div>267 268    <div class="result-row">269      <div class="thumb">[IMG: Book Cover]</div>270      <div class="result-title">Your Acting Up Teenager Practical Selp Help For Despera...</div>271      <div class="open-icon">272        <svg width="44" height="44" viewBox="0 0 24 24">273          <path d="M7 17l10-10M10 7h7v7" fill="none" stroke="#757575" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>274        </svg>275      </div>276    </div>277 278    <div class="result-row">279      <div class="thumb">[IMG: Book Cover]</div>280      <div class="result-title">Adulting</div>281      <div class="open-icon">282        <svg width="44" height="44" viewBox="0 0 24 24">283          <path d="M7 17l10-10M10 7h7v7" fill="none" stroke="#757575" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>284        </svg>285      </div>286    </div>287 288    <div class="result-row">289      <div class="thumb">[IMG: Book Cover]</div>290      <div class="result-title">Involvement Of Young People At Work</div>291      <div class="open-icon">292        <svg width="44" height="44" viewBox="0 0 24 24">293          <path d="M7 17l10-10M10 7h7v7" fill="none" stroke="#757575" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>294        </svg>295      </div>296    </div>297 298    <div class="result-row">299      <div class="thumb">[IMG: Book Cover]</div>300      <div class="result-title">Middle-Aged Teenagers</div>301