GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Gmail Compose - Dark UI</title>5<meta name="viewport" content="width=1440, initial-scale=1.0">6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1440px; height: 3120px; position: relative; overflow: hidden;10 background: #0e0e0e; color: #e6e6e6; font-family: Roboto, Arial, sans-serif;11 border-radius: 60px; box-shadow: 0 20px 60px rgba(0,0,0,0.45);12 }13 14 .status-bar {15 height: 120px; padding: 0 60px; display: flex; align-items: center; justify-content: space-between;16 font-size: 44px; color: #dcdcdc;17 }18 .status-left { display: flex; align-items: center; gap: 28px; }19 .status-right { display: flex; align-items: center; gap: 28px; }20 .icon-circle { width: 28px; height: 28px; border-radius: 50%; background: #cfcfcf; opacity: 0.85; }21 22 .toolbar {23 height: 170px; border-bottom: 1px solid #232323; padding: 0 40px;24 display: flex; align-items: center; justify-content: space-between;25 }26 .toolbar-left { display: flex; align-items: center; gap: 28px; }27 .toolbar-right { display: flex; align-items: center; gap: 44px; }28 .tool-icon { width: 72px; height: 72px; display: grid; place-items: center; }29 .tool-icon svg { width: 56px; height: 56px; fill: #cfcfcf; }30 31 .fields { padding: 10px 40px 0; }32 .field {33 display: grid; grid-template-columns: 180px 1fr 80px; align-items: center;34 border-bottom: 1px solid #242424; padding: 32px 20px;35 font-size: 46px;36 }37 .label { color: #9ba09b; }38 .value { color: #e6e6e6; }39 .dropdown svg { width: 44px; height: 44px; fill: #bfbfbf; }40 41 .subject {42 border-bottom: 1px solid #242424; padding: 40px 60px;43 font-size: 64px; color: #a7a7a7;44 }45 46 .body-content {47 padding: 40px 60px; font-size: 60px; line-height: 1.25; color: #e8e8e8;48 }49 50 /* Keyboard */51 .keyboard {52 position: absolute; left: 0; bottom: 0; width: 100%;53 background: #111111; border-top: 1px solid #222; padding: 24px 36px 36px;54 }55 .kb-tools { display: flex; align-items: center; justify-content: center; gap: 80px; padding: 16px 0 24px; }56 .kb-tool {57 width: 72px; height: 72px; border-radius: 50%; background: #1b1b1b; border: 1px solid #2a2a2a;58 display: grid; place-items: center;59 }60 .kb-tool svg { width: 44px; height: 44px; fill: #cfcfcf; }61 62 .kb-row {63 display: flex; gap: 18px; padding: 12px 12px;64 }65 .key {66 flex: 1; height: 150px; border-radius: 32px; background: #1a1a1a; border: 1px solid #2a2a2a;67 display: grid; place-items: center; color: #eaeaea; font-size: 56px; font-weight: 500;68 }69 .key.small { flex: 0.9; }70 .key.wide { flex: 2.2; }71 .space { flex: 4.8; height: 170px; background: #1d1d1d; }72 .enter {73 flex: 1.4; height: 170px; background: #bfe5bf; color: #0b0b0b; border: 1px solid #a9d3a6;74 display: grid; place-items: center;75 }76 .enter svg { width: 68px; height: 68px; fill: #0a0a0a; }77</style>78</head>79<body>80<div id="render-target">81 82 <!-- Status Bar -->83 <div class="status-bar">84 <div class="status-left">85 <div>11:31</div>86 <div class="icon-circle"></div>87 <div class="icon-circle"></div>88 <div class="icon-circle"></div>89 </div>90 <div class="status-right">91 <div class="icon-circle"></div>92 <div class="icon-circle"></div>93 <div class="icon-circle"></div>94 </div>95 </div>96 97 <!-- Compose Toolbar -->98 <div class="toolbar">99 <div class="toolbar-left">100 <div class="tool-icon">101 <!-- Back Arrow -->102 <svg viewBox="0 0 24 24">103 <path d="M20 11H7.8l5.6-5.6-1.4-1.4L4 12l8 8 1.4-1.4L7.8 13H20v-2z"></path>104 </svg>105 </div>106 </div>107 <div class="toolbar-right">108 <div class="tool-icon">109 <!-- Paperclip -->110 <svg viewBox="0 0 24 24">111 <path d="M16.5 6.5l-8.8 8.8a4 4 0 0 0 5.6 5.6l9.1-9.1a6 6 0 0 0-8.5-8.5L4.8 12.4l1.4 1.4 9.1-9.1a4 4 0 0 1 5.6 5.6l-9.1 9.1a2 2 0 0 1-2.8-2.8l8.8-8.8-1.4-1.4z"></path>112 </svg>113 </div>114 <div class="tool-icon">115 <!-- Send Triangle -->116 <svg viewBox="0 0 24 24">117 <path d="M2 21l20-9L2 3l3 7 9 2-9 2-3 7z"></path>118 </svg>119 </div>120 <div class="tool-icon">121 <!-- Kebab menu -->122 <svg viewBox="0 0 24 24">123 <circle cx="12" cy="5" r="2"></circle>124 <circle cx="12" cy="12" r="2"></circle>125 <circle cx="12" cy="19" r="2"></circle>126 </svg>127 </div>128 </div>129 </div>130 131 <!-- Fields -->132 <div class="fields">133 <div class="field">134 <div class="label">From</div>135 <div class="value">clarkquentin70@gmail.com</div>136 <div class="dropdown">137 <!-- chevron down -->138 <svg viewBox="0 0 24 24">139 <path d="M7 9l5 5 5-5H7z"></path>140 </svg>141 </div>142 </div>143 144 <div class="field">145 <div class="label">To</div>146 <div class="value" style="color:#808080;"> </div>147 <div class="dropdown">148 <svg viewBox="0 0 24 24">149 <path d="M7 9l5 5 5-5H7z"></path>150 </svg>151 </div>152 </div>153 </div>154 155 <!-- Subject -->156 <div class="subject">Subject</div>157 158 <!-- Message Body -->159 <div class="body-content">160 <p>Check out my train journey:<br>161 https://eurailapp.com/share/journey?<br>162 id=066C4220-787C-11EE-8B97-7B69CBF2B7CF&type=list&brand=interrail</p>163 </div>164 165 <!-- Keyboard -->166 <div class="keyboard">167 <div class="kb-tools">168 <div class="kb-tool">169 <!-- grid icon -->170 <svg viewBox="0 0 24 24"><path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"></path></svg>171 </div>172 <div class="kb-tool">173 <!-- emoji -->174 <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-4 8a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm8 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm-8.5 5.5a6.5 6.5 0 0 0 9 0l-1.4-1.4a4.7 4.7 0 0 1-6.2 0l-1.4 1.4z"></path></svg>175 </div>176 <div class="kb-tool"><span style="font-size:32px;color:#cfcfcf;">GIF</span></div>177 <div class="kb-tool">178 <!-- translate icon -->179 <svg viewBox="0 0 24 24"><path d="M20 5h-9v2h3.6L11 11.5 8.4 9.9l-1.2 1.6L11 14l2.4-3.2L16 13v6h2v-4h2V5zM4 7h6V5H2v14h8v-2H4V7z"></path></svg>180 </div>181 <div class="kb-tool">182 <!-- settings -->183 <svg viewBox="0 0 24 24"><path d="M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zm8.9-3.5l-2.1-.8.3-2.3 2-1.1-2-3.4-2 1.1-1.7-1.3-.8-2.2H9.4l-.8 2.2-1.7 1.3-2-1.1-2 3.4 2 1.1.3 2.3-2.1.8 1.2 3.6 2.3-.3 1.7 1.3.8 2.2h5.2l.8-2.2 1.7-1.3 2.3.3 1.2-3.6z"></path></svg>184 </div>185 <div class="kb-tool">186 <!-- palette -->187 <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 0 0-10 10c0 4.9 4.5 7 8 7h2a2 2 0 0 0 2-2c0-1-.8-1.8-1.8-2a2 2 0 0 1 1.8-3h1a6 6 0 0 0 6-6A10 10 0 0 0 12 2zm-6 9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm4-4a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm6 1a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"></path></svg>188 </div>189 <div class="kb-tool">190 <!-- mic -->191 <svg viewBox="0 0 24 24"><path d="M12 14a3 3 0 0 0 3-3V5a3 3 0 1 0-6 0v6a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.9V22h2v-4.1A7 7 0 0 0 19 11h-2z"></path></svg>192 </div>193 </div>194 195 <div class="kb-row">196 <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>197 </div>198 <div class="kb-row">199 <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>200 </div>201 <div class="kb-row">202 <div class="key small">⇧</div>203 <div class="key">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>204 <div class="key small">⌫</div>205 </div>206 <div class="kb-row">207 <div class="key wide">?123</div>208 <div class="key wide">@</div>209 <div class="key wide">☺</div>210 <div class="key space"></div>211 <div class="key">.</div>212 <div class="enter">213 <svg viewBox="0 0 24 24"><path d="M5 5h2v6h11v-3l4 4-4 4v-3H7a2 2 0 0 1-2-2V5z"></path></svg>214 </div>215 </div>216 </div>217 218</div>219</body>220</html>