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 Note Composer - Mock</title>7<style>8  body{margin:0;padding:0;background:transparent;font-family:system-ui, Roboto, Arial, Helvetica, sans-serif;}9  #render-target{10    width:1080px;height:2400px;position:relative;overflow:hidden;11    background:#241c1c;border-radius:0;12    color:#fff;13  }14 15  /* Status bar */16  .status-bar{17    height:100px;background:#2b2323;display:flex;align-items:center;justify-content:space-between;18    padding:0 28px;font-weight:500;font-size:38px;letter-spacing:0.5px;19  }20  .status-right{display:flex;align-items:center;gap:26px;color:#e7d2cd;}21  .ico{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;}22  .ico svg{width:100%;height:100%;fill:#e7d2cd}23 24  /* App action bar */25  .app-bar{26    height:130px;background:#2b2323;display:flex;align-items:center;padding:0 26px;gap:34px;border-bottom:1px solid #3a2f2f;27  }28  .app-bar .spacer{flex:1}29  .tint{color:#efc7c2}30  .circle-btn{31    width:66px;height:66px;border-radius:50%;background:#efc7c2;32    display:flex;align-items:center;justify-content:center;33  }34  .circle-btn svg{fill:#2b2323}35 36  /* Document area */37  .doc{38    background:#000;height:1140px;padding:40px 40px 0 40px;box-sizing:border-box;39  }40  .doc .line{font-size:54px;line-height:76px;margin:0 0 8px 0;color:#ffffff}41  .img-ph{42    width:1000px;height:560px;background:#E0E0E0;border:1px solid #BDBDBD;margin:36px auto 0 auto;43    display:flex;align-items:center;justify-content:center;color:#757575;font-size:34px;text-align:center;44  }45 46  /* Formatting toolbar above keyboard */47  .format-bar{48    height:90px;background:#2b2323;display:flex;align-items:center;gap:34px;padding:0 34px;border-top:1px solid #3a2f2f;border-bottom:1px solid #3a2f2f;49  }50  .format-bar .chip{font-weight:700}51  .format-bar .chip, .format-bar .ico{color:#e7d2cd}52  .underline{border-bottom:6px solid #e7d2cd;padding-bottom:6px}53 54  /* Keyboard */55  .keyboard{height:980px;background:#2c2323;border-top:1px solid #3a2f2f;display:flex;flex-direction:column;}56  .suggest{57    height:96px;display:flex;align-items:center;gap:20px;padding:0 26px;color:#e7d2cd;font-size:40px;58  }59  .suggest .tag{padding:10px 26px;background:#3a2f2f;border-radius:20px}60  .keys{flex:1;display:flex;flex-direction:column;gap:22px;padding:22px 18px 16px 18px;box-sizing:border-box}61  .row{display:grid;grid-template-columns:repeat(10, 1fr);gap:14px}62  .row.row2{padding:0 36px}63  .key{64    height:110px;border-radius:22px;background:#4a4040;display:flex;align-items:center;justify-content:center;65    color:#fff;font-size:46px;66  }67  .row3{display:grid;grid-template-columns:1.4fr repeat(7,1fr) 1.6fr;gap:14px}68  .bottom-row{69    display:grid;grid-template-columns:1.6fr 1fr 5fr 1fr 1.8fr;gap:18px;margin-top:6px;padding:0 8px;70  }71  .circle{72    height:120px;border-radius:60px;background:#efc7c2;color:#2b2323;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:40px;73  }74  .space{height:120px;border-radius:60px;background:#4a4040;display:flex;align-items:center;justify-content:center;color:#b5aaaa;font-size:36px}75  .dot .key{border-radius:60px}76 77  /* Gesture bar */78  .gesture{79    position:absolute;left:50%;bottom:18px;transform:translateX(-50%);80    width:340px;height:12px;border-radius:8px;background:#f1f1f1;opacity:0.85;81  }82</style>83</head>84<body>85<div id="render-target">86  <!-- Status bar -->87  <div class="status-bar">88    <div class="left">7:44</div>89    <div class="status-right">90      <span class="ico">91        <svg viewBox="0 0 24 24"><path d="M3 12l6-6v12z"/></svg>92      </span>93      <span class="ico">94        <svg viewBox="0 0 24 24"><path d="M12 3a7 7 0 0 0-7 7c0 5.25 7 11 7 11s7-5.75 7-11a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>95      </span>96      <span class="ico">97        <svg viewBox="0 0 24 24"><path d="M3 21h18v-2H3v2zm2-4h14V7l-5-4H5v14zm9-11l3 3h-3V6z"/></svg>98      </span>99      <span class="ico">100        <svg viewBox="0 0 24 24"><path d="M2 8v8h4l5 5V3L6 8H2zM16 7h6v10h-6z"/></svg>101      </span>102    </div>103  </div>104 105  <!-- App action bar -->106  <div class="app-bar">107    <div class="circle-btn" title="Done">108      <svg viewBox="0 0 24 24"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>109    </div>110 111    <div class="ico" title="Undo">112      <svg viewBox="0 0 24 24"><path d="M12 5v3H6.41l2.3-2.29L7.3 4.3 3 8.59 7.3 12.9l1.41-1.41L6.41 9H14a6 6 0 1 1 0 12h-2v2h2a8 8 0 1 0 0-16h-2z"/></svg>113    </div>114    <div class="ico" title="Redo">115      <svg viewBox="0 0 24 24"><path d="M12 5v3h7.59l-2.3-2.29 1.41-1.41L23 8.59l-4.3 4.31-1.41-1.41L19.59 9H10a6 6 0 0 0 0 12h2v-2h-2a4 4 0 1 1 0-8h2V5h-2z"/></svg>116    </div>117 118    <div class="ico" title="Text style">119      <svg viewBox="0 0 24 24"><path d="M5 19h14v2H5zM12 4l6 12h-2.2l-1.4-3H9.6l-1.4 3H6L12 4zm1.6 7L12 7.9 10.4 11h3.2z"/></svg>120    </div>121 122    <div class="ico" title="Add">123      <svg viewBox="0 0 24 24"><path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"/></svg>124    </div>125 126    <div class="ico" title="Comment">127      <svg viewBox="0 0 24 24"><path d="M21 6H3v12h5l4 3 4-3h5z"/></svg>128    </div>129 130    <div class="spacer"></div>131 132    <div class="ico" title="More">133      <svg viewBox="0 0 24 24"><path d="M12 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>134    </div>135  </div>136 137  <!-- Document canvas -->138  <div class="doc">139    <p class="line">To,</p>140    <p class="line">The manager</p>141    <p class="line">Globalogic</p>142    <p class="line">Gawal pahari ,</p>143 144    <div class="img-ph">[IMG: Photo of spreadsheet on laptop]</div>145  </div>146 147  <!-- Formatting toolbar -->148  <div class="format-bar">149    <div class="chip">B</div>150    <div class="chip">I</div>151    <div class="chip">U</div>152    <div class="chip underline">A</div>153    <div class="ico">154      <svg viewBox="0 0 24 24"><path d="M3 17h18v2H3v-2zm0-6h18v2H3v-2zm0-6h18v2H3V5z"/></svg>155    </div>156    <div class="ico">157      <svg viewBox="0 0 24 24"><path d="M7 5h14v2H7V5zM3 8h2v2H3V8zm4 2h14v2H7v-2zM3 14h2v2H3v-2zm4 2h14v2H7v-2z"/></svg>158    </div>159    <div class="ico">160      <svg viewBox="0 0 24 24"><path d="M4 10h4V6H4v4zm0 8h4v-4H4v4zm6-8h10V6H10v4zm0 8h10v-4H10v4z"/></svg>161    </div>162  </div>163 164  <!-- Keyboard -->165  <div class="keyboard">166    <div class="suggest">167      <div class="ico" style="width:52px;height:52px;">168        <svg viewBox="0 0 24 24"><path d="M3 3h8v8H3zM13 3h8v8h-8zM3 13h8v8H3zM13 13h8v8h-8z"/></svg>169      </div>170      <div class="tag">pahari</div>171      <div class="tag">Pahari</div>172      <div class="tag">pahadi</div>173      <div class="spacer"></div>174      <div class="ico" style="width:52px;height:52px;">175        <svg viewBox="0 0 24 24"><path d="M12 3a4 4 0 0 0-4 4v4a4 4 0 0 0 3 3.87V21h2v-6.13A4 4 0 0 0 16 11V7a4 4 0 0 0-4-4z"/></svg>176      </div>177    </div>178 179    <div class="keys">180      <div class="row">181        <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><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>182      </div>183      <div class="row row2">184        <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><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>185      </div>186      <div class="row3">187        <div class="key">⇧</div>188        <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><div class="key">n</div><div class="key">m</div>189        <div class="key">⌫</div>190      </div>191 192      <div class="bottom-row">193        <div class="circle">?123</div>194        <div class="circle">,</div>195        <div class="space">space</div>196        <div class="circle">.</div>197        <div class="circle">198          <svg viewBox="0 0 24 24" style="width:48px;height:48px;fill:#2b2323;">199            <path d="M9 21h2V9H5v2h4v10zm4-12v12h2V13h4v-2h-6z"/>200          </svg>201        </div>202      </div>203    </div>204  </div>205 206  <div class="gesture"></div>207</div>208</body>209</html>