GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Gmail Compose Mock</title>6<style>7  body { margin:0; padding:0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width:1080px; height:2400px; position:relative; overflow:hidden;10    background:#FBFBF9; color:#222;11  }12  /* Status bar */13  .status-bar {14    position:absolute; top:0; left:0; width:100%; height:96px;15    background:#FFFFFF;16    border-bottom:1px solid #E6E6E6;17    padding:20px 28px;18    box-sizing:border-box;19    font-weight:600;20  }21  .status-left { float:left; font-size:38px; }22  .status-right { float:right; display:flex; align-items:center; gap:28px; }23  .status-icon {24    width:36px; height:36px; border-radius:8px; background:#D9D9D9;25  }26 27  /* App bar */28  .app-bar {29    position:absolute; top:96px; left:0; width:100%; height:152px;30    background:#FFFFFF; border-bottom:1px solid #E6E6E6;31    display:flex; align-items:center; padding:0 24px; box-sizing:border-box;32    gap:16px;33  }34  .icon-btn { width:88px; height:88px; display:flex; align-items:center; justify-content:center; }35  .app-title { font-size:56px; font-weight:700; flex:1; }36  .top-actions { display:flex; align-items:center; gap:18px; }37  .svg-icon { width:48px; height:48px; }38 39  /* Fields */40  .field-row {41    position:relative;42    width:100%; height:128px; background:#FFFFFF;43    display:flex; align-items:center; padding:0 28px; box-sizing:border-box;44    border-bottom:1px solid #EAEAEA;45    font-size:40px;46  }47  .field-label { width:160px; color:#666; }48  .field-value { flex:1; font-weight:600; color:#222; }49  .dropdown { width:36px; height:36px; margin-left:8px; }50  .subject-row { font-size:48px; font-weight:700; }51 52  /* Body area */53  .body-area {54    position:absolute; top:528px; left:0; width:100%; height:820px;55    background:#FFFFFF; padding:34px 28px; box-sizing:border-box;56    font-size:46px; line-height:68px; color:#222;57  }58 59  /* Keyboard mock */60  .keyboard {61    position:absolute; bottom:96px; left:0; width:100%; height:980px;62    background:#F1F2ED; border-top:1px solid #E0E0E0;63  }64  .kb-tools {65    height:120px; display:flex; align-items:center; gap:30px;66    padding:20px 24px; box-sizing:border-box;67  }68  .tool-btn {69    width:96px; height:96px; border-radius:24px; background:#E6EFDD;70    display:flex; align-items:center; justify-content:center; color:#555; font-weight:700;71    border:1px solid #D3DCCB;72  }73  .keys { padding:14px 18px; box-sizing:border-box; }74  .row { display:flex; justify-content:space-between; margin:16px 0; }75  .key {76    width:88px; height:120px; background:#FFFFFF; border:1px solid #E3E3E3;77    border-radius:28px; display:flex; align-items:center; justify-content:center;78    font-size:52px; color:#222; box-shadow:0 1px 0 #DADADA inset;79  }80  .key.wide { width:170px; }81  .spacebar { flex:1; height:120px; background:#FFFFFF; border:1px solid #E3E3E3; border-radius:32px; margin:0 16px; display:flex; align-items:center; justify-content:center; font-size:42px; color:#666; }82  .key.green { background:#DBEAD2; border-color:#CFE2C7; }83  .key.gray { background:#EEF0EA; border-color:#D9DCD5; }84 85  /* Gesture bar */86  .gesture {87    position:absolute; bottom:24px; left:50%; transform:translateX(-50%);88    width:260px; height:16px; background:#CFCFCF; border-radius:8px;89  }90 91  /* Helper: SVG basics */92  svg { display:block; }93</style>94</head>95<body>96<div id="render-target">97 98  <!-- Status bar -->99  <div class="status-bar">100    <div class="status-left">8:33</div>101    <div class="status-right">102      <div class="status-icon"></div>103      <div class="status-icon"></div>104      <div class="status-icon"></div>105      <div class="status-icon"></div>106    </div>107  </div>108 109  <!-- App bar -->110  <div class="app-bar">111    <div class="icon-btn">112      <svg class="svg-icon" viewBox="0 0 24 24">113        <path d="M15 18l-6-6 6-6" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>114      </svg>115    </div>116    <div class="app-title">Compose</div>117    <div class="top-actions">118      <!-- attachment-ish icon -->119      <svg class="svg-icon" viewBox="0 0 24 24">120        <path d="M7 12l7-7c1.5-1.5 3.5-1.5 5 0s1.5 3.5 0 5l-8 8c-2 2-5 2-7 0s-2-5 0-7l6-6" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round"/>121      </svg>122      <!-- send icon -->123      <svg class="svg-icon" viewBox="0 0 24 24">124        <path d="M3 20l18-8L3 4l4 8-4 8z" fill="#2E7D32"/>125      </svg>126      <!-- overflow -->127      <svg class="svg-icon" viewBox="0 0 24 24">128        <circle cx="12" cy="5" r="2" fill="#333"/>129        <circle cx="12" cy="12" r="2" fill="#333"/>130        <circle cx="12" cy="19" r="2" fill="#333"/>131      </svg>132    </div>133  </div>134 135  <!-- From -->136  <div class="field-row" style="top:248px;">137    <div class="field-label">From</div>138    <div class="field-value">dbwscratch.test.id2@gmail.com</div>139  </div>140 141  <!-- To -->142  <div class="field-row" style="top:376px;">143    <div class="field-label">To</div>144    <div class="field-value"></div>145    <svg class="dropdown" viewBox="0 0 24 24">146      <path d="M6 9l6 6 6-6" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>147    </svg>148  </div>149 150  <!-- Subject -->151  <div class="field-row subject-row" style="top:504px;">152    <div class="field-value">Swimming Class</div>153  </div>154 155  <!-- Body -->156  <div class="body-area">157    the swimming class is scheduled on 10 august<br>158    at 11 am. Se159  </div>160 161  <!-- Keyboard -->162  <div class="keyboard">163    <div class="kb-tools">164      <div class="tool-btn">⠿</div>165      <div class="tool-btn">🙂</div>166      <div class="tool-btn">GIF</div>167      <div class="tool-btn">168        <svg viewBox="0 0 24 24" width="40" height="40">169          <path d="M12 2l3 3-3 3-3-3 3-3zm0 7a5 5 0 110 10 5 5 0 010-10z" fill="#6A6A6A"/>170        </svg>171      </div>172      <div class="tool-btn">G↔</div>173      <div class="tool-btn">🎨</div>174      <div class="tool-btn">🎤</div>175    </div>176 177    <div class="keys">178      <!-- Row 1 -->179      <div class="row">180        <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>181        <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      <!-- Row 2 -->184      <div class="row">185        <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>186        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>187        <div class="key green">188          <svg viewBox="0 0 24 24" width="40" height="40">189            <path d="M5 12h14" stroke="#2E7D32" stroke-width="3" stroke-linecap="round"/>190          </svg>191        </div>192      </div>193      <!-- Row 3 -->194      <div class="row">195        <div class="key green">196          <svg viewBox="0 0 24 24" width="36" height="36"><path d="M6 18l6-12 6 12" fill="none" stroke="#2E7D32" stroke-width="3"/></svg>197        </div>198        <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>199        <div class="key">b</div><div class="key">n</div><div class="key">m</div>200        <div class="key green">201          <svg viewBox="0 0 24 24" width="36" height="36">202            <path d="M6 6l12 12M6 18l12-12" stroke="#2E7D32" stroke-width="3" stroke-linecap="round"/>203          </svg>204        </div>205      </div>206      <!-- Row 4 -->207      <div class="row">208        <div class="key gray wide">?123</div>209        <div class="key gray">@</div>210        <div class="key gray">🙂</div>211        <div class="spacebar">space</div>212        <div class="key gray">.</div>213        <div class="key green">214          <svg viewBox="0 0 24 24" width="40" height="40">215            <path d="M5 12h12M12 5l7 7-7 7" fill="none" stroke="#2E7D32" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>216          </svg>217        </div>218      </div>219    </div>220  </div>221 222  <!-- Gesture bar -->223  <div class="gesture"></div>224 225</div>226</body>227</html>