GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Gmail Compose Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #fafaf2;14  }15 16  /* Status bar */17  .status-bar {18    height: 110px;19    padding: 0 36px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #222;24    font-size: 42px;25  }26  .status-icons {27    display: flex;28    align-items: center;29    gap: 22px;30  }31  .dot { width: 12px; height: 12px; background:#222; border-radius:50%; opacity: .7; }32  .tiny-icon {33    width: 34px; height: 34px; border: 2px solid #222; border-radius: 6px; opacity: .8;34  }35 36  /* App bar */37  .app-bar {38    height: 160px;39    padding: 0 28px;40    display: flex;41    align-items: center;42    gap: 18px;43    color: #1f1f1f;44  }45  .title {46    font-size: 64px;47    font-weight: 600;48    flex: 1;49  }50  .actions { display: flex; align-items: center; gap: 32px; }51 52  .icon-btn svg { width: 64px; height: 64px; fill: #333; }53 54  /* Fields */55  .content {56    padding-top: 8px;57  }58  .row {59    display: flex;60    align-items: center;61    padding: 28px 36px;62    border-bottom: 1px solid #e9e9e9;63  }64  .label {65    width: 150px;66    color: #7a7a7a;67    font-size: 38px;68  }69  .value {70    flex: 1;71    font-size: 42px;72    color: #222;73  }74  .placeholder {75    color: #9e9e9e;76  }77  .caret {78    width: 40px; height: 40px;79  }80 81  /* Attachment chip */82  .attach-chip {83    margin: 28px 36px;84    background: #dfead8;85    border-radius: 20px;86    padding: 30px 28px;87    display: flex;88    align-items: center;89    gap: 28px;90  }91  .pdf-icon {92    width: 96px; height: 96px; background: #e74c3c; border-radius: 16px;93    display: flex; justify-content: center; align-items: center;94    color: #fff; font-weight: 700; font-size: 34px;95  }96  .file-text { flex: 1; }97  .file-name { font-size: 44px; color: #1f1f1f; margin-bottom: 8px; }98  .file-size { font-size: 32px; color: #6f6f6f; }99  .close-x svg { width: 60px; height: 60px; stroke: #1f1f1f; stroke-width: 6; fill: none; }100 101  /* Bottom gesture bar */102  .gesture {103    position: absolute;104    left: 0; right: 0; bottom: 30px;105    display: flex; justify-content: center;106  }107  .gesture div {108    width: 520px; height: 10px; background: #8a8a8a; border-radius: 6px;109    opacity: .8;110  }111</style>112</head>113<body>114<div id="render-target">115 116  <!-- Status bar -->117  <div class="status-bar">118    <div>11:24</div>119    <div class="status-icons">120      <div class="dot"></div>121      <div class="dot"></div>122      <div class="tiny-icon"></div>123      <div class="dot" style="width:14px;height:14px;"></div>124      <div class="dot" style="width:14px;height:14px;"></div>125    </div>126  </div>127 128  <!-- App bar -->129  <div class="app-bar">130    <div class="icon-btn">131      <svg viewBox="0 0 24 24"><path d="M15.5 4.5L7 12l8.5 7.5-1.5 2L3.5 12 14 2.5z"/></svg>132    </div>133    <div class="title">Compose</div>134    <div class="actions">135      <div class="icon-btn" title="Attach">136        <svg viewBox="0 0 24 24"><path d="M7 13.5V7a5 5 0 0 1 10 0v8a3.5 3.5 0 1 1-7 0V8h2v7a1.5 1.5 0 1 0 3 0V7a3 3 0 0 0-6 0v6.5H7z"/></svg>137      </div>138      <div class="icon-btn" title="Send">139        <svg viewBox="0 0 24 24"><path d="M2 21l20-9L2 3v7l14 2-14 2z"/></svg>140      </div>141      <div class="icon-btn" title="More">142        <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2.2"/><circle cx="12" cy="12" r="2.2"/><circle cx="12" cy="19" r="2.2"/></svg>143      </div>144    </div>145  </div>146 147  <!-- Fields -->148  <div class="content">149    <div class="row">150      <div class="label">From</div>151      <div class="value">dbwscratch.test.id2@gmail.com</div>152    </div>153 154    <div class="row">155      <div class="value placeholder">To</div>156      <svg class="caret" viewBox="0 0 24 24">157        <path d="M7 10l5 5 5-5" fill="none" stroke="#5e5e5e" stroke-width="2"/>158      </svg>159    </div>160 161    <div class="row">162      <div class="value placeholder" style="font-size:46px;">Subject</div>163    </div>164 165    <div class="row" style="border-bottom: none;">166      <div class="value placeholder" style="font-size:48px;">Compose email</div>167    </div>168 169    <!-- Attachment -->170    <div class="attach-chip">171      <div class="pdf-icon">PDF</div>172      <div class="file-text">173        <div class="file-name">ESIC -COVID-19.pdf</div>174        <div class="file-size">9.4 MB</div>175      </div>176      <div class="close-x">177        <svg viewBox="0 0 24 24">178          <path d="M4 4l16 16M20 4L4 20"/>179        </svg>180      </div>181    </div>182 183  </div>184 185  <!-- Empty space below is intentional to match screenshot -->186 187  <!-- Bottom gesture bar -->188  <div class="gesture"><div></div></div>189</div>190</body>191</html>