up3

.gitignore

@@ -0,0 +1,53 @@
+# Ignore virtual environment
+venv/
+venv/*
+
+env/
+env/*
+
+.env
+
+# Python bytecode
+*.py[cod]
+__pycache__/
+
+# Django stuff
+*.log
+*.pot
+*.pyc
+*.pyo
+*.pyd
+*.sqlite3
+db.sqlite3
+
+# Migrations
+*/migrations/*.py
+*/migrations/*.pyc
+
+# Environment variables
+# .env
+
+
+# Static and media files (if not managed by version control)
+# staticfiles/
+# media/
+
+# Ignore coverage and testing files
+htmlcov/
+.coverage
+.tox/
+nosetests.xml
+coverage.xml
+*.cover
+*.log
+*.pid
+*.seed
+*.manifest
+*.lock
+
+# Ignore IDE/editor settings
+# .vscode/
+.idea/
+*.swp
+*.swo
+*.swn

.vscode/launch.json

@@ -0,0 +1,16 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+      {
+        "name": "Run Daphne Server",
+        "type": "debugpy",
+        "request": "launch",
+        "program": "${workspaceFolder}/venv/Scripts/daphne.exe",  // Adjusted path for Windows
+        "args": [
+          "devnoms.asgi:application"
+        ],
+        "console": "integratedTerminal"
+      }
+    ]
+  }
+  

Dockerfile

@@ -0,0 +1,25 @@
+FROM python:3.13.5-slim
+
+# Create non-root user (HF requirement)
+RUN useradd -m -u 1000 user
+
+# Set work directory
+WORKDIR /home/user/app
+
+# Copy requirements first (better cache)
+COPY requirements.txt .
+
+# Install dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy project files
+COPY . .
+
+# Switch to non-root user
+USER user
+
+# Expose HF port
+EXPOSE 7860
+
+# Run Django with Gunicorn (PRODUCTION SAFE)
+CMD ["daphne", "devnoms.asgi:application", "--bind", "0.0.0.0","--port" , "7860"]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Dev Namdev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -4,6 +4,7 @@ emoji: 🏢
 colorFrom: purple
 colorTo: red
 sdk: docker
+app_port: 7860
 pinned: false
 ---
 

chat/admin.py

@@ -0,0 +1,44 @@
+from django.contrib import admin
+from .models import UserRelation
+from django.contrib import admin
+from django.contrib.auth.admin import UserAdmin
+from django.contrib.auth.models import User
+from .models import Messages
+
+
+class MessagesAdmin(admin.ModelAdmin):
+    list_display = ("sender_name", "receiver_name", "id" , "seen", "description")
+    list_filter = ("sender_name", "receiver_name", "seen")
+    search_fields = ("sender_name__username", "receiver_name__username", "description")
+
+
+admin.site.register(Messages, MessagesAdmin)
+
+
+# Define a custom admin class for the User model
+class CustomUserAdmin(UserAdmin):
+    list_display = (
+        "id",
+        "username",
+        "email",
+        "first_name",
+        "last_name",
+        "is_staff",
+        "date_joined",
+    )
+
+
+# Unregister the default UserAdmin
+admin.site.unregister(User)
+
+# Register the User model with the custom admin class
+admin.site.register(User, CustomUserAdmin)
+
+
+class UserRelationAdmin(admin.ModelAdmin):
+    list_display = ("id", "user", "friend", "accepted", "relation_key")
+    list_filter = ("user", "accepted")
+    search_fields = ("user__username", "friend")
+
+
+admin.site.register(UserRelation, UserRelationAdmin)

chat/apps.py

@@ -0,0 +1,5 @@
+from django.apps import AppConfig
+
+
+class chatConfig(AppConfig):
+    name = 'chat'

chat/consumers.py

@@ -0,0 +1,71 @@
+import json
+from channels.generic.websocket import AsyncWebsocketConsumer
+
+from django.utils import timezone
+from channels.db import database_sync_to_async
+
+# Define an async function to save the message to the database
+@database_sync_to_async
+def save_message(sender_name, receiver_name, message):
+    from django.contrib.auth.models import User
+    from chat.models import Messages
+    # Get User instances for sender and receiver
+    sender = User.objects.get(username=sender_name)
+    receiver = User.objects.get(username=receiver_name)
+
+    # Create a new message
+    new_message = Messages(
+        description=message,
+        sender_name=sender,
+        receiver_name=receiver,
+        time=timezone.now().time(),  # Store the current time
+        timestamp=timezone.now(),   # Store the timestamp
+        seen=True
+    )
+    new_message.save()
+class ChatConsumer(AsyncWebsocketConsumer):
+    async def connect(self):
+        self.room_name = self.scope['url_route']['kwargs']['room_name']
+        self.room_group_name = f'chat_{self.room_name}'
+        # print(self.room_name, self.room_group_name)
+        # Join room group
+        await self.channel_layer.group_add(
+            self.room_group_name,
+            self.channel_name
+        )
+        await self.accept()
+
+    async def disconnect(self, close_code):
+        # Leave room group
+        await self.channel_layer.group_discard(
+            self.room_group_name,
+            self.channel_name
+        )
+
+    # Receive message from WebSocket
+    async def receive(self, text_data):
+        text_data_json = json.loads(text_data)
+        message = text_data_json['message']
+        sender_name = text_data_json['sender_name']
+        receiver_name = text_data_json['receiver_name']
+        await save_message(sender_name, receiver_name, message)
+        # Send message to room group
+        await self.channel_layer.group_send(
+            self.room_group_name,
+            {
+                'type': 'chat_message',
+                'message': message,
+                'sender': sender_name
+            }
+        )
+
+    # Receive message from room group
+    async def chat_message(self, event):
+        message = event['message']
+        sender = event['sender']
+
+        # Send message to WebSocket
+        await self.send(text_data=json.dumps({
+            'message': message,
+            'sender': sender
+        }))

chat/models.py

@@ -0,0 +1,32 @@
+from django.db import models
+from django.contrib.auth.models import User
+from django.utils import timezone
+
+
+class UserRelation(models.Model):
+    user = models.ForeignKey(
+        User, on_delete=models.CASCADE, related_name="user_relations"
+    )
+    friend = models.ForeignKey(
+        User, on_delete=models.CASCADE, related_name="friend_relations", default=None
+    )
+    accepted = models.BooleanField(default=False)
+    relation_key = models.CharField(max_length=255, blank=True, null=True)  # Add relation_key field
+    def __str__(self):
+        return f"{self.user.username} - {self.friend.username}"
+
+
+class Messages(models.Model):
+    description = models.TextField()
+    sender_name = models.ForeignKey(
+        User, on_delete=models.CASCADE, related_name="sender"
+    )
+    receiver_name = models.ForeignKey(
+        User, on_delete=models.CASCADE, related_name="receiver"
+    )
+    time = models.TimeField(auto_now_add=True)
+    seen = models.BooleanField(default=False)
+    timestamp = models.DateTimeField(default=timezone.now, blank=True)
+
+    class Meta:
+        ordering = ("timestamp",)

chat/routing.py

@@ -0,0 +1,6 @@
+from django.urls import path
+from . import consumers
+
+websocket_urlpatterns = [
+    path('ws/chat/<str:room_name>/', consumers.ChatConsumer.as_asgi()),
+]

chat/serializers.py

@@ -0,0 +1,14 @@
+from rest_framework import serializers
+from .models import Messages
+from django.contrib.auth.models import User
+
+
+
+class MessageSerializer(serializers.ModelSerializer):
+
+    sender_name = serializers.SlugRelatedField(many=False, slug_field='username', queryset=User.objects.all())
+    receiver_name = serializers.SlugRelatedField(many=False, slug_field='username', queryset=User.objects.all())
+
+    class Meta:
+        model = Messages
+        fields = ['sender_name', 'receiver_name', 'description', 'time']

chat/static/chat/css/base.css

@@ -0,0 +1,127 @@
+::-webkit-scrollbar {
+    width: 5px;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-thumb);
+    border-radius: 50px;
+}
+
+::-webkit-scrollbar-track {
+    background-color: var(--scrollbar-track);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
+}
+
+html,
+body {
+    font-family: 'Roboto', sans-serif;
+    background: var(--bg-gradient);
+    color: var(--text-color);
+    min-height: 100%;
+    animation: gradientMove var(--gradient-speed) infinite;
+}
+
+.main_box {
+    display: flex;
+    justify-content: center;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    max-width: 450px;
+    background-color: var(--menu-bg);
+    padding: 15px;
+    box-shadow: 0 2px 8px var(--shadow-color);
+    position: relative;
+}
+
+.header h1 {
+    color: var(--text-color);
+    font-size: 18px;
+    text-align: center;
+    flex: 1;
+    margin: 0;
+}
+
+.header button {
+    background: transparent;
+    border: none;
+    color: var(--text-color);
+    cursor: pointer;
+}
+
+.header button img {
+    width: 24px;
+    height: 24px;
+    filter: var(--icon-color);
+}
+
+.menu {
+    position: relative;
+}
+
+.menu button {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    right: 0;
+    top: 40px;
+    background-color: var(--menu-bg);
+    min-width: 160px;
+    box-shadow: 0 8px 16px var(--shadow-color);
+    z-index: 1;
+    border-radius: 5px;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.dropdown-content a {
+    color: var(--text-color);
+    padding: 10px 15px;
+    text-decoration: none;
+    border-radius: 5px;
+    display: block;
+    font-size: 16px;
+}
+
+.dropdown-content a:hover {
+    background-color: var(--highlight-color);
+    border-radius: 5px;
+    color: var(--bg-color);
+}
+
+.dropdown-content.show {
+    display: block;
+    border-radius: 5px;
+    opacity: 1;
+}
+
+.btn {
+    background: var(--btn-bg);
+    color: var(--btn-text-color);
+    padding: 6px 15px;
+    border: none;
+    border-radius: 20px;
+    cursor: pointer;
+    font-size: 14px;
+    transition: background 0.3s ease, transform 0.2s ease;
+}
+
+.btn:hover {
+    background: var(--btn-bg-hover);
+    transform: scale(1.02);
+}

chat/static/chat/css/chat.css

@@ -0,0 +1,271 @@
+:root {
+    --theme-color: #8f91ea;
+    --timestamp-color: #b5b5b5;
+    --status-online: #28a745;
+    --status-offline: #888888;
+    --bg-gradient: linear-gradient(135deg, #121212, #1c1c1c);
+    --bg-color: #121212;
+    --text-color: #f5f5f5;
+    --menu-bg: #1c1c1c;
+    --menu-text-color: #8f91ea;
+    --shadow-color: rgba(0, 0, 0, 0.5);
+    --icon-color: invert(100%);
+    --highlight-color: #8f91ea;
+    --friend-item-hover: #2b2b2b;
+    --btn-text-color: #ffffff;
+    --btn-bg: linear-gradient(135deg, #6a75c9, #5a67c8);
+    --btn-bg-hover: linear-gradient(135deg, #5a67c8, #4854c8);
+    --btn-bg-danger: linear-gradient(135deg, #e57373, #c0392b);
+    --btn-bg-danger-hover: linear-gradient(135deg, #c0392b, #96281b);
+    --scrollbar-thumb: #444444;
+    --scrollbar-track: #1c1c1c;
+    --bg-slider-color: rgba(143, 145, 234, 0.1);
+    --switch-slider: #555555;
+    --switch-slider-before: #ffffff;
+    --switch-slider-checked: #8f91ea;
+}
+
+[data-theme='light'] {
+    --theme-color: #8f91ea;
+    --timestamp-color: #6c757d;
+    --status-online: #28a745;
+    --status-offline: #adb5bd;
+    --bg-gradient: linear-gradient(135deg, #ffffff, #f4f4f4);
+    --bg-color: #ffffff;
+    --text-color: #212529;
+    --menu-bg: #e9ecef;
+    --menu-text-color: #8f91ea;
+    --shadow-color: rgba(0, 0, 0, 0.1);
+    --icon-color: none;
+    --highlight-color: #8f91ea;
+    --friend-item-hover: #f1f3f5;
+    --btn-text-color: #ffffff;
+    --btn-bg: linear-gradient(135deg, #6a75c9, #5a67c8);
+    --btn-bg-hover: linear-gradient(135deg, #5a67c8, #4854c8);
+    --btn-bg-danger: linear-gradient(135deg, #e57373, #c0392b);
+    --btn-bg-danger-hover: linear-gradient(135deg, #c0392b, #96281b);
+    --scrollbar-thumb: #cccccc;
+    --scrollbar-track: #f7f7f7;
+    --bg-slider-color: rgba(143, 145, 234, 0.1);
+    --switch-slider: #cccccc;
+    --switch-slider-before: #ffffff;
+    --switch-slider-checked: #8f91ea;
+}
+
+::-webkit-scrollbar {
+    width: 5px;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-thumb);
+    border-radius: 50px;
+}
+
+::-webkit-scrollbar-track {
+    background-color: var(--scrollbar-track);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
+}
+
+html,
+body {
+    font-family: 'Roboto', sans-serif;
+    background: var(--bg-gradient);
+    color: var(--text-color);
+    height: 100%;
+}
+
+.main_box {
+    display: flex;
+    justify-content: center;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    max-width: 450px;
+    background-color: var(--menu-bg);
+    padding: 15px;
+    box-shadow: 0 2px 8px var(--shadow-color);
+    position: relative;
+}
+
+.header h1 {
+    color: var(--text-color);
+    font-size: 18px;
+    text-align: center;
+    flex: 1;
+    margin: 0;
+}
+
+.header button {
+    background: transparent;
+    border: none;
+    color: var(--text-color);
+    cursor: pointer;
+}
+
+.header button img {
+    width: 24px;
+    height: 24px;
+    filter: var(--icon-color);
+}
+
+.menu {
+    position: relative;
+}
+
+.menu button {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    right: 0;
+    top: 40px;
+    background-color: var(--menu-bg);
+    min-width: 160px;
+    box-shadow: 0 8px 16px var(--shadow-color);
+    z-index: 1;
+    border-radius: 5px;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.dropdown-content a {
+    color: var(--text-color);
+    padding: 10px 15px;
+    text-decoration: none;
+    border-radius: 5px;
+    display: block;
+    font-size: 16px;
+}
+
+.dropdown-content a:hover {
+    background-color: var(--highlight-color);
+    border-radius: 5px;
+    color: var(--bg-color);
+}
+
+.dropdown-content.show {
+    display: block;
+    border-radius: 5px;
+    opacity: 1;
+}
+
+.btn {
+    background: var(--btn-bg);
+    color: var(--btn-text-color);
+    padding: 6px 15px;
+    border: none;
+    border-radius: 20px;
+    cursor: pointer;
+    font-size: 14px;
+    transition: background 0.3s ease, transform 0.2s ease;
+}
+
+.btn:hover {
+    background: var(--btn-bg-hover);
+    transform: scale(1.02);
+}
+
+.chat_box {
+    background: var(--bg-color);
+    width: 100%;
+    max-width: 450px;
+    max-height: 900px;
+    display: flex;
+    height: calc(var(--vh, 1vh) * 100);
+    flex-direction: column;
+    box-shadow: 0 8px 16px var(--shadow-color);
+}
+
+.chat-area {
+    flex: 1;
+    padding: 10px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.chat-message {
+    display: flex;
+    flex-direction: column;
+    max-width: 70%;
+}
+
+.chat-message.sent {
+    align-self: flex-end;
+    text-align: right;
+}
+
+.chat-message.received {
+    align-self: flex-start;
+    text-align: left;
+}
+
+.message-text {
+    background-color: var(--menu-bg);
+    color: var(--text-color);
+    padding: 10px 15px;
+    border-radius: 10px;
+    word-wrap: break-word;
+    line-height: 1.5;
+    text-align: left;
+}
+
+.timestamp {
+    font-size: 12px;
+    color: var(--timestamp-color);
+    margin-top: 4px;
+}
+
+.input-area {
+    display: flex;
+    align-items: center;
+    border-radius: 30px;
+}
+
+.message-input {
+    flex: 1;
+    background-color: var(--menu-bg);
+    color: var(--text-color);
+    border: 8px solid var(--menu-bg);
+    resize: none;
+    outline: none;
+    border-radius: 20px;
+    height: 46px;
+    max-height: 110px;
+    overflow-y: auto;
+    line-height: 20px;
+    padding: 5px 15px;
+    margin: 10px 0px 10px 10px;
+}
+
+.send-button {
+    margin: 10px 10px 10px 5px;
+    padding: 5px 12px 6px 12px;
+    border: none;
+    border-radius: 50%;
+    background: var(--btn-bg);
+    color: var(--btn-text-color);
+    cursor: pointer;
+    font-size: 25px;
+    transition: background 0.3s ease, transform 0.2s ease;
+}
+
+.send-button:hover {
+    background: var(--btn-bg-hover);
+    transform: scale(1.02);
+}

chat/static/chat/css/color.css

@@ -0,0 +1,65 @@
+:root {
+  --theme-color: #8f91ea;
+  --timestamp-color: #b5b5b5;
+  --status-online: #28a745;
+  --status-offline: #888888;
+  --bg-gradient: linear-gradient(135deg, #121212, #1c1c1c);
+  --bg-color: #121212;
+  --text-color: #f5f5f5;
+  --menu-bg: #1c1c1c;
+  --menu-text-color: #8f91ea;
+  --shadow-color: rgba(0, 0, 0, 0.5);
+  --icon-color: invert(100%);
+  --highlight-color: #8f91ea;
+  --friend-item-hover: #2b2b2b;
+  --btn-text-color: #ffffff;
+  --btn-bg: linear-gradient(135deg, #6a75c9, #5a67c8);
+  --btn-bg-hover: linear-gradient(135deg, #5a67c8, #4854c8);
+  --btn-bg-danger: linear-gradient(135deg, #e57373, #c0392b);
+  --btn-bg-danger-hover: linear-gradient(135deg, #c0392b, #96281b);
+  --scrollbar-thumb: #444444;
+  --scrollbar-track: #1c1c1c;
+  --bg-slider-color: rgba(143, 145, 234, 0.1);
+  --switch-slider: #555555;
+  --switch-slider-before: #ffffff;
+  --switch-slider-checked: #8f91ea;
+  --error-message: red;
+  --spinner-border: #f3f3f3;
+  --gradient-speed: 5s;
+  --input-border: #6a75c9;
+  --input-focus-border: #8f91ea;
+  --bg-gradient: linear-gradient(45deg, #1c1e3a, #2a2d4b, #3c3f5b);
+}
+
+[data-theme="light"] {
+  --theme-color: #8f91ea;
+  --timestamp-color: #6c757d;
+  --status-online: #28a745;
+  --status-offline: #adb5bd;
+  --bg-gradient: linear-gradient(135deg, #ffffff, #f4f4f4);
+  --bg-color: #ffffff;
+  --text-color: #212529;
+  --menu-bg: #e9ecef;
+  --menu-text-color: #8f91ea;
+  --shadow-color: rgba(0, 0, 0, 0.1);
+  --icon-color: none;
+  --highlight-color: #8f91ea;
+  --friend-item-hover: #f1f3f5;
+  --btn-text-color: #ffffff;
+  --btn-bg: linear-gradient(135deg, #6a75c9, #5a67c8);
+  --btn-bg-hover: linear-gradient(135deg, #5a67c8, #4854c8);
+  --btn-bg-danger: linear-gradient(135deg, #e57373, #c0392b);
+  --btn-bg-danger-hover: linear-gradient(135deg, #c0392b, #96281b);
+  --scrollbar-thumb: #cccccc;
+  --scrollbar-track: #f7f7f7;
+  --bg-slider-color: rgba(143, 145, 234, 0.1);
+  --switch-slider: #cccccc;
+  --switch-slider-before: #ffffff;
+  --switch-slider-checked: #8f91ea;
+  --error-message: red;
+  --spinner-border: #f3f3f3;
+  --gradient-speed: 5s;
+  --input-border: #6a75c9;
+  --input-focus-border: #8f91ea;
+  --bg-gradient: linear-gradient(45deg, #1c1e3a, #2a2d4b, #3c3f5b);
+}

chat/static/chat/css/home.css

@@ -0,0 +1,122 @@
+.home_box {
+    background: var(--bg-color);
+    border-radius: 20px;
+    width: 100%;
+    max-width: 450px;
+    max-height: 900px;
+    display: flex;
+    height: calc(var(--vh, 1vh) * 100);
+    flex-direction: column;
+    box-shadow: 0 8px 16px var(--shadow-color);
+}
+
+.friends-list {
+    flex: 1;
+    background-color: var(--bg-color);
+    margin-top: 1px;
+    overflow-y: auto;
+
+}
+
+.friend-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 14px;
+    border-bottom: 1px solid var(--shadow-color);
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.friend-item:hover {
+    background-color: var(--friend-item-hover);
+}
+
+.friend-item .left {
+    display: flex;
+    align-items: center;
+}
+
+.friend-item img {
+    width: 45px;
+    height: 45px;
+    border-radius: 50%;
+    margin-right: 15px;
+}
+
+.friend-item .details {
+    display: flex;
+    flex-direction: column;
+}
+
+.friend-item .details p {
+    margin: 2px 0;
+    color: var(--text-color);
+}
+
+.friend-item .details .name {
+    font-weight: bold;
+    font-size: 16px;
+}
+
+.friend-item .details .last-message {
+    font-size: 14px;
+    color: var(--menu-text-color);
+}
+
+.friend-item .right {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: auto;
+}
+
+.status {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+}
+
+.status.online {
+    background-color: var(--status-online);
+}
+
+.status.offline {
+    background-color: var(--status-offline);
+}
+
+.bottom-nav {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    background-color: var(--menu-bg);
+    padding: 15px;
+    box-shadow: 0 -4px 8px var(--shadow-color);
+    position: relative;
+}
+
+.bottom-nav .slider {
+    position: absolute;
+    width: 60px;
+    height: 60px;
+    background-color: var(--bg-slider-color);
+    border-radius: 50%;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 0;
+    transition: all 0.3s ease;
+}
+
+.bottom-nav button {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    z-index: 1;
+    position: relative;
+}
+
+.bottom-nav img {
+    width: 30px;
+    height: 30px;
+    filter: var(--icon-color);
+}

chat/static/chat/css/login.css

@@ -0,0 +1,169 @@
+.main_box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+.login-box {
+    background: var(--menu-bg);
+    width: 95%;
+    max-width: 450px;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 8px 16px var(--shadow-color);
+    padding: 20px;
+}
+
+.logo img {
+    width: 100px;
+    margin: 20px;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.login-box h2 {
+    color: var(--theme-color);
+    font-size: 24px;
+    margin-bottom: 20px;
+    text-align: center;
+}
+
+.form-group {
+    margin-bottom: 20px;
+    text-align: left;
+}
+
+.form-group label {
+    font-size: 14px;
+    color: var(--text-color);
+    margin-bottom: 8px;
+    display: block;
+}
+
+.input-group {
+    position: relative;
+    width: 100%;
+}
+
+.input-group input {
+    width: 100%;
+    padding: 12px;
+    font-size: 16px;
+    border: 2px solid var(--input-border);
+    border-radius: 6px;
+    background: var(--bg-color);
+    color: var(--text-color);
+    transition: border 0.3s;
+}
+
+.input-group input:focus {
+    outline: none;
+    border-color: var(--input-focus-border);
+}
+
+.eye-icon {
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    transform: translateY(-50%);
+    cursor: pointer;
+    z-index: 1;
+}
+
+.eye-icon img {
+    width: 20px;
+    height: 20px;
+    filter: var(--icon-color);
+
+}
+
+.login-btn button {
+    background: var(--btn-bg);
+    color: var(--btn-text-color);
+    padding: 16px;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 16px;
+    width: 100%;
+    transition: background 0.3s ease, transform 0.2s ease;
+}
+
+.login-btn button:hover {
+    background: var(--btn-bg-hover);
+    transform: scale(1.01);
+}
+
+.error-message {
+    color: var(--error-message);
+    font-size: 14px;
+    text-align: center;
+    margin-top: 10px;
+    text-align: left;
+}
+
+.forgot-password {
+    font-size: 14px;
+    text-align: center;
+    margin: 20px;
+}
+
+.forgot-password a {
+    color: var(--highlight-color);
+    text-decoration: none;
+}
+
+.forgot-password a:hover {
+    text-decoration: underline;
+}
+
+.register-link {
+    margin: 20px;
+    font-size: 14px;
+    text-align: center;
+}
+
+.register-link a {
+    color: var(--highlight-color);
+    text-decoration: none;
+}
+
+.register-link a:hover {
+    text-decoration: underline;
+}
+
+.spinner {
+    border: 3px solid var(--spinner-border);
+    border-top: 3px solid var(--theme-color);
+    border-radius: 50%;
+    width: 14px;
+    height: 14px;
+    animation: spin 1s linear infinite;
+    display: none;
+    margin-left: 5px;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.remember-me {
+    font-size: 14px;
+    color: var(--text-color);
+    margin-bottom: 20px;
+}
+
+.remember-me label {
+    font-size: 14px;
+    color: var(--text-color);
+    margin-bottom: 8px;
+    display: inline-block;
+}

chat/static/chat/css/profile.css

@@ -0,0 +1,87 @@
+.profile_box {
+    background: var(--bg-color);
+    width: 100%;
+    max-width: 450px;
+    max-height: 900px;
+    display: flex;
+    height: calc(var(--vh, 1vh) * 100);
+    flex-direction: column;
+    box-shadow: 0 8px 16px var(--shadow-color);
+}
+
+.profile-container {
+    width: 100%;
+    padding: 50px 20px;
+    text-align: center;
+    height: 100%;
+}
+
+.profile-image {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    margin: 0 auto;
+    border: 4px solid var(--highlight-color);
+}
+
+.username {
+    font-size: 18px;
+    font-weight: bold;
+    margin-top: 10px;
+    color: var(--highlight-color);
+}
+
+.user-status {
+    font-size: 14px;
+    color: var(--text-color);
+    margin-top: 5px;
+}
+
+.status-online {
+    color: var(--status-online)
+}
+
+.status-offline {
+    color: var(--status-offline);
+}
+
+.bio {
+    margin-top: 15px;
+    font-size: 16px;
+    color: var(--text-color);
+    text-align: center;
+    font-style: italic;
+}
+
+.profile-stats {
+    display: flex;
+    justify-content: space-around;
+    margin-top: 15px;
+    font-size: 16px;
+    color: var(--text-color);
+}
+
+.profile-stats div {
+    text-align: center;
+}
+
+.profile-stats div strong {
+    font-size: 18px;
+    color: var(--highlight-color);
+}
+
+.user-details {
+    margin-top: 20px;
+    text-align: left;
+}
+
+.user-details p {
+    margin: 10px 0;
+    font-size: 16px;
+    color: var(--text-color);
+}
+
+.user-details span {
+    font-weight: bold;
+    color: var(--highlight-color);
+}

chat/static/chat/css/search.css

@@ -0,0 +1,89 @@
+.search_box {
+    background: var(--bg-color);
+    border-radius: 20px;
+    width: 100%;
+    max-width: 450px;
+    max-height: 900px;
+    display: flex;
+    height: calc(var(--vh, 1vh) * 100);
+    flex-direction: column;
+    box-shadow: 0 8px 16px var(--shadow-color);
+}
+
+
+
+.search-bar {
+    display: flex;
+    align-items: center;
+    margin: 15px;
+    background: var(--friend-item-hover);
+    padding: 10px;
+    border-radius: 10px;
+}
+
+.search-bar input {
+    flex: 1;
+    padding: 8px 10px;
+    border: none;
+    background: transparent;
+    color: var(--text-color);
+    font-size: 16px;
+    outline: none;
+}
+
+.search-bar button {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+}
+
+.search-bar img {
+    width: 24px;
+    height: 24px;
+    filter: var(--icon-color);
+}
+
+.results-list {
+    flex: 1;
+    background-color: var(--bg-color);
+    margin-top: 1px;
+    overflow-y: auto;
+}
+
+.result-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 14px;
+    border-bottom: 1px solid var(--shadow-color);
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    transition: transform 0.3s ease;
+}
+
+.result-item:hover {
+    background-color: var(--friend-item-hover);
+}
+
+.result-item img {
+    width: 45px;
+    height: 45px;
+    border-radius: 50%;
+    margin-right: 15px;
+}
+
+.result-item .details {
+    flex: 1;
+}
+
+.result-item .details p {
+    margin: 2px 0;
+    color: var(--text-color);
+}
+
+.result-item .details .name {
+    font-weight: bold;
+    font-size: 16px;
+}

chat/static/chat/css/settings.css

@@ -0,0 +1,136 @@
+.settings_box {
+    background: var(--bg-color);
+    border-radius: 20px;
+    width: 100%;
+    max-width: 450px;
+    max-height: 900px;
+    display: flex;
+    height: calc(var(--vh, 1vh) * 100);
+    flex-direction: column;
+    box-shadow: 0 8px 16px var(--shadow-color);
+}
+
+.settings-options {
+    flex: 1;
+    background-color: var(--bg-color);
+    margin-top: 1px;
+    overflow-y: auto;
+}
+
+.section-title {
+    padding: 15px 15px 15px 14px;
+    font-size: 24px;
+    color: var(--text-color);
+    font-weight: bold;
+}
+
+.settings-option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 14px;
+    border-bottom: 1px solid var(--shadow-color);
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.settings-option:hover {
+    background-color: var(--menu-bg);
+}
+
+.settings-option label {
+    color: var(--text-color);
+    font-size: 16px;
+}
+
+.settings-option input {
+    margin-right: 10px;
+}
+
+.setting-options .switch {
+    position: relative;
+    display: inline-block;
+    width: 47px;
+    height: 28px;
+}
+
+.setting-options .switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.setting-options .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--switch-slider);
+    transition: 0.4s;
+    border-radius: 34px;
+}
+
+.setting-options .slider:before {
+    position: absolute;
+    content: "";
+    height: 20px;
+    width: 20px;
+    border-radius: 50%;
+    left: 4px;
+    bottom: 4px;
+    background-color: var(--switch-slider-before);
+    transition: 0.4s;
+}
+
+.setting-options input:checked+.slider {
+    background-color: var(--switch-slider-checked);
+}
+
+.setting-options input:checked+.slider:before {
+    background-color: var(--switch-slider-before);
+    transform: translateX(20px);
+}
+
+.settings-option select {
+    background-color: var(--bg-color);
+    color: var(--text-color);
+    border: 1px solid var(--highlight-color);
+    padding: 10px;
+    font-size: 16px;
+    border-radius: 5px;
+    outline: none;
+    transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.settings-option select:focus {
+    background-color: var(--menu-bg);
+    color: var(--highlight-color);
+}
+
+.settings-option option {
+    background-color: var(--bg-color);
+    color: var(--text-color);
+}
+
+.settings-option select:hover {
+    cursor: pointer;
+    border-color: var(--highlight-color);
+}
+
+.btn {
+    background: var(--btn-bg-danger);
+    color: var(--btn-text-color);
+    padding: 6px 15px;
+    border: none;
+    border-radius: 20px;
+    cursor: pointer;
+    font-size: 14px;
+    transition: background 0.3s ease, transform 0.2s ease;
+}
+
+.btn:hover {
+    background: var(--btn-bg-danger-hover);
+    transform: scale(1.02);
+}

chat/static/chat/css/signup.css

@@ -0,0 +1,141 @@
+.main_box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+.signup-box {
+    background: var(--menu-bg);
+    width: 99%;
+    max-width: 450px;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 8px 16px var(--shadow-color);
+    padding: 20px;
+}
+
+.logo img {
+    width: 100px;
+    margin: 20px;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.signup-box h2 {
+    color: var(--theme-color);
+    font-size: 24px;
+    margin-bottom: 20px;
+    text-align: center;
+}
+
+.form-group {
+    margin-bottom: 20px;
+    text-align: left;
+}
+
+.form-group label {
+    font-size: 14px;
+    color: var(--text-color);
+    margin-bottom: 8px;
+    display: block;
+}
+
+.input-group {
+    position: relative;
+    width: 100%;
+}
+
+.input-group input {
+    width: 100%;
+    padding: 12px;
+    font-size: 16px;
+    border: 2px solid var(--input-border);
+    border-radius: 6px;
+    background: var(--bg-color);
+    color: var(--text-color);
+    transition: border 0.3s;
+}
+
+.input-group input:focus {
+    outline: none;
+    border-color: var(--input-focus-border);
+}
+
+.eye-icon {
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    transform: translateY(-50%);
+    cursor: pointer;
+    z-index: 1;
+}
+
+.eye-icon img {
+    width: 20px;
+    height: 20px;
+    filter: var(--icon-color);
+
+}
+
+.signup-btn button {
+    background: var(--btn-bg);
+    color: var(--btn-text-color);
+    padding: 16px;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 16px;
+    width: 100%;
+    transition: background 0.3s ease, transform 0.2s ease;
+}
+
+.signup-btn button:hover {
+    background: var(--btn-bg-hover);
+    transform: scale(1.01);
+}
+
+.error-message {
+    color: var(--error-message);
+    font-size: 14px;
+    text-align: center;
+    margin-top: 10px;
+    text-align: left;
+}
+
+.login-link {
+    margin: 20px;
+    font-size: 14px;
+    text-align: center;
+}
+
+.login-link a {
+    color: var(--highlight-color);
+    text-decoration: none;
+}
+
+.login-link a:hover {
+    text-decoration: underline;
+}
+
+.spinner {
+    border: 3px solid var(--spinner-border);
+    border-top: 3px solid var(--theme-color);
+    border-radius: 50%;
+    width: 14px;
+    height: 14px;
+    animation: spin 1s linear infinite;
+    display: none;
+    margin-left: 5px;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}

chat/static/chat/favicon_io/site.webmanifest

@@ -0,0 +1,49 @@
+{
+    "short_name": "Devnoms",
+    "name": "Devnoms",
+    "description": "A powerful chat application for seamless communication.",
+    "start_url": "/user/",
+    "display": "standalone",
+    "background_color": "#000000",
+    "theme_color": "#282a2d",
+    "icons": [
+      {
+        "src": "https://pdf813.netlify.app/chat/favicon_io/android-chrome-192x192.png",
+        "sizes": "192x192",
+        "type": "image/png"
+      },
+      {
+        "src": "https://pdf813.netlify.app/chat/favicon_io/android-chrome-512x512.png",
+        "sizes": "512x512",
+        "type": "image/png"
+      },
+      {
+        "src": "https://pdf813.netlify.app/chat/favicon_io/apple-touch-icon.png",
+        "sizes": "180x180",
+        "type": "image/png"
+      },
+      {
+        "src": "https://pdf813.netlify.app/chat/favicon_io/favicon-16x16.png",
+        "sizes": "16x16",
+        "type": "image/png"
+      },
+      {
+        "src": "https://pdf813.netlify.app/chat/favicon_io/favicon-32x32.png",
+        "sizes": "32x32",
+        "type": "image/png"
+      }
+    ],
+    "splash_pages": [
+      {
+        "src": "https://pdf813.netlify.app/chat/img/logo_750x750.png",
+        "sizes": "512x512",
+        "type": "image/png"
+      }
+    ],
+    "scope": "/",
+    "orientation": "portrait",
+    "prefer_related_applications": false,
+    "related_applications": [],
+    "iarc_rating_id": "AAA-0000-0000"
+  }
+  

chat/static/chat/js/base.js

@@ -0,0 +1,39 @@
+
+document.addEventListener('DOMContentLoaded', function () {
+  document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);
+});
+
+window.addEventListener('resize', function () {
+  document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);
+});
+
+// Back button functionality
+function goBack() {
+  window.history.back();
+}
+
+// Toggle menu for three dots (Edit Profile, Settings, Logout)
+function toggleMenu() {
+  const dropdown = document.getElementById("dropdown");
+  dropdown.classList.toggle("show");
+}
+
+// Close dropdown menu when clicking outside
+document.addEventListener("click", (event) => {
+  const dropdown = document.getElementById("dropdown");
+  if (!dropdown.contains(event.target) && !event.target.closest(".menu")) {
+    dropdown.classList.remove("show");
+  }
+});
+// Toggle dark mode
+const darkModeToggle = document.querySelector(".dark-mode-toggle");
+darkModeToggle.addEventListener("click", () => {
+  const theme = document.documentElement.getAttribute("data-theme");
+  if (theme === "light") {
+    darkModeToggle.innerHTML = "Light Mode";
+    document.documentElement.setAttribute("data-theme", "dark");
+  } else {
+    darkModeToggle.innerHTML = "Dark Mode";
+    document.documentElement.setAttribute("data-theme", "light");
+  }
+});

chat/static/chat/js/chat.js

@@ -0,0 +1,60 @@
+const chatArea = document.getElementById("chat-area");
+const messageInput = document.getElementById("message-input");
+const sendButton = document.getElementById("send-button");
+
+// Automatically scroll to the bottom of the chat area
+const scrollToBottom = () => {
+  chatArea.scrollTop = chatArea.scrollHeight;
+};
+
+// Add a new message to the chat area
+const addMessage = (message, type) => {
+  const messageDiv = document.createElement("div");
+  messageDiv.classList.add("chat-message", type);
+
+  const textDiv = document.createElement("div");
+  textDiv.classList.add("message-text");
+  textDiv.innerHTML = message.replace(/\n/g, "<br>"); // Replace line breaks with <br>
+
+  const timestampDiv = document.createElement("div");
+  timestampDiv.classList.add("timestamp");
+  const currentTime = new Date();
+  timestampDiv.textContent = currentTime.toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+
+  messageDiv.appendChild(textDiv);
+  messageDiv.appendChild(timestampDiv);
+  chatArea.appendChild(messageDiv);
+
+  scrollToBottom();
+};
+
+// Send a message when the send button is clicked
+sendButton.addEventListener("click", () => {
+  const message = messageInput.value.trim();
+  if (message) {
+    addMessage(message, "sent");
+    messageInput.value = "";
+    messageInput.style.height = "46px";
+
+    // Keep the focus on the textarea
+    messageInput.focus();
+  }
+});
+
+// Auto-expand the textarea as the user types
+messageInput.addEventListener("input", () => {
+  messageInput.style.height = "auto";
+  messageInput.style.height = `${messageInput.scrollHeight - 4}px`;
+});
+
+// Allow multi-line input using Enter key
+// messageInput.addEventListener('keydown', (event) => {
+//     if (event.key === 'Enter' && event.shiftKey) {
+//         event.preventDefault();
+//         sendButton.click(); // Trigger the send button
+//     }
+// });
+scrollToBottom();

chat/static/chat/js/home.js

@@ -0,0 +1,27 @@
+const navButtons = document.querySelectorAll(".bottom-nav button");
+const slider = document.createElement("div");
+slider.className = "slider";
+document.querySelector(".bottom-nav").appendChild(slider);
+
+// Initialize the slider position to the first active button
+function setSliderPosition(button) {
+    const buttonRect = button.getBoundingClientRect();
+    const navRect = document.querySelector(".bottom-nav").getBoundingClientRect();
+    const leftPosition =
+        buttonRect.left -
+        navRect.left +
+        buttonRect.width / 2 -
+        slider.offsetWidth / 2;
+    slider.style.left = `${leftPosition}px`;
+}
+
+navButtons.forEach((button) => {
+    button.addEventListener("click", () => {
+        navButtons.forEach((btn) => btn.classList.remove("active"));
+        button.classList.add("active");
+        setSliderPosition(button);
+    });
+});
+
+// Set initial position of the slider
+setSliderPosition(document.querySelector(".bottom-nav .active"));

chat/static/chat/js/login.js

@@ -0,0 +1,74 @@
+function togglePasswordVisibility() {
+    const passwordField = document.getElementById('password');
+    const toggleIcon = document.getElementById('toggle-password');
+
+    if (passwordField.type === 'password') {
+        passwordField.type = 'text';
+        toggleIcon.innerHTML = '<img src="https://pdf813.netlify.app/chat/img/icon/icons8-closed-eye-50.png" alt="Hide Password" />';
+
+    } else {
+        passwordField.type = 'password';
+        toggleIcon.innerHTML = '<img src="https://pdf813.netlify.app/chat/img/icon/icons8-eye-48.png" alt="Show Password" />';
+    }
+
+}
+
+// Form validation and error handling
+const form = document.getElementById('login-form');
+const emailInput = document.getElementById('email');
+const passwordInput = document.getElementById('password');
+const emailError = document.getElementById('email-error');
+const passwordError = document.getElementById('password-error');
+const loginBtn = document.getElementById('login-btn');
+
+form.addEventListener('submit', function (event) {
+    event.preventDefault();
+    let hasError = false;
+
+    // Clear previous error messages
+    emailError.textContent = '';
+    passwordError.textContent = '';
+
+    // Validate email
+    if (emailInput.value.trim() === '') {
+        emailError.textContent = 'Please fill in the email field';
+        hasError = true;
+    } else if (!validateEmail(emailInput.value)) {
+        emailError.textContent = 'Email is not valid';
+        hasError = true;
+    }
+
+    // Validate password
+    if (passwordInput.value.trim() === '') {
+        passwordError.textContent = 'Please fill in the password field';
+        hasError = true;
+    }
+
+    if (hasError) return;
+
+    // Show spinner and disable button
+    loginBtn.disabled = true;
+    loginBtn.innerHTML = 'Logging in... <div class="spinner" id="spinner"></div>';
+    const spinner = document.getElementById('spinner');
+    spinner.style.display = 'inline-block';
+
+    // Simulate an API request for login (replace this with your actual login API call)
+    setTimeout(function () {
+        // Simulate a response: if login fails
+        let loginSuccess = false; // Change this to simulate success/failure
+        if (!loginSuccess) {
+            emailError.textContent = 'Email not found or incorrect password';
+            passwordError.textContent = 'Please try again';
+            spinner.style.display = 'none';
+            loginBtn.disabled = false;
+            loginBtn.innerText = "Login";
+        } else {
+            window.location.href = '/dashboard'; // Redirect to dashboard after successful login
+        }
+    }, 3000); // Shortened timeout for testing purposes
+});
+
+function validateEmail(email) {
+    const regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
+    return regex.test(email);
+}

chat/static/chat/js/profile.js

@@ -0,0 +1 @@
+console.log("profile");

chat/static/chat/js/search.js

@@ -0,0 +1 @@
+console.log("search");

chat/static/chat/js/settings.js

@@ -0,0 +1 @@
+console.log("settings");

chat/static/chat/js/signup.js

@@ -0,0 +1,91 @@
+function togglePasswordVisibility() {
+    const passwordField = document.getElementById('password');
+    const toggleIcon = document.getElementById('toggle-password');
+
+    if (passwordField.type === 'password') {
+        passwordField.type = 'text';
+        toggleIcon.innerHTML = '<img src="https://pdf813.netlify.app/chat/img/icon/icons8-closed-eye-50.png" alt="Hide Password" />';
+
+    } else {
+        passwordField.type = 'password';
+        toggleIcon.innerHTML = '<img src="https://pdf813.netlify.app/chat/img/icon/icons8-eye-48.png" alt="Show Password" />';
+    }
+
+}
+
+// Form validation and error handling
+const form = document.getElementById('signup-form');
+const nameInput = document.getElementById('name');
+const emailInput = document.getElementById('email');
+const passwordInput = document.getElementById('password');
+const confirmPasswordInput = document.getElementById('confirm-password');
+const nameError = document.getElementById('name-error');
+const emailError = document.getElementById('email-error');
+const passwordError = document.getElementById('password-error');
+const confirmPasswordError = document.getElementById('confirm-password-error');
+const signupBtn = document.getElementById('signup-btn');
+
+form.addEventListener('submit', function (event) {
+    event.preventDefault();
+    let hasError = false;
+
+    // Clear previous error messages
+    nameError.textContent = '';
+    emailError.textContent = '';
+    passwordError.textContent = '';
+    confirmPasswordError.textContent = '';
+
+    // Validate name
+    if (nameInput.value.trim() === '') {
+        nameError.textContent = 'Please fill in the username field';
+        hasError = true;
+    }
+
+    // Validate email
+    if (emailInput.value.trim() === '') {
+        emailError.textContent = 'Please fill in the email field';
+        hasError = true;
+    } else if (!validateEmail(emailInput.value)) {
+        emailError.textContent = 'Email is not valid';
+        hasError = true;
+    }
+
+    // Validate password
+    if (passwordInput.value.trim() === '') {
+        passwordError.textContent = 'Please fill in the password field';
+        hasError = true;
+    }
+
+    // Validate confirm password
+    if (confirmPasswordInput.value !== passwordInput.value) {
+        confirmPasswordError.textContent = 'Passwords do not match';
+        hasError = true;
+    }
+
+    if (hasError) return;
+
+    // Show spinner and disable button
+    signupBtn.disabled = true;
+    signupBtn.innerHTML = 'Signing Up... <div class="spinner" id="spinner"></div>';
+    const spinner = document.getElementById('spinner');
+    spinner.style.display = 'inline-block';
+
+    // Simulate an API request for signup (replace this with your actual signup API call)
+    setTimeout(function () {
+        // Simulate a response: if signup fails
+        let signupSuccess = false; // Change this to simulate success/failure
+        if (!signupSuccess) {
+            emailError.textContent = 'Email is already taken';
+            spinner.style.display = 'none';
+            signupBtn.disabled = false;
+            signupBtn.innerText = "Sign Up";
+        } else {
+            window.location.href = '/login'; // Redirect to login after successful signup
+        }
+    }, 3000); // Shortened timeout for testing purposes
+});
+
+function validateEmail(email) {
+    const regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2, 6}$/;
+    return regex.test(email);
+}

chat/tests.py

@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.

chat/views/__init__.py

@@ -0,0 +1,6 @@
+from .chat_view import *
+from .friends_view import *
+from .home_view import *
+from .user_view import *
+from .password_view import *
+from .test_view import *

chat/views/chat_view.py

@@ -0,0 +1,68 @@
+from django.shortcuts import render, redirect
+from django.contrib.auth.models import User
+from django.contrib.auth.decorators import login_required
+from chat.models import UserRelation, Messages
+from django.http.response import JsonResponse
+from django.contrib import messages as django_messages
+from django.db.models import Q  # Import Q
+
+
+@login_required(login_url="login")
+def chat(request, username):
+    usersen = request.user
+    try:
+        # Get the friend and the relation in one go
+        friend = User.objects.get(username=username)
+        relation = UserRelation.objects.get(user=usersen, friend=friend, accepted=True)
+    except (User.DoesNotExist, UserRelation.DoesNotExist):
+        # If user or relation doesn't exist, show error message and redirect
+        django_messages.error(
+            request, "User or relation not found. You cannot chat with this user."
+        )
+        return redirect("home")
+
+    # Retrieve messages in one query, sorted by timestamp
+    messages = Messages.objects.filter(
+        (Q(sender_name=usersen) & Q(receiver_name=friend))
+        | (Q(sender_name=friend) & Q(receiver_name=usersen))
+    ).order_by("timestamp")
+
+    # Handle GET method to render the chat
+    if request.method == "GET":
+        return render(
+            request,
+            "chat.html",
+            {
+                "relation_key": relation.relation_key,
+                "messages": messages,
+                "curr_user": usersen,
+                "friend": friend,
+            },
+        )
+
+    # If the method is not GET, return an error response
+    return JsonResponse({"error": "Invalid request method"}, status=405)
+
+
+# @login_required(login_url="login")
+# @csrf_exempt
+# def message_list(request, sender=None, receiver=None):
+#     if request.method == "GET":
+#         messages = Messages.objects.filter(
+#             sender_name=sender, receiver_name=receiver, seen=False
+#         )
+#         serializer = MessageSerializer(
+#             messages, many=True, context={"request": request}
+#         )
+#         for message in messages:
+#             message.seen = True
+#             message.save()
+#         return JsonResponse(serializer.data, safe=False)
+
+#     elif request.method == "POST":
+#         data = JSONParser().parse(request)
+#         serializer = MessageSerializer(data=data)
+#         if serializer.is_valid():
+#             serializer.save()
+#             return JsonResponse(serializer.data, status=201)
+#         return JsonResponse(serializer.errors, status=400)

chat/views/friends_view.py

@@ -0,0 +1,136 @@
+from django.shortcuts import render, redirect
+from django.contrib.auth.models import User
+from django.contrib.auth.decorators import login_required
+from chat.models import UserRelation
+from django.contrib import messages
+from django.http import HttpResponseRedirect
+from django.urls import reverse
+
+@login_required(login_url="login")
+def delete_friend(request):
+    if request.method == "POST":
+        username = request.POST.get("username")
+        requestDelete = request.POST.get("requestDelete")
+        user = request.user
+        friend = User.objects.get(username=username)
+        try:
+            # print("starts")
+            exists = UserRelation.objects.filter(user=user, friend=friend).exists()
+            if requestDelete == "True":
+                reverse_exists = UserRelation.objects.filter(
+                    user=friend, friend=user
+                ).exists()
+                if reverse_exists:
+                    return HttpResponseRedirect(
+                        request.META.get("HTTP_REFERER", reverse("home"))
+                    )
+
+            # print("sts")
+            if exists:
+                pass
+            else:
+                return HttpResponseRedirect(
+                    request.META.get("HTTP_REFERER", reverse("home"))
+                )
+            user_relation = UserRelation.objects.get(user=user, friend=friend)
+            user_relation.delete()
+
+            user_relation_reverse = UserRelation.objects.get(user=friend, friend=user)
+            user_relation_reverse.delete()
+            messages.success(request, "Friend deleted successfully.")
+
+        except UserRelation.DoesNotExist:
+            messages.success(request, "Request deleted successfully.")
+            pass
+        return redirect("home")
+    else:
+        return redirect("home")
+
+
+@login_required(login_url="login")
+def accept_request(request):
+    if request.method == "POST":
+        username = request.POST.get("username")
+        user = request.user
+        friend = User.objects.get(username=username)
+        accepted = True
+
+        exists = UserRelation.objects.filter(user=user, friend=friend).exists()
+        reverse_exists = UserRelation.objects.filter(user=friend, friend=user).exists()
+
+        # print("sts")
+        if exists:
+            return HttpResponseRedirect(
+                request.META.get("HTTP_REFERER", reverse("home"))
+            )
+        if not reverse_exists:
+            return HttpResponseRedirect(
+                request.META.get("HTTP_REFERER", reverse("home"))
+            )
+        relation_key = username + "_" + user.username
+        user_relation = UserRelation(
+            user=user, friend=friend, accepted=accepted, relation_key=relation_key
+        )
+        user_relation.save()
+
+        user_relation_revrse = UserRelation.objects.get(user=friend, friend=user)
+        user_relation_revrse.accepted = True
+        user_relation_revrse.relation_key = relation_key
+        user_relation_revrse.save()
+        messages.success(request, "Friend Added successfully.")
+
+        return redirect("home")
+    else:
+        return redirect("home")
+
+
+@login_required(login_url="login")
+def add_friend(request):
+    if request.method == "POST":
+        username = request.POST.get("username")
+        user = request.user
+        friend = User.objects.get(username=username)
+        accepted = False
+        # print("starts")
+        exists = UserRelation.objects.filter(user=user, friend=friend).exists()
+        reverse_exists = UserRelation.objects.filter(user=friend, friend=user).exists()
+        # print("sts")
+        if exists or reverse_exists:
+            # print("star")
+            return HttpResponseRedirect(
+                request.META.get("HTTP_REFERER", reverse("home"))
+            )
+        user_relation = UserRelation(user=user, friend=friend, accepted=accepted)
+        user_relation.save()
+        messages.success(request, "Request sended successfully.")
+
+        return redirect("home")
+    else:
+        return redirect("home")
+
+
+@login_required(login_url="login")
+def search(request):
+    if request.method == "GET":
+        query = request.GET.get("q", "")
+        if query:
+            users = User.objects.filter(username__icontains=query)
+            if users:
+                return render(
+                    request,
+                    "search.html",
+                    {"query": query, "users": users, "user": request.user.username},
+                )
+            else:
+                not_found_message = f'No users found for "{query}"'
+                return render(
+                    request,
+                    "search.html",
+                    {
+                        "query": query,
+                        "not_found_message": not_found_message,
+                    },
+                )
+
+    return render(request, "search.html", {"user": request.user.username})
+

chat/views/home_view.py

@@ -0,0 +1,110 @@
+from django.shortcuts import render, redirect
+from django.contrib.auth.models import User
+from django.contrib.auth.decorators import login_required
+from chat.models import UserRelation
+from django.contrib import messages
+
+
+@login_required(login_url="login")
+def userprofile(request, username):
+    if username == request.user.username:
+        return redirect("/")
+    friend_dict = {}
+    request_dict = {}
+    friend_dict["accepted"] = False
+    request_dict["accepted"] = False
+    friend_dict["name"] = ""
+    send_request = False
+    not_accepted = False
+    me_not_accepted = False
+    is_friend = False
+    try:
+        user = User.objects.get(username=username)
+        friends_data = UserRelation.objects.all()
+        for obj in friends_data:
+            if obj.user.username == request.user.username:
+                if obj.friend.username == username:
+                    friend_dict = {
+                        "name": obj.friend.username,
+                        "accepted": obj.accepted,
+                    }
+        for obj in friends_data:
+            if obj.friend.username == request.user.username:
+                if obj.user.username == username:
+                    if obj.accepted:
+                        me_not_accepted = False
+                    else:
+                        me_not_accepted = True
+
+    except User.DoesNotExist:
+        messages.error(request, "User does not exist.")
+        return render(request, "friend.html")
+
+    if friend_dict["name"] == "":
+        if me_not_accepted == True:
+            pass
+            # print("me not accepted")
+        else:
+            # print("not a friend")
+            send_request = True
+
+    elif friend_dict["accepted"] == False:
+        # print("not_accepted")
+        not_accepted = True
+
+    else:
+        # print("friend")
+        is_friend = True
+    # print("send_request = ", send_request)
+    # print("not_accepted = ", not_accepted)
+    # print("me_not_accepted = ", me_not_accepted)
+    # print("is_friend = ", is_friend)
+    # You can now access user details, such as username, email, etc.
+    user_details = {
+        "username": user.username,
+        "email": user.email,
+        "send_request": send_request,
+        "not_accepted": not_accepted,
+        "is_friend": is_friend,
+        "me_not_accepted": me_not_accepted,
+    }
+
+    return render(request, "friend.html", {"user_details": user_details})
+
+
+from django.shortcuts import render, redirect
+from django.contrib.auth.models import User
+from django.contrib.auth.decorators import login_required
+from chat.models import UserRelation
+from django.contrib import messages
+@login_required(login_url="login")
+def HomePage(request):
+    friends_data = UserRelation.objects.all()
+    friends_list = []
+    for obj in friends_data:
+        if obj.user.username == request.user.username:
+            friend_dict = {"username": obj.friend.username, "accepted": obj.accepted}
+            friends_list.append(friend_dict)
+
+    request_list = []
+    for obj in friends_data:
+        if obj.friend.username == request.user.username:
+            if not obj.accepted:
+                request_dict = {"username": obj.user.username}
+                request_list.append(request_dict)
+
+    data = {
+        "email": request.user.email,
+        "username": request.user.username,
+        "friends": friends_list,
+        "requests": request_list,
+    }
+    return render(
+        request,
+        "home.html",
+        {
+            "data": data,
+        },
+    )
+
+

chat/views/password_view.py

@@ -0,0 +1,14 @@
+from django.contrib.auth.models import User
+from django.contrib.auth import views as auth_views
+
+class CustomPasswordResetView(auth_views.PasswordResetView):
+    template_name = './password/password_reset_form.html'
+    email_template_name = './password/password_reset_email.html'
+
+    def form_valid(self, form):
+        email = form.cleaned_data['email']
+        if not User.objects.filter(email=email).exists():
+            form.add_error(
+                'email', 'This email is not associated with any user in our system.')
+            return self.form_invalid(form)
+        return super().form_valid(form)

chat/views/test_view.py

@@ -0,0 +1,65 @@
+from django.shortcuts import render
+
+
+def test(request):
+
+    return render(
+        request,
+        "./test/dev.html",
+    )
+
+
+def test_chat(request):
+
+    return render(
+        request,
+        "./test/chat.html",
+    )
+
+
+def test_home(request):
+
+    return render(
+        request,
+        "./test/home.html",
+    )
+
+
+def test_login(request):
+
+    return render(
+        request,
+        "./test/login.html",
+    )
+
+
+def test_signup(request):
+
+    return render(
+        request,
+        "./test/signup.html",
+    )
+
+
+def test_profile(request):
+
+    return render(
+        request,
+        "./test/profile.html",
+    )
+
+
+def test_search(request):
+
+    return render(
+        request,
+        "./test/search.html",
+    )
+
+
+def test_settings(request):
+
+    return render(
+        request,
+        "./test/settings.html",
+    )

chat/views/user_view.py

@@ -0,0 +1,128 @@
+from django.shortcuts import render, redirect
+from django.contrib.auth.models import User
+from django.contrib.auth import authenticate, login, logout
+from django.contrib.auth.decorators import login_required
+from django.db.models import Q
+
+@login_required(login_url="login")
+def EditProfile(request):
+    success_message = None
+    error_message = None
+
+    if request.method == "POST":
+        new_email = request.POST.get("email")
+        new_username = request.POST.get("username")
+
+        # Check if the new username is already taken
+        if (
+            new_username != request.user.username
+            and User.objects.filter(username=new_username).exists()
+        ):
+            error_message = "Username already exists. Please choose a different one."
+        elif (
+            new_email != request.user.email
+            and User.objects.filter(email=new_email).exists()
+        ):
+            error_message = "Email address already associated with another account. Please choose a different one."
+        else:
+            # Update email and username
+            # print(request.user.id)
+            request.user.email = new_email
+            request.user.username = new_username
+            request.user.save()
+            success_message = "Profile updated successfully."
+
+    # Pre-fill the form with the user's existing data
+    initial_data = {
+        "email": request.user.email,
+        "username": request.user.username,
+    }
+
+    return render(
+        request,
+        "edit.html",
+        {
+            "initial_data": initial_data,
+            "success_message": success_message,
+            "error_message": error_message,
+        },
+    )
+
+
+def SignupPage(request):
+    if request.user.is_authenticated:
+        return redirect("home")
+    error_message = ""  # Initialize error_message as None
+
+    if request.method == "POST":
+        uname = request.POST.get("username")
+        email = request.POST.get("email")
+        pass1 = request.POST.get("password1")
+        pass2 = request.POST.get("password2")
+
+        data = {
+            "username": uname,
+            "useremail": email,
+        }
+
+        # Check if a user with the same email or username already exists
+        if User.objects.filter(username=uname).exists():
+            error_message = "A user with the same username already exists."
+            return render(
+                request,
+                "signup.html",
+                {"error_message": error_message, "userdata": data},
+            )
+
+        elif User.objects.filter(email=email).exists():
+            error_message = "A user with the same email already exists."
+            return render(
+                request,
+                "signup.html",
+                {"error_message": error_message, "userdata": data},
+            )
+
+        else:
+            # Create the user
+            user = User.objects.create_user(username=uname, email=email, password=pass1)
+            user.save()
+            # Log the user in after registration
+            login(request, user)
+            return redirect("home")
+
+    return render(request, "signup.html", {"error_message": error_message})
+
+
+def LoginPage(request):
+    if request.user.is_authenticated:
+        return redirect("home")
+    error_message = ""
+    email_or_username = ""
+    if request.method == "POST":
+        email_or_username = request.POST.get("email_or_username")
+        pass1 = request.POST.get("pass")
+        try:
+            curr_user = User.objects.get(Q(email=email_or_username) | Q(username=email_or_username))
+        except User.DoesNotExist:
+            error_message = "User not found. Please check your Email/Username"
+            return render(
+                request, "login.html", {"error_message": error_message, "email": email_or_username}
+            )
+
+        user = authenticate(request, username=curr_user.username, password=pass1)
+        if user is not None:
+            login(request, user)
+            return redirect("home")
+        else:
+            if User.objects.filter(username=curr_user.username).exists():
+                error_message = "Incorrect password. Please try again."
+            else:
+                error_message = "Email not found. Please check your email."
+    return render(
+        request, "login.html", {"error_message": error_message, "email": email_or_username}
+    )
+
+
+def LogoutPage(request):
+    logout(request)
+    return redirect("login")

devnoms/asgi.py

@@ -0,0 +1,16 @@
+import os
+from django.core.asgi import get_asgi_application
+from channels.routing import ProtocolTypeRouter, URLRouter
+from channels.auth import AuthMiddlewareStack
+import chat.routing
+
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'devnoms.settings')
+
+application = ProtocolTypeRouter({
+    "http": get_asgi_application(),
+    "websocket": AuthMiddlewareStack(
+        URLRouter(
+            chat.routing.websocket_urlpatterns
+        )
+    ),
+})

devnoms/settings.py

@@ -0,0 +1,161 @@
+from pathlib import Path
+from dotenv import load_dotenv
+import os
+
+load_dotenv()
+
+DEVELOPMENT = "live"
+# DEVELOPMENT = "local"
+DEBUG = True
+
+
+if DEVELOPMENT == "local":
+    # Development
+    DEBUG = True
+    DATABASES = {
+        "default": {
+            "ENGINE": "django.db.backends.postgresql",
+            "NAME": "devnoms_localdb",
+            "USER": os.getenv("DB_USER_LOCAL"),
+            "PASSWORD": os.getenv("DB_PASS_LOCAL"),
+            "HOST": os.getenv("DB_HOST_LOCAL"),
+            "PORT": "",
+        }
+    }
+    SITE_URL = "http://localhost:8000"
+
+
+else:
+    # Live
+    # DEBUG = False
+    DATABASES = {
+        "default": {
+            "ENGINE": "django.db.backends.postgresql",
+            "NAME": os.getenv("DB_NAME_LIVE"),
+            "USER": os.getenv("DB_USER_LIVE"),
+            "PASSWORD": os.getenv("DB_PASS_LIVE"),
+            "HOST": os.getenv("DB_HOST_LIVE"),
+            "PORT": "",
+            "OPTIONS": {
+                "sslmode": "require",
+            },
+        }
+    }
+    SITE_URL = "https://devnoms.onrender.com"
+
+
+BASE_DIR = Path(__file__).resolve().parent.parent
+
+
+SECRET_KEY = os.getenv("SECRET_KEY")
+ALLOWED_HOSTS = ["*"]
+
+
+INSTALLED_APPS = [
+    "channels",
+    "django.contrib.admin",
+    "django.contrib.auth",
+    "django.contrib.contenttypes",
+    "django.contrib.sessions",
+    "django.contrib.messages",
+    "django.contrib.staticfiles",
+    "chat",
+    "corsheaders",
+]
+ASGI_APPLICATION = "devnoms.asgi.application"
+
+CHANNEL_LAYERS = {
+    "default": {
+        "BACKEND": "channels.layers.InMemoryChannelLayer",
+    }
+}
+
+
+MIDDLEWARE = [
+    "django.middleware.security.SecurityMiddleware",
+    "django.contrib.sessions.middleware.SessionMiddleware",
+    "django.middleware.common.CommonMiddleware",
+    "django.middleware.csrf.CsrfViewMiddleware",
+    "django.contrib.auth.middleware.AuthenticationMiddleware",
+    "django.contrib.messages.middleware.MessageMiddleware",
+    "django.middleware.clickjacking.XFrameOptionsMiddleware",
+    "corsheaders.middleware.CorsMiddleware",
+]
+
+ROOT_URLCONF = "devnoms.urls"
+
+TEMPLATES = [
+    {
+        "BACKEND": "django.template.backends.django.DjangoTemplates",
+        "DIRS": ["templates"],
+        "APP_DIRS": True,
+        "OPTIONS": {
+            "context_processors": [
+                "django.template.context_processors.debug",
+                "django.template.context_processors.request",
+                "django.contrib.auth.context_processors.auth",
+                "django.contrib.messages.context_processors.messages",
+            ],
+        },
+    },
+]
+
+WSGI_APPLICATION = "devnoms.wsgi.application"
+
+AUTH_PASSWORD_VALIDATORS = [
+    {
+        "NAME": "django.contrib.auth.password_validation.UserAttributeSimilarityValidator",
+    },
+    {
+        "NAME": "django.contrib.auth.password_validation.MinimumLengthValidator",
+    },
+    {
+        "NAME": "django.contrib.auth.password_validation.CommonPasswordValidator",
+    },
+    {
+        "NAME": "django.contrib.auth.password_validation.NumericPasswordValidator",
+    },
+]
+
+
+LANGUAGE_CODE = "en-us"
+
+# TIME_ZONE = "UTC"
+
+TIME_ZONE = "Asia/Kolkata"
+
+USE_I18N = True
+
+USE_L10N = True
+
+USE_TZ = True
+
+LOGIN_URL = "login"
+
+
+STATIC_URL = "/static/"
+
+DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"
+
+STATIC_ROOT = os.path.join(BASE_DIR, "static")
+
+CORS_ALLOWED_ORIGINS = [
+    "http://127.0.0.1:5500",
+    "http://localhost:3000",
+    "https://devnoms.onrender.com",
+    "https://django-chat-application.onrender.com",
+    "https://coders813-django-chat-application.hf.space"
+]
+CORS_ALLOW_ALL_ORIGINS = True
+CSRF_TRUSTED_ORIGINS = [
+    "https://devnoms.onrender.com",
+    "https://django-chat-application.onrender.com",
+    "https://coders813-django-chat-application.hf.space"
+]
+
+EMAIL_BACKEND = "django.core.mail.backends.smtp.EmailBackend"
+EMAIL_HOST = "smtp.gmail.com"
+EMAIL_PORT = 587
+EMAIL_USE_TLS = True
+EMAIL_HOST_USER = os.getenv("EMAIL_HOST_USER")
+EMAIL_HOST_PASSWORD = os.getenv("EMAIL_HOST_PASSWORD")

devnoms/urls.py

@@ -0,0 +1,61 @@
+from django.contrib import admin
+from chat.views import *
+from django.urls import path
+from django.conf import settings
+from django.contrib.staticfiles.urls import static
+from django.contrib.auth import views as auth_views
+
+urlpatterns = [
+    path("admin/", admin.site.urls),
+    path("", LoginPage, name="login"),
+    path("signup/", SignupPage, name="signup"),
+    path("logout/", LogoutPage, name="logout"),
+    path("user/", HomePage, name="home"),
+    path("edit/", EditProfile, name="edit"),
+    path("user/<str:username>/", userprofile, name="username"),
+    path("add_friend/", add_friend, name="add_friend"),
+    path("accept_request/", accept_request, name="accept_request"),
+    path("delete_friend/", delete_friend, name="delete_friend"),
+    path("search/", search, name="search"),
+    # testing
+    path("test/", test, name="test"),
+    path("test/chat/", test_chat, name="test_chat"),
+    path("test/home/", test_home, name="test_home"),
+    path("test/login/", test_login, name="test_login"),
+    path("test/signup/", test_signup, name="test_signup"),
+    path("test/search/", test_search, name="test_search"),
+    path("test/profile/", test_profile, name="test_profile"),
+    path("test/settings/", test_settings, name="test_settings"),
+    # re_path(r"^.*/$", RedirectView.as_view(pattern_name="login", permanent=False)),
+    path("chat/<str:username>/", chat, name="chat"),
+    path(
+        "password-reset/",
+        CustomPasswordResetView.as_view(),
+        name="password_reset",
+    ),
+    path(
+        "password-reset/done/",
+        auth_views.PasswordResetDoneView.as_view(
+            template_name="./password/password_reset_done.html"
+        ),
+        name="password_reset_done",
+    ),
+    path(
+        "reset/<uidb64>/<token>/",
+        auth_views.PasswordResetConfirmView.as_view(
+            template_name="./password/password_reset_confirm.html"
+        ),
+        name="password_reset_confirm",
+    ),
+    path(
+        "reset/done/",
+        auth_views.PasswordResetCompleteView.as_view(
+            template_name="./password/password_reset_complete.html"
+        ),
+        name="password_reset_complete",
+    ),
+]
+
+
+if settings.DEBUG:
+    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

