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 Mock</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: "Roboto", Arial, sans-serif;13    color: #ECEFF1;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #121212;21    border-radius: 36px;22    box-shadow: 0 20px 60px rgba(0,0,0,0.35);23  }24 25  /* Status bar */26  .status-bar {27    position: absolute;28    top: 0;29    left: 0;30    height: 110px;31    width: 100%;32    background: #0f0f10;33    display: flex;34    align-items: center;35    padding: 0 36px;36    box-sizing: border-box;37  }38  .status-left {39    font-size: 36px;40    font-weight: 500;41    color: #E8EAED;42  }43  .status-right {44    margin-left: auto;45    display: flex;46    align-items: center;47    gap: 28px;48  }49  .status-icon svg {50    width: 44px;51    height: 44px;52    fill: none;53    stroke: #E8EAED;54    stroke-width: 3;55  }56 57  /* Top action bar */58  .top-actions {59    position: absolute;60    top: 110px;61    left: 0;62    height: 120px;63    width: 100%;64    display: flex;65    align-items: center;66    padding: 0 24px;67    box-sizing: border-box;68    color: #ECEFF1;69  }70  .action-left {71    display: flex;72    align-items: center;73    gap: 20px;74  }75  .action-right {76    margin-left: auto;77    display: flex;78    align-items: center;79    gap: 40px;80  }81  .icon-btn svg {82    width: 56px;83    height: 56px;84    stroke: #ECEFF1;85    fill: none;86    stroke-width: 3.2;87  }88 89  /* Fields */90  .field {91    position: absolute;92    left: 0;93    width: 100%;94    padding: 0 36px;95    box-sizing: border-box;96    display: flex;97    align-items: center;98    gap: 24px;99    color: #CFD8DC;100    border-top: 1px solid #1E1E1E;101  }102  .field .label {103    width: 110px;104    font-size: 28px;105    color: #9AA0A6;106  }107  .field .value {108    font-size: 32px;109    color: #ECEFF1;110    flex: 1;111    white-space: nowrap;112    overflow: hidden;113    text-overflow: ellipsis;114  }115  .dropdown svg {116    width: 40px;117    height: 40px;118    stroke: #9AA0A6;119    fill: none;120    stroke-width: 3;121  }122 123  /* Subject */124  .subject {125    position: absolute;126    left: 0;127    width: 100%;128    top: 430px;129    height: 120px;130    padding: 0 36px;131    display: flex;132    align-items: center;133    box-sizing: border-box;134    border-top: 1px solid #1E1E1E;135    color: #ECEFF1;136    font-size: 40px;137  }138 139  /* Body */140  .body-area {141    position: absolute;142    top: 560px;143    left: 0;144    width: 100%;145    bottom: 1540px; /* keyboard starts */146    padding: 36px;147    box-sizing: border-box;148    border-top: 1px solid #1E1E1E;149    color: #ECEFF1;150    font-size: 38px;151    line-height: 1.5;152  }153 154  /* Keyboard */155  .keyboard {156    position: absolute;157    left: 0;158    bottom: 80px;159    width: 100%;160    height: 820px;161    background: #1E1E1E;162    border-top-left-radius: 24px;163    border-top-right-radius: 24px;164    box-shadow: 0 -12px 32px rgba(0,0,0,0.4);165  }166  .kb-tools {167    height: 120px;168    display: flex;169    align-items: center;170    gap: 26px;171    padding: 0 26px;172    box-sizing: border-box;173  }174  .tool {175    width: 80px;176    height: 80px;177    border-radius: 16px;178    background: #2A2A2A;179    display: flex;180    align-items: center;181    justify-content: center;182    color: #B0BEC5;183    font-size: 26px;184  }185  .keys {186    padding: 12px 18px 0;187    box-sizing: border-box;188    display: grid;189    gap: 18px;190  }191  .row {192    display: flex;193    gap: 18px;194    justify-content: center;195  }196  .key {197    width: 90px;198    height: 120px;199    background: #2C2C2C;200    color: #ECEFF1;201    border-radius: 18px;202    display: flex;203    align-items: center;204    justify-content: center;205    font-size: 42px;206    box-shadow: inset 0 -2px 0 rgba(255,255,255,0.06);207  }208  .key.wide { width: 160px; }209  .key.extra-wide { width: 380px; }210  .key.circle {211    width: 120px;212    height: 120px;213    border-radius: 60px;214    background: #3A3A3A;215    font-size: 34px;216    color: #D1D5DB;217  }218  .key.light {219    background: #3C3C3D;220  }221  .enter {222    background: #89A7FF;223    color: #0D1B2A;224  }225 226  /* Bottom gesture bar */227  .gesture {228    position: absolute;229    left: 50%;230    transform: translateX(-50%);231    bottom: 22px;232    width: 320px;233    height: 10px;234    background: #EDEDED;235    border-radius: 6px;236    opacity: 0.85;237  }238</style>239</head>240<body>241<div id="render-target">242 243  <!-- Status bar -->244  <div class="status-bar">245    <div class="status-left">6:48</div>246    <div class="status-right">247      <div class="status-icon">248        <!-- Wi-Fi -->249        <svg viewBox="0 0 24 24">250          <path d="M2 8c5-4 15-4 20 0"></path>251          <path d="M5 12c4-3 10-3 14 0"></path>252          <path d="M8 16c3-2 5-2 8 0"></path>253          <circle cx="12" cy="19" r="1.8" fill="#E8EAED" stroke="none"></circle>254        </svg>255      </div>256      <div class="status-icon">257        <!-- Battery -->258        <svg viewBox="0 0 26 24">259          <rect x="2" y="6" width="18" height="12" rx="2"></rect>260          <rect x="21" y="9" width="3" height="6" rx="1" fill="#E8EAED" stroke="none"></rect>261          <rect x="4" y="8" width="12" height="8" rx="1" fill="#E8EAED" stroke="none"></rect>262        </svg>263      </div>264    </div>265  </div>266 267  <!-- Top actions -->268  <div class="top-actions">269    <div class="action-left">270      <!-- Back arrow -->271      <div class="icon-btn">272        <svg viewBox="0 0 24 24">273          <path d="M15 6L9 12l6 6"></path>274        </svg>275      </div>276    </div>277    <div class="action-right">278      <!-- Paperclip -->279      <div class="icon-btn">280        <svg viewBox="0 0 24 24">281          <path d="M7 13l7-7c1.5-1.5 4-1.5 5.5 0s1.5 4 0 5.5l-8 8c-2 2-5.5 2-7.5 0s-2-5.5 0-7.5l8-8"></path>282        </svg>283      </div>284      <!-- Send icon -->285      <div class="icon-btn">286        <svg viewBox="0 0 24 24">287          <path d="M3 12l18-8-6 8 6 8z"></path>288        </svg>289      </div>290      <!-- Kebab -->291      <div class="icon-btn">292        <svg viewBox="0 0 24 24">293          <circle cx="12" cy="5" r="2.2" fill="#ECEFF1" stroke="none"></circle>294          <circle cx="12" cy="12" r="2.2" fill="#ECEFF1" stroke="none"></circle>295          <circle cx="12" cy="19" r="2.2" fill="#ECEFF1" stroke="none"></circle>296        </svg>297      </div>298    </div>299  </div>300 301  <!-- From field -->302  <div class="field" style="top:230px; height:100px;">303    <div class="label">From</div>304    <div class="value">julesdupont205@gmail.com</div>305    <div class="dropdown">306      <svg viewBox="0 0 24 24">307        <path d="M5 9l7 7 7-7"></path>308      </svg>309    </div>310  </div>311 312  <!-- To field -->313  <div class="field" style="top:330px; height:100px;">314    <div class="label">To</div>315    <div class="value" style="color:#6F7B87;"> </div>316    <div class="dropdown">317      <svg viewBox="0 0 24 24">318        <path d="M5 9l7 7 7-7"></path>319      </svg>320    </div>321  </div>322 323  <!-- Subject -->324  <div class="subject">Check out DROUANT on OpenTable</div>325 326  <!-- Body area -->327  <div class="body-area">328    <p>I think you'd like this restaurant I found on OpenTable:</p>329    <p>DROUANT<br>16 rue Gaillon<br>75002 Paris</p>330    <p>https://www.opentable.co.uk/restaurant/profile/225846?ref=android-share&amp;refid=123</p>331  </div>332 333  <!-- Keyboard -->334  <div class="keyboard">335    <div class="kb-tools">336      <div class="tool">⌗</div>337      <div class="tool">🙂</div>338      <div class="tool">GIF</div>339      <div class="tool">⚙</div>340      <div class="tool">Gᵗʳ</div>341      <div class="tool">🎨</div>342      <div class="tool">🎤</div>343    </div>344    <div class="keys">345      <!-- Row 1 -->346      <div class="row" style="margin-top: 12px;">347        <div class="key">q</div>348        <div class="key">w</div>349        <div class="key">e</div>350        <div class="key">r</div>351        <div class="key">t</div>352        <div class="key">y</div>353        <div class="key">u</div>354        <div class="key">i</div>355        <div class="key">o</div>356        <div class="key">p</div>357      </div>358      <!-- Row 2 -->359      <div class="row">360        <div class="key">a</div>361        <div class="key">s</div>362        <div class="key">d</div>363        <div class="key">f</div>364        <div class="key">g</div>365        <div class="key">h</div>366        <div class="key">j</div>367        <div class="key">k</div>368        <div class="key">l</div>369        <div class="key circle light">⌫</div>370      </div>371      <!-- Row 3 -->372      <div class="row">373        <div class="key circle light">⇧</div>374        <div class="key">z</div>375        <div class="key">x</div>376        <div class="key">c</div>377        <div class="key">v</div>378        <div class="key">b</div>379        <div class="key">n</div>380        <div class="key">m</div>381        <div class="key circle enter">↩</div>382      </div>383      <!-- Bottom row -->384      <div class="row">385        <div class="key circle light">?123</div>386        <div class="key circle light">@</div>387        <div class="key circle light">🙂</div>388        <div class="key extra-wide">space</div>389        <div class="key circle light">.</div>390        <div class="key circle enter">➜</div>391      </div>392    </div>393  </div>394 395  <!-- Gesture bar -->396  <div class="gesture"></div>397</div>398</body>399</html>