GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Chat UI - Simone</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background:#ffffff; color:#111;10 }11 12 /* Status bar */13 .status-bar{14 position:absolute; top:0; left:0; right:0; height:90px; padding:0 40px;15 display:flex; align-items:center; justify-content:space-between; background:#fff;16 }17 .status-left{ font-weight:600; font-size:42px; color:#212121; }18 .status-right{ display:flex; align-items:center; gap:26px; }19 .status-dot{ width:18px; height:18px; background:#666; border-radius:50%; opacity:.5; }20 21 /* Top header */22 .header{23 position:absolute; top:90px; left:0; right:0; height:140px; padding:0 30px;24 display:flex; align-items:center; border-bottom:1px solid #eee; background:#fff;25 }26 .icon-btn{27 width:86px; height:86px; border-radius:50%; display:flex; align-items:center; justify-content:center;28 color:#333;29 }30 .title-wrap{ margin-left:10px; }31 .title-wrap .name{ font-size:52px; font-weight:700; color:#1a1a1a; }32 .title-wrap .sub{ font-size:30px; color:#6d6d6d; margin-top:6px; display:flex; align-items:center; gap:10px; }33 .header-actions{ margin-left:auto; display:flex; align-items:center; gap:26px; }34 35 /* Info card area */36 .info-area{37 position:absolute; top:260px; left:0; right:0; padding:0 40px;38 }39 .profile-card{40 background:#f7f7fb; border:1px solid #e6e6ee; border-radius:22px; padding:60px 24px 40px;41 position:relative; text-align:center;42 }43 .avatar{44 position:absolute; top:-60px; left:50%; transform:translateX(-50%);45 width:120px; height:120px; border-radius:50%; background:#E0E0E0; border:1px solid #BDBDBD;46 display:flex; align-items:center; justify-content:center; color:#757575; font-size:24px;47 }48 .card-title{ font-weight:800; font-size:46px; margin-bottom:32px; color:#1f1f1f; }49 .blue-note{50 margin:0 auto; width:920px; max-width:100%; background:#C7D3FF; color:#0b1a3a;51 padding:26px 30px; border-radius:18px; text-align:left; display:flex; align-items:center; gap:18px;52 }53 .blue-note .dot{ width:14px; height:14px; background:#5a6bff; border-radius:50%; }54 .helper-text{ text-align:center; color:#575757; font-size:40px; margin:56px 0 16px; }55 56 .sticker{57 margin:10px auto; width:300px; height:300px; background:#E0E0E0; border:1px solid #BDBDBD;58 display:flex; align-items:center; justify-content:center; color:#757575; border-radius:18px;59 }60 .wave-btn{61 margin:22px auto 0; width:200px; height:80px; background:#6C7BFF; color:#fff;62 border-radius:40px; display:flex; align-items:center; justify-content:center; font-weight:700; letter-spacing:.5px;63 box-shadow:0 4px 10px rgba(108,123,255,.3);64 }65 66 /* Composer (above keyboard) */67 .composer{68 position:absolute; left:0; right:0; bottom:980px; height:160px; background:#fff;69 border-top:1px solid #e9e9e9; border-bottom:1px solid #e9e9e9; padding:20px 24px;70 display:flex; flex-direction:column; justify-content:center;71 }72 .input-row{73 display:flex; align-items:center; gap:22px;74 }75 .text-bubble{76 flex:1; background:#f7f7f7; border:1px solid #e1e1e1; height:92px; border-radius:18px;77 display:flex; align-items:center; padding:0 20px; font-size:42px; color:#1b1b1b;78 }79 .action{80 width:74px; height:74px; border-radius:18px; display:flex; align-items:center; justify-content:center; color:#4a4a4a;81 }82 .send{83 width:92px; height:92px; background:#6C7BFF; border-radius:24px; display:flex; align-items:center; justify-content:center; color:#fff;84 }85 86 /* Keyboard */87 .keyboard{88 position:absolute; left:0; right:0; bottom:0; height:980px; background:#1b1b1e; padding:24px 26px 30px;89 box-shadow:0 -6px 18px rgba(0,0,0,.25);90 }91 .kb-top{92 height:90px; display:flex; align-items:center; justify-content:space-between; color:#d7d7d7; font-size:44px; margin-bottom:16px;93 }94 .keys{95 display:grid; grid-template-columns: repeat(10, 1fr); gap:16px;96 }97 .key{98 background:#2b2b30; color:#efefef; height:120px; border-radius:18px; display:flex; align-items:center; justify-content:center;99 font-size:44px; box-shadow: inset 0 -3px 0 rgba(255,255,255,0.05);100 }101 .row{ margin-top:18px; display:grid; grid-template-columns: repeat(9, 1fr); gap:16px; }102 .row3{ grid-template-columns: repeat(8, 1fr); }103 .bottom-row{ margin-top:18px; display:grid; grid-template-columns: 1.2fr repeat(5, 1fr) 1.2fr; gap:16px; }104 .space{ grid-column: span 3; }105 .small{ height:110px; }106 .key.mic{ background:#38383d; }107 .hint-bar{108 display:flex; gap:24px; padding:12px 8px 18px; color:#d7d7d7; font-size:42px;109 }110</style>111</head>112<body>113<div id="render-target">114 115 <!-- Status bar -->116 <div class="status-bar">117 <div class="status-left">12:34</div>118 <div class="status-right">119 <div class="status-dot"></div>120 <div class="status-dot"></div>121 <div class="status-dot"></div>122 </div>123 </div>124 125 <!-- Header -->126 <div class="header">127 <div class="icon-btn" title="Back">128 <!-- Left chevron -->129 <svg width="44" height="44" viewBox="0 0 24 24" fill="#20242b">130 <path d="M15.5 3.9 7.4 12l8.1 8.1-1.9 1.9L3.6 12l10.1-10.1 1.8 1.9z"/>131 </svg>132 </div>133 <div class="title-wrap">134 <div class="name">Simone</div>135 <div class="sub">136 <svg width="18" height="18" viewBox="0 0 24 24" fill="#6d6d6d">137 <circle cx="12" cy="12" r="4"></circle>138 </svg>139 8:04 AM140 </div>141 </div>142 <div class="header-actions">143 <div class="icon-btn" title="Call">144 <svg width="46" height="46" viewBox="0 0 24 24" fill="#20242b">145 <path d="M6.6 2.5 4.8 5.8c.8 5 5.5 9.7 10.5 10.5l3.3-1.8c.4-.2.9 0 1.1.4l1.5 3c.2.4.1.9-.2 1.2-1.7 1.6-5 2.2-9.8-.6-4.7-2.7-7.3-6.6-8.3-10.1-.9-3.2-.2-5.4 1.2-6.6.3-.3.8-.3 1.1 0l2.5 1.7c.3.2.4.7.1 1z"/>146 </svg>147 </div>148 <div class="icon-btn" title="Settings">149 <svg width="46" height="46" viewBox="0 0 24 24" fill="#20242b">150 <path d="M12 8.8a3.2 3.2 0 1 1 0 6.4 3.2 3.2 0 0 1 0-6.4zm8 3.2 2 .8-2 3.4-2.1-.8c-.5.4-1 .7-1.6 1l-.3 2.2H8l-.3-2.2c-.6-.3-1.1-.6-1.6-1l-2.1.8-2-3.4 2-.8c-.1-.5-.1-1 0-1.6l-2-.8 2-3.4 2.1.8c.5-.4 1-.7 1.6-1L8 3h8l.3 2.2c.6.3 1.1.6 1.6 1l2.1-.8 2 3.4-2 .8c.1.6.1 1.1 0 1.6z"/>151 </svg>152 </div>153 </div>154 </div>155 156 <!-- Profile / Info area -->157 <div class="info-area">158 <div class="profile-card">159 <div class="avatar">[IMG: Profile]</div>160 <div class="card-title">Simone's Info</div>161 <div class="blue-note">162 <div class="dot"></div>163 <div>Simone didn't list any hobbies 😳</div>164 </div>165 166 <div class="helper-text">Send a message or say "hi" with a wave</div>167 <div class="sticker">[IMG: Wave Sticker]</div>168 <div class="wave-btn">WAVE</div>169 </div>170 </div>171 172 <!-- Composer -->173 <div class="composer">174 <div class="input-row">175 <div class="action" title="Add">176 <svg width="44" height="44" viewBox="0 0 24 24" fill="#575757">177 <path d="M11 4h2v6h6v2h-6v6h-2v-6H5v-2h6z"/>178 </svg>179 </div>180 <div class="action" title="Hashtag">181 <svg width="44" height="44" viewBox="0 0 24 24" fill="#575757">182 <path d="M9 3 7.7 9H3.5v2h3.8l-1 5H2v2h3.8L5.5 21h2l.8-3h4L12 21h2l.8-3H21v-2h-5.7l1-5H22V9h-4.4L18 3h-2l-.8 3h-4L12 3H9zm1.4 6h4l-1 5h-4l1-5z"/>183 </svg>184 </div>185 <div class="action" title="Emoji">186 <svg width="44" height="44" viewBox="0 0 24 24" fill="#575757">187 <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-3 7a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm6 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm-6.5 6h9a4.5 4.5 0 0 1-9 0z"/>188 </svg>189 </div>190 <div class="action" title="Translate">191 <svg width="44" height="44" viewBox="0 0 24 24" fill="#575757">192 <path d="M3 4h10v6H3V4zm0 10h6v6H3v-6zm12-10h6v6h-6V4zm0 10h6v6h-6v-6zM6.5 8l1.5-3 1.5 3H6.5z"/>193 </svg>194 </div>195 <div class="action" title="Effects">196 <svg width="44" height="44" viewBox="0 0 24 24" fill="#575757">197 <path d="M12 2l1.2 3.8L17 7l-3.8 1.2L12 12l-1.2-3.8L7 7l3.8-1.2L12 2zm7 9 1 3 3 1-3 1-1 3-1-3-3-1 3-1 1-3zM2 15l.8 2.4L5 18l-2.2.6L2 21l-.8-2.4L-1 18l2.2-.6L2 15z"/>198 </svg>199 </div>200 <div class="text-bubble">hello</div>201 <div class="send" title="Send">202 <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">203 <path d="M2 21 23 12 2 3v7l13 2-13 2v7z"/>204 </svg>205 </div>206 </div>207 </div>208 209 <!-- Keyboard -->210 <div class="keyboard">211 <div class="hint-bar">212 <div>hello</div>213 <div>Hello</div>214 <div>👋</div>215 <div>🤔</div>216 </div>217 218 <div class="keys">219 <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>220 </div>221 <div class="row">222 <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>223 </div>224 <div class="row row3">225 <div class="key small">z</div><div class="key small">x</div><div class="key small">c</div><div class="key small">v</div><div class="key small">b</div><div class="key small">n</div><div class="key small">m</div><div class="key small">⌫</div>226 </div>227 <div class="bottom-row">228 <div class="key mic">?123</div>229 <div class="key mic">,</div>230 <div class="key space">🙂</div>231 <div class="key space">space</div>232 <div class="key mic">.</div>233 <div class="key mic">↵</div>234 </div>235 </div>236 237</div>238</body>239</html>