GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mobile Compose UI - Dark</title>6<meta name="viewport" content="width=1080, initial-scale=1">7<style>8  :root{9    --bg:#121416;10    --panel:#15181c;11    --panel-2:#1b1f24;12    --line:#2a2f35;13    --text:#e9eef1;14    --sub:#b0b7be;15    --muted:#8e99a4;16    --accent:#7bb5ff;17    --chip:#20252b;18    --key:#2a2f36;19    --key-d:#262a31;20  }21  html,body{margin:0;padding:0;background:transparent;}22  #render-target{23    width:1080px;height:2400px; position:relative; overflow:hidden;24    background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;25  }26  /* Status bar */27  .status-bar{28    height:90px; padding:0 28px; display:flex; align-items:center; justify-content:space-between; color:#dfe5ea;29  }30  .status-left{display:flex; align-items:center; gap:12px;}31  .time{font-weight:600; font-size:34px; letter-spacing:0.5px;}32  .status-right{display:flex; align-items:center; gap:18px;}33  .status-icon svg{width:40px; height:40px; fill:#dfe5ea;}34  /* Top actions */35  .top-actions{36    height:112px; display:flex; align-items:center; padding:0 20px 0 8px; border-bottom:1px solid var(--line);37  }38  .icon-btn{width:92px; display:flex; align-items:center; justify-content:center;}39  .icon-btn svg{width:46px; height:46px; fill:#c9d1d8;}40  .icon-btn.send svg{fill:var(--accent);}41  .title-space{flex:1;}42  /* Composer */43  .composer{padding:18px 28px 0 28px;}44  .from-line{font-size:26px; color:var(--sub); margin:8px 0 16px 78px;}45  .from-line .email{color:#e2e7ec;}46  .to-line{display:flex; align-items:center; gap:18px; margin:8px 0 12px;}47  .to-label{color:var(--sub); font-size:28px; min-width:70px;}48  .chip{49    display:inline-flex; align-items:center; gap:16px; padding:10px 18px; border:2px solid #4b5560;50    background:var(--chip); border-radius:32px; color:#dde3e8; max-width:880px;51  }52  .avatar{53    width:56px; height:56px; border-radius:50%; background:#ef4f87; display:flex; align-items:center; justify-content:center;54    color:white; font-weight:700; text-transform:lowercase;55  }56  .chip .email{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:28px;}57  .chip svg{width:32px; height:32px; fill:#9aa4ae;}58  .divider{height:2px; background:var(--line); margin:18px 0;}59  .subject{font-size:34px; color:#d8dee3; margin:10px 0 18px; font-weight:600;}60  .body{font-size:30px; line-height:1.6; color:#e8edf2; white-space:pre-line;}61  /* Keyboard */62  .keyboard{63    position:absolute; left:0; right:0; bottom:90px; height:760px; background:var(--panel-2); border-top:1px solid var(--line);64    display:flex; flex-direction:column; padding:10px 16px 16px;65  }66  .kb-toolbar{height:86px; display:flex; align-items:center; gap:24px; padding:0 6px; color:#c7cdd3;}67  .tool{display:flex; align-items:center; justify-content:center; width:72px; height:72px; background:var(--panel); border-radius:16px; border:1px solid var(--line); font-size:22px;}68  .keys{flex:1; display:flex; flex-direction:column; justify-content:space-between; padding-top:6px;}69  .row{display:flex; justify-content:center; gap:14px;}70  .key{71    flex:1; height:112px; background:var(--key); border-radius:20px; display:flex; align-items:center; justify-content:center; color:#e6ebf0;72    font-size:34px; border:1px solid #3a4047;73  }74  .row.ten .key{flex:1;}75  .row.nine .spacer{flex:0.5;}76  .key.small{flex:0.9;}77  .key.wide{flex:4;}78  .key.mid{flex:1.3;}79  .key.accent{background:#9aa4b9; color:#0b0e12;}80  .key.dark{background:var(--key-d);}81  .icon-key svg{width:44px; height:44px; fill:#e6ebf0;}82  /* Navigation bar */83  .nav-bar{position:absolute; left:0; right:0; bottom:0; height:90px; display:flex; align-items:center; justify-content:center; background:transparent;}84  .nav-pill{width:320px; height:10px; background:#9aa4b0; opacity:0.85; border-radius:10px;}85  /* subtle input cursor space */86  .typing-space{height:58px;}87</style>88</head>89<body>90<div id="render-target">91 92  <!-- Status Bar -->93  <div class="status-bar">94    <div class="status-left">95      <div class="time">9:10</div>96      <div class="status-icon" title="Cloud">97        <svg viewBox="0 0 24 24">98          <path d="M6 17h10a4 4 0 0 0 0-8 5 5 0 0 0-9.5-1.5A4 4 0 0 0 6 17z"></path>99        </svg>100      </div>101    </div>102    <div class="status-right">103      <div class="status-icon" title="Wi-Fi">104        <svg viewBox="0 0 24 24">105          <path d="M2 8a16 16 0 0 1 20 0l-1.6 1.2a14 14 0 0 0-16.8 0L2 8zm4 4a10 10 0 0 1 12 0l-1.6 1.2a8 8 0 0 0-8.8 0L6 12zm4 4a4 4 0 0 1 4 0l-2 2-2-2z"></path>106        </svg>107      </div>108      <div class="status-icon" title="Battery">109        <svg viewBox="0 0 28 24">110          <rect x="1" y="6" width="22" height="12" rx="2" fill="currentColor"></rect>111          <rect x="24" y="9" width="3" height="6" rx="1" fill="currentColor"></rect>112          <rect x="3" y="8" width="14" height="8" fill="#121416"></rect>113        </svg>114      </div>115    </div>116  </div>117 118  <!-- Top action bar -->119  <div class="top-actions">120    <div class="icon-btn" title="Back">121      <svg viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>122    </div>123    <div class="title-space"></div>124    <div class="icon-btn" title="Attach">125      <svg viewBox="0 0 24 24">126        <path d="M7 12v-5a5 5 0 0 1 10 0v8a4 4 0 0 1-8 0V9" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>127      </svg>128    </div>129    <div class="icon-btn send" title="Send">130      <svg viewBox="0 0 24 24"><path d="M3 11l18-9-7 9 7 9-18-9z"/></svg>131    </div>132    <div class="icon-btn" title="More">133      <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>134    </div>135  </div>136 137  <!-- Composer fields -->138  <div class="composer">139    <div class="from-line">From <span class="email">dbwscratch.test.id8@gmail.com</span></div>140 141    <div class="to-line">142      <div class="to-label">To</div>143      <div class="chip">144        <div class="avatar">r</div>145        <span class="email">rick.weinstein@dayrep.com</span>146        <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>147      </div>148    </div>149 150    <div class="typing-space"></div>151    <div class="divider"></div>152 153    <div class="subject">Check out this book – "The Art of War"</div>154 155    <div class="divider"></div>156 157    <div class="body">158Hi - I think you should check out this book, "The Art of War" by Sun Tzu.159 160Start reading it for free:161https://amzn.in/eGzfnSO162 163--------------164 165Read on the go for free – download Kindle for Android, iOS, PC, Mac and more166    </div>167  </div>168 169  <!-- Keyboard -->170  <div class="keyboard">171    <div class="kb-toolbar">172      <div class="tool">⌨</div>173      <div class="tool">🙂</div>174      <div class="tool">GIF</div>175      <div class="tool">⚙</div>176      <div class="tool">Gx</div>177      <div class="tool">🎨</div>178      <div class="tool">≠</div>179    </div>180 181    <div class="keys">182      <div class="row ten">183        <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>184      </div>185 186      <div class="row nine">187        <div class="spacer"></div>188        <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>189        <div class="spacer"></div>190      </div>191 192      <div class="row">193        <div class="key mid">⇧</div>194        <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>195        <div class="key mid icon-key" title="Backspace">196          <svg viewBox="0 0 24 24"><path d="M8 5h12v14H8L3 12l5-7z" fill="none" stroke="currentColor" stroke-width="2"/><path d="M14 9l4 4M18 9l-4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>197        </div>198      </div>199 200      <div class="row">201        <div class="key small accent">?123</div>202        <div class="key small">@</div>203        <div class="key small">☺</div>204        <div class="key wide dark">space</div>205        <div class="key small">.</div>206        <div class="key small icon-key" title="Enter">207          <svg viewBox="0 0 24 24"><path d="M19 7v6a2 2 0 0 1-2 2H7" fill="none" stroke="currentColor" stroke-width="2"/><path d="M10 18l-4-3 4-3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>208        </div>209      </div>210    </div>211  </div>212 213  <!-- Navigation pill -->214  <div class="nav-bar">215    <div class="nav-pill"></div>216  </div>217 218</div>219</body>220</html>