GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Mobile UI - Print 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: #f4f4f4;13    box-shadow: 0 0 0 0 rgba(0,0,0,0.2);14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 100px;23    background: #111;24    color: #fff;25    display: flex;26    align-items: center;27    padding: 0 28px;28    box-sizing: border-box;29    font-size: 34px;30    letter-spacing: 0.5px;31  }32  .status-icons {33    margin-left: auto;34    display: flex;35    align-items: center;36    gap: 18px;37  }38  .dot {39    width: 24px; height: 24px; border-radius: 50%; background: #e6e6e6; opacity: 0.9;40  }41  .battery {42    width: 40px; height: 22px; border: 2px solid #fff; border-radius: 3px; position: relative;43  }44  .battery:after {45    content: ""; position: absolute; right: -6px; top: 6px; width: 6px; height: 10px; background: #fff;46  }47 48  /* App bar */49  .app-bar {50    position: absolute;51    top: 100px;52    left: 0;53    width: 1080px;54    height: 120px;55    background: #ffffff;56    box-shadow: 0 2px 0 rgba(0,0,0,0.05);57    display: flex;58    align-items: center;59    padding: 0 24px;60    box-sizing: border-box;61  }62  .app-left,63  .app-right {64    display: flex;65    align-items: center;66    gap: 26px;67  }68  .app-title {69    position: absolute;70    left: 0; right: 0; text-align: center;71    font-size: 42px; font-weight: 600; color: #333;72    pointer-events: none;73  }74  .icon-btn {75    width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center;76  }77  .icon {78    width: 44px; height: 44px; fill: none; stroke: #333; stroke-width: 3;79  }80 81  /* Banner */82  .banner {83    position: absolute;84    top: 220px;85    left: 0;86    width: 1080px;87    height: 110px;88    background: #efe2b0;89    color: #3b3b3b;90    display: flex;91    align-items: center;92    padding: 0 28px;93    box-sizing: border-box;94    font-size: 36px;95  }96  .banner .chev {97    margin-left: auto;98    width: 34px; height: 34px; border-right: 4px solid #5b5b5b; border-bottom: 4px solid #5b5b5b; transform: rotate(45deg);99  }100 101  /* Document area */102  .doc-area {103    position: absolute;104    top: 330px;105    left: 0;106    width: 1080px;107    height: 1510px;108    background: #ffffff;109    box-sizing: border-box;110    padding: 40px 60px;111    font-size: 44px;112    line-height: 1.6;113    color: #111;114  }115  .misspell {116    display: inline-block;117    position: relative;118    padding-bottom: 8px;119  }120  .misspell:after {121    content: "";122    position: absolute;123    left: 0; right: 0; bottom: 0;124    height: 4px;125    background: repeating-linear-gradient(90deg, #d83a3a 0 12px, transparent 12px 18px);126  }127 128  /* Caret and selection handle */129  .caret {130    position: absolute;131    top: 520px; /* roughly after the first line */132    left: 60px;133    width: 4px;134    height: 130px;135    background: #1a73e8;136    border-radius: 2px;137  }138  .drop-handle {139    position: absolute;140    top: 760px;141    left: 36px;142    width: 52px; height: 52px;143    background: #295fbb;144    border-radius: 50%;145    box-shadow: 0 4px 0 #0b3a8d inset;146  }147  .drop-handle:after {148    /* teardrop tip */149    content: "";150    position: absolute;151    bottom: -16px; left: 16px;152    width: 20px; height: 20px;153    background: #295fbb;154    transform: rotate(45deg);155  }156 157  /* Bottom editing toolbar */158  .bottom-toolbar {159    position: absolute;160    bottom: 0;161    left: 0;162    width: 1080px;163    height: 160px;164    background: #ffffff;165    border-top: 1px solid #e0e0e0;166    display: flex;167    align-items: center;168    gap: 60px;169    padding: 0 44px;170    box-sizing: border-box;171    font-size: 64px;172    color: #222;173  }174  .tool {175    width: 80px; text-align: center;176  }177  .underline-red {178    border-bottom: 10px solid #c33333;179    display: inline-block;180    line-height: 0.8;181  }182 183  /* Overlay and modal */184  .overlay {185    position: absolute;186    top: 0; left: 0;187    width: 1080px; height: 2400px;188    background: rgba(0,0,0,0.35);189  }190  .modal {191    position: absolute;192    top: 790px;193    left: 120px;194    width: 840px;195    height: 640px;196    background: #fff;197    border-radius: 14px;198    box-shadow: 0 18px 60px rgba(0,0,0,0.35);199    padding: 40px 48px;200    box-sizing: border-box;201  }202  .modal h2 {203    margin: 0 0 30px 0;204    font-size: 50px;205    color: #222;206  }207  .modal p {208    font-size: 40px;209    color: #444;210    margin: 0 0 40px 0;211  }212  .spinner {213    width: 120px; height: 120px;214    border: 12px solid #ececec;215    border-top-color: #9e9e9e;216    border-radius: 50%;217    animation: spin 1s linear infinite;218    margin: 40px auto 80px auto;219  }220  @keyframes spin {221    to { transform: rotate(360deg); }222  }223  .modal .actions {224    position: absolute;225    right: 48px;226    bottom: 36px;227    font-size: 42px;228    color: #2f5fc0;229    font-weight: 600;230    letter-spacing: 1px;231  }232 233  /* Small greyscale shadow around modal */234  .shadow {235    position: absolute;236    inset: -10px;237    border-radius: 14px;238    box-shadow: 0 2px 24px rgba(0,0,0,0.15);239    pointer-events: none;240  }241</style>242</head>243<body>244<div id="render-target">245 246  <!-- Android like status bar -->247  <div class="status-bar">248    <div>7:59</div>249    <div class="status-icons">250      <div class="dot"></div>251      <div class="dot" style="opacity:.7"></div>252      <div class="dot" style="opacity:.9"></div>253      <div class="battery"></div>254    </div>255  </div>256 257  <!-- App bar with title and icons -->258  <div class="app-bar">259    <div class="app-left">260      <div class="icon-btn" title="Check">261        <svg class="icon" viewBox="0 0 24 24">262          <path d="M3 12l6 6 12-12" stroke="#2f7a3e"></path>263        </svg>264      </div>265    </div>266    <div class="app-title">Movie Plans</div>267    <div class="app-right" style="margin-left:auto">268      <div class="icon-btn" title="Pen">269        <svg class="icon" viewBox="0 0 24 24">270          <path d="M3 17l4 4 14-14-4-4z"></path>271          <path d="M3 17l5-1 10-10"></path>272        </svg>273      </div>274      <div class="icon-btn" title="Search">275        <svg class="icon" viewBox="0 0 24 24">276          <circle cx="10" cy="10" r="6"></circle>277          <path d="M15 15l6 6"></path>278        </svg>279      </div>280      <div class="icon-btn" title="Page">281        <svg class="icon" viewBox="0 0 24 24">282          <rect x="5" y="3" width="14" height="18" rx="2"></rect>283          <path d="M8 8h8M8 12h8M8 16h8"></path>284        </svg>285      </div>286      <div class="icon-btn" title="Undo">287        <svg class="icon" viewBox="0 0 24 24">288          <path d="M9 7L4 12l5 5"></path>289          <path d="M4 12h8a6 6 0 1 1 0 12"></path>290        </svg>291      </div>292      <div class="icon-btn" title="More">293        <svg class="icon" viewBox="0 0 24 24" stroke="#333">294          <circle cx="12" cy="5" r="1.6" stroke="none" fill="#333"></circle>295          <circle cx="12" cy="12" r="1.6" stroke="none" fill="#333"></circle>296          <circle cx="12" cy="19" r="1.6" stroke="none" fill="#333"></circle>297        </svg>298      </div>299    </div>300  </div>301 302  <!-- Warning banner -->303  <div class="banner">304    Can't upload - Please sign into your account.305    <div class="chev"></div>306  </div>307 308  <!-- Document area with text -->309  <div class="doc-area">310    <p>311      I will buy the movie 2 more premium tickets for my friend312      <span class="misspell">deniel</span> and his wife.313    </p>314  </div>315 316  <!-- Caret and handle -->317  <div class="caret"></div>318  <div class="drop-handle"></div>319 320  <!-- Bottom editing toolbar -->321  <div class="bottom-toolbar">322    <div class="tool" style="font-weight:bold;">B</div>323    <div class="tool" style="font-style:italic;">I</div>324    <div class="tool" style="text-decoration: underline;">U</div>325    <div class="tool">326      <svg width="58" height="58" viewBox="0 0 24 24" stroke="#333" fill="none" stroke-width="2">327        <path d="M3 17l4 4 14-14-4-4z"></path>328      </svg>329    </div>330    <div class="tool">331      <span class="underline-red">A</span>332    </div>333    <div class="tool">334      <svg width="56" height="56" viewBox="0 0 24 24" stroke="#333" fill="none" stroke-width="2">335        <path d="M6 6h12M6 12h12M6 18h12"></path>336      </svg>337    </div>338    <div class="tool">339      <svg width="56" height="56" viewBox="0 0 24 24" stroke="#333" fill="none" stroke-width="2">340        <path d="M7 7h10M7 12h10M7 17h10"></path>341        <path d="M4 7h0M4 12h0M4 17h0" stroke-width="4" stroke-linecap="round"></path>342      </svg>343    </div>344  </div>345 346  <!-- Dark overlay and modal -->347  <div class="overlay"></div>348 349  <div class="modal">350    <div class="shadow"></div>351    <h2>Print</h2>352    <p>Getting file ready to print...</p>353    <div class="spinner"></div>354    <div class="actions">CANCEL</div>355  </div>356 357</div>358</body>359</html>