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; height:2400px;9    position:relative; overflow:hidden;10    background:#0f1111; color:#eaeaea;11  }12  /* Status bar */13  .status-bar{14    position:absolute; top:0; left:0; right:0; height:110px;15    padding:0 36px; display:flex; align-items:center; justify-content:space-between;16    color:#dcdcdc; font-size:40px; letter-spacing:0.5px;17  }18  .status-icons{ display:flex; align-items:center; gap:22px; font-size:34px; color:#cfcfcf;}19  .battery{20    width:66px; height:30px; border:3px solid #cfcfcf; border-radius:6px; position:relative;21  }22  .battery::after{23    content:""; position:absolute; right:-10px; top:7px; width:8px; height:16px; background:#cfcfcf; border-radius:2px;24  }25  .battery .level{position:absolute; top:3px; left:3px; right:8px; bottom:3px; background:#cfcfcf;}26  /* App bar */27  .app-bar{28    position:absolute; top:110px; left:0; right:0; height:160px; display:flex; align-items:center;29    padding:0 24px; gap:24px; border-bottom:1px solid #232323;30  }31  .icon-btn{ width:96px; height:96px; display:flex; align-items:center; justify-content:center; }32  .from-info{ flex:1; }33  .from-line{ color:#cfcfcf; font-size:36px; }34  .header-actions{ display:flex; align-items:center; gap:8px; }35  /* To row */36  .to-row{37    position:absolute; top:270px; left:0; right:0; height:120px; display:flex; align-items:center;38    padding:0 32px; gap:20px; border-bottom:1px solid #1e1e1e;39  }40  .chip{41    display:flex; align-items:center; gap:16px; background:#141617; border:2px solid #3a3a3a;42    padding:12px 22px; border-radius:50px; max-width:900px;43  }44  .avatar{45    width:70px; height:70px; border-radius:50%; background:#64a77b; display:flex; align-items:center; justify-content:center;46    color:#0c2015; font-weight:bold; font-size:40px;47  }48  .email{ color:#eaeaea; font-size:34px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }49  .caret{ width:24px; height:24px; margin-left:6px; border-right:2px solid #9e9e9e; border-bottom:2px solid #9e9e9e; transform:rotate(45deg); }50  /* Subject */51  .subject{52    position:absolute; top:390px; left:0; right:0; height:120px; display:flex; align-items:center;53    padding:0 32px; color:#9e9e9e; font-size:42px; border-bottom:1px solid #1e1e1e;54  }55  /* Body */56  .body{57    position:absolute; top:510px; left:0; right:0; height:790px; padding:28px 32px; font-size:42px; line-height:1.35;58    color:#f3f3f3; overflow:hidden;59  }60  /* Keyboard */61  .keyboard{62    position:absolute; bottom:0; left:0; right:0; height:1100px; background:#161717; border-top:1px solid #202020;63    padding:28px 22px 30px;64  }65  .kbd-top-bar{66    height:120px; display:flex; align-items:center; justify-content:flex-start; gap:26px; color:#cfcfcf;67  }68  .kbd-keys{ margin-top:10px; display:flex; flex-direction:column; gap:24px; }69  .row{ display:flex; justify-content:space-between; gap:16px; }70  .key{71    background:#2b2b2b; color:#e9e9e9; border-radius:22px; height:130px; min-width:90px; flex:1;72    display:flex; align-items:center; justify-content:center; font-size:54px; box-shadow: inset 0 -2px 0 rgba(255,255,255,0.04);73  }74  .key.small{ flex:0 0 96px; }75  .space{ flex:1 1 520px; }76  .enter{ background:#a5d6a7; color:#133; }77  .leftwide{ flex:0 0 170px; }78  .dot{ flex:0 0 120px; }79  .emoji{ flex:0 0 120px; }80  .mic{ flex:0 0 120px; }81  .spacer{ flex:0 0 20px; background:transparent; }82  /* subtle cursor line at top textarea */83  .cursor{84    width:4px; height:70px; background:#8bc34a; display:inline-block; vertical-align:middle; margin-left:6px;85  }86  /* simple svg colors */87  svg { fill:#cfcfcf; }88  .send svg { fill:#87d96c; }89</style>90</head>91<body>92<div id="render-target">93 94  <!-- Status Bar -->95  <div class="status-bar">96    <div>11:56</div>97    <div class="status-icons">98      <div>◦</div>99      <div>◦</div>100      <div style="font-size:30px;">100%</div>101      <div class="battery"><div class="level"></div></div>102    </div>103  </div>104 105  <!-- App Bar -->106  <div class="app-bar">107    <div class="icon-btn">108      <svg width="52" height="52" viewBox="0 0 24 24">109        <path d="M15.5 3.5 7 12l8.5 8.5-1.4 1.4L4.2 12l9.9-9.9z"></path>110      </svg>111    </div>112    <div class="from-info">113      <div class="from-line">From &nbsp; dbwscratch.test.id10@gmail.com</div>114    </div>115    <div class="header-actions">116      <div class="icon-btn">117        <svg width="44" height="44" viewBox="0 0 24 24">118          <path d="M16.5 6.5c-1.7-1.7-4.3-1.7-6 0l-6.2 6.2c-1.4 1.4-1.4 3.7 0 5.2s3.7 1.4 5.2 0l6-6c1-1 1-2.6 0-3.6s-2.6-1-3.6 0l-6 6 .9.9 6-6c.5-.5 1.4-.5 2 0s.5 1.4 0 2l-6 6c-1 1-2.6 1-3.6 0s-1-2.6 0-3.6l6.2-6.2c1.1-1.1 2.9-1.1 4 0l.1.1 1-.9-.1-.1z"></path>119        </svg>120      </div>121      <div class="icon-btn send">122        <svg width="54" height="54" viewBox="0 0 24 24">123          <path d="M2 21 23 12 2 3v7l14 2-14 2z"></path>124        </svg>125      </div>126      <div class="icon-btn">127        <svg width="8" height="44" viewBox="0 0 8 24">128          <circle cx="4" cy="4" r="2" />129          <circle cx="4" cy="12" r="2" />130          <circle cx="4" cy="20" r="2" />131        </svg>132      </div>133    </div>134  </div>135 136  <!-- To Row -->137  <div class="to-row">138    <div class="chip">139      <div class="avatar">n</div>140      <div class="email">naomi.rousseau@example.com</div>141      <div class="caret"></div>142    </div>143  </div>144 145  <!-- Subject -->146  <div class="subject">Subject</div>147 148  <!-- Body content -->149  <div class="body">150    https://www.ebay.com/itm/155608186658?mkcid=16&amp;mkevt=1&amp;mkrid=711-127632-2357-0&amp;ssspo=gzPnQmhRTAG&amp;sssrc=4429486&amp;ssid=&amp;var=455888201081&amp;widget_ver=artemis&amp;media=MORE151    <span class="cursor"></span>152  </div>153 154  <!-- Keyboard -->155  <div class="keyboard">156    <div class="kbd-top-bar">157      <div style="width:100px;height:84px;background:#2b2b2b;border-radius:16px;display:flex;align-items:center;justify-content:center;">⌘</div>158      <div style="width:100px;height:84px;background:#2b2b2b;border-radius:16px;display:flex;align-items:center;justify-content:center;">GIF</div>159      <div style="width:100px;height:84px;background:#2b2b2b;border-radius:16px;display:flex;align-items:center;justify-content:center;">⚙︎</div>160      <div style="width:100px;height:84px;background:#2b2b2b;border-radius:16px;display:flex;align-items:center;justify-content:center;">G</div>161      <div style="width:100px;height:84px;background:#2b2b2b;border-radius:16px;display:flex;align-items:center;justify-content:center;">🎨</div>162      <div style="width:100px;height:84px;background:#2b2b2b;border-radius:16px;display:flex;align-items:center;justify-content:center;">🎤</div>163    </div>164 165    <div class="kbd-keys">166      <div class="row">167        <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>168      </div>169      <div class="row">170        <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>171      </div>172      <div class="row">173        <div class="key leftwide">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>174        <div class="key" style="flex:0 0 150px;">⌫</div>175      </div>176      <div class="row">177        <div class="key leftwide">?123</div>178        <div class="key emoji">@</div>179        <div class="key emoji">☺</div>180        <div class="key space"></div>181        <div class="key dot">.</div>182        <div class="key enter">183          <svg width="56" height="56" viewBox="0 0 24 24">184            <path d="M3 12h13v-4l5 5-5 5v-4H3z"></path>185          </svg>186        </div>187      </div>188    </div>189  </div>190 191</div>192</body>193</html>