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 UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #121212; color: #E0E0E0;13 }14 15 /* Status bar */16 .status-bar {17 height: 90px; display: flex; align-items: center; justify-content: space-between;18 padding: 0 32px; font-size: 34px; color: #fff;19 }20 .status-left { display: flex; align-items: center; gap: 28px; }21 .status-icons { display: flex; gap: 14px; align-items: center; }22 .dot { width: 18px; height: 18px; background: #fff; border-radius: 50%; opacity: 0.9; }23 .status-right { display: flex; align-items: center; gap: 22px; }24 .icon-wifi, .icon-battery { width: 40px; height: 28px; }25 26 /* App bar */27 .app-bar {28 height: 120px; border-bottom: 1px solid #2A2A2A;29 display: flex; align-items: center; justify-content: space-between; padding: 0 24px;30 }31 .app-left { display: flex; align-items: center; gap: 24px; }32 .app-title { font-size: 44px; font-weight: 500; color: #EDEDED; }33 .app-right { display: flex; align-items: center; gap: 30px; }34 .icon-btn { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; }35 36 /* Fields */37 .fields { padding: 12px 24px 0 24px; }38 .field-row {39 padding: 26px 0; border-bottom: 1px solid #2A2A2A;40 display: flex; align-items: center; justify-content: space-between;41 }42 .field-label { color: #B0B0B0; font-size: 34px; width: 120px; }43 .field-value { font-size: 36px; flex: 1; color: #E0E0E0; }44 .chevron { width: 36px; height: 36px; margin-left: 10px; }45 46 .subject-row { padding: 32px 0; border-bottom: 1px solid #2A2A2A; }47 .subject-text { font-size: 40px; color: #E0E0E0; }48 49 /* Message body */50 .message {51 padding: 28px 24px; font-size: 38px; line-height: 1.4; color: #E0E0E0;52 min-height: 800px;53 }54 .link { color: #9ad1ff; }55 56 /* Keyboard mock */57 .keyboard {58 position: absolute; left: 0; bottom: 0;59 width: 100%; height: 950px; background: #1A1A1A; border-top: 1px solid #2A2A2A;60 display: flex; flex-direction: column;61 }62 .kb-toolbar {63 height: 100px; display: flex; align-items: center; gap: 36px; padding: 0 24px; color: #CFCFCF;64 }65 .kb-icon { width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center; }66 .kb-rows { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 14px; }67 .kb-row { display: flex; justify-content: center; gap: 14px; padding: 14px 0; }68 .key {69 background: #2A2A2A; color: #E0E0E0; border-radius: 18px; height: 120px;70 min-width: 84px; padding: 0 22px; display: flex; align-items: center; justify-content: center;71 font-size: 40px;72 }73 .key.small { min-width: 110px; }74 .key.wide { min-width: 180px; }75 .space { flex: 1; min-width: 420px; }76 .accent {77 background: #5AD1C1; color: #0B1F1E;78 }79 .gesture-bar {80 height: 100px; display: flex; align-items: center; justify-content: center;81 }82 .gesture-pill { width: 240px; height: 12px; background: #E0E0E0; border-radius: 6px; opacity: 0.85; }83 84 /* Simple SVG styling */85 svg { fill: currentColor; }86</style>87</head>88<body>89<div id="render-target">90 91 <!-- Status bar -->92 <div class="status-bar">93 <div class="status-left">94 <div>6:12</div>95 <div class="status-icons">96 <div class="dot"></div>97 <div class="dot"></div>98 <div class="dot"></div>99 <div class="dot"></div>100 <div class="dot" style="opacity:0.5;"></div>101 </div>102 </div>103 <div class="status-right">104 <!-- Wi-Fi -->105 <svg class="icon-wifi" viewBox="0 0 24 24">106 <path d="M12 20a2 2 0 1 0 .001-4.001A2 2 0 0 0 12 20zm6.5-6.5a9.5 9.5 0 0 0-13 0l1.7 1.7a7 7 0 0 1 9.6 0l1.7-1.7zm3.2-3.2a14 14 0 0 0-19.4 0l1.8 1.8a11.5 11.5 0 0 1 15.8 0l1.8-1.8z"/>107 </svg>108 <!-- Battery -->109 <svg class="icon-battery" viewBox="0 0 24 24">110 <path d="M2 8a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8zm18-3h2v14h-2V5z"/>111 </svg>112 </div>113 </div>114 115 <!-- App bar -->116 <div class="app-bar">117 <div class="app-left">118 <!-- Back arrow -->119 <div class="icon-btn" style="color:#E0E0E0;">120 <svg viewBox="0 0 24 24" width="48" height="48">121 <path d="M15 6l-6 6 6 6" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>122 </svg>123 </div>124 <div class="app-title">Compose</div>125 </div>126 <div class="app-right">127 <!-- Attach (paperclip) -->128 <div class="icon-btn">129 <svg viewBox="0 0 24 24" width="36" height="36">130 <path d="M7 13l6.6-6.6a3 3 0 1 1 4.2 4.2L9.2 19.2a5 5 0 1 1-7.1-7.1L13 1.2" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/>131 </svg>132 </div>133 <!-- Send (paper plane) -->134 <div class="icon-btn" style="color:#5AD1C1;">135 <svg viewBox="0 0 24 24" width="40" height="40">136 <path d="M3 11l18-8-8 18-2-8-8-2z" />137 </svg>138 </div>139 <!-- More (vertical dots) -->140 <div class="icon-btn">141 <svg viewBox="0 0 24 24" width="36" height="36">142 <circle cx="12" cy="5" r="2"></circle>143 <circle cx="12" cy="12" r="2"></circle>144 <circle cx="12" cy="19" r="2"></circle>145 </svg>146 </div>147 </div>148 </div>149 150 <!-- Fields -->151 <div class="fields">152 <div class="field-row">153 <div class="field-label">From</div>154 <div class="field-value">maria.rossi199309@gmail.com</div>155 <svg class="chevron" viewBox="0 0 24 24">156 <path d="M7 10l5 5 5-5" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/>157 </svg>158 </div>159 160 <div class="field-row">161 <div class="field-label">To</div>162 <div class="field-value" style="color:#757575;"> </div>163 <svg class="chevron" viewBox="0 0 24 24">164 <path d="M7 10l5 5 5-5" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/>165 </svg>166 </div>167 168 <div class="subject-row">169 <div class="subject-text">Weather&Radar - know your weather</div>170 </div>171 </div>172 173 <!-- Message body -->174 <div class="message">175 <div>Weather&Radar - know your weather</div>176 <div class="link">https://app.weatherandradar.com/U13Q/enUSShare</div>177 </div>178 179 <!-- Keyboard mock -->180 <div class="keyboard">181 <div class="kb-toolbar">182 <!-- Apps grid -->183 <div class="kb-icon" style="color:#CFCFCF;">184 <svg viewBox="0 0 24 24"><path d="M3 3h7v7H3V3zm11 0h7v7h-7V3zM3 14h7v7H3v-7zm11 0h7v7h-7v-7z"/></svg>185 </div>186 <!-- Emoji -->187 <div class="kb-icon">188 <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2zm-4 7a1.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 7a6.5 6.5 0 0 0 9 0" fill="none" stroke="currentColor" stroke-width="2"/></svg>189 </div>190 <!-- GIF -->191 <div class="kb-icon">GIF</div>192 <!-- Translate -->193 <div class="kb-icon">194 <svg viewBox="0 0 24 24"><path d="M4 4h9v9H4V4zm11 0h5v5h-5V4zm0 7h5v9h-5v-9zM4 14h9v5H4v-5z"/></svg>195 </div>196 <!-- Settings -->197 <div class="kb-icon">198 <svg viewBox="0 0 24 24"><path d="M12 8a4 4 0 1 0 .001 8.001A4 4 0 0 0 12 8zm9 4l-2.2.4a7.6 7.6 0 0 1-.7 1.7l1.4 1.7-2 2-1.7-1.4a7.6 7.6 0 0 1-1.7.7L14 21h-4l-.4-2.2a7.6 7.6 0 0 1-1.7-.7L5.2 19l-2-2 1.4-1.7a7.6 7.6 0 0 1-.7-1.7L1 12l2.2-.4a7.6 7.6 0 0 1 .7-1.7L2.5 8.2l2-2 1.7 1.4a7.6 7.6 0 0 1 1.7-.7L10 4h4l.4 2.2a7.6 7.6 0 0 1 1.7.7l1.7-1.4 2 2-1.4 1.7c.3.5.6 1.1.7 1.7L21 12z" /></svg>199 </div>200 <!-- Palette -->201 <div class="kb-icon">202 <svg viewBox="0 0 24 24"><path d="M12 3a9 9 0 1 0 0 18c2 0 2-2 2-3s1-2 2-2h1a3 3 0 0 0 0-6h-1a2 2 0 0 1-2-2c0-1-1-5-4-5z"/></svg>203 </div>204 <!-- Mic -->205 <div class="kb-icon accent" style="border-radius: 50%;">206 <svg viewBox="0 0 24 24"><path d="M12 3a3 3 0 0 1 3 3v6a3 3 0 1 1-6 0V6a3 3 0 0 1 3-3zm-7 9a7 7 0 0 0 14 0h-2a5 5 0 0 1-10 0H5zM11 19h2v3h-2z"/></svg>207 </div>208 </div>209 210 <div class="kb-rows">211 <div class="kb-row">212 <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>213 <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>214 </div>215 <div class="kb-row">216 <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>217 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>218 <div class="key small">219 <svg viewBox="0 0 24 24" width="36" height="36"><path d="M6 6h12v12H6zM9 9h6v6H9z" fill="currentColor"/></svg>220 </div>221 </div>222 <div class="kb-row">223 <div class="key wide">224 <svg viewBox="0 0 24 24" width="36" height="36">225 <path d="M15 18l-6-6 6-6" stroke="#E0E0E0" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>226 </svg>227 </div>228 <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>229 <div class="key wide">230 <svg viewBox="0 0 24 24" width="36" height="36">231 <path d="M4 6h16v2H4zm0 5h12v2H4zm0 5h8v2H4z" />232 </svg>233 </div>234 </div>235 <div class="kb-row" style="height:200px;">236 <div class="key wide">?123</div>237 <div class="key">@</div>238 <div class="key">🙂</div>239 <div class="key space">space</div>240 <div class="key">.</div>241 <div class="key accent" style="min-width:150px;">242 <svg viewBox="0 0 24 24" width="40" height="40">243 <path d="M5 12h10l-4 4 1.4 1.4L19 12 12.4 5.6 11 7l4 4H5z"/>244 </svg>245 </div>246 </div>247 </div>248 249 <div class="gesture-bar">250 <div class="gesture-pill"></div>251 </div>252 </div>253 254</div>255</body>256</html>