GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Email Compose 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: #0F2D31; color: #EAF2F2;11  }12 13  /* Status bar */14  .status-bar {15    height: 110px; padding: 0 36px; display: flex; align-items: center; justify-content: space-between;16    font-size: 40px; color: #FFFFFF;17  }18  .status-right { display: flex; align-items: center; gap: 26px; }19  .icon { display: inline-flex; align-items: center; justify-content: center; }20  .icon svg { fill: none; stroke: #FFFFFF; stroke-width: 3; }21 22  /* App header */23  .app-bar {24    height: 110px; display: flex; align-items: center; padding: 0 24px; position: relative;25  }26  .app-actions { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); display: flex; gap: 34px; }27  .app-actions svg { stroke: #CFE3E3; fill: none; }28 29  /* Fields */30  .field { padding: 24px 24px 20px 24px; }31  .field .label { font-size: 32px; color: #8FB1B3; margin-bottom: 10px; }32  .field .value { display: flex; align-items: center; font-size: 40px; color: #EAF2F2; }33  .field .value .chev { margin-left: 12px; }34  .divider { height: 2px; background: #23494C; margin: 0 24px; }35 36  /* Message body */37  .message-area { padding: 28px 24px; font-size: 42px; line-height: 1.5; color: #E9F1F1; min-height: 850px; }38  .link { color: #B7D7FF; word-break: break-all; margin-top: 28px; }39 40  /* Keyboard */41  .keyboard {42    position: absolute; bottom: 60px; left: 0; right: 0;43    padding: 20px 18px 24px 18px; background: #122F33;44  }45  .kb-top { display: flex; align-items: center; gap: 24px; padding: 10px 16px 20px 16px; }46  .kb-top .round { width: 90px; height: 90px; border-radius: 22px; background: #1C3B3F; display: flex; align-items: center; justify-content: center; color: #C7D1D1; font-size: 30px; }47  .gif-btn { font-weight: 600; }48  .keys { display: flex; justify-content: center; gap: 12px; margin: 12px 0; }49  .key {50    width: 92px; height: 120px; border-radius: 18px; background: #223B3F; color: #EAF2F2; display: flex;51    align-items: center; justify-content: center; font-size: 46px;52  }53  .row2 .key { width: 98px; }54  .row3 { padding: 0 40px; }55  .space-row { display: flex; align-items: center; gap: 14px; padding: 16px 8px 0 8px; }56  .circle-btn { width: 120px; height: 120px; border-radius: 60px; background: #6AC4A2; color: #0D2225; display: flex; align-items: center; justify-content: center; font-size: 40px; }57  .space { flex: 1; height: 120px; border-radius: 22px; background: #223B3F; display: flex; align-items: center; justify-content: center; color: #AEB9B9; font-size: 34px; }58  .gesture-bar { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); width: 360px; height: 12px; background: #E6E6E6; border-radius: 6px; opacity: 0.8; }59 60  /* Small helpers */61  .muted { color: #98B5B6; }62</style>63</head>64<body>65<div id="render-target">66 67  <!-- Status bar -->68  <div class="status-bar">69    <div class="status-left">7:49</div>70    <div class="status-right">71      <!-- signal -->72      <span class="icon">73        <svg width="54" height="36" viewBox="0 0 54 36">74          <path d="M4 32h6M14 26h6M24 20h6M34 12h6M44 4h6" stroke="#FFFFFF" stroke-width="4" />75        </svg>76      </span>77      <!-- wifi -->78      <span class="icon">79        <svg width="50" height="36" viewBox="0 0 50 36">80          <path d="M4 12c9-8 33-8 42 0M10 18c6-5 24-5 30 0M18 24c4-3 12-3 16 0M24 30l2 2 2-2" stroke="#FFFFFF" stroke-width="3" />81        </svg>82      </span>83      <!-- battery -->84      <span class="icon">85        <svg width="64" height="30" viewBox="0 0 64 30">86          <rect x="2" y="6" width="54" height="18" rx="4" stroke="#FFFFFF" />87          <rect x="6" y="10" width="42" height="10" fill="#FFFFFF" />88          <rect x="58" y="12" width="4" height="6" fill="#FFFFFF" />89        </svg>90      </span>91      <span class="muted" style="font-size:34px;">92%</span>92    </div>93  </div>94 95  <!-- App bar -->96  <div class="app-bar">97    <!-- Back arrow -->98    <svg width="56" height="56" viewBox="0 0 24 24">99      <path d="M15 6l-6 6 6 6" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>100    </svg>101 102    <div class="app-actions">103      <!-- Attach -->104      <svg width="46" height="46" viewBox="0 0 24 24">105        <path d="M7 7v8a5 5 0 0 0 10 0V7a3 3 0 0 0-6 0v8a1 1 0 1 0 2 0V7" stroke-width="2"/>106      </svg>107      <!-- Send -->108      <svg width="46" height="46" viewBox="0 0 24 24">109        <path d="M3 11l18-8-8 18-2-7-8-3z" stroke-width="2"/>110      </svg>111      <!-- More -->112      <svg width="46" height="46" viewBox="0 0 24 24">113        <circle cx="12" cy="5" r="2" fill="#CFE3E3"/>114        <circle cx="12" cy="12" r="2" fill="#CFE3E3"/>115        <circle cx="12" cy="19" r="2" fill="#CFE3E3"/>116      </svg>117    </div>118  </div>119 120  <!-- From field -->121  <div class="field">122    <div class="label">From</div>123    <div class="value">124      sender@example.com125      <span class="chev">126        <svg width="34" height="34" viewBox="0 0 24 24">127          <path d="M6 9l6 6 6-6" stroke="#A6C3C4" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>128        </svg>129      </span>130    </div>131  </div>132  <div class="divider"></div>133 134  <!-- To field -->135  <div class="field">136    <div class="label">To</div>137    <div class="value" style="color:#7FA3A5;">138      <span style="opacity:0.7;">Enter recipient</span>139      <span class="chev">140        <svg width="34" height="34" viewBox="0 0 24 24">141          <path d="M6 9l6 6 6-6" stroke="#A6C3C4" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>142        </svg>143      </span>144    </div>145  </div>146  <div class="divider" style="margin-bottom: 8px;"></div>147 148  <!-- Message area -->149  <div class="message-area">150    <div>Someone has shared a file with you</div>151    <div class="link">https://acrobat.adobe.com/id/urn:example:12345678-aaaa-bbbb-cccc-1234567890ab</div>152  </div>153 154  <!-- Keyboard -->155  <div class="keyboard">156    <div class="kb-top">157      <div class="round">◧</div>158      <div class="round">☺</div>159      <div class="round gif-btn">GIF</div>160      <div class="round">⚙</div>161      <div class="round">G</div>162      <div class="round">🎨</div>163      <div class="round">🎤</div>164    </div>165 166    <div class="keys row1">167      <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>168      <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>169    </div>170    <div class="keys row2">171      <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>172      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>173    </div>174    <div class="keys row3" style="gap:14px; justify-content: center;">175      <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>176      <div class="key">n</div><div class="key">m</div>177      <div class="key" style="width:140px;">178        <svg width="56" height="32" viewBox="0 0 24 24">179          <path d="M4 19l16-7-16-7v6h10v2H4z" fill="#EAF2F2"/>180        </svg>181      </div>182    </div>183 184    <div class="space-row">185      <div class="circle-btn">?123</div>186      <div class="round" style="width:100px;height:100px;border-radius:18px;">@</div>187      <div class="round" style="width:100px;height:100px;border-radius:18px;">☺</div>188      <div class="space">space</div>189      <div class="round" style="width:100px;height:100px;border-radius:18px;">.</div>190      <div class="circle-btn">191        <svg width="48" height="48" viewBox="0 0 24 24">192          <path d="M4 12h12l-5-5M16 12l-5 5" stroke="#0D2225" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>193        </svg>194      </div>195    </div>196  </div>197 198  <div class="gesture-bar"></div>199</div>200</body>201</html>