GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Compose Email 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:#111315; color:#FAFAFA;11  }12 13  /* Status bar */14  .status-bar {15    height:120px; padding:0 30px; display:flex; align-items:center; justify-content:space-between;16    color:#eaeaea; font-weight:600; font-size:44px;17  }18  .status-icons { display:flex; gap:28px; align-items:center; }19  .status-dot { width:10px; height:10px; background:#eaeaea; border-radius:50%; display:inline-block; }20  .battery { width:42px; height:22px; border:3px solid #eaeaea; border-radius:6px; position:relative; }21  .battery::after { content:""; position:absolute; right:-8px; top:4px; width:6px; height:14px; background:#eaeaea; border-radius:2px; }22  .battery-fill { position:absolute; left:3px; top:3px; height:14px; width:28px; background:#eaeaea; border-radius:3px; }23 24  /* Header */25  .compose-header {26    height:120px; border-bottom:1px solid #262a2f; display:flex; align-items:center; padding:0 24px;27  }28  .left-actions { display:flex; align-items:center; gap:24px; }29  .right-actions { margin-left:auto; display:flex; align-items:center; gap:34px; }30  .icon-btn { width:72px; height:72px; display:flex; align-items:center; justify-content:center; }31  .icon svg { width:50px; height:50px; fill:none; stroke:#eaeaea; stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round; }32  .send svg { stroke:#eaeaea; }33  .kebab svg { width:12px; height:44px; }34 35  /* Fields */36  .field { padding:26px 30px; border-bottom:1px solid #262a2f; }37  .field .label { color:#9aa0a6; font-size:40px; margin-bottom:16px; }38  .field .value-row { display:flex; align-items:center; gap:16px; }39  .field .value { font-size:44px; color:#e6e6e6; }40  .dropdown { margin-left:auto; width:42px; height:42px; display:flex; align-items:center; justify-content:center; }41  .dropdown svg { width:36px; height:36px; fill:#9aa0a6; }42 43  /* Body text area */44  .body-area { height:720px; padding:28px 30px; font-size:44px; line-height:1.4; color:#f4f4f4; }45  .body-area .placeholder-text { white-space:pre-wrap; word-break:break-word; }46 47  /* Keyboard mock */48  .keyboard { position:absolute; left:0; bottom:0; width:100%; height:960px; background:#1b1d20; border-top:1px solid #2a2e33; }49  .kb-top { height:120px; display:flex; align-items:center; gap:32px; padding:0 24px; }50  .kb-icon {51    width:86px; height:86px; border-radius:22px; background:#2a2e33; display:flex; align-items:center; justify-content:center; color:#cfd8dc; font-size:36px;52    border:1px solid #343942;53  }54  .kb-rows { padding:10px 24px; }55  .row { display:grid; grid-auto-rows:120px; gap:14px; }56  .row.row1 { grid-template-columns:repeat(10, 1fr); }57  .row.row2 { grid-template-columns:0.6fr repeat(9, 1fr) 0.6fr; }58  .row.row3 { grid-template-columns:0.9fr repeat(7, 1fr) 1.2fr; }59  .key {60    background:#2a2e33; border:1px solid #343942; border-radius:24px; display:flex; align-items:center; justify-content:center;61    color:#f3f3f3; font-size:50px; font-weight:500;62  }63  .space-row { display:grid; grid-template-columns:1.4fr 1fr 5fr 1fr 1.6fr; gap:14px; margin-top:16px; }64  .key.light { color:#dbdbdb; font-size:40px; }65  .enter { background:#4CAF50; border-color:#4CAF50; color:#fff; font-weight:700; }66  .backspace { background:#2a2e33; position:relative; }67  .backspace:after {68    content:""; width:40px; height:20px; border:3px solid #cfd8dc; border-left:none; transform:skewX(-20deg);69    position:absolute; right:34px; top:48px; border-radius:4px;70  }71 72  /* Small visual separators */73  .divider { height:1px; background:#262a2f; }74</style>75</head>76<body>77<div id="render-target">78 79  <!-- Status Bar -->80  <div class="status-bar">81    <div>11:55</div>82    <div class="status-icons">83      <span>Q</span>84      <span>◻️</span>85      <span class="status-dot"></span>86      <span>LR</span>87      <span class="status-dot"></span>88      <span>∿</span>89      <div class="battery"><div class="battery-fill"></div></div>90      <span style="font-size:38px;">100%</span>91    </div>92  </div>93 94  <!-- Compose Header -->95  <div class="compose-header">96    <div class="left-actions">97      <div class="icon-btn icon">98        <svg viewBox="0 0 24 24">99          <path d="M15 6 L7 12 L15 18"></path>100        </svg>101      </div>102    </div>103    <div class="right-actions">104      <div class="icon-btn icon">105        <svg viewBox="0 0 24 24">106          <path d="M6 8c6-6 12 6 0 12"></path>107        </svg>108      </div>109      <div class="icon-btn send icon">110        <svg viewBox="0 0 24 24">111          <path d="M3 5 L21 12 L3 19 L6 12 Z"></path>112        </svg>113      </div>114      <div class="icon-btn kebab icon">115        <svg viewBox="0 0 6 24">116          <circle cx="3" cy="4" r="2" fill="#eaeaea"></circle>117          <circle cx="3" cy="12" r="2" fill="#eaeaea"></circle>118          <circle cx="3" cy="20" r="2" fill="#eaeaea"></circle>119        </svg>120      </div>121    </div>122  </div>123 124  <!-- From Field -->125  <div class="field">126    <div class="label">From</div>127    <div class="value-row">128      <div class="value">dbwscratch.test.id10@gmail.com</div>129      <div class="dropdown">130        <svg viewBox="0 0 24 24"><path d="M6 9 L12 15 L18 9" fill="#9aa0a6"></path></svg>131      </div>132    </div>133  </div>134 135  <!-- To Field -->136  <div class="field">137    <div class="label">To</div>138    <div class="value-row">139      <div class="value" style="color:#7f8790;">Tap to add recipients</div>140      <div class="dropdown">141        <svg viewBox="0 0 24 24"><path d="M6 9 L12 15 L18 9" fill="#9aa0a6"></path></svg>142      </div>143    </div>144  </div>145 146  <!-- Subject Field -->147  <div class="field">148    <div class="label">Subject</div>149    <div class="value-row">150      <div class="value" style="color:#7f8790;"> </div>151    </div>152  </div>153 154  <!-- Message Body -->155  <div class="body-area">156    <div class="placeholder-text">157https://www.ebay.com/itm/155608186658?mkcid=16&mkevt=1&mkrid=711-127632-23570&ssspo=gzPnQmhRTAG&sssrc=4429486&ssuid=&var=455888201081&widget_ver=artemis&media=MORE158    </div>159  </div>160 161  <!-- Divider before keyboard -->162  <div class="divider"></div>163 164  <!-- Keyboard -->165  <div class="keyboard">166    <div class="kb-top">167      <div class="kb-icon">▦</div>168      <div class="kb-icon">☺</div>169      <div class="kb-icon">GIF</div>170      <div class="kb-icon">⚙</div>171      <div class="kb-icon">G⇄</div>172      <div class="kb-icon">🎨</div>173      <div class="kb-icon">🎙</div>174    </div>175 176    <div class="kb-rows">177      <div class="row row1">178        <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>179        <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>180      </div>181 182      <div class="row row2" style="margin-top:14px;">183        <div></div>184        <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>185        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>186        <div></div>187      </div>188 189      <div class="row row3" style="margin-top:14px;">190        <div class="key light">⇧</div>191        <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>192        <div class="key backspace"></div>193      </div>194 195      <div class="space-row">196        <div class="key light">?123</div>197        <div class="key light">@</div>198        <div class="key"> </div>199        <div class="key light">.</div>200        <div class="key enter">↩</div>201      </div>202    </div>203  </div>204 205</div>206</body>207</html>