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>Compose - Mock UI</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; box-sizing: border-box;12 }13 14 .status-bar {15 position: absolute; top: 0; left: 0; width: 100%; height: 96px;16 display: flex; align-items: center; justify-content: space-between;17 padding: 0 28px; color: #fff; font-size: 34px; letter-spacing: 0.5px;18 }19 .status-right { display: flex; align-items: center; gap: 20px; }20 .dot { width: 18px; height: 18px; border-radius: 50%; background: #fff; opacity: 0.8; }21 .wifi svg, .battery svg { display: block; }22 .wifi path { stroke: #fff; stroke-width: 4; fill: none; opacity: 0.9; }23 .battery rect, .battery path { fill: #fff; }24 25 .header {26 position: absolute; top: 96px; left: 0; width: 100%; height: 140px;27 display: flex; align-items: center;28 padding: 0 24px; border-bottom: 1px solid #2A2A2A;29 }30 .back { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }31 .compose-title { font-size: 48px; font-weight: 500; margin-left: 12px; flex: 1; }32 .header-actions { display: flex; align-items: center; gap: 24px; }33 .icon-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }34 35 .content {36 position: absolute; top: 236px; left: 0; width: 100%;37 padding: 20px 24px 0 24px; box-sizing: border-box;38 }39 .field { padding: 12px 0 20px 0; border-bottom: 1px solid #222; }40 .label { font-size: 26px; color: #9E9E9E; margin-bottom: 8px; }41 .value-row { display: flex; align-items: center; justify-content: space-between; }42 .email-value { font-size: 34px; color: #EDEDED; }43 .caret { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; opacity: 0.9; }44 45 .to-input { font-size: 36px; color: #EDEDED; display: flex; align-items: center; gap: 6px; }46 .cursor {47 width: 2px; height: 44px; background: #8AB4F8; display: inline-block;48 animation: blink 1.2s steps(1) infinite;49 }50 @keyframes blink { 50% { opacity: 0; } }51 52 .suggestion {53 margin-top: 18px; padding: 18px 8px; display: flex; align-items: center; gap: 20px;54 }55 .avatar {56 width: 72px; height: 72px; border-radius: 50%; background: #6C4BD9; color: #fff;57 display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 600;58 }59 .suggest-text { display: flex; flex-direction: column; }60 .suggest-text .primary { font-size: 32px; color: #EDEDED; }61 .suggest-text .secondary { font-size: 26px; color: #9E9E9E; }62 63 /* keyboard */64 .keyboard {65 position: absolute; left: 0; bottom: 100px; width: 100%; height: 960px;66 background: #1E1E1E; border-top: 1px solid #2A2A2A; box-sizing: border-box;67 padding: 20px 24px 24px 24px;68 }69 .kb-toolbar { height: 88px; display: flex; align-items: center; gap: 24px; color: #CFCFCF; }70 .kb-toolbar .tool {71 width: 64px; height: 64px; border-radius: 16px; background: #2A2A2A;72 display: flex; align-items: center; justify-content: center;73 }74 75 .kb-row { display: grid; gap: 16px; margin-top: 18px; }76 .row-1 { grid-template-columns: repeat(10, 1fr); }77 .row-2 { grid-template-columns: repeat(9, 1fr); padding: 0 48px; }78 .row-3 { grid-template-columns: 1.3fr repeat(7, 1fr) 1.3fr; }79 .row-4 { grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr 1fr 1.3fr; margin-top: 24px; }80 .key {81 height: 112px; border-radius: 18px; background: #2A2A2A; color: #F5F5F5;82 display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 500;83 }84 .key.small { font-size: 32px; }85 .key.enter { background: #C7DBFF; color: #1E1E1E; font-weight: 700; }86 .key.shift, .key.back { background: #2F2F2F; color: #EDEDED; }87 88 .gesture {89 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);90 width: 220px; height: 12px; background: #D0D0D0; border-radius: 12px; opacity: 0.7;91 }92 93 .thin { opacity: 0.8; }94 .divider { height: 1px; background: #222; margin: 12px 0; }95</style>96</head>97<body>98<div id="render-target">99 100 <!-- Status Bar -->101 <div class="status-bar">102 <div>4:53</div>103 <div class="status-right">104 <div class="dot"></div>105 <div class="dot"></div>106 <div class="dot"></div>107 <div class="dot"></div>108 <div class="wifi">109 <svg width="44" height="44" viewBox="0 0 44 44">110 <path d="M6 16c8-8 24-8 32 0"></path>111 <path d="M12 22c6-6 14-6 20 0"></path>112 <path d="M18 28c4-4 8-4 12 0"></path>113 <circle cx="22" cy="32" r="2.5" fill="#fff"></circle>114 </svg>115 </div>116 <div class="battery">117 <svg width="50" height="28" viewBox="0 0 50 28">118 <rect x="2" y="4" width="40" height="20" rx="4"></rect>119 <rect x="6" y="8" width="30" height="12" fill="#121212"></rect>120 <path d="M44 9h4v10h-4z"></path>121 </svg>122 </div>123 </div>124 </div>125 126 <!-- Header -->127 <div class="header">128 <div class="back">129 <svg width="44" height="44" viewBox="0 0 44 44">130 <path d="M28 10 L14 22 L28 34" stroke="#FFFFFF" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>131 </svg>132 </div>133 <div class="compose-title">Compose</div>134 <div class="header-actions">135 <div class="icon-btn">136 <!-- Paperclip -->137 <svg width="44" height="44" viewBox="0 0 44 44">138 <path d="M18 30c6 6 12 0 12-6V14a6 6 0 0 0-12 0v10c0 3 3 6 6 6" stroke="#CFCFCF" stroke-width="3.5" fill="none" stroke-linecap="round"></path>139 </svg>140 </div>141 <div class="icon-btn">142 <!-- Send -->143 <svg width="44" height="44" viewBox="0 0 44 44">144 <path d="M8 36 L38 22 L8 8 Z" fill="#64B5F6"></path>145 </svg>146 </div>147 <div class="icon-btn">148 <!-- Kebab -->149 <svg width="44" height="44" viewBox="0 0 44 44">150 <circle cx="22" cy="10" r="3.2" fill="#CFCFCF"></circle>151 <circle cx="22" cy="22" r="3.2" fill="#CFCFCF"></circle>152 <circle cx="22" cy="34" r="3.2" fill="#CFCFCF"></circle>153 </svg>154 </div>155 </div>156 </div>157 158 <!-- Content -->159 <div class="content">160 <div class="field">161 <div class="label">From</div>162 <div class="value-row">163 <div class="email-value">amelia.miller2709@gmail.com</div>164 <div class="caret">165 <svg width="30" height="30" viewBox="0 0 30 30">166 <path d="M6 12 L15 20 L24 12" stroke="#CFCFCF" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>167 </svg>168 </div>169 </div>170 </div>171 172 <div class="field" style="border-bottom: none;">173 <div class="label">To</div>174 <div class="value-row">175 <div class="to-input">176 <span>natalie.larson1998@gmail.com</span><span class="cursor"></span>177 </div>178 <div class="caret">179 <svg width="30" height="30" viewBox="0 0 30 30">180 <path d="M6 12 L15 20 L24 12" stroke="#CFCFCF" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>181 </svg>182 </div>183 </div>184 185 <div class="suggestion">186 <div class="avatar">n</div>187 <div class="suggest-text">188 <div class="primary">natalie.larson1998@gmail.com</div>189 <div class="secondary">natalie.larson1998@gmail.com</div>190 </div>191 </div>192 </div>193 194 <div class="divider"></div>195 </div>196 197 <!-- Keyboard -->198 <div class="keyboard">199 <div class="kb-toolbar">200 <div class="tool">201 <svg width="28" height="28" viewBox="0 0 28 28">202 <rect x="3" y="3" width="8" height="8" fill="#CFCFCF"></rect>203 <rect x="17" y="3" width="8" height="8" fill="#CFCFCF"></rect>204 <rect x="3" y="17" width="8" height="8" fill="#CFCFCF"></rect>205 <rect x="17" y="17" width="8" height="8" fill="#CFCFCF"></rect>206 </svg>207 </div>208 <div class="tool">209 <svg width="28" height="28" viewBox="0 0 28 28">210 <circle cx="14" cy="14" r="10" fill="#CFCFCF"></circle>211 </svg>212 </div>213 <div class="tool">214 <div style="color:#CFCFCF;font-size:26px;font-weight:700;">GIF</div>215 </div>216 <div class="tool">217 <svg width="28" height="28" viewBox="0 0 28 28">218 <circle cx="14" cy="14" r="12" stroke="#CFCFCF" stroke-width="3" fill="none"></circle>219 <rect x="12" y="7" width="4" height="14" fill="#CFCFCF"></rect>220 </svg>221 </div>222 <div class="tool">223 <svg width="28" height="28" viewBox="0 0 28 28">224 <path d="M6 10h16M6 18h16" stroke="#CFCFCF" stroke-width="3"></path>225 <rect x="12" y="6" width="4" height="16" fill="#CFCFCF"></rect>226 </svg>227 </div>228 <div class="tool">229 <svg width="28" height="28" viewBox="0 0 28 28">230 <path d="M5 23 L23 23 L23 5" stroke="#CFCFCF" stroke-width="3" fill="none"></path>231 <rect x="9" y="9" width="10" height="10" fill="#CFCFCF"></rect>232 </svg>233 </div>234 <div class="tool">235 <svg width="28" height="28" viewBox="0 0 28 28">236 <path d="M14 22c4 0 7-3 7-7V6" stroke="#CFCFCF" stroke-width="3" fill="none"></path>237 <rect x="6" y="6" width="6" height="10" rx="3" fill="#CFCFCF"></rect>238 </svg>239 </div>240 </div>241 242 <div class="kb-row row-1">243 <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>244 </div>245 <div class="kb-row row-2">246 <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>247 </div>248 <div class="kb-row row-3">249 <div class="key shift" style="font-size:30px;">⇧</div>250 <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>251 <div class="key back">252 <svg width="40" height="40" viewBox="0 0 44 44">253 <path d="M16 14 L8 22 L16 30" stroke="#EDEDED" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>254 <rect x="18" y="18" width="18" height="8" rx="2" fill="#EDEDED"></rect>255 </svg>256 </div>257 </div>258 <div class="kb-row row-4">259 <div class="key small">?123</div>260 <div class="key small">@</div>261 <div class="key small">🙂</div>262 <div class="key small">,</div>263 <div class="key small">space</div>264 <div class="key small">.</div>265 <div class="key enter">↵</div>266 </div>267 </div>268 269 <div class="gesture"></div>270</div>271</body>272</html>