Aufgelauert/clovening
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Inital commit

Browse Source
This commit is contained in:
MonkeyStrongTogether
2026-05-22 17:48:03 +02:00
parent b691418e68
commit 87ec426fed
36 changed files with 2286 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
splitchat/core/templates/core/auth.html Normal file
View File

@@ -0,0 +1,43 @@
{% extends 'core/base.html' %}
{% block title %}{% if mode == 'login' %}Sign In{% else %}Sign Up{% endif %} – SplitChat{% endblock %}
{% block body %}
<div style="min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:20px;">
<div style="width:100%;max-width:420px;">
<div style="text-align:center;margin-bottom:32px;">
<div style="font-size:40px;margin-bottom:12px;">💬</div>
<div class="logo" style="justify-content:center;font-size:24px;margin-bottom:8px;">SplitChat</div>
<p class="text-muted text-sm">Chat, plan events, split costs — together.</p>
</div>
<div class="card" style="padding:32px;">
<h2 style="font-size:20px;font-weight:700;margin-bottom:24px;">
{% if mode == 'login' %}Welcome back{% else %}Create account{% endif %}
</h2>
<form method="post">
{% csrf_token %}
{% for field in form %}
<div class="form-group">
<label>{{ field.label }}</label>
{{ field }}
{% if field.errors %}<div class="error-list">{{ field.errors.0 }}</div>{% endif %}
</div>
{% endfor %}
{% if form.non_field_errors %}
<div class="error-list" style="margin-bottom:12px;">{{ form.non_field_errors.0 }}</div>
{% endif %}
<button type="submit" class="btn btn-primary" style="width:100%;justify-content:center;margin-top:8px;">
{% if mode == 'login' %}Sign In{% else %}Create Account{% endif %}
</button>
</form>
<div class="divider"></div>
<p class="text-sm text-muted" style="text-align:center;">
{% if mode == 'login' %}
Don't have an account? <a href="{% url 'signup' %}">Sign up free</a>
{% else %}
Already have an account? <a href="{% url 'login' %}">Sign in</a>
{% endif %}
</p>
</div>
</div>
</div>
{% endblock %}

292
splitchat/core/templates/core/base.html Normal file
View File

