Skip to content

Commit 3cfccbb

Browse files
AlpegreAlpegre
committed
Realizacion de interfaz del chat y de todas las interfaces de los pagos, ajustes en el panel izquierdo del perfil del usuario
1 parent 39eb5e7 commit 3cfccbb

11 files changed

Lines changed: 1439 additions & 338 deletions

File tree

‎.env.example‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎codigo/accounts/templates/accounts/profile.html‎

Lines changed: 7 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -22,81 +22,37 @@
2222
{{ user.username.0|upper }}
2323
</div>
2424
{% endif %}
25-
<h1 class="profile-title">{{ user.username }}</h1>
26-
<p class="profile-subtitle">Miembro desde {{ user.date_joined|date:"F Y" }}</p>
27-
28-
{% if user_profile.get_age %}
29-
<p>{{ user_profile.get_age }} años</p>
30-
{% endif %}
31-
32-
{% if user_profile.location %}
33-
<p>{{ user_profile.location }}</p>
34-
{% endif %}
35-
36-
{% if user_profile.last_active %}
37-
<p>{{ user_profile.get_activity_status }}</p>
38-
{% endif %}
39-
40-
{% if user_profile.bio %}
41-
<div>
42-
<p>{{ user_profile.bio|linebreaksbr }}</p>
43-
</div>
44-
{% endif %}
4525
</div>
26+
<h1 class="profile-title">{{ user.username }}</h1>
27+
<p class="profile-subtitle">Miembro desde {{ user.date_joined|date:"F Y" }}</p>
4628

4729
<div class="stats-container">
48-
<h3 class="stats-heading">Estadísticas</h3>
4930
<div class="stats-grid">
5031
<div class="stat-card">
51-
<div class="stat-icon"><i class="fas fa-car-side"></i></div>
5232
<div class="stat-number">{{ total_rides }}</div>
53-
<div class="stat-label">Viajes Totales</div>
33+
<div class="stat-label">Total</div>
5434
</div>
5535
<div class="stat-card">
56-
<div class="stat-icon"><i class="fas fa-road"></i></div>
5736
<div class="stat-number">{{ active_rides_as_driver.count }}</div>
58-
<div class="stat-label">Como Conductor</div>
37+
<div class="stat-label">Conductor</div>
5938
</div>
6039
<div class="stat-card">
61-
<div class="stat-icon"><i class="fas fa-user"></i></div>
6240
<div class="stat-number">{{ rides_as_passenger.count }}</div>
63-
<div class="stat-label">Como Pasajero</div>
41+
<div class="stat-label">Pasajero</div>
6442
</div>
6543
</div>
6644
</div>
67-
68-
{% if user_profile.has_vehicle %}
69-
<div>
70-
<h3>Mi Vehículo</h3>
71-
<div>
72-
<p><strong>Modelo:</strong> {{ user_profile.vehicle_model }} ({{ user_profile.vehicle_year }})</p>
73-
<p><strong>Color:</strong> {{ user_profile.vehicle_color }}</p>
74-
{% if user_profile.vehicle_features %}
75-
<p><strong>Características:</strong> {{ user_profile.vehicle_features }}</p>
76-
{% endif %}
77-
</div>
78-
</div>
79-
{% endif %}
80-
45+
8146
<div class="profile-actions">
82-
{% if is_own_profile %}
8347
<a href="{% url 'rides:create_ride' %}" class="button button-primary">
8448
<i class="fas fa-plus"></i> Crear Viaje
8549
</a>
86-
8750
<a href="{% url 'accounts:settings' %}" class="button button-secondary">
8851
<i class="fas fa-cog"></i> Configuración
8952
</a>
90-
91-
9253
<a href="{% url 'reviews:list' %}" class="button button-secondary">
93-
<i class="fas fa-star"></i> Mis Valoraciones
94-
</a>
95-
{% else %}
96-
<a href="{% url 'chat:create_direct_chat' user.id %}" class="button button-primary">
97-
<i class="fas fa-envelope"></i> Enviar Mensaje
54+
<i class="fas fa-star"></i> Valoraciones
9855
</a>
99-
{% endif %}
10056
</div>
10157
</div>
10258

‎codigo/chat/templates/chat/chat.html‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
{% load static %}
33

44
{% block title %}{% if selected_chat %}Chat{% else %}Mensajes{% endif %}{% endblock %}
5+
{% block extra_styles %}
6+
<link rel="stylesheet" href="{% static 'css/pages/chat.css' %}">
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8+
{% endblock %}
59

610
{% block content %}
711
<div class="chat-container">
@@ -98,6 +102,10 @@ <h2>Mis Chats</h2>
98102
const chatForm = document.getElementById('chat-form');
99103
const messageInput = document.getElementById('message-input');
100104

105+
// Add debugging to check if elements are found
106+
console.log("Chat form:", chatForm);
107+
console.log("Message input:", messageInput);
108+
101109
// Cargar mensajes iniciales
102110
loadMessages();
103111

