Привет, это код, который я создаю для чата. Я использую python с flask и flask -wtforms. Я хочу создать страницу чата, но я не знаю как. я хочу, возможно, обернуть каждое сообщение текстовым полем и раскрасить его, я хочу добавить фон и прочее. сделать его похожим на дизайн мессенджера
{% extends "bootstrap/base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
<html>
<head>
<title>Flask-SocketIO-Chat: {{ room }}</title>
{% block styles %}
<link rel="stylesheet" href="{{url_for('static', filename='chat.css')}}">
{% endblock %}
{% block scripts %}
<script type="text/javascript" src="//code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>
<script type="text/javascript" charset="utf-8">
var socket;
$(document).ready(function(){
socket = io.connect('http://' + document.domain + ':' + location.port + '/chat');
socket.on('connect', function() {
socket.emit('joined', {});
});
socket.on('status', function(data) {
$('#chat').val($('#chat').val() + '<' + data.msg + '>\n');
$('#chat').scrollTop($('#chat')[0].scrollHeight);
});
socket.on('message', function(data) {
$('#chat').val($('#chat').val() + data.msg. + '\n');
$('#chat').scrollTop($('#chat')[0].scrollHeight);
});
$('#text').keypress(function(e) {
var code = e.keyCode || e.which;
if (code == 13) {
text = $('#text').val();
$('#text').val('');
socket.emit('text', {msg: text});
}
});
});
function leave_room() {
socket.emit('left', {}, function() {
socket.disconnect();
// go back to the login page
window.location.href = "{{ url_for('main.index') }}";
});
}
</script>
{{super()}}
{% endblock %}
</head>
<body>
{% block content %}
<div class="outerContainer">
<div class="container">
<h1>Flask-SocketIO-Chat: {{ room }}</h1>
<textarea id="chat" cols="80" rows="20"></textarea><br><br>
<input id="text" size="80" placeholder="Enter your message here"><br><br>
<a href="#" onclick="leave_room();">Leave this room</a>
</div>
</div>
</body>
{% endblock %}
</html>
так выглядит