GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Mobile UI - Gmail Compose</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14  }15 16  /* Status bar */17  .status-bar {18    height: 96px;19    padding: 0 32px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #212121;24    font-size: 34px;25  }26  .status-left { display: flex; align-items: center; gap: 16px; }27  .status-right { display: flex; align-items: center; gap: 22px; }28  .icon {29    width: 40px; height: 40px;30  }31 32  /* Toolbar */33  .toolbar {34    height: 170px;35    display: flex;36    align-items: center;37    padding: 0 24px;38    border-bottom: 1px solid #e0e0e0;39  }40  .toolbar-left { display: flex; align-items: center; gap: 20px; }41  .toolbar-title {42    font-size: 56px;43    color: #212121;44    font-weight: 600;45    letter-spacing: 0.2px;46  }47  .toolbar-actions {48    margin-left: auto;49    display: flex;50    align-items: center;51    gap: 28px;52  }53  .toolbar .icon { width: 48px; height: 48px; color: #424242; }54 55  /* Content */56  .content { padding: 24px 48px; }57  .row {58    display: flex;59    align-items: center;60    padding: 26px 0;61    border-bottom: 1px solid #eeeeee;62  }63  .label {64    color: #757575;65    font-size: 34px;66    min-width: 120px;67  }68  .value {69    color: #212121;70    font-size: 38px;71  }72  .chevron { margin-left: auto; width: 42px; height: 42px; color: #757575; }73  .placeholder-text {74    color: #9e9e9e;75    font-size: 42px;76    padding: 32px 0 16px 0;77  }78 79  /* Attachment card */80  .attachment-card {81    width: calc(100% - 96px);82    margin: 24px auto;83    border-radius: 16px;84    box-shadow: 0 2px 0 rgba(0,0,0,0.06), 0 3px 10px rgba(0,0,0,0.08);85    overflow: hidden;86    border: 1px solid #e0e0e0;87    background: #f5f7fa;88  }89  .attachment-preview {90    height: 360px;91    background: #E0E0E0;92    border-bottom: 1px solid #BDBDBD;93    display: flex;94    justify-content: center;95    align-items: center;96    color: #757575;97    font-size: 38px;98  }99  .file-row {100    background: #e6edf3;101    padding: 22px 28px;102    display: flex;103    align-items: center;104    gap: 24px;105  }106  .thumb {107    width: 68px;108    height: 68px;109    border-radius: 8px;110    background: #d84315; /* reddish image icon tile */111    display: flex;112    align-items: center;113    justify-content: center;114  }115  .file-info {116    display: flex;117    flex-direction: column;118    line-height: 1.2;119  }120  .file-name {121    color: #212121;122    font-size: 36px;123  }124  .file-size {125    color: #607d8b;126    font-size: 28px;127    margin-top: 6px;128  }129  .file-action {130    margin-left: auto;131    width: 44px;132    height: 44px;133    color: #424242;134    cursor: default;135  }136 137  /* Bottom gesture pill (visual) */138  .gesture-pill {139    position: absolute;140    bottom: 36px;141    left: 50%;142    transform: translateX(-50%);143    width: 360px;144    height: 12px;145    background: #8d8d8d;146    border-radius: 12px;147    opacity: 0.7;148  }149</style>150</head>151<body>152<div id="render-target">153 154  <!-- Status bar -->155  <div class="status-bar">156    <div class="status-left">157      <div>1:15</div>158      <!-- simple cloud icon -->159      <svg class="icon" viewBox="0 0 24 24">160        <path d="M6 15h10a4 4 0 0 0 0-8 5 5 0 0 0-9-2 4 4 0 0 0-1 8z" fill="#757575"/>161      </svg>162    </div>163    <div class="status-right">164      <!-- signal icon -->165      <svg class="icon" viewBox="0 0 24 24">166        <path d="M3 17h2v2H3zm4-4h2v6H7zm4-3h2v9h-2zm4-4h2v13h-2z" fill="#616161"/>167      </svg>168      <!-- wifi icon -->169      <svg class="icon" viewBox="0 0 24 24">170        <path d="M12 18l-2 2 2 2 2-2-2-2zm-6-6l2 2a6 6 0 0 1 8 0l2-2a8 8 0 0 0-12 0zm-4-4l2 2a12 12 0 0 1 16 0l2-2a14 14 0 0 0-20 0z" fill="#616161"/>171      </svg>172      <!-- battery icon -->173      <svg class="icon" viewBox="0 0 24 24">174        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#616161" stroke-width="2"/>175        <rect x="4" y="8" width="12" height="8" fill="#616161"/>176        <rect x="20" y="10" width="2" height="6" fill="#616161"/>177      </svg>178    </div>179  </div>180 181  <!-- Toolbar -->182  <div class="toolbar">183    <div class="toolbar-left">184      <!-- back arrow -->185      <svg class="icon" viewBox="0 0 24 24">186        <path d="M15 6l-6 6 6 6" fill="none" stroke="#424242" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>187      </svg>188      <div class="toolbar-title">Compose</div>189    </div>190    <div class="toolbar-actions">191      <!-- paperclip -->192      <svg class="icon" viewBox="0 0 24 24">193        <path d="M7 13l7-7a4 4 0 0 1 6 6l-8 8a6 6 0 0 1-9-9l7-7" fill="none" stroke="#424242" stroke-width="2" stroke-linecap="round"/>194      </svg>195      <!-- send -->196      <svg class="icon" viewBox="0 0 24 24">197        <path d="M4 12l16-7-5 7 5 7-16-7z" fill="#424242"/>198      </svg>199      <!-- more menu -->200      <svg class="icon" viewBox="0 0 24 24">201        <circle cx="12" cy="5" r="2" fill="#424242"/>202        <circle cx="12" cy="12" r="2" fill="#424242"/>203        <circle cx="12" cy="19" r="2" fill="#424242"/>204      </svg>205    </div>206  </div>207 208  <!-- Content -->209  <div class="content">210    <div class="row">211      <div class="label">From</div>212      <div class="value">dbwscratch.test.id8@gmail.com</div>213    </div>214 215    <div class="row">216      <div class="label">To</div>217      <div class="value" style="color:#9e9e9e;">|</div>218      <!-- dropdown chevron -->219      <svg class="chevron" viewBox="0 0 24 24">220        <path d="M6 9l6 6 6-6" fill="none" stroke="#757575" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>221      </svg>222    </div>223 224    <div class="row">225      <div class="label">Subject</div>226      <div class="value" style="color:#9e9e9e;">|</div>227    </div>228 229    <div class="placeholder-text">Compose email</div>230 231    <!-- Attachment card -->232    <div class="attachment-card">233      <div class="attachment-preview">[IMG: 1h Active time graphic]</div>234      <div class="file-row">235        <div class="thumb">236          <svg viewBox="0 0 24 24" width="28" height="28">237            <rect x="3" y="5" width="18" height="14" rx="2" fill="#ffffff"/>238            <path d="M6 15l3-3 4 4 4-6 3 5H6z" fill="#c62828"/>239          </svg>240        </div>241        <div class="file-info">242          <div class="file-name">temp_shared_bi...419875146.png</div>243          <div class="file-size">24 KB</div>244        </div>245        <svg class="file-action" viewBox="0 0 24 24">246          <path d="M6 6l12 12M18 6L6 18" stroke="#424242" stroke-width="2" stroke-linecap="round"/>247        </svg>248      </div>249    </div>250  </div>251 252  <div class="gesture-pill"></div>253</div>254</body>255</html>