GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Compose - Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #121516; color: #EDEDED;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute; top: 0; left: 0; right: 0;18    height: 96px; padding: 0 28px;19    display: flex; align-items: center; justify-content: space-between;20    color: #EDEDED; font-size: 34px; letter-spacing: 0.5px;21  }22  .status-right { display: flex; align-items: center; gap: 20px; }23  .status-right .percent { font-size: 28px; color: #EDEDED; opacity: 0.9; }24 25  /* App bar */26  .app-bar {27    position: absolute; top: 96px; left: 0; right: 0;28    height: 148px; padding: 0 24px;29    display: flex; align-items: center; gap: 28px;30    border-bottom: 1px solid #1E2326;31    background: #121516;32  }33  .app-title { font-size: 44px; font-weight: 500; margin-right: auto; }34  .icon-btn { width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; }35 36  /* Fields */37  .content { position: absolute; top: 244px; left: 0; right: 0; bottom: 960px; overflow: hidden; }38  .field-row {39    padding: 22px 32px;40    display: flex; align-items: center; gap: 22px;41    border-bottom: 1px solid #1E2326;42  }43  .label { color: #9AA4A9; font-size: 26px; width: 120px; }44  .value { color: #EDEDED; font-size: 34px; }45  .to-field .value { color: #EDEDED; font-size: 36px; }46  .chev { margin-left: auto; }47 48  /* Suggestion */49  .suggestion {50    padding: 24px 32px;51    display: flex; align-items: center; gap: 24px;52    border-bottom: 1px solid #1E2326;53  }54  .avatar {55    width: 92px; height: 92px; border-radius: 50%;56    background: #2F66C6; color: #fff; display: flex; align-items: center; justify-content: center;57    font-weight: 600; font-size: 44px;58  }59  .s-lines { display: flex; flex-direction: column; }60  .s-lines .top { font-size: 34px; color: #EDEDED; }61  .s-lines .sub { font-size: 26px; color: #9AA4A9; margin-top: 6px; }62 63  /* Message body placeholder (empty area) */64  .body-area {65    padding: 32px; color: #6F7A80; font-size: 30px;66  }67 68  /* Keyboard mock */69  .keyboard {70    position: absolute; left: 0; right: 0; bottom: 40px; height: 900px;71    background: #1A1F22; border-top: 1px solid #263238;72    display: flex; flex-direction: column; justify-content: flex-start;73  }74  .kb-top {75    height: 120px; padding: 0 20px;76    display: flex; align-items: center; gap: 28px; color: #B0BEC5; font-size: 28px;77  }78  .kb-top .pill { padding: 12px 18px; border-radius: 18px; background: #2A3237; color: #B0BEC5; }79  .keys { flex: 1; display: grid; grid-template-rows: repeat(4, 1fr); gap: 18px; padding: 0 16px 18px 16px; }80  .row { display: grid; gap: 14px; }81  .row.r1 { grid-template-columns: repeat(10, 1fr); }82  .row.r2 { grid-template-columns: repeat(9, 1fr); margin: 0 38px; }83  .row.r3 { grid-template-columns: 1.3fr repeat(7, 1fr) 1.5fr; }84  .row.r4 { grid-template-columns: 1.1fr 1.1fr 1.1fr 4.8fr 1.1fr 1.1fr 1.6fr; }85  .key {86    background: #263238; color: #E0E0E0; border-radius: 16px;87    display: flex; align-items: center; justify-content: center;88    font-size: 34px; height: 100%;89  }90  .key.light { background: #2E3A40; color: #CFE3E9; }91  .enter {92    background: #9BE3BF; color: #0B2718; font-weight: 700;93    border-radius: 999px;94  }95 96  /* Bottom gesture bar */97  .gesture {98    position: absolute; left: 50%; transform: translateX(-50%);99    bottom: 10px; width: 380px; height: 12px; border-radius: 6px; background: #E5E5E5; opacity: 0.8;100  }101 102  /* SVG helper */103  svg { display: block; }104</style>105</head>106<body>107<div id="render-target">108 109  <!-- Status Bar -->110  <div class="status-bar">111    <div class="status-left">10:35</div>112    <div class="status-right">113      <!-- simple cloud icon -->114      <svg width="36" height="36" viewBox="0 0 24 24" fill="#EDEDED" opacity="0.85">115        <path d="M7 18a5 5 0 1 1 .7-9.95A6 6 0 0 1 18.9 11H19a4 4 0 1 1 0 8H7z"/>116      </svg>117      <!-- WiFi -->118      <svg width="36" height="36" viewBox="0 0 24 24" fill="#EDEDED">119        <path d="M12 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM2 9l2 2a12 12 0 0 1 16 0l2-2A15 15 0 0 0 2 9zm5 5 2 2a7 7 0 0 1 6 0l2-2a10 10 0 0 0-10 0z"/>120      </svg>121      <!-- Battery -->122      <svg width="52" height="36" viewBox="0 0 28 16" fill="none">123        <rect x="1" y="3" width="22" height="10" rx="2" stroke="#EDEDED" stroke-width="2"/>124        <rect x="3" y="5" width="18" height="6" rx="1" fill="#EDEDED"/>125        <rect x="24" y="6" width="3" height="4" rx="1" fill="#EDEDED"/>126      </svg>127      <div class="percent">100%</div>128    </div>129  </div>130 131  <!-- App Bar -->132  <div class="app-bar">133    <div class="icon-btn">134      <svg width="48" height="48" viewBox="0 0 24 24" fill="#EDEDED">135        <path d="M15.5 19 8.5 12l7-7-1.4-1.4L5.7 12l8.4 8.4z"/>136      </svg>137    </div>138    <div class="app-title">Compose</div>139    <div class="icon-btn">140      <!-- paperclip -->141      <svg width="42" height="42" viewBox="0 0 24 24" fill="#EDEDED">142        <path d="M7 17a5 5 0 0 0 7 0l6-6a4 4 0 0 0-6-6l-8 8a3 3 0 0 0 4 4l7-7 1.4 1.4-7 7a5 5 0 0 1-7-7l8-8a6 6 0 0 1 8.5 8.5l-6 6a7 7 0 0 1-10-10l6-6L7 2l-6 6a8 8 0 1 0 11.3 11.3l6-6"/>143      </svg>144    </div>145    <div class="icon-btn">146      <!-- send -->147      <svg width="44" height="44" viewBox="0 0 24 24" fill="#9BE3BF">148        <path d="M2 21 23 12 2 3v7l14 2-14 2z"/>149      </svg>150    </div>151    <div class="icon-btn">152      <!-- more -->153      <svg width="44" height="44" viewBox="0 0 24 24" fill="#EDEDED">154        <circle cx="5" cy="12" r="2"></circle>155        <circle cx="12" cy="12" r="2"></circle>156        <circle cx="19" cy="12" r="2"></circle>157      </svg>158    </div>159  </div>160 161  <!-- Fields/content -->162  <div class="content">163    <div class="field-row">164      <div class="label">From</div>165      <div class="value">dbwscratch.test.id4@gmail.com</div>166    </div>167 168    <div class="field-row to-field">169      <div class="label">To</div>170      <div class="value">clarawagner11@gmail.com</div>171      <div class="chev">172        <svg width="40" height="40" viewBox="0 0 24 24" fill="#B0BEC5">173          <path d="M7 10l5 5 5-5z"/>174        </svg>175      </div>176    </div>177 178    <div class="suggestion">179      <div class="avatar">C</div>180      <div class="s-lines">181        <div class="top">clarawagner11@gmail.com</div>182        <div class="sub">clarawagner11@gmail.com</div>183      </div>184    </div>185 186    <div class="body-area">187      <!-- Empty message body -->188    </div>189  </div>190 191  <!-- Keyboard mock -->192  <div class="keyboard">193    <div class="kb-top">194      <div class="pill">GIF</div>195      <div class="pill">Settings</div>196      <div class="pill">Translate</div>197      <div class="pill">Theme</div>198      <div class="pill">Mic</div>199    </div>200    <div class="keys">201      <div class="row r1">202        <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>203        <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>204      </div>205      <div class="row r2">206        <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>207        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>208      </div>209      <div class="row r3">210        <div class="key light">⇧</div>211        <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>212        <div class="key light">⌫</div>213      </div>214      <div class="row r4">215        <div class="key light">?123</div>216        <div class="key light">@</div>217        <div class="key light">☺</div>218        <div class="key">⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀</div>219        <div class="key light">.</div>220        <div class="key light">,</div>221        <div class="key enter">➔</div>222      </div>223    </div>224  </div>225 226  <!-- Gesture bar -->227  <div class="gesture"></div>228 229</div>230</body>231</html>