GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Kindle Reader UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #141414;12    border-radius: 0;13    box-shadow: none;14    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;15    color: #fff;16  }17  /* Status bar */18  .statusbar {19    position: absolute; top: 0; left: 0; right: 0;20    height: 120px;21    background: #252525;22    display: flex; align-items: center;23    padding: 0 32px;24    font-weight: 600; font-size: 42px;25  }26  .statusbar .time { margin-right: 24px; }27  .statusbar .icons { margin-left: auto; display: flex; gap: 26px; align-items: center; }28  .statusbar svg { width: 44px; height: 44px; fill: #d7d7d7; }29  /* Toolbar */30  .toolbar {31    position: absolute; top: 120px; left: 0; right: 0;32    height: 120px;33    background: #2b2b2b;34    display: flex; align-items: center;35    padding: 0 44px;36    gap: 44px;37  }38  .toolbar .spacer { flex: 1; }39  .toolbar .tool {40    width: 84px; height: 84px; border-radius: 8px;41    display: flex; align-items: center; justify-content: center;42    color: #dcdcdc;43  }44  .toolbar svg { width: 56px; height: 56px; fill: #cfcfcf; }45  /* Purchase banner */46  .purchase {47    position: absolute; top: 240px; left: 0; right: 0;48    height: 220px; background: #1a1a1a;49    display: flex; align-items: center;50    padding: 0 44px;51  }52  .purchase .text {53    color: #eaeaea;54  }55  .purchase .title { font-size: 42px; margin-bottom: 14px; }56  .purchase .link { font-size: 36px; color: #3b82f6; }57  .purchase .buy {58    margin-left: auto;59    background: #E6A437; color: #191919; font-weight: 700;60    padding: 28px 38px; border-radius: 6px; font-size: 40px;61  }62  .purchase .caret {63    margin-left: 24px; width: 0; height: 0;64    border-left: 20px solid transparent; border-right: 20px solid transparent;65    border-bottom: 24px solid #6e6e6e;66  }67  /* Reading area */68  .reading-area {69    position: absolute; top: 460px; left: 0; right: 0; bottom: 420px;70    padding: 0 40px;71  }72  .page-preview {73    position: absolute; top: 160px; width: 260px; height: 1150px;74    background: #0c0c0c; border: 3px solid #3a3a3a; border-radius: 6px;75  }76  .page-preview.left { left: 40px; }77  .page-preview.right { right: 40px; }78  .page {79    position: absolute; left: 150px; right: 150px; top: 120px;80    height: 1200px;81    background: #000; border: 6px solid #55b6ff; border-radius: 8px;82    padding: 58px 72px;83    font-family: Georgia, "Times New Roman", serif;84    color: #e7e7e7; line-height: 1.7; font-size: 36px;85    box-sizing: border-box;86  }87  .bookmark {88    position: absolute; top: 0; right: 0;89    width: 72px; height: 120px;90    background: linear-gradient(#9e9e9e, #7c7c7c);91    clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 55%, 0 70%);92    border-bottom-left-radius: 4px;93  }94  .page p { margin: 0 0 26px 0; }95  .page .subhead { font-weight: 700; color: #f0f0f0; }96  /* Bottom controls */97  .controls {98    position: absolute; left: 0; right: 0; bottom: 220px; height: 160px;99    padding: 0 44px; color: #dcdcdc;100  }101  .controls .location {102    text-align: center; font-size: 40px; margin-bottom: 24px;103  }104  .controls .grid {105    position: absolute; left: 44px; bottom: 40px;106    width: 64px; height: 64px; display: grid;107    grid-template-columns: repeat(3, 1fr); grid-gap: 6px;108  }109  .controls .grid div {110    background: #bfbfbf; width: 16px; height: 16px; border-radius: 2px;111  }112  .slider {113    position: absolute; left: 180px; right: 80px; bottom: 36px; height: 40px;114  }115  .slider .track {116    position: absolute; top: 18px; left: 0; right: 0; height: 6px;117    background: #8a8a8a; border-radius: 6px;118  }119  .slider .thumb {120    position: absolute; left: 140px; top: -6px;121    width: 56px; height: 56px; background: #fff; border-radius: 50%;122    box-shadow: 0 2px 4px rgba(0,0,0,0.5);123  }124  .slider .value {125    position: absolute; left: -120px; top: -10px;126    font-size: 36px; color: #cfcfcf;127  }128  /* Home indicator */129  .home-indicator {130    position: absolute; left: 50%; transform: translateX(-50%);131    bottom: 70px; width: 280px; height: 14px; border-radius: 8px;132    background: #e6e6e6;133  }134</style>135</head>136<body>137<div id="render-target">138 139  <!-- Status Bar -->140  <div class="statusbar">141    <div class="time">8:36</div>142    <div class="icons">143      <!-- Book icon -->144      <svg viewBox="0 0 24 24"><path d="M3 4h14a3 3 0 013 3v12l-4-2-4 2V7a3 3 0 00-3-3H3z"/></svg>145      <!-- Mail icon -->146      <svg viewBox="0 0 24 24"><path d="M2 5h20v14H2V5zm2 2l8 6 8-6"/></svg>147      <!-- Info circle -->148      <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 110 20 10 10 0 010-20zm1 6h-2v2h2V8zm-3 4h4v6H10v-6z"/></svg>149      <!-- Bell -->150      <svg viewBox="0 0 24 24"><path d="M12 22a2 2 0 002-2H10a2 2 0 002 2zm8-6l-2-2V9a6 6 0 10-12 0v5l-2 2h16z"/></svg>151      <!-- Dot -->152      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/></svg>153      <!-- Wifi -->154      <svg viewBox="0 0 24 24"><path d="M2 8a16 16 0 0120 0l-2 2a12 12 0 00-16 0L2 8zm4 4a10 10 0 0112 0l-2 2a6 6 0 00-8 0l-2-2zm6 6l-3-3 3-3 3 3-3 3z" fill="#e6e6e6"/></svg>155      <!-- Battery -->156      <svg viewBox="0 0 24 24"><path d="M2 7h18v10H2V7zm20 3v4h-2v-4h2z"/></svg>157    </div>158  </div>159 160  <!-- Toolbar -->161  <div class="toolbar">162    <!-- Back -->163    <div class="tool">164      <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg>165    </div>166    <!-- List -->167    <div class="tool">168      <svg viewBox="0 0 24 24"><path d="M4 6h16v2H4zm0 5h12v2H4zm0 5h16v2H4z"/></svg>169    </div>170    <div class="spacer"></div>171    <!-- Search -->172    <div class="tool">173      <svg viewBox="0 0 24 24"><path d="M10 4a6 6 0 014.24 10.24l4.52 4.52-1.76 1.76-4.52-4.52A6 6 0 1110 4z"/></svg>174    </div>175    <!-- Notes -->176    <div class="tool">177      <svg viewBox="0 0 24 24"><path d="M5 3h12l2 3v15H5V3zm2 4h8v2H7zm0 4h10v2H7zm0 4h6v2H7z"/></svg>178    </div>179    <!-- Aa -->180    <div class="tool" style="font-size: 40px; font-weight: 600;">Aa</div>181    <!-- Menu -->182    <div class="tool">183      <svg viewBox="0 0 24 24"><path d="M12 5a2 2 0 110 4 2 2 0 010-4zm0 5a2 2 0 110 4 2 2 0 010-4zm0 5a2 2 0 110 4 2 2 0 010-4z"/></svg>184    </div>185  </div>186 187  <!-- Purchase Banner -->188  <div class="purchase">189    <div class="text">190      <div class="title">Purchase the full book</div>191      <div class="link">See details in Kindle Store.</div>192    </div>193    <div class="buy">Buy for ₹247.18</div>194    <div class="caret"></div>195  </div>196 197  <!-- Reading Area -->198  <div class="reading-area">199    <div class="page-preview left"></div>200    <div class="page-preview right"></div>201 202    <div class="page">203      <div class="bookmark"></div>204      <p>for a job as an office administrator. He tells me the woman specifically wants to work for Donald Trump, and I say she’s crazy but I’ll be happy to see her.</p>205      <p>We talk a little about the theater business, and I tell Gerry I’m about to take my kids to see Cats, one of his shows, for a second time. He asks if I’m getting my tickets through his office. I tell him that I don’t like to do that sort of thing. “Don’t be silly,” he says. “We have a woman here whose job it is to handle tickets for our friends. Here’s her number. Don’t hesitate to call.”</p>206      <p>It’s a nice gesture from a very nice guy.</p>207      <p class="subhead">1:15 P.M.</p>208      <p>Anthony Gliedman stops by to discuss the Wollman Rink project. Gliedman was housing commissioner under Ed Koch. At the time we fought a lot, and even though I ended up beating him in court, I always thought he was bright. I don’t hold it against people that they have opposed me. I’m just looking to hire the best talent, wherever I can find it.</p>209      <p>Tony has been helping to coordinate the rebuilding of the Wollman Skating Rink in Central Park, a project the city failed at so miserably for seven years. In June I offered to do the job myself. Now we’re ahead of schedule, and Tony tells me that he’s set up a press conference for Thursday to celebrate the last important step in construction: pouring the concrete.</p>210      <p>It doesn’t sound like much of a news event to me, and I ask him if anyone is likely to show up. He says at least a dozen news organizations have RSVPd yes. So much for my news judgment.</p>211    </div>212  </div>213 214  <!-- Bottom Controls -->215  <div class="controls">216    <div class="location">Location 428 of 772 • 55%</div>217    <div class="grid">218      <div></div><div></div><div></div>219      <div></div><div></div><div></div>220      <div></div><div></div><div></div>221    </div>222    <div class="slider">223      <div class="value">428</div>224      <div class="track"></div>225      <div class="thumb"></div>226    </div>227  </div>228 229  <!-- Home indicator -->230  <div class="home-indicator"></div>231 232</div>233</body>234</html>