GD-ML/AndroidCode
13.4k
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>Kindle Home Mock</title>7<style>8 :root{9 --bg:#121212;10 --panel:#1a1a1a;11 --panel-2:#202020;12 --surface:#2a2a2a;13 --text:#f5f5f5;14 --muted:#b0b0b0;15 --accent:#40a4ff;16 --chip:#0f304a;17 --divider:#2b2b2b;18 }19 body{ margin:0; padding:0; background:transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }20 #render-target{21 width:1080px; height:2400px;22 position:relative; overflow:hidden;23 background:var(--bg); color:var(--text);24 }25 /* Status bar */26 .status-bar{27 position:absolute; top:0; left:0; right:0; height:96px;28 padding:0 36px; display:flex; align-items:center; justify-content:space-between;29 color:#fff; font-weight:600; font-size:40px; letter-spacing:0.5px;30 }31 .status-left{ display:flex; align-items:center; gap:16px; }32 .status-right{ display:flex; align-items:center; gap:26px; }33 .status-icon svg{ width:44px; height:44px; fill:#fff; opacity:0.9; }34 /* Scrollable content */35 .content{36 position:absolute; left:0; right:0; top:96px; bottom:0;37 overflow:auto;38 -webkit-overflow-scrolling:touch;39 }40 /* Search bar row */41 .search-row{42 padding:28px 30px 16px;43 background:var(--bg);44 }45 .search-bar{46 height:120px; border-radius:16px; background:var(--surface);47 display:flex; align-items:center; padding:0 30px; gap:24px; color:var(--muted);48 box-shadow: inset 0 0 0 1px #3a3a3a;49 }50 .search-bar svg{ width:56px; height:56px; fill:#a9a9a9; }51 .search-placeholder{ font-size:40px; color:#cfcfcf; flex:1; }52 .bell-btn{ width:90px; height:120px; display:flex; align-items:center; justify-content:center; }53 .bell-btn svg{ width:54px; height:54px; fill:#d0d0d0; }54 /* Tabs */55 .tabs{56 display:flex; gap:18px; padding:10px 30px 22px; background:var(--bg);57 }58 .tab{59 flex:1; min-width:0;60 border:1px solid #565656; color:#e5e5e5;61 height:82px; border-radius:10px;62 display:flex; align-items:center; justify-content:center;63 font-size:34px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;64 background:transparent;65 }66 .tab.active{ background:var(--accent); border-color:var(--accent); color:#0b0b0b; font-weight:700; }67 /* Section: From your library */68 .section-divider{ height:18px; background:#1a1a1a; border-top:1px solid var(--divider); border-bottom:1px solid var(--divider); }69 .section{70 padding:26px 30px 10px; background:var(--panel);71 }72 .section-title{73 display:flex; align-items:center; gap:16px; font-size:48px; font-weight:700;74 padding:6px 0 22px;75 }76 .section-title .book-ico svg{ width:52px; height:52px; fill:#e5e5e5; }77 .covers-row{78 display:flex; gap:30px; padding:8px 0 24px;79 }80 .cover{81 width:300px; height:460px; background:#E0E0E0; border:1px solid #BDBDBD;82 color:#757575; font-size:34px; display:flex; align-items:center; justify-content:center; position:relative;83 }84 .ribbon{85 position:absolute; top:14px; right:-54px; background:#0f0f0f; color:#fff; font-size:24px; padding:6px 100px; 86 transform:rotate(45deg); letter-spacing:1px; opacity:0.9; border:1px solid #444;87 }88 /* Welcome area */89 .welcome{90 margin-top:0; padding:60px 30px 40px; background:linear-gradient(180deg, #151515 0%, #101010 100%);91 position:relative; overflow:hidden;92 }93 .confetti{ position:absolute; left:0; right:0; top:0; height:100%; pointer-events:none; }94 .tri{ width:0; height:0; border-left:14px solid transparent; border-right:14px solid transparent; border-bottom:24px solid #2a7fcf; position:absolute; opacity:0.7; }95 .tri.t1{ left:40px; top:18px; transform:rotate(20deg); }96 .tri.t2{ left:160px; top:40px; border-bottom-color:#5aa6ff; transform:rotate(-10deg); }97 .tri.t3{ right:140px; top:28px; border-bottom-color:#4d8ddb; transform:rotate(18deg); }98 .tri.t4{ right:60px; top:80px; border-bottom-color:#2a7fcf; transform:rotate(-6deg); }99 .welcome h1{ font-size:74px; margin:40px 0 16px; text-align:center; font-weight:700; }100 .welcome p{ font-size:36px; color:#cfd8df; text-align:center; margin:0 auto 30px; max-width:880px; line-height:1.35; }101 .thin-divider{ height:2px; background:#2b2b2b; margin:34px 0 22px; }102 /* Chips */103 .chips{ display:flex; flex-wrap:wrap; gap:20px; padding:0 6px 8px; }104 .chip{105 padding:18px 26px; border:2px solid #3b6e9c; border-radius:40px; color:#cfe8ff; font-size:32px; letter-spacing:0.2px;106 }107 .chip.active{ background:var(--accent); border-color:var(--accent); color:#0a0a0a; font-weight:700; }108 /* Row of more covers */109 .row-title{ padding:20px 30px 6px; font-size:40px; color:#cfcfcf; }110 .more-covers{ padding:10px 30px 130px; background:var(--panel-2); display:flex; gap:30px; }111 /* Bottom nav */112 .bottom-nav{113 position:absolute; bottom:0; left:0; right:0; height:180px;114 background:#1a1a1a; border-top:1px solid var(--divider);115 display:flex; align-items:center; justify-content:space-around;116 }117 .nav-item{ display:flex; flex-direction:column; align-items:center; gap:10px; color:#d8d8d8; font-size:28px; }118 .nav-item svg{ width:56px; height:56px; fill:#d8d8d8; }119 .nav-item.active{ color:var(--accent); }120 .nav-item.active svg{ fill:var(--accent); }121 /* Floating read-now tile */122 .floating-book{123 position:absolute; bottom:136px; left:50%; transform:translateX(-50%);124 width:148px; height:220px; display:flex; flex-direction:column; align-items:center; gap:10px;125 }126 .floating-book .cover{ width:148px; height:180px; }127 .floating-book .label{ font-size:24px; color:#d0d0d0; text-align:center; }128 /* Home indicator */129 .home-indicator{130 position:absolute; bottom:8px; left:50%; transform:translateX(-50%); width:400px; height:10px;131 background:#888; border-radius:8px; opacity:0.6;132 }133</style>134</head>135<body>136<div id="render-target">137 138 <!-- Status bar -->139 <div class="status-bar">140 <div class="status-left">141 <div>9:06</div>142 <div class="status-icon" aria-hidden="true">143 <!-- Cloud icon -->144 <svg viewBox="0 0 24 24"><path d="M6 18h10a4 4 0 0 0 0-8 5 5 0 0 0-9.7 1.6A3.5 3.5 0 0 0 6 18z"/></svg>145 </div>146 </div>147 <div class="status-right">148 <div class="status-icon" aria-hidden="true">149 <!-- WiFi icon -->150 <svg viewBox="0 0 24 24"><path d="M2 8a16 16 0 0 1 20 0l-1.5 1.6a14 14 0 0 0-17 0L2 8zm3.5 4.2a10 10 0 0 1 13 0L17 14a8 8 0 0 0-10 0l-1.5-1.8zm3.8 4.3A4.5 4.5 0 0 1 14.7 17L12 20.5 9.3 17z"/></svg>151 </div>152 <div class="status-icon" aria-hidden="true">153 <!-- Battery icon -->154 <svg viewBox="0 0 28 24"><path d="M2 7h20a3 3 0 0 1 3 3v4a3 3 0 0 1-3 3H2a3 3 0 0 1-3-3v-4a3 3 0 0 1 3-3zm22 3h2v4h-2z"/></svg>155 </div>156 </div>157 </div>158 159 <div class="content">160 <!-- Search bar -->161 <div class="search-row">162 <div style="display:flex; align-items:center; gap:20px;">163 <div class="search-bar" style="flex:1;">164 <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15.5 14h-.8l-.3-.3a6 6 0 1 0-.7.7l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/></svg>165 <div class="search-placeholder">Search Kindle</div>166 </div>167 <div class="bell-btn" aria-label="Notifications">168 <svg viewBox="0 0 24 24"><path d="M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm6-6V11a6 6 0 1 0-12 0v5L4 18v2h16v-2l-2-2z"/></svg>169 </div>170 </div>171 </div>172 173 <!-- Tabs -->174 <div class="tabs">175 <div class="tab active">Explore</div>176 <div class="tab">Romance</div>177 <div class="tab">Crime, Thriller & Mystery</div>178 </div>179 180 <div class="section-divider"></div>181 182 <!-- From your library -->183 <div class="section">184 <div class="section-title">185 <span class="book-ico" aria-hidden="true">186 <svg viewBox="0 0 24 24"><path d="M3 4a3 3 0 0 1 3-3h13v18H6a3 3 0 0 0-3 3V4zm3-1a2 2 0 0 0-2 2v12c.6-.6 1.3-1 2-1h12V3H6z"/></svg>187 </span>188 <span>From Your Library</span>189 </div>190 <div class="covers-row">191 <div class="cover"><span>[IMG: The Art of War - Cover]</span><span class="ribbon">SAMPLE</span></div>192 <div class="cover"><span>[IMG: Siddhartha - Cover]</span><span class="ribbon">SAMPLE</span></div>193 <div class="cover"><span>[IMG: Never Lie - Cover]</span><span class="ribbon">SAMPLE</span></div>194 </div>195 </div>196 197 <!-- Welcome section -->198 <div class="welcome">199 <div class="confetti" aria-hidden="true">200 <div class="tri t1"></div>201 <div class="tri t2"></div>202 <div class="tri t3"></div>203 <div class="tri t4"></div>204 </div>205 <h1>Welcome to Kindle</h1>206 <p>Discover a great read by tapping on a category or cover that you're interested in.</p>207 <div class="thin-divider"></div>208 <div class="chips">209 <div class="chip active">BEST SELLERS</div>210 <div class="chip">ROMANCE</div>211 <div class="chip">LITERATURE & FICTION</div>212 <div class="chip">BIOGRAPHIES</div>213 <div class="chip">NEW RELEASES</div>214 <div class="chip">MYSTERY & THRILLER</div>215 <div class="chip">SCI-FI & FANTASY</div>216 <div class="chip">HISTORY</div>217 </div>218 </div>219 220 <!-- More covers -->221 <div class="row-title">Popular Right Now</div>222 <div class="more-covers">223 <div class="cover"><span>[IMG: Verity - Cover]</span></div>224 <div class="cover"><span>[IMG: The Hidden Hindu (Hindi) - Cover]</span></div>225 <div class="cover"><span>[IMG: The Hidden Hindu - Cover]</span></div>226 <div class="cover"><span>[IMG: Biography - Cover]</span></div>227 </div>228 </div>229 230 <!-- Floating current book -->231 <div class="floating-book">232 <div class="cover"><span>[IMG: The Art of War]</span></div>233 <div class="label">THE ART OF WAR</div>234 </div>235 236 <!-- Bottom navigation -->237 <div class="bottom-nav">238 <div class="nav-item active">239 <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3l9 8h-3v8h-5v-5H11v5H6v-8H3l9-8z"/></svg>240 <div>HOME</div>241 </div>242 <div class="nav-item">243 <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 3h8a3 3 0 0 1 3 3v14H7a3 3 0 0 0-3 3V3zm13 0h3v20h-3z"/></svg>244 <div>LIBRARY</div>245 </div>246 <div class="nav-item">247 <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 4h-2l-1 2H1v2h2l3 9h12l3-8H7.6M7 20a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/></svg>248 <div>STORE</div>249 </div>250 <div class="nav-item">251 <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6h16v2H4V6zm0 5h16v2H4v-2zm0 5h16v2H4v-2z"/></svg>252 <div>MORE</div>253 </div>254 </div>255 256 <div class="home-indicator" aria-hidden="true"></div>257</div>258</body>259</html>