From 9b166546609cfe1a727d649637756dd85efaa2c5 Mon Sep 17 00:00:00 2001 From: Igor Barcik Date: Tue, 28 Apr 2026 12:36:39 +0200 Subject: [PATCH] feat(chat): add HTML templates --- chat/templates/chat/404.html | 12 ++ chat/templates/chat/500.html | 12 ++ chat/templates/chat/admin_panel.html | 62 ++++++ chat/templates/chat/base.html | 251 ++++++++++++++++++++++++ chat/templates/chat/channel.html | 200 +++++++++++++++++++ chat/templates/chat/create_channel.html | 25 +++ chat/templates/chat/dm.html | 151 ++++++++++++++ chat/templates/chat/home.html | 76 +++++++ chat/templates/chat/login.html | 28 +++ chat/templates/chat/profile.html | 37 ++++ chat/templates/chat/register.html | 35 ++++ 11 files changed, 889 insertions(+) create mode 100644 chat/templates/chat/404.html create mode 100644 chat/templates/chat/500.html create mode 100644 chat/templates/chat/admin_panel.html create mode 100644 chat/templates/chat/base.html create mode 100644 chat/templates/chat/channel.html create mode 100644 chat/templates/chat/create_channel.html create mode 100644 chat/templates/chat/dm.html create mode 100644 chat/templates/chat/home.html create mode 100644 chat/templates/chat/login.html create mode 100644 chat/templates/chat/profile.html create mode 100644 chat/templates/chat/register.html diff --git a/chat/templates/chat/404.html b/chat/templates/chat/404.html new file mode 100644 index 0000000..189385a --- /dev/null +++ b/chat/templates/chat/404.html @@ -0,0 +1,12 @@ +{% extends 'chat/base.html' %} +{% block title %}404 โ€” DiscordClone{% endblock %} +{% block body %} +
+
+
๐Ÿ˜ต
+

404

+

That page doesn't exist.

+ Take me home +
+
+{% endblock %} diff --git a/chat/templates/chat/500.html b/chat/templates/chat/500.html new file mode 100644 index 0000000..9a6cf8a --- /dev/null +++ b/chat/templates/chat/500.html @@ -0,0 +1,12 @@ +{% extends 'chat/base.html' %} +{% block title %}500 โ€” DiscordClone{% endblock %} +{% block body %} +
+
+
๐Ÿ’ฅ
+

500

+

Server error. Something broke.

+ Take me home +
+
+{% endblock %} diff --git a/chat/templates/chat/admin_panel.html b/chat/templates/chat/admin_panel.html new file mode 100644 index 0000000..df3c464 --- /dev/null +++ b/chat/templates/chat/admin_panel.html @@ -0,0 +1,62 @@ +{% extends 'chat/base.html' %} +{% block title %}Admin Panel โ€” DiscordClone{% endblock %} +{% block body %} +
+
+
+
+

Admin Panel

