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: Roboto, Arial, sans-serif; }9  #render-target {10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#121212; color:#EDEDED;12  }13 14  /* Status bar */15  .status-bar {16    height:96px; padding:0 32px; display:flex; align-items:center; justify-content:space-between;17    color:#FFFFFF;18  }19  .status-left { font-size:32px; font-weight:500; }20  .status-right { display:flex; align-items:center; gap:22px; }21 22  /* App bar */23  .app-bar {24    height:150px; border-top:1px solid #1a1a1a; border-bottom:1px solid #1f1f1f;25    display:flex; align-items:center; padding:0 24px; background:#1b1b1b;26  }27  .icon-btn { width:80px; height:80px; border:none; background:transparent; padding:0; display:flex; align-items:center; justify-content:center; }28  .title { font-size:44px; font-weight:500; margin-left:8px; }29  .actions { margin-left:auto; display:flex; align-items:center; gap:18px; }30 31  /* Fields & content area */32  .content { padding:24px; padding-bottom:980px; }33  .field-row { display:flex; align-items:center; justify-content:space-between; padding:22px 0; border-bottom:1px solid #282828; }34  .field-label { color:#BDBDBD; font-size:28px; }35  .field-value { font-size:30px; color:#EDEDED; }36  .dropdown { width:42px; height:42px; margin-left:12px; opacity:0.8; }37  .subject { font-size:36px; font-weight:500; padding:26px 0; border-bottom:1px solid #282828; color:#EDEDED; }38  .body-area { padding-top:30px; font-size:32px; line-height:1.5; color:#8AB4F8; }39 40  /* Keyboard */41  .keyboard {42    position:absolute; left:0; right:0; bottom:100px; background:#181818;43    border-top:1px solid #202020; padding:18px 22px 26px;44  }45  .kb-toolbar { height:64px; display:flex; align-items:center; gap:26px; color:#CCCCCC; margin-bottom:14px; }46  .kb-toolbar .tool { display:flex; align-items:center; gap:10px; font-size:26px; }47  .kb-row { display:flex; gap:16px; margin:16px 0; }48  .key {49    flex:0 0 auto; min-width:88px; height:112px; border-radius:16px;50    background:#2A2A2A; border:1px solid #3A3A3A; color:#E6E6E6;51    display:flex; align-items:center; justify-content:center; font-size:34px; font-weight:500;52  }53  .key.soft { background:#222; }54  .key.light { background:#C9CED6; color:#1d1d1d; border-color:#C9CED6; }55  .key-icon svg { width:40px; height:40px; fill:#E6E6E6; }56  .space { flex:1; min-width:300px; }57  .enter { min-width:150px; background:#C9CED6; color:#111; }58  .delete { min-width:130px; }59 60  /* Gesture bar */61  .gesture { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); width:360px; height:12px; background:#FFFFFF; border-radius:10px; opacity:0.85; }62 63  /* Link & text colors */64  a { color:#8AB4F8; text-decoration:none; }65 66  /* SVG colors */67  .icon { fill:none; stroke:#FFFFFF; stroke-width:2.5; }68  .icon-solid { fill:#FFFFFF; }69</style>70</head>71<body>72<div id="render-target">73 74  <!-- Status Bar -->75  <div class="status-bar">76    <div class="status-left">11:12</div>77    <div class="status-right">78      <!-- WiFi -->79      <svg width="44" height="44" viewBox="0 0 24 24">80        <path class="icon" d="M2 8c5-4 15-4 20 0"></path>81        <path class="icon" d="M5 12c4-3 10-3 14 0"></path>82        <path class="icon" d="M8 16c3-2 5-2 8 0"></path>83        <circle cx="12" cy="19" r="1.8" class="icon-solid"></circle>84      </svg>85      <!-- Battery -->86      <svg width="52" height="44" viewBox="0 0 28 20">87        <rect x="1" y="4" width="22" height="12" rx="2" ry="2" stroke="#FFFFFF" fill="none" stroke-width="2"></rect>88        <rect x="4" y="7" width="16" height="6" fill="#FFFFFF"></rect>89        <rect x="24" y="8" width="3" height="4" fill="#FFFFFF"></rect>90      </svg>91    </div>92  </div>93 94  <!-- App Bar -->95  <div class="app-bar">96    <button class="icon-btn">97      <svg width="48" height="48" viewBox="0 0 24 24">98        <path class="icon" d="M15 5 L7 12 L15 19"></path>99      </svg>100    </button>101    <div class="title">Compose</div>102    <div class="actions">103      <button class="icon-btn">104        <!-- Paperclip -->105        <svg width="48" height="48" viewBox="0 0 24 24">106          <path class="icon" d="M7 13l6-6a3 3 0 1 1 4 4l-8 8a5 5 0 0 1-7-7l9-9"></path>107        </svg>108      </button>109      <button class="icon-btn">110        <!-- Send -->111        <svg width="48" height="48" viewBox="0 0 24 24">112          <polygon points="2,21 23,12 2,3 6,12" class="icon-solid"></polygon>113        </svg>114      </button>115      <button class="icon-btn">116        <!-- More (kebab) -->117        <svg width="48" height="48" viewBox="0 0 24 24">118          <circle cx="12" cy="5" r="2.2" class="icon-solid"></circle>119          <circle cx="12" cy="12" r="2.2" class="icon-solid"></circle>120          <circle cx="12" cy="19" r="2.2" class="icon-solid"></circle>121        </svg>122      </button>123    </div>124  </div>125 126  <!-- Content Area -->127  <div class="content">128    <div class="field-row">129      <div class="field-label">From</div>130      <div class="field-value">dbwscratch.test.id8@gmail.com</div>131    </div>132 133    <div class="field-row">134      <div class="field-label">To</div>135      <svg class="dropdown" viewBox="0 0 24 24">136        <path class="icon" d="M6 9l6 6 6-6"></path>137      </svg>138    </div>139 140    <div class="subject">Watch "This American Life: The Call" on YouTube</div>141 142    <div class="body-area">143      https://www.youtube.com/live/iqVVu5lPRXk?si=N-x0rXkosGBmO9RQ144    </div>145  </div>146 147  <!-- Keyboard -->148  <div class="keyboard">149    <div class="kb-toolbar">150      <div class="tool">151        <svg width="28" height="28" viewBox="0 0 24 24">152          <rect x="3" y="3" width="7" height="7" fill="#CFCFCF"></rect>153          <rect x="14" y="3" width="7" height="7" fill="#CFCFCF"></rect>154          <rect x="3" y="14" width="7" height="7" fill="#CFCFCF"></rect>155          <rect x="14" y="14" width="7" height="7" fill="#CFCFCF"></rect>156        </svg>157      </div>158      <div class="tool">159        <svg width="30" height="30" viewBox="0 0 24 24">160          <circle cx="12" cy="8" r="3.5" fill="#CFCFCF"></circle>161          <path d="M4 19c2-4 14-4 16 0" fill="none" stroke="#CFCFCF" stroke-width="2"></path>162        </svg>163      </div>164      <div class="tool">GIF</div>165      <div class="tool">166        <svg width="28" height="28" viewBox="0 0 24 24">167          <circle cx="12" cy="12" r="9" fill="none" stroke="#CFCFCF" stroke-width="2"></circle>168          <path d="M12 7v5l4 2" stroke="#CFCFCF" stroke-width="2" fill="none"></path>169        </svg>170      </div>171      <div class="tool">172        <svg width="28" height="28" viewBox="0 0 24 24">173          <path d="M5 6h14M5 12h14M5 18h14" stroke="#CFCFCF" stroke-width="2"></path>174          <path d="M9 3v6" stroke="#CFCFCF" stroke-width="2"></path>175        </svg>176        <span style="font-size:22px; color:#CFCFCF;">G↔︎</span>177      </div>178      <div class="tool">179        <svg width="28" height="28" viewBox="0 0 24 24">180          <circle cx="12" cy="12" r="9" fill="none" stroke="#CFCFCF" stroke-width="2"></circle>181          <path d="M7 17l10-10" stroke="#CFCFCF" stroke-width="2"></path>182        </svg>183      </div>184      <div class="tool">185        <svg width="28" height="28" viewBox="0 0 24 24">186          <path d="M5 8l14-3v7c0 5-5 8-10 8H5z" fill="none" stroke="#CFCFCF" stroke-width="2"></path>187          <line x1="7" y1="4" x2="17" y2="20" stroke="#CFCFCF" stroke-width="2"></line>188        </svg>189      </div>190    </div>191 192    <div class="kb-row">193      <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>194    </div>195    <div class="kb-row">196      <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>197    </div>198    <div class="kb-row">199      <div class="key soft">z</div><div class="key soft">x</div><div class="key soft">c</div><div class="key soft">v</div><div class="key soft">b</div><div class="key soft">n</div><div class="key soft">m</div>200      <div class="key delete key-icon">201        <svg viewBox="0 0 24 24">202          <path class="icon" d="M6 7l-3 5 3 5h12a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2H6z"></path>203          <path class="icon" d="M10 10l4 4M14 10l-4 4"></path>204        </svg>205      </div>206    </div>207    <div class="kb-row">208      <div class="key light" style="min-width:170px;">?123</div>209      <div class="key" style="min-width:110px;">@</div>210      <div class="key" style="min-width:110px">🙂</div>211      <div class="key space">space</div>212      <div class="key" style="min-width:110px;">.</div>213      <div class="key enter key-icon">214        <svg viewBox="0 0 24 24">215          <path d="M5 12h9v-4l5 4-5 4v-4H5" fill="#111"></path>216        </svg>217      </div>218    </div>219  </div>220 221  <!-- Bottom gesture bar -->222  <div class="gesture"></div>223 224</div>225</body>226</html>