GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Mobile Editor Mock</title>7<style>8  html, body { margin:0; padding:0; background: transparent; }9  * { box-sizing: border-box; }10 11  #render-target {12    position: relative;13    overflow: hidden;14    width: 1080px;15    height: 2400px;16    background: #FFFFFF;17    font-family: Georgia, "Times New Roman", serif;18    color: #1b1b1b;19  }20 21  /* Top floating toolbar */22  .toolbar {23    position: absolute;24    top: 28px;25    left: 24px;26    width: 1032px;27    padding: 16px 10px;28    background: #ffffff;29    border: 6px solid #7B1FA2; /* purple outline */30    border-radius: 24px;31    display: flex;32    gap: 14px;33    box-shadow: 0 4px 10px rgba(0,0,0,0.1);34  }35  .tool-item {36    flex: 0 0 auto;37    width: 116px;38    height: 104px;39    border: 1px solid #D2D2D2;40    border-radius: 16px;41    background: #FAFAFA;42    display: flex;43    align-items: center;44    justify-content: center;45    padding: 8px 6px;46    text-align: center;47  }48  .tool-vstack {49    display: flex;50    flex-direction: column;51    align-items: center;52    gap: 6px;53  }54  .tool-icon {55    width: 54px;56    height: 54px;57    background: #E86919; /* orange */58    border-radius: 50%;59    display: grid;60    place-items: center;61    color: #fff;62    font-weight: 700;63  }64  .tool-label {65    font-size: 20px;66    color: #3d3d3d;67    letter-spacing: 0.5px;68    font-weight: 600;69  }70  .logo-img {71    width: 54px; height: 54px;72    background: #E0E0E0; border: 1px solid #BDBDBD;73    display: flex; align-items: center; justify-content: center;74    color: #757575; font-size: 16px; border-radius: 50%;75    text-align: center; padding: 6px;76  }77 78  /* Document area */79  .doc {80    position: absolute;81    top: 200px;82    left: 52px;83    right: 52px;84    padding-bottom: 940px; /* space above keyboard */85  }86  .doc p {87    margin: 28px 0;88    line-height: 1.45;89    font-size: 38px;90  }91  .doc .small { font-size: 34px; }92  .doc .bold { font-weight: 700; }93  .doc .big { font-size: 56px; }94  .doc .blue { color: #2A5BD7; }95  .doc .link { color: #2A5BD7; text-decoration: none; }96  .doc .indent { margin-left: 4px; }97 98  /* Floating action button (printer) */99  .fab {100    position: absolute;101    right: 44px;102    top: 1240px;103    width: 116px;104    height: 116px;105    background: #E86919;106    border-radius: 50%;107    box-shadow: 0 10px 18px rgba(0,0,0,0.18);108    display: grid;109    place-items: center;110  }111  .fab svg { width: 56px; height: 56px; fill: #fff; }112 113  /* Keyboard mock */114  .keyboard {115    position: absolute;116    left: 0;117    bottom: 0;118    width: 1080px;119    height: 830px;120    background: #1F1B1D;121    border-top-left-radius: 22px;122    border-top-right-radius: 22px;123    color: #e9e9e9;124    padding: 20px 20px 58px;125  }126  .kb-icons {127    display: flex;128    gap: 22px;129    align-items: center;130    margin-bottom: 14px;131  }132  .kb-ic {133    width: 84px; height: 64px;134    background: #2B2628;135    border-radius: 14px;136    display: grid; place-items: center;137    border: 1px solid #3A3537;138  }139  .kb-rows { margin-top: 6px; }140  .kb-row {141    display: grid;142    grid-template-columns: repeat(10, 1fr);143    gap: 10px;144    margin: 16px 6px;145  }146  .kb-key {147    height: 106px;148    background: #332D2F;149    border-radius: 18px;150    display: grid; place-items: center;151    font-size: 46px;152    color: #EEE;153    border: 1px solid #3F3A3C;154  }155  .kb-row2 { grid-template-columns: 0.7fr repeat(9, 1fr) 0.7fr; }156  .kb-row3 { grid-template-columns: 1.2fr repeat(7, 1fr) 1.2fr; }157  .kb-bottom {158    display: grid;159    grid-template-columns: 1.3fr 0.9fr 4.5fr 0.7fr 1.3fr;160    gap: 10px;161    margin: 20px 6px 0;162  }163  .kb-bottom .kb-key { height: 112px; font-size: 40px; }164  .home-indicator {165    position: absolute;166    bottom: 16px; left: 50%;167    transform: translateX(-50%);168    width: 280px; height: 8px;169    background: #FFFFFF;170    opacity: 0.85;171    border-radius: 8px;172  }173 174  /* helper for tiny captions inside icon buttons */175  .tiny-label {176    font-size: 18px;177    font-weight: 700;178    letter-spacing: 0.6px;179  }180</style>181</head>182<body>183<div id="render-target">184 185  <!-- Top toolbar -->186  <div class="toolbar">187    <div class="tool-item">188      <div class="tool-vstack">189        <div class="tool-icon" aria-label="Undo">190          <svg viewBox="0 0 24 24" width="28" height="28">191            <path d="M9 7V3L2 10l7 7v-4h5a6 6 0 0 1 0 12h-2v-3h2a3 3 0 1 0 0-6H9z" fill="#fff"/>192          </svg>193        </div>194        <div class="tool-label">UNDO</div>195      </div>196    </div>197 198    <div class="tool-item">199      <div class="tool-vstack">200        <div class="tool-icon" aria-label="Redo">201          <svg viewBox="0 0 24 24" width="28" height="28">202            <path d="M15 7V3l7 7-7 7v-4H9a6 6 0 1 0 0 12h2v-3H9a3 3 0 1 1 0-6h6z" fill="#fff"/>203          </svg>204        </div>205        <div class="tool-label">REDO</div>206      </div>207    </div>208 209    <div class="tool-item">210      <div class="tool-vstack">211        <div class="logo-img">[IMG: Logo/Sign]</div>212        <div class="tool-label">Logo / Sign</div>213      </div>214    </div>215 216    <div class="tool-item">217      <div class="tool-vstack">218        <div class="tool-icon"><span class="tiny-label">B</span></div>219        <div class="tool-label">BOLD</div>220      </div>221    </div>222 223    <div class="tool-item">224      <div class="tool-vstack">225        <div class="tool-icon"><span class="tiny-label">I</span></div>226        <div class="tool-label">ITALIC</div>227      </div>228    </div>229 230    <div class="tool-item">231      <div class="tool-vstack">232        <div class="tool-icon"><span class="tiny-label">U</span></div>233        <div class="tool-label">UNDERLINE</div>234      </div>235    </div>236 237    <div class="tool-item">238      <div class="tool-vstack">239        <div class="tool-icon">240          <svg viewBox="0 0 24 24" width="28" height="28">241            <rect x="4" y="16" width="16" height="3" fill="#fff"/>242          </svg>243        </div>244        <div class="tool-label">LINE</div>245      </div>246    </div>247 248    <div class="tool-item">249      <div class="tool-vstack">250        <div class="tool-icon">251          <svg viewBox="0 0 24 24" width="28" height="28">252            <rect x="4" y="16" width="16" height="3" fill="#fff"/>253          </svg>254        </div>255        <div class="tool-label">LINE</div>256      </div>257    </div>258  </div>259 260  <!-- Document text -->261  <div class="doc">262    <p class="small">Nandita</p>263    <p class="small">Hr,</p>264    <p class="bold">Simran holidays Noida</p>265    <p class="small">Uttarpradesh</p>266    <p class="big">Pin code</p>267 268    <p class="small">Dear <a class="link" href="#">teams,</a></p>269    <p class="blue">Re:Applying for medical leave</p>270 271    <p class="blue">272      This letter is the formal request for <span class="bold">2 weeks</span> of medical leave273      for <span class="bold">immune diagnosis</span> at the end of this month. The leave274      begins on <span class="bold">April 5, 2019.</span> If necessary, I can be reached275      during my absence.276    </p>277  </div>278 279  <!-- Floating printer button -->280  <div class="fab" aria-label="Print">281    <svg viewBox="0 0 24 24" role="img" aria-hidden="true">282      <path d="M6 2h12v5H6zM5 7h14a3 3 0 0 1 3 3v6h-4v6H6v-6H2v-6a3 3 0 0 1 3-3zm3 9v5h8v-5H8z" />283    </svg>284  </div>285 286  <!-- Keyboard mock -->287  <div class="keyboard">288    <div class="kb-icons">289      <div class="kb-ic">290        <svg viewBox="0 0 24 24" width="34" height="34" fill="#ddd">291          <rect x="3" y="3" width="8" height="8"/><rect x="13" y="3" width="8" height="8"/>292          <rect x="3" y="13" width="8" height="8"/><rect x="13" y="13" width="8" height="8"/>293        </svg>294      </div>295      <div class="kb-ic">296        <svg viewBox="0 0 24 24" width="34" height="34" fill="#ddd">297          <circle cx="12" cy="9" r="4"/><path d="M4 22c0-4 4-7 8-7s8 3 8 7" />298        </svg>299      </div>300      <div class="kb-ic"><span style="font-weight:700;font-size:28px;color:#ddd">GIF</span></div>301      <div class="kb-ic"><span style="font-weight:700;font-size:28px;color:#ddd">Gx</span></div>302      <div class="kb-ic">303        <svg viewBox="0 0 24 24" width="34" height="34" fill="#ddd">304          <path d="M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM4 12h2m12 0h2M12 4v2m0 12v2"/>305        </svg>306      </div>307      <div class="kb-ic">308        <svg viewBox="0 0 24 24" width="34" height="34" fill="#ddd">309          <path d="M4 20h16L12 4z"/>310        </svg>311      </div>312      <div class="kb-ic">313        <svg viewBox="0 0 24 24" width="34" height="34" fill="#ddd">314          <path d="M12 3a4 4 0 0 0-4 4v4H6l6 6 6-6h-2V7a4 4 0 0 0-4-4z"/>315        </svg>316      </div>317    </div>318 319    <!-- qwerty row -->320    <div class="kb-rows">321      <div class="kb-row">322        <div class="kb-key">q</div>323        <div class="kb-key">w</div>324        <div class="kb-key">e</div>325        <div class="kb-key">r</div>326        <div class="kb-key">t</div>327        <div class="kb-key">y</div>328        <div class="kb-key">u</div>329        <div class="kb-key">i</div>330        <div class="kb-key">o</div>331        <div class="kb-key">p</div>332      </div>333 334      <div class="kb-row kb-row2">335        <div class="kb-key">a</div>336        <div class="kb-key">s</div>337        <div class="kb-key">d</div>338        <div class="kb-key">f</div>339        <div class="kb-key">g</div>340        <div class="kb-key">h</div>341        <div class="kb-key">j</div>342        <div class="kb-key">k</div>343        <div class="kb-key">l</div>344        <div class="kb-key">⌫</div>345      </div>346 347      <div class="kb-row kb-row3">348        <div class="kb-key">⇧</div>349        <div class="kb-key">z</div>350        <div class="kb-key">x</div>351        <div class="kb-key">c</div>352        <div class="kb-key">v</div>353        <div class="kb-key">b</div>354        <div class="kb-key">n</div>355        <div class="kb-key">m</div>356        <div class="kb-key">↵</div>357      </div>358 359      <div class="kb-bottom">360        <div class="kb-key">?123</div>361        <div class="kb-key">,</div>362        <div class="kb-key">space</div>363        <div class="kb-key">.</div>364        <div class="kb-key">⏎</div>365      </div>366    </div>367 368    <div class="home-indicator"></div>369  </div>370</div>371</body>372</html>