@@ -0,0 +1,292 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}SplitChat{% endblock %}</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
/* ── Reset & Variables ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #0d0f14;
--bg2: #13161d;
--bg3: #1a1e27;
--bg4: #1f2433;
--border: rgba(255,255,255,0.07);
--border2: rgba(255,255,255,0.12);
--text: #e8eaf0;
--text2: #9aa0b2;
--text3: #5c6375;
--accent: #6366f1;
--accent2: #818cf8;
--accent-glow: rgba(99,102,241,0.15);
--green: #22c55e;
--red: #f43f5e;
--amber: #f59e0b;
--radius: 12px;
--radius-sm: 8px;
--shadow: 0 4px 24px rgba(0,0,0,0.4);
--shadow-lg: 0 8px 48px rgba(0,0,0,0.6);
--font: 'Space Grotesk', sans-serif;
--mono: 'JetBrains Mono', monospace;
--sidebar-w: 260px;
}
html, body { height: 100%; font-family: var(--font); background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.6; }
a { color: var(--accent2); text-decoration: none; }
a:hover { color: var(--text); }
input, textarea, select {
font-family: var(--font);
background: var(--bg3);
border: 1px solid var(--border2);
color: var(--text);
border-radius: var(--radius-sm);
padding: 10px 14px;
font-size: 14px;
width: 100%;
transition: border-color 0.2s, box-shadow 0.2s;
outline: none;
}
input:focus, textarea:focus, select:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-glow);
}
input[type="checkbox"], input[type="radio"] { width: auto; }
label { display: block; font-size: 13px; color: var(--text2); margin-bottom: 5px; font-weight: 500; }
button, .btn {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font); font-size: 14px; font-weight: 600;
padding: 10px 20px; border-radius: var(--radius-sm);
border: none; cursor: pointer; transition: all 0.2s;
text-decoration: none;
}
.btn-primary {
background: var(--accent); color: #fff;
}
.btn-primary:hover { background: var(--accent2); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 16px var(--accent-glow); }
.btn-secondary {
background: var(--bg4); color: var(--text2); border: 1px solid var(--border2);
}
.btn-secondary:hover { background: var(--bg3); color: var(--text); }
.btn-ghost { background: transparent; color: var(--text2); }
.btn-ghost:hover { background: var(--bg3); color: var(--text); }
.btn-danger { background: var(--red); color: #fff; }
.btn-success { background: var(--green); color: #fff; }
.btn-sm { padding: 6px 14px; font-size: 13px; }
.card {
background: var(--bg2);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 20px;
}
.badge {
display: inline-block;
padding: 2px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
}
.badge-accent { background: var(--accent-glow); color: var(--accent2); border: 1px solid rgba(99,102,241,0.3); }
.badge-green { background: rgba(34,197,94,0.1); color: var(--green); border: 1px solid rgba(34,197,94,0.3); }
.badge-red { background: rgba(244,63,94,0.1); color: var(--red); border: 1px solid rgba(244,63,94,0.3); }
.badge-amber { background: rgba(245,158,11,0.1); color: var(--amber); border: 1px solid rgba(245,158,11,0.3); }
.avatar {
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%; font-weight: 700; font-size: 12px; color: #fff; flex-shrink: 0;
}
.avatar-sm { width: 28px; height: 28px; font-size: 11px; }
.avatar-md { width: 36px; height: 36px; font-size: 13px; }
.avatar-lg { width: 48px; height: 48px; font-size: 16px; }
.divider { height: 1px; background: var(--border); margin: 16px 0; }
/* Messages */
.messages-container { position: fixed; top: 20px; right: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; }
.message-toast {
background: var(--bg3); border: 1px solid var(--border2);
padding: 12px 18px; border-radius: var(--radius-sm);
font-size: 14px; box-shadow: var(--shadow);
animation: slideIn 0.3s ease;
max-width: 320px;
}
.message-toast.success { border-left: 3px solid var(--green); }
.message-toast.error { border-left: 3px solid var(--red); }
.message-toast.info { border-left: 3px solid var(--accent); }
@keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
/* Layout */
.app-layout { display: flex; height: 100vh; overflow: hidden; }
.sidebar {
width: var(--sidebar-w); flex-shrink: 0;
background: var(--bg2); border-right: 1px solid var(--border);
display: flex; flex-direction: column;
overflow-y: auto;
}
.main-content { flex: 1; overflow-y: auto; }
.sidebar-header {
padding: 20px;
border-bottom: 1px solid var(--border);
}
.logo {
font-size: 18px; font-weight: 700;
background: linear-gradient(135deg, var(--accent2), #c084fc);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
display: flex; align-items: center; gap: 8px;
}
.logo-icon { font-size: 22px; -webkit-text-fill-color: initial; }
.sidebar-nav { padding: 12px 8px; flex: 1; }
.nav-section-title {
font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
color: var(--text3); padding: 8px 12px; margin-top: 8px;
}
.nav-item {
display: flex; align-items: center; gap: 10px;
padding: 9px 12px; border-radius: var(--radius-sm);
color: var(--text2); font-size: 14px; font-weight: 500;
transition: all 0.15s; cursor: pointer;
text-decoration: none;
margin-bottom: 2px;
}
.nav-item:hover, .nav-item.active {
background: var(--bg3); color: var(--text);
}
.nav-item .icon { font-size: 16px; width: 20px; text-align: center; }
.nav-item .count {
margin-left: auto; font-size: 11px; background: var(--bg4);
padding: 1px 7px; border-radius: 10px; color: var(--text3);
}
.sidebar-footer {
padding: 12px;
border-top: 1px solid var(--border);
}
.user-pill {
display: flex; align-items: center; gap: 10px;
padding: 8px; border-radius: var(--radius-sm);
background: var(--bg3);
}
.user-pill .info { flex: 1; min-width: 0; }
.user-pill .name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-pill .role { font-size: 11px; color: var(--text3); }
/* Page header */
.page-header {
padding: 32px 40px 0;
display: flex; align-items: flex-start; justify-content: space-between;
flex-wrap: wrap; gap: 16px;
}
.page-title { font-size: 26px; font-weight: 700; }
.page-subtitle { color: var(--text2); font-size: 14px; margin-top: 4px; }
.page-body { padding: 24px 40px 40px; }
/* Form styles */
.form-group { margin-bottom: 16px; }
.form-card { max-width: 520px; margin: 40px auto; }
.error-list { color: var(--red); font-size: 13px; margin-top: 4px; }
/* Grid */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* Misc */
.text-muted { color: var(--text2); }
.text-sm { font-size: 13px; }
.text-xs { font-size: 12px; }
.font-mono { font-family: var(--mono); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mb-3 { margin-bottom: 12px; }
/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text3); }
</style>
{% block extra_css %}{% endblock %}
</head>
<body>
{% if messages %}
<div class="messages-container" id="toastContainer">
{% for msg in messages %}
<div class="message-toast {{ msg.tags }}">{{ msg }}</div>
{% endfor %}
</div>
{% endif %}
{% block body %}
<div class="app-layout">
{% if user.is_authenticated %}
<aside class="sidebar">
<div class="sidebar-header">
<div class="logo"><span class="logo-icon">💬</span> SplitChat</div>
</div>
<nav class="sidebar-nav">
<a href="{% url 'dashboard' %}" class="nav-item {% if request.resolver_match.url_name == 'dashboard' %}active{% endif %}">
<span class="icon">⊞</span> Dashboard
</a>
<a href="{% url 'room_create' %}" class="nav-item">
<span class="icon">+</span> New Room
</a>
<a href="{% url 'room_join' %}" class="nav-item">
<span class="icon">→</span> Join Room
</a>
{% if rooms %}
<div class="nav-section-title">Your Rooms</div>
{% for room in rooms %}
<a href="{% url 'room_detail' room_id=room.id %}"
class="nav-item {% if current_room and current_room.id == room.id %}active{% endif %}">
<span class="icon">#</span>
<span class="truncate">{{ room.name }}</span>
<span class="count">{{ room.member_count }}</span>
</a>
{% endfor %}
{% endif %}
</nav>
<div class="sidebar-footer">
{% if user.profile %}
<div class="user-pill">
<div class="avatar avatar-sm" style="background:{{ user.profile.avatar_color }}">{{ user.profile.get_avatar_initials }}</div>
<div class="info">
<div class="name">{{ user.profile.name }}</div>
<div class="role">@{{ user.username }}</div>
</div>
<a href="{% url 'logout' %}" class="btn btn-ghost btn-sm" title="Log out">↩</a>
</div>
{% endif %}
</div>
</aside>
{% endif %}
<main class="main-content">
{% block content %}{% endblock %}
</main>
</div>
{% endblock %}
<script>
// Auto-dismiss toasts
setTimeout(() => {
const toasts = document.querySelectorAll('.message-toast');
toasts.forEach(t => { t.style.opacity = '0'; t.style.transition = 'opacity 0.4s'; setTimeout(() => t.remove(), 400); });
}, 3500);
</script>
{% block extra_js %}{% endblock %}
</body>
</html>