devnoms/wsgi.py

@@ -0,0 +1,16 @@
+"""
+WSGI config for devnoms project.
+
+It exposes the WSGI callable as a module-level variable named ``application``.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/5.1/howto/deployment/wsgi/
+"""
+
+import os
+
+from django.core.wsgi import get_wsgi_application
+
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'devnoms.settings')
+
+application = get_wsgi_application()

manage.py

@@ -0,0 +1,22 @@
+#!/usr/bin/env python
+"""Django's command-line utility for administrative tasks."""
+import os
+import sys
+
+
+def main():
+    """Run administrative tasks."""
+    os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'devnoms.settings')
+    try:
+        from django.core.management import execute_from_command_line
+    except ImportError as exc:
+        raise ImportError(
+            "Couldn't import Django. Are you sure it's installed and "
+            "available on your PYTHONPATH environment variable? Did you "
+            "forget to activate a virtual environment?"
+        ) from exc
+    execute_from_command_line(sys.argv)
+
+
+if __name__ == '__main__':
+    main()

static/admin/css/autocomplete.css

@@ -0,0 +1,279 @@
+select.admin-autocomplete {
+    width: 20em;
+}
+
+.select2-container--admin-autocomplete.select2-container {
+    min-height: 30px;
+}
+
+.select2-container--admin-autocomplete .select2-selection--single,
+.select2-container--admin-autocomplete .select2-selection--multiple {
+    min-height: 30px;
+    padding: 0;
+}
+
+.select2-container--admin-autocomplete.select2-container--focus .select2-selection,
+.select2-container--admin-autocomplete.select2-container--open .select2-selection {
+    border-color: var(--body-quiet-color);
+    min-height: 30px;
+}
+
+.select2-container--admin-autocomplete.select2-container--focus .select2-selection.select2-selection--single,
+.select2-container--admin-autocomplete.select2-container--open .select2-selection.select2-selection--single {
+    padding: 0;
+}
+
+.select2-container--admin-autocomplete.select2-container--focus .select2-selection.select2-selection--multiple,
+.select2-container--admin-autocomplete.select2-container--open .select2-selection.select2-selection--multiple {
+    padding: 0;
+}
+
+.select2-container--admin-autocomplete .select2-selection--single {
+    background-color: var(--body-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+}
+
+.select2-container--admin-autocomplete .select2-selection--single .select2-selection__rendered {
+    color: var(--body-fg);
+    line-height: 30px;
+}
+
+.select2-container--admin-autocomplete .select2-selection--single .select2-selection__clear {
+    cursor: pointer;
+    float: right;
+    font-weight: bold;
+}
+
+.select2-container--admin-autocomplete .select2-selection--single .select2-selection__placeholder {
+    color: var(--body-quiet-color);
+}
+
+.select2-container--admin-autocomplete .select2-selection--single .select2-selection__arrow {
+    height: 26px;
+    position: absolute;
+    top: 1px;
+    right: 1px;
+    width: 20px;
+}
+
+.select2-container--admin-autocomplete .select2-selection--single .select2-selection__arrow b {
+    border-color: #888 transparent transparent transparent;
+    border-style: solid;
+    border-width: 5px 4px 0 4px;
+    height: 0;
+    left: 50%;
+    margin-left: -4px;
+    margin-top: -2px;
+    position: absolute;
+    top: 50%;
+    width: 0;
+}
+
+.select2-container--admin-autocomplete[dir="rtl"] .select2-selection--single .select2-selection__clear {
+    float: left;
+}
+
+.select2-container--admin-autocomplete[dir="rtl"] .select2-selection--single .select2-selection__arrow {
+    left: 1px;
+    right: auto;
+}
+
+.select2-container--admin-autocomplete.select2-container--disabled .select2-selection--single {
+    background-color: var(--darkened-bg);
+    cursor: default;
+}
+
+.select2-container--admin-autocomplete.select2-container--disabled .select2-selection--single .select2-selection__clear {
+    display: none;
+}
+
+.select2-container--admin-autocomplete.select2-container--open .select2-selection--single .select2-selection__arrow b {
+    border-color: transparent transparent #888 transparent;
+    border-width: 0 4px 5px 4px;
+}
+
+.select2-container--admin-autocomplete .select2-selection--multiple {
+    background-color: var(--body-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    cursor: text;
+}
+
+.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__rendered {
+    box-sizing: border-box;
+    list-style: none;
+    margin: 0;
+    padding: 0 10px 5px 5px;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__rendered li {
+    list-style: none;
+}
+
+.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__placeholder {
+    color: var(--body-quiet-color);
+    margin-top: 5px;
+    float: left;
+}
+
+.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__clear {
+    cursor: pointer;
+    float: right;
+    font-weight: bold;
+    margin: 5px;
+    position: absolute;
+    right: 0;
+}
+
+.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__choice {
+    background-color: var(--darkened-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    cursor: default;
+    float: left;
+    margin-right: 5px;
+    margin-top: 5px;
+    padding: 0 5px;
+}
+
+.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__choice__remove {
+    color: var(--body-quiet-color);
+    cursor: pointer;
+    display: inline-block;
+    font-weight: bold;
+    margin-right: 2px;
+}
+
+.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__choice__remove:hover {
+    color: var(--body-fg);
+}
+
+.select2-container--admin-autocomplete[dir="rtl"] .select2-selection--multiple .select2-selection__choice, .select2-container--admin-autocomplete[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder, .select2-container--admin-autocomplete[dir="rtl"] .select2-selection--multiple .select2-search--inline {
+    float: right;
+}
+
+.select2-container--admin-autocomplete[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
+    margin-left: 5px;
+    margin-right: auto;
+}
+
+.select2-container--admin-autocomplete[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
+    margin-left: 2px;
+    margin-right: auto;
+}
+
+.select2-container--admin-autocomplete.select2-container--focus .select2-selection--multiple {
+    border: solid var(--body-quiet-color) 1px;
+    outline: 0;
+}
+
+.select2-container--admin-autocomplete.select2-container--disabled .select2-selection--multiple {
+    background-color: var(--darkened-bg);
+    cursor: default;
+}
+
+.select2-container--admin-autocomplete.select2-container--disabled .select2-selection__choice__remove {
+    display: none;
+}
+
+.select2-container--admin-autocomplete.select2-container--open.select2-container--above .select2-selection--single, .select2-container--admin-autocomplete.select2-container--open.select2-container--above .select2-selection--multiple {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+
+.select2-container--admin-autocomplete.select2-container--open.select2-container--below .select2-selection--single, .select2-container--admin-autocomplete.select2-container--open.select2-container--below .select2-selection--multiple {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.select2-container--admin-autocomplete .select2-search--dropdown {
+    background: var(--darkened-bg);
+}
+
+.select2-container--admin-autocomplete .select2-search--dropdown .select2-search__field {
+    background: var(--body-bg);
+    color: var(--body-fg);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+}
+
+.select2-container--admin-autocomplete .select2-search--inline .select2-search__field {
+    background: transparent;
+    color: var(--body-fg);
+    border: none;
+    outline: 0;
+    box-shadow: none;
+    -webkit-appearance: textfield;
+}
+
+.select2-container--admin-autocomplete .select2-results > .select2-results__options {
+    max-height: 200px;
+    overflow-y: auto;
+    color: var(--body-fg);
+    background: var(--body-bg);
+}
+
+.select2-container--admin-autocomplete .select2-results__option[role=group] {
+    padding: 0;
+}
+
+.select2-container--admin-autocomplete .select2-results__option[aria-disabled=true] {
+    color: var(--body-quiet-color);
+}
+
+.select2-container--admin-autocomplete .select2-results__option[aria-selected=true] {
+    background-color: var(--selected-bg);
+    color: var(--body-fg);
+}
+
+.select2-container--admin-autocomplete .select2-results__option .select2-results__option {
+    padding-left: 1em;
+}
+
+.select2-container--admin-autocomplete .select2-results__option .select2-results__option .select2-results__group {
+    padding-left: 0;
+}
+
+.select2-container--admin-autocomplete .select2-results__option .select2-results__option .select2-results__option {
+    margin-left: -1em;
+    padding-left: 2em;
+}
+
+.select2-container--admin-autocomplete .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
+    margin-left: -2em;
+    padding-left: 3em;
+}
+
+.select2-container--admin-autocomplete .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
+    margin-left: -3em;
+    padding-left: 4em;
+}
+
+.select2-container--admin-autocomplete .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
+    margin-left: -4em;
+    padding-left: 5em;
+}
+
+.select2-container--admin-autocomplete .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
+    margin-left: -5em;
+    padding-left: 6em;
+}
+
+.select2-container--admin-autocomplete .select2-results__option--highlighted[aria-selected] {
+    background-color: var(--primary);
+    color: var(--primary-fg);
+}
+
+.select2-container--admin-autocomplete .select2-results__group {
+    cursor: default;
+    display: block;
+    padding: 6px;
+}
+
+.errors .select2-selection {
+    border: 1px solid var(--error-fg);
+}

static/admin/css/base.css

@@ -0,0 +1,1179 @@
+/*
+    DJANGO Admin styles
+*/
+
+/* VARIABLE DEFINITIONS */
+html[data-theme="light"],
+:root {
+    --primary: #79aec8;
+    --secondary: #417690;
+    --accent: #f5dd5d;
+    --primary-fg: #fff;
+
+    --body-fg: #333;
+    --body-bg: #fff;
+    --body-quiet-color: #666;
+    --body-medium-color: #444;
+    --body-loud-color: #000;
+
+    --header-color: #ffc;
+    --header-branding-color: var(--accent);
+    --header-bg: var(--secondary);
+    --header-link-color: var(--primary-fg);
+
+    --breadcrumbs-fg: #c4dce8;
+    --breadcrumbs-link-fg: var(--body-bg);
+    --breadcrumbs-bg: #264b5d;
+
+    --link-fg: #417893;
+    --link-hover-color: #036;
+    --link-selected-fg: var(--secondary);
+
+    --hairline-color: #e8e8e8;
+    --border-color: #ccc;
+
+    --error-fg: #ba2121;
+
+    --message-success-bg: #dfd;
+    --message-warning-bg: #ffc;
+    --message-error-bg: #ffefef;
+
+    --darkened-bg: #f8f8f8; /* A bit darker than --body-bg */
+    --selected-bg: #e4e4e4; /* E.g. selected table cells */
+    --selected-row: #ffc;
+
+    --button-fg: #fff;
+    --button-bg: var(--secondary);
+    --button-hover-bg: #205067;
+    --default-button-bg: #205067;
+    --default-button-hover-bg: var(--secondary);
+    --close-button-bg: #747474;
+    --close-button-hover-bg: #333;
+    --delete-button-bg: #ba2121;
+    --delete-button-hover-bg: #a41515;
+
+    --object-tools-fg: var(--button-fg);
+    --object-tools-bg: var(--close-button-bg);
+    --object-tools-hover-bg: var(--close-button-hover-bg);
+
+    --font-family-primary:
+        "Segoe UI",
+        system-ui,
+        Roboto,
+        "Helvetica Neue",
+        Arial,
+        sans-serif,
+        "Apple Color Emoji",
+        "Segoe UI Emoji",
+        "Segoe UI Symbol",
+        "Noto Color Emoji";
+    --font-family-monospace:
+        ui-monospace,
+        Menlo,
+        Monaco,
+        "Cascadia Mono",
+        "Segoe UI Mono",
+        "Roboto Mono",
+        "Oxygen Mono",
+        "Ubuntu Monospace",
+        "Source Code Pro",
+        "Fira Mono",
+        "Droid Sans Mono",
+        "Courier New",
+        monospace,
+        "Apple Color Emoji",
+        "Segoe UI Emoji",
+        "Segoe UI Symbol",
+        "Noto Color Emoji";
+
+    color-scheme: light;
+}
+
+html, body {
+    height: 100%;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    font-size: 0.875rem;
+    font-family: var(--font-family-primary);
+    color: var(--body-fg);
+    background: var(--body-bg);
+}
+
+/* LINKS */
+
+a:link, a:visited {
+    color: var(--link-fg);
+    text-decoration: none;
+    transition: color 0.15s, background 0.15s;
+}
+
+a:focus, a:hover {
+    color: var(--link-hover-color);
+}
+
+a:focus {
+    text-decoration: underline;
+}
+
+a img {
+    border: none;
+}
+
+a.section:link, a.section:visited {
+    color: var(--header-link-color);
+    text-decoration: none;
+}
+
+a.section:focus, a.section:hover {
+    text-decoration: underline;
+}
+
+/* GLOBAL DEFAULTS */
+
+p, ol, ul, dl {
+    margin: .2em 0 .8em 0;
+}
+
+p {
+    padding: 0;
+    line-height: 140%;
+}
+
+h1,h2,h3,h4,h5 {
+    font-weight: bold;
+}
+
+h1 {
+    margin: 0 0 20px;
+    font-weight: 300;
+    font-size: 1.25rem;
+}
+
+h2 {
+    font-size: 1rem;
+    margin: 1em 0 .5em 0;
+}
+
+h2.subhead {
+    font-weight: normal;
+    margin-top: 0;
+}
+
+h3 {
+    font-size: 0.875rem;
+    margin: .8em 0 .3em 0;
+    color: var(--body-medium-color);
+    font-weight: bold;
+}
+
+h4 {
+    font-size: 0.75rem;
+    margin: 1em 0 .8em 0;
+    padding-bottom: 3px;
+    color: var(--body-medium-color);
+}
+
+h5 {
+    font-size: 0.625rem;
+    margin: 1.5em 0 .5em 0;
+    color: var(--body-quiet-color);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+ul > li {
+    list-style-type: square;
+    padding: 1px 0;
+}
+
+li ul {
+    margin-bottom: 0;
+}
+
+li, dt, dd {
+    font-size: 0.8125rem;
+    line-height: 1.25rem;
+}
+
+dt {
+    font-weight: bold;
+    margin-top: 4px;
+}
+
+dd {
+    margin-left: 0;
+}
+
+form {
+    margin: 0;
+    padding: 0;
+}
+
+fieldset {
+    margin: 0;
+    min-width: 0;
+    padding: 0;
+    border: none;
+    border-top: 1px solid var(--hairline-color);
+}
+
+details summary {
+    cursor: pointer;
+}
+
+blockquote {
+    font-size: 0.6875rem;
+    color: #777;
+    margin-left: 2px;
+    padding-left: 10px;
+    border-left: 5px solid #ddd;
+}
+
+code, pre {
+    font-family: var(--font-family-monospace);
+    color: var(--body-quiet-color);
+    font-size: 0.75rem;
+    overflow-x: auto;
+}
+
+pre.literal-block {
+    margin: 10px;
+    background: var(--darkened-bg);
+    padding: 6px 8px;
+}
+
+code strong {
+    color: #930;
+}
+
+hr {
+    clear: both;
+    color: var(--hairline-color);
+    background-color: var(--hairline-color);
+    height: 1px;
+    border: none;
+    margin: 0;
+    padding: 0;
+    line-height: 1px;
+}
+
+/* TEXT STYLES & MODIFIERS */
+
+.small {
+    font-size: 0.6875rem;
+}
+
+.mini {
+    font-size: 0.625rem;
+}
+
+.help, p.help, form p.help, div.help, form div.help, div.help li {
+    font-size: 0.6875rem;
+    color: var(--body-quiet-color);
+}
+
+div.help ul {
+     margin-bottom: 0;
+}
+
+.help-tooltip {
+    cursor: help;
+}
+
+p img, h1 img, h2 img, h3 img, h4 img, td img {
+    vertical-align: middle;
+}
+
+.quiet, a.quiet:link, a.quiet:visited {
+    color: var(--body-quiet-color);
+    font-weight: normal;
+}
+
+.clear {
+    clear: both;
+}
+
+.nowrap {
+    white-space: nowrap;
+}
+
+.hidden {
+    display: none !important;
+}
+
+/* TABLES */
+
+table {
+    border-collapse: collapse;
+    border-color: var(--border-color);
+}
+
+td, th {
+    font-size: 0.8125rem;
+    line-height: 1rem;
+    border-bottom: 1px solid var(--hairline-color);
+    vertical-align: top;
+    padding: 8px;
+}
+
+th {
+    font-weight: 500;
+    text-align: left;
+}
+
+thead th,
+tfoot td {
+    color: var(--body-quiet-color);
+    padding: 5px 10px;
+    font-size: 0.6875rem;
+    background: var(--body-bg);
+    border: none;
+    border-top: 1px solid var(--hairline-color);
+    border-bottom: 1px solid var(--hairline-color);
+}
+
+tfoot td {
+    border-bottom: none;
+    border-top: 1px solid var(--hairline-color);
+}
+
+thead th.required {
+    font-weight: bold;
+}
+
+tr.alt {
+    background: var(--darkened-bg);
+}
+
+tr:nth-child(odd), .row-form-errors {
+    background: var(--body-bg);
+}
+
+tr:nth-child(even),
+tr:nth-child(even) .errorlist,
+tr:nth-child(odd) + .row-form-errors,
+tr:nth-child(odd) + .row-form-errors .errorlist {
+    background: var(--darkened-bg);
+}
+
+/* SORTABLE TABLES */
+
+thead th {
+    padding: 5px 10px;
+    line-height: normal;
+    text-transform: uppercase;
+    background: var(--darkened-bg);
+}
+
+thead th a:link, thead th a:visited {
+    color: var(--body-quiet-color);
+}
+
+thead th.sorted {
+    background: var(--selected-bg);
+}
+
+thead th.sorted .text {
+    padding-right: 42px;
+}
+
+table thead th .text span {
+    padding: 8px 10px;
+    display: block;
+}
+
+table thead th .text a {
+    display: block;
+    cursor: pointer;
+    padding: 8px 10px;
+}
+
+table thead th .text a:focus, table thead th .text a:hover {
+    background: var(--selected-bg);
+}
+
+thead th.sorted a.sortremove {
+    visibility: hidden;
+}
+
+table thead th.sorted:hover a.sortremove {
+    visibility: visible;
+}
+
+table thead th.sorted .sortoptions {
+    display: block;
+    padding: 9px 5px 0 5px;
+    float: right;
+    text-align: right;
+}
+
+table thead th.sorted .sortpriority {
+    font-size: .8em;
+    min-width: 12px;
+    text-align: center;
+    vertical-align: 3px;
+    margin-left: 2px;
+    margin-right: 2px;
+}
+
+table thead th.sorted .sortoptions a {
+    position: relative;
+    width: 14px;
+    height: 14px;
+    display: inline-block;
+    background: url(../img/sorting-icons.svg) 0 0 no-repeat;
+    background-size: 14px auto;
+}
+
+table thead th.sorted .sortoptions a.sortremove {
+    background-position: 0 0;
+}
+
+table thead th.sorted .sortoptions a.sortremove:after {
+    content: '\\';
+    position: absolute;
+    top: -6px;
+    left: 3px;
+    font-weight: 200;
+    font-size: 1.125rem;
+    color: var(--body-quiet-color);
+}
+
+table thead th.sorted .sortoptions a.sortremove:focus:after,
+table thead th.sorted .sortoptions a.sortremove:hover:after {
+    color: var(--link-fg);
+}
+
+table thead th.sorted .sortoptions a.sortremove:focus,
+table thead th.sorted .sortoptions a.sortremove:hover {
+    background-position: 0 -14px;
+}
+
+table thead th.sorted .sortoptions a.ascending {
+    background-position: 0 -28px;
+}
+
+table thead th.sorted .sortoptions a.ascending:focus,
+table thead th.sorted .sortoptions a.ascending:hover {
+    background-position: 0 -42px;
+}
+
+table thead th.sorted .sortoptions a.descending {
+    top: 1px;
+    background-position: 0 -56px;
+}
+
+table thead th.sorted .sortoptions a.descending:focus,
+table thead th.sorted .sortoptions a.descending:hover {
+    background-position: 0 -70px;
+}
+
+/* FORM DEFAULTS */
+
+input, textarea, select, .form-row p, form .button {
+    margin: 2px 0;
+    padding: 2px 3px;
+    vertical-align: middle;
+    font-family: var(--font-family-primary);
+    font-weight: normal;
+    font-size: 0.8125rem;
+}
+.form-row div.help {
+    padding: 2px 3px;
+}
+
+textarea {
+    vertical-align: top;
+}
+
+/*
+Minifiers remove the default (text) "type" attribute from "input" HTML tags.
+Add input:not([type]) to make the CSS stylesheet work the same.
+*/
+input:not([type]), input[type=text], input[type=password], input[type=email],
+input[type=url], input[type=number], input[type=tel], textarea, select,
+.vTextField {
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    padding: 5px 6px;
+    margin-top: 0;
+    color: var(--body-fg);
+    background-color: var(--body-bg);
+}
+
+/*
+Minifiers remove the default (text) "type" attribute from "input" HTML tags.
+Add input:not([type]) to make the CSS stylesheet work the same.
+*/
+input:not([type]):focus, input[type=text]:focus, input[type=password]:focus,
+input[type=email]:focus, input[type=url]:focus, input[type=number]:focus,
+input[type=tel]:focus, textarea:focus, select:focus, .vTextField:focus {
+    border-color: var(--body-quiet-color);
+}
+
+select {
+    height: 1.875rem;
+}
+
+select[multiple] {
+    /* Allow HTML size attribute to override the height in the rule above. */
+    height: auto;
+    min-height: 150px;
+}
+
+/* FORM BUTTONS */
+
+.button, input[type=submit], input[type=button], .submit-row input, a.button {
+    background: var(--button-bg);
+    padding: 10px 15px;
+    border: none;
+    border-radius: 4px;
+    color: var(--button-fg);
+    cursor: pointer;
+    transition: background 0.15s;
+}
+
+a.button {
+    padding: 4px 5px;
+}
+
+.button:active, input[type=submit]:active, input[type=button]:active,
+.button:focus, input[type=submit]:focus, input[type=button]:focus,
+.button:hover, input[type=submit]:hover, input[type=button]:hover {
+    background: var(--button-hover-bg);
+}
+
+.button[disabled], input[type=submit][disabled], input[type=button][disabled] {
+    opacity: 0.4;
+}
+
+.button.default, input[type=submit].default, .submit-row input.default {
+    border: none;
+    font-weight: 400;
+    background: var(--default-button-bg);
+}
+
+.button.default:active, input[type=submit].default:active,
+.button.default:focus, input[type=submit].default:focus,
+.button.default:hover, input[type=submit].default:hover {
+    background: var(--default-button-hover-bg);
+}
+
+.button[disabled].default,
+input[type=submit][disabled].default,
+input[type=button][disabled].default {
+    opacity: 0.4;
+}
+
+
+/* MODULES */
+
+.module {
+    border: none;
+    margin-bottom: 30px;
+    background: var(--body-bg);
+}
+
+.module p, .module ul, .module h3, .module h4, .module dl, .module pre {
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+.module blockquote {
+    margin-left: 12px;
+}
+
+.module ul, .module ol {
+    margin-left: 1.5em;
+}
+
+.module h3 {
+    margin-top: .6em;
+}
+
+.module h2, .module caption, .inline-group h2 {
+    margin: 0;
+    padding: 8px;
+    font-weight: 400;
+    font-size: 0.8125rem;
+    text-align: left;
+    background: var(--header-bg);
+    color: var(--header-link-color);
+}
+
+.module caption,
+.inline-group h2 {
+    font-size: 0.75rem;
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
+}
+
+.module table {
+    border-collapse: collapse;
+}
+
+/* MESSAGES & ERRORS */
+
+ul.messagelist {
+    padding: 0;
+    margin: 0;
+}
+
+ul.messagelist li {
+    display: block;
+    font-weight: 400;
+    font-size: 0.8125rem;
+    padding: 10px 10px 10px 65px;
+    margin: 0 0 10px 0;
+    background: var(--message-success-bg) url(../img/icon-yes.svg) 40px 12px no-repeat;
+    background-size: 16px auto;
+    color: var(--body-fg);
+    word-break: break-word;
+}
+
+ul.messagelist li.warning {
+    background: var(--message-warning-bg) url(../img/icon-alert.svg) 40px 14px no-repeat;
+    background-size: 14px auto;
+}
+
+ul.messagelist li.error {
+    background: var(--message-error-bg) url(../img/icon-no.svg) 40px 12px no-repeat;
+    background-size: 16px auto;
+}
+
+.errornote {
+    font-size: 0.875rem;
+    font-weight: 700;
+    display: block;
+    padding: 10px 12px;
+    margin: 0 0 10px 0;
+    color: var(--error-fg);
+    border: 1px solid var(--error-fg);
+    border-radius: 4px;
+    background-color: var(--body-bg);
+    background-position: 5px 12px;
+    overflow-wrap: break-word;
+}
+
+ul.errorlist {
+    margin: 0 0 4px;
+    padding: 0;
+    color: var(--error-fg);
+    background: var(--body-bg);
+}
+
+ul.errorlist li {
+    font-size: 0.8125rem;
+    display: block;
+    margin-bottom: 4px;
+    overflow-wrap: break-word;
+}
+
+ul.errorlist li:first-child {
+    margin-top: 0;
+}
+
+ul.errorlist li a {
+    color: inherit;
+    text-decoration: underline;
+}
+
+td ul.errorlist {
+    margin: 0;
+    padding: 0;
+}
+
+td ul.errorlist li {
+    margin: 0;
+}
+
+.form-row.errors {
+    margin: 0;
+    border: none;
+    border-bottom: 1px solid var(--hairline-color);
+    background: none;
+}
+
+.form-row.errors ul.errorlist li {
+    padding-left: 0;
+}
+
+.errors input, .errors select, .errors textarea,
+td ul.errorlist + input, td ul.errorlist + select, td ul.errorlist + textarea {
+    border: 1px solid var(--error-fg);
+}
+
+.description {
+    font-size: 0.75rem;
+    padding: 5px 0 0 12px;
+}
+
+/* BREADCRUMBS */
+
+div.breadcrumbs {
+    background: var(--breadcrumbs-bg);
+    padding: 10px 40px;
+    border: none;
+    color: var(--breadcrumbs-fg);
+    text-align: left;
+}
+
+div.breadcrumbs a {
+    color: var(--breadcrumbs-link-fg);
+}
+
+div.breadcrumbs a:focus, div.breadcrumbs a:hover {
+    color: var(--breadcrumbs-fg);
+}
+
+/* ACTION ICONS */
+
+.viewlink, .inlineviewlink {
+    padding-left: 16px;
+    background: url(../img/icon-viewlink.svg) 0 1px no-repeat;
+}
+
+.hidelink {
+    padding-left: 16px;
+    background: url(../img/icon-hidelink.svg) 0 1px no-repeat;
+}
+
+.addlink {
+    padding-left: 16px;
+    background: url(../img/icon-addlink.svg) 0 1px no-repeat;
+}
+
+.changelink, .inlinechangelink {
+    padding-left: 16px;
+    background: url(../img/icon-changelink.svg) 0 1px no-repeat;
+}
+
+.deletelink {
+    padding-left: 16px;
+    background: url(../img/icon-deletelink.svg) 0 1px no-repeat;
+}
+
+a.deletelink:link, a.deletelink:visited {
+    color: #CC3434; /* XXX Probably unused? */
+}
+
+a.deletelink:focus, a.deletelink:hover {
+    color: #993333; /* XXX Probably unused? */
+    text-decoration: none;
+}
+
+/* OBJECT TOOLS */
+
+.object-tools {
+    font-size: 0.625rem;
+    font-weight: bold;
+    padding-left: 0;
+    float: right;
+    position: relative;
+    margin-top: -48px;
+}
+
+.object-tools li {
+    display: block;
+    float: left;
+    margin-left: 5px;
+    height: 1rem;
+}
+
+.object-tools a {
+    border-radius: 15px;
+}
+
+.object-tools a:link, .object-tools a:visited {
+    display: block;
+    float: left;
+    padding: 3px 12px;
+    background: var(--object-tools-bg);
+    color: var(--object-tools-fg);
+    font-weight: 400;
+    font-size: 0.6875rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.object-tools a:focus, .object-tools a:hover {
+    background-color: var(--object-tools-hover-bg);
+}
+
+.object-tools a:focus{
+    text-decoration: none;
+}
+
+.object-tools a.viewsitelink, .object-tools a.addlink {
+    background-repeat: no-repeat;
+    background-position: right 7px center;
+    padding-right: 26px;
+}
+
+.object-tools a.viewsitelink {
+    background-image: url(../img/tooltag-arrowright.svg);
+}
+
+.object-tools a.addlink {
+    background-image: url(../img/tooltag-add.svg);
+}
+
+/* OBJECT HISTORY */
+
+#change-history table {
+    width: 100%;
+}
+
+#change-history table tbody th {
+    width: 16em;
+}
+
+#change-history .paginator {
+    color: var(--body-quiet-color);
+    border-bottom: 1px solid var(--hairline-color);
+    background: var(--body-bg);
+    overflow: hidden;
+}
+
+/* PAGE STRUCTURE */
+
+#container {
+    position: relative;
+    width: 100%;
+    min-width: 980px;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+#container > .main {
+    display: flex;
+    flex: 1 0 auto;
+}
+
+.main > .content {
+    flex:  1 0;
+    max-width: 100%;
+}
+
+.skip-to-content-link {
+    position: absolute;
+    top: -999px;
+    margin: 5px;
+    padding: 5px;
+    background: var(--body-bg);
+    z-index: 1;
+}
+
+.skip-to-content-link:focus {
+    left: 0px;
+    top: 0px;
+}
+
+#content {
+    padding: 20px 40px;
+}
+
+.dashboard #content {
+    width: 600px;
+}
+
+#content-main {
+    float: left;
+    width: 100%;
+}
+
+#content-related {
+    float: right;
+    width: 260px;
+    position: relative;
+    margin-right: -300px;
+}
+
+@media (forced-colors: active) {
+  #content-related {
+      border: 1px solid;
+  }
+}
+
+/* COLUMN TYPES */
+
+.colMS {
+    margin-right: 300px;
+}
+
+.colSM {
+    margin-left: 300px;
+}
+
+.colSM #content-related {
+    float: left;
+    margin-right: 0;
+    margin-left: -300px;
+}
+
+.colSM #content-main {
+    float: right;
+}
+
+.popup .colM {
+    width: auto;
+}
+
+/* HEADER */
+
+#header {
+    width: auto;
+    height: auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 40px;
+    background: var(--header-bg);
+    color: var(--header-color);
+}
+
+#header a:link, #header a:visited, #logout-form button {
+    color: var(--header-link-color);
+}
+
+#header a:focus , #header a:hover {
+    text-decoration: underline;
+}
+
+@media (forced-colors: active) {
+  #header {
+      border-bottom: 1px solid;
+  }
+}
+
+#branding {
+    display: flex;
+}
+
+#site-name {
+    padding: 0;
+    margin: 0;
+    margin-inline-end: 20px;
+    font-weight: 300;
+    font-size: 1.5rem;
+    color: var(--header-branding-color);
+}
+
+#site-name a:link, #site-name a:visited {
+    color: var(--accent);
+}
+
+#branding h2 {
+    padding: 0 10px;
+    font-size: 0.875rem;
+    margin: -8px 0 8px 0;
+    font-weight: normal;
+    color: var(--header-color);
+}
+
+#branding a:hover {
+    text-decoration: none;
+}
+
+#logout-form {
+    display: inline;
+}
+
+#logout-form button {
+    background: none;
+    border: 0;
+    cursor: pointer;
+    font-family: var(--font-family-primary);
+}
+
+#user-tools {
+    float: right;
+    margin: 0 0 0 20px;
+    text-align: right;
+}
+
+#user-tools, #logout-form button{
+    padding: 0;
+    font-weight: 300;
+    font-size: 0.6875rem;
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
+}
+
+#user-tools a, #logout-form button {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
+}
+
+#user-tools a:focus, #user-tools a:hover,
+#logout-form button:active, #logout-form button:hover {
+    text-decoration: none;
+    border-bottom: 0;
+}
+
+#logout-form button:active, #logout-form button:hover {
+    margin-bottom: 1px;
+}
+
+/* SIDEBAR */
+
+#content-related {
+    background: var(--darkened-bg);
+}
+
+#content-related .module {
+    background: none;
+}
+
+#content-related h3 {
+    color: var(--body-quiet-color);
+    padding: 0 16px;
+    margin: 0 0 16px;
+}
+
+#content-related h4 {
+    font-size: 0.8125rem;
+}
+
+#content-related p {
+    padding-left: 16px;
+    padding-right: 16px;
+}
+
+#content-related .actionlist {
+    padding: 0;
+    margin: 16px;
+}
+
+#content-related .actionlist li {
+    line-height: 1.2;
+    margin-bottom: 10px;
+    padding-left: 18px;
+}
+
+#content-related .module h2 {
+    background: none;
+    padding: 16px;
+    margin-bottom: 16px;
+    border-bottom: 1px solid var(--hairline-color);
+    font-size: 1.125rem;
+    color: var(--body-fg);
+}
+
+.delete-confirmation form input[type="submit"] {
+    background: var(--delete-button-bg);
+    border-radius: 4px;
+    padding: 10px 15px;
+    color: var(--button-fg);
+}
+
+.delete-confirmation form input[type="submit"]:active,
+.delete-confirmation form input[type="submit"]:focus,
+.delete-confirmation form input[type="submit"]:hover {
+    background: var(--delete-button-hover-bg);
+}
+
+.delete-confirmation form .cancel-link {
+    display: inline-block;
+    vertical-align: middle;
+    height: 0.9375rem;
+    line-height: 0.9375rem;
+    border-radius: 4px;
+    padding: 10px 15px;
+    color: var(--button-fg);
+    background: var(--close-button-bg);
+    margin: 0 0 0 10px;
+}
+
+.delete-confirmation form .cancel-link:active,
+.delete-confirmation form .cancel-link:focus,
+.delete-confirmation form .cancel-link:hover {
+    background: var(--close-button-hover-bg);
+}
+
+/* POPUP */
+.popup #content {
+    padding: 20px;
+}
+
+.popup #container {
+    min-width: 0;
+}
+
+.popup #header {
+    padding: 10px 20px;
+}
+
+/* PAGINATOR */
+
+.paginator {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 0.8125rem;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    line-height: 22px;
+    margin: 0;
+    border-top: 1px solid var(--hairline-color);
+    width: 100%;
+}
+
+.paginator a:link, .paginator a:visited {
+    padding: 2px 6px;
+    background: var(--button-bg);
+    text-decoration: none;
+    color: var(--button-fg);
+}
+
+.paginator a.showall {
+    border: none;
+    background: none;
+    color: var(--link-fg);
+}
+
+.paginator a.showall:focus, .paginator a.showall:hover {
+    background: none;
+    color: var(--link-hover-color);
+}
+
+.paginator .end {
+    margin-right: 6px;
+}
+
+.paginator .this-page {
+    padding: 2px 6px;
+    font-weight: bold;
+    font-size: 0.8125rem;
+    vertical-align: top;
+}
+
+.paginator a:focus, .paginator a:hover {
+    color: white;
+    background: var(--link-hover-color);
+}
+
+.paginator input {
+    margin-left: auto;
+}
+
+.base-svgs {
+    display: none;
+}
+
+.visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0,0,0,0);
+    white-space: nowrap;
+    border: 0;
+    color: var(--body-fg);
+    background-color: var(--body-bg);
+}

