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 - Dark</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: #101b1b; color: #e7eceb;12  }13  /* Status bar */14  .status-bar {15    height: 90px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between;16    color: #e7eceb; font-size: 34px; letter-spacing: 0.5px;17  }18  .status-right { display: flex; align-items: center; gap: 18px; color: #dfe6e4; }19  .toolbar {20    height: 140px; display: flex; align-items: center; padding: 0 24px; border-bottom: 1px solid #253534;21  }22  .toolbar .title { font-size: 44px; font-weight: 500; margin-left: 16px; color: #eaf3f1; }23  .toolbar-actions { margin-left: auto; display: flex; align-items: center; gap: 36px; }24  .field { padding: 28px 28px; border-bottom: 1px solid #243736; }25  .field .label { color: #9fb0ab; font-size: 28px; margin-bottom: 10px; }26  .field .value { color: #eaf3f1; font-size: 34px; }27  .row { display: flex; align-items: center; justify-content: space-between; }28  .placeholder { color: #8ea29d; font-size: 34px; padding: 36px 28px; border-bottom: 1px solid #243736; }29  .compose-area { height: 220px; color: #9fb0ab; font-size: 36px; padding: 36px 28px; border-bottom: 1px solid #243736; }30  /* Attachment card */31  .attachment-card {32    width: 1002px; margin: 30px auto; border-radius: 16px; overflow: hidden; background: #1b3a36; border: 1px solid #294845;33  }34  .attachment-thumb {35    width: 100%; height: 230px; background: #E0E0E0; border-bottom: 1px solid #BDBDBD;36    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px;37  }38  .attachment-info {39    display: flex; align-items: center; padding: 24px; background: #205945; color: #eaf3f1;40  }41  .att-icon {42    width: 48px; height: 48px; background: #2a6d56; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 18px;43  }44  .att-text { flex: 1; }45  .att-name { font-size: 30px; }46  .att-size { font-size: 24px; color: #b9c6c2; margin-top: 4px; }47  .att-close { width: 44px; height: 44px; border-radius: 22px; background: #2a6d56; display: flex; align-items: center; justify-content: center; }48  /* Keyboard */49  .keyboard {50    position: absolute; left: 0; right: 0; bottom: 70px;51    height: 820px; background: #0f1617; border-top: 1px solid #1d2a2a; padding: 24px 18px;52  }53  .key-row { display: flex; gap: 14px; justify-content: center; margin: 18px 0; }54  .key {55    background: #222d2e; color: #e7eceb; border-radius: 18px; height: 120px; min-width: 92px;56    display: flex; align-items: center; justify-content: center; font-size: 44px;57    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.25);58  }59  .key.wide { min-width: 120px; }60  .key.space { flex: 1; min-width: 300px; }61  .key.alt { background: #8cc3a7; color: #0b1a18; }62  .key.enter { background: #8ce0c5; color: #0b1a18; }63  .suggest { display: flex; gap: 18px; color: #b4c1bf; font-size: 32px; margin: 8px 12px 6px; }64  .gesture-bar {65    position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);66    width: 340px; height: 10px; background: #e9ecef; border-radius: 8px; opacity: 0.9;67  }68  .caret-down { transform: rotate(0deg); }69  /* Small helpers */70  .muted { color: #8ea29d; }71  .spacer { height: 10px; }72  svg { display: block; }73</style>74</head>75<body>76<div id="render-target">77 78  <!-- Status Bar -->79  <div class="status-bar">80    <div class="status-left">10:34</div>81    <div class="status-right">82      <!-- Wi‑Fi -->83      <svg width="44" height="44" viewBox="0 0 24 24" fill="none">84        <path d="M12 18.5l1.8 1.8-1.8 1.7-1.8-1.7L12 18.5z" fill="#dfe6e4"/>85        <path d="M2 8.5a14 14 0 0 1 20 0l-1.6 1.6a11.7 11.7 0 0 0-16.8 0L2 8.5z" fill="#dfe6e4"/>86        <path d="M5.5 12a9 9 0 0 1 13 0l-1.6 1.5a6.7 6.7 0 0 0-9.8 0L5.5 12z" fill="#dfe6e4"/>87        <path d="M9 15.3a4.5 4.5 0 0 1 6 0l-1.6 1.6a2.3 2.3 0 0 0-2.8 0L9 15.3z" fill="#dfe6e4"/>88      </svg>89      <!-- Battery -->90      <svg width="56" height="44" viewBox="0 0 28 14" fill="none">91        <rect x="1" y="2" width="22" height="10" rx="2" stroke="#e7eceb" stroke-width="2"/>92        <rect x="3" y="4" width="18" height="6" fill="#e7eceb"/>93        <rect x="24" y="5" width="3" height="4" rx="1" fill="#e7eceb"/>94      </svg>95      <div style="font-size:28px;">100%</div>96    </div>97  </div>98 99  <!-- Toolbar -->100  <div class="toolbar">101    <!-- Back -->102    <svg width="56" height="56" viewBox="0 0 24 24" fill="none">103      <path d="M15 18l-6-6 6-6" stroke="#eaf3f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>104    </svg>105    <div class="title">Compose</div>106    <div class="toolbar-actions">107      <!-- attach -->108      <svg width="48" height="48" viewBox="0 0 24 24" fill="none">109        <path d="M7 12.5l6.2-6.2a3 3 0 1 1 4.2 4.2L9.7 18.2a5 5 0 0 1-7.1-7.1l8.5-8.5" stroke="#eaf3f1" stroke-width="2" stroke-linecap="round"/>110      </svg>111      <!-- send -->112      <svg width="48" height="48" viewBox="0 0 24 24" fill="#eaf3f1">113        <path d="M2 21l20-9L2 3v7l14 2-14 2v7z"/>114      </svg>115      <!-- more -->116      <svg width="44" height="44" viewBox="0 0 24 24" fill="#eaf3f1">117        <circle cx="5" cy="12" r="2"/>118        <circle cx="12" cy="12" r="2"/>119        <circle cx="19" cy="12" r="2"/>120      </svg>121    </div>122  </div>123 124  <!-- Fields -->125  <div class="field">126    <div class="label">From</div>127    <div class="row">128      <div class="value">dbwscratch.test.id4@gmail.com</div>129    </div>130  </div>131 132  <div class="field">133    <div class="row">134      <div class="label">To</div>135      <svg class="caret-down" width="36" height="36" viewBox="0 0 24 24" fill="none">136        <path d="M6 9l6 6 6-6" stroke="#9fb0ab" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>137      </svg>138    </div>139  </div>140 141  <div class="field">142    <div class="label">Subject</div>143  </div>144 145  <div class="compose-area">146    Compose email147  </div>148 149  <!-- Attachment -->150  <div class="attachment-card">151    <div class="attachment-thumb">[IMG: Photo attachment thumbnail]</div>152    <div class="attachment-info">153      <div class="att-icon">154        <svg width="28" height="28" viewBox="0 0 24 24" fill="#eaf3f1">155          <path d="M3 17l4-5 3 4 3-4 8 10H3z"/>156          <rect x="2" y="3" width="20" height="14" rx="2" ry="2" fill="none" stroke="#eaf3f1" stroke-width="1.6"/>157        </svg>158      </div>159      <div class="att-text">160        <div class="att-name">PXL_20230922_154642903.jpg</div>161        <div class="att-size">4.5 MB</div>162      </div>163      <div class="att-close">164        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">165          <path d="M6 6l12 12M18 6L6 18" stroke="#eaf3f1" stroke-width="2" stroke-linecap="round"/>166        </svg>167      </div>168    </div>169  </div>170 171  <!-- Keyboard -->172  <div class="keyboard">173    <div class="suggest">174      <div>quick</div><div>brown</div><div>fox</div>175    </div>176    <div class="key-row">177      <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>178      <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>179    </div>180    <div class="key-row">181      <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>182      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>183      <div class="key wide">184        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">185          <path d="M4 12h16" stroke="#e7eceb" stroke-width="2" stroke-linecap="round"/>186          <path d="M10 7l-5 5 5 5" stroke="#e7eceb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>187        </svg>188      </div>189    </div>190    <div class="key-row">191      <div class="key alt">?123</div>192      <div class="key">@</div>193      <div class="key">🙂</div>194      <div class="key space"></div>195      <div class="key">.</div>196      <div class="key enter">197        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">198          <path d="M21 3v7a5 5 0 0 1-5 5H5" stroke="#0b1a18" stroke-width="2" stroke-linecap="round"/>199          <path d="M9 9l-4 4 4 4" stroke="#0b1a18" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>200        </svg>201      </div>202    </div>203  </div>204 205  <!-- Bottom gesture bar -->206  <div class="gesture-bar"></div>207 208</div>209</body>210</html>