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>Share Sheet UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #0f0f10;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16 color: #eaeaea;17 }18 19 /* Status bar */20 .statusbar {21 position: absolute;22 top: 0; left: 0; right: 0;23 height: 110px;24 background: #0b0b0c;25 display: flex;26 align-items: center;27 padding: 0 32px;28 box-sizing: border-box;29 font-size: 36px;30 letter-spacing: 0.5px;31 }32 .statusbar .time { color: #eaeaea; }33 .statusbar .icons {34 margin-left: auto;35 display: flex;36 align-items: center;37 gap: 26px;38 }39 .icon-badge { width: 34px; height: 34px; border-radius: 6px; background: #2a2a2a; }40 .battery {41 width: 54px; height: 28px;42 border: 2px solid #eaeaea; border-radius: 4px; position: relative;43 }44 .battery::after {45 content: ""; position: absolute; right: -6px; top: 6px;46 width: 6px; height: 16px; background: #eaeaea; border-radius: 2px;47 }48 .battery .level {49 position: absolute; left: 2px; top: 2px; bottom: 2px; right: 10px;50 background: #eaeaea; border-radius: 2px;51 }52 53 /* App bar + overlay area */54 .appbar {55 position: absolute; top: 110px; left: 0; right: 0;56 height: 110px; background: #0f0f10;57 display: flex; align-items: center; padding: 0 24px; box-sizing: border-box;58 }59 .nav-left, .menu-right {60 width: 96px; display: flex; align-items: center; justify-content: center;61 height: 100%;62 }63 .appbar .title { flex: 1; text-align: center; color: transparent; }64 65 .map-area {66 position: absolute; top: 220px; left: 0; right: 0; bottom: 1220px;67 background: #5c5f64;68 }69 .map-area .placeholder {70 position: absolute; inset: 0;71 background: rgba(255,255,255,0.06);72 border-top: 1px solid rgba(0,0,0,0.25);73 border-bottom: 1px solid rgba(0,0,0,0.25);74 display: flex; align-items: center; justify-content: center;75 color: #c9c9c9;76 font-size: 32px;77 }78 .fit-badge {79 position: absolute; left: 48px; top: 36px; display: flex; align-items: center; gap: 18px;80 color: #244575;81 font-weight: 600; font-size: 40px;82 }83 .walker {84 position: absolute; right: 48px; top: 40px;85 opacity: 0.9;86 }87 88 /* Bottom sheet */89 .sheet {90 position: absolute;91 left: 0; right: 0; bottom: 0;92 height: 1220px;93 background: #141516;94 border-top-left-radius: 52px;95 border-top-right-radius: 52px;96 box-shadow: 0 -8px 24px rgba(0,0,0,0.6);97 display: flex; flex-direction: column; align-items: center;98 }99 .grabber {100 width: 130px; height: 14px; border-radius: 10px; background: #2b2c2e;101 margin-top: 24px;102 }103 .preview {104 margin-top: 36px;105 width: 420px; height: 360px; border-radius: 60px;106 background: #E0E0E0; border: 1px solid #BDBDBD;107 display: flex; align-items: flex-end; justify-content: center;108 position: relative; color: #35548a;109 overflow: hidden;110 }111 .preview .label {112 position: absolute; inset: 0;113 display: flex; align-items: center; justify-content: center;114 color: #5b6f92; font-size: 30px;115 }116 .preview .duration {117 position: absolute; bottom: 18px; color: #2b4e89; font-weight: 600; font-size: 28px;118 background: rgba(255,255,255,0.6); padding: 6px 16px; border-radius: 16px;119 }120 121 .actions {122 display: flex; gap: 34px; margin-top: 40px;123 }124 .btn {125 padding: 18px 34px;126 border: 2px solid #3261a8;127 border-radius: 24px;128 color: #eaeaea; font-size: 36px;129 display: inline-flex; align-items: center; gap: 16px;130 background: transparent;131 }132 133 .row {134 width: 100%;135 padding: 38px 48px 0;136 box-sizing: border-box;137 }138 .grid-4 {139 display: grid;140 grid-template-columns: repeat(4, 1fr);141 gap: 28px 24px;142 }143 .item { display: flex; flex-direction: column; align-items: center; }144 .avatar, .appicon {145 width: 150px; height: 150px; border-radius: 80px;146 display: flex; align-items: center; justify-content: center;147 position: relative; border: 2px solid #2a2b2e;148 box-sizing: border-box;149 }150 .avatar.green { background: #2f6b2e; }151 .avatar.pink { background: #c973a2; }152 .avatar.altgreen { background: #3f7f3a; }153 .avatar.gray { background: #6c6c6c; }154 155 .badge {156 position: absolute; right: -2px; bottom: -2px;157 width: 50px; height: 50px; border-radius: 50%;158 background: #ffd747; border: 4px solid #141516;159 display: flex; align-items: center; justify-content: center;160 color: #141516; font-weight: 700; font-size: 22px;161 }162 163 .label {164 margin-top: 16px; font-size: 30px; color: #d8d8d8; text-align: center;165 }166 167 /* App icons */168 .appicon { background: #2b2c2f; }169 .appicon.whatsapp { background: #1fae5b; }170 .appicon.gmail { background: #ffffff; }171 .appicon.messages { background: #1a73e8; }172 .appicon.messenger {173 background: radial-gradient(circle at 30% 30%, #9b4dff 0%, #7a4cff 40%, #5a6bff 100%);174 }175 .app-label { margin-top: 18px; font-size: 28px; color: #e6e6e6; text-align: center; }176 .sub { color: #aab0b7; font-size: 24px; margin-top: 2px; }177 178 /* Bottom gesture bar */179 .gesture {180 position: absolute; bottom: 22px; left: 50%;181 width: 280px; height: 10px; margin-left: -140px;182 background: #e8e8e8; border-radius: 8px; opacity: 0.9;183 }184 185 /* Small helpers */186 .silhouette {187 width: 78px; height: 78px; border-radius: 50%; background: rgba(255,255,255,0.3);188 box-shadow: inset 0 12px 0 rgba(0,0,0,0.15);189 }190</style>191</head>192<body>193<div id="render-target">194 195 <!-- Status bar -->196 <div class="statusbar">197 <div class="time">12:32</div>198 <div class="icons">199 <div class="icon-badge"></div>200 <div class="icon-badge"></div>201 <div class="icon-badge"></div>202 <svg width="28" height="28" viewBox="0 0 24 24" fill="#eaeaea"><circle cx="12" cy="12" r="3"/></svg>203 <div class="battery"><div class="level"></div></div>204 </div>205 </div>206 207 <!-- App bar -->208 <div class="appbar">209 <div class="nav-left">210 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#eaeaea" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">211 <path d="M15 18l-6-6 6-6"/>212 </svg>213 </div>214 <div class="title"></div>215 <div class="menu-right">216 <svg width="40" height="40" viewBox="0 0 24 24" fill="#eaeaea">217 <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>218 </svg>219 </div>220 </div>221 222 <!-- Map/overlay area -->223 <div class="map-area">224 <div class="placeholder">[IMG: Map background]</div>225 226 <div class="fit-badge">227 <svg width="54" height="54" viewBox="0 0 24 24" fill="#244575">228 <path d="M12 21s-6.5-4.4-8.8-7.4C1.4 11.4 2 8.4 4.2 7a5 5 0 015.8.8c.8.7 1.1 1.4 1.1 1.4s.3-.7 1.1-1.4a5 5 0 015.8-.8c2.2 1.4 2.8 4.4 1 6.6C18.5 16.6 12 21 12 21z"/>229 </svg>230 <div>231 <div>Google Fit</div>232 <div style="font-weight:400; color:#2e4c7e; margin-top:4px; font-size:34px;">Lunch walk</div>233 </div>234 </div>235 236 <div class="walker">237 <svg width="46" height="46" viewBox="0 0 24 24" fill="#244575">238 <circle cx="12" cy="4" r="2"/>239 <path d="M12 6l-2 6 3 3 2 7h-2l-2-6-3-2 2-8z"/>240 </svg>241 </div>242 </div>243 244 <!-- Bottom sheet -->245 <div class="sheet">246 <div class="grabber"></div>247 248 <div class="preview">249 <div class="label">[IMG: Screen preview]</div>250 <div class="duration">2m 51s</div>251 </div>252 253 <div class="actions">254 <div class="btn">255 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#9cc0ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">256 <polyline points="16 3 21 3 21 8"/><line x1="21" y1="3" x2="14" y2="10"/>257 <polyline points="8 21 3 21 3 16"/><line x1="3" y1="21" x2="10" y2="14"/>258 </svg>259 <span>Nearby</span>260 </div>261 <div class="btn">262 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#9cc0ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">263 <path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 013 3L8 18l-4 1 1-4 11.5-11.5z"/>264 </svg>265 <span>Edit</span>266 </div>267 </div>268 269 <!-- Row: suggested contacts -->270 <div class="row">271 <div class="grid-4">272 <div class="item">273 <div class="avatar green">274 <div class="silhouette"></div>275 <div class="badge">S</div>276 </div>277 <div class="label">Soma Saha</div>278 </div>279 <div class="item">280 <div class="avatar altgreen">281 <div class="silhouette"></div>282 <div class="badge">S</div>283 </div>284 <div class="label">Vini</div>285 </div>286 <div class="item">287 <div class="avatar pink">288 <div class="silhouette"></div>289 <div class="badge">S</div>290 </div>291 <div class="label">Toseef Malik</div>292 </div>293 <div class="item">294 <div class="avatar gray">295 <div class="silhouette"></div>296 <div class="badge">S</div>297 </div>298 <div class="label">edward (:</div>299 </div>300 </div>301 </div>302 303 <!-- Row: apps -->304 <div class="row" style="margin-top: 20px;">305 <div class="grid-4">306 <div class="item">307 <div class="appicon whatsapp">308 <svg width="88" height="88" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">309 <path d="M16.5 13.5c-1 1-2.5 1.5-4 0l-1-1c-1.5-1.5-1-3 0-4"/><path d="M3 20l2-5a8 8 0 1114-3 8 8 0 01-11 7l-5 1z"/>310 </svg>311 </div>312 <div class="app-label">WhatsApp</div>313 </div>314 <div class="item">315 <div class="appicon gmail">316 <svg width="90" height="90" viewBox="0 0 24 24">317 <path d="M3 6l9 7 9-7v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6z" fill="#ffffff"/>318 <path d="M3 6l9 7 9-7" fill="none" stroke="#ea4335" stroke-width="2"/>319 <path d="M3 6v12" stroke="#34a853" stroke-width="2"/>320 <path d="M21 6v12" stroke="#4285f4" stroke-width="2"/>321 </svg>322 </div>323 <div class="app-label">Gmail</div>324 </div>325 <div class="item">326 <div class="appicon messages">327 <svg width="88" height="88" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">328 <rect x="3" y="4" width="18" height="14" rx="3" ry="3"></rect>329 <path d="M7 14h10M7 10h6"/>330 </svg>331 </div>332 <div class="app-label">Messages</div>333 </div>334 <div class="item">335 <div class="appicon messenger">336 <svg width="90" height="90" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">337 <path d="M21 11.5a8.5 8.5 0 1 1-3.1-6.6L21 3v8.5z" opacity="0"/>338 <path d="M12 3a9 9 0 1 0 5.9 15.8L21 21v-4.5A9 9 0 0 0 12 3z" fill="none"/>339 <path d="M7 13l3-2 2 2 4-3" />340 </svg>341 </div>342 <div class="app-label">Messenger</div>343 <div class="sub">Chats</div>344 </div>345 </div>346 </div>347 348 <div class="gesture"></div>349 </div>350</div>351</body>352</html>