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 Text UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13  }14 15  /* Render target (mobile screen) */16  #render-target {17    width: 1080px;18    height: 2400px;19    position: relative;20    overflow: hidden;21    background: #000000;22    color: #EDEDED;23  }24 25  /* STATUS BAR */26  .status-bar {27    position: absolute;28    top: 0;29    left: 0;30    width: 1080px;31    height: 110px;32    padding: 0 36px;33    box-sizing: border-box;34    display: flex;35    align-items: flex-end;36    justify-content: space-between;37  }38  .status-left {39    font-size: 36px;40    color: #EDEDED;41    padding-bottom: 18px;42  }43  .status-right {44    display: flex;45    gap: 26px;46    align-items: center;47    padding-bottom: 18px;48  }49  .icon-wifi, .icon-battery, .icon-signal {50    width: 38px;51    height: 38px;52  }53 54  /* HEADER / TABS */55  .header {56    position: absolute;57    top: 110px;58    left: 0;59    width: 100%;60    height: 140px;61    display: flex;62    align-items: center;63    padding: 0 28px;64    box-sizing: border-box;65    color: #CFCFCF;66  }67  .close-btn {68    width: 92px;69    height: 92px;70    display: flex;71    align-items: center;72    justify-content: center;73  }74  .tabs {75    display: flex;76    align-items: flex-end;77    gap: 48px;78    margin-left: 16px;79  }80  .tab {81    font-size: 52px;82    font-weight: 700;83    color: #9E9E9E;84    letter-spacing: 0.3px;85    padding-bottom: 12px;86  }87  .tab.active {88    color: #FFFFFF;89    position: relative;90  }91  .tab.active::after {92    content: "";93    position: absolute;94    left: 0;95    right: 0;96    bottom: 0;97    height: 8px;98    background: #2F80ED;99    border-radius: 8px;100  }101 102  /* Hide Markdown row */103  .hide-md-row {104    position: absolute;105    top: 260px;106    left: 36px;107    display: flex;108    align-items: center;109    gap: 20px;110    color: #BDBDBD;111    font-size: 40px;112  }113 114  /* CARD PREVIEW */115  .card {116    position: absolute;117    top: 360px;118    left: 36px;119    right: 36px;120    background: #2A2A2A;121    border-radius: 32px;122    padding: 44px;123    box-sizing: border-box;124    box-shadow: 0 8px 24px rgba(0,0,0,0.35);125  }126  .card h1 {127    margin: 0 0 14px 0;128    font-size: 64px;129    color: #FFFFFF;130    font-weight: 800;131  }132  .card .subtitle {133    color: #D0D0D0;134    font-size: 40px;135    margin-bottom: 70px;136  }137  .card .source {138    color: #9A9A9A;139    font-size: 36px;140    line-height: 1.4;141  }142 143  /* BOTTOM SHARE SHEET */144  .share-sheet {145    position: absolute;146    left: 0;147    bottom: 0;148    width: 1080px;149    height: 240px;150    background: #121212;151    border-top-left-radius: 18px;152    border-top-right-radius: 18px;153    box-shadow: 0 -8px 24px rgba(0,0,0,0.5);154    padding: 28px 24px 32px;155    box-sizing: border-box;156  }157  .share-row {158    display: flex;159    justify-content: space-around;160    align-items: flex-start;161    margin-top: 10px;162  }163  .share-item {164    width: 160px;165    display: flex;166    flex-direction: column;167    align-items: center;168    gap: 18px;169    color: #CFCFCF;170    font-size: 30px;171  }172  .share-icon {173    width: 110px;174    height: 110px;175    border-radius: 55px;176    display: flex;177    align-items: center;178    justify-content: center;179    color: #ffffff;180    font-weight: 700;181    letter-spacing: 0.3px;182  }183  .tw { background: #1DA1F2; }184  .gp { background: #DB4437; }185  .em { background: #3B82F6; }186  .cp { background: #F2B705; color: #000; }187  .mr { background: #10B981; }188 189  /* Snackbar / toast */190  .toast {191    position: absolute;192    left: 50%;193    bottom: 300px;194    transform: translateX(-50%);195    background: rgba(60, 54, 54, 0.95);196    color: #EDEDED;197    padding: 22px 34px;198    border-radius: 44px;199    font-size: 38px;200    box-shadow: 0 8px 24px rgba(0,0,0,0.55);201    display: flex;202    align-items: center;203    gap: 16px;204  }205  .toast .mini {206    width: 44px;207    height: 44px;208    background: #2F80ED;209    border-radius: 50%;210  }211 212  /* Gesture bar */213  .gesture {214    position: absolute;215    bottom: 16px;216    left: 50%;217    transform: translateX(-50%);218    width: 240px;219    height: 10px;220    background: #F2F2F2;221    border-radius: 8px;222    opacity: 0.9;223  }224</style>225</head>226<body>227<div id="render-target">228 229  <!-- Status Bar -->230  <div class="status-bar">231    <div class="status-left">8:06</div>232    <div class="status-right">233      <!-- Simple signal icon -->234      <svg class="icon-signal" viewBox="0 0 24 24">235        <rect x="2" y="14" width="3" height="8" fill="#EDEDED"/>236        <rect x="7" y="10" width="3" height="12" fill="#EDEDED" opacity="0.8"/>237        <rect x="12" y="6" width="3" height="16" fill="#EDEDED" opacity="0.7"/>238        <rect x="17" y="3" width="3" height="19" fill="#EDEDED" opacity="0.5"/>239      </svg>240      <!-- WiFi icon -->241      <svg class="icon-wifi" viewBox="0 0 24 24">242        <path d="M2 8c5-4 15-4 20 0" stroke="#EDEDED" stroke-width="2" fill="none" stroke-linecap="round"/>243        <path d="M5 12c3-3 11-3 14 0" stroke="#EDEDED" stroke-width="2" fill="none" stroke-linecap="round" opacity="0.9"/>244        <path d="M9 16c2-2 4-2 6 0" stroke="#EDEDED" stroke-width="2" fill="none" stroke-linecap="round" opacity="0.8"/>245        <circle cx="12" cy="19" r="1.6" fill="#EDEDED"/>246      </svg>247      <!-- Battery icon -->248      <svg class="icon-battery" viewBox="0 0 28 14">249        <rect x="1" y="2" width="22" height="10" rx="2" ry="2" fill="none" stroke="#EDEDED" stroke-width="2"/>250        <rect x="3.2" y="4" width="17" height="6" fill="#EDEDED"/>251        <rect x="24" y="5" width="3" height="4" fill="#EDEDED"/>252      </svg>253    </div>254  </div>255 256  <!-- Header with close and tabs -->257  <div class="header">258    <div class="close-btn" aria-label="Close">259      <svg width="44" height="44" viewBox="0 0 24 24">260        <path d="M4 4 L20 20 M20 4 L4 20" stroke="#FFFFFF" stroke-width="2.6" stroke-linecap="round"/>261      </svg>262    </div>263    <div class="tabs">264      <div class="tab active">Text</div>265      <div class="tab">Image</div>266    </div>267  </div>268 269  <!-- Hide Markdown toggle -->270  <div class="hide-md-row">271    <svg width="40" height="40" viewBox="0 0 24 24">272      <circle cx="12" cy="12" r="9" fill="none" stroke="#BDBDBD" stroke-width="2"/>273    </svg>274    <span>Hide Markdown</span>275  </div>276 277  <!-- Card Preview -->278  <div class="card">279    <h1>Weeding plan</h1>280    <div class="subtitle">Due Date: Jul 19, 12:30pm</div>281    <div class="source">282      From TickTick:<br/>www.ticktick.com283    </div>284  </div>285 286  <!-- Snackbar -->287  <div class="toast">288    <div class="mini"></div>289    <div>Can't find Google+.</div>290  </div>291 292  <!-- Share Sheet -->293  <div class="share-sheet">294    <div class="share-row">295      <div class="share-item">296        <div class="share-icon tw">t</div>297        <div>Twitter</div>298      </div>299      <div class="share-item">300        <div class="share-icon gp">G+</div>301        <div>Google+</div>302      </div>303      <div class="share-item">304        <div class="share-icon em">@</div>305        <div>Email</div>306      </div>307      <div class="share-item">308        <div class="share-icon cp">⎘</div>309        <div>Copy Link</div>310      </div>311      <div class="share-item">312        <div class="share-icon mr">···</div>313        <div>More</div>314      </div>315    </div>316  </div>317 318  <!-- Gesture bar -->319  <div class="gesture"></div>320</div>321</body>322</html>