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>Mobile Note Editor Mock</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: #2f2422; /* dark chocolate app theme */15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16    color: #fff;17  }18 19  /* Top status bar */20  .status-bar {21    height: 110px;22    padding: 0 28px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #ffffff;27    font-size: 36px;28    letter-spacing: 0.5px;29    background: #2f2422;30  }31  .status-icons { display: flex; align-items: center; gap: 22px; }32  .status-icons svg { width: 36px; height: 36px; fill: none; stroke: #ffffff; stroke-width: 2.5; }33 34  /* App bar */35  .appbar {36    height: 130px;37    padding: 0 28px;38    display: flex;39    align-items: center;40    gap: 46px;41    background: #2f2422;42    border-bottom: 1px solid rgba(255,255,255,0.06);43  }44  .appbar .icon {45    width: 54px;46    height: 54px;47    display: inline-flex;48    align-items: center;49    justify-content: center;50    color: #f2c9c3; /* warm pink icons */51  }52  .appbar svg { width: 54px; height: 54px; stroke: #f2c9c3; fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }53  .appbar .text-icon {54    font-size: 48px; font-weight: 600; color: #f2c9c3; line-height: 1;55  }56 57  /* Editor area */58  .editor {59    background: #000000;60    padding: 40px 48px 32px;61    min-height: 1040px;62  }63  .editor .line {64    font-size: 58px;65    color: #ffffff;66    margin: 12px 0;67  }68  .photo {69    width: 100%;70    height: 560px;71    margin: 36px 0 24px;72    background: #E0E0E0;73    border: 1px solid #BDBDBD;74    display: flex; align-items: center; justify-content: center;75    color: #757575; font-size: 40px;76  }77  .photo.small {78    height: 320px;79    margin-top: 28px;80  }81 82  /* Formatting bar above keyboard */83  .format-bar {84    height: 100px;85    background: #3a2d2b;86    display: flex;87    align-items: center;88    padding: 0 26px;89    gap: 34px;90    color: #f2c9c3;91    border-top: 1px solid rgba(255,255,255,0.06);92    border-bottom: 1px solid rgba(255,255,255,0.06);93  }94  .format-bar .ficon {95    width: 52px; height: 52px;96    display: inline-flex; align-items: center; justify-content: center;97    font-size: 42px; font-weight: 700;98    color: #f2c9c3;99  }100  .format-bar svg { width: 46px; height: 46px; fill: none; stroke: #f2c9c3; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }101 102  /* Keyboard */103  .keyboard {104    background: #2f2422;105    padding: 22px 22px 18px;106    height: 920px;107    box-sizing: border-box;108  }109  .key-row {110    display: flex;111    justify-content: space-between;112    gap: 14px;113    margin: 16px 6px;114  }115  .key {116    flex: 1 1 0;117    height: 120px;118    background: #3a2d2b;119    color: #ffffff;120    border-radius: 20px;121    display: flex; align-items: center; justify-content: center;122    font-size: 46px;123    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);124  }125  .key.wide { flex: 1.5 1 0; }126  .key.wider { flex: 3 1 0; }127  .key.circle {128    width: 120px; flex: 0 0 120px; height: 120px; border-radius: 60px;129    background: #e8beb8; color: #2f2422; font-weight: 700;130  }131  .key.circle svg { stroke: #2f2422; }132  .key.icon-only svg { width: 42px; height: 42px; stroke: #ffffff; }133 134  /* Bottom gesture bar */135  .gesture-bar {136    height: 40px;137    background: #2f2422;138    display: flex; align-items: center; justify-content: center;139  }140  .gesture-pill {141    width: 280px; height: 10px; border-radius: 6px; background: #E6E6E6;142    opacity: 0.9;143  }144</style>145</head>146<body>147<div id="render-target">148  <!-- Status Bar -->149  <div class="status-bar">150    <div class="time">7:45</div>151    <div class="status-icons">152      <!-- simple decorative icons -->153      <svg viewBox="0 0 24 24"><path d="M12 2a6 6 0 0 0-6 6c0 4.5 6 12 6 12s6-7.5 6-12a6 6 0 0 0-6-6z"/><circle cx="12" cy="8" r="2.5" fill="#fff"/></svg>154      <svg viewBox="0 0 24 24"><path d="M2 17c5-5 15-5 20 0"/><path d="M6 17c3-3 9-3 12 0"/><path d="M10 17a2 2 0 1 0 4 0"/></svg>155      <svg viewBox="0 0 24 24"><rect x="3" y="6" width="16" height="12" rx="2"/><path d="M21 10v4"/></svg>156    </div>157  </div>158 159  <!-- App Bar -->160  <div class="appbar">161    <div class="icon">162      <svg viewBox="0 0 24 24"><path d="M4 12l5 5 11-11"/></svg>163    </div>164    <div class="icon">165      <svg viewBox="0 0 24 24"><path d="M12 5a7 7 0 1 0 5 12"/><path d="M9 12H3"/></svg>166    </div>167    <div class="icon">168      <svg viewBox="0 0 24 24" style="transform: scaleX(-1);"><path d="M12 5a7 7 0 1 0 5 12"/><path d="M9 12H3"/></svg>169    </div>170    <div class="text-icon">A</div>171    <div class="icon">172      <svg viewBox="0 0 24 24"><path d="M12 5v14"/><path d="M5 12h14"/></svg>173    </div>174    <div class="icon">175      <svg viewBox="0 0 24 24"><path d="M21 10c0 6-9 10-9 10S3 16 3 10a9 9 0 1 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>176    </div>177    <div class="icon">178      <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="1.8"/><circle cx="12" cy="12" r="1.8"/><circle cx="12" cy="19" r="1.8"/></svg>179    </div>180  </div>181 182  <!-- Editor content -->183  <div class="editor">184    <div class="line">To,</div>185    <div class="line">The manager</div>186    <div class="line">Globalogic | ,</div>187 188    <div class="photo">[IMG: Laptop screen photo]</div>189 190    <div class="photo small">[IMG: Partial photo below editor]</div>191  </div>192 193  <!-- Formatting toolbar above keyboard -->194  <div class="format-bar">195    <div class="ficon">B</div>196    <div class="ficon" style="font-style: italic;">I</div>197    <div class="ficon" style="text-decoration: underline;">U</div>198    <div class="ficon">A</div>199    <div class="ficon">200      <svg viewBox="0 0 24 24"><path d="M4 20l6-6"/><path d="M10 20H4v-6"/></svg>201    </div>202    <div class="ficon">203      <svg viewBox="0 0 24 24"><path d="M4 6h16"/><path d="M4 12h10"/><path d="M4 18h16"/></svg>204    </div>205    <div class="ficon">206      <svg viewBox="0 0 24 24"><circle cx="6" cy="6" r="2"/><path d="M10 6h10"/><circle cx="6" cy="12" r="2"/><path d="M10 12h10"/><circle cx="6" cy="18" r="2"/><path d="M10 18h10"/></svg>207    </div>208  </div>209 210  <!-- Keyboard -->211  <div class="keyboard">212    <div class="key-row">213      <div class="key">Q</div>214      <div class="key">W</div>215      <div class="key">E</div>216      <div class="key">R</div>217      <div class="key">T</div>218      <div class="key">Y</div>219      <div class="key">U</div>220      <div class="key">I</div>221      <div class="key">O</div>222      <div class="key">P</div>223    </div>224    <div class="key-row">225      <div class="key">A</div>226      <div class="key">S</div>227      <div class="key">D</div>228      <div class="key">F</div>229      <div class="key">G</div>230      <div class="key">H</div>231      <div class="key">J</div>232      <div class="key">K</div>233      <div class="key">L</div>234      <div class="key circle icon-only">235        <svg viewBox="0 0 24 24"><path d="M4 12h14"/><path d="M14 6l6 6-6 6"/></svg>236      </div>237    </div>238    <div class="key-row">239      <div class="key wide">⇧</div>240      <div class="key">Z</div>241      <div class="key">X</div>242      <div class="key">C</div>243      <div class="key">V</div>244      <div class="key">B</div>245      <div class="key">N</div>246      <div class="key">M</div>247      <div class="key wide">.</div>248    </div>249    <div class="key-row">250      <div class="key circle">?123</div>251      <div class="key circle">,</div>252      <div class="key wider">SPACE</div>253      <div class="key circle">.</div>254      <div class="key circle">↵</div>255    </div>256  </div>257 258  <!-- Bottom gesture pill -->259  <div class="gesture-bar">260    <div class="gesture-pill"></div>261  </div>262</div>263</body>264</html>