GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Gmail Compose Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #121212;13    color: #EDEDED;14  }15 16  /* Status bar */17  .status-bar {18    height: 100px;19    padding: 0 36px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    font-size: 36px;24    color: #E0E0E0;25  }26  .status-right {27    display: flex;28    align-items: center;29    gap: 24px;30  }31  .dot {32    width: 26px; height: 26px; background: #9E9E9E; border-radius: 50%;33  }34  /* Action bar */35  .action-bar {36    height: 110px;37    display: flex;38    align-items: center;39    padding: 0 30px;40    gap: 30px;41    border-bottom: 1px solid #1F1F1F;42  }43  .spacer { flex: 1; }44  .icon-btn {45    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;46  }47  .icon { fill: #EDEDED; }48  .muted { color: #9E9E9E; }49 50  /* Content */51  .content {52    padding: 24px 36px 0 36px;53    font-size: 40px;54    line-height: 1.5;55  }56  .field {57    padding: 28px 0;58    border-bottom: 1px solid #1F1F1F;59  }60  .label {61    font-size: 30px;62    color: #9E9E9E;63    letter-spacing: 0.5px;64  }65  .value {66    font-size: 40px;67    color: #EDEDED;68    margin-top: 8px;69  }70  .row {71    display: flex; align-items: center; gap: 18px;72  }73  .chev {74    margin-left: auto;75  }76  .subject {77    padding: 30px 0;78    border-bottom: 1px solid #1F1F1F;79    font-size: 44px;80  }81 82  .body-text {83    padding-top: 40px;84    color: #EDEDED;85  }86  .link { color: #B3C6FF; }87 88  /* Attachment chip */89  .attachment {90    margin-top: 60px;91    width: 100%;92    display: flex;93    justify-content: center;94  }95  .chip {96    width: 920px;97    background: #2A2E32;98    border-radius: 16px;99    padding: 30px;100    display: flex;101    align-items: center;102    gap: 26px;103  }104  .audio-icon {105    width: 64px; height: 64px; background: #E53935; border-radius: 12px;106    display: flex; align-items: center; justify-content: center;107  }108  .chip-text { display: flex; flex-direction: column; gap: 6px; }109  .filename { font-size: 40px; color: #EDEDED; }110  .filesize { font-size: 30px; color: #BDBDBD; }111  .chip-close { margin-left: auto; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }112  /* Slight bottom gesture bar replica */113  .gesture {114    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);115    width: 520px; height: 10px; background:#DADADA; opacity: .7; border-radius: 6px;116  }117</style>118</head>119<body>120<div id="render-target">121 122  <!-- Status bar -->123  <div class="status-bar">124    <div>7:54</div>125    <div class="status-right">126      <div class="dot"></div>127      <div class="dot" style="width:34px;height:22px;border-radius:4px;"></div>128      <div class="dot"></div>129    </div>130  </div>131 132  <!-- Action bar with icons -->133  <div class="action-bar">134    <div class="icon-btn">135      <svg class="icon" viewBox="0 0 24 24" width="48" height="48">136        <path d="M20 11H7.8l5.6-5.6L12 4l-8 8 8 8 1.4-1.4L7.8 13H20v-2z"/>137      </svg>138    </div>139    <div class="spacer"></div>140    <div class="icon-btn">141      <!-- paperclip -->142      <svg class="icon" viewBox="0 0 24 24" width="46" height="46">143        <path d="M7 17a5 5 0 0 0 7.07 0l6.02-6.02a3.5 3.5 0 0 0-4.95-4.95L7.12 13.05a2 2 0 1 0 2.83 2.83L17 8.83" fill="none" stroke="#EDEDED" stroke-width="2" />144      </svg>145    </div>146    <div class="icon-btn">147      <!-- send -->148      <svg class="icon" viewBox="0 0 24 24" width="48" height="48">149        <path d="M2 21l21-9L2 3v7l15 2-15 2z"/>150      </svg>151    </div>152    <div class="icon-btn">153      <!-- more vert -->154      <svg class="icon" viewBox="0 0 24 24" width="44" height="44">155        <circle cx="12" cy="5" r="2.2"></circle>156        <circle cx="12" cy="12" r="2.2"></circle>157        <circle cx="12" cy="19" r="2.2"></circle>158      </svg>159    </div>160  </div>161 162  <!-- Content area -->163  <div class="content">164    <div class="field">165      <div class="label">From</div>166      <div class="value">dbwscratch.test.id23@gmail.com</div>167    </div>168 169    <div class="field row">170      <div class="label" style="font-size:40px; color:#BDBDBD;">To</div>171      <svg class="icon chev" viewBox="0 0 24 24" width="40" height="40">172        <path d="M7 10l5 5 5-5z"/>173      </svg>174    </div>175 176    <div class="subject">ASR Recording - the way things go.mp3</div>177 178    <div class="body-text">179      ----------<br><br>180      ASR •<br>181      <span class="link">https://play.google.com/store/apps/details/details?id=com.nll.asr</span><br>182      id=com.nll.asr<br><br>183      <span class="link">https://nllapps.com</span>184    </div>185 186    <div class="attachment">187      <div class="chip">188        <div class="audio-icon">189          <svg viewBox="0 0 24 24" width="34" height="34">190            <path fill="#ffffff" d="M12 3h2v10h-2V3zm-4 5h2v8H8V8zm8 2h2v6h-2v-6z"/>191          </svg>192        </div>193        <div class="chip-text">194          <div class="filename">the way things go.mp3</div>195          <div class="filesize">3.3 MB</div>196        </div>197        <div class="chip-close">198          <svg class="icon" viewBox="0 0 24 24" width="44" height="44">199            <path d="M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z"/>200          </svg>201        </div>202      </div>203    </div>204  </div>205 206  <div class="gesture"></div>207</div>208</body>209</html>