GD-ML/AndroidCode
13.4k
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>Email Compose Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #121212; color: #EDEDED; border-radius: 0;12 }13 14 /* Top status bar */15 .status-bar {16 position: absolute; top: 0; left: 0; right: 0;17 height: 110px; display: flex; align-items: center; justify-content: space-between;18 padding: 0 36px; color: #EDEDED; font-size: 36px; letter-spacing: 0.5px;19 }20 .status-icons { display: flex; align-items: center; gap: 24px; color: #CFCFCF; }21 .status-dot { width: 16px; height: 16px; border-radius: 50%; background: #CFCFCF; opacity: 0.8; }22 .battery {23 display: inline-block; width: 54px; height: 26px; border: 2px solid #CFCFCF; border-radius: 6px; position: relative;24 }25 .battery::after {26 content: ""; position: absolute; right: -8px; top: 8px; width: 6px; height: 10px; background: #CFCFCF; border-radius: 2px;27 }28 .battery-fill { width: 40px; height: 18px; background: #CFCFCF; margin: 3px; border-radius: 4px; }29 30 /* App bar */31 .app-bar {32 position: absolute; top: 110px; left: 0; right: 0; height: 120px;33 display: flex; align-items: center; padding: 0 24px; border-bottom: 1px solid #262626;34 }35 .app-left { display: flex; align-items: center; gap: 18px; }36 .app-right { margin-left: auto; display: flex; align-items: center; gap: 36px; }37 .icon { width: 54px; height: 54px; fill: none; stroke: #C7CDD3; stroke-width: 3; }38 .icon-dots { stroke: none; fill: #C7CDD3; }39 40 /* Fields */41 .field-row {42 position: absolute; left: 0; right: 0; height: 120px;43 display: flex; align-items: center; padding: 0 30px; gap: 28px; border-bottom: 1px solid #262626;44 font-size: 36px;45 }46 .field-label { width: 140px; color: #9DA1A6; }47 .field-value { flex: 1; color: #EDEDED; display: flex; align-items: center; gap: 16px; }48 .dropdown { width: 28px; height: 28px; }49 .recipient-chip {50 display: inline-flex; align-items: center; gap: 16px;51 background: #2B2B2B; border: 1px solid #3A3A3A; color: #D9D9D9;52 padding: 12px 22px; border-radius: 36px; font-size: 34px;53 }54 .avatar {55 width: 54px; height: 54px; border-radius: 50%; background: #7B8793; color: #101010;56 display: inline-flex; align-items: center; justify-content: center; font-weight: bold;57 }58 59 /* Subject */60 .subject-row {61 position: absolute; left: 0; right: 0; height: 120px; top: 470px;62 display: flex; align-items: center; padding: 0 30px; border-bottom: 1px solid #262626;63 color: #9DA1A6; font-size: 38px;64 }65 66 /* Compose body */67 .body-area {68 position: absolute; left: 0; right: 0; top: 590px; bottom: 920px;69 padding: 24px 30px; overflow: hidden;70 color: #FFFFFF; font-size: 38px; line-height: 1.55;71 }72 .caret {73 display: inline-block; width: 3px; height: 42px; background: #9DA1A6; margin-left: 8px;74 }75 76 /* Keyboard mock */77 .keyboard {78 position: absolute; left: 0; right: 0; bottom: 0; height: 920px;79 background: #1A1A1A; border-top: 1px solid #2A2A2A;80 }81 .kb-toolbar {82 height: 120px; display: flex; align-items: center; gap: 28px; padding: 0 24px;83 color: #CFCFCF; border-bottom: 1px solid #2A2A2A;84 }85 .kb-pill {86 padding: 10px 18px; border-radius: 22px; background: #2B2B2B; border: 1px solid #3A3A3A; color: #D0D0D0; font-size: 30px;87 }88 .kb-row {89 display: grid; grid-template-columns: repeat(10, 1fr); gap: 16px; padding: 18px 24px;90 }91 .key {92 height: 140px; background: #2B2B2B; border: 1px solid #3A3A3A; border-radius: 18px;93 color: #EDEDED; font-size: 40px; display: flex; align-items: center; justify-content: center;94 }95 .kb-row-3 { grid-template-columns: repeat(9, 1fr); padding: 18px 44px; }96 .kb-bottom {97 display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr 1.6fr; gap: 16px; padding: 18px 24px;98 }99 .key-light { background: #C9CDD3; border-color: #C9CDD3; color: #1A1A1A; }100 .space { grid-column: span 2; }101 .enter { background: #C9CDD3; color: #1A1A1A; }102 .nav-handle {103 position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);104 width: 320px; height: 10px; background: #D9D9D9; border-radius: 6px; opacity: 0.7;105 }106</style>107</head>108<body>109<div id="render-target">110 111 <!-- Status bar -->112 <div class="status-bar">113 <div>9:28</div>114 <div class="status-icons">115 <div class="status-dot"></div>116 <div class="status-dot"></div>117 <div class="status-dot"></div>118 <svg width="40" height="32" viewBox="0 0 24 24" class="icon" style="stroke:#CFCFCF">119 <path d="M3 8l9-5 9 5v8l-9 5-9-5z"></path>120 </svg>121 <div style="display:flex; align-items:center; gap:10px;">122 <span style="font-size:32px;">100%</span>123 <div class="battery"><div class="battery-fill"></div></div>124 </div>125 </div>126 </div>127 128 <!-- App bar -->129 <div class="app-bar">130 <div class="app-left">131 <svg class="icon" viewBox="0 0 24 24">132 <path d="M15 5L8 12l7 7" stroke-linecap="round" stroke-linejoin="round"></path>133 </svg>134 <span style="color:#EDEDED; font-size:38px;">Compose</span>135 </div>136 <div class="app-right">137 <svg class="icon" viewBox="0 0 24 24">138 <path d="M4 12h16" stroke-linecap="round"></path>139 <path d="M8 7l8 10" stroke-linecap="round"></path>140 </svg>141 <svg class="icon" viewBox="0 0 24 24">142 <path d="M3 12l18-9-7 9 7 9-18-9z" stroke-linejoin="round"></path>143 </svg>144 <svg class="icon icon-dots" viewBox="0 0 24 24">145 <circle cx="12" cy="5" r="2"></circle>146 <circle cx="12" cy="12" r="2"></circle>147 <circle cx="12" cy="19" r="2"></circle>148 </svg>149 </div>150 </div>151 152 <!-- From row -->153 <div class="field-row" style="top: 230px;">154 <div class="field-label">From</div>155 <div class="field-value">156 <span>fabioteixeira00123@gmail.com</span>157 <svg class="dropdown" viewBox="0 0 24 24" style="fill:none; stroke:#9DA1A6; stroke-width:2;">158 <path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round"></path>159 </svg>160 </div>161 </div>162 163 <!-- To row -->164 <div class="field-row" style="top: 350px;">165 <div class="field-label">To</div>166 <div class="field-value">167 <div class="recipient-chip">168 <div class="avatar">C</div>169 <span>Carlos3345@gmail.com</span>170 </div>171 <svg class="dropdown" viewBox="0 0 24 24" style="fill:none; stroke:#9DA1A6; stroke-width:2;">172 <path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round"></path>173 </svg>174 </div>175 </div>176 177 <!-- Caret line after To -->178 <div style="position:absolute; top: 470px; left: 180px;">179 <div class="caret"></div>180 </div>181 182 <!-- Subject -->183 <div class="subject-row">Subject</div>184 185 <!-- Body text -->186 <div class="body-area">187 <p>Oh wow, look at this deal I found! I think you should lock it down before it’s gone.</p>188 <p>Book now with Omio!189 https://www.omio.com/app/search-frontend/journey/bus/-996524785/L4C4A5E02A2D54A43A0A93EF36F107D96/-356815279341286571?190 locale=en&utm_source=share&utm_medium=ticket-config-page</p>191 </div>192 193 <!-- Keyboard -->194 <div class="keyboard">195 <div class="kb-toolbar">196 <div class="kb-pill">GIF</div>197 <div class="kb-pill">Gboard settings</div>198 <div class="kb-pill">Translate</div>199 <div class="kb-pill">Themes</div>200 <div class="kb-pill">Mic</div>201 </div>202 203 <div class="kb-row">204 <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>205 <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>206 </div>207 <div class="kb-row">208 <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>209 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div><div class="key key-light">⌫</div>210 </div>211 <div class="kb-row kb-row-3">212 <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>213 <div class="key">n</div><div class="key">m</div><div class="key key-light">.</div><div class="key key-light">↵</div>214 </div>215 <div class="kb-bottom">216 <div class="key">?123</div>217 <div class="key">@</div>218 <div class="key">😊</div>219 <div class="key">,</div>220 <div class="key space">space</div>221 <div class="key enter">→</div>222 </div>223 224 <div class="nav-handle"></div>225 </div>226 227</div>228</body>229</html>