GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Play Books Library UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13    border-radius: 28px;14    box-shadow: 0 6px 24px rgba(0,0,0,0.15);15  }16  /* Status bar */17  .status-bar {18    height: 60px;19    padding: 0 24px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #3c4043;24    font-size: 28px;25  }26  .status-right {27    display: flex;28    gap: 22px;29    align-items: center;30  }31  /* Search bar */32  .search-area {33    padding: 16px 24px 8px;34  }35  .search-card {36    height: 96px;37    background: #f5f7fb;38    border: 1px solid #e1e5ea;39    border-radius: 28px;40    display: flex;41    align-items: center;42    padding: 0 26px;43    gap: 22px;44  }45  .search-text {46    flex: 1;47    color: #5f6368;48    font-size: 34px;49  }50  .cast-icon, .avatar {51    width: 56px; height: 56px;52    display: flex; align-items: center; justify-content: center;53  }54  .avatar {55    background: #4ba3a6;56    border-radius: 50%;57    color: #ffffff;58    font-weight: 600;59    font-size: 32px;60  }61 62  /* Tabs */63  .tabs {64    display: flex;65    gap: 36px;66    padding: 20px 24px 8px;67    border-bottom: 1px solid #eee;68  }69  .tab {70    font-size: 34px;71    color: #5f6368;72    padding-bottom: 20px;73    position: relative;74  }75  .tab.active {76    color: #1a73e8;77    font-weight: 600;78  }79  .tab.active::after {80    content: "";81    position: absolute;82    left: 0; bottom: 0;83    width: 140px; height: 6px;84    background: #1a73e8;85    border-radius: 3px;86  }87 88  /* Filter row */89  .filters {90    display: flex;91    align-items: center;92    gap: 20px;93    padding: 18px 24px;94  }95  .chip {96    display: flex; align-items: center; gap: 16px;97    padding: 16px 24px;98    background: #f1f3f4;99    color: #3c4043;100    border-radius: 26px;101    font-size: 32px;102    border: 1px solid #e0e0e0;103  }104  .chip .dropdown {105    width: 24px; height: 24px;106  }107 108  /* List items */109  .list {110    padding: 12px 24px 0;111  }112  .item {113    display: flex;114    gap: 26px;115    padding: 24px 0;116    border-bottom: 1px solid #f0f0f0;117  }118  .thumb {119    width: 140px; height: 180px;120    background: #E0E0E0;121    border: 1px solid #BDBDBD;122    display: flex; align-items: center; justify-content: center;123    color: #757575; font-size: 24px; text-align: center; border-radius: 6px;124  }125  .meta {126    flex: 1;127    display: flex; flex-direction: column;128    justify-content: center;129  }130  .title {131    font-size: 40px; color: #202124; margin-bottom: 14px;132  }133  .author {134    font-size: 30px; color: #5f6368;135  }136  .row-action {137    width: 80px; display: flex; align-items: center; justify-content: center;138  }139 140  /* Bottom nav */141  .bottom-nav {142    position: absolute; left: 0; bottom: 0;143    width: 100%; height: 160px;144    border-top: 1px solid #e6e6e6;145    background: #fff;146    display: flex; align-items: center; justify-content: space-around;147  }148  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #5f6368; }149  .nav-item .label { font-size: 30px; }150  .nav-item.active { color: #1a73e8; }151  .nav-icon {152    width: 56px; height: 56px;153  }154  /* Gesture bar */155  .gesture {156    position: absolute; bottom: 170px; left: 50%;157    transform: translateX(-50%);158    width: 520px; height: 14px; border-radius: 10px;159    background: #c7c7c7;160  }161</style>162</head>163<body>164<div id="render-target">165 166  <!-- Status bar -->167  <div class="status-bar">168    <div>2:53</div>169    <div class="status-right">170      <!-- Simple status dots/icons -->171      <svg width="28" height="28"><circle cx="14" cy="14" r="5" fill="#5f6368"/></svg>172      <svg width="28" height="28"><circle cx="14" cy="14" r="5" fill="#5f6368"/></svg>173      <!-- Battery icon -->174      <svg width="44" height="24">175        <rect x="2" y="4" width="36" height="16" rx="4" fill="none" stroke="#5f6368" stroke-width="2"/>176        <rect x="40" y="8" width="2" height="8" fill="#5f6368"/>177        <rect x="6" y="6" width="26" height="12" fill="#5f6368"/>178      </svg>179    </div>180  </div>181 182  <!-- Search bar -->183  <div class="search-area">184    <div class="search-card">185      <!-- Search icon -->186      <svg width="44" height="44">187        <circle cx="18" cy="18" r="14" fill="none" stroke="#5f6368" stroke-width="3"/>188        <line x1="30" y1="30" x2="42" y2="42" stroke="#5f6368" stroke-width="3"/>189      </svg>190      <div class="search-text">Search Play Books</div>191      <!-- Cast icon -->192      <div class="cast-icon">193        <svg width="44" height="44">194          <rect x="6" y="10" width="28" height="20" rx="3" fill="none" stroke="#5f6368" stroke-width="3"/>195          <path d="M6 34 q14 -10 28 0" fill="none" stroke="#5f6368" stroke-width="3"/>196          <circle cx="10" cy="34" r="3" fill="#5f6368"/>197        </svg>198      </div>199      <!-- Avatar -->200      <div class="avatar">N</div>201    </div>202  </div>203 204  <!-- Tabs -->205  <div class="tabs">206    <div class="tab active">Your books</div>207    <div class="tab">Shelves</div>208    <div class="tab">Series</div>209  </div>210 211  <!-- Filters -->212  <div class="filters">213    <div class="chip">214      <!-- Filter icon (funnel) -->215      <svg width="34" height="34">216        <path d="M2 6 h30 l-12 12 v8 l-6 4 v-12 z" fill="none" stroke="#5f6368" stroke-width="2"/>217      </svg>218    </div>219    <div class="chip">220      <span>Recent</span>221      <svg class="dropdown" viewBox="0 0 24 24">222        <path d="M6 9 l6 6 l6 -6" fill="none" stroke="#5f6368" stroke-width="2"/>223      </svg>224    </div>225    <div class="chip">226      <span>Format</span>227      <svg class="dropdown" viewBox="0 0 24 24">228        <path d="M6 9 l6 6 l6 -6" fill="none" stroke="#5f6368" stroke-width="2"/>229      </svg>230    </div>231    <div class="chip">232      <span>Download status</span>233    </div>234  </div>235 236  <!-- List -->237  <div class="list">238    <!-- Item 1 -->239    <div class="item">240      <div class="thumb">[IMG: Book Cover]</div>241      <div class="meta">242        <div class="title">All Against All</div>243        <div class="author">Nathan Allen</div>244      </div>245      <div class="row-action">246        <!-- Blue check -->247        <svg width="48" height="48">248          <path d="M10 24 l8 8 l20 -20" fill="none" stroke="#1a73e8" stroke-width="6" stroke-linecap="round"/>249        </svg>250      </div>251    </div>252 253    <!-- Item 2 -->254    <div class="item">255      <div class="thumb">[IMG: Audiobook Cover]</div>256      <div class="meta">257        <div class="title">Forget Me Not Audio (A Psychological Suspense Crime Thri…)</div>258        <div class="author">Kristen Middleton, Cassie Alexandra, and …</div>259      </div>260      <div class="row-action">261        <!-- Cloud download icon -->262        <svg width="56" height="56" viewBox="0 0 56 56">263          <path d="M20 40 h18 a10 10 0 0 0 0 -20 a12 12 0 0 0 -22 -4 a10 10 0 0 0 -6 24" fill="none" stroke="#5f6368" stroke-width="3"/>264          <path d="M28 25 v14 M22 31 l6 6 l6 -6" fill="none" stroke="#5f6368" stroke-width="3" stroke-linecap="round"/>265        </svg>266      </div>267    </div>268  </div>269 270  <!-- Gesture bar -->271  <div class="gesture"></div>272 273  <!-- Bottom navigation -->274  <div class="bottom-nav">275    <div class="nav-item">276      <svg class="nav-icon" viewBox="0 0 48 48">277        <path d="M6 22 l18 -14 l18 14 v16 h-12 v-10 h-12 v10 h-12 z" fill="none" stroke="#5f6368" stroke-width="3"/>278      </svg>279      <div class="label">Home</div>280    </div>281    <div class="nav-item active">282      <svg class="nav-icon" viewBox="0 0 48 48">283        <rect x="10" y="8" width="28" height="32" rx="4" fill="none" stroke="#1a73e8" stroke-width="3"/>284        <line x1="16" y1="16" x2="32" y2="16" stroke="#1a73e8" stroke-width="3"/>285        <line x1="16" y1="24" x2="32" y2="24" stroke="#1a73e8" stroke-width="3"/>286      </svg>287      <div class="label">Library</div>288    </div>289    <div class="nav-item">290      <svg class="nav-icon" viewBox="0 0 48 48">291        <path d="M14 8 h20 v32 l-10 -6 l-10 6 z" fill="none" stroke="#5f6368" stroke-width="3"/>292        <path d="M24 18 v8 M20 22 h8" stroke="#5f6368" stroke-width="3"/>293      </svg>294      <div class="label">Wishlist</div>295    </div>296    <div class="nav-item">297      <svg class="nav-icon" viewBox="0 0 48 48">298        <circle cx="18" cy="38" r="4" fill="none" stroke="#5f6368" stroke-width="3"/>299        <circle cx="34" cy="38" r="4" fill="none" stroke="#5f6368" stroke-width="3"/>300        <path d="M8 10 h6 l4 18 h18 l4 -12 h-24" fill="none" stroke="#5f6368" stroke-width="3"/>301      </svg>302      <div class="label">Shop</div>303    </div>304  </div>305 306</div>307</body>308</html>