110
splitchat/core/templates/core/dashboard.html Normal file
View File

@@ -0,0 +1,110 @@
{% extends 'core/base.html' %}
{% block title %}Dashboard – SplitChat{% endblock %}
{% block content %}
{% with rooms=rooms %}
<div class="page-header">
<div>
<h1 class="page-title">Dashboard</h1>
<p class="page-subtitle">Good to see you, {{ profile.name }} 👋</p>
</div>
<div class="flex gap-2">
<a href="{% url 'room_join' %}" class="btn btn-secondary">Join Room</a>
<a href="{% url 'room_create' %}" class="btn btn-primary">+ New Room</a>
</div>
</div>
<div class="page-body">
<!-- Balance Overview -->
<div class="grid-3" style="margin-bottom:28px;">
<div class="card" style="border-color:{% if net_balance >= 0 %}rgba(34,197,94,0.2){% else %}rgba(244,63,94,0.2){% endif %};">
<div class="text-xs text-muted" style="text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;">Net Balance</div>
<div style="font-size:28px;font-weight:700;color:{% if net_balance >= 0 %}var(--green){% else %}var(--red){% endif %};">
{% if net_balance >= 0 %}+{% endif %}${{ net_balance|floatformat:2 }}
</div>
<div class="text-xs text-muted mt-1">{% if net_balance >= 0 %}You're in the green{% else %}You have outstanding debts{% endif %}</div>
</div>
<div class="card">
<div class="text-xs text-muted" style="text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;">Owed to You</div>
<div style="font-size:28px;font-weight:700;color:var(--green);">+${{ total_owed|floatformat:2 }}</div>
<div class="text-xs text-muted mt-1">Others owe you this</div>
</div>
<div class="card">
<div class="text-xs text-muted" style="text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;">You Owe</div>
<div style="font-size:28px;font-weight:700;color:{% if total_owing > 0 %}var(--red){% else %}var(--text2){% endif %};">${{ total_owing|floatformat:2 }}</div>
<div class="text-xs text-muted mt-1">Across all unsettled events</div>
</div>
</div>
<div class="grid-2" style="gap:28px;align-items:start;">
<!-- Rooms -->
<div>
<div class="flex-center gap-2" style="margin-bottom:14px;justify-content:space-between;">
<h2 style="font-size:16px;font-weight:700;">Your Rooms</h2>
<a href="{% url 'room_create' %}" class="btn btn-ghost btn-sm">+ New</a>
</div>
{% if rooms %}
{% for room in rooms %}
<a href="{% url 'room_detail' room_id=room.id %}" style="text-decoration:none;">
<div class="card" style="margin-bottom:10px;transition:all .2s;cursor:pointer;"
onmouseover="this.style.borderColor='var(--border2)';this.style.transform='translateY(-1px)'"
onmouseout="this.style.borderColor='var(--border)';this.style.transform='none'">
<div class="flex-center gap-3">
<div style="width:40px;height:40px;border-radius:10px;background:var(--accent-glow);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;">#</div>
<div style="flex:1;min-width:0;">
<div style="font-weight:600;font-size:15px;">{{ room.name }}</div>
{% if room.description %}
<div class="text-xs text-muted truncate">{{ room.description }}</div>
{% endif %}
</div>
<div class="text-xs text-muted">{{ room.member_count }} member{{ room.member_count|pluralize }}</div>
</div>
</div>
</a>
{% endfor %}
{% else %}
<div class="card" style="text-align:center;padding:40px;color:var(--text3);">
<div style="font-size:32px;margin-bottom:8px;">💬</div>
<div>No rooms yet.</div>
<a href="{% url 'room_create' %}" class="btn btn-primary btn-sm" style="margin-top:12px;">Create your first room</a>
</div>
{% endif %}
</div>
<!-- Upcoming Events -->
<div>
<div class="flex-center gap-2" style="margin-bottom:14px;justify-content:space-between;">
<h2 style="font-size:16px;font-weight:700;">Upcoming Events</h2>
</div>
{% if upcoming_events %}
{% for event in upcoming_events %}
<a href="{% url 'event_detail' room_id=event.room.id event_id=event.id %}" style="text-decoration:none;">
<div class="card" style="margin-bottom:10px;transition:all .2s;"
onmouseover="this.style.borderColor='var(--border2)';this.style.transform='translateY(-1px)'"
onmouseout="this.style.borderColor='var(--border)';this.style.transform='none'">
<div class="flex-center" style="justify-content:space-between;margin-bottom:6px;">
<div style="font-weight:600;font-size:15px;">{{ event.title }}</div>
<span class="badge badge-accent">{{ event.room.name }}</span>
</div>
<div class="flex-center gap-2 text-xs text-muted">
{% if event.location %}<span>📍 {{ event.location }}</span>{% endif %}
{% if event.event_date %}<span>🗓 {{ event.event_date|date:"M j, g:i A" }}</span>{% endif %}
<span>💰 ${{ event.total_amount|floatformat:2 }}</span>
</div>
</div>
</a>
{% endfor %}
{% else %}
<div class="card" style="text-align:center;padding:40px;color:var(--text3);">
<div style="font-size:32px;margin-bottom:8px;">📅</div>
<div>No upcoming events.</div>
</div>
{% endif %}
</div>
</div>
</div>
{% endwith %}
{% endblock %}

