GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Messages UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 position: relative;10 overflow: hidden;11 width: 1080px;12 height: 2400px;13 background: #FFFFFF;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 100px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 padding: 0 40px;27 box-sizing: border-box;28 color: #000;29 font-size: 36px;30 }31 .status-right {32 display: flex;33 align-items: center;34 gap: 24px;35 }36 .dots {37 display: flex;38 gap: 12px;39 }40 .dot {41 width: 18px;42 height: 18px;43 background: #444;44 border-radius: 50%;45 opacity: 0.8;46 }47 .wifi svg, .battery svg {48 width: 40px; height: 40px;49 }50 51 /* App bar */52 .app-bar {53 position: absolute;54 top: 100px;55 left: 0;56 width: 1080px;57 height: 140px;58 display: flex;59 align-items: center;60 padding: 0 24px;61 box-sizing: border-box;62 border-bottom: 1px solid #EEE;63 background: #FFF;64 }65 .app-left {66 display: flex;67 align-items: center;68 gap: 24px;69 }70 .back-icon {71 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;72 }73 .avatar {74 width: 96px; height: 96px; background: #4CAF50; color: #FFF; border-radius: 50%;75 display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 48px;76 }77 .title-area {78 display: flex;79 flex-direction: column;80 gap: 8px;81 }82 .contact-name { font-size: 44px; color: #000; }83 .subtitle { font-size: 28px; color: #777; }84 .app-actions {85 margin-left: auto;86 display: flex;87 align-items: center;88 gap: 28px;89 }90 .icon-btn {91 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;92 }93 .icon-btn svg { width: 48px; height: 48px; }94 95 /* Timeline stamp */96 .timeline-stamp {97 position: absolute;98 top: 260px;99 left: 0;100 width: 1080px;101 text-align: center;102 color: #777;103 font-size: 28px;104 }105 106 /* Conversation area */107 .conversation {108 position: absolute;109 top: 320px;110 left: 0;111 width: 1080px;112 height: 1700px;113 overflow: hidden;114 padding: 0 36px;115 box-sizing: border-box;116 }117 118 .msg-card {119 width: 1000px;120 margin: 24px 0;121 }122 123 /* Link bubble header */124 .link-bubble {125 background: #E9E3FF;126 color: #1A1A1A;127 padding: 16px 24px;128 border-radius: 28px 28px 0 0;129 font-size: 32px;130 border: 1px solid #D5CFFF;131 border-bottom: none;132 }133 .link-bubble a {134 color: #1A1A1A;135 text-decoration: underline;136 }137 138 /* Preview card */139 .preview-card {140 border: 1px solid #E0E0E0;141 background: #FFF;142 border-radius: 0 0 32px 32px;143 box-shadow: 0 2px 0 rgba(0,0,0,0.04) inset;144 overflow: hidden;145 }146 .thumb {147 width: 100%;148 height: 560px;149 background: #E0E0E0;150 border-bottom: 1px solid #BDBDBD;151 display: flex;152 align-items: center;153 justify-content: center;154 color: #757575;155 font-size: 36px;156 }157 .preview-content {158 padding: 24px;159 }160 .preview-title {161 font-size: 38px;162 color: #222;163 margin-bottom: 16px;164 }165 .preview-desc {166 font-size: 28px;167 color: #555;168 line-height: 1.4;169 margin-bottom: 10px;170 }171 .preview-domain {172 font-size: 28px;173 color: #777;174 }175 176 .error-row {177 margin-top: 16px;178 color: #D32F2F;179 font-size: 28px;180 }181 .error-row a {182 color: #1E88E5;183 text-decoration: none;184 margin-left: 4px;185 }186 187 /* Center timestamp */188 .center-stamp {189 width: 100%;190 text-align: center;191 color: #777;192 font-size: 28px;193 margin: 36px 0;194 }195 196 /* Composer */197 .composer {198 position: absolute;199 bottom: 110px;200 left: 16px;201 width: 1048px;202 display: flex;203 align-items: center;204 gap: 16px;205 }206 .collapse-chevron {207 width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: #666;208 }209 .input-bubble {210 flex: 1;211 background: #F2F3F5;212 border: 1px solid #E0E0E0;213 border-radius: 32px;214 height: 120px;215 display: flex;216 align-items: center;217 padding: 0 24px;218 box-sizing: border-box;219 gap: 16px;220 }221 .input-text {222 flex: 1;223 font-size: 34px;224 color: #333;225 }226 .composer-actions {227 display: flex;228 align-items: center;229 gap: 20px;230 }231 .emoji-btn, .send-btn {232 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;233 }234 .emoji-btn svg, .send-btn svg { width: 50px; height: 50px; }235 236 /* Bottom navigation pill */237 .nav-pill {238 position: absolute;239 bottom: 36px;240 left: 50%;241 transform: translateX(-50%);242 width: 240px;243 height: 14px;244 background: #D0D0D0;245 border-radius: 8px;246 }247</style>248</head>249<body>250<div id="render-target">251 <!-- Status bar -->252 <div class="status-bar">253 <div class="status-left">9:57</div>254 <div class="status-right">255 <div class="dots">256 <div class="dot"></div>257 <div class="dot"></div>258 <div class="dot"></div>259 <div class="dot"></div>260 </div>261 <div class="wifi">262 <svg viewBox="0 0 24 24">263 <path d="M12 20a2 2 0 100-4 2 2 0 000 4z" fill="#444"/>264 <path d="M4.9 12.5a10 10 0 0114.2 0" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>265 <path d="M7.8 15.4a6.5 6.5 0 018.4 0" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>266 </svg>267 </div>268 <div class="battery">269 <svg viewBox="0 0 28 16">270 <rect x="1" y="2" width="22" height="12" rx="2" ry="2" stroke="#444" fill="none" stroke-width="2"/>271 <rect x="3" y="4" width="16" height="8" fill="#444"/>272 <rect x="24" y="5" width="3" height="6" rx="1" fill="#444"/>273 </svg>274 </div>275 </div>276 </div>277 278 <!-- App bar -->279 <div class="app-bar">280 <div class="app-left">281 <div class="back-icon">282 <svg viewBox="0 0 24 24">283 <path d="M15 6l-6 6 6 6" stroke="#000" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>284 </svg>285 </div>286 <div class="avatar">T</div>287 <div class="title-area">288 <div class="contact-name">Tom</div>289 <div class="subtitle">Chat with Tom (SMS/MMS)</div>290 </div>291 </div>292 <div class="app-actions">293 <div class="icon-btn" title="Compose">294 <svg viewBox="0 0 24 24">295 <path d="M4 4h14a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2z" stroke="#333" stroke-width="2" fill="none"/>296 <path d="M7 12h10" stroke="#333" stroke-width="2" stroke-linecap="round"/>297 </svg>298 </div>299 <div class="icon-btn" title="Call">300 <svg viewBox="0 0 24 24">301 <path d="M6 3l4 2-2 3c1 2 3 4 5 5l3-2 2 4-3 2c-6-2-10-6-12-12L6 3z" fill="#333"/>302 </svg>303 </div>304 <div class="icon-btn" title="More">305 <svg viewBox="0 0 24 24">306 <circle cx="5" cy="12" r="2" fill="#333"/>307 <circle cx="12" cy="12" r="2" fill="#333"/>308 <circle cx="19" cy="12" r="2" fill="#333"/>309 </svg>310 </div>311 </div>312 </div>313 314 <div class="timeline-stamp">Friday, Jun 23 • 4:12 PM</div>315 316 <!-- Conversation -->317 <div class="conversation">318 <!-- First message: YouTube -->319 <div class="msg-card">320 <div class="link-bubble">321 <a href="#">https://youtu.be/ySEx_Bqxvvo</a>322 </div>323 <div class="preview-card">324 <div class="thumb">[IMG: YouTube video thumbnail]</div>325 <div class="preview-content">326 <div class="preview-title">MIT 6.S191: Recurrent Neural Networks,</div>327 <div class="preview-desc">MIT Introduction to Deep Learning 6.S191: Lecture 2 — Recurrent Neural Networks • Lecturer: Ava Amini 2023</div>328 <div class="preview-domain">www.youtube.com</div>329 </div>330 </div>331 <div class="error-row">Trouble sending. <a href="#">Check options</a></div>332 </div>333 334 <div class="center-stamp">Yesterday • 4:03 PM</div>335 336 <!-- Second message: Vimeo -->337 <div class="msg-card">338 <div class="link-bubble">339 <a href="#">https://vimeo.com/69518408</a>340 </div>341 <div class="preview-card">342 <div class="thumb">[IMG: Food video thumbnail]</div>343 <div class="preview-content">344 <div class="preview-title">Soba Summer Gluten-Free Recipe</div>345 <div class="preview-desc">korKitchen does a weekly gluten-free recipe for you to enjoy. It's nutrish & delish! You can see more recipes.</div>346 <div class="preview-domain">vimeo.com</div>347 </div>348 </div>349 <div class="error-row">Trouble sending. <a href="#">Check options</a></div>350 </div>351 </div>352 353 <!-- Composer -->354 <div class="composer">355 <div class="collapse-chevron">356 <svg viewBox="0 0 24 24">357 <path d="M16 8l-4 4-4-4" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>358 </svg>359 </div>360 <div class="input-bubble">361 <div class="input-text">https://vimeo.com/69518408</div>362 <div class="composer-actions">363 <div class="emoji-btn" title="Emoji">364 <svg viewBox="0 0 24 24">365 <circle cx="12" cy="12" r="10" stroke="#666" stroke-width="2" fill="none"/>366 <circle cx="9" cy="10" r="1.5" fill="#666"/>367 <circle cx="15" cy="10" r="1.5" fill="#666"/>368 <path d="M8 15c1.5 1 3.5 1 5 0" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"/>369 </svg>370 </div>371 <div class="send-btn" title="Send (SMS)">372 <svg viewBox="0 0 24 24">373 <path d="M3 11l18-8-8 18-2-8-8-2z" fill="#4A6CF7"/>374 </svg>375 </div>376 </div>377 </div>378 </div>379 380 <!-- Bottom navigation pill -->381 <div class="nav-pill"></div>382</div>383</body>384</html>