GD-ML/AndroidCode

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</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #143240;15  }16 17  /* Status bar */18  .statusbar {19    position: absolute;20    top: 0; left: 0;21    width: 100%;22    height: 120px;23    background: #0d1f27;24    color: #fff;25    display: flex;26    align-items: center;27    padding: 0 40px;28    box-sizing: border-box;29    z-index: 8;30    letter-spacing: 0.5px;31  }32  .status-time { font-weight: 600; font-size: 46px; }33  .status-icons {34    margin-left: auto;35    display: flex;36    align-items: center;37    gap: 28px;38  }39  .status-icons svg { width: 44px; height: 44px; fill: none; stroke: #eaf3f7; stroke-width: 3; opacity: 0.95; }40 41  /* App header (background content) */42  .app-header {43    position: absolute;44    top: 120px;45    left: 0;46    width: 100%;47    height: 160px;48    background: #1e4c5e;49    color: #d7e6ef;50    display: flex;51    align-items: center;52    padding: 0 36px;53    box-sizing: border-box;54    z-index: 1;55  }56  .hamburger svg, .share-icon svg { width: 54px; height: 54px; stroke: #d7e6ef; }57  .header-title {58    flex: 1;59    text-align: center;60    font-size: 56px;61    font-weight: 600;62    letter-spacing: 1px;63  }64 65  /* Background forecast examples */66  .forecast {67    position: absolute;68    top: 280px;69    left: 0;70    width: 100%;71    padding: 30px 28px;72    box-sizing: border-box;73    background: #214f60;74    z-index: 1;75  }76  .forecast-row {77    display: flex;78    gap: 24px;79  }80  .card {81    flex: 1;82    min-width: 0;83    background: rgba(255,255,255,0.06);84    border-radius: 16px;85    padding: 24px;86    color: #e7f1f6;87    box-sizing: border-box;88    height: 280px;89  }90  .card .deg { font-size: 48px; font-weight: 700; margin-bottom: 10px; }91  .sun-icon { width: 64px; height: 64px; margin-bottom: 10px; }92  .sun-icon circle { fill: #f9d24a; }93  .sun-icon line { stroke: #f9d24a; stroke-width: 4; }94 95  /* Dim overlay behind sheet */96  .scrim {97    position: absolute;98    inset: 0;99    background: rgba(0, 0, 0, 0.45);100    z-index: 5;101  }102 103  /* Bottom share sheet */104  .sheet {105    position: absolute;106    left: 0;107    bottom: 0;108    width: 100%;109    height: 1280px;110    background: #eceee7;111    border-top-left-radius: 42px;112    border-top-right-radius: 42px;113    box-shadow: 0 -24px 50px rgba(0,0,0,0.35);114    z-index: 10;115  }116  .sheet .handle {117    width: 130px; height: 10px;118    background: #b2c2ad;119    border-radius: 6px;120    margin: 22px auto 24px;121  }122  .sheet-content {123    padding: 0 52px;124    box-sizing: border-box;125    color: #1b1f21;126  }127  .share-title {128    font-size: 44px;129    font-weight: 600;130    margin-bottom: 12px;131  }132  .share-link {133    font-size: 32px;134    color: #2b2f31;135    word-break: break-all;136    opacity: 0.9;137    margin-bottom: 40px;138  }139 140  .action-row {141    display: flex;142    gap: 28px;143    margin-bottom: 110px;144  }145  .action-btn {146    display: inline-flex;147    align-items: center;148    gap: 18px;149    padding: 22px 34px;150    border: 3px solid #2e6c3e;151    color: #1d4928;152    border-radius: 22px;153    font-size: 36px;154    font-weight: 600;155    background: #eceee7;156  }157  .action-btn svg { width: 44px; height: 44px; stroke: #2e6c3e; fill: none; stroke-width: 3; }158 159  .no-recommend {160    text-align: center;161    font-size: 34px;162    color: #697170;163    margin-bottom: 70px;164  }165 166  .apps {167    display: flex;168    justify-content: space-around;169    padding: 0 40px;170    margin-bottom: 120px;171  }172  .app {173    text-align: center;174    width: 200px;175  }176  .app .img {177    width: 140px; height: 140px;178    background: #E0E0E0;179    border: 1px solid #BDBDBD;180    border-radius: 70px;181    display: flex; align-items: center; justify-content: center;182    color: #757575;183    margin: 0 auto 18px;184    font-size: 26px;185    padding: 8px;186    box-sizing: border-box;187  }188  .app-label {189    font-size: 32px;190    color: #33393a;191  }192 193  /* Gesture pill */194  .gesture {195    position: absolute;196    bottom: 24px;197    left: 50%;198    transform: translateX(-50%);199    width: 300px; height: 12px;200    background: #b2b5b0;201    border-radius: 8px;202    z-index: 11;203  }204</style>205</head>206<body>207<div id="render-target">208 209  <!-- Status bar -->210  <div class="statusbar">211    <div class="status-time">3:58</div>212    <div class="status-icons">213      <!-- Temperature small text -->214      <div style="font-size:32px; opacity:0.85;">32°</div>215      <!-- globe icon -->216      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><path d="M3 12h18M12 3a16 16 0 0 1 0 18M8 3a20 20 0 0 0 0 18M16 3a20 20 0 0 1 0 18"></path></svg>217      <!-- download icon -->218      <svg viewBox="0 0 24 24"><path d="M12 4v9"></path><path d="M8 10l4 4 4-4"></path><path d="M5 20h14"></path></svg>219      <!-- cloud icon -->220      <svg viewBox="0 0 24 24"><path d="M6 16h10a4 4 0 0 0 0-8c-1 0-2 0-3 1a5 5 0 0 0-9 3 3 3 0 0 0 2 4z"></path></svg>221      <!-- wifi icon -->222      <svg viewBox="0 0 24 24"><path d="M2 9a14 14 0 0 1 20 0"></path><path d="M5 12a10 10 0 0 1 14 0"></path><path d="M8 15a6 6 0 0 1 8 0"></path><circle cx="12" cy="18" r="1.5" fill="#eaf3f7" stroke="none"></circle></svg>223      <!-- battery icon -->224      <svg viewBox="0 0 24 24"><rect x="2.5" y="6" width="18" height="12" rx="2"></rect><rect x="20.5" y="10" width="2.5" height="4" rx="1" fill="#eaf3f7" stroke="none"></rect></svg>225    </div>226  </div>227 228  <!-- App header -->229  <div class="app-header">230    <div class="hamburger">231      <svg viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18" stroke-width="3" fill="none"></path></svg>232    </div>233    <div class="header-title">Noida</div>234    <div class="share-icon">235      <svg viewBox="0 0 24 24">236        <circle cx="6" cy="12" r="3"></circle>237        <circle cx="18" cy="6" r="3"></circle>238        <circle cx="18" cy="18" r="3"></circle>239        <path d="M8.5 11l7-4M8.5 13l7 4" stroke-width="2" fill="none"></path>240      </svg>241    </div>242  </div>243 244  <!-- Background forecast cards (dimmed by scrim) -->245  <div class="forecast">246    <div class="forecast-row">247      <div class="card">248        <div class="deg">98°</div>249        <svg class="sun-icon" viewBox="0 0 32 32">250          <circle cx="16" cy="16" r="7"></circle>251          <line x1="16" y1="2" x2="16" y2="8"></line>252          <line x1="16" y1="24" x2="16" y2="30"></line>253          <line x1="2" y1="16" x2="8" y2="16"></line>254          <line x1="24" y1="16" x2="30" y2="16"></line>255          <line x1="6" y1="6" x2="10" y2="10"></line>256          <line x1="22" y1="22" x2="26" y2="26"></line>257          <line x1="22" y1="10" x2="26" y2="6"></line>258          <line x1="6" y1="26" x2="10" y2="22"></line>259        </svg>260        <div style="opacity:.8;">20% humidity</div>261      </div>262      <div class="card">263        <div class="deg">95°</div>264        <svg class="sun-icon" viewBox="0 0 32 32">265          <circle cx="16" cy="16" r="7"></circle>266          <line x1="16" y1="2" x2="16" y2="8"></line>267          <line x1="16" y1="24" x2="16" y2="30"></line>268          <line x1="2" y1="16" x2="8" y2="16"></line>269          <line x1="24" y1="16" x2="30" y2="16"></line>270          <line x1="6" y1="6" x2="10" y2="10"></line>271          <line x1="22" y1="22" x2="26" y2="26"></line>272          <line x1="22" y1="10" x2="26" y2="6"></line>273          <line x1="6" y1="26" x2="10" y2="22"></line>274        </svg>275        <div style="opacity:.8;">30% humidity</div>276      </div>277      <div class="card">278        <div class="deg">92°</div>279        <svg class="sun-icon" viewBox="0 0 32 32">280          <circle cx="16" cy="16" r="7"></circle>281          <line x1="16" y1="2" x2="16" y2="8"></line>282          <line x1="16" y1="24" x2="16" y2="30"></line>283          <line x1="2" y1="16" x2="8" y2="16"></line>284          <line x1="24" y1="16" x2="30" y2="16"></line>285          <line x1="6" y1="6" x2="10" y2="10"></line>286          <line x1="22" y1="22" x2="26" y2="26"></line>287          <line x1="22" y1="10" x2="26" y2="6"></line>288          <line x1="6" y1="26" x2="10" y2="22"></line>289        </svg>290        <div style="opacity:.8;">20% humidity</div>291      </div>292      <div class="card">293        <div class="deg">88°</div>294        <div style="opacity:.8;">Night</div>295      </div>296      <div class="card">297        <div class="deg">86°</div>298        <div style="opacity:.8;">Night</div>299      </div>300    </div>301  </div>302 303  <!-- Dim scrim -->304  <div class="scrim"></div>305 306  <!-- Share sheet -->307  <div class="sheet">308    <div class="handle"></div>309    <div class="sheet-content">310      <div class="share-title">Weather&Radar - know your weather</div>311      <div class="share-link">https://app.weatherandradar.com/U13Q/enUSShare</div>312 313      <div class="action-row">314        <button class="action-btn">315          <svg viewBox="0 0 24 24">316            <rect x="5" y="5" width="12" height="12" rx="2"></rect>317            <path d="M9 3h9v12" stroke-linecap="round" stroke-linejoin="round"></path>318          </svg>319          <span>Copy</span>320        </button>321        <button class="action-btn">322          <svg viewBox="0 0 24 24">323            <path d="M4 12c4-6 12-6 16 0" stroke-linecap="round"></path>324            <path d="M6 14c3-3 9-3 12 0" stroke-linecap="round"></path>325            <circle cx="12" cy="12" r="2"></circle>326          </svg>327          <span>Nearby</span>328        </button>329      </div>330 331      <div class="no-recommend">No recommended people to share with</div>332 333      <div class="apps">334        <div class="app">335          <div class="img">[IMG: Gmail]</div>336          <div class="app-label">Gmail</div>337        </div>338        <div class="app">339          <div class="img">[IMG: Drive]</div>340          <div class="app-label">Drive</div>341        </div>342        <div class="app">343          <div class="img">[IMG: Messages]</div>344          <div class="app-label">Messages</div>345        </div>346        <div class="app">347          <div class="img">[IMG: Keep Notes]</div>348          <div class="app-label">Keep Notes</div>349        </div>350      </div>351    </div>352  </div>353 354  <!-- Gesture navigation pill -->355  <div class="gesture"></div>356</div>357</body>358</html>