GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Email Compose Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #1b120d; /* dark brown */14    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;15    color: #e8d9c8;16  }17  .status-bar {18    height: 96px;19    padding: 0 32px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #f0e3d6;24    font-size: 36px;25    letter-spacing: 1px;26  }27  .status-icons {28    display: flex;29    align-items: center;30    gap: 18px;31  }32  .top-bar {33    height: 152px;34    display: flex;35    align-items: center;36    padding: 0 24px;37    border-top: 1px solid #2c211b;38    border-bottom: 1px solid #2c211b;39  }40  .top-left {41    width: 120px;42    display: flex;43    align-items: center;44    justify-content: center;45  }46  .top-right {47    margin-left: auto;48    display: flex;49    align-items: center;50    gap: 38px;51    padding-right: 12px;52  }53  .icon {54    width: 56px;55    height: 56px;56    fill: #e8d9c8;57    opacity: 0.9;58  }59  .section {60    padding: 28px 32px 26px 32px;61    border-bottom: 1px solid #2c211b;62  }63  .field-label {64    color: #bba89a;65    font-size: 30px;66    margin-bottom: 8px;67  }68  .field-row {69    display: flex;70    align-items: center;71    justify-content: space-between;72  }73  .field-value {74    font-size: 36px;75    color: #e8d9c8;76    white-space: nowrap;77    overflow: hidden;78    text-overflow: ellipsis;79  }80  .caret {81    width: 36px;82    height: 36px;83    fill: #cdbdac;84    opacity: 0.9;85  }86  .subject {87    font-size: 44px;88    color: #d9c6b6;89    font-weight: 600;90    padding-top: 40px;91    padding-bottom: 44px;92  }93  .message {94    padding: 36px 32px 40px 32px;95    line-height: 1.5;96    font-size: 38px;97    white-space: pre-wrap;98    color: #ffffff;99  }100  .keyboard {101    position: absolute;102    left: 0;103    right: 0;104    bottom: 120px;105    height: 720px;106    background: #231a15;107    border-top: 1px solid #2f2520;108    display: flex;109    flex-direction: column;110    padding: 18px 16px;111    box-sizing: border-box;112  }113  .kb-top {114    display: flex;115    justify-content: space-between;116    padding: 8px 14px 18px;117  }118  .kb-top .kb-icon {119    width: 64px; height: 64px; border-radius: 16px;120    background: #2c231d; display: flex; align-items: center; justify-content: center;121  }122  .kb-rows { display: grid; grid-template-rows: repeat(4, 1fr); gap: 14px; }123  .kb-row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 12px; }124  .key {125    background: #2d241e;126    border-radius: 18px;127    color: #e9d3c2;128    display: flex; align-items: center; justify-content: center;129    font-size: 34px; height: 96px;130    box-shadow: inset 0 -2px 0 #241b16;131  }132  .key.wide { grid-column: span 2; }133  .key.extra-wide { grid-column: span 4; }134  .bottom-area {135    position: absolute;136    left: 0; right: 0; bottom: 0;137    height: 120px; background: transparent;138    display: flex; align-items: center; justify-content: center;139  }140  .home-pill {141    width: 280px; height: 10px; background: #e6e1dc; border-radius: 10px; opacity: 0.9;142  }143</style>144</head>145<body>146<div id="render-target">147 148  <!-- Status bar -->149  <div class="status-bar">150    <div>11:06</div>151    <div class="status-icons">152      <!-- simple network icon -->153      <svg class="icon" viewBox="0 0 24 24">154        <path d="M2 17h3v3H2v-3zm5-5h3v8H7v-8zm5-4h3v12h-3V8zm5-5h3v17h-3V3z"/>155      </svg>156      <!-- wifi -->157      <svg class="icon" viewBox="0 0 24 24">158        <path d="M12 20.5l-1.5-1.5a2.1 2.1 0 013 0L12 20.5zm6-6a8 8 0 00-12 0l-1.5-1.5a10 10 0 0115 0L18 14.5zm-3 3a4 4 0 00-6 0l-1.5-1.5a6 6 0 019 0L15 17.5z"/>159      </svg>160      <!-- battery -->161      <svg class="icon" viewBox="0 0 24 24">162        <path d="M17 6h2a2 2 0 012 2v8a2 2 0 01-2 2h-2v2H6V4h11v2zm0 2H8v8h9V8z"/>163      </svg>164    </div>165  </div>166 167  <!-- Top app bar -->168  <div class="top-bar">169    <div class="top-left">170      <!-- back arrow -->171      <svg class="icon" viewBox="0 0 24 24">172        <path d="M14.5 5l-7 7 7 7 1.5-1.5L10.5 12l5.5-5.5L14.5 5z"/>173      </svg>174    </div>175    <div class="top-right">176      <!-- attach -->177      <svg class="icon" viewBox="0 0 24 24">178        <path d="M7 12.5V6a5 5 0 019.9 0v8.5a3.5 3.5 0 11-7 0V7h2v7.5a1.5 1.5 0 003 0V6a3 3 0 10-6 0v6.5"/>179      </svg>180      <!-- send / paper plane -->181      <svg class="icon" viewBox="0 0 24 24">182        <path d="M3 12l18-9-6 18-3-7-9-2z"/>183      </svg>184      <!-- more -->185      <svg class="icon" viewBox="0 0 24 24">186        <circle cx="12" cy="5" r="2"/>187        <circle cx="12" cy="12" r="2"/>188        <circle cx="12" cy="19" r="2"/>189      </svg>190    </div>191  </div>192 193  <!-- From field -->194  <div class="section">195    <div class="field-label">From</div>196    <div class="field-row">197      <div class="field-value">naomirousseau5@gmail.com</div>198      <svg class="caret" viewBox="0 0 24 24">199        <path d="M7 10l5 5 5-5H7z"/>200      </svg>201    </div>202  </div>203 204  <!-- To field -->205  <div class="section">206    <div class="field-label">To</div>207    <div class="field-row">208      <div class="field-value" style="color:#8f7d70;"> </div>209      <svg class="caret" viewBox="0 0 24 24">210        <path d="M7 10l5 5 5-5H7z"/>211      </svg>212    </div>213  </div>214 215  <!-- Subject -->216  <div class="section subject">217    Infobus218  </div>219 220  <!-- Message body -->221  <div class="message">222https://infobus.eu/deeplink?223city_from=224&city_to=223&date_from=30.11.2242023&route_id=11626&time_from=08:10&time_225to=09:00226  </div>227 228  <!-- Keyboard mock -->229  <div class="keyboard">230    <div class="kb-top">231      <div class="kb-icon"></div>232      <div class="kb-icon"></div>233      <div class="kb-icon"></div>234      <div class="kb-icon"></div>235      <div class="kb-icon"></div>236      <div class="kb-icon"></div>237    </div>238    <div class="kb-rows">239      <div class="kb-row">240        <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>241      </div>242      <div class="kb-row">243        <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><div class="key"><svg width="28" height="28" viewBox="0 0 24 24" fill="#e9d3c2"><path d="M18 7l-5 5 5 5V7zM6 7h7v10H6z"/></svg></div>244      </div>245      <div class="kb-row">246        <div class="key wide">⇧</div><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><div class="key">.</div><div class="key wide">⌫</div>247      </div>248      <div class="kb-row">249        <div class="key wide">?123</div>250        <div class="key">@</div>251        <div class="key">☺</div>252        <div class="key extra-wide"></div>253        <div class="key">.</div>254        <div class="key wide">↵</div>255      </div>256    </div>257  </div>258 259  <!-- Bottom home pill -->260  <div class="bottom-area">261    <div class="home-pill"></div>262  </div>263 264</div>265</body>266</html>