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 UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Georgia, "Times New Roman", serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #FFFFFF;12  }13 14  /* Top editing toolbar */15  .toolbar {16    position: absolute; left: 24px; right: 24px; top: 28px;17    height: 168px; padding: 12px 16px;18    border: 8px solid #6F2CF2; border-radius: 24px; background: #F9F4FF;19    display: flex; align-items: center; gap: 18px; box-sizing: border-box;20  }21  .tool { width: 126px; text-align: center; }22  .tool .circle {23    width: 104px; height: 104px; margin: 0 auto 6px;24    background: #E86623; border-radius: 50%;25    display: grid; place-items: center; color: #fff;26  }27  .tool .label {28    font: 700 22px/1 "Inter", Arial, sans-serif;29    color: #3a3a3a; letter-spacing: .2px;30  }31  .tool.small .label { font-weight: 600; font-size: 20px; }32 33  /* Document area */34  .doc {35    position: absolute; left: 64px; right: 64px; top: 232px; bottom: 780px;36    overflow: hidden; color: #111;37  }38  .doc p { margin: 26px 0; font-size: 44px; line-height: 1.4; }39  .doc p.small { font-size: 40px; }40  .doc p.big { font-size: 58px; }41  .doc .bold { font-weight: 800; }42  .doc .link { color: #2B61D4; }43  .subject { color: #2B61D4; font-size: 46px; margin-top: 36px; }44  .info { color: #2B61D4; font-size: 42px; }45  .underline { text-decoration: underline; }46 47  /* Caret droplet */48  .caret {49    position: absolute; width: 64px; height: 64px; border-radius: 50%;50    background: #7DCFC7; left: 310px; top: 655px;51    box-shadow: 0 2px 0 rgba(0,0,0,0.08) inset;52  }53 54  /* Floating printer button */55  .fab {56    position: absolute; right: 44px; top: 1320px;57    width: 122px; height: 122px; border-radius: 50%;58    background: #EF6C2E; display: grid; place-items: center;59    box-shadow: 0 8px 18px rgba(0,0,0,.2);60  }61 62  /* Keyboard mock */63  .keyboard {64    position: absolute; left: 0; right: 0; bottom: 0; height: 760px;65    background: #161616; color: #fff;66    box-shadow: 0 -6px 18px rgba(0,0,0,.25) inset;67  }68  .kb-top {69    height: 90px; display: flex; align-items: center; gap: 26px;70    padding: 0 20px; box-sizing: border-box;71  }72  .kb-chip {73    height: 64px; min-width: 64px; padding: 0 18px;74    border-radius: 16px; background: #262626; display: grid; place-items: center;75    font: 600 28px/1 Arial, sans-serif; color: #eaeaea; border: 1px solid #2e2e2e;76  }77  .kb-rows { padding: 8px 16px 12px; box-sizing: border-box; }78  .row { display: flex; justify-content: space-between; margin: 16px 8px; }79  .key {80    width: 88px; height: 108px; border-radius: 16px;81    background: #2A2A2A; display: grid; place-items: center;82    font: 600 42px/1 Arial, sans-serif; color: #f3f3f3; border: 1px solid #333;83  }84  .key.wide { width: 160px; }85  .space { flex: 1; height: 108px; margin: 0 12px; border-radius: 16px;86    background: #2A2A2A; border: 1px solid #333; }87  .accent { background: #F0C1BC; color: #2b2b2b; border-color: #E2B1AB; }88  .enter {89    width: 120px; height: 120px; border-radius: 50%;90    background: #F0C1BC; color: #2b2b2b; display: grid; place-items: center;91    font-weight: 800; border: 2px solid #e0aead;92  }93  .home-indicator {94    position: absolute; left: 50%; transform: translateX(-50%);95    bottom: 18px; width: 320px; height: 8px; border-radius: 8px; background: #EDEDED;96    opacity: .9;97  }98 99  /* Simple icon SVG sizing */100  svg { display: block; }101</style>102</head>103<body>104<div id="render-target">105 106  <!-- Editing toolbar -->107  <div class="toolbar">108    <div class="tool">109      <div class="circle">110        <!-- Undo -->111        <svg width="56" height="56" viewBox="0 0 24 24" fill="none">112          <path d="M7 7V3L1 9l6 6v-4h4a6 6 0 0 1 0 12h-2" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>113        </svg>114      </div>115      <div class="label">UNDO</div>116    </div>117    <div class="tool">118      <div class="circle">119        <!-- Redo -->120        <svg width="56" height="56" viewBox="0 0 24 24" fill="none">121          <path d="M17 7V3l6 6-6 6v-4h-4a6 6 0 0 0 0 12h2" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>122        </svg>123      </div>124      <div class="label">REDO</div>125    </div>126    <div class="tool small">127      <div class="circle" style="background:#E0E0E0;color:#555; border:2px solid #BDBDBD;">128        <!-- Placeholder for logo/sign image -->129        <div style="width:64px;height:64px;background:#E0E0E0;border:1px solid #BDBDBD;display:flex;align-items:center;justify-content:center;color:#757575;font-size:18px;text-align:center;">IMG</div>130      </div>131      <div class="label">Logo / Sign</div>132    </div>133    <div class="tool">134      <div class="circle">135        <!-- Bold B -->136        <svg width="56" height="56" viewBox="0 0 24 24" fill="#fff">137          <path d="M7 4h7a4 4 0 0 1 0 8H7V4zm0 10h8a4 4 0 0 1 0 8H7v-8z"/>138        </svg>139      </div>140      <div class="label">BOLD</div>141    </div>142    <div class="tool">143      <div class="circle">144        <!-- Italic I -->145        <svg width="56" height="56" viewBox="0 0 24 24" fill="none">146          <path d="M15 4H9m6 0-6 16m6 0H9" stroke="#fff" stroke-width="2" stroke-linecap="round"/>147        </svg>148      </div>149      <div class="label">ITALIC</div>150    </div>151    <div class="tool">152      <div class="circle">153        <!-- Underline U -->154        <svg width="56" height="56" viewBox="0 0 24 24" fill="none">155          <path d="M6 4v7a6 6 0 0 0 12 0V4M4 20h16" stroke="#fff" stroke-width="2" stroke-linecap="round"/>156        </svg>157      </div>158      <div class="label">UNDERLINE</div>159    </div>160    <div class="tool">161      <div class="circle">162        <!-- Line -->163        <svg width="56" height="56" viewBox="0 0 24 24" fill="none">164          <path d="M4 12h16" stroke="#fff" stroke-width="2" stroke-linecap="round"/>165        </svg>166      </div>167      <div class="label">LINE</div>168    </div>169  </div>170 171  <!-- Document content -->172  <div class="doc">173    <p>Nandita</p>174    <p class="small">Hr,</p>175    <p class="bold">Simran holidays Noida</p>176    <p>Uttarpradesh</p>177    <p class="big">Pin code</p>178 179    <p class="small">Dear <span class="link">teams</span>,</p>180 181    <p class="subject">Re: Applying for medical leave</p>182 183    <p class="info">184      This letter is the formal request for <strong>2 weeks</strong> of medical leave185      for <strong class="underline">immune diagnosis</strong> at the end of this month.186    </p>187  </div>188 189  <!-- Caret droplet -->190  <div class="caret"></div>191 192  <!-- Floating printer button -->193  <div class="fab">194    <svg width="54" height="54" viewBox="0 0 24 24" fill="none">195      <path d="M7 7V3h10v4M6 17H5a3 3 0 0 1-3-3v-2a3 3 0 0 1 3-3h14a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3h-1M7 17h10v4H7v-4z" stroke="#fff" stroke-width="2" stroke-linejoin="round"/>196      <circle cx="7" cy="12" r="1" fill="#fff"/>197    </svg>198  </div>199 200  <!-- Keyboard mock -->201  <div class="keyboard">202    <div class="kb-top">203      <div class="kb-chip">⬛⬜</div>204      <div class="kb-chip">🙂</div>205      <div class="kb-chip">GIF</div>206      <div class="kb-chip">Gx</div>207      <div class="kb-chip">⚙️</div>208      <div class="kb-chip">🎨</div>209      <div class="kb-chip" style="margin-left:auto;">🎤</div>210    </div>211 212    <div class="kb-rows">213      <div class="row">214        <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div>215        <div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>216      </div>217      <div class="row" style="padding: 0 28px;">218        <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>219        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>220      </div>221      <div class="row" style="padding: 0 76px;">222        <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div>223        <div class="key">n</div><div class="key">m</div><div class="key wide">⌫</div>224      </div>225      <div class="row" style="align-items:center;">226        <div class="key accent" style="width:160px;">?123</div>227        <div class="key" style="width:80px">,</div>228        <div class="key" style="width:80px">🙂</div>229        <div class="space"></div>230        <div class="key" style="width:80px">.</div>231        <div class="enter">↵</div>232      </div>233    </div>234 235    <div class="home-indicator"></div>236  </div>237 238</div>239</body>240</html>