+ โ† Back +
+ {% if messages %} + {% for msg in messages %} +
{{ msg }}
+ {% endfor %} + {% endif %} + + + + + + + + + + + {% for u in users %} + + + + + + + {% empty %} + + {% endfor %} + +
UserEmailRoleActions
+ {% if u.profile.avatar %}{% endif %} + {{ u.username }} + {% if u.id in blocked_ids %}blocked{% endif %} + {{ u.email }}{{ u.profile.role }} +
+ {% csrf_token %} + + + + + {% if u.id in blocked_ids %} + + {% else %} + + {% endif %} +
+
No other users.
+
+
+
+{% endblock %} diff --git a/chat/templates/chat/base.html b/chat/templates/chat/base.html new file mode 100644 index 0000000..f58ac0c --- /dev/null +++ b/chat/templates/chat/base.html @@ -0,0 +1,251 @@ + + + + + + {% block title %}DiscordClone{% endblock %} + + + + + +{% block body %}{% endblock %} + +{% block scripts %}{% endblock %} + + diff --git a/chat/templates/chat/channel.html b/chat/templates/chat/channel.html new file mode 100644 index 0000000..badf544 --- /dev/null +++ b/chat/templates/chat/channel.html @@ -0,0 +1,200 @@ +{% extends 'chat/base.html' %} +{% block title %}#{{ channel.name }} โ€” DiscordClone{% endblock %} +{% block body %} +{% with profile=request.user.profile %} +
+ +
+
DiscordClone
+
+
Channels + {% if profile.is_moderator %}{% endif %} +
+ {% for ch in all_channels %} + + {{ ch.name }} + + {% endfor %} +
+
+
+ {% if profile.avatar %}av{% else %}{{ request.user.username|first|upper }}{% endif %} +
+
+
{{ request.user.username }}
+ {{ profile.role }} +
+ + {% if profile.is_admin %}{% endif %} + +
+
+ + +
+
+ + {{ channel.name }} + {% if channel.description %}โ€” {{ channel.description }}{% endif %} + {{ channel.members.count }} members +
+ +
+ {% for msg in messages %} + {% if not msg.deleted %} +
+
+ {% if msg.sender.profile.avatar %}av{% else %}{{ msg.sender.username|first|upper }}{% endif %} +
+
+
+ + {{ msg.sender.username }} + + {{ msg.sender.profile.role|slice:":3" }} + {{ msg.timestamp|date:"H:i" }} +
+ {% if profile.is_moderator or msg.sender == request.user %} + + {% endif %} +
+
+ {% if msg.content %}
{{ msg.content }}
{% endif %} + {% if msg.file %} +
+ {% if msg.file.url|slice:"-4:" in ".jpg .png .gif .web" or msg.file.name|lower|slice:"-4:" in ".jpg,.png,.gif,.web" %} + image + {% elif ".mp3" in msg.file.name or ".wav" in msg.file.name or ".ogg" in msg.file.name %} + + {% else %} + {{ msg.file.name|slice:"8:" }} + {% endif %} +
+ {% endif %} +
+
+ {% endif %} + {% endfor %} +
+ + +
+
+ {% csrf_token %} +
+ + + +
+
+
+ + +
+
+ + + +
+
+
+ + +
+
Members โ€” {{ channel.members.count }}
+
+ {% for member in channel.members.all %} +
+ + {{ member.username }} + {{ member.profile.role|slice:":3" }} +
+ {% endfor %} +
+
+
+{% endwith %} +{% endblock %} + +{% block scripts %} + +{% endblock %} diff --git a/chat/templates/chat/create_channel.html b/chat/templates/chat/create_channel.html new file mode 100644 index 0000000..5602bab --- /dev/null +++ b/chat/templates/chat/create_channel.html @@ -0,0 +1,25 @@ +{% extends 'chat/base.html' %} +{% block title %}Create Channel โ€” DiscordClone{% endblock %} +{% block body %} +
+
+

Create Channel

+

Start a new conversation space.

