GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Compose Email - Mock</title>5<style>6  body { margin:0; padding:0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#FAFAFA;11    border-radius:24px; /* subtle phone look */12    box-shadow:0 10px 30px rgba(0,0,0,0.15);13  }14 15  /* Status bar */16  .status-bar {17    position:absolute; top:0; left:0; right:0;18    height:90px; background:#FFFFFF;19    padding:0 30px;20    display:flex; align-items:center; justify-content:space-between;21    border-bottom:1px solid #E6E6E6;22    font-size:36px; color:#212121;23  }24  .status-right { display:flex; align-items:center; gap:20px; color:#555; }25  .icon {26    width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;27  }28  .icon svg { width:36px; height:36px; fill:#555; }29 30  /* App bar */31  .app-bar {32    position:absolute; top:90px; left:0; right:0;33    height:120px; background:#FFFFFF;34    display:flex; align-items:center;35    padding:0 24px;36    border-bottom:1px solid #E6E6E6;37  }38  .app-title { font-size:48px; font-weight:600; color:#1b1b1b; margin-left:24px; }39  .app-actions { margin-left:auto; display:flex; align-items:center; gap:26px; }40  .app-actions .icon svg { fill:#424242; }41  .send svg { fill:#2E7D32; } /* green send icon */42 43  /* Content area */44  .content {45    position:absolute; top:210px; left:0; right:0; bottom:780px;46    overflow:hidden; background:#FFFFFF;47  }48  .row {49    display:flex; align-items:center;50    padding:22px 36px;51    border-bottom:1px solid #EFEFEF;52    font-size:36px; color:#222;53  }54  .row .label {55    width:110px; color:#616161;56    font-size:34px;57  }58  .email { color:#1a73e8; font-size:36px; }59  .chip {60    display:inline-flex; align-items:center; gap:18px;61    background:#F1F3F4; border:1px solid #DADCE0;62    padding:16px 22px; border-radius:40px;63  }64  .avatar {65    width:56px; height:56px; border-radius:50%;66    background:#C75D32; color:#fff; display:flex; align-items:center; justify-content:center;67    font-weight:700; text-transform:lowercase; font-size:32px;68  }69  .dropdown { margin-left:auto; }70  .dropdown svg { width:34px; height:34px; fill:#777; }71 72  .subject {73    padding:26px 36px;74    font-size:42px; color:#111;75    border-bottom:1px solid #EFEFEF;76  }77  .body-area {78    padding:36px; font-size:42px; line-height:66px; color:#222;79  }80 81  /* Keyboard mock */82  .keyboard {83    position:absolute; bottom:0; left:0; right:0;84    height:780px; background:#F3F4F1;85    border-top:1px solid #DADADA;86    padding:24px 24px 30px 24px;87  }88  .kb-topbar {89    height:110px; background:#EAECE6; border-radius:18px;90    display:flex; align-items:center; gap:40px; padding:0 24px; margin-bottom:20px;91  }92  .kb-topbar .icon { width:60px; height:60px; }93  .kb-topbar .icon svg { width:44px; height:44px; fill:#555; }94 95  .keys-row { display:flex; justify-content:center; gap:16px; margin-bottom:16px; }96  .key {97    width:92px; height:112px; border-radius:28px;98    background:#FFFFFF; border:1px solid #E5E5E5;99    display:flex; align-items:center; justify-content:center;100    font-size:44px; color:#2B2B2B;101  }102  .row-indent-1 { padding-left:56px; }103  .row-indent-2 { padding-left:110px; }104  .key-wide { width:300px; }105  .key-medium { width:160px; }106</style>107</head>108<body>109<div id="render-target">110 111  <!-- Status bar -->112  <div class="status-bar">113    <div class="time">8:35</div>114    <div class="status-right">115      <div class="icon">116        <!-- cellular bars -->117        <svg viewBox="0 0 24 24"><path d="M2 20h2v-4H2v4zm4 0h2v-7H6v7zm4 0h2v-10h-2v10zm4 0h2v-13h-2v13zm4 0h2V3h-2v17z"/></svg>118      </div>119      <div class="icon">120        <!-- WiFi -->121        <svg viewBox="0 0 24 24"><path d="M12 18.5l4-4.1c-2.3-2.3-5.7-2.3-8 0l4 4.1zm7-7.3c-4.4-4.4-11.6-4.4-16 0l1.4 1.4c3.7-3.7 9.5-3.7 13.2 0L19 11.2zm3-3C17.4 0.6 6.6 0.6 2 8.2l1.4 1.4c3.8-6.1 13.4-6.1 17.2 0L22 8.2z"/></svg>122      </div>123      <div class="icon">124        <!-- battery -->125        <svg viewBox="0 0 24 24"><path d="M16 7h2v10h-2V7zM3 8c0-1.1.9-2 2-2h9c1.1 0 2 .9 2 2v8c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V8zm2 0h9v8H5V8z"/></svg>126      </div>127    </div>128  </div>129 130  <!-- App bar -->131  <div class="app-bar">132    <div class="icon">133      <!-- back arrow -->134      <svg viewBox="0 0 24 24"><path d="M20 11H7.8l5.1-5.2-1.4-1.4L4 12l7.5 7.6 1.4-1.4L7.8 13H20v-2z"/></svg>135    </div>136    <div class="app-title">Compose</div>137    <div class="app-actions">138      <div class="icon">139        <!-- attach / paperclip -->140        <svg viewBox="0 0 24 24"><path d="M16.5 6.5l-8.1 8.1c-1.4 1.4-1.4 3.6 0 5s3.6 1.4 5 0l8.1-8.1c2-2 2-5.2 0-7.2s-5.2-2-7.2 0L6 12.5l1.4 1.4 8.3-8.3c1.2-1.2 3.2-1.2 4.4 0s1.2 3.2 0 4.4l-8.1 8.1c-.8.8-2.1.8-2.9 0-.8-.8-.8-2.1 0-2.9l8.1-8.1-1.8-1.6z"/></svg>141      </div>142      <div class="icon send">143        <!-- send -->144        <svg viewBox="0 0 24 24"><path d="M2 21l21-9L2 3v7l15 2-15 2v7z"/></svg>145      </div>146      <div class="icon">147        <!-- menu dots -->148        <svg viewBox="0 0 24 24"><path d="M12 5a2 2 0 110-4 2 2 0 010 4zm0 9a2 2 0 110-4 2 2 0 010 4zm0 9a2 2 0 110-4 2 2 0 010 4z"/></svg>149      </div>150    </div>151  </div>152 153  <!-- Content -->154  <div class="content">155    <div class="row">156      <div class="label">From</div>157      <div class="email">dbwscratch.test.id2@gmail.com</div>158    </div>159 160    <div class="row">161      <div class="label">To</div>162      <div class="chip">163        <div class="avatar">d</div>164        <div class="email">dbwscratch.test.id3@gmail.com</div>165      </div>166      <div class="dropdown icon" style="margin-left:16px;">167        <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5H7z"/></svg>168      </div>169    </div>170 171    <div class="subject">Swimming Class</div>172 173    <div class="body-area">174      the swimming class is scheduled on 10 august<br>175      at 11 am. Se176    </div>177  </div>178 179  <!-- Keyboard -->180  <div class="keyboard">181    <div class="kb-topbar">182      <div class="icon"><svg viewBox="0 0 24 24"><path d="M3 3h18v18H3zM6 6h12v12H6z"/></svg></div>183      <div class="icon"><svg viewBox="0 0 24 24"><path d="M3 8h18v2H3zm0 6h12v2H3z"/></svg></div>184      <div class="icon"><svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm1 5v5h5v2h-7V7h2z"/></svg></div>185      <div class="icon"><svg viewBox="0 0 24 24"><path d="M21 3H3v18h18V3zM5 5h14v14H5V5zm6 2l-4 10h2l.8-2h4.4l.8 2h2L13 7h-2zm.3 2.7l1.5 3.6h-3l1.5-3.6z"/></svg></div>186      <div class="icon"><svg viewBox="0 0 24 24"><path d="M12 2l4 8h8l-6.5 5.2L19 22l-7-4.5L5 22l1.5-6.8L0 10h8l4-8z"/></svg></div>187      <div class="icon"><svg viewBox="0 0 24 24"><path d="M5 4h14v2H5zm0 6h14v2H5zm0 6h14v2H5z"/></svg></div>188    </div>189 190    <div class="keys-row">191      <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>192      <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>193    </div>194    <div class="keys-row row-indent-1">195      <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>196      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>197    </div>198    <div class="keys-row row-indent-2">199      <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>200      <div class="key">n</div><div class="key">m</div>201      <div class="key">202        <!-- backspace -->203        <svg viewBox="0 0 24 24"><path d="M21 6H9L3 12l6 6h12V6zm-2 10H9.8L6.2 12l3.6-4H19v8zm-8-2l2-2-2-2 1.4-1.4 2 2 2-2L18.8 10l-2 2 2 2-1.4 1.4-2-2-2 2L11 14z"/></svg>204      </div>205    </div>206    <div class="keys-row" style="justify-content:space-between; padding:0 12px;">207      <div class="key key-medium">?123</div>208      <div class="key key-medium">@</div>209      <div class="key key-wide"></div>210      <div class="key key-medium">.</div>211      <div class="key key-medium">212        <!-- enter -->213        <svg viewBox="0 0 24 24"><path d="M19 5v6H8l3-3-1.4-1.4L4.2 12l5.4 5.4L11 16l-3-3h12V5h-1z"/></svg>214      </div>215    </div>216  </div>217 218</div>219</body>220</html>