GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Compose Email - Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">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: #1f1918; /* dark brown/black */13    color: #f3eeeb; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;14  }15  .status-bar {16    position: absolute; top: 0; left: 0; right: 0;17    height: 96px; padding: 0 32px;18    display: flex; align-items: center; justify-content: space-between;19    color: #ffffffcc; font-size: 36px;20  }21  .status-right { display: flex; align-items: center; gap: 20px; }22  .appbar {23    position: absolute; top: 96px; left: 0; right: 0;24    height: 140px; padding: 0 28px;25    display: flex; align-items: center; justify-content: space-between;26    color: #ead0cd;27    border-bottom: 2px solid #2a2221;28  }29  .appbar .title { font-size: 56px; font-weight: 600; letter-spacing: 0.2px; }30  .appbar-left, .appbar-right { display: flex; align-items: center; gap: 34px; }31  .icon { width: 56px; height: 56px; }32  .icon path, .icon rect, .icon circle { fill: #ead0cd; }33  .field-row {34    position: absolute; left: 32px; right: 32px;35    display: flex; align-items: center; justify-content: space-between;36    color: #d8cbc8;37    font-size: 40px;38  }39  .divider {40    position: absolute; left: 32px; right: 32px; height: 2px; background: #2a2221;41  }42  .from-row { top: 276px; }43  .from-email { color: #ffffff; }44  .divider.from { top: 338px; }45  .to-row { top: 360px; }46  .divider.to { top: 422px; }47  .subject {48    position: absolute; left: 32px; right: 32px; top: 470px;49    font-size: 44px; color: #9fa1a5; padding-bottom: 24px;50    border-bottom: 2px solid #2a2221;51  }52  .body {53    position: absolute; left: 32px; right: 32px; top: 600px; bottom: 980px;54    font-size: 44px; line-height: 1.5;55    color: #ffffff;56  }57  .body .title { font-size: 52px; font-weight: 600; margin-bottom: 10px; }58  .body .meta { color: #e9e6e4; }59  .wavy-underline {60    position: relative; display: inline-block;61    color: #ffffff; padding-bottom: 6px;62  }63  .wavy-underline::after {64    content: ""; position: absolute; left: 0; right: 0; bottom: 0;65    height: 2px; background:66      repeating-linear-gradient(90deg, #d25b5b 0 12px, transparent 12px 18px);67  }68 69  /* keyboard mock */70  .keyboard {71    position: absolute; left: 0; right: 0; bottom: 60px;72    height: 930px; background: #231c1a;73    border-top: 2px solid #2c2322;74  }75  .kb-toolbar {76    height: 120px; display: flex; align-items: center; gap: 40px;77    padding: 0 32px; color: #cfc4c1;78  }79  .kb-toolbar .pill {80    width: 84px; height: 84px; border-radius: 24px;81    background: #2f2726; display: flex; align-items: center; justify-content: center;82  }83  .kb-toolbar .right { margin-left: auto; }84  .kb-rows { padding: 0 22px; }85  .kb-row { display: flex; justify-content: center; gap: 18px; margin-top: 24px; }86  .key {87    width: 92px; height: 112px; border-radius: 18px;88    background: #2f2827; color: #e9e4e1; display: flex;89    align-items: center; justify-content: center; font-size: 44px; box-shadow: inset 0 0 0 1px #3a2f2e;90  }91  .key.wide { width: 220px; }92  .key.space { flex: 1; min-width: 380px; }93  .key.pink {94    background: #e5c1bd; color: #2d2322; font-weight: 600;95    box-shadow: none;96  }97  .key.icon { color: #e9e4e1; }98  .kb-bottom { display: flex; align-items: center; gap: 18px; padding: 24px 22px; }99  .chevron {100    position: absolute; left: 520px; bottom: 990px; width: 40px; height: 24px;101    border-left: 6px solid #cbb6b3; border-right: 6px solid #cbb6b3;102    border-top: 6px solid transparent; border-bottom: 6px solid #cbb6b3;103    transform: translateX(-20px);104  }105  .gesture-pill {106    position: absolute; bottom: 18px; left: 50%;107    width: 200px; height: 12px; background: #dcdcdc;108    border-radius: 8px; transform: translateX(-50%);109    opacity: 0.8;110  }111  .hint { color: #9fa1a5; }112</style>113</head>114<body>115<div id="render-target">116 117  <!-- Status bar -->118  <div class="status-bar">119    <div>8:07</div>120    <div class="status-right">121      <!-- simple icons -->122      <svg class="icon" viewBox="0 0 24 24">123        <path d="M3 17h18a7 7 0 0 0-18 0z" opacity="0.6"></path>124        <path d="M6 17h12a4 4 0 0 0-12 0z"></path>125      </svg>126      <svg class="icon" viewBox="0 0 24 24">127        <rect x="3" y="7" width="16" height="10" rx="2" ry="2"></rect>128        <rect x="19" y="10" width="2" height="4"></rect>129      </svg>130    </div>131  </div>132 133  <!-- App bar -->134  <div class="appbar">135    <div class="appbar-left">136      <svg class="icon" viewBox="0 0 24 24">137        <path d="M15 18L9 12l6-6" stroke="#ead0cd" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>138      </svg>139      <div class="title">Compose</div>140    </div>141    <div class="appbar-right">142      <svg class="icon" viewBox="0 0 24 24">143        <path d="M3 6l7-3 7 3-7 3-7-3zm0 6l7 3 7-3" opacity="0.85"></path>144      </svg>145      <svg class="icon" viewBox="0 0 24 24">146        <path d="M4 20l9-8-9-8v6h16v4H4z"></path>147      </svg>148      <svg class="icon" viewBox="0 0 24 24">149        <circle cx="12" cy="5" r="2"></circle>150        <circle cx="12" cy="12" r="2"></circle>151        <circle cx="12" cy="19" r="2"></circle>152      </svg>153    </div>154  </div>155 156  <!-- From row -->157  <div class="field-row from-row">158    <div>From</div>159    <div class="from-email">dbwscratch.test.id6@gmail.com</div>160  </div>161  <div class="divider from"></div>162 163  <!-- To row -->164  <div class="field-row to-row">165    <div>To</div>166    <svg class="icon" viewBox="0 0 24 24">167      <path d="M6 9l6 6 6-6" stroke="#d8cbc8" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>168    </svg>169  </div>170  <div class="divider to"></div>171 172  <!-- Subject -->173  <div class="subject">Subject</div>174 175  <!-- Body text -->176  <div class="body">177    <div class="title">Weeding plan</div>178    <div class="meta">Due Date: Jul 19, 12:30pm</div>179    <div style="height: 30px;"></div>180    <div>From <span class="wavy-underline">TickTick</span>:</div>181    <div>www.ticktick.com</div>182  </div>183 184  <!-- keyboard quick chevron -->185  <div class="chevron"></div>186 187  <!-- Keyboard -->188  <div class="keyboard">189    <div class="kb-toolbar">190      <div class="pill">191        <svg width="38" height="38" viewBox="0 0 24 24">192          <path d="M4 4h6v6H4V4zm10 0h6v6h-6V4zM4 14h6v6H4v-6zm10 0h6v6h-6v-6z" fill="#cfc4c1"></path>193        </svg>194      </div>195      <div class="pill">196        <svg width="38" height="38" viewBox="0 0 24 24">197          <path d="M12 13c3.4 0 6-2.1 6-4.7S15.4 3.6 12 3.6 6 5.7 6 8.3s2.6 4.7 6 4.7zm0 2.4c-4 0-7.3 2.1-7.3 4.7h14.6c0-2.6-3.3-4.7-7.3-4.7z" fill="#cfc4c1"></path>198        </svg>199      </div>200      <div style="font-size:42px;">GIF</div>201      <div class="pill"><span style="font-size:40px;">Gᵗˣ</span></div>202      <div class="pill">203        <svg width="38" height="38" viewBox="0 0 24 24">204          <path d="M12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm8 4a8 8 0 1 1-16 0h2a6 6 0 1 0 12 0h2z" fill="#cfc4c1"></path>205        </svg>206      </div>207      <div class="pill">208        <svg width="38" height="38" viewBox="0 0 24 24">209          <path d="M12 3l2.5 6.5L21 12l-6.5 2.5L12 21l-2.5-6.5L3 12l6.5-2.5L12 3z" fill="#cfc4c1"></path>210        </svg>211      </div>212      <div class="pill right">213        <svg width="38" height="38" viewBox="0 0 24 24">214          <path d="M12 3a4 4 0 0 0-4 4v6a4 4 0 0 0 8 0V7a4 4 0 0 0-4-4zm-6 16h12v2H6v-2z" fill="#cfc4c1"></path>215        </svg>216      </div>217    </div>218 219    <div class="kb-rows">220      <div class="kb-row">221        <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><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>222      </div>223      <div class="kb-row">224        <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><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>225      </div>226      <div class="kb-row">227        <div class="key">⇧</div>228        <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>229        <div class="key icon">230          <svg width="40" height="40" viewBox="0 0 24 24">231            <path d="M15 12l-6 4V8l6 4z" fill="#e9e4e1"></path>232          </svg>233        </div>234      </div>235      <div class="kb-row">236        <div class="key pink">?123</div>237        <div class="key">@</div>238        <div class="key">☺</div>239        <div class="key space"></div>240        <div class="key">.</div>241        <div class="key pink">242          <svg width="44" height="44" viewBox="0 0 24 24">243            <path d="M4 12h12l-4-4 1.4-1.4L20.8 12l-7.4 5.4L12 16l4-4H4z" fill="#2d2322"></path>244          </svg>245        </div>246      </div>247    </div>248  </div>249 250  <div class="gesture-pill"></div>251</div>252</body>253</html>