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 Style - Share Bottom Sheet</title>7<style>8 body{margin:0;padding:0;background:transparent;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;}9 #render-target{10 width:1080px;height:2400px;position:relative;overflow:hidden;11 background:#101011;color:#EDEDED;12 }13 14 /* Status bar */15 .status-bar{16 position:absolute;left:0;top:0;width:100%;height:110px;background:#000;17 display:flex;align-items:center;justify-content:space-between;18 padding:0 36px;color:#f5f5f5;font-weight:600;z-index:2;19 box-sizing:border-box;20 }21 .status-time{font-size:44px;letter-spacing:1px;}22 .status-icons{display:flex;gap:26px;align-items:center;}23 .dot{width:16px;height:16px;background:#fff;border-radius:50%;}24 .icon-signal,.icon-battery{width:40px;height:40px;opacity:0.95;}25 26 /* App content */27 .content{position:absolute;left:0;top:110px;right:0;bottom:0;overflow:hidden;}28 .scroll{29 height:100%;overflow:auto;padding:28px 32px 280px;box-sizing:border-box;30 }31 32 /* Search */33 .search-row{display:flex;align-items:center;gap:24px;margin-top:8px;}34 .search{35 flex:1;background:#1b1b1d;border-radius:16px;height:120px;36 display:flex;align-items:center;padding:0 28px;box-sizing:border-box;37 border:1px solid #2a2a2c;38 }39 .search svg{width:56px;height:56px;opacity:0.7;}40 .search input{41 flex:1;margin-left:18px;height:72px;background:transparent;border:0;outline:none;42 font-size:44px;color:#cfcfcf;43 }44 .bell{45 width:120px;height:120px;border-radius:16px;background:#1b1b1d;border:1px solid #2a2a2c;46 display:flex;align-items:center;justify-content:center;47 }48 .bell svg{width:54px;height:54px;opacity:0.85;}49 50 /* Tabs */51 .tabs{display:flex;gap:16px;margin:24px 0 22px;}52 .tab{53 padding:26px 34px;border:1px solid #3a3a3d;border-radius:12px;color:#c8c8c8;54 font-size:36px;55 }56 .tab.active{border-color:#ff8a3d;color:#ff8a3d;}57 58 /* Library */59 .section-title{60 display:flex;align-items:center;gap:18px;margin:18px 0 24px;font-size:56px;61 color:#e8e8e8;font-weight:600;62 }63 .book-icon{width:60px;height:60px;opacity:0.9;}64 .covers{display:flex;gap:28px;margin-bottom:42px;}65 .cover{66 width:300px;height:430px;background:#E0E0E0;border:1px solid #BDBDBD;67 display:flex;align-items:center;justify-content:center;color:#757575;68 font-size:36px;border-radius:6px;69 }70 71 /* Hero */72 .hero{73 background:#0f0f10;border:1px solid #1b1b1d;border-radius:18px;74 padding:56px 40px;margin-top:24px;75 }76 .hero h1{margin:0 0 16px;font-size:84px;font-weight:700;color:#dcdcdc;}77 .hero p{margin:0;color:#a8a8a8;font-size:40px;line-height:1.4;}78 .chips{display:flex;flex-wrap:wrap;gap:22px;margin-top:34px}79 .chip{80 padding:24px 34px;border:1px solid #3d3d40;border-radius:40px;color:#bdbdbd;font-size:34px;81 }82 .chip.primary{background:#2a4653;color:#e5f6ff;border-color:#2a4653;}83 84 /* Bottom sheet */85 .sheet{86 position:absolute;left:0;bottom:0;width:100%;height:900px;background:#2b2b2d;87 border-top-left-radius:28px;border-top-right-radius:28px;box-shadow:0 -10px 30px rgba(0,0,0,0.6);88 padding:56px 70px 120px;box-sizing:border-box;z-index:3;89 }90 .sheet h2{91 text-align:center;margin:0 0 56px;font-size:56px;color:#ffffff;font-weight:500;92 }93 .share-grid{94 display:grid;grid-template-columns:repeat(3, 1fr);gap:40px 20px;justify-items:center;95 }96 .share-item{display:flex;flex-direction:column;align-items:center;gap:22px;}97 .icon-circle{98 width:160px;height:160px;border-radius:50%;display:flex;align-items:center;justify-content:center;99 box-shadow:inset 0 0 0 1px rgba(0,0,0,0.25);100 }101 .label{font-size:36px;color:#dcdcdc;}102 103 /* Home indicator */104 .home-indicator{105 position:absolute;left:50%;transform:translateX(-50%);106 bottom:24px;width:320px;height:12px;background:#fff;border-radius:8px;opacity:0.9;z-index:3;107 }108</style>109</head>110<body>111<div id="render-target">112 <!-- Status bar -->113 <div class="status-bar">114 <div class="status-time">9:08</div>115 <div class="status-icons">116 <svg class="icon-signal" viewBox="0 0 24 24" fill="#ffffff"><path d="M2 20h3v-6H2v6zm5 0h3v-9H7v9zm5 0h3V7h-3v13zm5 0h3V3h-3v17z"/></svg>117 <svg class="icon-battery" viewBox="0 0 24 24" fill="#ffffff"><path d="M16 7h2a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-2v1h-2v-1H6a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h8V6h2v1zM6 9v6h12V9H6z"/></svg>118 </div>119 </div>120 121 <div class="content">122 <div class="scroll">123 <!-- Search -->124 <div class="search-row">125 <div class="search">126 <svg viewBox="0 0 24 24" fill="#cfcfcf"><path d="M15.5 14h-.8l-.3-.3a6.5 6.5 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>127 <input type="text" placeholder="Search Kindle">128 </div>129 <div class="bell">130 <svg viewBox="0 0 24 24" fill="#e7e7e7"><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>131 </div>132 </div>133 134 <!-- Tabs -->135 <div class="tabs">136 <div class="tab active">Explore</div>137 <div class="tab">Romance</div>138 <div class="tab">Crime, Thriller & Mystery</div>139 </div>140 141 <!-- Library -->142 <div class="section-title">143 <svg class="book-icon" viewBox="0 0 24 24" fill="#cfcfcf"><path d="M2 5a3 3 0 0 1 3-3h6v18H5a3 3 0 0 0-3 3V5zm22 0v18a3 3 0 0 0-3-3h-6V2h6a3 3 0 0 1 3 3z"/></svg>144 <div>From Your Library</div>145 </div>146 <div class="covers">147 <div class="cover">[IMG: Book Cover]</div>148 <div class="cover">[IMG: Book Cover]</div>149 <div class="cover">[IMG: Book Cover]</div>150 </div>151 152 <!-- Hero welcome -->153 <div class="hero">154 <h1>Welcome to Kindle</h1>155 <p>Discover a great read by tapping on a category or cover that you're interested in.</p>156 <div class="chips">157 <div class="chip primary">BEST SELLERS</div>158 <div class="chip">ROMANCE</div>159 <div class="chip">LITERATURE & FICTION</div>160 <div class="chip">BIOGRAPHIES</div>161 <div class="chip">MYSTERY & THRILLER</div>162 <div class="chip">SCI‑FI & FANTASY</div>163 </div>164 </div>165 </div>166 </div>167 168 <!-- Bottom sheet: Recommend the Book -->169 <div class="sheet">170 <h2>Recommend the Book</h2>171 <div class="share-grid">172 <!-- Email -->173 <div class="share-item">174 <div class="icon-circle" style="background:#ff3b2f;">175 <svg viewBox="0 0 24 24" width="100" height="100" fill="#ffffff">176 <path d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5L4 8V6l8 5 8-5v2z"/>177 </svg>178 </div>179 <div class="label">Email</div>180 </div>181 182 <!-- Facebook -->183 <div class="share-item">184 <div class="icon-circle" style="background:#3b5998;">185 <svg viewBox="0 0 24 24" width="90" height="90" fill="#ffffff">186 <path d="M14 9h3V6h-3c-2 0-3 1-3 3v2H8v3h3v7h3v-7h3l1-3h-4V9c0-.6.4-1 1-1z"/>187 </svg>188 </div>189 <div class="label">Facebook</div>190 </div>191 192 <!-- Twitter -->193 <div class="share-item">194 <div class="icon-circle" style="background:#1da1f2;">195 <svg viewBox="0 0 24 24" width="100" height="100" fill="#ffffff">196 <path d="M22 6.5c-.7.4-1.6.7-2.5.8.9-.5 1.5-1.3 1.8-2.3-.8.5-1.8.9-2.8 1.1A4.1 4.1 0 0 0 12 9.5c0 .3 0 .6.1.9-3.4-.2-6.4-1.9-8.4-4.5-.4.7-.6 1.4-.6 2.2 0 1.5.8 2.9 2.1 3.7-.6 0-1.2-.2-1.7-.5v.1c0 2.1 1.6 3.8 3.6 4.2-.4.1-.8.1-1.2.1-.3 0-.6 0-.9-.1.6 1.8 2.3 3 4.3 3a8.3 8.3 0 0 1-5.2 1.8c-.3 0-.6 0-.9-.1A11.7 11.7 0 0 0 10 21c7.3 0 11.3-6.1 11.3-11.3v-.5c.8-.5 1.5-1.2 2-1.9-.7.3-1.4.5-2.1.6z"/>197 </svg>198 </div>199 <div class="label">Twitter</div>200 </div>201 202 <!-- More (second row, first column) -->203 <div class="share-item" style="grid-column:1;">204 <div class="icon-circle" style="background:#bdbdbd;">205 <svg viewBox="0 0 24 24" width="88" height="88" fill="#4a4a4a">206 <circle cx="5" cy="12" r="2.5"/><circle cx="12" cy="12" r="2.5"/><circle cx="19" cy="12" r="2.5"/>207 </svg>208 </div>209 <div class="label">More</div>210 </div>211 </div>212 </div>213 214 <div class="home-indicator"></div>215</div>216</body>217</html>