@@ -106,6 +114,15 @@ <h2>Mis Chats</h2>
106114
'ws://' + window.location.host + '/ws/chat/' + chatId + '/'
107115
);
108116

117+
chatSocket.onopen = function(e) {
118+
console.log("WebSocket connection established");
119+
// Enable the input field explicitly
120+
if (messageInput) {
121+
messageInput.disabled = false;
122+
messageInput.focus();
123+
}
124+
};
125+
109126
chatSocket.onmessage = function(e) {
110127
const data = JSON.parse(e.data);
111128

@@ -156,7 +173,7 @@ <h2>Mis Chats</h2>
156173
function addMessage(message) {
157174
// Crear elemento de mensaje
158175
const messageElement = document.createElement('div');
159-
messageElement.classList.add('message');
176+
messageElement.classList.add('chat-message'); // Change from 'message' to 'chat-message'
160177
messageElement.classList.add(message.sender === username ? 'sent' : 'received');
161178

162179
// Contenido del mensaje

‎codigo/payments/templates/payments/cancel_payment.html‎

Lines changed: 99 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,36 +2,119 @@
22

33
{% block title %}Cancelar Pago - BlaBlaCar{% endblock %}
44

5-
{% block styles %}
5+
{% block extra_styles %}
66
<style>
7+
:root {
8+
--apple-bg: #f5f5f7;
9+
--apple-card: #ffffff;
10+
--apple-text: #1d1d1f;
11+
--apple-secondary-text: #86868b;
12+
--apple-border: #d2d2d7;
13+
--apple-blue: #0071e3;
14+
--apple-green: #34c759;
15+
--apple-yellow: #ffd60a;
16+
--apple-red: #ff3b30;
17+
--apple-teal: #5ac8fa;
18+
}
19+
20+
body {
21+
background-color: var(--apple-bg);
22+
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
23+
color: var(--apple-text);
24+
-webkit-font-smoothing: antialiased;
25+
}
26+
727
.cancel-payment-container {
828
max-width: 600px;
9-
margin: 0 auto;
29+
margin: 60px auto;
1030
padding: 20px;
1131
text-align: center;
32+
animation: fadeIn 0.3s ease;
1233
}
34+
35+
@keyframes fadeIn {
36+
from { opacity: 0; transform: translateY(10px); }
37+
to { opacity: 1; transform: translateY(0); }
38+
}
39+
1340
.cancel-payment-card {
14-
background-color: #fff;
15-
border-radius: 8px;
16-
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
17-
padding: 30px;
41+
background-color: var(--apple-card);
42+
border-radius: 16px;
43+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
44+
padding: 40px;
45+
border: 1px solid var(--apple-border);
1846
}
19-
.payment-info {
20-
margin: 20px 0;
21-
padding: 15px;
22-
background-color: #f8f9fa;
23-
border-radius: var(--border-radius-sm);
47+
48+
.cancel-payment-card h1 {
49+
font-weight: 600;
50+
font-size: 28px;
51+
letter-spacing: -0.02em;
52+
margin-bottom: 12px;
53+
color: var(--apple-text);
2454
}
25-
.warning-icon {
26-
font-size: 3rem;
27-
color: var(--color-warning);
55+
56+
.cancel-payment-card p {
57+
color: var(--apple-secondary-text);
58+
font-size: 17px;
59+
line-height: 1.4;
2860
margin-bottom: 20px;
2961
}
62+
63+
.warning-icon {
64+
font-size: 48px;
65+
margin-bottom: 24px;
66+
color: var(--apple-yellow);
67+
}
68+
69+
.payment-info {
70+
margin: 28px 0;
71+
padding: 24px;
72+
background-color: var(--apple-bg);
73+
border-radius: 12px;
74+
text-align: left;
75+
border: 1px solid var(--apple-border);
76+
}
77+
78+
.payment-info p {
79+
margin: 8px 0;
80+
font-size: 16px;
81+
color: var(--apple-text);
82+
}
83+
3084
.cancel-actions {
31-
margin-top: 30px;
85+
margin-top: 36px;
3286
display: flex;
3387
justify-content: center;
34-
gap: 15px;
88+
gap: 16px;
89+
}
90+
91+
.button {
92+
padding: 12px 24px;
93+
border-radius: 22px;
94+
font-size: 15px;
95+
font-weight: 500;
96+
text-align: center;
97+
cursor: pointer;
98+
transition: all 0.2s ease;
99+
text-decoration: none;
100+
white-space: nowrap;
101+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
102+
border: none;
103+
}
104+
105+
.button-danger {
106+
background-color: var(--apple-red);
107+
color: white;
108+
}
109+
110+
.button-secondary {
111+
background-color: rgba(0, 0, 0, 0.05);
112+
color: var(--apple-text);
113+
}
114+
115+
.button:hover {
116+
transform: translateY(-1px);
117+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
35118
}
36119
</style>
37120
{% endblock %}

0 commit comments

Comments
 (0)