usite-sas-bic/whatsapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

up

Browse Source
This commit is contained in:
Lizandro Guarnizo
2026-01-22 11:25:32 -05:00
parent b84d45d967
commit 84e2d1d236
6 changed files with 126 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
chat_window.php
+68 -64
View File
@@ -25,19 +25,20 @@ if (empty($user_id)) {
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<link href="assets/css/styles.css" rel="stylesheet">
<style>
/* Más compacto: reducir la escala base y espacios para interfaces pequeñas */
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 0.95rem; /* Igual que el resto de la app (base reducida) */
font-size: 0.88rem; /* más pequeño para toda la app */
}
.chat-container {
background: white;
border-radius: 12px;
box-shadow: 0 8px 20px rgba(0,0,0,0.12);
margin: 12px auto;
max-width: 820px; /* un poco más estrecho */
border-radius: 10px;
box-shadow: 0 6px 16px rgba(0,0,0,0.10);
margin: 10px auto;
max-width: 780px; /* ligeramente más estrecho */
height: calc(100vh - 36px);
display: flex;
flex-direction: column;
@@ -47,60 +48,60 @@ if (empty($user_id)) {
.chat-header {
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
color: white;
padding: 10px 14px; /* más compacto */
border-radius: 12px 12px 0 0;
padding: 8px 10px; /* aún más compacto */
border-radius: 10px 10px 0 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
gap: 8px;
}
.chat-conversations {
flex: 1;
padding: 12px; /* menos padding para caber más */
padding: 8px; /* menos padding para caber más */
overflow-y: auto;
background: #f8f9fa;
}
.chat-input {
padding: 12px; /* compacto */
padding: 8px; /* compacto */
background: white;
border-radius: 0 0 12px 12px;
border-radius: 0 0 10px 10px;
border-top: 1px solid #eee;
}
.message-bubble {
margin: 8px 0;
padding: 8px 12px; /* menos padding */
border-radius: 14px;
max-width: 65%;
margin: 6px 0;
padding: 6px 10px; /* menos padding */
border-radius: 12px;
max-width: 70%;
word-wrap: break-word;
font-size: 0.95rem;
font-size: 0.88rem;
}
/* Estilos para mensajes multimedia */
.message-bubble img {
max-width: 260px; /* un poco más pequeño */
max-height: 360px;
max-width: 220px; /* más pequeño */
max-height: 280px;
width: auto;
height: auto;
border-radius: 8px;
border-radius: 6px;
cursor: pointer;
display: block;
margin: 4px 0;
}
.message-bubble video {
max-width: 260px;
max-height: 360px;
border-radius: 8px;
max-width: 220px;
max-height: 280px;
border-radius: 6px;
display: block;
margin: 4px 0;
}
.message-bubble audio {
width: 200px;
height: 36px;
width: 160px;
height: 32px;
margin: 4px 0;
display: block;
}
@@ -108,9 +109,9 @@ if (empty($user_id)) {
.message-document {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 15px;
background: rgba(0,0,0,0.05);
gap: 8px;
padding: 8px 12px;
background: rgba(0,0,0,0.04);
border-radius: 8px;
text-decoration: none;
color: inherit;
@@ -118,11 +119,11 @@ if (empty($user_id)) {
}
.message-document:hover {
background: rgba(0,0,0,0.1);
background: rgba(0,0,0,0.08);
}
.message-document i {
font-size: 1.5rem;
font-size: 1.25rem;
color: #25D366;
}
@@ -136,13 +137,13 @@ if (empty($user_id)) {
background: white;
margin-right: auto;
border-bottom-left-radius: 4px;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.message-time {
font-size: 0.75rem;
font-size: 0.7rem;
color: #999;
margin-top: 5px;
margin-top: 4px;
text-align: right;
}
@@ -152,27 +153,29 @@ if (empty($user_id)) {
.typing-indicator {
display: none;
padding: 10px;
padding: 8px;
font-style: italic;
color: #666;
}
.input-group {
border-radius: 25px;
border-radius: 20px;
overflow: hidden;
}
.form-control {
border: none;
padding: 12px 20px;
padding: 8px 14px;
font-size: 0.88rem;
}
.btn-send {
background: #25D366;
border: none;
color: white;
padding: 12px 20px;
border-radius: 0 25px 25px 0;
padding: 10px 14px;
border-radius: 0 20px 20px 0;
font-size: 0.9rem;
}
.btn-send:hover {
@@ -181,8 +184,8 @@ if (empty($user_id)) {
}
.user-avatar {
width: 36px; /* más pequeño */
height: 36px;
width: 28px; /* más pequeño */
height: 28px;
border-radius: 50%;
background: #25D366;
display: flex;
@@ -190,11 +193,11 @@ if (empty($user_id)) {
justify-content: center;
color: white;
font-weight: 600;
font-size: 0.95rem;
font-size: 0.85rem;
}
.status-indicator {
font-size: 0.75rem;
font-size: 0.65rem;
opacity: 0.85;
}
@@ -203,9 +206,9 @@ if (empty($user_id)) {
background: transparent;
border: none;
color: #666;
padding: 12px 15px;
padding: 8px 10px;
cursor: pointer;
font-size: 1.2rem;
font-size: 1rem;
}
.attach-btn:hover {
@@ -213,22 +216,22 @@ if (empty($user_id)) {
}
.media-preview {
padding: 10px;
padding: 8px;
background: #f0f0f0;
border-radius: 8px;
margin-bottom: 10px;
margin-bottom: 8px;
display: none;
}
.media-preview.show {
display: block;
animation: slideDown 0.3s ease-out;
animation: slideDown 0.22s ease-out;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
transform: translateY(-8px);
}
to {
opacity: 1;
@@ -239,14 +242,14 @@ if (empty($user_id)) {
.media-preview-content {
display: flex;
align-items: center;
gap: 10px;
gap: 8px;
}
.media-thumbnail {
width: 60px;
height: 60px;
width: 48px;
height: 48px;
object-fit: cover;
border-radius: 5px;
border-radius: 4px;
}
.media-info {
@@ -255,36 +258,36 @@ if (empty($user_id)) {
.media-filename {
font-weight: 500;
font-size: 0.9rem;
font-size: 0.85rem;
color: #333;
}
.media-filesize {
font-size: 0.8rem;
font-size: 0.75rem;
color: #666;
}
.message-media {
margin-top: 8px;
margin-top: 6px;
}
.message-media img,
.message-media video {
max-width: 100%;
border-radius: 8px;
margin-top: 5px;
border-radius: 6px;
margin-top: 4px;
}
.message-media audio {
width: 100%;
margin-top: 5px;
margin-top: 4px;
}
.message-document {
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
padding: 8px;
background: #f0f0f0;
border-radius: 8px;
margin-top: 5px;
@@ -297,7 +300,7 @@ if (empty($user_id)) {
}
.message-document i {
font-size: 1.5rem;
font-size: 1.25rem;
color: #666;
}
@@ -305,9 +308,9 @@ if (empty($user_id)) {
background: transparent;
border: none;
color: #666;
padding: 12px 15px;
padding: 8px 10px;
cursor: pointer;
font-size: 1.2rem;
font-size: 1rem;
}
.mic-btn:hover {
@@ -326,12 +329,12 @@ if (empty($user_id)) {
.recording-indicator {
display: none;
padding: 10px;
padding: 8px;
background: #fff3cd;
border-radius: 8px;
margin-bottom: 10px;
margin-bottom: 8px;
align-items: center;
gap: 10px;
gap: 8px;
}
.recording-indicator.show {
@@ -341,6 +344,7 @@ if (empty($user_id)) {
.recording-time {
font-weight: 500;
color: #dc3545;
font-size: 0.85rem;
}
</style>
</head>