219
splitchat/core/templates/core/event_detail.html Normal file
View File

@@ -0,0 +1,219 @@
{% extends 'core/base.html' %}
{% block title %}{{ event.title }} – SplitChat{% endblock %}
{% block extra_css %}
<style>
.expense-row {
padding: 14px 0; border-bottom: 1px solid var(--border);
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.expense-row:last-child { border-bottom: none; }
.settlement-row {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px; background: var(--bg3);
border-radius: var(--radius-sm); margin-bottom: 8px;
font-size: 14px;
}
.balance-bar-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.balance-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--bg4); overflow: hidden; }
.balance-bar-fill { height: 100%; border-radius: 3px; transition: width .4s; }
.split-participant { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text2); margin-top: 4px; }
.modal-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.7);
display: flex; align-items: center; justify-content: center;
z-index: 500; padding: 20px;
}
.modal {
background: var(--bg2); border: 1px solid var(--border2);
border-radius: var(--radius); padding: 28px;
width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto;
box-shadow: var(--shadow-lg);
}
.modal h3 { font-size: 18px; font-weight: 700; margin-bottom: 20px; }
</style>
{% endblock %}
{% block content %}
{% with current_room=room %}
<div class="page-header">
<div>
<div class="flex-center gap-2" style="margin-bottom:6px;">
<a href="{% url 'room_detail' room_id=room.id %}" class="text-muted text-sm">#{{ room.name }}</a>
<span class="text-muted text-sm">/</span>
<span class="text-sm">Events</span>
</div>
<h1 class="page-title">{{ event.title }}</h1>
<div class="flex-center gap-3 text-sm text-muted mt-1">
{% if event.location %}<span>📍 {{ event.location }}</span>{% endif %}
{% if event.event_date %}<span>🗓 {{ event.event_date|date:"M j, Y · g:i A" }}</span>{% endif %}
<span>Created by {{ event.created_by.username }}</span>
{% if event.is_settled %}<span class="badge badge-green">✓ Settled</span>{% endif %}
</div>
{% if event.description %}<p class="text-sm text-muted" style="margin-top:8px;">{{ event.description }}</p>{% endif %}
</div>
<div class="flex gap-2">
{% if not event.is_settled %}
<button class="btn btn-secondary" onclick="document.getElementById('expenseModal').style.display='flex'">+ Add Expense</button>
<form method="post" action="{% url 'event_settle' room_id=room.id event_id=event.id %}" style="display:inline;">
{% csrf_token %}
<button type="submit" class="btn btn-success" onclick="return confirm('Mark this event as settled?')">✓ Settle Up</button>
</form>
{% endif %}
</div>
</div>
<div class="page-body">
<div style="display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start;">
<!-- LEFT: Expenses -->
<div>
<div class="card" style="margin-bottom:20px;">
<div class="flex-center" style="justify-content:space-between;margin-bottom:16px;">
<h2 style="font-size:16px;font-weight:700;">Expenses</h2>
<div style="font-size:22px;font-weight:700;">Total: ${{ event.total_amount|floatformat:2 }}</div>
</div>
{% if expenses %}
{% for expense in expenses %}
<div class="expense-row">
<div style="flex:1;">
<div style="font-weight:600;font-size:15px;">{{ expense.description }}</div>
<div class="text-sm text-muted">Paid by
<strong style="color:var(--text);">{{ expense.paid_by.username }}</strong>
· {{ expense.get_split_type_display }} split
</div>
<div style="margin-top:6px;">
{% for split in expense.splits.all %}
<div class="split-participant">
<div class="avatar avatar-sm" style="background:{% if split.user.profile %}{{ split.user.profile.avatar_color }}{% else %}#6366f1{% endif %};">
{% if split.user.profile %}{{ split.user.profile.get_avatar_initials }}{% else %}??{% endif %}
</div>
{% if split.user.profile %}{{ split.user.profile.name }}{% else %}{{ split.user.username }}{% endif %}
<span style="color:var(--text3);">– ${{ split.amount }}</span>
</div>
{% endfor %}
</div>
</div>
<div style="text-align:right;flex-shrink:0;">
<div style="font-size:20px;font-weight:700;">${{ expense.amount }}</div>
<div class="text-xs text-muted">{{ expense.created_at|date:"M j" }}</div>
</div>
</div>
{% endfor %}
{% else %}
<div style="text-align:center;padding:40px;color:var(--text3);">
<div style="font-size:36px;margin-bottom:8px;">💸</div>
<div>No expenses yet.</div>
{% if not event.is_settled %}
<button class="btn btn-primary btn-sm" style="margin-top:12px;" onclick="document.getElementById('expenseModal').style.display='flex'">Add first expense</button>
{% endif %}
</div>
{% endif %}
</div>
</div>
<!-- RIGHT: Balances & Settlement -->
<div>
<!-- Balances -->
<div class="card" style="margin-bottom:16px;">
<h3 style="font-size:15px;font-weight:700;margin-bottom:16px;">Balances</h3>
{% if balance_display %}
{% for item in balance_display %}
<div class="balance-bar-wrap">
<div class="avatar avatar-sm" style="background:{% if item.user.profile %}{{ item.user.profile.avatar_color }}{% else %}#6366f1{% endif %};">
{% if item.user.profile %}{{ item.user.profile.get_avatar_initials }}{% else %}??{% endif %}
</div>
<div style="flex:1;min-width:0;">
<div class="flex-center" style="justify-content:space-between;margin-bottom:4px;">
<span class="text-sm" style="font-weight:500;">{% if item.user.profile %}{{ item.user.profile.name }}{% else %}{{ item.user.username }}{% endif %}</span>
<span class="text-sm" style="color:{% if item.amount >= 0 %}var(--green){% else %}var(--red){% endif %};font-weight:600;">
{% if item.amount >= 0 %}+{% endif %}${{ item.amount|floatformat:2 }}
</span>
</div>
</div>
</div>
{% endfor %}
{% else %}
<div class="text-sm text-muted">No expenses to balance yet.</div>
{% endif %}
</div>
<!-- Settlements -->
<div class="card">
<h3 style="font-size:15px;font-weight:700;margin-bottom:16px;">Settlement Plan</h3>
{% if settlements %}
{% for debtor, creditor, amount in settlements %}
<div class="settlement-row">
<div class="avatar avatar-sm" style="background:{% if debtor.profile %}{{ debtor.profile.avatar_color }}{% else %}#6366f1{% endif %};">
{% if debtor.profile %}{{ debtor.profile.get_avatar_initials }}{% else %}??{% endif %}
</div>
<div style="flex:1;">
<strong>{% if debtor.profile %}{{ debtor.profile.name }}{% else %}{{ debtor.username }}{% endif %}</strong>
owes
<strong>{% if creditor.profile %}{{ creditor.profile.name }}{% else %}{{ creditor.username }}{% endif %}</strong>
</div>
<div style="font-weight:700;color:var(--amber);">${{ amount }}</div>
</div>
{% endfor %}
{% elif expenses %}
<div class="text-sm" style="color:var(--green);">✓ All squared up! No transfers needed.</div>
{% else %}
<div class="text-sm text-muted">Add expenses to see who owes whom.</div>
{% endif %}
</div>
</div>
</div>
</div>
<!-- ADD EXPENSE MODAL -->
<div class="modal-overlay" id="expenseModal" style="display:none;" onclick="if(event.target===this)this.style.display='none'">
<div class="modal">
<h3>Add Expense</h3>
<form method="post" action="{% url 'expense_create' room_id=room.id event_id=event.id %}">
{% csrf_token %}
{% for field in expense_form %}
{% if field.name == 'split_type' %}
<div class="form-group">
<label>{{ field.label }}</label>
<div class="flex gap-3" style="margin-top:4px;">
{% for choice in field %}
<label style="display:flex;align-items:center;gap:6px;cursor:pointer;margin-bottom:0;">
{{ choice.tag }} <span style="font-size:14px;color:var(--text);">{{ choice.choice_label }}</span>
</label>
{% endfor %}
</div>
</div>
{% elif field.name == 'participants' %}
<div class="form-group">
<label>{{ field.label }}</label>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px;">
{% for choice in field %}
<label style="display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--bg3);border-radius:var(--radius-sm);cursor:pointer;margin-bottom:0;font-size:14px;color:var(--text);">
{{ choice.tag }} {{ choice.choice_label }}
</label>
{% endfor %}
</div>
{% if field.errors %}<div class="error-list">{{ field.errors.0 }}</div>{% endif %}
</div>
{% else %}
<div class="form-group">
<label>{{ field.label }}</label>
{{ field }}
{% if field.errors %}<div class="error-list">{{ field.errors.0 }}</div>{% endif %}
</div>
{% endif %}
{% endfor %}
<div class="flex gap-2" style="margin-top:16px;">
<button type="submit" class="btn btn-primary">Add Expense</button>
<button type="button" class="btn btn-secondary" onclick="document.getElementById('expenseModal').style.display='none'">Cancel</button>
</div>
</form>
</div>
</div>
{% endwith %}
{% endblock %}

