GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Share Sheet - Details</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #2b2b2b;14    box-sizing: border-box;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 110px;24    background: #000;25    color: #fff;26    padding: 0 32px;27    box-sizing: border-box;28    display: flex;29    align-items: center;30    justify-content: space-between;31  }32  .status-time {33    font-size: 44px;34    font-weight: 600;35    letter-spacing: 1px;36  }37  .status-icons {38    display: flex;39    gap: 22px;40    align-items: center;41  }42  .icon-dot { width: 14px; height: 14px; background: #fff; border-radius: 50%; opacity: 0.9; }43  .icon-battery {44    width: 46px; height: 24px; border: 2px solid #fff; border-radius: 6px; position: relative;45  }46  .icon-battery::after {47    content: ""; position: absolute; right: -8px; top: 7px; width: 6px; height: 10px; background: #fff; border-radius: 2px;48  }49  .icon-battery .level { position: absolute; left: 3px; top: 3px; width: 34px; height: 16px; background: #fff; border-radius: 4px; }50 51  /* Header (Details) */52  .overlay-header {53    position: absolute;54    top: 110px;55    left: 0;56    width: 1080px;57    height: 160px;58    display: flex;59    align-items: center;60    gap: 24px;61    padding: 0 36px;62    box-sizing: border-box;63    color: #cfe9e6;64  }65  .close-btn {66    width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center;67  }68  .close-btn svg { width: 56px; height: 56px; }69  .details-title {70    font-size: 74px;71    color: #cfe9e6;72    font-weight: 600;73    letter-spacing: 0.5px;74  }75 76  /* Dimmed document preview behind the sheet */77  .dimmed-area {78    position: absolute;79    top: 270px;80    left: 0;81    width: 1080px;82    height: 1250px;83    background: rgba(120,120,120,0.65);84  }85  .doc-preview {86    width: 900px;87    height: 420px;88    margin: 140px auto 0;89    background: #E0E0E0;90    border: 1px solid #BDBDBD;91    color: #757575;92    display: flex;93    align-items: center;94    justify-content: center;95    text-align: left;96    padding: 24px;97    box-sizing: border-box;98    font-size: 26px;99    line-height: 1.4;100  }101 102  /* Bottom sheet */103  .share-sheet {104    position: absolute;105    left: 0;106    bottom: 0;107    width: 1080px;108    height: 1180px;109    background: #0f0f0f;110    border-top-left-radius: 42px;111    border-top-right-radius: 42px;112    box-shadow: 0 -18px 40px rgba(0,0,0,0.45);113    color: #cfcfcf;114  }115  .sheet-handle {116    position: absolute;117    top: 18px;118    left: 50%;119    transform: translateX(-50%);120    width: 120px;121    height: 12px;122    background: #3a3a3a;123    border-radius: 6px;124    opacity: 0.7;125  }126  .doc-row {127    display: flex;128    align-items: center;129    gap: 26px;130    padding: 90px 64px 40px;131    box-sizing: border-box;132  }133  .file-icon {134    width: 96px; height: 96px; background: #3a3a3a; border-radius: 12px; position: relative;135  }136  .file-icon::after {137    content: ""; position: absolute; right: 0; top: 0; border-left: 24px solid transparent; border-bottom: 24px solid #5b5b5b;138    width: 0; height: 0;139    border-top-right-radius: 8px;140  }141  .doc-name {142    font-size: 44px; color: #c6c6c6;143  }144 145  .nearby-btn {146    margin: 40px auto 28px;147    width: 320px;148    height: 92px;149    border: 2px solid #c8e56b;150    border-radius: 24px;151    display: flex; align-items: center; justify-content: center;152    gap: 18px; color: #d7f16e; font-size: 40px; font-weight: 600;153    background: #151515;154  }155  .nearby-btn svg { width: 44px; height: 44px; }156 157  .subtitle {158    text-align: center;159    color: #9b9b9b;160    font-size: 36px;161    margin-top: 26px;162  }163 164  .apps {165    margin-top: 90px;166    padding: 0 48px;167    display: flex;168    justify-content: space-between;169  }170  .app {171    width: 200px;172    text-align: center;173  }174  .app-icon {175    width: 140px; height: 140px; border-radius: 70px;176    background: #E0E0E0; border: 1px solid #BDBDBD;177    display: flex; align-items: center; justify-content: center;178  }179  .app-label {180    margin-top: 22px; font-size: 34px; color: #cfcfcf;181  }182  .app-icon svg { width: 72px; height: 72px; }183 184  /* Gesture bar */185  .gesture-bar {186    position: absolute;187    bottom: 30px;188    left: 50%;189    transform: translateX(-50%);190    width: 360px;191    height: 16px;192    border-radius: 8px;193    background: rgba(255,255,255,0.7);194  }195</style>196</head>197<body>198<div id="render-target">199  <!-- Status bar -->200  <div class="status-bar">201    <div class="status-time">2:17</div>202    <div class="status-icons">203      <div class="icon-dot"></div>204      <div class="icon-dot" style="opacity:0.7;"></div>205      <div class="icon-dot" style="opacity:0.7;"></div>206      <div class="icon-battery"><div class="level"></div></div>207    </div>208  </div>209 210  <!-- Details header -->211  <div class="overlay-header">212    <div class="close-btn" aria-label="Close">213      <svg viewBox="0 0 24 24">214        <path d="M5 5 L19 19 M19 5 L5 19" stroke="#44d1c4" stroke-width="3" stroke-linecap="round"/>215      </svg>216    </div>217    <div class="details-title">Details</div>218  </div>219 220  <!-- Dimmed content behind the sheet -->221  <div class="dimmed-area">222    <div class="doc-preview">[IMG: PDF Text Preview]</div>223  </div>224 225  <!-- Share sheet -->226  <div class="share-sheet">227    <div class="sheet-handle"></div>228 229    <div class="doc-row">230      <div class="file-icon" aria-hidden="true"></div>231      <div class="doc-name">Report.pdf</div>232    </div>233 234    <div class="nearby-btn">235      <svg viewBox="0 0 24 24">236        <path d="M4 12c3-3 5-3 8 0s5 3 8 0" fill="none" stroke="#d7f16e" stroke-width="2" stroke-linecap="round"/>237        <path d="M6 16c2-2 4-2 6 0s4 2 6 0" fill="none" stroke="#d7f16e" stroke-width="2" stroke-linecap="round"/>238      </svg>239      <span>Nearby</span>240    </div>241 242    <div class="subtitle">No recommended people to share with</div>243 244    <div class="apps">245      <div class="app">246        <div class="app-icon">247          <!-- Gmail envelope -->248          <svg viewBox="0 0 24 24">249            <rect x="3" y="7" width="18" height="10" rx="2" ry="2" fill="#fff" stroke="#c1c1c1"/>250            <path d="M3 7 L12 13 L21 7" fill="none" stroke="#d23f31" stroke-width="2"/>251          </svg>252        </div>253        <div class="app-label">Gmail</div>254      </div>255 256      <div class="app">257        <div class="app-icon">258          <!-- Messages bubble -->259          <svg viewBox="0 0 24 24">260            <path d="M4 5h16v10H12l-4 4v-4H4z" fill="#4a90e2"/>261          </svg>262        </div>263        <div class="app-label">Messages</div>264      </div>265 266      <div class="app">267        <div class="app-icon">268          <!-- Drive triangle -->269          <svg viewBox="0 0 24 24">270            <path d="M8 5l4 7-4 7L4 12z" fill="#34a853"/>271            <path d="M8 5h8l4 7h-8z" fill="#fbbc05"/>272            <path d="M8 19h12l-4-7H4z" fill="#4285f4" opacity="0.9"/>273          </svg>274        </div>275        <div class="app-label">Drive</div>276      </div>277 278      <div class="app">279        <div class="app-icon">280          <!-- Printer -->281          <svg viewBox="0 0 24 24">282            <rect x="7" y="3" width="10" height="6" rx="1" fill="#1976d2"/>283            <rect x="4" y="10" width="16" height="8" rx="2" fill="#90caf9"/>284            <rect x="8" y="13" width="8" height="3" fill="#1976d2"/>285          </svg>286        </div>287        <div class="app-label">Print</div>288      </div>289    </div>290 291    <div class="gesture-bar"></div>292  </div>293</div>294</body>295</html>