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>Email Compose - Dark UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", "Segoe UI", Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #15120E; color: #E9E6D8;12  }13  /* Utility */14  .row { display: flex; align-items: center; }15  .muted { color: #BDB7A6; }16  .divider { height: 1px; background: #383329; }17  /* Status bar */18  .status-bar {19    height: 110px; padding: 0 36px;20    display: flex; align-items: center; justify-content: space-between; color: #EFECE0;21  }22  .status-left { font-size: 40px; font-weight: 500; }23  .status-right { display: flex; gap: 26px; align-items: center; }24  .status-dot { width: 16px; height: 16px; background: #EFECE0; border-radius: 50%; opacity: 0.8; }25  /* Top actions (back + attach + send + menu) */26  .top-actions {27    height: 120px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between;28  }29  .left-actions { display: flex; align-items: center; gap: 14px; }30  .right-actions { display: flex; align-items: center; gap: 28px; }31  .icon-btn { width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; }32  .icon { width: 40px; height: 40px; }33  /* From / To rows */34  .field { padding: 18px 32px; }35  .field .label { color: #BDB7A6; font-size: 34px; margin-right: 18px; }36  .field .value { font-size: 36px; }37  .to-chip {38    margin-top: 16px;39    display: inline-flex; align-items: center; gap: 16px;40    border: 2px solid #4A4437; border-radius: 48px; padding: 16px 22px;41  }42  .avatar {43    width: 64px; height: 64px; border-radius: 50%;44    background: #4AA6B1; color: #ffffff; display: flex; align-items: center; justify-content: center;45    font-weight: 700; font-size: 34px; border: 3px solid #5BC0CB;46  }47  .chip-email { font-size: 36px; color: #E9E6D8; }48  .caret { width: 32px; height: 32px; margin-left: 10px; }49  /* Subject */50  .subject {51    margin-top: 8px; border-top: 1px solid #383329; border-bottom: 1px solid #383329;52    padding: 30px 32px; font-size: 44px; line-height: 1.3; color: #E9E6D8;53  }54  /* Message body */55  .message-body {56    padding: 28px 32px 0 32px; font-size: 38px; line-height: 1.5; color: #E9E6D8;57  }58  /* Keyboard mock */59  .keyboard {60    position: absolute; left: 0; right: 0; bottom: 120px;61    height: 860px; background: #0F0E0B; border-top: 2px solid #2E2A22; padding: 24px 24px;62    box-sizing: border-box;63  }64  .kb-top-tools { display: flex; align-items: center; gap: 32px; margin-bottom: 24px; }65  .tool-pill {66    min-width: 96px; height: 72px; border-radius: 18px; background: #24221D;67    color: #DCD6C6; display: flex; align-items: center; justify-content: center; padding: 0 16px; font-size: 30px;68    border: 1px solid #3A352C;69  }70  .kb-row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 16px; margin: 16px 0; }71  .key {72    height: 120px; background: #25221D; border: 2px solid #3A352C; border-radius: 26px;73    display: flex; align-items: center; justify-content: center;74    color: #E9E6D8; font-size: 40px; font-weight: 500;75  }76  .key.small { font-size: 34px; }77  .key.accent { background: #CBB787; color: #15120E; border-color: #CBB787; }78  .kb-row-wide { display: grid; grid-template-columns: 1.3fr 1fr 1fr 6fr 1fr 1.6fr; gap: 16px; margin-top: 18px; }79  .space { justify-content: flex-start; padding-left: 24px; color: #AFA999; }80  /* Gesture pill */81  .gesture-pill {82    position: absolute; left: 50%; transform: translateX(-50%);83    bottom: 36px; width: 320px; height: 10px; background: rgba(255,255,255,0.85); border-radius: 6px;84  }85  /* Helper for image placeholder (not used here but kept per spec) */86  .img-placeholder {87    background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;88    display: flex; align-items: center; justify-content: center;89  }90</style>91</head>92<body>93<div id="render-target">94  <!-- Status Bar -->95  <div class="status-bar">96    <div class="status-left">11:17</div>97    <div class="status-right">98      <div class="status-dot"></div>99      <div class="status-dot"></div>100      <div class="status-dot"></div>101      <div class="status-dot"></div>102      <!-- WiFi -->103      <svg class="icon" viewBox="0 0 24 24" fill="none">104        <path d="M12 18.5a1.5 1.5 0 110 3 1.5 1.5 0 010-3z" fill="#EFECE0"/>105        <path d="M5 11.5a10 10 0 0114 0" stroke="#EFECE0" stroke-width="2" stroke-linecap="round"/>106        <path d="M8 14a6 6 0 018 0" stroke="#EFECE0" stroke-width="2" stroke-linecap="round"/>107      </svg>108      <!-- Battery -->109      <svg class="icon" viewBox="0 0 24 24" fill="none">110        <rect x="3" y="7" width="16" height="10" rx="2" stroke="#EFECE0" stroke-width="2"/>111        <rect x="5" y="9" width="11" height="6" fill="#EFECE0"/>112        <rect x="19" y="10" width="2" height="4" fill="#EFECE0"/>113      </svg>114    </div>115  </div>116 117  <!-- Top action bar -->118  <div class="top-actions">119    <div class="left-actions">120      <!-- Back arrow -->121      <div class="icon-btn">122        <svg class="icon" viewBox="0 0 24 24" fill="none">123          <path d="M15 6l-6 6 6 6" stroke="#E9E6D8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>124        </svg>125      </div>126      <span class="muted" style="font-size:32px;">Compose</span>127    </div>128    <div class="right-actions">129      <!-- Attach -->130      <div class="icon-btn">131        <svg class="icon" viewBox="0 0 24 24" fill="none">132          <path d="M7 12v5a5 5 0 0010 0V9a3 3 0 10-6 0v7a1.5 1.5 0 003 0V10" stroke="#E9E6D8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>133        </svg>134      </div>135      <!-- Send -->136      <div class="icon-btn">137        <svg class="icon" viewBox="0 0 24 24">138          <path d="M3 20l18-8L3 4l3 7-3 9z" fill="#D7C48A"/>139        </svg>140      </div>141      <!-- Kebab -->142      <div class="icon-btn">143        <svg class="icon" viewBox="0 0 24 24" fill="#E9E6D8">144          <circle cx="12" cy="5" r="2"/>145          <circle cx="12" cy="12" r="2"/>146          <circle cx="12" cy="19" r="2"/>147        </svg>148      </div>149    </div>150  </div>151 152  <!-- From row -->153  <div class="field row" style="justify-content: flex-start;">154    <span class="label">From</span>155    <span class="value">dbwscratch.test.id16@gmail.com</span>156  </div>157 158  <!-- To row with chip -->159  <div class="field">160    <div class="row" style="gap: 18px; align-items: flex-start;">161      <span class="label" style="margin-top: 8px;">To</span>162      <div class="to-chip">163        <div class="avatar">n</div>164        <span class="chip-email">natalie.larson1998@gmail.com</span>165        <svg class="caret" viewBox="0 0 24 24" fill="none">166          <path d="M6 9l6 6 6-6" stroke="#E9E6D8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>167        </svg>168      </div>169    </div>170  </div>171 172  <!-- Subject -->173  <div class="subject">174    Lord Huron - The Night We Met (Slowed down) - SoundCloud175  </div>176 177  <!-- Message body -->178  <div class="message-body">179    Listen to Lord Huron - The Night We Met (Slowed down) by Tina on #SoundCloud<br>180    https://on.soundcloud.com/FZbtq181  </div>182 183  <!-- Big spacer to mimic scrollable compose area -->184  <div style="height: 700px;"></div>185 186  <!-- Keyboard mock -->187  <div class="keyboard">188    <div class="kb-top-tools">189      <div class="tool-pill">◻︎◻︎</div>190      <div class="tool-pill">🙂</div>191      <div class="tool-pill">GIF</div>192      <div class="tool-pill">193        <svg width="32" height="32" viewBox="0 0 24 24" fill="none">194          <circle cx="12" cy="12" r="8" stroke="#DCD6C6" stroke-width="2"/>195          <path d="M12 8v4l3 3" stroke="#DCD6C6" stroke-width="2" stroke-linecap="round"/>196        </svg>197      </div>198      <div class="tool-pill">G↔︎</div>199      <div class="tool-pill">🎨</div>200      <div class="tool-pill">🎤</div>201    </div>202 203    <div class="kb-row">204      <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>205      <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>206    </div>207    <div class="kb-row">208      <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>209      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div><div class="key">210        <svg width="34" height="34" viewBox="0 0 24 24" fill="none">211          <path d="M18 6l-8 8M10 6l8 8" stroke="#E9E6D8" stroke-width="2" stroke-linecap="round"/>212        </svg>213      </div>214    </div>215    <div class="kb-row-wide">216      <div class="key accent small">?123</div>217      <div class="key small">@</div>218      <div class="key small">☺</div>219      <div class="key space">                 </div>220      <div class="key small">.</div>221      <div class="key accent">222        <svg width="38" height="38" viewBox="0 0 24 24" fill="none">223          <path d="M5 12h12" stroke="#15120E" stroke-width="2" stroke-linecap="round"/>224          <path d="M12 6l6 6-6 6" fill="none" stroke="#15120E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>225        </svg>226      </div>227    </div>228  </div>229 230  <!-- Gesture pill -->231  <div class="gesture-pill"></div>232</div>233</body>234</html>