GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8" />5<meta name="viewport" content="width=1080, initial-scale=1.0" />6<title>Compose - Dark UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #1C1B1A; border-radius: 36px; box-shadow: 0 18px 60px rgba(0,0,0,0.35);12    color: #EFEAE6;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute; top: 0; left: 0; right: 0; height: 100px;18    display: flex; align-items: center; justify-content: space-between;19    padding: 0 40px; font-size: 40px; color: #F5EEE6;20  }21  .status-icons { display: flex; align-items: center; gap: 26px; }22  .status-icons svg { width: 38px; height: 38px; fill: none; stroke: #F5EEE6; stroke-width: 3.5; }23 24  /* App bar */25  .app-bar {26    position: absolute; top: 100px; left: 0; right: 0; height: 140px;27    display: flex; align-items: center; gap: 24px; padding: 0 30px;28    border-bottom: 1px solid #292725; color: #F1EDE8;29  }30  .app-title { font-size: 64px; font-weight: 600; letter-spacing: 0.5px; }31  .app-actions { margin-left: auto; display: flex; align-items: center; gap: 36px; }32  .icon-btn svg { width: 56px; height: 56px; stroke: #EDE7E1; fill: none; stroke-width: 3.5; }33 34  /* Fields */35  .fields { position: absolute; top: 240px; left: 0; right: 0; padding: 0 30px; }36  .field-row {37    display: flex; align-items: center; gap: 18px;38    padding: 26px 0; border-bottom: 1px solid #292725;39  }40  .label { color: #B8B0A7; font-size: 38px; min-width: 120px; }41  .value { font-size: 42px; color: #F3F0EB; }42  .to-row .value { flex: 1; display: flex; align-items: center; justify-content: space-between; }43  .to-row .chev { width: 42px; height: 42px; }44  .suggestion {45    display: flex; align-items: center; gap: 26px;46    padding: 22px 0; border-bottom: 1px solid #292725;47  }48  .avatar {49    width: 92px; height: 92px; border-radius: 50%; background: #8B5CF6;50    display: flex; align-items: center; justify-content: center; color: #FFFFFF;51    font-size: 54px; font-weight: 700;52  }53  .suggestion-text { display: flex; flex-direction: column; }54  .suggestion-text .primary { font-size: 44px; color: #F3F0EB; }55  .suggestion-text .secondary { font-size: 34px; color: #AFA69C; }56 57  /* Message area */58  .message-area {59    position: absolute; top: 540px; left: 0; right: 0; bottom: 920px;60    padding: 30px; color: #D9D3CC; font-size: 40px;61  }62 63  /* Keyboard mock */64  .keyboard {65    position: absolute; left: 0; right: 0; bottom: 120px; height: 780px;66    background: #221F1D; border-top: 1px solid #2C2A28; padding: 26px 24px 20px;67    display: flex; flex-direction: column; gap: 18px;68  }69  .kb-toolbar { display: flex; align-items: center; gap: 26px; padding-bottom: 6px; }70  .tool {71    width: 96px; height: 84px; border-radius: 22px; background: #2A2725;72    display: flex; align-items: center; justify-content: center; color: #E6D9CE; font-size: 32px; border: 1px solid #3A3633;73  }74  .tool svg { width: 42px; height: 42px; stroke: #E6D9CE; fill: none; stroke-width: 3; }75 76  .kb-row { display: flex; gap: 14px; }77  .key {78    flex: 1; height: 110px; border-radius: 24px; background: #2A2725;79    border: 1px solid #3A3633; color: #EBE3DC; font-size: 48px; display: flex; align-items: center; justify-content: center;80  }81  .key.small { flex: 0 0 120px; }82  .key.medium { flex: 0 0 180px; }83  .key.wide { flex: 0 0 380px; }84  .key.space { flex: 1.8; font-size: 34px; color: #C8C0B7; }85  .key.light { background: #E1C5A7; border-color: #E1C5A7; color: #2A2725; }86  .key.peach { background: #F2C7A5; border-color: #F2C7A5; color: #3A2F2B; }87 88  /* Bottom gesture bar */89  .gesture {90    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);91    width: 320px; height: 12px; border-radius: 8px; background: #DDD6CF; opacity: 0.85;92  }93</style>94</head>95<body>96<div id="render-target">97 98  <!-- Status bar -->99  <div class="status-bar">100    <div class="status-time">10:05</div>101    <div class="status-icons">102      <!-- Alarm -->103      <svg viewBox="0 0 48 48">104        <circle cx="24" cy="26" r="14"></circle>105        <path d="M24 26 L24 18 M24 26 L31 29"></path>106        <path d="M8 10 L16 6"></path>107        <path d="M40 10 L32 6"></path>108      </svg>109      <!-- Signal -->110      <svg viewBox="0 0 48 48">111        <path d="M6 38 L10 38"></path>112        <path d="M14 34 L18 34"></path>113        <path d="M22 30 L26 30"></path>114        <path d="M30 26 L34 26"></path>115      </svg>116      <!-- WiFi -->117      <svg viewBox="0 0 48 48">118        <path d="M8 20 Q24 8 40 20"></path>119        <path d="M14 26 Q24 18 34 26"></path>120        <path d="M20 32 Q24 28 28 32"></path>121        <circle cx="24" cy="36" r="3" fill="#F5EEE6" stroke="none"></circle>122      </svg>123      <!-- Battery -->124      <svg viewBox="0 0 48 48">125        <rect x="6" y="12" width="32" height="24" rx="4"></rect>126        <rect x="40" y="18" width="4" height="12" rx="2"></rect>127        <rect x="10" y="16" width="24" height="16" rx="3" fill="#F5EEE6" stroke="none"></rect>128      </svg>129    </div>130  </div>131 132  <!-- App bar -->133  <div class="app-bar">134    <!-- Back arrow -->135    <svg viewBox="0 0 64 64" class="icon-btn">136      <path d="M40 16 L20 32 L40 48" stroke-linecap="round" stroke-linejoin="round"></path>137    </svg>138    <div class="app-title">Compose</div>139    <div class="app-actions">140      <!-- Attach / paperclip -->141      <svg viewBox="0 0 64 64" class="icon-btn">142        <path d="M22 34 L38 18 Q46 10 54 18 Q62 26 54 34 L34 54 Q26 62 18 54 Q10 46 18 38 L38 18" stroke-linecap="round" stroke-linejoin="round"></path>143      </svg>144      <!-- Send / paper plane -->145      <svg viewBox="0 0 64 64" class="icon-btn">146        <path d="M8 32 L56 12 L40 56 L30 36 L8 32 Z" stroke-linejoin="round"></path>147      </svg>148      <!-- More (vertical dots) -->149      <svg viewBox="0 0 64 64" class="icon-btn">150        <circle cx="32" cy="16" r="4" fill="#EDE7E1" stroke="none"></circle>151        <circle cx="32" cy="32" r="4" fill="#EDE7E1" stroke="none"></circle>152        <circle cx="32" cy="48" r="4" fill="#EDE7E1" stroke="none"></circle>153      </svg>154    </div>155  </div>156 157  <!-- Fields -->158  <div class="fields">159    <div class="field-row">160      <div class="label">From</div>161      <div class="value">dbwscratch.test.id5@gmail.com</div>162    </div>163 164    <div class="field-row to-row">165      <div class="label">To</div>166      <div class="value">167        <span>dbwscratch.test.id10@gmail.com</span>168        <svg class="chev" viewBox="0 0 48 48">169          <path d="M14 18 L24 30 L34 18" stroke="#EDE7E1" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>170        </svg>171      </div>172    </div>173 174    <div class="suggestion">175      <div class="avatar">d</div>176      <div class="suggestion-text">177        <div class="primary">dbwscratch.test.id10@gmail.com</div>178        <div class="secondary">dbwscratch.test.id10@gmail.com</div>179      </div>180    </div>181  </div>182 183  <!-- Message area (empty for compose) -->184  <div class="message-area"></div>185 186  <!-- Keyboard mock -->187  <div class="keyboard">188    <div class="kb-toolbar">189      <div class="tool"><svg viewBox="0 0 48 48"><path d="M8 8 H20 V20 H8 Z M28 8 H40 V20 H28 Z M8 28 H20 V40 H8 Z M28 28 H40 V40 H28 Z"></path></svg></div>190      <div class="tool"><svg viewBox="0 0 48 48"><circle cx="24" cy="20" r="8"></circle><path d="M8 40 Q24 28 40 40"></path></svg></div>191      <div class="tool">GIF</div>192      <div class="tool"><svg viewBox="0 0 48 48"><circle cx="24" cy="24" r="16"></circle><path d="M24 14 L24 34 M14 24 L34 24"></path></svg></div>193      <div class="tool"><svg viewBox="0 0 48 48"><path d="M8 38 L40 10"></path><path d="M12 12 L18 12"></path><circle cx="32" cy="16" r="6"></circle></svg></div>194      <div class="tool"><svg viewBox="0 0 48 48"><path d="M24 6 Q32 12 34 22 Q36 32 24 42 Q12 32 14 22 Q16 12 24 6 Z"></path></svg></div>195      <div class="tool"><svg viewBox="0 0 48 48"><path d="M14 20 Q24 12 34 20"></path><path d="M18 26 Q24 22 30 26"></path><path d="M22 32 Q24 30 26 32"></path></svg></div>196    </div>197 198    <div class="kb-row">199      <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>200    </div>201    <div class="kb-row">202      <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>203    </div>204    <div class="kb-row">205      <div class="key small">⇧</div>206      <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>207      <div class="key medium">⌫</div>208    </div>209    <div class="kb-row">210      <div class="key medium light">?123</div>211      <div class="key small">@</div>212      <div class="key small">☺</div>213      <div class="key space">space</div>214      <div class="key small">.</div>215      <div class="key medium peach">→</div>216    </div>217  </div>218 219  <!-- Bottom gesture bar -->220  <div class="gesture"></div>221 222</div>223</body>224</html>