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 - Smart Compose Tip</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #F0F0F0;15    font-family: Arial, Helvetica, sans-serif;16    color: #222;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    height: 96px;25    width: 100%;26    background: #d9dadc;27    color: #2a2a2a;28    font-weight: 600;29    font-size: 34px;30    display: flex;31    align-items: center;32    padding: 0 36px;33    box-sizing: border-box;34  }35  .status-bar .right-icons {36    margin-left: auto;37    display: flex;38    align-items: center;39    gap: 24px;40  }41  .circle-icon {42    width: 36px;43    height: 36px;44    background: #9aa0a6;45    border-radius: 50%;46    display: inline-block;47  }48  .battery {49    width: 48px;50    height: 26px;51    border: 3px solid #222;52    border-radius: 4px;53    position: relative;54    box-sizing: border-box;55    display: inline-block;56  }57  .battery:after {58    content: "";59    position: absolute;60    right: -8px;61    top: 6px;62    width: 6px;63    height: 12px;64    background: #222;65    border-radius: 2px;66  }67  .battery .level {68    position: absolute;69    left: 3px;70    top: 3px;71    height: 16px;72    width: 28px;73    background: #4CAF50;74  }75 76  /* App bar */77  .app-bar {78    position: absolute;79    top: 96px;80    left: 0;81    height: 140px;82    width: 100%;83    background: #eeeeee;84    display: flex;85    align-items: center;86    padding: 0 24px;87    box-sizing: border-box;88    border-bottom: 1px solid #d4d4d4;89  }90  .app-title {91    font-size: 56px;92    font-weight: 600;93    margin-left: 16px;94  }95  .app-actions {96    margin-left: auto;97    display: flex;98    gap: 28px;99    align-items: center;100  }101  .icon-btn {102    width: 60px;103    height: 60px;104    display: inline-flex;105    align-items: center;106    justify-content: center;107    border-radius: 30px;108  }109  .icon {110    width: 48px;111    height: 48px;112  }113 114  /* Compose content */115  .compose-content {116    position: absolute;117    top: 236px;118    left: 0;119    width: 100%;120    padding: 28px 36px;121    box-sizing: border-box;122    color: #333;123  }124  .field-row {125    display: flex;126    align-items: center;127    justify-content: space-between;128    padding: 24px 0;129    border-bottom: 1px solid #e2e2e2;130  }131  .label {132    font-size: 42px;133    color: #444;134    width: 120px;135  }136  .value {137    font-size: 40px;138    color: #222;139    flex: 1;140  }141  .subject {142    margin-top: 26px;143    font-size: 44px;144    color: #222;145  }146 147  /* Dim overlay and modal card */148  .overlay {149    position: absolute;150    left: 0;151    top: 0;152    width: 1080px;153    height: 2400px;154    background: rgba(0,0,0,0.35);155  }156  .card {157    position: absolute;158    left: 70px;159    top: 760px;160    width: 940px;161    height: 920px;162    background: #E6EFDF;163    border-radius: 28px;164    box-shadow: 0 24px 60px rgba(0,0,0,0.35);165    border: 1px solid #d6decf;166    display: flex;167    flex-direction: column;168    align-items: center;169  }170  .illustration {171    width: 760px;172    height: 420px;173    margin-top: 70px;174    background: #E0E0E0;175    border: 1px solid #BDBDBD;176    border-radius: 22px;177    color: #757575;178    display: flex;179    align-items: center;180    justify-content: center;181    font-size: 34px;182  }183  .card-title {184    margin-top: 50px;185    font-size: 72px;186    font-weight: 700;187    color: #111;188    letter-spacing: 0.3px;189  }190  .card-desc {191    margin-top: 18px;192    width: 820px;193    text-align: center;194    font-size: 36px;195    color: #333;196    line-height: 1.4;197  }198  .card-action {199    position: absolute;200    right: 38px;201    bottom: 28px;202    font-size: 36px;203    color: #2e7d32;204    font-weight: 600;205  }206 207  /* Keyboard mock */208  .keyboard {209    position: absolute;210    left: 0;211    bottom: 0;212    width: 100%;213    height: 760px;214    background: #D7D9DB;215    border-top: 1px solid #c7c7c7;216    padding: 24px 18px 40px;217    box-sizing: border-box;218  }219  .key-row {220    display: flex;221    gap: 18px;222    margin-bottom: 26px;223    justify-content: center;224  }225  .key {226    width: 84px;227    height: 108px;228    background: #E6E7E8;229    border-radius: 18px;230    box-shadow: inset 0 2px 0 rgba(255,255,255,0.7);231  }232  .key.wide { width: 180px; }233  .key.space { width: 520px; }234  .key.action {235    background: #C9D4C6;236  }237  .gesture-pill {238    position: absolute;239    bottom: 20px;240    left: 50%;241    transform: translateX(-50%);242    width: 260px;243    height: 14px;244    background: #ffffff;245    border-radius: 8px;246    opacity: 0.85;247  }248</style>249</head>250<body>251<div id="render-target">252  <!-- Status bar -->253  <div class="status-bar">254    <div>3:59</div>255    <div style="margin-left: 16px; color:#4a4a4a; font-size:32px;">32°</div>256    <div class="right-icons">257      <span class="circle-icon" title="Globe"></span>258      <span class="circle-icon" title="Cell"></span>259      <span class="circle-icon" title="Cloud"></span>260      <span class="battery"><span class="level"></span></span>261    </div>262  </div>263 264  <!-- App bar -->265  <div class="app-bar">266    <!-- Back arrow -->267    <svg class="icon" viewBox="0 0 24 24">268      <path d="M15 6l-6 6 6 6" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>269    </svg>270    <div class="app-title">Compose</div>271    <div class="app-actions">272      <!-- Attach icon -->273      <div class="icon-btn">274        <svg class="icon" viewBox="0 0 24 24">275          <path d="M7 13l7-7a4 4 0 015 5l-8 8a6 6 0 01-9-9l7-7" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>276        </svg>277      </div>278      <!-- Send icon -->279      <div class="icon-btn">280        <svg class="icon" viewBox="0 0 24 24">281          <path d="M3 12l18-8-8 18-3-7-7-3z" fill="#222"></path>282        </svg>283      </div>284      <!-- More icon -->285      <div class="icon-btn">286        <svg class="icon" viewBox="0 0 24 24">287          <circle cx="5" cy="12" r="2" fill="#222"></circle>288          <circle cx="12" cy="12" r="2" fill="#222"></circle>289          <circle cx="19" cy="12" r="2" fill="#222"></circle>290        </svg>291      </div>292    </div>293  </div>294 295  <!-- Compose fields -->296  <div class="compose-content">297    <div class="field-row">298      <div class="label">From</div>299      <div class="value">dbwscratch.test.id2@gmail.com</div>300    </div>301 302    <div class="field-row" style="border-bottom: none;">303      <div class="label">To</div>304      <div class="value" style="color:#4a4a4a;">|</div>305      <svg class="icon" viewBox="0 0 24 24" style="margin-left: 12px;">306        <path d="M6 9l6 6 6-6" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>307      </svg>308    </div>309 310    <div class="subject">Weather&Radar - know your weather</div>311    <div style="margin-top: 22px; font-size: 40px; color:#545454;">Weather&Radar - know your weather has...</div>312  </div>313 314  <!-- Overlay and Smart Compose card -->315  <div class="overlay"></div>316  <div class="card">317    <div class="illustration">[IMG: Smart Compose Illustration]</div>318    <div class="card-title">Smart Compose</div>319    <div class="card-desc">320      Writing suggestions appear as you type. Swipe right to accept.321    </div>322    <div class="card-action">Got it</div>323  </div>324 325  <!-- Keyboard mock -->326  <div class="keyboard">327    <div class="key-row">328      <div class="key action"></div>329      <div class="key"></div>330      <div class="key"></div>331      <div class="key"></div>332      <div class="key"></div>333      <div class="key"></div>334      <div class="key"></div>335      <div class="key"></div>336      <div class="key"></div>337      <div class="key"></div>338    </div>339    <div class="key-row">340      <div class="key"></div>341      <div class="key"></div>342      <div class="key"></div>343      <div class="key"></div>344      <div class="key"></div>345      <div class="key"></div>346      <div class="key"></div>347      <div class="key"></div>348      <div class="key action"></div>349    </div>350    <div class="key-row">351      <div class="key"></div>352      <div class="key"></div>353      <div class="key"></div>354      <div class="key"></div>355      <div class="key"></div>356      <div class="key"></div>357      <div class="key"></div>358      <div class="key"></div>359      <div class="key action"></div>360    </div>361    <div class="key-row">362      <div class="key wide action"></div>363      <div class="key wide"></div>364      <div class="key space"></div>365      <div class="key wide"></div>366      <div class="key wide action"></div>367    </div>368    <div class="gesture-pill"></div>369  </div>370</div>371</body>372</html>