GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Gmail Compose - Dark</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:#121212; color:#EDEDED;11  }12  .status-bar {13    position:absolute; top:0; left:0; right:0;14    height:120px; padding:0 40px;15    display:flex; align-items:center; justify-content:space-between;16    color:#EDEDED; font-size:38px; letter-spacing:0.5px;17  }18  .status-icons { display:flex; align-items:center; gap:22px; }19  .status-dot, .status-rect {20    background:#DADADA; border-radius:6px;21  }22  .status-dot { width:18px; height:18px; }23  .status-rect { width:30px; height:26px; }24  .battery { width:40px; height:26px; border:2px solid #DADADA; border-radius:6px; position:relative; }25  .battery::after { content:''; position:absolute; right:-10px; top:7px; width:6px; height:12px; background:#DADADA; border-radius:2px; }26  /* Header */27  .compose-header {28    position:absolute; top:120px; left:0; right:0;29    height:160px; display:flex; align-items:center; justify-content:space-between;30    padding:0 32px; color:#FFFFFF;31  }32  .header-left { display:flex; align-items:center; gap:28px; }33  .title { font-size:56px; font-weight:600; }34  .header-right { display:flex; align-items:center; gap:40px; }35  .icon-btn svg { width:52px; height:52px; fill:#EDEDED; }36  /* Fields */37  .content {38    position:absolute; top:280px; left:0; right:0;39    padding:0 40px;40  }41  .field { padding:30px 0; }42  .label { color:#9E9E9E; font-size:34px; margin-bottom:8px; }43  .value { font-size:36px; color:#EDEDED; }44  .divider { height:2px; background:#2A2A2A; margin:18px 0 6px; }45  .subject { font-size:44px; color:#EDEDED; padding:28px 0; }46  .body-area { margin-top:20px; font-size:42px; line-height:1.35; color:#EDEDED; }47  .equals { letter-spacing:3px; color:#D9D9D9; }48  /* Bottom mini toolbar above keyboard */49  .mini-toolbar {50    position:absolute; left:0; right:0;51    bottom:860px; height:90px; display:flex; align-items:center; gap:28px;52    padding:0 40px;53  }54  .chip {55    height:72px; min-width:72px; border-radius:36px; background:#2B2B2B; color:#CFCFCF;56    display:flex; align-items:center; justify-content:center; padding:0 22px; font-size:32px;57    border:1px solid #3A3A3A;58  }59  /* Keyboard */60  .keyboard {61    position:absolute; left:0; right:0; bottom:0;62    height:860px; background:#1E1E1E; border-top:1px solid #2E2E2E;63    padding:24px 24px 40px;64  }65  .kb-row { display:flex; justify-content:center; gap:18px; margin-bottom:20px; }66  .key {67    background:#2C2C2C; color:#D0D0D0;68    height:120px; min-width:90px; border-radius:26px;69    display:flex; align-items:center; justify-content:center;70    font-size:44px; border:1px solid #3A3A3A;71  }72  .key.small { min-width:140px; }73  .key.space { flex:1; min-width:300px; }74  .kb-top { display:flex; justify-content:space-between; align-items:center; padding:0 10px; color:#C8C8C8; margin-bottom:20px; }75  .kb-top .circle { width:84px; height:84px; background:#2B2B2B; border-radius:42px; border:1px solid #3A3A3A; display:flex; align-items:center; justify-content:center; }76  .kb-top .circle svg { width:40px; height:40px; fill:#D0D0D0; }77</style>78</head>79<body>80<div id="render-target">81 82  <!-- Status bar -->83  <div class="status-bar">84    <div>8:12</div>85    <div class="status-icons">86      <div class="status-dot"></div>87      <div class="status-rect"></div>88      <div class="status-rect"></div>89      <div class="status-rect"></div>90      <div class="battery"></div>91    </div>92  </div>93 94  <!-- Compose header -->95  <div class="compose-header">96    <div class="header-left">97      <div class="icon-btn">98        <!-- Back arrow -->99        <svg viewBox="0 0 24 24">100          <path d="M15.5 4.5L7 12l8.5 7.5-1.8 2L3.5 12 13.7 2.5z"></path>101        </svg>102      </div>103      <div class="title">Compose</div>104    </div>105    <div class="header-right">106      <div class="icon-btn">107        <!-- Paperclip -->108        <svg viewBox="0 0 24 24">109          <path d="M17 6l-8.5 8.5a3 3 0 104.2 4.2L20 11l-1.4-1.4-7.3 7.3a1.5 1.5 0 11-2.1-2.1L15.6 8 14.2 6.6 6.1 14.7a3.5 3.5 0 105 5L21.4 9l-2.1-3z"></path>110        </svg>111      </div>112      <div class="icon-btn">113        <!-- Send (paper plane) -->114        <svg viewBox="0 0 24 24">115          <path d="M2 21l20-9L2 3l4 7 9 2-9 2z"></path>116        </svg>117      </div>118      <div class="icon-btn">119        <!-- More vertical -->120        <svg viewBox="0 0 24 24">121          <circle cx="12" cy="4" r="2"></circle>122          <circle cx="12" cy="12" r="2"></circle>123          <circle cx="12" cy="20" r="2"></circle>124        </svg>125      </div>126    </div>127  </div>128 129  <!-- Content / Fields -->130  <div class="content">131    <div class="field">132      <div class="label">From</div>133      <div class="value">dbwscratch.test.id7@gmail.com</div>134      <div class="divider"></div>135    </div>136 137    <div class="field">138      <div class="label">To</div>139      <div class="divider"></div>140    </div>141 142    <div class="subject">Reminder App</div>143 144    <div class="divider" style="margin-top:10px;"></div>145 146    <div class="body-area">147      <div class="equals">=====================</div>148      <div>Reminder</div>149      <div>in 8 days</div>150      <div class="equals">=====================</div>151 152      <div style="height:36px;"></div>153      <div>Reception</div>154 155      <div style="height:36px;"></div>156      <div>Hotel Leela</div>157    </div>158  </div>159 160  <!-- Mini toolbar above keyboard -->161  <div class="mini-toolbar">162    <div class="chip">163      <!-- back icon -->164      <svg viewBox="0 0 24 24">165        <path d="M15 18l-6-6 6-6" stroke="#CFCFCF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>166      </svg>167    </div>168    <div class="chip">⚙︎</div>169    <div class="chip">Translate</div>170    <div class="chip">🎨</div>171    <div class="chip">📋</div>172    <div class="chip">⋯</div>173    <div class="chip">⌫</div>174  </div>175 176  <!-- Keyboard -->177  <div class="keyboard">178    <div class="kb-top">179      <div class="circle">?123</div>180      <div class="circle">@</div>181      <div class="circle">☺</div>182    </div>183 184    <div class="kb-row">185      <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>186      <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>187    </div>188    <div class="kb-row">189      <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>190      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>191    </div>192    <div class="kb-row">193      <div class="key small">⇧</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>195      <div class="key">n</div><div class="key">m</div>196      <div class="key small">⌫</div>197    </div>198    <div class="kb-row">199      <div class="key small">,</div>200      <div class="key space"></div>201      <div class="key small">.</div>202      <div class="key small">↵</div>203    </div>204  </div>205 206</div>207</body>208</html>