GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Simone Chat UI</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:#FAFAFA; border-radius:0;10 }11 /* Status bar */12 .status-bar{13 position:absolute; top:0; left:0; width:100%; height:90px;14 padding:20px 30px; color:#111; font-weight:600; font-size:36px;15 display:flex; align-items:center; justify-content:space-between;16 }17 .status-left{ display:flex; align-items:center; gap:18px; }18 .status-right{ display:flex; align-items:center; gap:24px; color:#555; }19 .icon{ width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; }20 .icon svg{ width:100%; height:100%; }21 /* App header */22 .app-header{23 position:absolute; top:90px; left:0; width:100%; height:140px;24 padding:22px 30px; display:flex; align-items:center; justify-content:space-between;25 background:#FFFFFF;26 border-bottom:1px solid #e6e6e6;27 }28 .header-left{ display:flex; align-items:center; gap:24px; }29 .back-btn .circle{ width:60px; height:60px; border-radius:30px; background:#f0f0f0; display:flex; align-items:center; justify-content:center; }30 .title-block{ line-height:1.2; }31 .title{ font-size:48px; font-weight:700; color:#222; }32 .subtitle{ font-size:28px; color:#888; display:flex; align-items:center; gap:10px; }33 .header-right{ display:flex; align-items:center; gap:30px; }34 .phone-btn, .gear-btn{35 width:66px; height:66px; border-radius:33px; background:#f6f6f6; display:flex; align-items:center; justify-content:center; border:1px solid #e3e3e3;36 }37 /* Content area */38 .content{ position:absolute; top:230px; left:0; width:100%; padding:30px; }39 .card{40 width:1020px; margin:0 auto; background:#fff; border-radius:26px; box-shadow:0 1px 0 #eaeaea; padding:40px 30px; position:relative; min-height:370px;41 }42 .avatar{43 position:absolute; top:-38px; left:50%; transform:translateX(-50%);44 width:120px; height:120px; border-radius:60px; background:#E0E0E0; border:2px solid #BDBDBD;45 display:flex; align-items:center; justify-content:center; color:#757575; font-size:24px;46 }47 .card h2{ text-align:center; font-size:42px; margin:60px 0 30px; color:#333; }48 .info-pill{49 width:960px; margin:0 auto; background:#cdd7ff; border-radius:22px; padding:22px 26px; display:flex; align-items:center; gap:18px; color:#2c2f66; font-size:32px;50 }51 .dot{ width:14px; height:14px; background:#6c7ae0; border-radius:50%; }52 .wave-area{53 width:100%; text-align:center; color:#555; font-size:40px; margin-top:60px;54 display:flex; align-items:center; justify-content:center; gap:20px;55 }56 .close-x{57 width:42px; height:42px; border-radius:21px; border:1px solid #dcdcdc; color:#999; display:inline-flex; align-items:center; justify-content:center; font-weight:700;58 }59 .sticker{60 width:320px; height:260px; margin:40px auto; background:#E0E0E0; border:1px solid #BDBDBD;61 display:flex; align-items:center; justify-content:center; color:#757575; font-size:28px; border-radius:16px;62 }63 .wave-btn{64 width:220px; height:76px; margin:0 auto; background:#5c78ff; color:#fff; border-radius:38px;65 display:flex; align-items:center; justify-content:center; font-weight:700; letter-spacing:1px; box-shadow:0 4px 10px rgba(92,120,255,0.35);66 }67 /* Input bar */68 .input-bar{69 position:absolute; left:0; bottom:930px; width:100%; height:140px; background:#fff; border-top:1px solid #e6e6e6;70 display:flex; align-items:center; gap:24px; padding:0 30px;71 }72 .text-input{73 flex:1; height:96px; border-radius:20px; border:1px solid #e4e4e4; padding:0 24px; display:flex; align-items:center; color:#aaa; font-size:32px;74 }75 .input-icons{ display:flex; align-items:center; gap:30px; margin-left:20px; }76 .mic{ width:70px; height:70px; border-radius:35px; background:#f7f7f7; border:1px solid #e5e5e5; display:flex; align-items:center; justify-content:center; }77 /* Keyboard */78 .keyboard{79 position:absolute; left:0; bottom:0; width:100%; height:930px; background:#111317; color:#fff; border-top-left-radius:18px; border-top-right-radius:18px;80 padding:30px 26px;81 }82 .kb-top{ display:flex; justify-content:space-between; align-items:center; color:#9aa0a6; margin-bottom:24px; }83 .kb-rows{ display:flex; flex-direction:column; gap:20px; }84 .row{ display:flex; justify-content:center; gap:14px; }85 .key{86 background:#1d1f23; color:#e8eaed; width:86px; height:98px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:40px;87 box-shadow: inset 0 -3px 0 rgba(255,255,255,0.02);88 }89 .key.small{ width:74px; }90 .key.wide{ width:160px; }91 .space{ width:500px; }92 .return{ background:#cfe1ff; color:#1d3b8c; }93 .bottom-row{ display:flex; justify-content:center; align-items:center; gap:18px; margin-top:18px; }94 .kb-badge{95 width:74px; height:74px; border-radius:16px; background:#1d1f23; color:#9aa0a6; display:flex; align-items:center; justify-content:center; font-size:30px;96 }97</style>98</head>99<body>100<div id="render-target">101 102 <!-- Status bar -->103 <div class="status-bar">104 <div class="status-left">105 <div>12:33</div>106 <div class="icon">107 <!-- simple mail icon -->108 <svg viewBox="0 0 24 24">109 <path d="M2 5h20v14H2z" fill="none" stroke="#555" stroke-width="2"/>110 <path d="M2 5l10 8 10-8" fill="none" stroke="#555" stroke-width="2"/>111 </svg>112 </div>113 </div>114 <div class="status-right">115 <div class="icon">116 <!-- wifi -->117 <svg viewBox="0 0 24 24">118 <path d="M3 8c4-3 14-3 18 0" stroke="#555" stroke-width="2" fill="none"/>119 <path d="M6 12c3-2 9-2 12 0" stroke="#555" stroke-width="2" fill="none"/>120 <circle cx="12" cy="17" r="2" fill="#555"/>121 </svg>122 </div>123 <div class="icon">124 <!-- battery -->125 <svg viewBox="0 0 28 16">126 <rect x="1" y="3" width="22" height="10" rx="2" ry="2" fill="none" stroke="#555" stroke-width="2"/>127 <rect x="4" y="5" width="16" height="6" rx="1" ry="1" fill="#555"/>128 <rect x="24" y="6" width="3" height="4" fill="#555"/>129 </svg>130 </div>131 </div>132 </div>133 134 <!-- App header -->135 <div class="app-header">136 <div class="header-left">137 <div class="back-btn">138 <div class="circle">139 <svg viewBox="0 0 24 24">140 <path d="M15 5L6 12l9 7" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>141 </svg>142 </div>143 </div>144 <div class="title-block">145 <div class="title">Simone</div>146 <div class="subtitle">147 <svg width="24" height="24" viewBox="0 0 24 24">148 <path d="M12 2C8 2 5 5 5 9c0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7z" fill="none" stroke="#888" stroke-width="2"/>149 <circle cx="12" cy="9" r="2" fill="#888"/>150 </svg>151 <span>8:03 AM</span>152 </div>153 </div>154 </div>155 <div class="header-right">156 <div class="phone-btn">157 <svg viewBox="0 0 24 24">158 <path d="M6 4l4-1 3 3-2 2c2 3 4 5 7 7l2-2 3 3-1 4c-8 1-16-7-16-16z" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round"/>159 </svg>160 </div>161 <div class="gear-btn">162 <svg viewBox="0 0 24 24">163 <circle cx="12" cy="12" r="3" fill="none" stroke="#333" stroke-width="2"/>164 <path d="M4 12h3M17 12h3M12 4v3M12 17v3M6.5 6.5l2 2M15.5 15.5l2 2M6.5 17.5l2-2M15.5 8.5l2-2" stroke="#333" stroke-width="2" fill="none"/>165 </svg>166 </div>167 </div>168 </div>169 170 <!-- Content -->171 <div class="content">172 <div class="card">173 <div class="avatar">[IMG: User Avatar]</div>174 <h2>Simone's Info</h2>175 <div class="info-pill">176 <div class="dot"></div>177 <div>Simone didn't list any hobbies 😳</div>178 </div>179 </div>180 181 <div class="wave-area">182 <span>Send a message or say "hi" with a wave</span>183 <span class="close-x">×</span>184 </div>185 186 <div class="sticker">[IMG: Wave Sticker]</div>187 188 <div class="wave-btn">WAVE</div>189 </div>190 191 <!-- Input bar -->192 <div class="input-bar">193 <div class="text-input">Type a message...</div>194 <div class="input-icons">195 <!-- plus -->196 <div class="kb-badge">197 <svg viewBox="0 0 24 24">198 <path d="M12 4v16M4 12h16" stroke="#c8cbd1" stroke-width="2" fill="none"/>199 </svg>200 </div>201 <!-- # -->202 <div class="kb-badge">203 <svg viewBox="0 0 24 24">204 <path d="M5 8h14M4 16h14M9 4l-2 16M17 4l-2 16" stroke="#c8cbd1" stroke-width="2" fill="none"/>205 </svg>206 </div>207 <!-- smile -->208 <div class="kb-badge">209 <svg viewBox="0 0 24 24">210 <circle cx="12" cy="12" r="9" fill="none" stroke="#c8cbd1" stroke-width="2"/>211 <path d="M8 14c2 2 6 2 8 0" stroke="#c8cbd1" stroke-width="2" fill="none"/>212 <circle cx="9" cy="10" r="1" fill="#c8cbd1"/><circle cx="15" cy="10" r="1" fill="#c8cbd1"/>213 </svg>214 </div>215 <!-- translate -->216 <div class="kb-badge">A</div>217 <!-- sparkle -->218 <div class="kb-badge">219 <svg viewBox="0 0 24 24">220 <path d="M12 3l2 5 5 2-5 2-2 5-2-5-5-2 5-2z" fill="none" stroke="#c8cbd1" stroke-width="2"/>221 </svg>222 </div>223 </div>224 <div class="mic">225 <svg viewBox="0 0 24 24">226 <rect x="8" y="4" width="8" height="12" rx="4" ry="4" fill="none" stroke="#555" stroke-width="2"/>227 <path d="M12 16v4M7 12c0 3 2 5 5 5s5-2 5-5" stroke="#555" stroke-width="2" fill="none"/>228 </svg>229 </div>230 </div>231 232 <!-- Keyboard -->233 <div class="keyboard">234 <div class="kb-top">235 <div>GIF • Gboard</div>236 <div style="display:flex; gap:18px;">237 <div class="kb-badge">⚙</div>238 <div class="kb-badge">G</div>239 <div class="kb-badge">🎨</div>240 <div class="kb-badge">🎙</div>241 </div>242 </div>243 244 <div class="kb-rows">245 <!-- Row 1 -->246 <div class="row">247 <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>248 <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>249 </div>250 <!-- Row 2 -->251 <div class="row">252 <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>253 <div class="key">H</div><div class="key">J</div><div class="key">K</div><div class="key">L</div>254 </div>255 <!-- Row 3 -->256 <div class="row">257 <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>258 <div class="key">N</div><div class="key">M</div>259 <div class="key wide">⌫</div>260 </div>261 <!-- Bottom row with space and return -->262 <div class="bottom-row">263 <div class="key small">?123</div>264 <div class="key small">,</div>265 <div class="key small">🙂</div>266 <div class="key space">Space</div>267 <div class="key small">.</div>268 <div class="key return">↩</div>269 </div>270 </div>271 </div>272 273</div>274</body>275</html>