GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>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: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #121212; color: #fff;12  }13  .status-bar {14    height: 120px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; color: #eaeaea;15    font-size: 36px;16  }17  .status-right { display: flex; align-items: center; gap: 22px; }18  .toolbar {19    height: 160px; display: flex; align-items: center; padding: 0 24px; border-bottom: 1px solid #1e1e1e;20  }21  .back-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; margin-right: 16px; }22  .toolbar-title { font-size: 44px; font-weight: 600; flex: 1; }23  .tb-icons { display: flex; align-items: center; gap: 28px; }24  .tb-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }25  .field { padding: 24px; border-bottom: 1px solid #1e1e1e; }26  .label { color: #9e9e9e; font-size: 28px; margin-bottom: 10px; }27  .value { color: #fff; font-size: 34px; }28  .to-row { display: flex; align-items: center; gap: 12px; }29  .caret { width: 40px; height: 40px; margin-left: auto; }30  .suggestion { display: flex; align-items: center; gap: 24px; padding: 26px 24px; border-bottom: 1px solid #1e1e1e; }31  .avatar {32    width: 96px; height: 96px; border-radius: 50%; background: #7b4ef6; display: flex; align-items: center; justify-content: center;33    font-size: 46px; font-weight: 700;34  }35  .suggest-text { display: flex; flex-direction: column; }36  .suggest-text .main { font-size: 34px; }37  .suggest-text .sub { font-size: 26px; color: #bdbdbd; margin-top: 6px; }38  .message-area { height: 700px; }39  /* Keyboard */40  .keyboard {41    position: absolute; bottom: 40px; left: 0; width: 100%; background: #1a1a1a; border-top: 1px solid #2a2a2a;42    padding-bottom: 24px;43  }44  .kb-actions {45    height: 90px; display: flex; align-items: center; gap: 48px; padding: 0 28px; color: #cfcfcf;46  }47  .kb-icon { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; }48  .kb-row { display: flex; gap: 12px; padding: 18px 20px; }49  .key {50    background: #2a2a2a; color: #eaeaea; border-radius: 16px; font-size: 36px; height: 120px;51    display: flex; align-items: center; justify-content: center; flex: 1;52  }53  .key.small { flex: 0 0 84px; }54  .key.medium { flex: 0 0 120px; }55  .key.large { flex: 0 0 180px; }56  .key.shift { flex: 0 0 150px; }57  .key.back { flex: 0 0 150px; }58  .space { flex: 1; height: 120px; background: #2a2a2a; border-radius: 16px; }59  .round-btn {60    height: 120px; width: 120px; border-radius: 60px; background: #bcd3a8; color: #1a1a1a; font-weight: 700; display: flex; align-items: center; justify-content: center;61    font-size: 32px;62  }63  .round-btn.green { background: #b7f27f; }64  .gesture-bar {65    position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);66    width: 220px; height: 12px; background: #eaeaea; border-radius: 12px; opacity: 0.9;67  }68  /* Simple helper for inline SVGS */69  svg { display: block; }70</style>71</head>72<body>73<div id="render-target">74 75  <!-- Status Bar -->76  <div class="status-bar">77    <div>12:20</div>78    <div class="status-right">79      <!-- Vibrate icon -->80      <svg width="36" height="36" viewBox="0 0 24 24" fill="#cfcfcf"><path d="M8 4h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm10 2.5 2 3.5-2 3.5M4 6.5 2 10l2 3.5"/></svg>81      <!-- WiFi -->82      <svg width="36" height="36" viewBox="0 0 24 24" fill="#cfcfcf"><path d="M12 18.5 9.8 16.3a3 3 0 0 1 4.4 0zm-5-4.6a7 7 0 0 1 10 0l1.4-1.4a9 9 0 0 0-12.8 0zM1.8 9.2A13 13 0 0 1 22.2 9.2l1.4-1.4A15 15 0 0 0 .4 7.8z"/></svg>83      <!-- Battery -->84      <svg width="72" height="36" viewBox="0 0 36 18"><rect x="2" y="3" width="28" height="12" rx="2" fill="none" stroke="#cfcfcf" stroke-width="2"/><rect x="4" y="5" width="22" height="8" rx="1" fill="#cfcfcf"/><rect x="30" y="6" width="4" height="6" rx="1" fill="#cfcfcf"/></svg>85      <div style="font-size:30px;">100%</div>86    </div>87  </div>88 89  <!-- Toolbar -->90  <div class="toolbar">91    <div class="back-btn">92      <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff"><path d="M15 18 9 12l6-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>93    </div>94    <div class="toolbar-title">Compose</div>95    <div class="tb-icons">96      <!-- Attach -->97      <div class="tb-icon">98        <svg width="36" height="36" viewBox="0 0 24 24" fill="none"><path d="M7 13.5 14.5 6a3.5 3.5 0 1 1 5 5L9.5 21a5 5 0 1 1-7-7L12 4" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>99      </div>100      <!-- Send -->101      <div class="tb-icon">102        <svg width="40" height="40" viewBox="0 0 24 24" fill="none"><path d="M3 12l18-9-5 9 5 9-18-9z" fill="#cfcfcf"/></svg>103      </div>104      <!-- More -->105      <div class="tb-icon">106        <svg width="30" height="30" viewBox="0 0 24 24" fill="#cfcfcf"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>107      </div>108    </div>109  </div>110 111  <!-- From -->112  <div class="field">113    <div class="label">From</div>114    <div class="value">dbwscratch.test.id10@gmail.com</div>115  </div>116 117  <!-- To -->118  <div class="field">119    <div class="label">To</div>120    <div class="to-row">121      <div class="value" style="flex:1;">dbwscratch.test.id8@gmail.com</div>122      <div class="caret">123        <svg width="40" height="40" viewBox="0 0 24 24" fill="#cfcfcf"><path d="M6 9l6 6 6-6" /></svg>124      </div>125    </div>126  </div>127 128  <!-- Contact suggestion -->129  <div class="suggestion">130    <div class="avatar">d</div>131    <div class="suggest-text">132      <div class="main">dbwscratch.test.id8@gmail.com</div>133      <div class="sub">dbwscratch.test.id8@gmail.com</div>134    </div>135  </div>136 137  <!-- Blank message area -->138  <div class="message-area"></div>139 140  <!-- Keyboard -->141  <div class="keyboard">142    <div class="kb-actions">143      <div class="kb-icon">144        <svg width="36" height="36" viewBox="0 0 24 24" fill="#cfcfcf"><path d="M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z"/></svg>145      </div>146      <div class="kb-icon">147        <svg width="36" height="36" viewBox="0 0 24 24" fill="#cfcfcf"><path d="M12 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm-8 16c0-4 4-6 8-6s8 2 8 6" /></svg>148      </div>149      <div style="color:#cfcfcf;font-size:32px;">GIF</div>150      <div class="kb-icon">151        <svg width="36" height="36" viewBox="0 0 24 24" fill="#cfcfcf"><path d="M12 3l9 7-9 7-9-7z"/></svg>152      </div>153      <div class="kb-icon">154        <svg width="36" height="36" viewBox="0 0 24 24" fill="#cfcfcf"><circle cx="12" cy="12" r="10" stroke="#cfcfcf" stroke-width="2" fill="none"/><path d="M4 12h16M12 4a16 16 0 0 1 0 16" stroke="#cfcfcf" stroke-width="2"/></svg>155      </div>156      <div class="kb-icon">157        <svg width="36" height="36" viewBox="0 0 24 24" fill="#cfcfcf"><path d="M12 3a4 4 0 0 0-4 4v5a4 4 0 0 0 8 0V7a4 4 0 0 0-4-4zm-6 14h12v3H6z"/></svg>158      </div>159    </div>160 161    <!-- Row 1: qwertyuiop -->162    <div class="kb-row">163      <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>164      <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>165    </div>166 167    <!-- Row 2: asdfghjkl -->168    <div class="kb-row" style="padding: 18px 60px;">169      <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>170      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>171    </div>172 173    <!-- Row 3: shift zxcvbnm backspace -->174    <div class="kb-row" style="padding: 18px 20px;">175      <div class="key shift">⇧</div>176      <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>177      <div class="key back">178        <svg width="44" height="44" viewBox="0 0 24 24" fill="none"><path d="M3 12l5-5h11v10H8z" stroke="#eaeaea" stroke-width="2"/></svg>179      </div>180    </div>181 182    <!-- Bottom row: ?123, @, emoji, space, ., enter -->183    <div class="kb-row" style="padding: 18px 20px; align-items: center;">184      <div class="round-btn">?123</div>185      <div class="key medium">@</div>186      <div class="key medium">☺</div>187      <div class="space"></div>188      <div class="key medium">.</div>189      <div class="round-btn green">190        <svg width="40" height="40" viewBox="0 0 24 24" fill="#1a1a1a"><path d="M3 12l18-9-7 9 7 9-18-9z"/></svg>191      </div>192    </div>193  </div>194 195  <!-- Gesture bar -->196  <div class="gesture-bar"></div>197</div>198</body>199</html>