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 UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #121212;15    color: #EDEDED;16  }17 18  .status-bar {19    height: 96px;20    padding: 0 32px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #E0E0E0;25    font-size: 36px;26    letter-spacing: 1px;27  }28  .status-icons { display: flex; align-items: center; gap: 20px; }29 30  .compose-header {31    height: 128px;32    display: flex;33    align-items: center;34    padding: 0 24px;35    border-bottom: 1px solid #2A2A2A;36  }37  .compose-header .left {38    display: flex; align-items: center; gap: 16px; flex: 1;39  }40  .compose-title { font-size: 48px; font-weight: 500; color: #EDEDED; }41  .compose-header .right { display: flex; align-items: center; gap: 32px; }42 43  .content {44    padding: 0 24px;45  }46 47  .field {48    display: flex;49    align-items: center;50    height: 100px;51    border-bottom: 1px solid #2A2A2A;52    color: #D9D9D9;53  }54  .field .label {55    width: 120px;56    color: #9E9E9E;57    font-size: 36px;58  }59  .field .value {60    flex: 1;61    font-size: 40px;62    color: #EDEDED;63  }64  .field .value.empty {65    color: #6F6F6F;66  }67  .dropdown {68    width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;69  }70 71  .subject {72    height: 100px;73    display: flex;74    align-items: center;75    font-size: 44px;76    color: #EDEDED;77    border-bottom: 1px solid #2A2A2A;78  }79 80  .body-area {81    padding: 32px 0;82    font-size: 44px;83    line-height: 1.6;84    color: #CFCFCF;85  }86 87  /* Keyboard */88  .keyboard {89    position: absolute;90    bottom: 0;91    left: 0;92    width: 1080px;93    height: 820px;94    background: #1A1A1A;95    border-top: 1px solid #2A2A2A;96    padding: 18px 22px 28px 22px;97    box-sizing: border-box;98  }99  .kb-row {100    display: flex;101    justify-content: center;102    gap: 14px;103    margin: 10px 0;104  }105  .key {106    min-width: 84px;107    padding: 26px 0;108    text-align: center;109    font-size: 40px;110    color: #EAEAEA;111    background: #2B2B2B;112    border-radius: 20px;113    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3);114  }115  .key.small { min-width: 78px; }116  .key.wide { min-width: 140px; }117  .key.flex { flex: 1; }118  .key.icon { display: flex; align-items: center; justify-content: center; padding: 18px 0; }119  .space { flex: 3; min-width: 240px; }120  .enter {121    background: #4DD0CF;122    color: #0C1B1B;123  }124 125  /* Bottom gesture bar */126  .gesture-bar {127    position: absolute;128    bottom: 820px;129    left: 0;130    width: 1080px;131    height: 10px;132    background: transparent;133  }134  .home-indicator {135    position: absolute;136    bottom: 24px;137    left: 50%;138    transform: translateX(-50%);139    width: 320px;140    height: 10px;141    background: #E0E0E0;142    border-radius: 5px;143    opacity: 0.85;144  }145</style>146</head>147<body>148<div id="render-target">149 150  <!-- Status Bar -->151  <div class="status-bar">152    <div>10:51</div>153    <div class="status-icons">154      <!-- Signal -->155      <svg width="38" height="38" viewBox="0 0 24 24" fill="#E0E0E0" xmlns="http://www.w3.org/2000/svg">156        <rect x="3" y="14" width="3" height="7" rx="1"></rect>157        <rect x="8" y="11" width="3" height="10" rx="1"></rect>158        <rect x="13" y="8" width="3" height="13" rx="1"></rect>159        <rect x="18" y="5" width="3" height="16" rx="1"></rect>160      </svg>161      <!-- WiFi -->162      <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="#E0E0E0" stroke-width="2" xmlns="http://www.w3.org/2000/svg">163        <path d="M2 8c5-4 15-4 20 0"></path>164        <path d="M5 12c4-3 10-3 14 0"></path>165        <path d="M8 16c3-2 5-2 8 0"></path>166        <circle cx="12" cy="19" r="1.4" fill="#E0E0E0"></circle>167      </svg>168      <!-- Battery -->169      <svg width="48" height="38" viewBox="0 0 28 16" xmlns="http://www.w3.org/2000/svg">170        <rect x="1" y="3" width="22" height="10" rx="2" fill="none" stroke="#E0E0E0" stroke-width="2"/>171        <rect x="3" y="5" width="14" height="6" rx="1" fill="#E0E0E0"/>172        <rect x="24" y="6" width="3" height="4" rx="1" fill="#E0E0E0"/>173      </svg>174    </div>175  </div>176 177  <!-- Compose Header -->178  <div class="compose-header">179    <div class="left">180      <!-- Back arrow -->181      <svg width="52" height="52" viewBox="0 0 24 24" fill="#EDEDED" xmlns="http://www.w3.org/2000/svg">182        <path d="M15.5 4.5L7.5 12l8 7.5-1.8 1.9L3.8 12l9.9-9.4 1.8 1.9z"/>183      </svg>184      <div class="compose-title">Compose</div>185    </div>186    <div class="right">187      <!-- Attach (paperclip) -->188      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2" xmlns="http://www.w3.org/2000/svg">189        <path d="M7 12.5l7.5-7.5a4 4 0 115.7 5.7L10.8 19.1a6 6 0 11-8.5-8.5L12 1.9"/>190      </svg>191      <!-- Send -->192      <svg width="48" height="48" viewBox="0 0 24 24" fill="#EDEDED" xmlns="http://www.w3.org/2000/svg">193        <path d="M2 21l20-9L2 3v7l14 2-14 2v7z"/>194      </svg>195      <!-- Menu (vertical dots) -->196      <svg width="44" height="44" viewBox="0 0 24 24" fill="#EDEDED" xmlns="http://www.w3.org/2000/svg">197        <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>198      </svg>199    </div>200  </div>201 202  <!-- Content -->203  <div class="content">204    <div class="field">205      <div class="label">From</div>206      <div class="value">maira.rossi1993@gmail.com</div>207      <div class="dropdown">208        <svg width="36" height="36" viewBox="0 0 24 24" fill="#9E9E9E" xmlns="http://www.w3.org/2000/svg">209          <path d="M7 10l5 5 5-5H7z"/>210        </svg>211      </div>212    </div>213 214    <div class="field">215      <div class="label">To</div>216      <div class="value empty"></div>217      <div class="dropdown">218        <svg width="36" height="36" viewBox="0 0 24 24" fill="#9E9E9E" xmlns="http://www.w3.org/2000/svg">219          <path d="M7 10l5 5 5-5H7z"/>220        </svg>221      </div>222    </div>223 224    <div class="subject">Watch Untitled</div>225 226    <div class="body-area">227      https://vimeo.com/866863454228    </div>229  </div>230 231  <!-- Gesture handle (above keyboard) -->232  <div class="gesture-bar"></div>233 234  <!-- Keyboard -->235  <div class="keyboard">236    <!-- accessory row (icons) -->237    <div class="kb-row">238      <div class="key icon small">239        <!-- grid -->240        <svg width="34" height="34" viewBox="0 0 24 24" fill="#CFCFCF" xmlns="http://www.w3.org/2000/svg">241          <rect x="3" y="3" width="6" height="6" rx="1"/><rect x="3" y="13" width="6" height="6" rx="1"/>242          <rect x="13" y="3" width="6" height="6" rx="1"/><rect x="13" y="13" width="6" height="6" rx="1"/>243        </svg>244      </div>245      <div class="key icon small">246        <!-- emoji -->247        <svg width="34" height="34" viewBox="0 0 24 24" fill="#CFCFCF" xmlns="http://www.w3.org/2000/svg">248          <circle cx="12" cy="12" r="9" fill="none" stroke="#CFCFCF" stroke-width="2"/>249          <circle cx="9" cy="10" r="1.4"/><circle cx="15" cy="10" r="1.4"/>250          <path d="M8 15c2 2 6 2 8 0" stroke="#CFCFCF" stroke-width="2" fill="none"/>251        </svg>252      </div>253      <div class="key" style="min-width:100px;">GIF</div>254      <div class="key icon small">255        <!-- translate -->256        <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#CFCFCF" stroke-width="2" xmlns="http://www.w3.org/2000/svg">257          <path d="M3 5h9v14H3z"/><path d="M15 9h6M18 6v6"/><path d="M6 9l3 3-3 3"/>258        </svg>259      </div>260      <div class="key icon small">261        <!-- gear -->262        <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#CFCFCF" stroke-width="2" xmlns="http://www.w3.org/2000/svg">263          <circle cx="12" cy="12" r="3"/>264          <path d="M19.4 15a7.9 7.9 0 000-6l2-1.2-2-3.4-2.2.8a8 8 0 00-4.4-2.1L12 1H8l-.8 2.1A8 8 0 002.8 5l-2.1-.8L-1.3 7l2 1.2a8 8 0 000 6l-2 1.2 2 3.4 2.1-.8a8 8 0 004.4 2.1L8 23h4l.8-2.1a8 8 0 004.4-2.1l2.2.8 2-3.4-2-1.2z"/>265        </svg>266      </div>267      <div class="key icon small">268        <!-- palette -->269        <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#CFCFCF" stroke-width="2" xmlns="http://www.w3.org/2000/svg">270          <path d="M12 3a9 9 0 100 18 3 3 0 010-6h3a3 3 0 000-6h-1A5 5 0 0012 3z"/>271          <circle cx="7.5" cy="10" r="1.2" fill="#CFCFCF"/>272          <circle cx="9.5" cy="6.5" r="1.2" fill="#CFCFCF"/>273          <circle cx="14.5" cy="6.5" r="1.2" fill="#CFCFCF"/>274          <circle cx="16.5" cy="10" r="1.2" fill="#CFCFCF"/>275        </svg>276      </div>277      <div class="key icon small" style="margin-left:auto;">278        <!-- mic -->279        <svg width="34" height="34" viewBox="0 0 24 24" fill="#CFCFCF" xmlns="http://www.w3.org/2000/svg">280          <rect x="9" y="4" width="6" height="10" rx="3"/>281          <path d="M5 11a7 7 0 0014 0M12 18v3" stroke="#CFCFCF" stroke-width="2" fill="none"/>282        </svg>283      </div>284    </div>285 286    <!-- letters rows -->287    <div class="kb-row">288      <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>289    </div>290    <div class="kb-row">291      <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>292    </div>293    <div class="kb-row">294      <div class="key wide icon">295        <!-- shift -->296        <svg width="40" height="40" viewBox="0 0 24 24" fill="#EAEAEA" xmlns="http://www.w3.org/2000/svg">297          <path d="M12 3l7 8h-4v7H9v-7H5l7-8z"/>298        </svg>299      </div>300      <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>301      <div class="key wide icon">302        <!-- backspace -->303        <svg width="40" height="40" viewBox="0 0 24 24" fill="#EAEAEA" xmlns="http://www.w3.org/2000/svg">304          <path d="M22 4H9L2 12l7 8h13V4zm-6.6 5.4l-1.4-1.4L12 10l-2-2-1.4 1.4L10.6 12l-2 2 1.4 1.4L12 13.4l2 2 1.4-1.4-2-2 2-2z"/>305        </svg>306      </div>307    </div>308    <div class="kb-row">309      <div class="key wide">?123</div>310      <div class="key wide">@</div>311      <div class="key wide">😊</div>312      <div class="key flex space"></div>313      <div class="key wide">.</div>314      <div class="key wide enter icon">315        <!-- enter/send arrow -->316        <svg width="40" height="40" viewBox="0 0 24 24" fill="#0C1B1B" xmlns="http://www.w3.org/2000/svg">317          <path d="M3 12h12l-4-4 1.4-1.4L20.8 12l-8.4 5.4L11 16l4-4H3v-2z"/>318        </svg>319      </div>320    </div>321  </div>322 323  <!-- Home indicator -->324  <div class="home-indicator"></div>325</div>326</body>327</html>