32
splitchat/core/templates/core/event_form.html Normal file
View File

@@ -0,0 +1,32 @@
{% extends 'core/base.html' %}
{% block title %}Create Event – SplitChat{% endblock %}
{% block content %}
{% with current_room=room %}
<div class="page-header">
<div>
<h1 class="page-title">Create Event</h1>
<p class="page-subtitle">in <a href="{% url 'room_detail' room_id=room.id %}">#{{ room.name }}</a></p>
</div>
</div>
<div class="page-body">
<div style="max-width:520px;">
<div class="card">
<form method="post">
{% csrf_token %}
{% for field in form %}
<div class="form-group">
<label>{{ field.label }}</label>
{{ field }}
{% if field.errors %}<div class="error-list">{{ field.errors.0 }}</div>{% endif %}
</div>
{% endfor %}
<div class="flex gap-2" style="margin-top:8px;">
<button type="submit" class="btn btn-primary">Create Event</button>
<a href="{% url 'room_detail' room_id=room.id %}" class="btn btn-secondary">Cancel</a>
</div>
</form>
</div>
</div>
</div>
{% endwith %}
{% endblock %}

326
splitchat/core/templates/core/room_detail.html Normal file
View File

@@ -0,0 +1,326 @@
{% extends 'core/base.html' %}
{% block title %}#{{ room.name }} – SplitChat{% endblock %}
{% block extra_css %}
<style>
.room-layout { display: flex; height: 100%; overflow: hidden; }
.chat-panel { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat-header {
padding: 16px 24px; border-bottom: 1px solid var(--border);
display: flex; align-items: center; justify-content: space-between;
background: var(--bg2); flex-shrink: 0;
}
.chat-messages {
flex: 1; overflow-y: auto; padding: 20px 24px;
display: flex; flex-direction: column; gap: 2px;
}
.chat-input-area {
padding: 16px 24px; border-top: 1px solid var(--border);
background: var(--bg2); flex-shrink: 0;
}
.chat-input-row { display: flex; gap: 10px; align-items: flex-end; }
.chat-input-row textarea {
flex: 1; resize: none; min-height: 42px; max-height: 120px;
padding: 10px 14px; line-height: 1.4;
}
.send-btn {
width: 42px; height: 42px; border-radius: var(--radius-sm);
background: var(--accent); border: none; cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 18px; flex-shrink: 0; transition: all .15s;
}
.send-btn:hover { background: var(--accent2); transform: scale(1.05); }
.msg-row { display: flex; gap: 10px; padding: 3px 0; }
.msg-row.own { flex-direction: row-reverse; }
.msg-bubble {
max-width: 72%; padding: 9px 14px;
border-radius: 16px; font-size: 14px; line-height: 1.5;
word-break: break-word;
}
.msg-bubble.other { background: var(--bg3); border-radius: 4px 16px 16px 16px; }
.msg-bubble.own { background: var(--accent); color: #fff; border-radius: 16px 4px 16px 16px; }
.msg-bubble.system {
background: transparent; color: var(--text3); font-size: 12px;
font-style: italic; text-align: center; max-width: 100%; padding: 4px 0;
}
.msg-meta { font-size: 11px; color: var(--text3); margin-top: 2px; }
.msg-sender { font-size: 12px; font-weight: 600; color: var(--text2); margin-bottom: 2px; }
/* Right panel */
.room-sidebar {
width: 280px; flex-shrink: 0;
border-left: 1px solid var(--border);
background: var(--bg2);
display: flex; flex-direction: column;
overflow-y: auto;
}
.panel-section { padding: 16px; border-bottom: 1px solid var(--border); }
.panel-title { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--text3); margin-bottom: 12px; font-weight: 600; }
.member-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.member-name { font-size: 13px; font-weight: 500; }
.event-card {
padding: 10px 12px; background: var(--bg3);
border-radius: var(--radius-sm); margin-bottom: 8px;
border: 1px solid var(--border); transition: all .15s;
text-decoration: none; display: block; color: inherit;
}
.event-card:hover { border-color: var(--accent); color: inherit; }
.event-title { font-size: 13px; font-weight: 600; }
.event-meta { font-size: 11px; color: var(--text3); margin-top: 3px; }
.invite-box {
background: var(--bg3); border-radius: var(--radius-sm);
padding: 10px 12px; display: flex; align-items: center; gap: 8px;
}
.invite-code {
font-family: var(--mono); font-size: 15px; font-weight: 600;
letter-spacing: .12em; color: var(--accent2); flex: 1;
}
/* Online indicator */
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
/* Typing indicator */
.typing-indicator { font-size: 12px; color: var(--text3); min-height: 18px; padding: 0 24px 4px; }
</style>
{% endblock %}
{% block content %}
{% with current_room=room %}
<div class="room-layout" style="height:100vh;">
<!-- CHAT PANEL -->
<div class="chat-panel">
<div class="chat-header">
<div class="flex-center gap-3">
<div style="font-size:20px;">#</div>
<div>
<div style="font-weight:700;font-size:16px;">{{ room.name }}</div>
{% if room.description %}<div class="text-xs text-muted">{{ room.description }}</div>{% endif %}
</div>
</div>
<div class="flex-center gap-2">
<span class="badge badge-accent">{{ members.count }} member{{ members.count|pluralize }}</span>
<a href="{% url 'event_create' room_id=room.id %}" class="btn btn-primary btn-sm">+ Event</a>
</div>
</div>
<div class="chat-messages" id="chatMessages">
{% for msg in messages %}
{% if msg.msg_type == 'system' or msg.msg_type == 'event' or msg.msg_type == 'expense' %}
<div class="msg-row" style="justify-content:center;">
<div class="msg-bubble system">{{ msg.content }}</div>
</div>
{% else %}
<div class="msg-row {% if msg.sender == user %}own{% endif %}" data-msg-id="{{ msg.id }}">
{% if msg.sender != user %}
<div class="avatar avatar-sm" style="background:{% if msg.sender.profile %}{{ msg.sender.profile.avatar_color }}{% else %}#6366f1{% endif %};margin-top:4px;">
{% if msg.sender.profile %}{{ msg.sender.profile.get_avatar_initials }}{% else %}?{% endif %}
</div>
{% endif %}
<div>
{% if msg.sender != user %}
<div class="msg-sender">{% if msg.sender.profile %}{{ msg.sender.profile.name }}{% else %}{{ msg.sender.username }}{% endif %}</div>
{% endif %}
<div class="msg-bubble {% if msg.sender == user %}own{% else %}other{% endif %}">{{ msg.content }}</div>
<div class="msg-meta {% if msg.sender == user %}" style="text-align:right{% endif %}">{{ msg.created_at|time:"H:i" }}</div>
</div>
</div>
{% endif %}
{% empty %}
<div style="text-align:center;color:var(--text3);margin:auto;padding:40px 0;">
<div style="font-size:40px;margin-bottom:8px;">👋</div>
<div>No messages yet. Say hello!</div>
</div>
{% endfor %}
<div id="messagesEnd"></div>
</div>
<div class="typing-indicator" id="typingIndicator"></div>
<div class="chat-input-area">
<div class="chat-input-row">
<textarea id="messageInput" placeholder="Message #{{ room.name }}..." rows="1"></textarea>
<button class="send-btn" id="sendBtn" title="Send (Enter)">➤</button>
</div>
<div class="text-xs text-muted" style="margin-top:6px;">Press <kbd style="background:var(--bg4);padding:1px 5px;border-radius:3px;">Enter</kbd> to send · <kbd style="background:var(--bg4);padding:1px 5px;border-radius:3px;">Shift+Enter</kbd> for newline</div>
</div>
</div>
<!-- RIGHT SIDEBAR -->
<div class="room-sidebar">
<!-- Invite Code -->
<div class="panel-section">
<div class="panel-title">Invite Code</div>
<div class="invite-box">
<span class="invite-code" id="inviteCode">{{ room.invite_code }}</span>
<button class="btn btn-ghost btn-sm" onclick="copyInvite()" id="copyBtn" title="Copy">⧉</button>
</div>
<div class="text-xs text-muted mt-2">Share this code to let others join</div>
</div>
<!-- Events -->
<div class="panel-section">
<div class="flex-center" style="justify-content:space-between;margin-bottom:12px;">
<div class="panel-title" style="margin-bottom:0;">Events</div>
<a href="{% url 'event_create' room_id=room.id %}" class="btn btn-ghost btn-sm">+ Add</a>
</div>
<div id="eventsList">
{% for event in events %}
<a href="{% url 'event_detail' room_id=room.id event_id=event.id %}" class="event-card">
<div class="flex-center" style="justify-content:space-between;">
<div class="event-title">{{ event.title }}</div>
{% if event.is_settled %}<span class="badge badge-green" style="font-size:10px;">✓</span>{% endif %}
</div>
<div class="event-meta">
${{ event.total_amount|floatformat:2 }}
{% if event.event_date %} · {{ event.event_date|date:"M j" }}{% endif %}
{% if event.location %} · 📍{{ event.location }}{% endif %}
</div>
</a>
{% empty %}
<div class="text-xs text-muted" style="padding:8px 0;">No events yet. Create one!</div>
{% endfor %}
</div>
</div>
<!-- Members -->
<div class="panel-section">
<div class="panel-title">Members ({{ members.count }})</div>
{% for member in members %}
<div class="member-row">
<div class="avatar avatar-sm" style="background:{% if member.profile %}{{ member.profile.avatar_color }}{% else %}#6366f1{% endif %};">
{% if member.profile %}{{ member.profile.get_avatar_initials }}{% else %}{{ member.username|slice:":2"|upper }}{% endif %}
</div>
<div>
<div class="member-name">{% if member.profile %}{{ member.profile.name }}{% else %}{{ member.username }}{% endif %}</div>
<div class="text-xs text-muted">@{{ member.username }}</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
{% endwith %}
{% endblock %}
{% block extra_js %}
<script>
const ROOM_ID = "{{ room.id }}";
const CURRENT_USER = "{{ user.username }}";
const DISPLAY_NAME = "{{ profile.name }}";
const AVATAR_COLOR = "{{ profile.avatar_color }}";
const INITIALS = "{{ profile.get_avatar_initials }}";
// ── WebSocket ──
const wsScheme = window.location.protocol === 'https:' ? 'wss' : 'ws';
const wsUrl = `${wsScheme}://${window.location.host}/ws/chat/${ROOM_ID}/`;
let socket = null;
function connectWS() {
socket = new WebSocket(wsUrl);
socket.onopen = () => console.log('WS connected');
socket.onclose = () => { console.log('WS closed, reconnecting…'); setTimeout(connectWS, 2000); };
socket.onerror = (e) => console.error('WS error', e);
socket.onmessage = (e) => handleMessage(JSON.parse(e.data));
}
function handleMessage(data) {
switch(data.type) {
case 'chat_message':
appendMessage(data);
break;
case 'user_join':
appendSystem(`${data.display_name} joined the room`);
break;
case 'user_leave':
appendSystem(`${data.display_name} left the room`);
break;
case 'room_update':
if (data.update_type === 'new_event') {
appendSystem(`📅 New event: ${data.event_title} (by ${data.created_by})`);
// Refresh event list
setTimeout(() => location.reload(), 1200);
} else if (data.update_type === 'new_expense') {
appendSystem(`💸 ${data.paid_by} added $${data.amount} – ${data.expense_description}`);
}
break;
}
}
function appendMessage(data) {
const container = document.getElementById('chatMessages');
const isOwn = data.sender === CURRENT_USER;
const div = document.createElement('div');
div.className = `msg-row${isOwn ? ' own' : ''}`;
div.innerHTML = `
${!isOwn ? `<div class="avatar avatar-sm" style="background:${data.avatar_color};margin-top:4px;">${data.initials}</div>` : ''}
<div>
${!isOwn ? `<div class="msg-sender">${data.display_name}</div>` : ''}
<div class="msg-bubble ${isOwn ? 'own' : 'other'}">${escapeHtml(data.content)}</div>
<div class="msg-meta" ${isOwn ? 'style="text-align:right"' : ''}>${data.timestamp}</div>
</div>
`;
container.insertBefore(div, document.getElementById('messagesEnd'));
scrollToBottom();
}
function appendSystem(text) {
const container = document.getElementById('chatMessages');
const div = document.createElement('div');
div.className = 'msg-row';
div.style.justifyContent = 'center';
div.innerHTML = `<div class="msg-bubble system">${escapeHtml(text)}</div>`;
container.insertBefore(div, document.getElementById('messagesEnd'));
scrollToBottom();
}
function sendMessage() {
const input = document.getElementById('messageInput');
const content = input.value.trim();
if (!content || !socket || socket.readyState !== WebSocket.OPEN) return;
socket.send(JSON.stringify({ type: 'chat_message', content }));
input.value = '';
input.style.height = 'auto';
}
function scrollToBottom() {
const container = document.getElementById('chatMessages');
container.scrollTop = container.scrollHeight;
}
function escapeHtml(str) {
return str.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/\n/g,'<br>');
}
function copyInvite() {
navigator.clipboard.writeText('{{ room.invite_code }}');
const btn = document.getElementById('copyBtn');
btn.textContent = '✓';
setTimeout(() => btn.textContent = '⧉', 1500);
}
// ── Event Listeners ──
document.getElementById('sendBtn').addEventListener('click', sendMessage);
document.getElementById('messageInput').addEventListener('keydown', (e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
sendMessage();
}
});
// Auto-resize textarea
document.getElementById('messageInput').addEventListener('input', function() {
this.style.height = 'auto';
this.style.height = Math.min(this.scrollHeight, 120) + 'px';
});
// Init
connectWS();
scrollToBottom();
</script>
{% endblock %}

