mirror of
https://github.com/rudy3333/eversync.git
synced 2025-07-04 18:16:01 +00:00
286 lines
No EOL
10 KiB
HTML
286 lines
No EOL
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<title>Eversync</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
|
|
{% load static %}
|
|
<link rel="icon" href="{% static 'favicon.ico' %}" />
|
|
<link rel="stylesheet" href="{% static 'index-style.css' %}" />
|
|
<link rel="stylesheet" href="{% static 'login-style.css' %}" />
|
|
|
|
{% block scripts %}
|
|
{% include "sentry_replay.html" %}
|
|
{% endblock %}
|
|
|
|
<style>
|
|
.container {
|
|
display: flex;
|
|
gap: 30px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.welcome-box {
|
|
flex: 0 0 250px;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
max-width: 250px;
|
|
}
|
|
|
|
.content-box {
|
|
margin: 40px auto 0 auto;
|
|
max-width: 600px;
|
|
padding: 20px;
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.container {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.welcome-box {
|
|
flex: none;
|
|
width: auto;
|
|
max-width: 90vw;
|
|
margin: 0 0 20px 0;
|
|
padding: 15px;
|
|
}
|
|
.content-box {
|
|
margin: 40px auto 0 auto;
|
|
width: 100%;
|
|
}
|
|
}
|
|
input.form-control,
|
|
textarea.form-control {
|
|
margin-bottom: 10px;
|
|
width: calc(100% - 20px);
|
|
padding: 10px;
|
|
font-size: 15px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 6px;
|
|
background-color: #f9f9f9;
|
|
transition: border-color 0.3s, box-shadow 0.3s;
|
|
}
|
|
|
|
input.form-control:focus,
|
|
textarea.form-control:focus {
|
|
border-color: #6c63ff;
|
|
box-shadow: 0 0 6px rgba(108, 99, 255, 0.5);
|
|
outline: none;
|
|
background-color: #fff;
|
|
}
|
|
|
|
label.form-label {
|
|
font-weight: 600;
|
|
display: block;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.dark #chat-log {
|
|
background-color: #1f1f1f;
|
|
border-color: #444;
|
|
color: #e4e6eb;
|
|
}
|
|
|
|
.dark #chat-log strong {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.dark #chat-log .btn-danger {
|
|
background-color: #a72828;
|
|
}
|
|
|
|
input.form-control {
|
|
background-color: white;
|
|
color: black;
|
|
border: 1px solid #666;
|
|
padding: 10px;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.dark input.form-control {
|
|
background-color: #2a2b2d;
|
|
color: #e4e6eb;
|
|
border: 1px solid #555;
|
|
}
|
|
|
|
textarea.form-control {
|
|
background-color: white;
|
|
color: black;
|
|
border: 1px solid #666;
|
|
padding: 10px;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
resize: vertical;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.dark textarea.form-control {
|
|
background-color: #2a2b2d;
|
|
color: #e4e6eb;
|
|
border: 1px solid #555;
|
|
}
|
|
|
|
textarea.form-control:focus {
|
|
outline: none;
|
|
border-color: #4599ff;
|
|
box-shadow: 0 0 0 2px rgba(70, 130, 180, 0.3);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<div class="header-content">
|
|
<a href="/"><img src="{% static 'eversync2.png' %}" alt="Eversync Logo" style="height: 80px; margin-right: 10px;" /></a>
|
|
<a href="/" class="logo">eversync</a>
|
|
<div class="nav-links" style="position: relative;">
|
|
<div class="dropdown">
|
|
<button class="dropdown-toggle" style="background: none; border: none; color: white; font-size: 16px; cursor: pointer;">
|
|
Welcome, {{ user.username }} <i class="fas fa-caret-down"></i>
|
|
</button>
|
|
<div class="dropdown-menu" style="display: none; position: absolute; right: 0; background-color: #333; border: 1px solid #444; border-radius: 4px; padding: 10px; width: 184px;">
|
|
<form action="{% url 'manage' %}" method="post" style="margin: 0;">
|
|
{% csrf_token %}
|
|
<button type="submit" class="logout-button" style="background-color: transparent; color: white; border: none; cursor: pointer;">Manage Account</button>
|
|
</form>
|
|
<form action="{% url 'logoutz' %}" method="post" style="margin: 0;">
|
|
{% csrf_token %}
|
|
<button type="submit" class="logout-button" style="background-color: transparent; color: white; border: none; cursor: pointer;">Log Out</button>
|
|
</form>
|
|
<button id="themeToggle" class="logout-button" style="background-color: transparent; color: white; border: none; cursor: pointer;">Toggle Dark Mode</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-box">
|
|
<h2 class="mb-4">Send a Message</h2>
|
|
|
|
<form id="message-form" method="post">
|
|
{% csrf_token %}
|
|
<div class="mb-3">
|
|
<label for="receiver" class="form-label">Recipient:</label>
|
|
<input type="text" id="receiver" name="receiver" class="form-control" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="content" class="form-label">Message:</label>
|
|
<textarea id="content" name="content" class="form-control" rows="3" required></textarea>
|
|
</div>
|
|
<button type="submit" class="login-button">Send</button>
|
|
</form>
|
|
|
|
<hr class="my-5">
|
|
<h2>Chats</h2>
|
|
<ul>
|
|
{% for user in users %}
|
|
<li>
|
|
<a href="{% url 'chat_with_user' user.username %}"
|
|
style="{% if user.unseen_count > 0 %}font-weight: bold;{% endif %}">
|
|
{{ user.username }}{% if user.unseen_count > 0 %} ({{ user.unseen_count }}){% endif %}
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
<!--
|
|
<hr class="my-5">
|
|
|
|
<h3>Inbox</h3>
|
|
<button class="btn btn-secondary mb-3" onclick="loadMessages()">Refresh</button>
|
|
<ul id="messages" class="list-group"></ul>
|
|
|
|
<hr class="my-5">
|
|
<h3>Outbox</h3>
|
|
<button class="btn btn-secondary mb-3" onclick="loadOutbox()">Refresh</button>
|
|
<ul id="outbox-messages" class="list-group"></ul>
|
|
-->
|
|
</div>
|
|
|
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
|
|
|
<script>
|
|
function loadMessages() {
|
|
fetch('/inbox/')
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
let ul = $('#messages');
|
|
ul.empty();
|
|
data.messages.forEach(msg => {
|
|
ul.append(`<li class="list-group-item">
|
|
<strong>${msg.sender}</strong>: ${msg.content}<br>
|
|
<small>${msg.timestamp}</small>
|
|
</form>
|
|
</li>`);
|
|
});
|
|
});
|
|
}
|
|
function loadOutbox() {
|
|
fetch('/outbox/')
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
let ul = $('#outbox-messages');
|
|
ul.empty();
|
|
data.messages.forEach(msg => {
|
|
ul.append(`<li class="list-group-item">
|
|
<strong>To: ${msg.receiver}</strong>: ${msg.content}<br>
|
|
<small>${msg.timestamp}</small>
|
|
<form action="/delete/${msg.id}/" method="post" style="display:inline;">
|
|
<input type="hidden" name="csrfmiddlewaretoken" value="${$('input[name="csrfmiddlewaretoken"]').val()}">
|
|
<button type="submit" class="btn btn-danger btn-sm" style="margin-top:5px; background-color: #dc3545; color: white; border: none; padding: 2px 8px; border-radius: 4px; cursor: pointer;">Delete</button>
|
|
</form>
|
|
</li>`);
|
|
});
|
|
});
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
loadMessages();
|
|
loadOutbox();
|
|
|
|
const toggle = document.querySelector('.dropdown-toggle');
|
|
const menu = document.querySelector('.dropdown-menu');
|
|
toggle.addEventListener('click', function () {
|
|
menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
|
|
});
|
|
|
|
$('#message-form').on('submit', function (e) {
|
|
e.preventDefault();
|
|
let receiver = $('#receiver').val();
|
|
let content = $('#content').val();
|
|
let csrfToken = $('input[name="csrfmiddlewaretoken"]').val();
|
|
|
|
$.post('/send/', {
|
|
receiver: receiver,
|
|
content: content,
|
|
csrfmiddlewaretoken: csrfToken
|
|
}, function (response) {
|
|
$('#content').val('');
|
|
loadMessages();
|
|
loadOutbox(); // Refresh outbox as well after sending
|
|
}).fail(function (xhr) {
|
|
alert('Error: ' + (xhr.responseJSON?.message || 'Something went wrong.'));
|
|
});
|
|
});
|
|
});
|
|
|
|
const toggle = document.getElementById("themeToggle");
|
|
const root = document.documentElement;
|
|
|
|
if (localStorage.getItem("theme") === "dark") {
|
|
root.classList.add("dark");
|
|
}
|
|
|
|
toggle.addEventListener("click", () => {
|
|
root.classList.toggle("dark");
|
|
if (root.classList.contains("dark")) {
|
|
localStorage.setItem("theme", "dark");
|
|
} else {
|
|
localStorage.setItem("theme", "light");
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |