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>Send a copy - Mobile UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #0E0E0F;14    border-radius: 26px;15    box-shadow: 0 30px 80px rgba(0,0,0,0.6);16    color: #EAEAEA;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 120px;26    color: #F5F5F5;27    display: flex;28    align-items: center;29    padding: 0 40px;30    font-size: 40px;31    letter-spacing: 0.5px;32  }33  .status-right {34    margin-left: auto;35    display: flex;36    gap: 24px;37    align-items: center;38  }39  .icon-dot {40    width: 18px;41    height: 18px;42    background: #F5F5F5;43    border-radius: 50%;44    opacity: 0.9;45  }46 47  /* App bar */48  .app-bar {49    position: absolute;50    top: 120px;51    left: 0;52    width: 1080px;53    height: 140px;54    background: #151515;55    display: flex;56    align-items: center;57    padding: 0 30px;58    box-sizing: border-box;59  }60  .app-btn {61    width: 96px;62    height: 96px;63    display: flex;64    align-items: center;65    justify-content: center;66    margin-right: 20px;67    border-radius: 24px;68  }69  .app-title {70    font-size: 64px;71    color: #EDEDED;72    flex: 1;73  }74  .app-actions {75    display: flex;76    align-items: center;77    gap: 30px;78  }79  .circle-icon {80    width: 96px;81    height: 96px;82    border-radius: 50%;83    background: #232323;84    display: flex;85    align-items: center;86    justify-content: center;87  }88  .circle-icon svg { fill: #CFCFCF; width: 48px; height: 48px; }89 90  /* Document area */91  .doc-area {92    position: absolute;93    top: 260px;94    left: 0;95    right: 0;96    bottom: 0;97    background: #0A0A0A;98  }99  .doc-meta {100    position: absolute;101    top: 280px;102    left: 60px;103    color: #8C8C8C;104    font-size: 36px;105  }106  .doc-content {107    position: absolute;108    top: 380px;109    left: 60px;110    right: 60px;111    color: #DCDCDC;112  }113  .doc-content h2 {114    margin: 0 0 30px 0;115    font-size: 46px;116    color: #D6D6D6;117  }118  .doc-content p {119    margin: 10px 0;120    font-size: 42px;121    color: #CFCFCF;122  }123 124  /* Floating edit button */125  .fab {126    position: absolute;127    right: 60px;128    bottom: 220px;129    width: 140px;130    height: 140px;131    border-radius: 32px;132    background: #10202A;133    display: flex;134    align-items: center;135    justify-content: center;136    box-shadow: 0 10px 30px rgba(0,0,0,0.6);137  }138  .fab svg { stroke: #B9CFE0; stroke-width: 12; width: 64px; height: 64px; }139 140  /* Modal sheet */141  .modal {142    position: absolute;143    left: 90px;144    top: 520px;145    width: 900px;146    height: 1400px;147    background: #2A2A2A;148    border-radius: 56px;149    box-shadow: 0 50px 120px rgba(0,0,0,0.75);150    padding: 60px 60px 40px 60px;151    box-sizing: border-box;152  }153  .modal h1 {154    margin: 0 0 40px 0;155    font-size: 72px;156    font-weight: 500;157    color: #FFFFFF;158  }159  .modal .sub {160    font-size: 40px;161    color: #BDBDBD;162    margin-bottom: 20px;163  }164  .option {165    display: flex;166    align-items: center;167    gap: 30px;168    height: 120px;169    border-radius: 22px;170    color: #EDEDED;171    font-size: 48px;172  }173  .option + .option { margin-top: 6px; }174 175  .radio {176    width: 56px;177    height: 56px;178    border-radius: 50%;179    border: 6px solid #9AA0A6;180    position: relative;181    box-sizing: border-box;182  }183  .selected { border-color: #78B8FF; }184  .selected::after {185    content: "";186    position: absolute;187    left: 50%;188    top: 50%;189    width: 18px;190    height: 18px;191    background: #78B8FF;192    border-radius: 50%;193    transform: translate(-50%, -50%);194  }195 196  .modal-footer {197    position: absolute;198    bottom: 40px;199    left: 60px;200    right: 60px;201    display: flex;202    justify-content: space-between;203    font-size: 48px;204    color: #86B9FF;205  }206</style>207</head>208<body>209<div id="render-target">210  <!-- Status bar -->211  <div class="status-bar">212    10:17213    <div class="status-right">214      <span class="icon-dot"></span>215      <span class="icon-dot"></span>216      <span class="icon-dot"></span>217      <span class="icon-dot"></span>218    </div>219  </div>220 221  <!-- Top app bar -->222  <div class="app-bar">223    <div class="app-btn">224      <svg viewBox="0 0 24 24" width="64" height="64">225        <path fill="#DADADA" d="M15.5 5l-7 7 7 7-1.5 1.5L5.5 12 14 3.5z"/>226      </svg>227    </div>228    <div class="app-title">Upcoming Even...</div>229    <div class="app-actions">230      <div class="circle-icon">231        <svg viewBox="0 0 24 24"><path d="M12 12c2.76 0 5-2.24 5-5S14.76 2 12 2 7 4.24 7 7s2.24 5 5 5zm0 2c-4.42 0-8 2.24-8 5v3h16v-3c0-2.76-3.58-5-8-5z"/></svg>232      </div>233      <div class="circle-icon">234        <svg viewBox="0 0 24 24"><path d="M4 4h16v14H5.17L4 19.17V4zm3 3v2h10V7H7zm0 4v2h10v-2H7zm0 4v2h7v-2H7z"/></svg>235      </div>236      <div class="circle-icon">237        <svg viewBox="0 0 24 24"><path d="M12 8a2 2 0 110-4 2 2 0 010 4zm0 6a2 2 0 110-4 2 2 0 010 4zm0 6a2 2 0 110-4 2 2 0 010 4z"/></svg>238      </div>239    </div>240  </div>241 242  <!-- Document surface -->243  <div class="doc-area"></div>244  <div class="doc-meta">All changes saved</div>245  <div class="doc-content">246    <h2>Upcoming events</h2>247    <p>Flower Show</p>248    <p>Gardening club meeting</p>249  </div>250 251  <!-- Floating edit button -->252  <div class="fab">253    <svg viewBox="0 0 24 24" fill="none">254      <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 000-1.41l-2.34-2.34a1 1 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>255    </svg>256  </div>257 258  <!-- Modal: Send a copy -->259  <div class="modal">260    <h1>Send a copy</h1>261    <div class="sub">Choose format</div>262 263    <div class="option">264      <div class="radio"></div>265      <div>Word (.docx)</div>266    </div>267    <div class="option">268      <div class="radio selected"></div>269      <div>PDF Document (.pdf)</div>270    </div>271    <div class="option">272      <div class="radio"></div>273      <div>OpenDocument Format (.odt)</div>274    </div>275    <div class="option">276      <div class="radio"></div>277      <div>Plain Text (.txt)</div>278    </div>279    <div class="option">280      <div class="radio"></div>281      <div>Rich Text Format (.rtf)</div>282    </div>283    <div class="option">284      <div class="radio"></div>285      <div>Web Page (.html, zipped)</div>286    </div>287    <div class="option">288      <div class="radio"></div>289      <div>EPUB Publication (.epub)</div>290    </div>291 292    <div class="modal-footer">293      <div>Cancel</div>294      <div>OK</div>295    </div>296  </div>297</div>298</body>299</html>