android frontend first implementation
This commit is contained in:
@@ -0,0 +1,765 @@
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: 'Courier New', monospace; }
|
||||
|
||||
.phones {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
justify-content: center;
|
||||
padding: 24px 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.phone {
|
||||
width: 280px;
|
||||
background: #0a0a0a;
|
||||
border-radius: 36px;
|
||||
border: 1px solid #222;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.phone-inner {
|
||||
padding: 0;
|
||||
height: 560px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 20px 4px;
|
||||
font-size: 10px;
|
||||
color: #555;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.screen-label {
|
||||
font-size: 9px;
|
||||
letter-spacing: 0.15em;
|
||||
color: #333;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
padding: 0 0 8px;
|
||||
}
|
||||
|
||||
/* ── SCREEN 1: contacts list ── */
|
||||
.contacts-header {
|
||||
padding: 8px 20px 12px;
|
||||
border-bottom: 0.5px solid #1a1a1a;
|
||||
}
|
||||
.contacts-title {
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
color: #e8e8e8;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
.contacts-sub {
|
||||
font-size: 11px;
|
||||
color: #444;
|
||||
margin-top: 2px;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.search-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 20px;
|
||||
border-bottom: 0.5px solid #161616;
|
||||
}
|
||||
.search-box {
|
||||
flex: 1;
|
||||
background: #111;
|
||||
border: 0.5px solid #222;
|
||||
border-radius: 6px;
|
||||
padding: 7px 10px;
|
||||
font-size: 12px;
|
||||
color: #444;
|
||||
font-family: 'Courier New', monospace;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 11px 20px;
|
||||
border-bottom: 0.5px solid #111;
|
||||
cursor: pointer;
|
||||
gap: 12px;
|
||||
}
|
||||
.contact-item:hover { background: #0f0f0f; }
|
||||
|
||||
.avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
border: 0.5px solid #2a2a2a;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
color: #666;
|
||||
flex-shrink: 0;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.contact-info { flex: 1; min-width: 0; }
|
||||
.contact-name {
|
||||
font-size: 13px;
|
||||
color: #d0d0d0;
|
||||
letter-spacing: 0.02em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.contact-preview {
|
||||
font-size: 11px;
|
||||
color: #3a3a3a;
|
||||
margin-top: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.contact-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 4px;
|
||||
}
|
||||
.contact-time { font-size: 10px; color: #333; letter-spacing: 0.03em; }
|
||||
.unread-dot {
|
||||
width: 6px; height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #e8e8e8;
|
||||
}
|
||||
|
||||
.walkie-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 20px;
|
||||
background: #0d0d0d;
|
||||
border-bottom: 0.5px solid #1a1a1a;
|
||||
gap: 10px;
|
||||
}
|
||||
.walkie-indicator {
|
||||
width: 6px; height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #3a3a3a;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.walkie-indicator.active { background: #e8e8e8; }
|
||||
.walkie-label { font-size: 10px; color: #444; letter-spacing: 0.08em; flex: 1; }
|
||||
.walkie-btn {
|
||||
font-size: 10px;
|
||||
color: #555;
|
||||
border: 0.5px solid #2a2a2a;
|
||||
border-radius: 4px;
|
||||
padding: 3px 8px;
|
||||
letter-spacing: 0.05em;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.bottom-nav {
|
||||
margin-top: auto;
|
||||
display: flex;
|
||||
border-top: 0.5px solid #161616;
|
||||
padding: 10px 0 14px;
|
||||
}
|
||||
.nav-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.nav-icon {
|
||||
width: 20px; height: 20px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.nav-label { font-size: 9px; color: #333; letter-spacing: 0.06em; }
|
||||
.nav-item.active .nav-label { color: #e8e8e8; }
|
||||
|
||||
/* ── SCREEN 2: chat ── */
|
||||
.chat-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 16px 10px;
|
||||
border-bottom: 0.5px solid #1a1a1a;
|
||||
gap: 10px;
|
||||
}
|
||||
.back-btn {
|
||||
font-size: 16px;
|
||||
color: #555;
|
||||
cursor: pointer;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
.chat-header-info { flex: 1; }
|
||||
.chat-name { font-size: 14px; color: #d8d8d8; letter-spacing: 0.02em; }
|
||||
.chat-status { font-size: 10px; color: #3a3a3a; letter-spacing: 0.04em; margin-top: 1px; }
|
||||
.chat-actions { display: flex; gap: 14px; }
|
||||
.action-icon { font-size: 14px; color: #3a3a3a; cursor: pointer; }
|
||||
|
||||
.chat-body {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding: 12px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.msg-row { display: flex; flex-direction: column; gap: 2px; }
|
||||
.msg-row.me { align-items: flex-end; }
|
||||
.msg-row.them { align-items: flex-start; }
|
||||
|
||||
.msg-bubble {
|
||||
max-width: 75%;
|
||||
padding: 8px 11px;
|
||||
border-radius: 14px;
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.msg-row.them .msg-bubble {
|
||||
background: #141414;
|
||||
color: #c0c0c0;
|
||||
border-bottom-left-radius: 4px;
|
||||
border: 0.5px solid #1e1e1e;
|
||||
}
|
||||
.msg-row.me .msg-bubble {
|
||||
background: #1e1e1e;
|
||||
color: #d0d0d0;
|
||||
border-bottom-right-radius: 4px;
|
||||
border: 0.5px solid #2a2a2a;
|
||||
}
|
||||
.msg-time { font-size: 9px; color: #2e2e2e; letter-spacing: 0.04em; padding: 0 4px; }
|
||||
|
||||
.reaction-row {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
.reaction-pill {
|
||||
background: #111;
|
||||
border: 0.5px solid #222;
|
||||
border-radius: 10px;
|
||||
padding: 2px 7px;
|
||||
font-size: 10px;
|
||||
color: #555;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.poll-card {
|
||||
background: #111;
|
||||
border: 0.5px solid #1e1e1e;
|
||||
border-radius: 10px;
|
||||
padding: 10px 12px;
|
||||
max-width: 80%;
|
||||
}
|
||||
.poll-q { font-size: 11px; color: #888; letter-spacing: 0.04em; margin-bottom: 8px; }
|
||||
.poll-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.poll-bar-bg {
|
||||
flex: 1;
|
||||
height: 3px;
|
||||
background: #1a1a1a;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.poll-bar-fill {
|
||||
height: 100%;
|
||||
background: #e8e8e8;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.poll-opt-label { font-size: 10px; color: #555; width: 52px; letter-spacing: 0.03em; flex-shrink: 0; }
|
||||
.poll-pct { font-size: 10px; color: #333; width: 24px; text-align: right; flex-shrink: 0; }
|
||||
|
||||
.voice-msg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: #141414;
|
||||
border: 0.5px solid #1e1e1e;
|
||||
border-radius: 20px;
|
||||
padding: 8px 12px;
|
||||
max-width: 72%;
|
||||
}
|
||||
.play-btn {
|
||||
width: 22px; height: 22px;
|
||||
border-radius: 50%;
|
||||
border: 0.5px solid #333;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.play-tri {
|
||||
width: 0; height: 0;
|
||||
border-style: solid;
|
||||
border-width: 4px 0 4px 7px;
|
||||
border-color: transparent transparent transparent #888;
|
||||
margin-left: 1px;
|
||||
}
|
||||
.waveform {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
flex: 1;
|
||||
}
|
||||
.wave-bar {
|
||||
width: 2px;
|
||||
border-radius: 1px;
|
||||
background: #2a2a2a;
|
||||
}
|
||||
.voice-dur { font-size: 10px; color: #333; letter-spacing: 0.04em; }
|
||||
|
||||
.chat-input-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 14px 12px;
|
||||
border-top: 0.5px solid #161616;
|
||||
}
|
||||
.chat-input {
|
||||
flex: 1;
|
||||
background: #111;
|
||||
border: 0.5px solid #1e1e1e;
|
||||
border-radius: 20px;
|
||||
padding: 8px 14px;
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
font-family: 'Courier New', monospace;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
.input-action {
|
||||
width: 30px; height: 30px;
|
||||
border-radius: 50%;
|
||||
border: 0.5px solid #1e1e1e;
|
||||
background: transparent;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ── SCREEN 3: space ── */
|
||||
.space-header {
|
||||
padding: 8px 20px 10px;
|
||||
border-bottom: 0.5px solid #1a1a1a;
|
||||
}
|
||||
.space-eyebrow { font-size: 9px; color: #333; letter-spacing: 0.1em; margin-bottom: 4px; }
|
||||
.space-title { font-size: 18px; color: #d8d8d8; letter-spacing: -0.01em; }
|
||||
.space-members { font-size: 10px; color: #333; letter-spacing: 0.04em; margin-top: 2px; }
|
||||
|
||||
.space-tabs {
|
||||
display: flex;
|
||||
border-bottom: 0.5px solid #161616;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.space-tab {
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.06em;
|
||||
color: #333;
|
||||
padding: 8px 0;
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
.space-tab.active {
|
||||
color: #e8e8e8;
|
||||
border-bottom-color: #e8e8e8;
|
||||
}
|
||||
|
||||
.space-body { flex: 1; overflow: hidden; padding: 12px 20px; display: flex; flex-direction: column; gap: 8px; }
|
||||
|
||||
.file-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 9px 10px;
|
||||
background: #0d0d0d;
|
||||
border: 0.5px solid #181818;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.file-icon {
|
||||
width: 28px; height: 28px;
|
||||
background: #141414;
|
||||
border: 0.5px solid #222;
|
||||
border-radius: 5px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 10px;
|
||||
color: #555;
|
||||
letter-spacing: 0.03em;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.file-info { flex: 1; min-width: 0; }
|
||||
.file-name { font-size: 12px; color: #b0b0b0; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.file-meta { font-size: 10px; color: #333; letter-spacing: 0.03em; margin-top: 2px; }
|
||||
.file-size { font-size: 10px; color: #2e2e2e; flex-shrink: 0; }
|
||||
|
||||
.doc-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 9px 10px;
|
||||
background: #0d0d0d;
|
||||
border: 0.5px solid #181818;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.doc-preview {
|
||||
width: 28px; height: 34px;
|
||||
background: #111;
|
||||
border: 0.5px solid #222;
|
||||
border-radius: 3px;
|
||||
flex-shrink: 0;
|
||||
display: flex; flex-direction: column;
|
||||
padding: 4px 3px;
|
||||
gap: 2px;
|
||||
}
|
||||
.doc-line { height: 2px; background: #2a2a2a; border-radius: 1px; }
|
||||
.doc-line.short { width: 60%; }
|
||||
|
||||
.space-add-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
.add-btn {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border: 0.5px solid #1e1e1e;
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
font-size: 10px;
|
||||
color: #333;
|
||||
letter-spacing: 0.06em;
|
||||
cursor: pointer;
|
||||
font-family: 'Courier New', monospace;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nfc-prompt {
|
||||
margin-top: auto;
|
||||
border: 0.5px solid #1a1a1a;
|
||||
border-radius: 10px;
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
.nfc-ring {
|
||||
width: 40px; height: 40px;
|
||||
border-radius: 50%;
|
||||
border: 0.5px solid #222;
|
||||
margin: 0 auto 6px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.nfc-inner {
|
||||
width: 24px; height: 24px;
|
||||
border-radius: 50%;
|
||||
border: 0.5px solid #2e2e2e;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.nfc-core { width: 8px; height: 8px; border-radius: 50%; background: #1e1e1e; border: 0.5px solid #333; }
|
||||
.nfc-label { font-size: 10px; color: #333; letter-spacing: 0.06em; }
|
||||
.nfc-sub { font-size: 9px; color: #222; letter-spacing: 0.04em; margin-top: 2px; }
|
||||
</style>
|
||||
|
||||
<div class="phones">
|
||||
|
||||
<!-- SCREEN 1: contacts -->
|
||||
<div class="phone">
|
||||
<div class="phone-inner">
|
||||
<div class="status-bar"><span>09:41</span><span>▪▪▪</span></div>
|
||||
<div class="screen-label">contacts</div>
|
||||
<div class="contacts-header">
|
||||
<div class="contacts-title">messages</div>
|
||||
<div class="contacts-sub">5 contacts · end-to-end encrypted</div>
|
||||
</div>
|
||||
|
||||
<div class="walkie-row">
|
||||
<div class="walkie-indicator active"></div>
|
||||
<div class="walkie-label">flat · walkie talkie</div>
|
||||
<div class="walkie-btn">hold to talk</div>
|
||||
</div>
|
||||
|
||||
<div style="flex:1;overflow:hidden;">
|
||||
<div class="contact-item">
|
||||
<div class="avatar">JM</div>
|
||||
<div class="contact-info">
|
||||
<div class="contact-name">jamie</div>
|
||||
<div class="contact-preview">voice message · 0:12</div>
|
||||
</div>
|
||||
<div class="contact-meta">
|
||||
<div class="contact-time">now</div>
|
||||
<div class="unread-dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<div class="avatar">RP</div>
|
||||
<div class="contact-info">
|
||||
<div class="contact-name">climbing crew</div>
|
||||
<div class="contact-preview">priya: who's in sat?</div>
|
||||
</div>
|
||||
<div class="contact-meta">
|
||||
<div class="contact-time">14:22</div>
|
||||
<div class="unread-dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<div class="avatar">AL</div>
|
||||
<div class="contact-info">
|
||||
<div class="contact-name">alex</div>
|
||||
<div class="contact-preview">sent a file</div>
|
||||
</div>
|
||||
<div class="contact-meta">
|
||||
<div class="contact-time">tue</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<div class="avatar">SC</div>
|
||||
<div class="contact-info">
|
||||
<div class="contact-name">sam</div>
|
||||
<div class="contact-preview">yeah let's do it</div>
|
||||
</div>
|
||||
<div class="contact-meta">
|
||||
<div class="contact-time">mon</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nfc-prompt" style="margin:12px 16px 0;">
|
||||
<div class="nfc-ring"><div class="nfc-inner"><div class="nfc-core"></div></div></div>
|
||||
<div class="nfc-label">add contact</div>
|
||||
<div class="nfc-sub">tap phones · or share a link</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-nav">
|
||||
<div class="nav-item active">
|
||||
<div class="nav-icon">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="2" width="14" height="10" rx="2" stroke="#e8e8e8" stroke-width="0.8"/><path d="M5 15h6" stroke="#e8e8e8" stroke-width="0.8" stroke-linecap="round"/></svg>
|
||||
</div>
|
||||
<div class="nav-label">chats</div>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<div class="nav-icon">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="6" r="3" stroke="#333" stroke-width="0.8"/><path d="M2 14c0-3.3 2.7-5 6-5s6 1.7 6 5" stroke="#333" stroke-width="0.8" stroke-linecap="round"/></svg>
|
||||
</div>
|
||||
<div class="nav-label">contacts</div>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<div class="nav-icon">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="#333" stroke-width="0.8"/><circle cx="8" cy="8" r="2" stroke="#333" stroke-width="0.8"/></svg>
|
||||
</div>
|
||||
<div class="nav-label">spaces</div>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<div class="nav-icon">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="#333" stroke-width="0.8"/><path d="M8 5v3l2 2" stroke="#333" stroke-width="0.8" stroke-linecap="round"/></svg>
|
||||
</div>
|
||||
<div class="nav-label">settings</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SCREEN 2: chat -->
|
||||
<div class="phone">
|
||||
<div class="phone-inner">
|
||||
<div class="status-bar"><span>09:41</span><span>▪▪▪</span></div>
|
||||
<div class="screen-label">chat</div>
|
||||
<div class="chat-header">
|
||||
<div class="back-btn">‹</div>
|
||||
<div class="chat-header-info">
|
||||
<div class="chat-name">climbing crew</div>
|
||||
<div class="chat-status">3 members · e2e encrypted</div>
|
||||
</div>
|
||||
<div class="chat-actions">
|
||||
<svg class="action-icon" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2 4h12M2 8h12M2 12h8" stroke="#3a3a3a" stroke-width="0.8" stroke-linecap="round"/></svg>
|
||||
<svg class="action-icon" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 3v5l3 3" stroke="#3a3a3a" stroke-width="0.8" stroke-linecap="round"/><circle cx="8" cy="8" r="6" stroke="#3a3a3a" stroke-width="0.8"/></svg>
|
||||
<svg class="action-icon" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8a5 5 0 009.9-1M13 8a5 5 0 01-9.9 1" stroke="#3a3a3a" stroke-width="0.8" stroke-linecap="round"/><path d="M11 4l2 3-3 1" stroke="#3a3a3a" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chat-body">
|
||||
<div class="msg-row them">
|
||||
<div class="msg-bubble">who's in for saturday?</div>
|
||||
<div class="msg-time">priya · 14:20</div>
|
||||
</div>
|
||||
|
||||
<div class="poll-card">
|
||||
<div class="poll-q">climbing saturday</div>
|
||||
<div class="poll-option">
|
||||
<div class="poll-opt-label">morning</div>
|
||||
<div class="poll-bar-bg"><div class="poll-bar-fill" style="width:70%"></div></div>
|
||||
<div class="poll-pct">70%</div>
|
||||
</div>
|
||||
<div class="poll-option">
|
||||
<div class="poll-opt-label">afternoon</div>
|
||||
<div class="poll-bar-bg"><div class="poll-bar-fill" style="width:20%"></div></div>
|
||||
<div class="poll-pct">20%</div>
|
||||
</div>
|
||||
<div class="poll-option" style="margin-bottom:0">
|
||||
<div class="poll-opt-label">can't make it</div>
|
||||
<div class="poll-bar-bg"><div class="poll-bar-fill" style="width:10%"></div></div>
|
||||
<div class="poll-pct">10%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="msg-row me">
|
||||
<div class="msg-bubble">morning works, i'll book the wall</div>
|
||||
<div class="msg-time">14:31</div>
|
||||
</div>
|
||||
<div class="reaction-row" style="justify-content:flex-end">
|
||||
<div class="reaction-pill">+1 2</div>
|
||||
</div>
|
||||
|
||||
<div class="voice-msg">
|
||||
<div class="play-btn"><div class="play-tri"></div></div>
|
||||
<div class="waveform">
|
||||
<div class="wave-bar" style="height:4px"></div>
|
||||
<div class="wave-bar" style="height:8px"></div>
|
||||
<div class="wave-bar" style="height:14px"></div>
|
||||
<div class="wave-bar" style="height:10px"></div>
|
||||
<div class="wave-bar" style="height:6px"></div>
|
||||
<div class="wave-bar" style="height:12px"></div>
|
||||
<div class="wave-bar" style="height:8px"></div>
|
||||
<div class="wave-bar" style="height:5px"></div>
|
||||
<div class="wave-bar" style="height:10px"></div>
|
||||
<div class="wave-bar" style="height:14px"></div>
|
||||
<div class="wave-bar" style="height:9px"></div>
|
||||
<div class="wave-bar" style="height:6px"></div>
|
||||
</div>
|
||||
<div class="voice-dur">0:12</div>
|
||||
</div>
|
||||
<div class="msg-time" style="padding-left:4px">jamie · 14:38</div>
|
||||
</div>
|
||||
|
||||
<div class="chat-input-row">
|
||||
<div class="input-action">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="1" y="1" width="12" height="12" rx="2" stroke="#333" stroke-width="0.8"/><path d="M4 7h6M7 4v6" stroke="#333" stroke-width="0.8" stroke-linecap="round"/></svg>
|
||||
</div>
|
||||
<div class="chat-input">message</div>
|
||||
<div class="input-action">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="5" r="2.5" stroke="#333" stroke-width="0.8"/><path d="M7 8v4M5 11h4" stroke="#333" stroke-width="0.8" stroke-linecap="round"/></svg>
|
||||
</div>
|
||||
<div class="input-action">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7h10M7 2l5 5-5 5" stroke="#333" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SCREEN 3: space -->
|
||||
<div class="phone">
|
||||
<div class="phone-inner">
|
||||
<div class="status-bar"><span>09:41</span><span>▪▪▪</span></div>
|
||||
<div class="screen-label">shared space</div>
|
||||
<div class="space-header">
|
||||
<div class="space-eyebrow">climbing crew</div>
|
||||
<div class="space-title">space</div>
|
||||
<div class="space-members">3 members</div>
|
||||
</div>
|
||||
|
||||
<div class="space-tabs">
|
||||
<div class="space-tab active">files</div>
|
||||
<div class="space-tab">docs</div>
|
||||
<div class="space-tab">links</div>
|
||||
</div>
|
||||
|
||||
<div class="space-body">
|
||||
<div class="file-item">
|
||||
<div class="file-icon">jpg</div>
|
||||
<div class="file-info">
|
||||
<div class="file-name">wall-beta-map.jpg</div>
|
||||
<div class="file-meta">priya · 3 days ago</div>
|
||||
</div>
|
||||
<div class="file-size">2.1mb</div>
|
||||
</div>
|
||||
<div class="file-item">
|
||||
<div class="file-icon">pdf</div>
|
||||
<div class="file-info">
|
||||
<div class="file-name">membership-discount.pdf</div>
|
||||
<div class="file-meta">jamie · 1 week ago</div>
|
||||
</div>
|
||||
<div class="file-size">84kb</div>
|
||||
</div>
|
||||
<div class="file-item">
|
||||
<div class="file-icon">mp4</div>
|
||||
<div class="file-info">
|
||||
<div class="file-name">dyno-attempt.mp4</div>
|
||||
<div class="file-meta">you · 2 weeks ago</div>
|
||||
</div>
|
||||
<div class="file-size">18mb</div>
|
||||
</div>
|
||||
|
||||
<div style="height:0.5px;background:#161616;margin:4px 0;"></div>
|
||||
|
||||
<div class="doc-item">
|
||||
<div class="doc-preview">
|
||||
<div class="doc-line"></div>
|
||||
<div class="doc-line short"></div>
|
||||
<div class="doc-line"></div>
|
||||
<div class="doc-line short"></div>
|
||||
</div>
|
||||
<div class="file-info">
|
||||
<div class="file-name">gear checklist</div>
|
||||
<div class="file-meta">shared doc · edited yesterday</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-add-row">
|
||||
<div class="add-btn">+ upload file</div>
|
||||
<div class="add-btn">+ new doc</div>
|
||||
</div>
|
||||
|
||||
<div class="nfc-prompt" style="margin-top:auto;">
|
||||
<div style="font-size:10px;color:#2a2a2a;letter-spacing:0.06em;">storage used</div>
|
||||
<div style="display:flex;align-items:center;gap:8px;margin-top:6px;">
|
||||
<div style="flex:1;height:2px;background:#1a1a1a;border-radius:1px;">
|
||||
<div style="width:34%;height:100%;background:#444;border-radius:1px;"></div>
|
||||
</div>
|
||||
<div style="font-size:10px;color:#2e2e2e;letter-spacing:0.04em;">34%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-nav">
|
||||
<div class="nav-item">
|
||||
<div class="nav-icon">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="2" width="14" height="10" rx="2" stroke="#333" stroke-width="0.8"/></svg>
|
||||
</div>
|
||||
<div class="nav-label">chats</div>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<div class="nav-icon">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="6" r="3" stroke="#333" stroke-width="0.8"/><path d="M2 14c0-3.3 2.7-5 6-5s6 1.7 6 5" stroke="#333" stroke-width="0.8" stroke-linecap="round"/></svg>
|
||||
</div>
|
||||
<div class="nav-label">contacts</div>
|
||||
</div>
|
||||
<div class="nav-item active">
|
||||
<div class="nav-icon">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="#e8e8e8" stroke-width="0.8"/><circle cx="8" cy="8" r="2" stroke="#e8e8e8" stroke-width="0.8"/></svg>
|
||||
</div>
|
||||
<div class="nav-label">spaces</div>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<div class="nav-icon">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="#333" stroke-width="0.8"/><path d="M8 5v3l2 2" stroke="#333" stroke-width="0.8" stroke-linecap="round"/></svg>
|
||||
</div>
|
||||
<div class="nav-label">settings</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
Reference in New Issue
Block a user