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 Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #241C1A; /* deep warm dark */13    color: #E8DDD8;14    font-family: "Roboto", "Segoe UI", Arial, sans-serif;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute; top: 0; left: 0; right: 0;20    height: 110px;21    display: flex; align-items: center; justify-content: space-between;22    padding: 0 36px;23    color: #F2E8E4;24    font-size: 38px; letter-spacing: 0.5px;25  }26  .sb-icons { display: flex; align-items: center; gap: 26px; }27  .sb-icon svg { width: 46px; height: 46px; stroke: #F2E8E4; fill: none; stroke-width: 4; }28 29  /* App bar */30  .app-bar {31    position: absolute; top: 110px; left: 0; right: 0;32    height: 140px; border-bottom: 1px solid #3B302D;33    display: flex; align-items: center; justify-content: space-between;34    padding: 0 30px;35  }36  .app-left, .app-right { display: flex; align-items: center; gap: 24px; }37  .app-title { font-size: 56px; font-weight: 500; color: #F1E4DF; }38  .icon-btn svg {39    width: 56px; height: 56px; stroke: #E9C9C4; fill: none; stroke-width: 5; 40  }41  .icon-btn.more svg { stroke: #E9C9C4; }42  .back svg { stroke: #E9C9C4; }43 44  /* Content area */45  .content {46    position: absolute; top: 250px; left: 0; right: 0; bottom: 980px;47    padding: 30px 40px 0 40px;48    overflow: hidden;49  }50  .field {51    padding: 26px 0;52    border-bottom: 1px solid #3B302D;53    display: flex; align-items: center; justify-content: space-between;54  }55  .label { color: #CBBFBA; font-size: 34px; }56  .value { font-size: 34px; color: #F1E4DF; }57  .to-chevron svg { width: 34px; height: 34px; stroke: #CBBFBA; stroke-width: 4; fill: none; }58 59  .subject {60    padding: 30px 0 24px 0;61    font-size: 50px; color: #EAD9D3;62    border-bottom: 1px solid #3B302D;63  }64 65  .body {66    padding-top: 34px; font-size: 46px; line-height: 1.25; color: #F4EFEC;67  }68  .body .mono { font-family: "Roboto Mono", monospace; letter-spacing: 1px; }69 70  /* Keyboard mock */71  .keyboard {72    position: absolute; left: 0; right: 0; bottom: 90px;73    height: 840px; background: #231A18;74    border-top: 1px solid #3B302D;75    padding: 22px 24px;76  }77  .kb-toolbar {78    display: flex; align-items: center; gap: 22px; margin-bottom: 18px;79  }80  .kb-round {81    width: 92px; height: 92px; border-radius: 46px;82    background: #E5C2BD; display: flex; align-items: center; justify-content: center;83    color: #3D2E2B; font-size: 42px; font-weight: 600;84  }85  .kb-tool {86    width: 92px; height: 92px; border-radius: 20px;87    background: #2E2523; display: flex; align-items: center; justify-content: center;88  }89  .kb-tool svg { width: 48px; height: 48px; stroke: #E8DDD8; fill: none; stroke-width: 4; }90 91  .keyboard-row {92    display: flex; justify-content: center; gap: 18px;93    margin: 16px 0;94  }95  .key {96    width: 92px; height: 110px; border-radius: 22px;97    background: #2F2725; color: #E8DDD8; 98    display: flex; align-items: center; justify-content: center;99    font-size: 42px; font-weight: 500;100  }101  .key.wide { width: 170px; }102  .key.space { flex: 1; min-width: 420px; }103  .key.pink { background: #E5C2BD; color: #2B1F1D; }104  .key.icon svg { width: 50px; height: 50px; stroke: #E8DDD8; fill: none; stroke-width: 4; }105  .keyboard .divider { width: 1px; height: 54px; background: #3B302D; margin: 0 10px; }106 107  /* Gesture bar */108  .gesture-bar {109    position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);110    width: 380px; height: 14px; border-radius: 7px; background: #D7D3D0; opacity: 0.6;111  }112</style>113</head>114<body>115<div id="render-target">116  <!-- Status bar -->117  <div class="status-bar">118    <div>3:55</div>119    <div class="sb-icons">120      <div class="sb-icon">121        <!-- Signal/WiFi -->122        <svg viewBox="0 0 24 24">123          <path d="M2 9c5-5 15-5 20 0" />124          <path d="M6 13c3-3 9-3 12 0" />125          <path d="M10 17c1-1 3-1 4 0" />126          <circle cx="12" cy="20" r="1.5" fill="#F2E8E4"></circle>127        </svg>128      </div>129      <div class="sb-icon">130        <!-- Battery -->131        <svg viewBox="0 0 26 24">132          <rect x="2" y="5" width="18" height="14" rx="2"></rect>133          <rect x="21" y="9" width="3" height="6" rx="1"></rect>134          <rect x="4.5" y="7.5" width="12" height="9" fill="#F2E8E4"></rect>135        </svg>136      </div>137    </div>138  </div>139 140  <!-- App bar -->141  <div class="app-bar">142    <div class="app-left">143      <div class="icon-btn back">144        <svg viewBox="0 0 24 24">145          <path d="M15 5 L7 12 L15 19" />146        </svg>147      </div>148      <div class="app-title">Compose</div>149    </div>150    <div class="app-right">151      <div class="icon-btn">152        <!-- paperclip -->153        <svg viewBox="0 0 24 24">154          <path d="M7 12l7-7c2-2 5 1 3 3l-9 9c-3 3-7-1-4-4l9-9" />155        </svg>156      </div>157      <div class="icon-btn">158        <!-- send/paper plane -->159        <svg viewBox="0 0 24 24">160          <path d="M3 11l18-8-8 18-2-7-8-3z" />161        </svg>162      </div>163      <div class="icon-btn more">164        <!-- vertical dots -->165        <svg viewBox="0 0 24 24">166          <circle cx="12" cy="5" r="1.8" fill="#E9C9C4"></circle>167          <circle cx="12" cy="12" r="1.8" fill="#E9C9C4"></circle>168          <circle cx="12" cy="19" r="1.8" fill="#E9C9C4"></circle>169        </svg>170      </div>171    </div>172  </div>173 174  <!-- Content -->175  <div class="content">176    <div class="field">177      <div class="label">From</div>178      <div class="value">dbwscratch.test.id6@gmail.com</div>179    </div>180    <div class="field">181      <div class="label">To</div>182      <div class="to-chevron">183        <svg viewBox="0 0 24 24">184          <path d="M6 9l6 6 6-6" />185        </svg>186      </div>187    </div>188 189    <div class="subject">Reminder App</div>190 191    <div class="body">192      <div class="mono">====================</div>193      <div>Reminder<br>in 7 days</div>194      <div class="mono">====================</div>195      <div style="margin-top: 48px;">Nbc News</div>196    </div>197  </div>198 199  <!-- Keyboard -->200  <div class="keyboard">201    <div class="kb-toolbar">202      <div class="kb-round">‹</div>203      <div class="kb-tool">204        <!-- translate/G icon -->205        <svg viewBox="0 0 24 24">206          <path d="M4 18h8l-4-10-4 10z" />207          <path d="M16 6h4v4h-4zM14 14h6" />208        </svg>209      </div>210      <div class="kb-tool">211        <svg viewBox="0 0 24 24">212          <circle cx="12" cy="12" r="8"></circle>213          <path d="M12 4v16M4 12h16" />214        </svg>215      </div>216      <div class="kb-tool">217        <svg viewBox="0 0 24 24">218          <circle cx="12" cy="12" r="8"></circle>219          <path d="M6 12h12M12 6v12" />220        </svg>221      </div>222      <div class="kb-tool">223        <svg viewBox="0 0 24 24">224          <rect x="4" y="6" width="16" height="12" rx="2"></rect>225          <path d="M9 10h6M9 14h6" />226        </svg>227      </div>228      <div class="divider"></div>229      <div class="kb-tool">230        <svg viewBox="0 0 24 24">231          <circle cx="12" cy="12" r="8"></circle>232          <path d="M12 8v8M9 11h6" />233        </svg>234      </div>235      <div class="kb-tool">236        <!-- mic -->237        <svg viewBox="0 0 24 24">238          <rect x="9" y="5" width="6" height="10" rx="3"></rect>239          <path d="M6 11a6 6 0 0 0 12 0M12 17v3" />240        </svg>241      </div>242    </div>243 244    <div class="keyboard-row">245      <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>246      <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>247    </div>248    <div class="keyboard-row">249      <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>250      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>251    </div>252    <div class="keyboard-row">253      <div class="key icon">254        <!-- home/shift placeholder -->255        <svg viewBox="0 0 24 24">256          <path d="M3 13l9-7 9 7M7 10v8h10v-8" />257        </svg>258      </div>259      <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>260      <div class="key">b</div><div class="key">n</div><div class="key">m</div>261      <div class="key icon wide">262        <!-- backspace -->263        <svg viewBox="0 0 24 24">264          <path d="M5 7l-3 5 3 5h14a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2H5z" />265          <path d="M10 9l6 6M16 9l-6 6" />266        </svg>267      </div>268    </div>269    <div class="keyboard-row">270      <div class="key pink">?123</div>271      <div class="key">@</div>272      <div class="key">☺</div>273      <div class="key space"></div>274      <div class="key">.</div>275      <div class="key pink icon">276        <!-- enter / send -->277        <svg viewBox="0 0 24 24">278          <path d="M4 12h12l-4-4M16 12l-4 4" />279        </svg>280      </div>281    </div>282  </div>283 284  <div class="gesture-bar"></div>285</div>286</body>287</html>