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>Gmail Compose Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #FAFBF7;13    box-shadow: 0 0 0 1px rgba(0,0,0,0.06);14    border-radius: 26px;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute; top: 0; left: 0; right: 0;20    height: 110px;21    padding: 0 30px;22    display: flex; align-items: center; justify-content: space-between;23    color: #1f1f1f;24  }25  .status-left { font-size: 38px; font-weight: 500; }26  .status-right { display: flex; align-items: center; gap: 26px; }27  .status-icon { width: 38px; height: 38px; opacity: 0.9; }28 29  /* Header (Compose) */30  .header {31    position: absolute; top: 110px; left: 0; right: 0;32    height: 140px;33    padding: 0 24px;34    display: flex; align-items: center;35    border-bottom: 1px solid #E6E7E0;36  }37  .h-left { display: flex; align-items: center; gap: 24px; }38  .back-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }39  .header-title { font-size: 48px; color: #2a2a2a; }40  .h-right { margin-left: auto; display: flex; align-items: center; gap: 34px; }41  .header-icon { width: 56px; height: 56px; }42 43  /* Fields */44  .content {45    position: absolute; top: 250px; left: 0; right: 0;46    padding: 0 34px;47    color: #222;48  }49  .row { padding: 20px 0; border-bottom: 1px solid #E6E7E0; }50  .label { font-size: 28px; color: #6b6b6b; margin-bottom: 6px; }51  .from-text { font-size: 34px; color: #2e2e2e; }52  .to-chip-wrap { display: flex; align-items: center; gap: 16px; }53  .to-chip {54    display: flex; align-items: center; gap: 16px;55    background: #FFFFFF; border: 1px solid #D9DBD2;56    border-radius: 36px; padding: 10px 22px;57    max-width: 840px; height: 72px;58    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.02);59  }60  .avatar {61    width: 48px; height: 48px; border-radius: 50%;62    background: #E0E0E0; border: 1px solid #BDBDBD;63    display: flex; align-items: center; justify-content: center;64    font-size: 12px; color: #757575;65  }66  .email-text { font-size: 32px; color: #1f1f1f; white-space: nowrap; }67  .chip-arrow { width: 30px; height: 30px; margin-left: 8px; }68  .subject {69    font-size: 44px; color: #2a2a2a; padding: 26px 0;70    border-bottom: 1px solid #E6E7E0;71  }72  .body-text {73    font-size: 38px; color: #2a2a2a; line-height: 1.55;74    padding-top: 26px;75  }76  .link { color: #2d6b3f; text-decoration: none; }77 78  /* Keyboard mock */79  .keyboard {80    position: absolute; bottom: 90px; left: 0; right: 0;81    height: 850px; background: #F1F3EA; border-top: 1px solid #E2E4D9;82    padding: 24px 24px 18px;83  }84  .kb-toolbar { display: flex; align-items: center; gap: 40px; padding-bottom: 14px; }85  .tool-btn {86    width: 72px; height: 72px; border-radius: 18px;87    background: #EDEFE6; display: flex; align-items: center; justify-content: center;88    border: 1px solid #DADCCE;89  }90 91  .row-keys { display: grid; gap: 12px; margin: 16px 0; }92  .row1 { grid-template-columns: repeat(10, 1fr); }93  .row2 { grid-template-columns: repeat(10, 1fr); }94  .row3 { grid-template-columns: 1.2fr repeat(7, 1fr) 1.2fr; }95  .row4 { grid-template-columns: 1.4fr 1fr 1fr 2.8fr 1fr 1.4fr; }96 97  .key {98    background: #FFFFFF; border: 1px solid #DADCCE;99    border-radius: 22px; height: 110px;100    display: flex; align-items: center; justify-content: center;101    font-size: 44px; color: #2a2a2a;102  }103  .key.special { background: #DDEAD5; }104  .key.icon { font-size: 36px; color: #415e44; }105 106  /* Bottom gesture bar */107  .gesture {108    position: absolute; bottom: 24px; left: 50%;109    width: 440px; height: 10px; background: #9DA1A0; border-radius: 6px;110    transform: translateX(-50%);111    opacity: 0.65;112  }113 114  /* Simple svg color helpers */115  .stroke-dark { stroke: #2a2a2a; }116  .fill-dark { fill: #2a2a2a; }117  .fill-green { fill: #2b6f44; }118</style>119</head>120<body>121<div id="render-target">122 123  <!-- Status bar -->124  <div class="status-bar">125    <div class="status-left">4:01</div>126    <div class="status-right">127      <!-- Temp text -->128      <div style="font-size:28px;color:#4f4f4f;">32°</div>129      <!-- globe icon -->130      <svg class="status-icon" viewBox="0 0 24 24">131        <circle cx="12" cy="12" r="10" fill="none" stroke="#3f3f3f" stroke-width="2"/>132        <path d="M2 12h20M12 2v20" stroke="#3f3f3f" stroke-width="2"/>133      </svg>134      <!-- cloud icon -->135      <svg class="status-icon" viewBox="0 0 24 24">136        <path d="M8 16h8a4 4 0 0 0 0-8 5 5 0 0 0-9-1 4 4 0 0 0 1 9z" fill="#6f6f6f"/>137      </svg>138      <!-- Wi-Fi -->139      <svg class="status-icon" viewBox="0 0 24 24">140        <path d="M2 9c5-5 15-5 20 0M6 13c3-3 9-3 12 0M10 17c1-1 3-1 4 0" stroke="#3f3f3f" stroke-width="2" fill="none" stroke-linecap="round"/>141      </svg>142      <!-- Battery -->143      <svg class="status-icon" viewBox="0 0 26 24">144        <rect x="2" y="5" width="18" height="14" rx="2" ry="2" fill="none" stroke="#3f3f3f" stroke-width="2"/>145        <rect x="4" y="7" width="12" height="10" fill="#4e4e4e"/>146        <rect x="20" y="9" width="4" height="6" rx="1" fill="#3f3f3f"/>147      </svg>148    </div>149  </div>150 151  <!-- Compose header -->152  <div class="header">153    <div class="h-left">154      <div class="back-btn">155        <svg viewBox="0 0 36 36" width="48" height="48">156          <path d="M22 8 L10 18 L22 28" stroke="#2a2a2a" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>157        </svg>158      </div>159      <div class="header-title">Compose</div>160    </div>161    <div class="h-right">162      <!-- attach -->163      <svg class="header-icon" viewBox="0 0 24 24">164        <path d="M7 12l6-6a4 4 0 0 1 6 6l-8 8a6 6 0 0 1-9-9l7-7" fill="none" stroke="#2a2a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>165      </svg>166      <!-- send -->167      <svg class="header-icon" viewBox="0 0 24 24">168        <path d="M3 12l18-9-6 9 6 9-18-9z" class="fill-green"/>169      </svg>170      <!-- menu -->171      <svg class="header-icon" viewBox="0 0 24 24">172        <circle cx="12" cy="4" r="2" fill="#2a2a2a"/>173        <circle cx="12" cy="12" r="2" fill="#2a2a2a"/>174        <circle cx="12" cy="20" r="2" fill="#2a2a2a"/>175      </svg>176    </div>177  </div>178 179  <!-- Content area -->180  <div class="content">181    <!-- From row -->182    <div class="row">183      <div class="label">From</div>184      <div class="from-text">dbwscratch.test.id2@gmail.com</div>185    </div>186 187    <!-- To row -->188    <div class="row" style="border-bottom: none;">189      <div class="to-chip-wrap">190        <div class="to-chip">191          <div class="avatar">Avatar</div>192          <div class="email-text">dbwscratch.test.id3@gmail.com</div>193        </div>194        <svg class="chip-arrow" viewBox="0 0 24 24">195          <path d="M6 9l6 6 6-6" stroke="#4f4f4f" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>196        </svg>197      </div>198    </div>199 200    <!-- Input cursor space -->201    <div style="height: 40px; border-bottom: 1px solid #E6E7E0;"></div>202 203    <!-- Subject -->204    <div class="subject">Weather&Radar - know your weather</div>205 206    <!-- Body -->207    <div class="body-text">208      Weather&Radar - know your weather<br/>209      <a class="link" href="#">https://app.weatherandradar.com/U13Q/enUSShare</a>210    </div>211  </div>212 213  <!-- Keyboard mock -->214  <div class="keyboard">215    <!-- toolbar -->216    <div class="kb-toolbar">217      <div class="tool-btn">▦</div>218      <div class="tool-btn">🙂</div>219      <div class="tool-btn">GIF</div>220      <div class="tool-btn">⚙</div>221      <div class="tool-btn">G</div>222      <div class="tool-btn">🎨</div>223      <div class="tool-btn">🔇</div>224    </div>225 226    <!-- keys -->227    <div class="row-keys row1">228      <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>229      <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>230    </div>231    <div class="row-keys row2">232      <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>233      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div><div class="key key icon">⌫</div>234    </div>235    <div class="row-keys row3">236      <div class="key special">⇧</div>237      <div class="key">z</div><div class="key">x<