static/admin/css/changelists.css

@@ -0,0 +1,343 @@
+/* CHANGELISTS */
+
+#changelist {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+}
+
+#changelist .changelist-form-container {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+#changelist table {
+    width: 100%;
+}
+
+.change-list .hiddenfields { display:none; }
+
+.change-list .filtered table {
+    border-right: none;
+}
+
+.change-list .filtered {
+    min-height: 400px;
+}
+
+.change-list .filtered .results, .change-list .filtered .paginator,
+.filtered #toolbar, .filtered div.xfull {
+    width: auto;
+}
+
+.change-list .filtered table tbody th {
+    padding-right: 1em;
+}
+
+#changelist-form .results {
+    overflow-x: auto;
+    width: 100%;
+}
+
+#changelist .toplinks {
+    border-bottom: 1px solid var(--hairline-color);
+}
+
+#changelist .paginator {
+    color: var(--body-quiet-color);
+    border-bottom: 1px solid var(--hairline-color);
+    background: var(--body-bg);
+    overflow: hidden;
+}
+
+/* CHANGELIST TABLES */
+
+#changelist table thead th {
+    padding: 0;
+    white-space: nowrap;
+    vertical-align: middle;
+}
+
+#changelist table thead th.action-checkbox-column {
+    width: 1.5em;
+    text-align: center;
+}
+
+#changelist table tbody td.action-checkbox {
+    text-align: center;
+}
+
+#changelist table tfoot {
+    color: var(--body-quiet-color);
+}
+
+/* TOOLBAR */
+
+#toolbar {
+    padding: 8px 10px;
+    margin-bottom: 15px;
+    border-top: 1px solid var(--hairline-color);
+    border-bottom: 1px solid var(--hairline-color);
+    background: var(--darkened-bg);
+    color: var(--body-quiet-color);
+}
+
+#toolbar form input {
+    border-radius: 4px;
+    font-size: 0.875rem;
+    padding: 5px;
+    color: var(--body-fg);
+}
+
+#toolbar #searchbar {
+    height: 1.1875rem;
+    border: 1px solid var(--border-color);
+    padding: 2px 5px;
+    margin: 0;
+    vertical-align: top;
+    font-size: 0.8125rem;
+    max-width: 100%;
+}
+
+#toolbar #searchbar:focus {
+    border-color: var(--body-quiet-color);
+}
+
+#toolbar form input[type="submit"] {
+    border: 1px solid var(--border-color);
+    font-size: 0.8125rem;
+    padding: 4px 8px;
+    margin: 0;
+    vertical-align: middle;
+    background: var(--body-bg);
+    box-shadow: 0 -15px 20px -10px rgba(0, 0, 0, 0.15) inset;
+    cursor: pointer;
+    color: var(--body-fg);
+}
+
+#toolbar form input[type="submit"]:focus,
+#toolbar form input[type="submit"]:hover {
+    border-color: var(--body-quiet-color);
+}
+
+#changelist-search img {
+    vertical-align: middle;
+    margin-right: 4px;
+}
+
+#changelist-search .help {
+    word-break: break-word;
+}
+
+/* FILTER COLUMN */
+
+#changelist-filter {
+    flex: 0 0 240px;
+    order: 1;
+    background: var(--darkened-bg);
+    border-left: none;
+    margin: 0 0 0 30px;
+}
+
+@media (forced-colors: active) {
+  #changelist-filter {
+      border: 1px solid;
+  }
+}
+
+#changelist-filter h2 {
+    font-size: 0.875rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    padding: 5px 15px;
+    margin-bottom: 12px;
+    border-bottom: none;
+}
+
+#changelist-filter h3,
+#changelist-filter details summary {
+    font-weight: 400;
+    padding: 0 15px;
+    margin-bottom: 10px;
+}
+
+#changelist-filter details summary > * {
+    display: inline;
+}
+
+#changelist-filter details > summary {
+    list-style-type: none;
+}
+
+#changelist-filter details > summary::-webkit-details-marker {
+    display: none;
+}
+
+#changelist-filter details > summary::before {
+    content: '→';
+    font-weight: bold;
+    color: var(--link-hover-color);
+}
+
+#changelist-filter details[open] > summary::before {
+    content: '↓';
+}
+
+#changelist-filter ul {
+    margin: 5px 0;
+    padding: 0 15px 15px;
+    border-bottom: 1px solid var(--hairline-color);
+}
+
+#changelist-filter ul:last-child {
+    border-bottom: none;
+}
+
+#changelist-filter li {
+    list-style-type: none;
+    margin-left: 0;
+    padding-left: 0;
+}
+
+#changelist-filter a {
+    display: block;
+    color: var(--body-quiet-color);
+    word-break: break-word;
+}
+
+#changelist-filter li.selected {
+    border-left: 5px solid var(--hairline-color);
+    padding-left: 10px;
+    margin-left: -15px;
+}
+
+#changelist-filter li.selected a {
+    color: var(--link-selected-fg);
+}
+
+#changelist-filter a:focus, #changelist-filter a:hover,
+#changelist-filter li.selected a:focus,
+#changelist-filter li.selected a:hover {
+    color: var(--link-hover-color);
+}
+
+#changelist-filter #changelist-filter-extra-actions {
+    font-size: 0.8125rem;
+    margin-bottom: 10px;
+    border-bottom: 1px solid var(--hairline-color);
+}
+
+/* DATE DRILLDOWN */
+
+.change-list .toplinks {
+    display: flex;
+    padding-bottom: 5px;
+    flex-wrap: wrap;
+    gap: 3px 17px;
+    font-weight: bold;
+}
+
+.change-list .toplinks a {
+    font-size: 0.8125rem;
+}
+
+.change-list .toplinks .date-back {
+    color: var(--body-quiet-color);
+}
+
+.change-list .toplinks .date-back:focus,
+.change-list .toplinks .date-back:hover {
+    color: var(--link-hover-color);
+}
+
+/* ACTIONS */
+
+.filtered .actions {
+    border-right: none;
+}
+
+#changelist table input {
+    margin: 0;
+    vertical-align: baseline;
+}
+
+/* Once the :has() pseudo-class is supported by all browsers, the tr.selected
+   selector and the JS adding the class can be removed. */
+#changelist tbody tr.selected {
+    background-color: var(--selected-row);
+}
+
+#changelist tbody tr:has(.action-select:checked) {
+    background-color: var(--selected-row);
+}
+
+@media (forced-colors: active) {
+    #changelist tbody tr.selected {
+        background-color: SelectedItem;
+    }
+    #changelist tbody tr:has(.action-select:checked) {
+        background-color: SelectedItem;
+    }
+}
+
+#changelist .actions {
+    padding: 10px;
+    background: var(--body-bg);
+    border-top: none;
+    border-bottom: none;
+    line-height: 1.5rem;
+    color: var(--body-quiet-color);
+    width: 100%;
+}
+
+#changelist .actions span.all,
+#changelist .actions span.action-counter,
+#changelist .actions span.clear,
+#changelist .actions span.question {
+    font-size: 0.8125rem;
+    margin: 0 0.5em;
+}
+
+#changelist .actions:last-child {
+    border-bottom: none;
+}
+
+#changelist .actions select {
+    vertical-align: top;
+    height: 1.5rem;
+    color: var(--body-fg);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    font-size: 0.875rem;
+    padding: 0 0 0 4px;
+    margin: 0;
+    margin-left: 10px;
+}
+
+#changelist .actions select:focus {
+    border-color: var(--body-quiet-color);
+}
+
+#changelist .actions label {
+    display: inline-block;
+    vertical-align: middle;
+    font-size: 0.8125rem;
+}
+
+#changelist .actions .button {
+    font-size: 0.8125rem;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background: var(--body-bg);
+    box-shadow: 0 -15px 20px -10px rgba(0, 0, 0, 0.15) inset;
+    cursor: pointer;
+    height: 1.5rem;
+    line-height: 1;
+    padding: 4px 8px;
+    margin: 0;
+    color: var(--body-fg);
+}
+
+#changelist .actions .button:focus, #changelist .actions .button:hover {
+    border-color: var(--body-quiet-color);
+}

