GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Share Sheet - Presentation</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #111213;14 border-radius: 28px;15 box-shadow: 0 30px 80px rgba(0,0,0,0.5);16 color: #EDEDED;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0;23 left: 0;24 width: 1080px;25 height: 120px;26 padding: 0 36px;27 display: flex;28 align-items: center;29 justify-content: space-between;30 color: #F3F3F3;31 font-weight: 600;32 font-size: 42px;33 }34 .sb-left, .sb-right { display: flex; align-items: center; gap: 26px; }35 .sb-icon { width: 40px; height: 40px; opacity: 0.9; }36 .sb-right .sb-icon { width: 50px; height: 50px; }37 38 /* App toolbar area */39 .toolbar {40 position: absolute;41 top: 120px;42 left: 0;43 width: 1080px;44 height: 220px;45 padding: 0 40px;46 color: #c67a54;47 }48 .title {49 position: absolute;50 right: 40px;51 top: 40px;52 font-size: 46px;53 letter-spacing: 0.2px;54 color: #c67a54;55 }56 .tool-icons {57 position: absolute;58 bottom: 14px;59 left: 40px;60 right: 40px;61 display: flex;62 align-items: center;63 gap: 72px;64 opacity: 0.6;65 }66 .tool-icon {67 width: 64px;68 height: 64px;69 }70 71 /* Slide preview background */72 .slide-area {73 position: absolute;74 top: 360px;75 left: 40px;76 width: 1000px;77 height: 700px;78 background: #E0E0E0;79 border: 1px solid #BDBDBD;80 display: flex;81 justify-content: center;82 align-items: center;83 color: #757575;84 font-size: 42px;85 }86 87 /* Share sheet overlay */88 .share-sheet {89 position: absolute;90 left: 0;91 width: 1080px;92 height: 1120px;93 bottom: 160px;94 background: #1f2022;95 border-top-left-radius: 40px;96 border-top-right-radius: 40px;97 box-shadow: 0 -18px 30px rgba(0,0,0,0.55);98 }99 .sheet-handle {100 position: absolute;101 top: 22px;102 left: 50%;103 transform: translateX(-50%);104 width: 140px;105 height: 10px;106 border-radius: 6px;107 background: #3a3b3d;108 }109 .file-row {110 position: absolute;111 top: 120px;112 left: 50px;113 right: 50px;114 display: flex;115 align-items: center;116 gap: 26px;117 color: #EDEDED;118 font-size: 44px;119 }120 .file-icon {121 width: 80px;122 height: 94px;123 background: #8c8d91;124 border-radius: 10px;125 position: relative;126 }127 .file-icon::after{128 content: "";129 position: absolute;130 right: 0; top: 0;131 width: 30px; height: 30px;132 background: #b2b3b7;133 clip-path: polygon(0 0, 100% 0, 100% 100%);134 border-top-right-radius: 8px;135 }136 137 .nearby-wrap {138 position: absolute;139 top: 240px;140 left: 50%;141 transform: translateX(-50%);142 }143 .nearby-btn {144 display: inline-flex;145 align-items: center;146 gap: 14px;147 border: 2px solid #6b7480;148 color: #c9d0d6;149 border-radius: 18px;150 padding: 20px 30px;151 font-size: 40px;152 background: #242527;153 }154 .nearby-btn svg { width: 46px; height: 46px; }155 156 .suggestion-text {157 position: absolute;158 top: 360px;159 left: 0;160 width: 100%;161 text-align: center;162 color: #b5b8bd;163 font-size: 38px;164 }165 166 .share-apps {167 position: absolute;168 bottom: 160px;169 left: 60px;170 right: 60px;171 display: flex;172 justify-content: space-between;173 align-items: center;174 }175 .app {176 width: 180px;177 display: flex;178 flex-direction: column;179 align-items: center;180 gap: 26px;181 color: #EDEDED;182 font-size: 38px;183 }184 .app-icon {185 width: 140px;186 height: 140px;187 border-radius: 70px;188 background: #FFFFFF;189 display: flex;190 align-items: center;191 justify-content: center;192 }193 .app-icon svg { width: 84px; height: 84px; }194 195 /* Bottom gesture bar */196 .gesture {197 position: absolute;198 bottom: 50px;199 left: 50%;200 transform: translateX(-50%);201 width: 320px;202 height: 16px;203 background: #EAEAEA;204 border-radius: 10px;205 opacity: 0.88;206 }207</style>208</head>209<body>210<div id="render-target">211 212 <!-- Status Bar -->213 <div class="status-bar">214 <div class="sb-left">215 <div>11:07</div>216 <!-- check-circle -->217 <svg class="sb-icon" viewBox="0 0 24 24">218 <circle cx="12" cy="12" r="11" fill="none" stroke="#EDEDED" stroke-width="2"></circle>219 <path d="M7 12l3 3 7-7" fill="none" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"/>220 </svg>221 <!-- sun -->222 <svg class="sb-icon" viewBox="0 0 24 24">223 <circle cx="12" cy="12" r="4" fill="#EDEDED"></circle>224 <g stroke="#EDEDED" stroke-linecap="round">225 <path d="M12 2v3"/><path d="M12 19v3"/><path d="M2 12h3"/><path d="M19 12h3"/>226 <path d="M4.5 4.5l2.1 2.1"/><path d="M17.4 17.4l2.1 2.1"/>227 <path d="M19.5 4.5l-2.1 2.1"/><path d="M6.6 17.4l-2.1 2.1"/>228 </g>229 </svg>230 <!-- calendar -->231 <svg class="sb-icon" viewBox="0 0 24 24">232 <rect x="3" y="4" width="18" height="17" rx="2" fill="none" stroke="#EDEDED" stroke-width="2"/>233 <path d="M3 9h18" stroke="#EDEDED" stroke-width="2"/>234 <path d="M7 2v4M17 2v4" stroke="#EDEDED" stroke-width="2"/>235 </svg>236 <!-- back -->237 <svg class="sb-icon" viewBox="0 0 24 24">238 <path d="M15 6l-6 6 6 6" stroke="#EDEDED" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>239 </svg>240 <!-- dot -->241 <svg class="sb-icon" viewBox="0 0 24 24">242 <circle cx="12" cy="12" r="3" fill="#EDEDED"/>243 </svg>244 </div>245 <div class="sb-right">246 <!-- wifi -->247 <svg class="sb-icon" viewBox="0 0 24 24">248 <path d="M2 9c5-4 15-4 20 0M5 12c3-3 11-3 14 0M8 15c2-2 6-2 8 0" stroke="#EDEDED" stroke-width="2" fill="none" stroke-linecap="round"/>249 <circle cx="12" cy="18" r="2" fill="#EDEDED"/>250 </svg>251 <!-- battery -->252 <svg class="sb-icon" viewBox="0 0 28 24">253 <rect x="2" y="6" width="20" height="12" rx="2" stroke="#EDEDED" stroke-width="2" fill="none"/>254 <rect x="4" y="8" width="14" height="8" rx="1" fill="#EDEDED"/>255 <rect x="22" y="9" width="4" height="8" rx="1" fill="#EDEDED"/>256 </svg>257 </div>258 </div>259 260 <!-- App Toolbar -->261 <div class="toolbar">262 <div class="title">Presentation - Saved</div>263 <div class="tool-icons">264 <!-- check -->265 <svg class="tool-icon" viewBox="0 0 24 24">266 <path d="M5 12l4 4 10-10" stroke="#D0D0D0" stroke-width="2" fill="none" stroke-linecap="round"/>267 </svg>268 <!-- pen -->269 <svg class="tool-icon" viewBox="0 0 24 24">270 <path d="M3 21l3-1 12-12-2-2L4 18l-1 3zM17 4l3 3" stroke="#D0D0D0" stroke-width="2" fill="none" stroke-linejoin="round"/>271 </svg>272 <!-- cloud upload -->273 <svg class="tool-icon" viewBox="0 0 24 24">274 <path d="M6 18h12a4 4 0 0 0 0-8h-1a6 6 0 0 0-11 2" stroke="#D0D0D0" stroke-width="2" fill="none"/>275 <path d="M12 13v-6M9.5 9.5L12 7l2.5 2.5" stroke="#D0D0D0" stroke-width="2" fill="none" stroke-linecap="round"/>276 </svg>277 <!-- search -->278 <svg class="tool-icon" viewBox="0 0 24 24">279 <circle cx="10.5" cy="10.5" r="6" stroke="#D0D0D0" stroke-width="2" fill="none"/>280 <path d="M16 16l5 5" stroke="#D0D0D0" stroke-width="2" stroke-linecap="round"/>281 </svg>282 <!-- slideshow -->283 <svg class="tool-icon" viewBox="0 0 24 24">284 <rect x="3" y="5" width="18" height="12" rx="2" stroke="#D0D0D0" stroke-width="2" fill="none"/>285 <path d="M8 17l-2 4M16 17l2 4" stroke="#D0D0D0" stroke-width="2" stroke-linecap="round"/>286 </svg>287 <!-- undo -->288 <svg class="tool-icon" viewBox="0 0 24 24">289 <path d="M9 7L4 12l5 5" stroke="#D0D0D0" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>290 <path d="M20 12c-4-6-10-6-12-5" stroke="#D0D0D0" stroke-width="2" fill="none"/>291 </svg>292 <!-- more vertical -->293 <svg class="tool-icon" viewBox="0 0 24 24">294 <circle cx="12" cy="5" r="2" fill="#D0D0D0"/>295 <circle cx="12" cy="12" r="2" fill="#D0D0D0"/>296 <circle cx="12" cy="19" r="2" fill="#D0D0D0"/>297 </svg>298 </div>299 </div>300 301 <!-- Slide preview -->302 <div class="slide-area">[IMG: Presentation slide preview]</div>303 304 <!-- Share Sheet -->305 <div class="share-sheet">306 <div class="sheet-handle"></div>307 308 <div class="file-row">309 <div class="file-icon"></div>310 <div>Presentation.pptx</div>311 </div>312 313 <div class="nearby-wrap">314 <div class="nearby-btn">315 <svg viewBox="0 0 24 24">316 <path d="M4 12c3-3 13-3 16 0M8 12c2-2 6-2 8 0" stroke="#c9d0d6" stroke-width="2" fill="none" stroke-linecap="round"/>317 </svg>318 <span>Nearby</span>319 </div>320 </div>321 322 <div class="suggestion-text">No recommended people to share with</div>323 324 <div class="share-apps">325 <div class="app">326 <div class="app-icon">327 <!-- Gmail envelope M -->328 <svg viewBox="0 0 24 24">329 <path d="M3 5h18v14H3z" fill="none"/>330 <path d="M3 7l9 6 9-6" stroke="#EA4335" stroke-width="2" fill="none"/>331 <path d="M3 7v12h6V9l-6-2zm18 0v12h-6V9l6-2z" fill="#34A853"/>332 </svg>333 </div>334 <div>Gmail</div>335 </div>336 337 <div class="app">338 <div class="app-icon">339 <!-- Messages bubble -->340 <svg viewBox="0 0 24 24">341 <path d="M4 5h16v11H8l-4 4V5z" fill="#4285F4"/>342 </svg>343 </div>344 <div>Messages</div>345 </div>346 347 <div class="app">348 <div class="app-icon">349 <!-- Drive triangle -->350 <svg viewBox="0 0 24 24">351 <path d="M7 4l5 9-5 7H2l5-7-5-9h5z" fill="#0F9D58"/>352 <path d="M17 20l-5-7h10l-5 7z" fill="#4285F4"/>353 <path d="M12 13L7 4h10l-5 9z" fill="#FBBC04"/>354 </svg>355 </div>356 <div>Drive</div>357 </div>358 359 <div class="app">360 <div class="app-icon">361 <!-- Bluetooth rune -->362 <svg viewBox="0 0 24 24">363 <path d="M12 3v18l6-6-6-6 6-6-6 6-6-6 6 6-6 6 6-6" stroke="#1976D2" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>364 </svg>365 </div>366 <div>Bluetooth</div>367 </div>368 </div>369 </div>370 371 <div class="gesture"></div>372</div>373</body>374</html>