GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>UI Render</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    border-radius: 0;16    box-shadow: none;17    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;18  }19 20  /* Status bar */21  .statusbar {22    position: absolute;23    top: 0;24    left: 0;25    width: 1080px;26    height: 120px;27    background: #111;28    color: #fff;29    display: flex;30    align-items: center;31    padding: 0 32px;32    box-sizing: border-box;33    font-size: 40px;34  }35  .status-left {36    display: flex;37    align-items: center;38    gap: 22px;39  }40  .status-right {41    margin-left: auto;42    display: flex;43    align-items: center;44    gap: 28px;45  }46  .status-icon svg { width: 42px; height: 42px; fill: #fff; }47 48  /* Top action bar */49  .topbar {50    position: absolute;51    top: 120px;52    left: 0;53    width: 1080px;54    height: 140px;55    background: #111;56    color: #fff;57    display: flex;58    align-items: center;59    box-sizing: border-box;60    padding: 0 32px;61  }62  .topbar .title {63    font-size: 64px;64    font-weight: 600;65    margin-right: 28px;66  }67  .top-actions {68    display: flex;69    align-items: center;70    gap: 36px;71  }72  .top-actions svg { width: 56px; height: 56px; fill: #EDEDED; }73  .topbar-right {74    margin-left: auto;75    display: flex;76    align-items: center;77    gap: 28px;78  }79  .counter {80    font-size: 44px;81    color: #fff;82    border: 2px solid #999;83    padding: 8px 18px;84    border-radius: 14px;85  }86 87  /* Document area */88  .doc {89    position: absolute;90    top: 260px;91    left: 0;92    right: 0;93    bottom: 260px;94    background: #fff;95  }96  .page-corner {97    position: absolute;98    width: 60px;99    height: 60px;100  }101  .page-corner::before,102  .page-corner::after {103    content: "";104    position: absolute;105    background: #CFCFCF;106  }107  .page-corner.tl { left: 56px; top: 240px; }108  .page-corner.tl::before { width: 4px; height: 60px; left: 0; top: 0; }109  .page-corner.tl::after  { width: 60px; height: 4px; left: 0; top: 0; }110 111  .page-corner.bl { left: 56px; bottom: 340px; }112  .page-corner.bl::before { width: 4px; height: 60px; left: 0; bottom: 0; }113  .page-corner.bl::after  { width: 60px; height: 4px; left: 0; bottom: 0; }114 115  .content {116    position: absolute;117    left: 140px;118    top: 120px;119    right: 80px;120    color: #222;121    font-size: 52px;122    line-height: 1.7;123  }124 125  /* Caret and selection handle */126  .caret {127    position: absolute;128    width: 6px;129    height: 64px;130    background: #2F80ED;131    left: 140px;132    top: 290px; /* aligned with "Full" line */133    border-radius: 3px;134  }135  .caret-handle {136    position: absolute;137    width: 64px;138    height: 64px;139    background: #3D79FF;140    left: 120px;141    top: 355px;142    border-radius: 50%;143    box-shadow: 0 2px 0 rgba(0,0,0,0.15);144  }145 146  /* Info pill near bottom left */147  .info-pill {148    position: absolute;149    left: 120px;150    bottom: 420px;151    background: #EFEFEF;152    color: #555;153    font-size: 40px;154    padding: 14px 24px;155    border-radius: 12px;156    border: 1px solid #DADADA;157  }158 159  /* Bottom tools bar */160  .bottombar {161    position: absolute;162    left: 0;163    bottom: 0;164    width: 1080px;165    height: 220px;166    background: #161616;167    display: flex;168    align-items: center;169    justify-content: space-between;170    padding: 0 36px;171    box-sizing: border-box;172  }173  .bottom-icons {174    display: flex;175    align-items: center;176    gap: 48px;177  }178  .bottom-icons svg { width: 64px; height: 64px; fill: #D9D9D9; }179  .home-indicator {180    position: absolute;181    bottom: 230px;182    left: 50%;183    transform: translateX(-50%);184    width: 300px;185    height: 10px;186    background: #ffffff;187    opacity: 0.85;188    border-radius: 6px;189  }190 191  /* Thin divider representing a light area above bottom bar */192  .bottom-shadow {193    position: absolute;194    left: 0;195    right: 0;196    bottom: 220px;197    height: 90px;198    background: #F1F1F1;199    border-top: 1px solid #E5E5E5;200  }201</style>202</head>203<body>204<div id="render-target">205 206  <!-- Status bar -->207  <div class="statusbar">208    <div class="status-left">209      <div>9:15</div>210      <div class="status-icon">211        <!-- Envelope icon -->212        <svg viewBox="0 0 24 24"><path d="M3 5h18v14H3V5zm2 2v10h14V7l-7 5-7-5z"/></svg>213      </div>214      <div class="status-icon">215        <!-- Mobile signal bars -->216        <svg viewBox="0 0 24 24"><path d="M2 20h2v-4H2v4zm4 0h2v-7H6v7zm4 0h2v-10h-2v10zm4 0h2V6h-2v14zm4 0h2V3h-2v17z"/></svg>217      </div>218      <div class="status-icon">219        <!-- Cloud -->220        <svg viewBox="0 0 24 24"><path d="M6 18h10a4 4 0 0 0 0-8h-.5A5.5 5.5 0 0 0 6 7a4 4 0 0 0 0 8z"/></svg>221      </div>222    </div>223    <div class="status-right">224      <div class="status-icon">225        <!-- Wi-Fi -->226        <svg viewBox="0 0 24 24"><path d="M12 20l2-2-2-2-2 2 2 2zm-6.5-6.5l1.5 1.5A7 7 0 0 1 12 13a7 7 0 0 1 5 2l1.5-1.5A9 9 0 0 0 12 11a9 9 0 0 0-6.5 2.5zM2 8l2 2a13 13 0 0 1 8-3 13 13 0 0 1 8 3l2-2A16 16 0 0 0 12 5 16 16 0 0 0 2 8z"/></svg>227      </div>228      <div class="status-icon">229        <!-- Battery -->230        <svg viewBox="0 0 24 24"><path d="M16 7h2v10h-2V7z"/><path d="M2 7h14v10H2V7z"/></svg>231      </div>232    </div>233  </div>234 235  <!-- Top action bar -->236  <div class="topbar">237    <div class="title">Done</div>238    <div class="top-actions">239      <!-- Save -->240      <svg viewBox="0 0 24 24"><path d="M5 3h11l3 3v15H5V3zm2 2v4h10V7l-2-2H7zm0 8v6h10v-6H7z"/></svg>241      <!-- Undo -->242      <svg viewBox="0 0 24 24"><path d="M12 5v3c4.4 0 8 3.6 8 8h-3a5 5 0 0 0-5-5v3L5 8l7-3z"/></svg>243      <!-- Redo -->244      <svg viewBox="0 0 24 24"><path d="M12 5v3a5 5 0 0 1 5 5h-3c0-1.7-1.3-3-3-3v3L5 8l7-3z" transform="scale(-1,1) translate(-24,0)"/></svg>245    </div>246    <div class="topbar-right">247      <div class="counter">1</div>248      <!-- Close X -->249      <svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>250    </div>251  </div>252 253  <!-- Document area -->254  <div class="doc">255    <!-- Decorative page corners -->256    <div class="page-corner tl"></div>257 258    <div class="content">259      <div>Dusk</div>260      <div>Duck</div>261      <div>Gulab</div>262      <div>Full</div>263      <div>Desk desk desk damsel line ah mud co laksh do gayi</div>264    </div>265 266    <!-- Caret and selection handle near "Full" -->267    <div class="caret"></div>268    <div class="caret-handle"></div>269 270    <div class="page-corner bl"></div>271 272    <!-- Info pill -->273    <div class="info-pill">Full text: 67</div>274  </div>275 276  <!-- Light area above bottom bar -->277  <div class="bottom-shadow"></div>278 279  <!-- Bottom tools bar -->280  <div class="bottombar">281    <div class="bottom-icons">282      <!-- Grid -->283      <svg viewBox="0 0 24 24"><path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"/></svg>284      <!-- Crop frame -->285      <svg viewBox="0 0 24 24"><path d="M7 3v12h12v2H5V3h2zm4 4h10v10h-2V9H11V7z"/></svg>286      <!-- Aa with lines -->287      <svg viewBox="0 0 24 24"><path d="M3 18h10v2H3v-2zm0-4h14v2H3v-2zm7-9l4 10h-2l-1-3H7l-1 3H4L8 5h2zm-1 3l-2 5h4l-2-5z"/></svg>288      <!-- Eraser -->289      <svg viewBox="0 0 24 24"><path d="M3 16l8-8 6 6-6 6H7L3 16zm14 6h4v-2h-4v2z"/></svg>290      <!-- Image -->291      <svg viewBox="0 0 24 24"><path d="M3 5h18v14H3V5zm2 2v10h14V7H5zm2 8l3-3 4 4H7zm9-6a2 2 0 1 1-4 0 2 2 0 0 1 4 0z"/></svg>292      <!-- Plus -->293      <svg viewBox="0 0 24 24"><path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5z"/></svg>294      <!-- Keyboard -->295      <svg viewBox="0 0 24 24"><path d="M3 7h18v10H3V7zm2 2v6h14V9H5zm2 1h2v2H7v-2zm3 0h2v2h-2v-2zm3 0h2v2h-2v-2zm3 0h2v2h-2v-2zm-12 3h2v2H4v-2zm4 0h8v2H8v-2z"/></svg>296      <!-- Smile -->297      <svg viewBox="0 0 24 24"><path d="M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm-4 7a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm8 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm-8 6a6 6 0 0 0 8 0l1.2 1.2a7.5 7.5 0 0 1-10.4 0L8 16z" fill="#B38CFF"/></svg>298    </div>299  </div>300 301  <!-- Home indicator -->302  <div class="home-indicator"></div>303</div>304</body>305</html>