GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Mobile UI - Share Sheet</title>6<style>7  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #0d0d0d;14    color: #fff;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 96px;24    background: #0d0d0d;25    display: flex;26    align-items: center;27    justify-content: space-between;28    padding: 0 36px;29    box-sizing: border-box;30    color: #eaeaea;31    font-weight: 600;32    font-size: 34px;33  }34  .status-icons {35    display: flex;36    align-items: center;37    gap: 26px;38  }39  .status-icons svg { width: 40px; height: 40px; fill: #eaeaea; opacity: 0.95; }40 41  /* App bar */42  .app-bar {43    position: absolute;44    top: 96px;45    left: 0;46    width: 1080px;47    height: 140px;48    background: #111214;49    display: flex;50    align-items: center;51    padding: 0 28px;52    box-sizing: border-box;53  }54  .app-left {55    display: flex; align-items: center; gap: 22px;56  }57  .back-btn svg { width: 52px; height: 52px; fill: #dcdcdc; }58  .doc-title {59    display: flex; flex-direction: column;60  }61  .doc-title .title {62    font-size: 64px; color: #d7d7d7; letter-spacing: 0.5px;63  }64  .doc-title .subtitle {65    font-size: 28px; color: #9aa0a6;66    margin-top: 6px;67  }68  .app-right {69    margin-left: auto;70    display: flex; align-items: center; gap: 28px;71  }72  .icon-btn { width: 72px; height: 72px; display:flex; align-items:center; justify-content:center; }73  .icon-btn svg { width: 60px; height: 60px; fill: #dcdcdc; }74 75  /* Document canvas */76  .doc-canvas {77    position: absolute;78    top: 236px;79    left: 0;80    width: 1080px;81    height: 1520px;82    background: #0b0b0b;83  }84  .doc-content {85    position: absolute;86    top: 180px;87    left: 90px;88    width: 900px;89    color: #cfcfcf;90    line-height: 1.8;91  }92  .doc-content .heading {93    font-size: 32px; color:#b7c0c6; margin-bottom: 40px;94  }95  .doc-content .line { font-size: 30px; color:#cfcfcf; }96 97  /* Share sheet */98  .share-sheet {99    position: absolute;100    left: 0;101    bottom: 0;102    width: 1080px;103    height: 820px;104    background: #1c1d1f;105    border-top-left-radius: 36px;106    border-top-right-radius: 36px;107    box-shadow: 0 -8px 24px rgba(0,0,0,0.6);108    overflow: hidden;109  }110  .sheet-header {111    padding: 36px 40px 24px;112    font-size: 44px;113    color: #ffffff;114  }115  .sheet-list {116    display: flex; flex-direction: column;117  }118  .sheet-item {119    height: 140px;120    display: flex;121    align-items: center;122    padding: 0 40px;123    box-sizing: border-box;124    border-top: 1px solid #2a2a2a;125    color: #f2f2f2;126  }127  .sheet-item:first-child { border-top: none; }128  .sheet-icon {129    width: 90px; height: 90px; border-radius: 45px;130    background: #30353a;131    display: flex; align-items: center; justify-content: center;132    margin-right: 32px;133  }134  .sheet-icon.kindle { background:#223248; }135  .sheet-icon.gmail { background:#2d2c2c; }136  .sheet-icon.mobidrive { background:#233a2b; }137  .sheet-labels {138    display: flex; flex-direction: column;139  }140  .sheet-labels .primary { font-size: 40px; }141  .sheet-labels .secondary { font-size: 30px; color:#a3a3a3; margin-top: 8px; }142 143  .sheet-bottom {144    position: absolute;145    bottom: 0;146    left: 0;147    width: 1080px;148    height: 140px;149    background: #141516;150    display: flex;151    align-items: center;152    justify-content: space-between;153    padding: 0 56px;154    box-sizing: border-box;155  }156  .sheet-bottom .choice {157    color:#c9c9c9; font-size: 38px;158  }159 160  /* Home indicator */161  .home-indicator {162    position: absolute;163    bottom: 24px;164    left: 50%;165    transform: translateX(-50%);166    width: 520px;167    height: 14px;168    background:#e8e8e8;169    border-radius: 7px;170    opacity:0.8;171  }172</style>173</head>174<body>175<div id="render-target">176 177  <!-- Status Bar -->178  <div class="status-bar">179    <div>10:17</div>180    <div class="status-icons">181      <!-- moon, notifications etc represented as simple dots -->182      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/></svg>183      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/></svg>184      <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2"/></svg>185      <!-- WiFi -->186      <svg viewBox="0 0 24 24">187        <path d="M12 19.5l1.6-1.6a2.2 2.2 0 0 0-3.2 0L12 19.5zM4 10a12 12 0 0 1 16 0l-1.8 1.8a9 9 0 0 0-12.4 0L4 10zM7.4 13.4a7 7 0 0 1 9.2 0l-1.7 1.7a4.6 4.6 0 0 0-5.8 0l-1.7-1.7z"/>188      </svg>189      <!-- Battery -->190      <svg viewBox="0 0 28 24">191        <rect x="2" y="5" width="20" height="14" rx="2" fill="#eaeaea"></rect>192        <rect x="4" y="7" width="14" height="10" fill="#0d0d0d"></rect>193        <rect x="22" y="9" width="4" height="6" rx="1" fill="#eaeaea"></rect>194      </svg>195    </div>196  </div>197 198  <!-- App Bar -->199  <div class="app-bar">200    <div class="app-left">201      <div class="back-btn">202        <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" stroke="#dcdcdc" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>203      </div>204      <div class="doc-title">205        <div class="title">Upcoming Even...</div>206        <div class="subtitle">All changes saved</div>207      </div>208    </div>209    <div class="app-right">210      <!-- person plus -->211      <div class="icon-btn">212        <svg viewBox="0 0 24 24">213          <circle cx="9" cy="8" r="4"></circle>214          <path d="M2 20c0-4 5-6 7-6s7 2 7 6" fill="none" stroke="#dcdcdc" stroke-width="2"/>215          <path d="M20 8v-3M18.5 6.5h3" stroke="#dcdcdc" stroke-width="2" stroke-linecap="round"/>216        </svg>217      </div>218      <!-- comment bubble -->219      <div class="icon-btn">220        <svg viewBox="0 0 24 24">221          <path d="M4 4h16v12H9l-5 4V4z" fill="#dcdcdc"></path>222        </svg>223      </div>224      <!-- more vertical dots -->225      <div class="icon-btn">226        <svg viewBox="0 0 24 24">227          <circle cx="12" cy="5" r="2"></circle>228          <circle cx="12" cy="12" r="2"></circle>229          <circle cx="12" cy="19" r="2"></circle>230        </svg>231      </div>232    </div>233  </div>234 235  <!-- Document area -->236  <div class="doc-canvas">237    <div class="doc-content">238      <div class="heading">Upcoming events</div>239      <div class="line">Flower Show</div>240      <div class="line">Gardening club meeting</div>241    </div>242  </div>243 244  <!-- Share sheet -->245  <div class="share-sheet">246    <div class="sheet-header">Share</div>247    <div class="sheet-list">248      <div class="sheet-item">249        <div class="sheet-icon kindle">250          <!-- simple Kindle silhouette -->251          <svg viewBox="0 0 24 24"><path d="M6 20V4h12v16H6zM9 8h6M9 12h6M9 16h6" stroke="#cfe4ff" stroke-width="1.6" fill="none"/></svg>252        </div>253        <div class="sheet-labels">254          <div class="primary">Kindle</div>255        </div>256      </div>257      <div class="sheet-item">258        <div class="sheet-icon gmail">259          <svg viewBox="0 0 24 24">260            <path d="M3 5h18v14H3z" fill="#fff"/>261            <path d="M3 5l9 7 9-7" stroke="#d32f2f" stroke-width="2" fill="none"/>262          </svg>263        </div>264        <div class="sheet-labels">265          <div class="primary">Gmail</div>266        </div>267      </div>268      <div class="sheet-item">269        <div class="sheet-icon mobidrive">270          <svg viewBox="0 0 24 24">271            <circle cx="12" cy="12" r="9" fill="#7bd389"></circle>272            <path d="M7 13l3 3 7-7" stroke="#1f4931" stroke-width="2" fill="none"/>273          </svg>274        </div>275        <div class="sheet-labels">276          <div class="primary">MobiDrive</div>277          <div class="secondary">Save to MobiDrive</div>278        </div>279      </div>280    </div>281 282    <div class="sheet-bottom">283      <div class="choice">Just once</div>284      <div class="choice">Always</div>285    </div>286  </div>287 288  <div class="home-indicator"></div>289</div>290</body>291</html>