GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Email Compose Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #F3F4F8;12  }13  .status-bar {14    height: 90px; padding: 0 28px;15    display: flex; align-items: center; justify-content: space-between;16    color: #3C4043; font-size: 32px;17  }18  .status-left { display: flex; align-items: center; gap: 14px; }19  .status-right { display: flex; align-items: center; gap: 18px; }20  .header {21    height: 120px;22    display: flex; align-items: center; justify-content: space-between;23    padding: 0 24px;24    color: #4A4A4A;25  }26  .header .left { display: flex; align-items: center; gap: 20px; }27  .header .right { display: flex; align-items: center; gap: 40px; }28  .field {29    padding: 22px 32px;30    border-top: 1px solid #E1E3E8;31    background: #F7F8FB;32  }33  .field:last-of-type { border-bottom: 1px solid #E1E3E8; }34  .field .label {35    color: #6F7780; font-size: 30px; margin-bottom: 10px;36  }37  .field .value {38    font-size: 36px; color: #1F1F1F; display: flex; align-items: center; justify-content: space-between;39  }40  .subject-input {41    font-size: 36px; color: #8A8F98;42  }43  .body-area {44    padding: 28px 32px 10px 32px;45    font-size: 40px; line-height: 1.4; color: #111;46    height: 900px; overflow: hidden;47  }48  .keyboard {49    position: absolute; left: 0; bottom: 80px;50    width: 100%; height: 950px;51    background: #F6F7FB; border-top: 1px solid #E0E3E8;52    box-sizing: border-box;53  }54  .kbd-toolbar {55    height: 110px; display: flex; align-items: center; gap: 26px; padding: 0 26px;56  }57  .tool-icon {58    width: 72px; height: 72px; border-radius: 18px;59    background: #EAEAF2; display: flex; align-items: center; justify-content: center;60    border: 1px solid #DADCE0;61  }62  .kbd-row {63    display: flex; justify-content: center; padding: 8px 20px; gap: 12px;64  }65  .key {66    width: 92px; height: 120px; border-radius: 28px;67    background: #FFFFFF; border: 1px solid #E2E3EA;68    color: #222; font-size: 44px; display: flex; align-items: center; justify-content: center;69  }70  .key.pink { background: #FFE6F1; color: #333; }71  .key.green { background: #D9F2D9; color: #154A23; }72  .key.wide { width: 150px; }73  .key.wider { width: 180px; }74  .key.space { width: 420px; font-size: 36px; color: #666; }75  .key.circle { width: 120px; height: 120px; border-radius: 60px; }76  .nav-bar {77    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);78    width: 300px; height: 12px; background: #C9CCD1; border-radius: 8px;79  }80  .icon { width: 54px; height: 54px; }81  .icon.large { width: 60px; height: 60px; }82  .kebab { width: 10px; height: 44px; display: grid; grid-template-rows: repeat(3, 1fr); row-gap: 6px; }83  .dot { width: 10px; height: 10px; background: #4A4A4A; border-radius: 50%; }84</style>85</head>86<body>87<div id="render-target">88 89  <!-- Status Bar -->90  <div class="status-bar">91    <div class="status-left">92      <span>5:17</span>93    </div>94    <div class="status-right">95      <!-- simple signal, wifi, battery placeholders -->96      <svg class="icon" viewBox="0 0 24 24">97        <path d="M2 18h4v2H2v-2zm6-4h4v6H8v-6zm6-6h4v12h-4V8z" fill="#5F6368"/>98      </svg>99      <svg class="icon" viewBox="0 0 24 24">100        <path d="M2 8c5-5 15-5 20 0l-2 2c-4-4-12-4-16 0L2 8zm4 4c3-3 9-3 12 0l-2 2c-2-2-6-2-8 0l-2-2zm4 4c1-1 3-1 4 0l-2 2-2-2z" fill="#5F6368"/>101      </svg>102      <svg class="icon" viewBox="0 0 24 24">103        <path d="M6 20h12l1-10H5l1 10zm5-15h2v3h-2V5z" fill="#5F6368"/>104      </svg>105    </div>106  </div>107 108  <!-- Compose Header -->109  <div class="header">110    <div class="left">111      <svg class="large icon" viewBox="0 0 24 24">112        <path d="M15 6l-6 6 6 6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>113      </svg>114    </div>115    <div class="right">116      <!-- paperclip -->117      <svg class="large icon" viewBox="0 0 24 24">118        <path d="M7 13l7-7a4 4 0 015 5l-8 8a5 5 0 01-7-7l8-8" fill="none" stroke="#4A4A4A" stroke-width="2" stroke-linecap="round"/>119      </svg>120      <!-- send -->121      <svg class="large icon" viewBox="0 0 24 24">122        <path d="M3 20l18-8L3 4l4 6 8 2-8 2-4 6z" fill="#4A4A4A"/>123      </svg>124      <!-- kebab -->125      <div class="kebab">126        <div class="dot"></div>127        <div class="dot"></div>128        <div class="dot"></div>129      </div>130    </div>131  </div>132 133  <!-- Fields -->134  <div class="field">135    <div class="label">From</div>136    <div class="value">137      <span>natalie.larson1998@gmail.com</span>138      <svg class="icon" viewBox="0 0 24 24">139        <path d="M6 9l6 6 6-6" fill="none" stroke="#6F7780" stroke-width="2" stroke-linecap="round"/>140      </svg>141    </div>142  </div>143  <div class="field">144    <div class="label">To</div>145    <div class="value">146      <span style="color:#9AA0A6"> </span>147      <svg class="icon" viewBox="0 0 24 24">148        <path d="M6 9l6 6 6-6" fill="none" stroke="#6F7780" stroke-width="2" stroke-linecap="round"/>149      </svg>150    </div>151  </div>152  <div class="field">153    <div class="label">Subject</div>154    <div class="subject-input">Subject</div>155  </div>156 157  <!-- Message Body -->158  <div class="body-area">159    <p>Oh wow, look at this deal I found! I think you should lock it down before it’s gone.</p>160    <p>Book now with Omio!161    https://www.omio.com/app/search-frontend/journey/train/1410180531/E71BB7DE81A5D420287DB702079049B67/-1598870492550613873?locale=en&utm_source=share&utm_medium=ticket-config-page</p>162  </div>163 164  <!-- Keyboard -->165  <div class="keyboard">166    <div class="kbd-toolbar">167      <div class="tool-icon">168        <svg class="icon" viewBox="0 0 24 24"><path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z" fill="#6E6E80"/></svg>169      </div>170      <div class="tool-icon">171        <svg class="icon" viewBox="0 0 24 24"><path d="M12 15c3 0 6-2 6-5s-3-5-6-5-6 2-6 5 3 5 6 5zm0 2c-4 0-8 2-8 5v1h16v-1c0-3-4-5-8-5z" fill="#6E6E80"/></svg>172      </div>173      <div class="tool-icon">174        <svg class="icon" viewBox="0 0 24 24"><path d="M4 4h16v4H4V4zm0 6h10v4H4v-4zm0 6h16v4H4v-4z" fill="#6E6E80"/></svg>175      </div>176      <div class="tool-icon">177        <svg class="icon" viewBox="0 0 24 24"><path d="M3 20l18-8L3 4v6l10 2-10 2v6z" fill="#6E6E80"/></svg>178      </div>179      <div class="tool-icon">180        <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#6E6E80"/></svg>181      </div>182      <div class="tool-icon">183        <svg class="icon" viewBox="0 0 24 24"><path d="M5 8a7 7 0 0014 0V5h-2v3a5 5 0 11-10 0V5H5v3zm7 9v4h-2v-4h2z" fill="#6E6E80"/></svg>184      </div>185    </div>186 187    <div class="kbd-row">188      <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>189      <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>190    </div>191    <div class="kbd-row">192      <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>193      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>194    </div>195    <div class="kbd-row">196      <div class="key pink wider">197        <svg class="icon" viewBox="0 0 24 24"><path d="M6 18l6-12 6 12" fill="none" stroke="#333" stroke-width="2"/></svg>198      </div>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><div class="key">n</div><div class="key">m</div>200      <div class="key pink wider">201        <svg class="icon" viewBox="0 0 24 24"><path d="M5 6h10l-4 4 4 4H5V6z" fill="#333"/></svg>202      </div>203    </div>204    <div class="kbd-row">205      <div class="key pink circle">?123</div>206      <div class="key pink">@</div>207      <div class="key">208        <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="5" fill="#222"/></svg>209      </div>210      <div class="key space">space</div>211      <div class="key pink">.</div>212      <div class="key green wide">213        <svg class="icon" viewBox="0 0 24 24"><path d="M5 12h12l-5 5v-4H5v-2h7V7l5 5z" fill="#154A23"/></svg>214      </div>215    </div>216  </div>217 218  <div class="nav-bar"></div>219</div>220</body>221</html>