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>Bookshelf UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #2b2b2b;15    color: #fff;16  }17 18  /* Status bar */19  .status-bar {20    height: 110px;21    background: #3f3f3f;22    padding: 0 36px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    box-sizing: border-box;27  }28  .status-left {29    font-size: 46px;30    letter-spacing: 1px;31    opacity: 0.95;32  }33  .status-right {34    display: flex;35    align-items: center;36    gap: 26px;37  }38  .icon {39    width: 48px; height: 48px;40    display: inline-flex; align-items: center; justify-content: center;41  }42  /* Simple status icons */43  .wifi svg, .battery svg { width: 48px; height: 48px; }44 45  /* App bar */46  .app-bar {47    height: 170px;48    background: #3f3f3f;49    display: flex;50    align-items: center;51    padding: 0 36px;52    box-sizing: border-box;53    border-bottom: 1px solid rgba(255,255,255,0.08);54  }55  .left-group, .right-group {56    display: flex; align-items: center;57  }58  .left-group { gap: 30px; }59  .right-group { margin-left: auto; gap: 34px; }60  .hamburger svg, .search svg, .filter svg, .kebab svg {61    width: 72px; height: 72px; fill: #fff; opacity: 0.9;62  }63  .title {64    font-size: 58px; font-weight: 600; color: #ffffff;65    display: flex; align-items: center; gap: 18px;66  }67  .caret {68    width: 0; height: 0;69    border-left: 16px solid transparent;70    border-right: 16px solid transparent;71    border-top: 20px solid #ffffff;72    margin-top: 8px;73    opacity: 0.9;74  }75 76  /* Shelves background */77  .shelves {78    position: absolute;79    top: 280px; /* status + app bar */80    left: 0; right: 0; bottom: 140px; /* leave space for gesture bar */81    /* Layered gradients for wood and shelf planks */82    background:83      radial-gradient( at 50% 100%, rgba(0,0,0,0.45), rgba(0,0,0,0.75) 65% ),84      repeating-linear-gradient(85        to bottom,86        #1b1b1b 0px, #1b1b1b 520px,87        #4a4a4a 520px, #4a4a4a 540px,88        #1b1b1b 540px, #1b1b1b 1080px89      ),90      repeating-linear-gradient(91        to right,92        rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 2px,93        rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 6px94      );95    background-blend-mode: overlay, normal, overlay;96  }97 98  /* Book item */99  .book {100    position: absolute;101    top: 410px;102    left: 64px;103    width: 330px;104    height: 520px;105    background: #d7e0d6;106    border-radius: 6px;107    box-shadow: 0 18px 26px rgba(0,0,0,0.45), 6px 0 0 rgba(0,0,0,0.25) inset;108    display: flex; align-items: center; justify-content: center;109    padding: 26px;110    box-sizing: border-box;111  }112  .book h3 {113    color: #222; text-align: center; font-weight: 700; font-size: 44px; line-height: 1.2; margin: 0;114  }115  .book .spine-dots {116    position: absolute; left: 22px; bottom: 26px; display: flex; flex-direction: column; gap: 12px;117  }118  .dot {119    width: 12px; height: 12px; border-radius: 50%;120    background: #777; border: 2px solid #444;121  }122 123  /* Floating Action Button */124  .fab {125    position: absolute;126    right: 72px;127    bottom: 228px;128    width: 170px; height: 170px; border-radius: 50%;129    background: #8a8a8a;130    box-shadow: 0 16px 32px rgba(0,0,0,0.45);131    display: flex; align-items: center; justify-content: center;132  }133  .fab svg { width: 92px; height: 92px; fill: #fff; }134 135  /* Gesture/navigation bar */136  .gesture-bar {137    position: absolute; left: 0; right: 0; bottom: 0;138    height: 140px; background: #575757;139    display: flex; align-items: center; justify-content: center;140  }141  .pill {142    width: 320px; height: 18px; border-radius: 12px; background: #ffffff;143    opacity: 0.95;144  }145</style>146</head>147<body>148<div id="render-target">149  <!-- Status Bar -->150  <div class="status-bar">151    <div class="status-left">11:08</div>152    <div class="status-right">153      <div class="icon wifi" title="Wi-Fi">154        <svg viewBox="0 0 24 24">155          <path fill="#fff" d="M12 18.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM3.1 10.6l1.7 1.7C7.3 9.9 9.6 9 12 9s4.7.9 7.2 3.3l1.7-1.7C17.9 7.7 15.1 6.5 12 6.5S6.1 7.7 3.1 10.6zm3.4 3.4l1.7 1.7C9.9 14 10.9 13.7 12 13.7s2.1.3 3.8 2l1.7-1.7C15.7 12.2 13.9 11.7 12 11.7s-3.7.5-5.5 2.3z"/>156        </svg>157      </div>158      <div class="icon battery" title="Battery">159        <svg viewBox="0 0 28 16">160          <rect x="1" y="3" width="22" height="10" rx="2" ry="2" fill="#fff"></rect>161          <rect x="3" y="5" width="14" height="6" fill="#3f3f3f"></rect>162          <rect x="23" y="6" width="3" height="4" fill="#fff"></rect>163        </svg>164      </div>165    </div>166  </div>167 168  <!-- App Bar -->169  <div class="app-bar">170    <div class="left-group">171      <div class="hamburger" title="Menu">172        <svg viewBox="0 0 24 24">173          <rect x="3" y="6" width="18" height="2"></rect>174          <rect x="3" y="11" width="18" height="2"></rect>175          <rect x="3" y="16" width="18" height="2"></rect>176        </svg>177      </div>178      <div class="title">All Books <span class="caret"></span></div>179    </div>180    <div class="right-group">181      <div class="search" title="Search">182        <svg viewBox="0 0 24 24">183          <circle cx="10" cy="10" r="6" fill="none" stroke="#fff" stroke-width="2"></circle>184          <line x1="15" y1="15" x2="21" y2="21" stroke="#fff" stroke-width="2"></line>185        </svg>186      </div>187      <div class="filter" title="Filter">188        <svg viewBox="0 0 24 24">189          <path d="M3 5h18l-7 7v5l-4 2v-7L3 5z"></path>190        </svg>191      </div>192      <div class="kebab" title="More">193        <svg viewBox="0 0 24 24">194          <circle cx="12" cy="5" r="2"></circle>195          <circle cx="12" cy="12" r="2"></circle>196          <circle cx="12" cy="19" r="2"></circle>197        </svg>198      </div>199    </div>200  </div>201 202  <!-- Shelves Area -->203  <div class="shelves"></div>204 205  <!-- Book cover -->206  <div class="book">207    <h3>Alice's Adventures in Wonderland</h3>208    <div class="spine-dots">209      <span class="dot"></span>210      <span class="dot"></span>211      <span class="dot"></span>212    </div>213  </div>214 215  <!-- Floating Action Button -->216  <div class="fab" title="Open Library">217    <svg viewBox="0 0 24 24">218      <path d="M3 6c3-2 6-2 9 0v12c-3-2-6-2-9 0V6z"></path>219      <path d="M12 6c3-2 6-2 9 0v12c-3-2-6-2-9 0V6z"></path>220    </svg>221  </div>222 223  <!-- Gesture bar -->224  <div class="gesture-bar">225    <div class="pill"></div>226  </div>227</div>228</body>229</html>