GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - Save Dialog</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #2f2f2f;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 110px;22    background: #3a3a3a;23    color: #fff;24    font-size: 42px;25    display: flex;26    align-items: center;27    padding: 0 24px;28    box-sizing: border-box;29  }30  .status-bar .right {31    margin-left: auto;32    display: flex;33    align-items: center;34    gap: 20px;35    font-size: 34px;36    color: #ffffffcc;37  }38  .icon-dot { width: 22px; height: 22px; background: #fff; border-radius: 50%; opacity: 0.85; }39 40  /* App toolbar */41  .toolbar {42    position: absolute;43    top: 110px;44    left: 0;45    width: 1080px;46    height: 145px;47    background: #3d3d3d;48    color: #fff;49    display: flex;50    align-items: center;51    padding: 0 24px;52    box-sizing: border-box;53  }54  .toolbar .left,55  .toolbar .right {56    display: flex;57    align-items: center;58    gap: 26px;59  }60  .toolbar .left { flex: 1; }61  .tool-btn {62    color: #fff;63    font-size: 40px;64    padding: 14px 18px;65    border-radius: 10px;66  }67  .tool-btn.square {68    width: 64px; height: 64px;69    background: #565656;70    display: inline-flex;71    justify-content: center;72    align-items: center;73    font-weight: bold;74    border-radius: 8px;75  }76  .page-chip {77    width: 64px; height: 64px; background: #565656; color: #fff;78    display: inline-flex; justify-content: center; align-items: center;79    border-radius: 10px; font-weight: bold;80  }81  .close-x { font-size: 56px; color: #ddd; margin-left: 14px; }82 83  /* Document page */84  .doc {85    position: absolute;86    top: 265px;87    left: 170px;88    width: 740px;89    height: 1700px;90    background: #ffffff;91    border-radius: 8px;92    box-shadow: 0 0 0 1px #e4e4e4 inset;93    padding: 70px 60px;94    box-sizing: border-box;95  }96  .doc h1 {97    font-size: 66px;98    margin: 0 0 30px;99    color: #0f4d9a;100    background: rgba(49, 86, 160, 0.25);101    display: inline-block;102    padding: 10px 12px;103  }104  .doc p {105    font-size: 36px;106    line-height: 1.6;107    margin: 22px 0;108    color: #0f4d9a;109    padding: 8px 12px;110    background: rgba(49, 86, 160, 0.25);111  }112  .doc .list {113    margin-top: 40px;114  }115  .doc .list p {116    margin: 16px 0;117    font-size: 40px;118  }119 120  /* Save dialog modal */121  .modal {122    position: absolute;123    top: 950px;124    left: 70px;125    width: 940px;126    background: #fff;127    border-radius: 24px;128    box-shadow: 0 30px 60px rgba(0,0,0,0.4);129    padding: 44px 50px 36px;130    box-sizing: border-box;131    color: #222;132  }133  .modal h2 {134    margin: 0 0 26px;135    font-size: 64px;136    font-weight: 700;137    color: #111;138  }139  .modal p {140    font-size: 36px;141    color: #555;142    margin: 0 0 36px;143    line-height: 1.4;144  }145  .modal .actions {146    display: flex;147    justify-content: space-between;148    align-items: center;149    font-size: 42px;150  }151  .btn {152    padding: 18px 22px;153    border-radius: 12px;154    cursor: default;155  }156  .btn.primary { color: #3a73e6; font-weight: 700; }157  .btn.muted { color: #222; }158  .btn.secondary { color: #555; }159 160  /* Bottom editor toolbar */161  .bottom-bar {162    position: absolute;163    left: 0;164    bottom: 120px;165    width: 1080px;166    height: 120px;167    background: #3d3d3d;168    display: flex;169    align-items: center;170    padding: 0 30px;171    box-sizing: border-box;172    gap: 42px;173    color: #eaeaea;174  }175  .tool-icon {176    width: 90px; height: 90px; background: #565656; border-radius: 14px;177    display: flex; align-items: center; justify-content: center; font-size: 42px;178  }179  .label-select {180    position: absolute;181    left: 40px;182    bottom: 260px;183    color: #d7d7d7;184    font-size: 34px;185    background: rgba(0,0,0,0.25);186    padding: 10px 16px;187    border-radius: 14px;188  }189 190  /* Gesture bar */191  .gesture {192    position: absolute;193    bottom: 40px;194    left: 50%;195    transform: translateX(-50%);196    width: 330px;197    height: 14px;198    background: #fff;199    border-radius: 10px;200    opacity: 0.9;201  }202</style>203</head>204<body>205<div id="render-target">206 207  <!-- Status bar -->208  <div class="status-bar">209    <div class="time">9:43</div>210    <div class="right">211      <span>⏻</span>212      <span class="icon-dot"></span>213      <span class="icon-dot"></span>214      <span>88%</span>215    </div>216  </div>217 218  <!-- Top toolbar -->219  <div class="toolbar">220    <div class="left">221      <div class="tool-btn">Done</div>222      <div class="tool-btn">💾</div>223      <div class="tool-btn">↶</div>224      <div class="tool-btn">↷</div>225    </div>226    <div class="right">227      <div class="page-chip">1</div>228      <div class="close-x">✕</div>229    </div>230  </div>231 232  <!-- Document page with selected text -->233  <div class="doc">234    <h1>Meeting Agenda</h1>235 236    <p><strong>Topic:</strong> [Insert topic here]</p>237    <p><strong>Date:</strong> [Insert date here]</p>238    <p><strong>Time:</strong> [Insert time here]</p>239    <p><strong>Location:</strong> [Insert location here]</p>240 241    <p style="font-size:48px; margin-top:34px;"><strong>Agenda:</strong></p>242 243    <div class="list">244      <p>1. Introductions and welcome</p>245      <p>2. Review of previous meeting</p>246      <p>3. Agenda item discussion</p>247      <p>4. Action items and responsibilities</p>248      <p>5. Planning of upcoming events</p>249      <p>6. Other business</p>250      <p>7. Next meeting date and adjournment</p>251    </div>252  </div>253 254  <!-- Save modal dialog -->255  <div class="modal">256    <h2>Save</h2>257    <p>Would you like to save the changes you've made to the document?</p>258    <div class="actions">259      <div class="btn muted">Discard</div>260      <div class="btn secondary">Cancel</div>261      <div class="btn primary">Save</div>262    </div>263  </div>264 265  <!-- Bottom editor toolbar -->266  <div class="label-select">Select: 351</div>267  <div class="bottom-bar">268    <div class="tool-icon">▦</div>269    <div class="tool-icon">▢</div>270    <div class="tool-icon">Aa</div>271    <div class="tool-icon">≡</div>272    <div class="tool-icon">✎</div>273    <div class="tool-icon">🖼</div>274    <div class="tool-icon">＋</div>275    <div class="tool-icon">💬</div>276    <div class="tool-icon" style="color:#9c6df7;">☺</div>277  </div>278 279  <!-- Gesture bar -->280  <div class="gesture"></div>281</div>282</body>283</html>