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>Letter Editor Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15  }16 17  /* Top toolbar */18  .toolbar {19    position: absolute;20    top: 28px;21    left: 24px;22    right: 24px;23    height: 170px;24    border: 8px solid #6A1B9A;25    border-radius: 14px;26    background: #ffffff;27    display: flex;28    align-items: center;29    padding: 14px 18px;30    gap: 12px;31    box-sizing: border-box;32  }33  .tool {34    width: 120px;35    height: 120px;36    border-radius: 16px;37    background: #F3F3F3;38    border: 1px solid #D6D6D6;39    display: flex;40    align-items: center;41    justify-content: center;42    position: relative;43    box-sizing: border-box;44  }45  .tool .circle {46    width: 86px;47    height: 86px;48    background: #E45A1B;49    border-radius: 50%;50    color: #fff;51    display: flex;52    align-items: center;53    justify-content: center;54    font-weight: 800;55    font-size: 40px;56    letter-spacing: 1px;57  }58  .tool small {59    position: absolute;60    bottom: -22px;61    left: 50%;62    transform: translateX(-50%);63    font-size: 22px;64    color: #555;65    white-space: nowrap;66  }67 68  /* Document area */69  .doc {70    position: absolute;71    top: 230px;72    left: 60px;73    right: 60px;74    bottom: 140px;75    overflow-y: hidden;76    color: #111;77    font-size: 44px;78    line-height: 1.6;79  }80  .doc p { margin: 30px 0; }81  .doc .name { margin-top: 20px; }82  .doc .bold { font-weight: 800; }83  .doc .blue { color: #3F68E8; }84  .doc a { color: #3F68E8; text-decoration: none; }85  .caret-line {86    width: 4px;87    height: 85px;88    background: #111;89    margin: 50px 0 10px 0;90    position: relative;91  }92  .teardrop {93    width: 58px;94    height: 58px;95    background: #91D3C7;96    border-radius: 50% 50% 50% 0;97    position: absolute;98    left: -28px;99    bottom: -24px;100    transform: rotate(-45deg);101  }102 103  /* Floating action buttons on the right */104  .fab-stack {105    position: absolute;106    right: 28px;107    top: 950px;108    display: flex;109    flex-direction: column;110    gap: 48px;111    align-items: flex-end;112  }113  .fab {114    width: 130px;115    height: 130px;116    background: #D84315;117    border-radius: 50%;118    box-shadow: 0 8px 18px rgba(0,0,0,0.25);119    color: #fff;120    display: flex;121    align-items: center;122    justify-content: center;123    position: relative;124    font-weight: 700;125    font-size: 34px;126  }127  .fab svg { width: 46px; height: 46px; fill: #fff; margin-right: 8px; }128  .fab span { position: absolute; bottom: 26px; left: 0; right: 0; text-align: center; font-size: 26px; font-weight: 700; }129 130  /* Bottom home indicator */131  .home-bar {132    position: absolute;133    left: 0; right: 0; bottom: 0;134    height: 96px;135    background: #000;136  }137  .home-bar .pill {138    width: 300px;139    height: 14px;140    background: #D9D9D9;141    border-radius: 8px;142    position: absolute;143    left: 50%;144    top: 42px;145    transform: translateX(-50%);146    opacity: 0.9;147  }148</style>149</head>150<body>151<div id="render-target">152 153  <!-- Top formatting toolbar -->154  <div class="toolbar">155    <div class="tool">156      <div class="circle">B</div>157      <small>BOLD</small>158    </div>159    <div class="tool">160      <div class="circle" style="font-style: italic;">I</div>161      <small>ITALIC</small>162    </div>163    <div class="tool">164      <div class="circle">U</div>165      <small>UNDERLINE</small>166    </div>167    <div class="tool">168      <div class="circle" style="font-weight: 700;">—</div>169      <small>LINE</small>170    </div>171    <div class="tool">172      <div class="circle" style="font-weight: 800; font-size: 48px;">¶</div>173      <small>LINE BREAK</small>174    </div>175    <div class="tool">176      <div class="circle" style="font-size:34px;">A A</div>177      <small>STYLE</small>178    </div>179    <div class="tool">180      <div class="circle" style="font-size:40px;">T</div>181      <small>SIZE</small>182    </div>183    <div class="tool">184      <div class="circle" style="background:#E45A1B; position:relative;">185        <svg viewBox="0 0 24 24">186          <circle cx="12" cy="12" r="10" fill="#fff" opacity="0.15"/>187          <path d="M12 2v20M2 12h20" stroke="#fff" stroke-width="2"/>188        </svg>189      </div>190      <small>COLOR</small>191    </div>192  </div>193 194  <!-- Document content -->195  <div class="doc">196    <p class="name">Nandita</p>197 198    <p>Hr,</p>199 200    <p class="bold">Simran holidays Noida</p>201 202    <p>Uttarpradesh</p>203 204    <p>Pin code -456673</p>205 206    <div class="caret-line"><span class="teardrop"></span></div>207 208    <p>Dear <a href="#">teams</a>,</p>209 210    <p class="blue">Re:Applying for medical leave</p>211 212    <p class="blue">213      This letter is the formal request for <span class="bold">2 weeks</span> of medical leave214      for <span class="bold">immune diagnosis</span> at the end of this month. I will be215      having my surgery on <span class="bold">April 7, 2018</span>. If my procedure and216      recovered well217    </p>218 219    <p>Thank you for your consideration and looking for to your response.</p>220 221    <p>Yours sincerely</p>222 223    <p>Henry</p>224  </div>225 226  <!-- Floating action buttons -->227  <div class="fab-stack">228    <div class="fab">229      <svg viewBox="0 0 24 24" aria-hidden="true">230        <path d="M19 8H5V5h14v3zm1 3v7H4v-7h16zM8 14h8v2H8v-2z" />231      </svg>232      <span>Print</span>233    </div>234    <div class="fab">235      <svg viewBox="0 0 24 24"><path d="M4 5h16v14H4V5zm3 3h10v2H7V8zm0 4h10v2H7v-2z"/></svg>236      <span>Notes</span>237    </div>238    <div class="fab">239      <svg viewBox="0 0 24 24"><path d="M3 4h18v14H3V4zm2 2v10h14V6H5zm3 14h8v2H8v-2z"/></svg>240      <span>Files</span>241    </div>242    <div class="fab">243      <svg viewBox="0 0 24 24"><path d="M12 3v10l4-4 1.4 1.4L12 16l-5.4-6.6L8 9l4 4V3h0zM5 19h14v2H5v-2z"/></svg>244      <span>Save</span>245    </div>246    <div class="fab">247      <svg viewBox="0 0 24 24"><path d="M6 7h12v2H6V7zm0 4h12v2H6v-2zm0 4h12v2H6v-2z"/></svg>248    </div>249  </div>250 251  <!-- Bottom system bar -->252  <div class="home-bar">253    <div class="pill"></div>254  </div>255 256</div>257</body>258</html>