GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Compose - Dark UI</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; position: relative; overflow: hidden;10    background: #121212; color: #EDEDED;11  }12  .status-bar {13    height: 100px; padding: 0 36px; display: flex; align-items: center; justify-content: space-between;14    font-size: 38px; color: #FAFAFA;15  }16  .status-left { display: flex; align-items: center; gap: 24px; }17  .status-right { display: flex; align-items: center; gap: 24px; }18  .dot { width: 14px; height: 14px; background: #EDEDED; border-radius: 50%; opacity: 0.9; }19  .ghosts { display: flex; gap: 12px; }20  .app-bar {21    height: 140px; display: flex; align-items: center; justify-content: space-between;22    padding: 0 24px 0 24px; border-bottom: 1px solid #2A2A2A;23  }24  .app-left { display: flex; align-items: center; gap: 24px; }25  .app-title { font-size: 54px; font-weight: 500; }26  .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }27  .icon { width: 48px; height: 48px; }28  .teal { fill: #3AD2C8; stroke: #3AD2C8; }29  .from-row, .to-row {30    padding: 24px; display: flex; align-items: center; gap: 18px; font-size: 36px;31    border-bottom: 1px solid #2A2A2A;32  }33  .label { color: #B0B0B0; min-width: 100px; }34  .from-email { color: #EDEDED; font-size: 38px; }35  .caret {36    width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; margin-left: 10px;37  }38  .chip {39    display: inline-flex; align-items: center; gap: 18px; border: 1px solid #4C4C4C; border-radius: 44px;40    padding: 12px 22px 12px 16px; background: #1B1B1B; color: #EDEDED; font-size: 38px;41  }42  .avatar {43    width: 60px; height: 60px; border-radius: 50%; background: #E0E0E0; border: 1px solid #BDBDBD;44    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px;45    flex-shrink: 0;46  }47  .compose-area { padding: 18px 24px 0 24px; }48  .subject {49    padding: 32px 0; font-size: 40px; border-bottom: 1px solid #2A2A2A; color: #EDEDED;50  }51  .body {52    padding: 28px 0 0 0; font-size: 40px; line-height: 1.5; color: #E0E0E0;53    min-height: 780px; position: relative;54  }55  .cursor {56    position: absolute; left: 16px; top: 18px; width: 3px; height: 54px; background: #47D0C7; border-radius: 1px;57  }58  .keyboard {59    position: absolute; left: 0; bottom: 84px; width: 100%; height: 860px; background: #1A1A1A; border-top: 1px solid #2A2A2A;60    display: flex; flex-direction: column; padding: 16px 22px;61  }62  .kb-tools { display: flex; align-items: center; gap: 32px; padding: 12px 0 22px; }63  .kb-tool { width: 66px; height: 66px; border-radius: 20px; background: #242424; display: flex; align-items: center; justify-content: center; }64  .keys { flex: 1; display: grid; grid-template-rows: repeat(4, 1fr); gap: 22px; }65  .row { display: grid; gap: 16px; }66  .row1 { grid-template-columns: repeat(10, 1fr); }67  .row2 { grid-template-columns: repeat(9, 1fr); }68  .row3 { grid-template-columns: 1.2fr repeat(7, 1fr) 1.2fr; }69  .row4 { grid-template-columns: 1.3fr 1fr 1fr 3.6fr 1fr 1.3fr; }70  .key {71    background: #2A2A2A; border-radius: 16px; display: flex; align-items: center; justify-content: center;72    color: #FAFAFA; font-size: 42px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);73  }74  .key.secondary { background: #242424; color: #CFCFCF; }75  .space { justify-content: flex-start; padding-left: 24px; color: #C8C8C8; font-size: 32px; }76  .mic { background: #3AD2C8; color: #0A0A0A; font-weight: 600; }77  .gesture-bar {78    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);79    width: 360px; height: 12px; background: #EDEDED; border-radius: 8px; opacity: 0.85;80  }81  .divider { height: 1px; background: #2A2A2A; }82</style>83</head>84<body>85<div id="render-target">86 87  <!-- Status Bar -->88  <div class="status-bar">89    <div class="status-left">90      <div style="font-weight: 600;">6:13</div>91      <div class="ghosts">92        <div class="dot"></div>93        <div class="dot"></div>94        <div class="dot"></div>95        <div class="dot"></div>96        <div class="dot" style="opacity:.6;"></div>97      </div>98    </div>99    <div class="status-right">100      <!-- WiFi -->101      <svg class="icon" viewBox="0 0 24 24" fill="#FFFFFF" opacity="0.9">102        <path d="M12 18.5c.7 0 1.3.6 1.3 1.3s-.6 1.2-1.3 1.2-1.3-.5-1.3-1.2.6-1.3 1.3-1.3z"/>103        <path d="M3.5 10.7c2.4-2.2 5.2-3.3 8.5-3.3s6.1 1.1 8.5 3.3l-1.5 1.7c-2.1-1.9-4.7-2.8-7-2.8s-4.9.9-7 2.8l-1.5-1.7z"/>104        <path d="M6.6 13.6c1.7-1.4 3.7-2.1 5.9-2.1s4.2.7 5.9 2.1l-1.4 1.6c-1.4-1.1-3.1-1.7-4.5-1.7s-3.1.6-4.5 1.7l-1.4-1.6z"/>105      </svg>106      <!-- Battery -->107      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2">108        <rect x="2" y="6" width="16" height="12" rx="2" />109        <rect x="20" y="9" width="2" height="6" />110        <rect x="4" y="8" width="12" height="8" fill="#FFFFFF"/>111      </svg>112    </div>113  </div>114 115  <!-- App Bar -->116  <div class="app-bar">117    <div class="app-left">118      <!-- Back -->119      <div class="icon-btn">120        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">121          <path d="M15 6 L9 12 L15 18"/>122        </svg>123      </div>124      <div class="app-title">Compose</div>125    </div>126    <div style="display:flex; align-items:center; gap: 10px;">127      <!-- Attach -->128      <div class="icon-btn">129        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#CFCFCF" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">130          <path d="M7 13l7-7a4 4 0 1 1 5.7 5.7l-8.5 8.5a6 6 0 0 1-8.5-8.5l7.3-7.3"/>131        </svg>132      </div>133      <!-- Send -->134      <div class="icon-btn">135        <svg class="icon teal" viewBox="0 0 24 24">136          <path d="M3 20 L21 12 L3 4 L6 11 L14 12 L6 13 Z"/>137        </svg>138      </div>139      <!-- Menu -->140      <div class="icon-btn">141        <svg class="icon" viewBox="0 0 24 24" fill="#CFCFCF">142          <circle cx="12" cy="5" r="2.2"/>143          <circle cx="12" cy="12" r="2.2"/>144          <circle cx="12" cy="19" r="2.2"/>145        </svg>146      </div>147    </div>148  </div>149 150  <!-- From Row -->151  <div class="from-row">152    <div class="label">From</div>153    <div class="from-email">maria.rossi199309@gmail.com</div>154    <div class="caret">155      <svg viewBox="0 0 24 24" class="icon" fill="#9E9E9E">156        <path d="M6 9l6 6 6-6z"/>157      </svg>158    </div>159  </div>160 161  <!-- To Row -->162  <div class="to-row">163    <div class="label">To</div>164    <div class="chip">165      <div class="avatar">IMG</div>166      <div>janedbwpersonaltest@gmail.com</div>167      <svg viewBox="0 0 24 24" width="36" height="36" fill="#9E9E9E" style="margin-left:6px;">168        <path d="M6 9l6 6 6-6z"/>169      </svg>170    </div>171  </div>172 173  <!-- Compose Area -->174  <div class="compose-area">175    <div class="divider"></div>176    <div class="subject">Weather&Radar - know your weather</div>177    <div class="body">178      <div class="cursor"></div>179      Weather&Radar - know your weather180      <br>181      https://app.weatherandradar.com/U13Q/enUSShare182    </div>183  </div>184 185  <!-- Keyboard -->186  <div class="keyboard">187    <div class="kb-tools">188      <div class="kb-tool">189        <svg viewBox="0 0 24 24" width="40" height="40" fill="#CFCFCF">190          <circle cx="12" cy="8" r="4"/><path d="M4 20c1.7-3 4.5-4 8-4s6.3 1 8 4" stroke="#CFCFCF" stroke-width="2" fill="none"/>191        </svg>192      </div>193      <div class="kb-tool"><span style="color:#CFCFCF; font-size:28px;">GIF</span></div>194      <div class="kb-tool">195        <svg viewBox="0 0 24 24" width="40" height="40" fill="#CFCFCF">196          <path d="M12 3l4 8-4 2-4-2 4-8zm-7 18h14v-2H5v2z"/>197        </svg>198      </div>199      <div class="kb-tool">200        <svg viewBox="0 0 24 24" width="40" height="40" fill="#CFCFCF">201          <path d="M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm1 13h-2v-2h2v2zm0-4h-2V6h2v6z"/>202        </svg>203      </div>204      <div class="kb-tool">205        <svg viewBox="0 0 24 24" width="40" height="40" fill="#CFCFCF">206          <circle cx="12" cy="12" r="10" fill="none" stroke="#CFCFCF" stroke-width="2"/>207          <circle cx="12" cy="12" r="5"/>208        </svg>209      </div>210    </div>211    <div class="keys">212      <div class="row row1">213        <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>214        <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>215      </div>216      <div class="row row2">217        <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>218        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>219      </div>220      <div class="row row3">221        <div class="key secondary">⇧</div>222        <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>223        <div class="key secondary">224          <svg viewBox="0 0 24 24" width="36" height="36" fill="#CFCFCF">225            <path d="M9 7l8 5-8 5V7z"/>226          </svg>227        </div>228      </div>229      <div class="row row4">230        <div class="key secondary">?123</div>231        <div class="key secondary">@</div>232        <div class="key secondary">☺</div>233        <div class="key space">space</div>234        <div class="key secondary">.</div>235        <div class="key mic">→</div>236      </div>237    </div>238  </div>239 240  <!-- Gesture Bar -->241  <div class="gesture-bar"></div>242</div>243</body>244</html>