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 Email - Dark</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #17120C;15    color: #ECECEC;16  }17 18  /* Status bar */19  .status-bar {20    height: 110px;21    padding: 0 28px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #EDEDED;26    font-size: 42px;27    letter-spacing: 1px;28  }29  .status-icons {30    display: flex;31    align-items: center;32    gap: 28px;33  }34  .icon-dot {35    width: 14px; height: 14px; background: #EDEDED; border-radius: 50%;36    opacity: 0.8;37  }38  .battery {39    width: 46px; height: 24px; border: 3px solid #EDEDED; border-radius: 4px; position: relative;40  }41  .battery::after { content: ""; position: absolute; right: -10px; top: 6px; width: 6px; height: 12px; background: #EDEDED; border-radius: 2px; }42  .battery .level { position: absolute; left: 2px; top: 2px; height: 16px; width: 28px; background: #EDEDED; }43 44  /* App bar */45  .app-bar {46    height: 130px;47    padding: 0 24px;48    display: flex;49    align-items: center;50    border-bottom: 1px solid rgba(255,255,255,0.08);51  }52  .app-left, .app-right { display: flex; align-items: center; }53  .app-left { gap: 16px; }54  .app-right { margin-left: auto; gap: 34px; }55 56  /* Simple icons */57  .icon { width: 48px; height: 48px; fill: none; stroke: #E8E6E2; stroke-width: 4; }58  .icon-fill { fill: #C8A661; stroke: none; }59 60  /* Fields */61  .content { padding: 10px 32px 0 32px; }62  .row {63    padding: 18px 0;64    border-bottom: 1px solid rgba(255,255,255,0.08);65  }66  .label {67    color: #9AA0A6;68    font-size: 38px;69    margin-bottom: 10px;70  }71  .value {72    font-size: 40px;73    color: #EDEDED;74  }75 76  .to-row { padding: 20px 0 24px; display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.08); }77  .to-row .label { margin: 0; width: 100px; }78  .chip {79    display: inline-flex;80    align-items: center;81    gap: 16px;82    border: 2px solid #6E6A63;83    border-radius: 36px;84    padding: 10px 18px 10px 10px;85    color: #EDEDED;86    font-size: 36px;87    max-width: 780px;88  }89  .avatar {90    width: 64px; height: 64px; border-radius: 50%;91    background: #E0E0E0; border: 1px solid #BDBDBD;92    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 18px;93    flex: 0 0 64px;94  }95  .dropdown {96    margin-left: 16px;97    width: 28px; height: 28px; border: 2px solid #9AA0A6; border-top: none; border-left: none; transform: rotate(45deg);98  }99 100  .cursor {101    width: 2px; height: 36px; background: #C8A661; margin: 10px 0 22px 100px;102  }103 104  .subject {105    padding: 22px 0;106    border-bottom: 1px solid rgba(255,255,255,0.08);107  }108  .subject .label { font-size: 40px; color: #8E9499; }109 110  .body {111    padding: 32px 0;112    font-size: 52px;113    line-height: 1.35;114    color: #F3F3F3;115  }116 117  /* Keyboard (mock) */118  .keyboard {119    position: absolute;120    bottom: 60px;121    left: 0;122    right: 0;123    height: 860px;124    background: #1E1C1A;125    border-top: 1px solid rgba(255,255,255,0.07);126    padding: 18px 18px 24px;127    display: flex;128    flex-direction: column;129    justify-content: space-between;130  }131  .kb-row { display: flex; justify-content: space-between; gap: 16px; }132  .key {133    flex: 1;134    height: 120px;135    background: #2A2724;136    border-radius: 18px;137    display: flex;138    align-items: center;139    justify-content: center;140    color: #EADCC9;141    font-size: 44px;142    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.4);143  }144  .key.small { flex: 0 0 120px; }145  .key.medium { flex: 0 0 160px; }146  .key.wide { flex: 1.4; }147  .key.circle {148    border-radius: 60px;149    background: #C8A661;150    color: #17120C;151    font-weight: 700;152  }153  .space { flex: 3; }154  .bottom-bar {155    position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);156    width: 280px; height: 8px; background: #FFFFFF; opacity: 0.85; border-radius: 8px;157  }158</style>159</head>160<body>161  <div id="render-target">162 163    <!-- Status Bar -->164    <div class="status-bar">165      <div style="font-weight: 600;">9:28</div>166      <div class="status-icons">167        <div class="icon-dot"></div>168        <div class="icon-dot"></div>169        <div class="icon-dot"></div>170        <div class="battery"><div class="level"></div></div>171      </div>172    </div>173 174    <!-- App Bar -->175    <div class="app-bar">176      <div class="app-left">177        <!-- Back arrow -->178        <svg class="icon" viewBox="0 0 24 24">179          <path d="M15 5l-7 7 7 7" stroke-width="2" stroke="#EDE7DE" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>180        </svg>181      </div>182      <div class="app-right">183        <!-- Attach (paperclip) -->184        <svg class="icon" viewBox="0 0 24 24">185          <path d="M7 12l6-6a4 4 0 015 5l-8 8a3 3 0 01-4-4l8-8" stroke="#CFCBC4" stroke-width="1.8" fill="none" stroke-linecap="round"/>186        </svg>187        <!-- Send (triangle) -->188        <svg class="icon" viewBox="0 0 24 24">189          <path class="icon-fill" d="M2 12l19-9-6 9 6 9-19-9z"></path>190        </svg>191        <!-- Overflow (3 dots) -->192        <svg class="icon" viewBox="0 0 24 24">193          <circle cx="12" cy="5" r="2" fill="#EDE7DE"></circle>194          <circle cx="12" cy="12" r="2" fill="#EDE7DE"></circle>195          <circle cx="12" cy="19" r="2" fill="#EDE7DE"></circle>196        </svg>197      </div>198    </div>199 200    <!-- Compose Content -->201    <div class="content">202      <div class="row">203        <di