GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>UI Mock - The Pillars of the Earth</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #0f0f10;12 color: #eaeaea;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute; top: 0; left: 0; right: 0;18 height: 90px; padding: 20px 30px;19 color: #cfcfcf; font-size: 34px;20 display: flex; align-items: center; justify-content: space-between;21 }22 .status-icons { display: flex; align-items: center; gap: 22px; font-size: 30px; }23 .dot { width: 10px; height: 10px; background: #cfcfcf; border-radius: 50%; display: inline-block; }24 25 /* App bar */26 .app-bar {27 position: absolute; top: 110px; left: 0; right: 0;28 height: 90px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between;29 }30 .app-left { display: flex; align-items: center; gap: 18px; }31 .icon-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }32 .icon-btn svg { width: 36px; height: 36px; fill: #cfcfcf; }33 .app-right { display: flex; align-items: center; gap: 24px; }34 .search svg, .bookmark svg, .menu svg { fill: #cfcfcf; width: 38px; height: 38px; }35 36 /* Content */37 .content {38 position: absolute; top: 200px; left: 60px; right: 60px;39 }40 .cover {41 width: 220px; height: 330px; background: #E0E0E0; border: 1px solid #BDBDBD;42 display: flex; align-items: center; justify-content: center; color: #757575; font-weight: 600;43 }44 .details {45 position: absolute; left: 320px; top: 0; right: 0;46 }47 .title { font-size: 64px; line-height: 1.05; font-weight: 700; color: #dcdcdc; }48 .author { margin-top: 24px; font-size: 34px; color: #bdbdbd; }49 .meta { margin-top: 18px; font-size: 32px; color: #bdbdbd; }50 .meta a { color: #66a7ff; text-decoration: none; }51 .publisher { margin-top: 20px; font-size: 32px; color: #bdbdbd; }52 .released { margin-top: 10px; font-size: 30px; color: #9aa0a6; }53 54 .stats {55 position: absolute; left: 320px; top: 460px; right: 0; display: flex; gap: 60px;56 }57 .stat { width: 200px; }58 .stat .big { font-size: 40px; display: flex; align-items: center; gap: 12px; }59 .stat .small { margin-top: 8px; font-size: 28px; color: #9aa0a6; }60 .star svg { width: 34px; height: 34px; fill: #f5c84b; }61 .doc svg, .gift svg { width: 32px; height: 32px; fill: #bdbdbd; }62 63 .actions {64 position: absolute; left: 60px; right: 60px; top: 760px; display: flex; gap: 28px;65 }66 .btn-outline {67 width: 430px; height: 110px; border-radius: 16px; border: 1px solid #2a2a2a;68 display: flex; align-items: center; justify-content: center; font-size: 36px; color: #cfcfcf; background: #151515;69 }70 .btn-primary {71 width: 430px; height: 110px; border-radius: 16px; background: #3578e5;72 display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 700; color: white;73 }74 75 /* Share sheet overlay */76 .sheet {77 position: absolute; left: 0; right: 0; bottom: 140px;78 height: 960px; background: #151515; border-top-left-radius: 30px; border-top-right-radius: 30px;79 box-shadow: 0 -10px 40px rgba(0,0,0,0.6);80 }81 .handle {82 position: absolute; top: 22px; left: 50%; transform: translateX(-50%);83 width: 160px; height: 12px; border-radius: 6px; background: #2a2a2a;84 }85 .sheet-inner { position: absolute; top: 70px; left: 44px; right: 44px; }86 .share-link {87 font-size: 32px; color: #d7d7d7; line-height: 1.5; margin-bottom: 26px;88 }89 .share-actions { display: flex; gap: 26px; margin-bottom: 40px; }90 .chip {91 width: 250px; height: 92px; border-radius: 16px; background: #1d1d1d; border: 1px solid #2c2c2c;92 display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 32px; color: #cfcfcf;93 }94 .chip svg { width: 32px; height: 32px; fill: #cfcfcf; }95 96 .avatars, .apps { display: flex; justify-content: space-between; padding: 0 16px; }97 .avatar-item, .app-item { width: 240px; text-align: center; }98 .circle {99 width: 150px; height: 150px; border-radius: 50%;100 margin: 0 auto 16px auto; display: flex; align-items: center; justify-content: center;101 font-weight: 700;102 color: #0f0f10;103 }104 .label { font-size: 30px; color: #d0d0d0; }105 .sub { font-size: 26px; color: #9aa0a6; }106 107 /* circle color variations */108 .c-yellow { background: #e9c84a; }109 .c-blue { background: #6ea8ff; }110 .c-multi { background: linear-gradient(135deg,#7ed492,#7aa7ff); color: #0f0f10; }111 .c-red { background: linear-gradient(135deg,#ff6b6b,#ff9e66); color: #0f0f10; }112 113 .c-gmail { background: #ffffff; color: #202124; border: 2px solid #dcdcdc; }114 .c-msg { background: #5ba8ff; color: #fff; }115 .c-msngr { background: #6a7cff; color: #fff; }116 .c-ig { background: linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4); color: #fff; }117 118 /* bottom nav pill */119 .nav-pill {120 position: absolute; left: 50%; transform: translateX(-50%);121 bottom: 40px; width: 340px; height: 16px; background: #2a2a2a; border-radius: 10px;122 }123</style>124</head>125<body>126<div id="render-target">127 128 <!-- Status bar -->129 <div class="status-bar">130 <div>8:41</div>131 <div class="status-icons">132 <span class="dot"></span>133 <span class="dot"></span>134 <span class="dot"></span>135 <span class="dot"></span>136 <span>95%</span>137 </div>138 </div>139 140 <!-- App bar with back/search/bookmark/menu -->141 <div class="app-bar">142 <div class="app-left">143 <div class="icon-btn">144 <svg viewBox="0 0 24 24"><path d="M15.5 5l-7 7 7 7-1.5 1.5L5.5 12 14 3.5z"/></svg>145 </div>146 </div>147 <div class="app-right">148 <div class="search">149 <svg viewBox="0 0 24 24"><path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 10.9.9l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0a4.5 4.5 0 110-9 4.5 4.5 0 010 9z"/></svg>150 </div>151 <div class="bookmark">152 <svg viewBox="0 0 24 24"><path d="M6 3h12v18l-6-3-6 3z"/></svg>153 </div>154 <div class="menu">155 <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>156 </div>157 </div>158 </div>159 160 <!-- Main content -->161 <div class="content">162 <div class="cover">[IMG: Book Cover]</div>163 164 <div class="details">165 <div class="title">The Pillars of the Earth</div>166 <div class="author">Ken Follett</div>167 <div class="meta">Book 1 · <a href="#">The Kingsbridge Novels</a> series</div>168 <div class="publisher">Pan Macmillan</div>169 <div class="released">Released Sep 4, 2008</div>170 </div>171 172 <div class="stats">173 <div class="stat">174 <div class="big"><span class="star">175 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .9-4.5 4.4 1 6.3L12 17l-5.5 2.6 1-6.3L3 8.9 9 8z"/></svg>176 </span>4.5</div>177 <div class="small">159 reviews</div>178 </div>179 <div class="stat">180 <div class="big"><span class="doc">181 <svg viewBox="0 0 24 24"><path d="M6 2h9l5 5v15H6zM14 2v6h6"/></svg>182 </span>Ebook</div>183 <div class="small"> </div>184 </div>185 <div class="stat">186 <div class="big">1,100</div>187 <div class="small">Pages</div>188 </div>189 <div class="stat">190 <div class="big"><span class="gift">191 <svg viewBox="0 0 24 24"><path d="M20 7h-3.2a3 3 0 10-5.5-2 3 3 0 10-5.5 2H2v5h2v9h16v-9h2V7zm-9-2a1.5 1.5 0 110 3H9.5A1.5 1.5 0 119 5h2zm6 0a1.5 1.5 0 110 3h-1.5A1.5 1.5 0 1117 5zM6 12h12v7H6z"/></svg>192 </span>Eligible</div>193 <div class="small"> </div>194 </div>195 </div>196 197 <div class="actions">198 <div class="btn-outline">Free sample</div>199 <div class="btn-primary">Buy ₹336.58</div>200 </div>201 </div>202 203 <!-- Bottom share sheet -->204 <div class="sheet">205 <div class="handle"></div>206 <div class="sheet-inner">207 <div class="share-link">208 https://play.google.com/store/books/details?id=<br>209 CiCYALKkUTaIC210 </div>211 <div class="share-actions">212 <div class="chip">213 <svg viewBox="0 0 24 24"><path d="M16 8H8v8h8zM4 4h16v16H4z"/></svg>214 <span>Copy</span>215 </div>216 <div class="chip">217 <svg viewBox="0 0 24 24"><path d="M12 3l9 9-9 9-9-9z M9 12l3 3 3-3-3-3z"/></svg>218 <span>Nearby</span>219 </div>220 </div>221 222 <div class="avatars" style="margin-bottom: 38px;">223 <div class="avatar-item">224 <div class="circle c-yellow">CR</div>225 <div class="label">Cerebra</div>226 <div class="sub">Research</div>227 </div>228 <div class="avatar-item">229 <div class="circle c-blue">JS</div>230 <div class="label">Jason Smith</div>231 </div>232 <div class="avatar-item">233 <div class="circle c-multi">CF</div>234 <div class="label">College</div>235 <div class="sub">Friends</div>236 </div>237 <div class="avatar-item">238 <div class="circle c-red">DV</div>239 <div class="label">Dvshb</div>240 </div>241 </div>242 243 <div class="apps">244 <div class="app-item">245 <div class="circle c-gmail">G</div>246 <div class="label">Gmail</div>247 </div>248 <div class="app-item">249 <div class="circle c-msg">SMS</div>250 <div class="label">Messages</div>251 </div>252 <div class="app-item">253 <div class="circle c-msngr">M</div>254 <div class="label">Messenger</div>255 <div class="sub">Chats</div>256 </div>257 <div class="app-item">258 <div class="circle c-ig">IG</div>259 <div class="label">Instagram</div>260 <div class="sub">Chats</div>261 </div>262 </div>263 </div>264 </div>265 266 <div class="nav-pill"></div>267</div>268</body>269</html>