GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Email Compose UI Mock</title>6<style>7 :root{8 --bg:#1a160a;9 --text:#e9dcc2;10 --muted:#a89879;11 --line:#3a3326;12 --accent:#7a3d1d;13 --accent-dark:#6a3316;14 --chip-icon:#f18f4e;15 --key:#2b2518;16 --key-text:#e9dcc2;17 --key-muted:#c9bda2;18 }19 body{ margin:0; padding:0; background:transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }20 #render-target{21 width:1080px; height:2400px;22 position:relative; overflow:hidden;23 background:var(--bg);24 color:var(--text);25 }26 /* Status bar */27 .status-bar{28 position:absolute; top:0; left:0; right:0; height:110px;29 display:flex; align-items:center; justify-content:space-between;30 padding:0 40px; font-weight:600; font-size:44px;31 }32 .status-right{ display:flex; align-items:center; gap:24px; }33 .icon{34 display:inline-flex; align-items:center; justify-content:center;35 }36 /* Header action bar */37 .header{38 position:absolute; top:110px; left:0; right:0; height:140px;39 display:flex; align-items:center; justify-content:space-between;40 padding:0 32px;41 }42 .header .left{ display:flex; align-items:center; gap:24px; }43 .header .right{ display:flex; align-items:center; gap:44px; }44 /* Form rows */45 .form{46 position:absolute; top:260px; left:0; right:0;47 padding:0 40px;48 font-size:40px;49 }50 .row{51 padding:36px 0;52 border-bottom:1px solid var(--line);53 display:flex; align-items:center; justify-content:space-between;54 }55 .row .label{ color:var(--muted); width:180px; }56 .row .value{ flex:1; }57 .row .dropdown{ width:44px; height:44px; }58 .subject .label{ width:auto; }59 .compose-title{60 margin-top:40px;61 font-size:48px;62 color:var(--muted);63 }64 /* Attachment chip */65 .attachment{66 position:absolute; left:40px; right:40px; top:1280px;67 background:var(--accent);68 border-radius:24px;69 box-shadow:0 6px 0 rgba(0,0,0,0.2) inset;70 display:flex; align-items:center; gap:28px;71 padding:34px 36px;72 }73 .ppt-icon{74 width:96px; height:96px; border-radius:16px;75 background:var(--chip-icon);76 display:flex; align-items:center; justify-content:center;77 color:#7a3d1d; font-weight:800; font-size:50px;78 }79 .att-text{ flex:1; }80 .att-title{ font-size:44px; }81 .att-sub{ font-size:34px; color:#d4c7aa; margin-top:8px; }82 .att-close{ width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; }83 /* Keyboard */84 .keyboard{85 position:absolute; left:0; right:0; bottom:0; height:900px;86 background:#18140a;87 border-top:1px solid var(--line);88 padding:20px 26px 34px;89 }90 .kbd-top{91 height:90px; display:flex; align-items:center; gap:38px; padding:0 12px;92 }93 .kbd-top .top-icon{94 width:80px; height:80px; background:var(--key); color:var(--key-muted);95 border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:30px;96 }97 .keys{ margin-top:16px; display:flex; flex-direction:column; gap:22px; }98 .key-row{ display:flex; justify-content:center; gap:18px; }99 .key{100 width:92px; height:110px; background:var(--key); color:var(--key-text);101 border-radius:22px; display:flex; align-items:center; justify-content:center;102 font-size:44px; font-weight:600;103 }104 .key.wide{ width:240px; }105 .key.xwide{ flex:1; min-width:420px; }106 .key.circle{ width:132px; height:132px; border-radius:66px; font-size:40px; }107 .bottom-bar{108 position:absolute; left:0; right:0; bottom:910px; height:8px;109 display:flex; align-items:center; justify-content:center;110 }111 .gesture-pill{112 width:200px; height:10px; background:#e9e9e9; border-radius:5px; opacity:.7;113 }114</style>115</head>116<body>117<div id="render-target">118 119 <!-- Status bar -->120 <div class="status-bar">121 <div>9:18</div>122 <div class="status-right">123 <!-- tiny cloud icon -->124 <svg class="icon" width="42" height="42" viewBox="0 0 48 48">125 <path d="M16 30c-5 0-8-3-8-7s3-7 8-7c1-6 6-9 11-9 7 0 12 5 12 12 3 1 5 4 5 7 0 5-4 9-9 9H16z" fill="#d8cdb2"/>126 </svg>127 <!-- wifi -->128 <svg class="icon" width="42" height="42" viewBox="0 0 48 48">129 <path d="M4 18c10-10 30-10 40 0M10 24c7-7 21-7 28 0M18 30c4-4 8-4 12 0M24 36a4 4 0 1 0 0 .1" stroke="#d8cdb2" stroke-width="3" fill="none" stroke-linecap="round"/>130 </svg>131 <!-- battery -->132 <svg class="icon" width="60" height="42" viewBox="0 0 60 42">133 <rect x="4" y="10" width="44" height="22" rx="4" stroke="#d8cdb2" stroke-width="3" fill="none"/>134 <rect x="8" y="14" width="30" height="14" fill="#d8cdb2"/>135 <rect x="50" y="16" width="6" height="10" rx="2" fill="#d8cdb2"/>136 </svg>137 </div>138 </div>139 140 <!-- Header -->141 <div class="header">142 <div class="left">143 <!-- Back arrow -->144 <svg width="64" height="64" viewBox="0 0 64 64">145 <path d="M36 16 L20 32 L36 48" stroke="#e9dcc2" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>146 </svg>147 </div>148 <div class="right">149 <!-- Paperclip -->150 <svg width="56" height="56" viewBox="0 0 64 64">151 <path d="M18 38c0 8 6 12 12 12s12-4 12-12V22c0-6-4-10-10-10s-10 4-10 10v20" stroke="#e9dcc2" stroke-width="4" fill="none" stroke-linecap="round"/>152 </svg>153 <!-- Send (triangle) -->154 <svg width="60" height="60" viewBox="0 0 64 64">155 <path d="M12 16 L52 32 L12 48 Z" fill="#e9dcc2"/>156 </svg>157 <!-- Kebab menu -->158 <svg width="48" height="48" viewBox="0 0 48 48">159 <circle cx="24" cy="12" r="4" fill="#e9dcc2"/>160 <circle cx="24" cy="24" r="4" fill="#e9dcc2"/>161 <circle cx="24" cy="36" r="4" fill="#e9dcc2"/>162 </svg>163 </div>164 </div>165 166 <!-- Form fields -->167 <div class="form">168 <div class="row">169 <div class="label">From</div>170 <div class="value">dbwscratch.test.id10@gmail.com</div>171 <svg class="dropdown" viewBox="0 0 24 24">172 <path d="M4 8 L12 16 L20 8" fill="#e9dcc2"/>173 </svg>174 </div>175 <div class="row">176 <div class="label">To</div>177 <div class="value"> </div>178 <svg class="dropdown" viewBox="0 0 24 24">179 <path d="M4 8 L12 16 L20 8" fill="#e9dcc2"/>180 </svg>181 </div>182 <div class="row subject">183 <div class="label">Subject</div>184 </div>185 <div class="compose-title">Compose email</div>186 </div>187 188 <!-- Attachment chip -->189 <div class="attachment">190 <div class="ppt-icon">P</div>191 <div class="att-text">192 <div class="att-title">Office Meeting .pptx</div>193 <div class="att-sub">21.9 MB</div>194 </div>195 <div class="att-close">196 <svg width="48" height="48" viewBox="0 0 48 48">197 <path d="M12 12 L36 36 M36 12 L12 36" stroke="#eadfc5" stroke-width="5" stroke-linecap="round"/>198 </svg>199 </div>200 </div>201 202 <!-- Gesture pill above keyboard -->203 <div class="bottom-bar">204 <div class="gesture-pill"></div>205 </div>206 207 <!-- Keyboard -->208 <div class="keyboard">209 <div class="kbd-top">210 <div class="top-icon">◰</div>211 <div class="top-icon">☺</div>212 <div class="top-icon">GIF</div>213 <div class="top-icon">⚙</div>214 <div class="top-icon">↔</div>215 <div class="top-icon">🎨</div>216 <div class="top-icon">🎙</div>217 </div>218 <div class="keys">219 <div class="key-row">220 <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>221 </div>222 <div class="key-row" style="padding-left:36px; padding-right:36px;">223 <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>224 </div>225 <div class="key-row">226 <div class="key circle">⇧</div>227 <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>228 <div class="key circle">⌫</div>229 </div>230 <div class="key-row">231 <div class="key circle" style="background:#e49b6b; color:#2b2518;">?123</div>232 <div class="key">@</div>233 <div class="key">☺</div>234 <div class="key xwide"></div>235 <div class="key">.</div>236 <div class="key circle" style="background:#e9b99a; color:#2b2518;">237 <svg width="36" height="36" viewBox="0 0 36 36">238 <path d="M6 10 L30 18 L6 26 Z" fill="#2b2518"/>239 </svg>240 </div>241 </div>242 </div>243 </div>244 245</div>246</body>247</html>