25
splitchat/core/templates/core/room_form.html Normal file
View File

@@ -0,0 +1,25 @@
{% extends 'core/base.html' %}
{% block title %}{{ action }} Room – SplitChat{% endblock %}
{% block content %}
<div class="page-header"><div><h1 class="page-title">{{ action }} Room</h1></div></div>
<div class="page-body">
<div style="max-width:480px;">
<div class="card">
<form method="post">
{% csrf_token %}
{% for field in form %}
<div class="form-group">
<label>{{ field.label }}</label>
{{ field }}
{% if field.errors %}<div class="error-list">{{ field.errors.0 }}</div>{% endif %}
</div>
{% endfor %}
<div class="flex gap-2" style="margin-top:8px;">
<button type="submit" class="btn btn-primary">{{ action }} Room</button>
<a href="{% url 'dashboard' %}" class="btn btn-secondary">Cancel</a>
</div>
</form>
</div>
</div>
</div>
{% endblock %}

23
splitchat/core/templates/core/room_join.html Normal file
View File

@@ -0,0 +1,23 @@
{% extends 'core/base.html' %}
{% block title %}Join Room – SplitChat{% endblock %}
{% block content %}
<div class="page-header"><div><h1 class="page-title">Join a Room</h1></div></div>
<div class="page-body">
<div style="max-width:400px;">
<div class="card">
<p class="text-muted text-sm" style="margin-bottom:20px;">Enter an invite code to join an existing room.</p>
<form method="post">
{% csrf_token %}
<div class="form-group">
<label>Invite Code</label>
<input type="text" name="invite_code" placeholder="e.g. AB3F9E21" style="font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;" required>
</div>
<div class="flex gap-2">
<button type="submit" class="btn btn-primary">Join Room</button>
<a href="{% url 'dashboard' %}" class="btn btn-secondary">Cancel</a>
</div>
</form>
</div>
</div>
</div>
{% endblock %}