GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Email Compose - Dark UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin:0; padding:0; background:transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width:1080px; height:2400px;11    position:relative; overflow:hidden;12    background:#0E0F0E; color:#FFFFFF;13  }14 15  /* Status bar */16  .status-bar {17    position:absolute; top:0; left:0; right:0;18    height:110px; padding:0 36px;19    display:flex; align-items:center; justify-content:space-between;20    color:#EAEAEA; font-weight:500;21    font-size:46px;22  }23  .status-center { display:flex; gap:22px; align-items:center; opacity:0.8; }24  .status-right { display:flex; gap:30px; align-items:center; }25  .icon { width:48px; height:48px; fill:none; stroke:#EAEAEA; stroke-width:2.5px; }26  .wifi-icon, .battery-icon { stroke:#EAEAEA; }27  .battery-icon rect { fill:none; }28 29  /* App bar */30  .app-bar {31    position:absolute; top:110px; left:0; right:0;32    height:140px; padding:0 30px;33    display:flex; align-items:center; justify-content:space-between;34    border-bottom:1px solid #222;35  }36  .app-left, .app-right { display:flex; align-items:center; gap:40px; }37  .svg-btn { width:60px; height:60px; }38  .send-icon { fill:#CFE679; stroke:none; }39  .paperclip { stroke:#C8C8C8; }40  .kebab { stroke:#C8C8C8; }41  .back { stroke:#C8C8C8; }42 43  /* Form rows */44  .row {45    position:absolute; left:0; right:0;46    padding:26px 36px;47    display:flex; align-items:center; gap:24px;48    border-bottom:1px solid #212121;49  }50  .row .label { color:#A7A7A7; font-size:38px; min-width:120px; }51  .row .value { color:#F0F0F0; font-size:42px; flex:1; }52  .caret { width:36px; height:36px; }53  .avatar {54    width:82px; height:82px;55    background:#E0E0E0; border:1px solid #BDBDBD;56    display:flex; align-items:center; justify-content:center;57    color:#757575; font-size:22px; border-radius:41px;58  }59 60  /* Subject row */61  .subject-row .placeholder { color:#9E9E9E; font-size:42px; }62 63  /* Body area */64  .body-area {65    position:absolute; left:0; right:0;66    top:660px;67    height:900px; padding:34px 36px;68    color:#EDEDED; font-size:48px; line-height:1.4;69  }70 71  /* Keyboard */72  .keyboard {73    position:absolute; left:0; right:0; bottom:60px;74    height:780px; background:#121312; border-top:1px solid #1f1f1f;75  }76  .kb-toolbar {77    height:130px; display:flex; align-items:center; gap:54px; padding:0 30px;78    border-bottom:1px solid #1f1f1f; color:#DADADA;79  }80  .kb-tool {81    width:80px; height:80px; border-radius:18px;82    background:#1E1E1E; display:flex; align-items:center; justify-content:center;83  }84  .kb-content {85    padding:20px 18px 10px;86  }87  .kb-row { display:flex; gap:14px; justify-content:center; margin-bottom:16px; }88  .key {89    height:112px; min-width:88px; padding:0 16px;90    background:#232323; color:#F5F5F5; border-radius:16px;91    display:flex; align-items:center; justify-content:center;92    font-size:44px; box-shadow:inset 0 0 0 1px #2B2B2B;93  }94  .key.wide { min-width:140px; }95  .space { min-width:520px; }96  .accent { background:#D9E989; color:#0E0F0E; }97  .enter { min-width:140px; }98  .backspace svg { width:46px; height:46px; stroke:#F5F5F5; }99  .mic svg { width:40px; height:40px; stroke:#F5F5F5; }100 101  /* Home indicator */102  .home-indicator {103    position:absolute; left:360px; right:360px; bottom:18px;104    height:16px; background:#EDEDED; border-radius:20px; opacity:0.85;105  }106</style>107</head>108<body>109<div id="render-target">110 111  <!-- Status Bar -->112  <div class="status-bar">113    <div>7:35</div>114    <div class="status-center">115      <!-- small icons -->116      <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="#EAEAEA" fill="none"/><path d="M12 6 v6 l4 2" stroke="#EAEAEA"/></svg>117      <svg class="icon" viewBox="0 0 24 24"><path d="M3 12 h18" stroke="#EAEAEA"/></svg>118      <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="2" stroke="#EAEAEA"/></svg>119    </div>120    <div class="status-right">121      <svg class="icon wifi-icon" viewBox="0 0 24 24">122        <path d="M2 8 C8 3,16 3,22 8" />123        <path d="M5 12 C9 9,15 9,19 12" />124        <path d="M9 16 C12 14,12 14,15 16" />125        <circle cx="12" cy="19" r="1.8" fill="#EAEAEA" stroke="none"/>126      </svg>127      <svg class="icon battery-icon" viewBox="0 0 30 24">128        <rect x="2" y="5" width="22" height="14" rx="2"/>129        <rect x="25" y="9" width="3" height="6" rx="1"/>130        <rect x="4" y="7" width="16" height="10" fill="#EAEAEA" stroke="none"/>131      </svg>132    </div>133  </div>134 135  <!-- App Bar -->136  <div class="app-bar">137    <div class="app-left">138      <svg class="svg-btn back" viewBox="0 0 24 24"><path d="M15 5 L7 12 L15 19" stroke-width="2.6" fill="none"/></svg>139    </div>140    <div class="app-right">141      <svg class="svg-btn paperclip" viewBox="0 0 24 24">142        <path d="M7 13 l7 -7 a4 4 0 1 1 6 6 l-9 9 a6 6 0 0 1 -9 -9 l8 -8" stroke-width="2.2" fill="none"/>143      </svg>144      <svg class="svg-btn send-icon" viewBox="0 0 24 24">145        <path d="M3 12 L20 5 L16 12 L20 19 Z"/>146      </svg>147      <svg class="svg-btn kebab" viewBox="0 0 24 24">148        <circle cx="12" cy="5" r="2.2" fill="#C8C8C8"/>149        <circle cx="12" cy="12" r="2.2" fill="#C8C8C8"/>150        <circle cx="12" cy="19" r="2.2" fill="#C8C8C8"/>151      </svg>152    </div>153  </div>154 155  <!-- From Row -->156  <div class="row" style="top:250px;">157    <div class="label">From</div>158    <div class="value">dbwscratch.test.id1@gmail.com</div>159    <svg class="caret" viewBox="0 0 24 24"><path d="M6 9 L12 15 L18 9" stroke="#BDBDBD" stroke-width="2.4" fill="none"/></svg>160  </div>161 162  <!-- To Row -->163  <div class="row" style="top:380px;">164    <div class="label">To</div>165    <div class="avatar">[IMG: User Avatar]</div>166    <div class="value">info-hi@cookpad.com</div>167    <svg class="caret" viewBox="0 0 24 24"><path d="M6 9 L12 15 L18 9" stroke="#BDBDBD" stroke-width="2.4" fill="none"/></svg>168  </div>169 170  <!-- Subject Row -->171  <div class="row subject-row" style="top:530px;">172    <div class="label" style="min-width:180px;">Subject</div>173    <div class="placeholder">Subject</div>174  </div>175 176  <!-- Body -->177  <div class="body-area">178    Please enable the recipe review and rating in the app.179  </div>180 181  <!-- Keyboard -->182  <div class="keyboard">183    <div class="kb-toolbar">184      <div class="kb-tool"><svg class="icon" viewBox="0 0 24 24"><rect x="5" y="5" width="14" height="14" stroke="#DADADA"/></svg></div>185      <div class="kb-tool"><svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="9" r="4" stroke="#DADADA"/><path d="M5 20 a7 7 0 0 1 14 0" stroke="#DADADA"/></svg></div>186      <div class="kb-tool"><svg class="icon" viewBox="0 0 24 24"><text x="2" y="17" font-size="12" fill="#DADADA">GIF</text></svg></div>187      <div class="kb-tool"><svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="#DADADA"/><path d="M12 4 v8" stroke="#DADADA"/><path d="M8 12 h8" stroke="#DADADA"/></svg></div>188      <div class="kb-tool"><svg class="icon" viewBox="0 0 24 24"><path d="M4 18 L20 6" stroke="#DADADA"/><rect x="6" y="6" width="12" height="12" stroke="#DADADA"/></svg></div>189      <div class="kb-tool"><svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="#DADADA"/><path d="M8 15 a4 4 0 0 0 8 0" stroke="#DADADA"/><circle cx="8.5" cy="10" r="1.2" fill="#DADADA"/><circle cx="15.5" cy="10" r="1.2" fill="#DADADA"/></svg></div>190      <div class="kb-tool mic"><svg viewBox="0 0 24 24"><rect x="9" y="5" width="6" height="10" rx="3" fill="none" stroke="#F5F5F5"/><path d="M6 11 a6 6 0 0 0 12 0" fill="none" stroke="#F5F5F5"/><path d="M12 17 v3" fill="none" stroke="#F5F5F5"/></svg></div>191    </div>192 193    <div class="kb-content">194      <div class="kb-row">195        <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>196      </div>197      <div class="kb-row">198        <div class="key wide">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>199        <div class="key backspace">200          <svg viewBox="0 0 24 24"><path d="M4 12 L10 6 H20 V18 H10 Z" fill="none"/><path d="M12 9 L16 13 M16 9 L12 13" /></svg>201        </div>202      </div>203      <div class="kb-row">204        <div class="key accent wide">?123</div>205        <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>206        <div class="key">.</div>207        <div class="key accent enter">↩</div>208      </div>209      <div class="kb-row">210        <div class="key">,</div>211        <div class="key">😊</div>212        <div class="key space">space</div>213        <div class="key">.</div>214        <div class="key accent enter">↩</div>215      </div>216    </div>217  </div>218 219  <!-- Home indicator -->220  <div class="home-indicator"></div>221</div>222</body>223</html>