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>Compose Email UI Mock</title>7<style>8  :root{9    --bg:#0f1b1a;10    --bg-2:#122221;11    --line:#1e2c2c;12    --text:#e6eaea;13    --muted:#8aa1a0;14    --accent:#9bd1cd;15    --chip:#1c2b2a;16    --key:#232a2a;17    --key-muted:#2b3333;18    --teal:#9ac7c4;19  }20  html, body { margin:0; padding:0; background: transparent; }21  #render-target{22    width:1080px; height:2400px;23    position:relative; overflow:hidden;24    background:var(--bg);25    font-family: Arial, Helvetica, sans-serif;26    color:var(--text);27    box-sizing: border-box;28  }29  /* Status bar */30  .statusbar{31    position:absolute; left:0; top:0; width:100%; height:100px;32    padding:0 28px;33    display:flex; align-items:center; justify-content:space-between;34    font-size:38px; color:#fff;35  }36  .status-icons{ display:flex; align-items:center; gap:20px; }37  .dot{ width:10px; height:10px; background:#fff; border-radius:50%; opacity:.8; }38  .sb-icon{ width:34px; height:34px; opacity:.9; }39  .sb-battery{40    width:54px; height:26px; border:3px solid #fff; border-radius:4px; position:relative;41  }42  .sb-battery::after{43    content:''; position:absolute; right:-8px; top:6px; width:6px; height:12px; background:#fff; border-radius:2px;44  }45  .sb-battery .level{46    position:absolute; left:3px; top:3px; height:16px; width:34px; background:#fff;47  }48 49  /* Top app bar */50  .appbar{51    position:absolute; top:100px; left:0; width:100%; height:140px;52    display:flex; align-items:center; padding:0 20px 0 12px; box-sizing:border-box;53  }54  .appbar .left{55    display:flex; align-items:center; gap:18px; flex:1;56  }57  .appbar .right{58    display:flex; align-items:center; gap:32px;59  }60  .icon-btn svg{ width:56px; height:56px; fill:#cfe5e3; opacity:.9; }61  .icon-btn.small svg{ width:50px; height:50px; }62  .divider{ position:absolute; left:0; right:0; top:240px; height:1px; background:var(--line); }63 64  /* Fields area */65  .fields{ position:absolute; top:241px; left:0; width:100%; }66  .row{67    display:flex; align-items:center; gap:20px;68    padding:24px 28px; height:100px; box-sizing:border-box;69    border-bottom:1px solid var(--line);70    font-size:34px; color:var(--text);71  }72  .label{ width:130px; color:var(--muted); }73  .value{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }74  .dropdown{75    width:24px; height:24px; border-left:8px solid transparent; border-right:8px solid transparent;76    border-top:12px solid var(--muted); opacity:.9; margin-left:8px;77  }78  .placeholder{ color:var(--muted); }79  .body{80    padding:32px 28px; font-size:40px; line-height:1.4; min-height:680px; color:#e9f3f2;81  }82 83  /* Keyboard */84  #keyboard{85    position:absolute; left:0; bottom:70px; width:100%; height:860px;86    background:var(--bg-2); border-top:1px solid var(--line);87    box-shadow:0 -8px 24px rgba(0,0,0,.35);88  }89  .kb-top{90    height:110px; display:flex; align-items:center; padding:0 28px; gap:28px; color:#c8d6d5; font-size:34px;91  }92  .kb-chip{93    background:var(--chip); border-radius:16px; padding:16px 20px; display:flex; align-items:center; gap:12px;94    border:1px solid #223232;95  }96  .kb-row{ display:flex; gap:14px; padding:18px 18px; }97  .key{98    flex:1; height:124px; background:var(--key); border-radius:22px; display:flex; align-items:center; justify-content:center;99    color:#e7efee; font-size:44px; border:1px solid #273434;100    user-select:none;101  }102  .key.small{ flex:0 0 84px; }103  .key.mid{ flex:0 0 96px; }104  .key.wide{ flex:1.6; }105  .key.extra-wide{ flex:4.4; background:var(--key-muted); color:#cfd9d8; }106  .key.action{ background:#a6cfcf; color:#0e2020; font-weight:bold; }107  .key.circle{ border-radius:999px; }108  .kb-row.center{ padding-left:80px; padding-right:80px; }109  .kb-row.offset{ padding-left:120px; padding-right:120px; }110 111  /* Gesture bar */112  .gesture{113    position:absolute; left:50%; transform:translateX(-50%);114    bottom:18px; width:260px; height:10px; background:#e6e6e6; border-radius:8px; opacity:.9;115  }116</style>117</head>118<body>119<div id="render-target">120  <!-- Status bar -->121  <div class="statusbar">122    <div class="time">6:19</div>123    <div class="status-icons">124      <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>125      <svg class="sb-icon" viewBox="0 0 24 24">126        <path fill="#fff" d="M2 18h20L12 6 2 18z"/>127      </svg>128      <svg class="sb-icon" viewBox="0 0 24 24">129        <path fill="#fff" d="M12 2a7 7 0 0 0-7 7v4H3l3.5 5L10 13H8V9a4 4 0 1 1 8 0v4h-2l3.5 5L21 13h-2V9a7 7 0 0 0-7-7z"/>130      </svg>131      <div class="sb-battery"><div class="level"></div></div>132    </div>133  </div>134 135  <!-- App bar -->136  <div class="appbar">137    <div class="left">138      <div class="icon-btn">139        <svg viewBox="0 0 24 24"><path d="M15.5 3.5 7 12l8.5 8.5-1.4 1.4L4.2 12l9.9-9.9 1.4 1.4z"/></svg>140      </div>141    </div>142    <div class="right">143      <div class="icon-btn small" title="Attach">144        <svg viewBox="0 0 24 24"><path d="M7 12.5V6.8a5.2 5.2 0 1 1 10.4 0v7.7a3.4 3.4 0 1 1-6.8 0V7.5h1.8v7c0 1 .6 1.6 1.6 1.6s1.6-.6 1.6-1.6V6.8a3.4 3.4 0 1 0-6.8 0v5.7H7z"/></svg>145      </div>146      <div class="icon-btn small" title="Send">147        <svg viewBox="0 0 24 24"><path d="M2 21 23 12 2 3v7l15 2-15 2v7z"/></svg>148      </div>149      <div class="icon-btn small" title="More">150        <svg viewBox="0 0 24 24"><path d="M12 5a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 9a2 2 0 1 0 .001-4.001A2 2 0 0 0 12 14zm0 9a2 2 0 1 0 .001-4.001A2 2 0 0 0 12 23z"/></svg>151      </div>152    </div>153    <div class="divider"></div>154  </div>155 156  <!-- Fields -->157  <div class="fields">158    <div class="row">159      <div class="label">From</div>160      <div class="value">maria.rossi199309@gmail.com</div>161      <div class="dropdown" title="Account selector"></div>162    </div>163    <div class="row">164      <div class="label">To</div>165      <div class="value placeholder"> </div>166      <div class="dropdown"></div>167    </div>168    <div class="row">169      <div class="label">Subject</div>170      <div class="value placeholder">Subject</div>171    </div>172    <div class="body">173      https://www.kitchenstories.com/en/recipes/classic-tiramisu174    </div>175  </div>176 177  <!-- Keyboard -->178  <div id="keyboard">179    <div class="kb-top">180      <div class="kb-chip">▦</div>181      <div class="kb-chip">☺</div>182      <div class="kb-chip">GIF</div>183      <div class="kb-chip">G⇄</div>184      <div class="kb-chip">⚙</div>185      <div class="kb-chip">🎨</div>186      <div class="kb-chip">🎤</div>187    </div>188 189    <div class="kb-row center">190      <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>191      <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>192    </div>193    <div class="kb-row offset">194      <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>195      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>196    </div>197    <div class="kb-row offset" style="padding-left:170px; padding-right:170px;">198      <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>199      <div class="key">n</div><div class="key">m</div>200      <div class="key mid">⌫</div>201    </div>202    <div class="kb-row" style="padding:18px 20px;">203      <div class="key wide" style="max-width:210px; background:#93b6b3; color:#0b1a19; font-weight:bold;">?123</div>204      <div class="key mid">@</div>205      <div class="key mid">☺</div>206      <div class="key extra-wide">space</div>207      <div class="key mid">.</div>208      <div class="key" style="flex:0 0 110px; background:#9fd4d0; color:#0d1f1e; border-radius:50px;">➜</div>209    </div>210  </div>211 212  <div class="gesture"></div>213</div>214</body>215</html>