static/admin/css/dark_mode.css

@@ -0,0 +1,130 @@
+@media (prefers-color-scheme: dark) {
+    :root {
+      --primary: #264b5d;
+      --primary-fg: #f7f7f7;
+  
+      --body-fg: #eeeeee;
+      --body-bg: #121212;
+      --body-quiet-color: #d0d0d0;
+      --body-medium-color: #e0e0e0;
+      --body-loud-color: #ffffff;
+  
+      --breadcrumbs-link-fg: #e0e0e0;
+      --breadcrumbs-bg: var(--primary);
+  
+      --link-fg: #81d4fa;
+      --link-hover-color: #4ac1f7;
+      --link-selected-fg: #6f94c6;
+  
+      --hairline-color: #272727;
+      --border-color: #353535;
+  
+      --error-fg: #e35f5f;
+      --message-success-bg: #006b1b;
+      --message-warning-bg: #583305;
+      --message-error-bg: #570808;
+  
+      --darkened-bg: #212121;
+      --selected-bg: #1b1b1b;
+      --selected-row: #00363a;
+  
+      --close-button-bg: #333333;
+      --close-button-hover-bg: #666666;
+
+      color-scheme: dark;
+    }
+  }
+
+
+html[data-theme="dark"] {
+    --primary: #264b5d;
+    --primary-fg: #f7f7f7;
+
+    --body-fg: #eeeeee;
+    --body-bg: #121212;
+    --body-quiet-color: #d0d0d0;
+    --body-medium-color: #e0e0e0;
+    --body-loud-color: #ffffff;
+
+    --breadcrumbs-link-fg: #e0e0e0;
+    --breadcrumbs-bg: var(--primary);
+
+    --link-fg: #81d4fa;
+    --link-hover-color: #4ac1f7;
+    --link-selected-fg: #6f94c6;
+
+    --hairline-color: #272727;
+    --border-color: #353535;
+
+    --error-fg: #e35f5f;
+    --message-success-bg: #006b1b;
+    --message-warning-bg: #583305;
+    --message-error-bg: #570808;
+
+    --darkened-bg: #212121;
+    --selected-bg: #1b1b1b;
+    --selected-row: #00363a;
+
+    --close-button-bg: #333333;
+    --close-button-hover-bg: #666666;
+
+    color-scheme: dark;
+}
+
+/* THEME SWITCH */
+.theme-toggle {
+    cursor: pointer;
+    border: none;
+    padding: 0;
+    background: transparent;
+    vertical-align: middle;
+    margin-inline-start: 5px;
+    margin-top: -1px;
+}
+
+.theme-toggle svg {
+    vertical-align: middle;
+    height: 1rem;
+    width: 1rem;
+    display: none;
+}
+
+/*
+Fully hide screen reader text so we only show the one matching the current
+theme.
+*/
+.theme-toggle .visually-hidden {
+    display: none;
+}
+
+html[data-theme="auto"] .theme-toggle .theme-label-when-auto {
+    display: block;
+}
+
+html[data-theme="dark"] .theme-toggle .theme-label-when-dark {
+    display: block;
+}
+
+html[data-theme="light"] .theme-toggle .theme-label-when-light {
+    display: block;
+}
+
+/* ICONS */
+.theme-toggle svg.theme-icon-when-auto,
+.theme-toggle svg.theme-icon-when-dark,
+.theme-toggle svg.theme-icon-when-light {
+    fill: var(--header-link-color);
+    color: var(--header-bg);
+}
+
+html[data-theme="auto"] .theme-toggle svg.theme-icon-when-auto {
+    display: block;
+}
+
+html[data-theme="dark"] .theme-toggle svg.theme-icon-when-dark {
+    display: block;
+}
+
+html[data-theme="light"] .theme-toggle svg.theme-icon-when-light {
+    display: block;
+}