+
+ {% csrf_token %} +
+ + +
+
+ + +
+
+ + Cancel +
+
+
+
+{% endblock %} diff --git a/chat/templates/chat/dm.html b/chat/templates/chat/dm.html new file mode 100644 index 0000000..406241a --- /dev/null +++ b/chat/templates/chat/dm.html @@ -0,0 +1,151 @@ +{% extends 'chat/base.html' %} +{% block title %}DM โ€” {{ other.username }} โ€” DiscordClone{% endblock %} +{% block body %} +{% with profile=request.user.profile %} +
+ +
+
DiscordClone
+
+
Direct Messages
+ {% for u in all_users %} + + + {{ u.username }} + + {% endfor %} +
+
+
+ {% if profile.avatar %}av{% else %}{{ request.user.username|first|upper }}{% endif %} +
+
{{ request.user.username }}
+ +
+
+ + +
+
+ + {{ other.username }} + {% if other.profile.online %}{% endif %} +
+ +
+ {% for msg in messages %} +
+
+ {% if msg.sender.profile.avatar %}av{% else %}{{ msg.sender.username|first|upper }}{% endif %} +
+
+
+ {{ msg.sender.username }} + {{ msg.timestamp|date:"H:i" }} +
+ {% if msg.content %}
{{ msg.content }}
{% endif %} + {% if msg.file %} +
+ {% if ".jpg" in msg.file.name or ".png" in msg.file.name or ".gif" in msg.file.name or ".webp" in msg.file.name %} + image + {% elif ".mp3" in msg.file.name or ".wav" in msg.file.name or ".ogg" in msg.file.name %} + + {% else %} + {{ msg.file.name|slice:"11:" }} + {% endif %} +
+ {% endif %} +
+
+ {% endfor %} +
+ + +
+
+ {% csrf_token %} +
+ + + +
+
+
+ +
+
+ + +
+
+
+
+{% endwith %} +{% endblock %} + +{% block scripts %} + +{% endblock %} diff --git a/chat/templates/chat/home.html b/chat/templates/chat/home.html new file mode 100644 index 0000000..11ffd91 --- /dev/null +++ b/chat/templates/chat/home.html @@ -0,0 +1,76 @@ +{% extends 'chat/base.html' %} +{% block title %}Home โ€” DiscordClone{% endblock %} +{% block body %} +{% with profile=request.user.profile %} +
+ +
+
+ DiscordClone +
+
+
+ Channels + {% if profile.is_moderator %} + + {% endif %} +
+ {% for ch in channels %} + + + {{ ch.name }} + {% if profile.is_admin %} + + {% endif %} + + {% empty %} +
No channels yet.
+ {% endfor %} + +
Direct Messages
+ {% for u in users %} + + + {{ u.username }} + {{ u.profile.role|slice:":3" }} + + {% endfor %} +
+ + +
+
+ {% if profile.avatar %} + av + {% else %} + {{ request.user.username|first|upper }} + {% endif %} +
+
+
{{ request.user.username }}
+
{{ profile.role }}
+
+ + {% if profile.is_admin %} + + {% endif %} + +
+
+ + +
+
+
๐Ÿ‘พ
+

Welcome, {{ request.user.username }}!

+

Pick a channel or DM from the sidebar.

+ {% if messages %} + {% for msg in messages %} +
{{ msg }}
+ {% endfor %} + {% endif %} +
+
+
+{% endwith %} +{% endblock %} diff --git a/chat/templates/chat/login.html b/chat/templates/chat/login.html new file mode 100644 index 0000000..0c17684 --- /dev/null +++ b/chat/templates/chat/login.html @@ -0,0 +1,28 @@ +{% extends 'chat/base.html' %} +{% block title %}Login โ€” DiscordClone{% endblock %} +{% block body %} +
+
+

๐Ÿ‘พ DiscordClone

+

Welcome back! Sign in to continue.

+ {% if error %} +
{{ error }}
+ {% endif %} +
+ {% csrf_token %} +
+ + +
+
+ + +
+ +
+

+ No account? Register +

+
+
+{% endblock %} diff --git a/chat/templates/chat/profile.html b/chat/templates/chat/profile.html new file mode 100644 index 0000000..81c137e --- /dev/null +++ b/chat/templates/chat/profile.html @@ -0,0 +1,37 @@ +{% extends 'chat/base.html' %} +{% block title %}Profile โ€” DiscordClone{% endblock %} +{% block body %} +
+
+

Edit Profile

+

{{ request.user.username }} ยท {{ request.user.profile.role }}

+ {% if messages %} + {% for msg in messages %} +
{{ msg }}
+ {% endfor %} + {% endif %} +
+ {% csrf_token %} +
+ {% if request.user.profile.avatar %} + av + {% else %} +
{{ request.user.username|first|upper }}
+ {% endif %} +
+
+ + +
+
+ + +
+
+ + Back +
+
+
+
+{% endblock %} diff --git a/chat/templates/chat/register.html b/chat/templates/chat/register.html new file mode 100644 index 0000000..fde3d35 --- /dev/null +++ b/chat/templates/chat/register.html @@ -0,0 +1,35 @@ +{% extends 'chat/base.html' %} +{% block title %}Register โ€” DiscordClone{% endblock %} +{% block body %} +
+
+

Create Account

+

Join the server.

+ {% if form.errors %} +
+ {% for field in form %}{% for e in field.errors %}
{{ e }}
{% endfor %}{% endfor %} + {% for e in form.non_field_errors %}
{{ e }}
{% endfor %} +
+ {% endif %} +
+ {% csrf_token %} +
+ + +
+
+ + +
+
+ + +
+ +
+

+ Have account? Login +

+
+
+{% endblock %}