GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Compose Email - 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:#FFFFFF;11    border-radius:24px;12    box-shadow: 0 0 0 rgba(0,0,0,0.1);13  }14  /* Status bar */15  .status-bar {16    position:absolute; top:0; left:0; right:0;17    height:110px; background:#F7F7F7;18    display:flex; align-items:center; padding:0 36px;19    color:#222;20    font-weight:600; font-size:40px;21  }22  .status-icons { margin-left:auto; display:flex; align-items:center; gap:28px; color:#555; }23  /* App bar */24  .app-bar {25    position:absolute; top:110px; left:0; right:0; height:130px; background:#FFFFFF;26    border-bottom:1px solid #e6e6e6;27    display:flex; align-items:center; padding:0 28px;28  }29  .icon-btn { width:80px; height:80px; display:flex; align-items:center; justify-content:center; }30  .icon-btn svg { width:52px; height:52px; fill:#6F6F6F; }31  .send svg { fill:#6C7F3A; } /* green paper plane */32  .app-actions { margin-left:auto; display:flex; align-items:center; gap:18px; }33  /* Form area */34  .compose-area {35    position:absolute; top:240px; left:0; right:0; bottom:980px; /* leave space for keyboard */36    padding:40px 40px 0 40px;37    background:#FFFFFF;38  }39  .field-row { display:flex; align-items:center; gap:24px; margin-bottom:34px; }40  .label { width:120px; color:#6d6d6d; font-size:42px; }41  .value { flex:1; display:flex; align-items:center; gap:18px; font-size:42px; color:#222; }42  .dropdown svg { width:30px; height:30px; fill:#666; }43  .chip {44    display:inline-flex; align-items:center; gap:18px;45    background:#F7F7F7; border:1px solid #D8D8D8; border-radius:48px;46    padding:18px 26px; font-size:40px; color:#222;47  }48  .avatar {49    width:64px; height:64px; border-radius:50%;50    background:#4AA38E; color:#fff; display:flex; align-items:center; justify-content:center;51    font-weight:700;52  }53  .subject-placeholder {54    margin-top:26px; margin-bottom:30px;55    color:#8b8b8b; font-size:46px;56  }57  .message {58    margin-top:12px; font-size:46px; line-height:1.35; color:#111;59    white-space:pre-line;60  }61  /* Keyboard mock */62  .keyboard {63    position:absolute; bottom:0; left:0; right:0;64    height:980px; background:#F3F4F6; border-top:1px solid #dddddd;65    padding:30px 30px 40px 30px;66  }67  .kb-top {68    display:flex; align-items:center; gap:36px; padding-bottom:22px;69  }70  .kb-pill {71    width:96px; height:96px; background:#E9EAEE; border:1px solid #D1D5DB;72    border-radius:22px; display:flex; align-items:center; justify-content:center; color:#555; font-size:34px;73  }74  .keys-row {75    display:flex; gap:22px; margin-top:26px;76    justify-content:space-between;77  }78  .key {79    flex:1; max-width:92px; height:132px; background:#FFFFFF;80    border:1px solid #DADCE0; border-radius:26px;81    display:flex; align-items:center; justify-content:center;82    font-size:52px; color:#1f1f1f;83    box-shadow: 0 2px 0 #E5E7EB inset;84  }85  .key.large { max-width:none; flex:0 0 220px; }86  .space { flex:1; height:132px; background:#FFFFFF; border:1px solid #DADCE0; border-radius:26px; }87  .keys-row.center { padding:0 40px; }88  .keys-row.bottom { align-items:center; }89  .return {90    flex:0 0 160px; height:132px; background:#D6E4C9; border:1px solid #BFD2B0; border-radius:26px;91    display:flex; align-items:center; justify-content:center;92  }93  .return svg { width:56px; height:56px; fill:#3C5F2A; }94  .shift { flex:0 0 160px; }95  .backspace { flex:0 0 160px; }96  .dot { flex:0 0 120px; }97  /* small helper */98  .muted { color:#666; }99</style>100</head>101<body>102<div id="render-target">103 104  <!-- Status Bar -->105  <div class="status-bar">106    <div>7:02</div>107    <div class="status-icons">108      <!-- WiFi icon -->109      <svg viewBox="0 0 24 24" width="46" height="46">110        <path d="M12 18c.9 0 1.6.7 1.6 1.6S12.9 21.2 12 21.2s-1.6-.7-1.6-1.6.7-1.6 1.6-1.6zM3 9.5C7.2 6.3 16.8 6.3 21 9.5l-1.5 1.6C16 8.4 8 8.4 4.5 11.1L3 9.5zm3.6 4.1c3-2.1 10.8-2.1 13.8 0l-1.6 1.5c-2.3-1.6-8.4-1.6-10.7 0L6.6 13.6z" fill="#555"/>111      </svg>112      <!-- Battery icon -->113      <svg viewBox="0 0 28 24" width="60" height="46">114        <rect x="2" y="5" width="20" height="14" rx="2" ry="2" fill="#555"></rect>115        <rect x="23" y="9" width="3" height="6" fill="#555"></rect>116        <rect x="4" y="7" width="14" height="10" fill="#9CCC65"></rect>117      </svg>118    </div>119  </div>120 121  <!-- App Bar -->122  <div class="app-bar">123    <div class="icon-btn">124      <!-- Back arrow -->125      <svg viewBox="0 0 24 24">126        <path d="M15.5 4.5L7 12l8.5 7.5-1.5 2L4 12 14 2.5z"></path>127      </svg>128    </div>129    <div class="app-actions" style="margin-left:auto;">130      <div class="icon-btn">131        <!-- Paperclip -->132        <svg viewBox="0 0 24 24">133          <path d="M17.5 7.5L9.7 15.3c-1.3 1.3-3.5 1.3-4.8 0s-1.3-3.5 0-4.8L12.7 2.7c2-2 5.2-2 7.2 0s2 5.2 0 7.2L10.9 21.9c-2.6 2.6-6.7 2.6-9.3 0l1.4-1.4c1.8 1.8 4.6 1.8 6.4 0l9-9c1.1-1.1 1.1-3 0-4.1-1.1-1.1-3-1.1-4.1 0L7.5 13.2c-.6.6-.6 1.6 0 2.2.6.6 1.6.6 2.2 0l7.8-7.8z"></path>134        </svg>135      </div>136      <div class="icon-btn send">137        <!-- Paper plane -->138        <svg viewBox="0 0 24 24">139          <path d="M2 21l20-9L2 3l3.5 7L17 12 5.5 14z"></path>140        </svg>141      </div>142      <div class="icon-btn">143        <!-- More vertical dots -->144        <svg viewBox="0 0 24 24">145          <circle cx="12" cy="5" r="2"></circle>146          <circle cx="12" cy="12" r="2"></circle>147          <circle cx="12" cy="19" r="2"></circle>148        </svg>149      </div>150    </div>151  </div>152 153  <!-- Compose area -->154  <div class="compose-area">155    <div class="field-row">156      <div class="label">From</div>157      <div class="value">158        <div>natalie.larson1998@gmail.com</div>159        <div class="dropdown">160          <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"></path></svg>161        </div>162      </div>163    </div>164 165    <div class="field-row">166      <div class="label">To</div>167      <div class="value">168        <div class="chip">169          <div class="avatar">A</div>170          <div>amelia.miller2709@gmail.com</div>171          <div class="dropdown">172            <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"></path></svg>173          </div>174        </div>175      </div>176    </div>177 178    <div class="subject-placeholder">Subject</div>179 180    <div class="message">181Check out my train journey:182https://eurailapp.com/share/journey?id=F630E060-6F4C-11EE-9149-B3A607C0F017&type=list&brand=interrail183    </div>184  </div>185 186  <!-- Keyboard mock -->187  <div class="keyboard">188    <div class="kb-top">189      <div class="kb-pill">⎇</div>190      <div class="kb-pill">☺</div>191      <div class="kb-pill">GIF</div>192      <div class="kb-pill">⚙</div>193      <div class="kb-pill">G↔</div>194      <div class="kb-pill">🎨</div>195      <div class="kb-pill">🎤</div>196    </div>197 198    <div class="keys-row center">199      <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>200    </div>201 202    <div class="keys-row center">203      <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>204    </div>205 206    <div class="keys-row bottom">207      <div class="key shift">⇧</div>208      <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>209      <div class="key backspace">⌫</div>210    </div>211 212    <div class="keys-row bottom">213      <div class="key large">?123</div>214      <div class="key large">@</div>215      <div class="key large">☺</div>216      <div class="space"></div>217      <div class="key dot">.</div>218      <div class="return">219        <svg viewBox="0 0 24 24"><path d="M19 7v6H8l3.5-3.5-1.4-1.4L4 14l6.1 6.1 1.4-1.4L8 15h11c1.1 0 2-.9 2-2V7h-2z"></path></svg>220      </div>221    </div>222  </div>223 224</div>225</body>226</html>