android frontend first implementation
This commit is contained in:
@@ -0,0 +1,170 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:width="108dp"
|
||||
android:height="108dp"
|
||||
android:viewportWidth="108"
|
||||
android:viewportHeight="108">
|
||||
<path
|
||||
android:fillColor="#3DDC84"
|
||||
android:pathData="M0,0h108v108h-108z" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M9,0L9,108"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M19,0L19,108"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M29,0L29,108"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M39,0L39,108"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M49,0L49,108"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M59,0L59,108"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M69,0L69,108"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M79,0L79,108"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M89,0L89,108"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M99,0L99,108"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M0,9L108,9"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M0,19L108,19"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M0,29L108,29"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M0,39L108,39"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M0,49L108,49"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M0,59L108,59"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M0,69L108,69"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M0,79L108,79"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M0,89L108,89"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M0,99L108,99"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M19,29L89,29"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M19,39L89,39"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M19,49L89,49"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M19,59L89,59"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M19,69L89,69"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M19,79L89,79"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M29,19L29,89"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M39,19L39,89"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M49,19L49,89"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M59,19L59,89"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M69,19L69,89"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:pathData="M79,19L79,89"
|
||||
android:strokeWidth="0.8"
|
||||
android:strokeColor="#33FFFFFF" />
|
||||
</vector>
|
||||
@@ -0,0 +1,30 @@
|
||||
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
xmlns:aapt="http://schemas.android.com/aapt"
|
||||
android:width="108dp"
|
||||
android:height="108dp"
|
||||
android:viewportWidth="108"
|
||||
android:viewportHeight="108">
|
||||
<path android:pathData="M31,63.928c0,0 6.4,-11 12.1,-13.1c7.2,-2.6 26,-1.4 26,-1.4l38.1,38.1L107,108.928l-32,-1L31,63.928z">
|
||||
<aapt:attr name="android:fillColor">
|
||||
<gradient
|
||||
android:endX="85.84757"
|
||||
android:endY="92.4963"
|
||||
android:startX="42.9492"
|
||||
android:startY="49.59793"
|
||||
android:type="linear">
|
||||
<item
|
||||
android:color="#44000000"
|
||||
android:offset="0.0" />
|
||||
<item
|
||||
android:color="#00000000"
|
||||
android:offset="1.0" />
|
||||
</gradient>
|
||||
</aapt:attr>
|
||||
</path>
|
||||
<path
|
||||
android:fillColor="#FFFFFF"
|
||||
android:fillType="nonZero"
|
||||
android:pathData="M65.3,45.828l3.8,-6.6c0.2,-0.4 0.1,-0.9 -0.3,-1.1c-0.4,-0.2 -0.9,-0.1 -1.1,0.3l-3.9,6.7c-6.3,-2.8 -13.4,-2.8 -19.7,0l-3.9,-6.7c-0.2,-0.4 -0.7,-0.5 -1.1,-0.3C38.8,38.328 38.7,38.828 38.9,39.228l3.8,6.6C36.2,49.428 31.7,56.028 31,63.928h46C76.3,56.028 71.8,49.428 65.3,45.828zM43.4,57.328c-0.8,0 -1.5,-0.5 -1.8,-1.2c-0.3,-0.7 -0.1,-1.5 0.4,-2.1c0.5,-0.5 1.4,-0.7 2.1,-0.4c0.7,0.3 1.2,1 1.2,1.8C45.3,56.528 44.5,57.328 43.4,57.328L43.4,57.328zM64.6,57.328c-0.8,0 -1.5,-0.5 -1.8,-1.2s-0.1,-1.5 0.4,-2.1c0.5,-0.5 1.4,-0.7 2.1,-0.4c0.7,0.3 1.2,1 1.2,1.8C66.5,56.528 65.6,57.328 64.6,57.328L64.6,57.328z"
|
||||
android:strokeWidth="1"
|
||||
android:strokeColor="#00000000" />
|
||||
</vector>
|
||||
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
|
||||
<background android:drawable="@drawable/ic_launcher_background" />
|
||||
<foreground android:drawable="@drawable/ic_launcher_foreground" />
|
||||
<monochrome android:drawable="@drawable/ic_launcher_foreground" />
|
||||
</adaptive-icon>
|
||||
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
|
||||
<background android:drawable="@drawable/ic_launcher_background" />
|
||||
<foreground android:drawable="@drawable/ic_launcher_foreground" />
|
||||
<monochrome android:drawable="@drawable/ic_launcher_foreground" />
|
||||
</adaptive-icon>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 982 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
@@ -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>
|
||||
@@ -0,0 +1,627 @@
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
.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 {
|
||||
height: 580px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 12px 20px 4px;
|
||||
font-size: 10px;
|
||||
color: #444;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.screen-label {
|
||||
font-size: 9px;
|
||||
letter-spacing: 0.15em;
|
||||
color: #2a2a2a;
|
||||
text-align: center;
|
||||
padding: 0 0 6px;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 6px 18px 10px;
|
||||
border-bottom: 0.5px solid #1a1a1a;
|
||||
}
|
||||
.eyebrow { font-size: 9px; color: #2e2e2e; letter-spacing: 0.1em; margin-bottom: 3px; }
|
||||
.title { font-size: 18px; color: #d8d8d8; letter-spacing: -0.01em; font-weight: 400; }
|
||||
.subtitle { font-size: 10px; color: #333; letter-spacing: 0.04em; margin-top: 2px; }
|
||||
|
||||
.space-tabs {
|
||||
display: flex;
|
||||
border-bottom: 0.5px solid #161616;
|
||||
padding: 0 18px;
|
||||
}
|
||||
.tab {
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.06em;
|
||||
color: #333;
|
||||
padding: 7px 0;
|
||||
margin-right: 18px;
|
||||
border-bottom: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tab.active { color: #e8e8e8; border-bottom-color: #e8e8e8; }
|
||||
|
||||
.body {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.table-list {
|
||||
padding: 12px 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table-card {
|
||||
background: #0d0d0d;
|
||||
border: 0.5px solid #1a1a1a;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.table-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 10px 6px;
|
||||
border-bottom: 0.5px solid #161616;
|
||||
}
|
||||
.table-card-name { font-size: 11px; color: #b0b0b0; letter-spacing: 0.04em; }
|
||||
.table-card-meta { font-size: 9px; color: #2e2e2e; letter-spacing: 0.04em; }
|
||||
|
||||
.mini-table { width: 100%; overflow: hidden; }
|
||||
.mini-table table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 10px;
|
||||
table-layout: fixed;
|
||||
}
|
||||
.mini-table th {
|
||||
padding: 4px 10px;
|
||||
text-align: left;
|
||||
color: #333;
|
||||
letter-spacing: 0.06em;
|
||||
font-weight: 400;
|
||||
border-bottom: 0.5px solid #161616;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.mini-table td {
|
||||
padding: 5px 10px;
|
||||
color: #666;
|
||||
letter-spacing: 0.03em;
|
||||
border-bottom: 0.5px solid #111;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.mini-table tr:last-child td { border-bottom: none; }
|
||||
|
||||
.check-on {
|
||||
display: inline-block;
|
||||
width: 10px; height: 10px;
|
||||
border: 0.5px solid #444;
|
||||
border-radius: 2px;
|
||||
background: #222;
|
||||
position: relative;
|
||||
}
|
||||
.check-on::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 2px; top: 0px;
|
||||
width: 4px; height: 7px;
|
||||
border-right: 1px solid #888;
|
||||
border-bottom: 1px solid #888;
|
||||
transform: rotate(45deg) translate(-1px, -2px);
|
||||
}
|
||||
.check-off {
|
||||
display: inline-block;
|
||||
width: 10px; height: 10px;
|
||||
border: 0.5px solid #222;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.add-table-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 9px 10px;
|
||||
background: transparent;
|
||||
border: 0.5px dashed #1e1e1e;
|
||||
border-radius: 10px;
|
||||
font-size: 10px;
|
||||
color: #2e2e2e;
|
||||
letter-spacing: 0.06em;
|
||||
cursor: pointer;
|
||||
font-family: 'Courier New', monospace;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.bottom-nav {
|
||||
display: flex;
|
||||
border-top: 0.5px solid #161616;
|
||||
padding: 10px 0 14px;
|
||||
margin-top: auto;
|
||||
}
|
||||
.nav-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.nav-label { font-size: 9px; color: #2e2e2e; letter-spacing: 0.06em; }
|
||||
.nav-item.active .nav-label { color: #e8e8e8; }
|
||||
|
||||
/* ── SCREEN 2: open table ── */
|
||||
.table-header {
|
||||
padding: 6px 18px 10px;
|
||||
border-bottom: 0.5px solid #1a1a1a;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.table-title { font-size: 18px; color: #d8d8d8; letter-spacing: -0.01em; font-weight: 400; }
|
||||
.table-actions { display: flex; gap: 10px; padding-bottom: 2px; }
|
||||
.tbl-action { font-size: 10px; color: #2e2e2e; letter-spacing: 0.06em; cursor: pointer; border: 0.5px solid #1e1e1e; border-radius: 4px; padding: 3px 8px; }
|
||||
|
||||
.full-table-wrap {
|
||||
flex: 1;
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.full-table {
|
||||
border-collapse: collapse;
|
||||
font-size: 11px;
|
||||
font-family: 'Courier New', monospace;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.full-table thead th {
|
||||
padding: 7px 12px;
|
||||
text-align: left;
|
||||
color: #444;
|
||||
letter-spacing: 0.07em;
|
||||
font-weight: 400;
|
||||
font-size: 9px;
|
||||
border-bottom: 0.5px solid #1e1e1e;
|
||||
border-right: 0.5px solid #161616;
|
||||
background: #0d0d0d;
|
||||
white-space: nowrap;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.full-table thead th:last-child { border-right: none; }
|
||||
|
||||
.full-table td {
|
||||
padding: 8px 12px;
|
||||
color: #888;
|
||||
letter-spacing: 0.03em;
|
||||
border-bottom: 0.5px solid #111;
|
||||
border-right: 0.5px solid #0f0f0f;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.full-table td:last-child { border-right: none; }
|
||||
.full-table tr:last-child td { border-bottom: none; }
|
||||
.full-table tr.selected td { background: #111; color: #b0b0b0; }
|
||||
|
||||
.type-badge {
|
||||
display: inline-block;
|
||||
font-size: 8px;
|
||||
color: #2e2e2e;
|
||||
border: 0.5px solid #1e1e1e;
|
||||
border-radius: 3px;
|
||||
padding: 1px 4px;
|
||||
letter-spacing: 0.04em;
|
||||
margin-left: 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.col-header-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.add-row-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
font-size: 10px;
|
||||
color: #2a2a2a;
|
||||
letter-spacing: 0.06em;
|
||||
cursor: pointer;
|
||||
border-top: 0.5px solid #161616;
|
||||
background: #0a0a0a;
|
||||
}
|
||||
|
||||
.table-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 7px 18px;
|
||||
border-bottom: 0.5px solid #161616;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.filter-chip {
|
||||
font-size: 9px;
|
||||
color: #333;
|
||||
border: 0.5px solid #1e1e1e;
|
||||
border-radius: 10px;
|
||||
padding: 3px 8px;
|
||||
letter-spacing: 0.05em;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
.filter-chip.active { color: #888; border-color: #333; }
|
||||
|
||||
/* ── SCREEN 3: new table ── */
|
||||
.sheet-header {
|
||||
padding: 6px 18px 10px;
|
||||
border-bottom: 0.5px solid #1a1a1a;
|
||||
}
|
||||
.sheet-title { font-size: 18px; color: #d8d8d8; letter-spacing: -0.01em; font-weight: 400; }
|
||||
.sheet-sub { font-size: 10px; color: #2e2e2e; letter-spacing: 0.04em; margin-top: 2px; }
|
||||
|
||||
.sheet-body { flex: 1; overflow: hidden; padding: 14px 18px; display: flex; flex-direction: column; gap: 14px; }
|
||||
|
||||
.field-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
.field-label { font-size: 9px; color: #333; letter-spacing: 0.08em; }
|
||||
.field-input {
|
||||
background: #0d0d0d;
|
||||
border: 0.5px solid #1e1e1e;
|
||||
border-radius: 6px;
|
||||
padding: 8px 10px;
|
||||
font-size: 12px;
|
||||
color: #b0b0b0;
|
||||
font-family: 'Courier New', monospace;
|
||||
letter-spacing: 0.04em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.col-defs { display: flex; flex-direction: column; gap: 6px; }
|
||||
.col-def-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.col-name-input {
|
||||
flex: 1;
|
||||
background: #0d0d0d;
|
||||
border: 0.5px solid #1a1a1a;
|
||||
border-radius: 6px;
|
||||
padding: 7px 9px;
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
font-family: 'Courier New', monospace;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
.col-type-select {
|
||||
background: #0d0d0d;
|
||||
border: 0.5px solid #1a1a1a;
|
||||
border-radius: 6px;
|
||||
padding: 7px 6px;
|
||||
font-size: 10px;
|
||||
color: #444;
|
||||
font-family: 'Courier New', monospace;
|
||||
letter-spacing: 0.03em;
|
||||
width: 72px;
|
||||
}
|
||||
.col-drag { font-size: 10px; color: #222; padding: 0 2px; cursor: grab; }
|
||||
|
||||
.add-col-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 10px;
|
||||
color: #2a2a2a;
|
||||
letter-spacing: 0.06em;
|
||||
cursor: pointer;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.template-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
.template-label { font-size: 9px; color: #333; letter-spacing: 0.08em; }
|
||||
.template-chips { display: flex; gap: 6px; flex-wrap: wrap; }
|
||||
.template-chip {
|
||||
font-size: 9px;
|
||||
color: #3a3a3a;
|
||||
border: 0.5px solid #1e1e1e;
|
||||
border-radius: 10px;
|
||||
padding: 4px 10px;
|
||||
letter-spacing: 0.05em;
|
||||
cursor: pointer;
|
||||
}
|
||||
.template-chip.selected { color: #888; border-color: #444; }
|
||||
|
||||
.create-btn {
|
||||
background: #e8e8e8;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
font-size: 11px;
|
||||
color: #0a0a0a;
|
||||
font-family: 'Courier New', monospace;
|
||||
letter-spacing: 0.06em;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
margin-top: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="phones">
|
||||
|
||||
<!-- SCREEN 1: space with tables tab -->
|
||||
<div class="phone">
|
||||
<div class="phone-inner">
|
||||
<div class="status-bar"><span>09:41</span><span>▪▪▪</span></div>
|
||||
<div class="screen-label">shared space · tables</div>
|
||||
<div class="header">
|
||||
<div class="eyebrow">climbing crew</div>
|
||||
<div class="title">space</div>
|
||||
<div class="subtitle">3 members</div>
|
||||
</div>
|
||||
<div class="space-tabs">
|
||||
<div class="tab">files</div>
|
||||
<div class="tab">docs</div>
|
||||
<div class="tab active">tables</div>
|
||||
<div class="tab">links</div>
|
||||
</div>
|
||||
|
||||
<div class="body">
|
||||
<div class="table-list">
|
||||
|
||||
<div class="table-card">
|
||||
<div class="table-card-header">
|
||||
<div class="table-card-name">availability</div>
|
||||
<div class="table-card-meta">edited today</div>
|
||||
</div>
|
||||
<div class="mini-table">
|
||||
<table>
|
||||
<colgroup>
|
||||
<col style="width:35%">
|
||||
<col style="width:22%">
|
||||
<col style="width:22%">
|
||||
<col style="width:21%">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr><th>name</th><th>sat</th><th>sun</th><th>notes</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>priya</td><td><span class="check-on"></span></td><td><span class="check-off"></span></td><td>morning</td></tr>
|
||||
<tr><td>jamie</td><td><span class="check-on"></span></td><td><span class="check-on"></span></td><td></td></tr>
|
||||
<tr><td>you</td><td><span class="check-on"></span></td><td><span class="check-off"></span></td><td>am only</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<div class="table-card-header">
|
||||
<div class="table-card-name">gear to bring</div>
|
||||
<div class="table-card-meta">edited 3 days ago</div>
|
||||
</div>
|
||||
<div class="mini-table">
|
||||
<table>
|
||||
<colgroup>
|
||||
<col style="width:42%">
|
||||
<col style="width:30%">
|
||||
<col style="width:28%">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr><th>item</th><th>who</th><th>packed</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>rope</td><td>jamie</td><td><span class="check-on"></span></td></tr>
|
||||
<tr><td>crash pad</td><td>priya</td><td><span class="check-off"></span></td></tr>
|
||||
<tr><td>first aid</td><td>you</td><td><span class="check-off"></span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="add-table-btn">+ new table</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-nav">
|
||||
<div class="nav-item"><div style="width:16px;height:16px;display:flex;align-items:center;justify-content:center;"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="1" y="1" width="12" height="10" rx="2" stroke="#2e2e2e" stroke-width="0.8"/></svg></div><div class="nav-label">chats</div></div>
|
||||
<div class="nav-item"><div style="width:16px;height:16px;display:flex;align-items:center;justify-content:center;"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="5" r="2.5" stroke="#2e2e2e" stroke-width="0.8"/><path d="M1.5 13c0-3 2.5-4.5 5.5-4.5s5.5 1.5 5.5 4.5" stroke="#2e2e2e" stroke-width="0.8" stroke-linecap="round"/></svg></div><div class="nav-label">contacts</div></div>
|
||||
<div class="nav-item active"><div style="width:16px;height:16px;display:flex;align-items:center;justify-content:center;"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="7" r="5.5" stroke="#e8e8e8" stroke-width="0.8"/><circle cx="7" cy="7" r="2" stroke="#e8e8e8" stroke-width="0.8"/></svg></div><div class="nav-label">spaces</div></div>
|
||||
<div class="nav-item"><div style="width:16px;height:16px;display:flex;align-items:center;justify-content:center;"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="7" r="5.5" stroke="#2e2e2e" stroke-width="0.8"/><path d="M7 4v3l2 2" stroke="#2e2e2e" stroke-width="0.8" stroke-linecap="round"/></svg></div><div class="nav-label">settings</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SCREEN 2: open table -->
|
||||
<div class="phone">
|
||||
<div class="phone-inner">
|
||||
<div class="status-bar"><span>09:41</span><span>▪▪▪</span></div>
|
||||
<div class="screen-label">table view</div>
|
||||
|
||||
<div class="table-header">
|
||||
<div>
|
||||
<div class="eyebrow">climbing crew · space</div>
|
||||
<div class="table-title">availability</div>
|
||||
</div>
|
||||
<div class="table-actions">
|
||||
<div class="tbl-action">filter</div>
|
||||
<div class="tbl-action">+ col</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-toolbar">
|
||||
<div class="filter-chip active">all rows</div>
|
||||
<div class="filter-chip">sat only</div>
|
||||
<div class="filter-chip">available</div>
|
||||
<div class="filter-chip">missing</div>
|
||||
</div>
|
||||
|
||||
<div class="full-table-wrap">
|
||||
<table class="full-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:72px"><div class="col-header-inner">name<span class="type-badge">txt</span></div></th>
|
||||
<th style="width:52px"><div class="col-header-inner">sat<span class="type-badge">bool</span></div></th>
|
||||
<th style="width:52px"><div class="col-header-inner">sun<span class="type-badge">bool</span></div></th>
|
||||
<th style="width:52px"><div class="col-header-inner">mon<span class="type-badge">bool</span></div></th>
|
||||
<th style="width:80px"><div class="col-header-inner">notes<span class="type-badge">txt</span></div></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="selected">
|
||||
<td>priya</td>
|
||||
<td><span class="check-on"></span></td>
|
||||
<td><span class="check-off"></span></td>
|
||||
<td><span class="check-on"></span></td>
|
||||
<td>morning only</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>jamie</td>
|
||||
<td><span class="check-on"></span></td>
|
||||
<td><span class="check-on"></span></td>
|
||||
<td><span class="check-off"></span></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>you</td>
|
||||
<td><span class="check-on"></span></td>
|
||||
<td><span class="check-off"></span></td>
|
||||
<td><span class="check-on"></span></td>
|
||||
<td>am only</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="color:#2a2a2a;font-style:italic" colspan="5">+ add row</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div style="padding:8px 18px;border-top:0.5px solid #161616;display:flex;justify-content:space-between;align-items:center;">
|
||||
<div style="font-size:9px;color:#2a2a2a;letter-spacing:0.06em;">3 rows · 5 columns</div>
|
||||
<div style="font-size:9px;color:#2a2a2a;letter-spacing:0.06em;">synced · e2e</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-nav">
|
||||
<div class="nav-item"><div style="width:16px;height:16px;display:flex;align-items:center;justify-content:center;"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="1" y="1" width="12" height="10" rx="2" stroke="#2e2e2e" stroke-width="0.8"/></svg></div><div class="nav-label">chats</div></div>
|
||||
<div class="nav-item"><div style="width:16px;height:16px;display:flex;align-items:center;justify-content:center;"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="5" r="2.5" stroke="#2e2e2e" stroke-width="0.8"/><path d="M1.5 13c0-3 2.5-4.5 5.5-4.5s5.5 1.5 5.5 4.5" stroke="#2e2e2e" stroke-width="0.8" stroke-linecap="round"/></svg></div><div class="nav-label">contacts</div></div>
|
||||
<div class="nav-item active"><div style="width:16px;height:16px;display:flex;align-items:center;justify-content:center;"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="7" r="5.5" stroke="#e8e8e8" stroke-width="0.8"/><circle cx="7" cy="7" r="2" stroke="#e8e8e8" stroke-width="0.8"/></svg></div><div class="nav-label">spaces</div></div>
|
||||
<div class="nav-item"><div style="width:16px;height:16px;display:flex;align-items:center;justify-content:center;"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="7" r="5.5" stroke="#2e2e2e" stroke-width="0.8"/><path d="M7 4v3l2 2" stroke="#2e2e2e" stroke-width="0.8" stroke-linecap="round"/></svg></div><div class="nav-label">settings</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SCREEN 3: new table -->
|
||||
<div class="phone">
|
||||
<div class="phone-inner">
|
||||
<div class="status-bar"><span>09:41</span><span>▪▪▪</span></div>
|
||||
<div class="screen-label">new table</div>
|
||||
|
||||
<div class="sheet-header">
|
||||
<div class="eyebrow">climbing crew · space</div>
|
||||
<div class="sheet-title">new table</div>
|
||||
<div class="sheet-sub">define columns · start typing</div>
|
||||
</div>
|
||||
|
||||
<div class="sheet-body">
|
||||
|
||||
<div class="field-row">
|
||||
<div class="field-label">table name</div>
|
||||
<div class="field-input">expenses</div>
|
||||
</div>
|
||||
|
||||
<div class="template-row">
|
||||
<div class="template-label">start from template</div>
|
||||
<div class="template-chips">
|
||||
<div class="template-chip selected">availability</div>
|
||||
<div class="template-chip">shopping list</div>
|
||||
<div class="template-chip">expenses</div>
|
||||
<div class="template-chip">tasks</div>
|
||||
<div class="template-chip">blank</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field-row">
|
||||
<div class="field-label">columns</div>
|
||||
<div class="col-defs">
|
||||
<div class="col-def-row">
|
||||
<div class="col-drag">⠿</div>
|
||||
<input class="col-name-input" value="item" readonly>
|
||||
<select class="col-type-select"><option>text</option></select>
|
||||
</div>
|
||||
<div class="col-def-row">
|
||||
<div class="col-drag">⠿</div>
|
||||
<input class="col-name-input" value="amount" readonly>
|
||||
<select class="col-type-select"><option>number</option></select>
|
||||
</div>
|
||||
<div class="col-def-row">
|
||||
<div class="col-drag">⠿</div>
|
||||
<input class="col-name-input" value="paid by" readonly>
|
||||
<select class="col-type-select"><option>text</option></select>
|
||||
</div>
|
||||
<div class="col-def-row">
|
||||
<div class="col-drag">⠿</div>
|
||||
<input class="col-name-input" value="settled" readonly>
|
||||
<select class="col-type-select"><option>bool</option></select>
|
||||
</div>
|
||||
<div class="add-col-row">
|
||||
<span style="color:#222">+</span>
|
||||
<span>add column</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="create-btn">create table</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,10 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<resources>
|
||||
<color name="purple_200">#FFBB86FC</color>
|
||||
<color name="purple_500">#FF6200EE</color>
|
||||
<color name="purple_700">#FF3700B3</color>
|
||||
<color name="teal_200">#FF03DAC5</color>
|
||||
<color name="teal_700">#FF018786</color>
|
||||
<color name="black">#FF000000</color>
|
||||
<color name="white">#FFFFFFFF</color>
|
||||
</resources>
|
||||
@@ -0,0 +1,3 @@
|
||||
<resources>
|
||||
<string name="app_name">Chatapp</string>
|
||||
</resources>
|
||||
@@ -0,0 +1,5 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<resources>
|
||||
|
||||
<style name="Theme.Chatapp" parent="android:Theme.Material.Light.NoActionBar" />
|
||||
</resources>
|
||||
@@ -0,0 +1,13 @@
|
||||
<?xml version="1.0" encoding="utf-8"?><!--
|
||||
Sample backup rules file; uncomment and customize as necessary.
|
||||
See https://developer.android.com/guide/topics/data/autobackup
|
||||
for details.
|
||||
Note: This file is ignored for devices older than API 31
|
||||
See https://developer.android.com/about/versions/12/backup-restore
|
||||
-->
|
||||
<full-backup-content>
|
||||
<!--
|
||||
<include domain="sharedpref" path="."/>
|
||||
<exclude domain="sharedpref" path="device.xml"/>
|
||||
-->
|
||||
</full-backup-content>
|
||||
@@ -0,0 +1,19 @@
|
||||
<?xml version="1.0" encoding="utf-8"?><!--
|
||||
Sample data extraction rules file; uncomment and customize as necessary.
|
||||
See https://developer.android.com/about/versions/12/backup-restore#xml-changes
|
||||
for details.
|
||||
-->
|
||||
<data-extraction-rules>
|
||||
<cloud-backup>
|
||||
<!-- TODO: Use <include> and <exclude> to control what is backed up.
|
||||
<include .../>
|
||||
<exclude .../>
|
||||
-->
|
||||
</cloud-backup>
|
||||
<!--
|
||||
<device-transfer>
|
||||
<include .../>
|
||||
<exclude .../>
|
||||
</device-transfer>
|
||||
-->
|
||||
</data-extraction-rules>
|
||||
Reference in New Issue
Block a user