updated message bar x2

This commit is contained in:
Lain Iwakura 2025-06-16 03:18:02 +03:00
parent 69869073ab
commit 2f7f3772ec
No known key found for this signature in database
GPG Key ID: C7C18257F2ADC6F8
2 changed files with 63 additions and 65 deletions

View File

@ -101,49 +101,51 @@ try {
</div>
</div>
<?php if (!empty($error)): ?>
<div class="error"><?= htmlspecialchars($error) ?></div>
<?php endif; ?>
<div class="chat-container">
<?php if (!empty($error)): ?>
<div class="error"><?= htmlspecialchars($error) ?></div>
<?php endif; ?>
<div class="messages-container" id="messages">
<?php foreach ($messages as $msg): ?>
<div class="message">
<span class="username"><?= htmlspecialchars($msg['username']) ?></span>
<?php if ($msg['is_encrypted']): ?>
<span class="encrypted">[Encrypted]</span>
<?php endif; ?>
<span class="time"><?= $msg['created_at'] ?></span>
<div class="clear"></div>
<div class="message-content"><?= nl2br(htmlspecialchars($msg['message'])) ?></div>
<?php if ($msg['signature']): ?>
<div class="signature">Signature: <?= htmlspecialchars($msg['signature']) ?></div>
<?php endif; ?>
<?php if (!empty($_SESSION['is_moderator'])): ?>
<form method="get" style="display:inline">
<input type="hidden" name="delete" value="<?= $msg['id'] ?>">
<button type="submit" class="delete-btn">удалить</button>
</form>
<?php endif; ?>
</div>
<?php endforeach; ?>
<div class="messages-container" id="messages">
<?php foreach ($messages as $msg): ?>
<div class="message">
<span class="username"><?= htmlspecialchars($msg['username']) ?></span>
<?php if ($msg['is_encrypted']): ?>
<span class="encrypted">[Encrypted]</span>
<?php endif; ?>
<span class="time"><?= $msg['created_at'] ?></span>
<div class="clear"></div>
<div class="message-content"><?= nl2br(htmlspecialchars($msg['message'])) ?></div>
<?php if ($msg['signature']): ?>
<div class="signature">Signature: <?= htmlspecialchars($msg['signature']) ?></div>
<?php endif; ?>
<?php if (!empty($_SESSION['is_moderator'])): ?>
<form method="get" style="display:inline">
<input type="hidden" name="delete" value="<?= $msg['id'] ?>">
<button type="submit" class="delete-btn">удалить</button>
</form>
<?php endif; ?>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
<div class="message-bar">
<form method="post" class="message-form">
<div class="message-inputs">
<input type="text" name="username" placeholder="Your username" required maxlength="50" value="<?= isset($_SESSION['username']) ? htmlspecialchars($_SESSION['username']) : '' ?>">
<textarea name="message" placeholder="Your message" required></textarea>
</div>
<div class="message-options">
<textarea name="signature" placeholder="PGP signature (optional)" class="signature-input"></textarea>
<div class="checkbox-wrapper">
<input type="checkbox" name="encrypted" id="encrypted">
<label for="encrypted">Message is encrypted</label>
<div class="message-bar">
<form method="post" class="message-form">
<div class="message-inputs">
<input type="text" name="username" placeholder="Your username" required maxlength="50" value="<?= isset($_SESSION['username']) ? htmlspecialchars($_SESSION['username']) : '' ?>">
<textarea name="message" placeholder="Your message" required></textarea>
</div>
<button type="submit" class="send-btn">Send</button>
</div>
</form>
<div class="message-options">
<textarea name="signature" placeholder="PGP signature (optional)" class="signature-input"></textarea>
<div class="checkbox-wrapper">
<input type="checkbox" name="encrypted" id="encrypted">
<label for="encrypted">Message is encrypted</label>
</div>
<button type="submit" class="send-btn">Send</button>
</div>
</form>
</div>
</div>
<script>
@ -165,7 +167,7 @@ try {
messagesContainer.innerHTML = doc.getElementById('messages').innerHTML;
if (isScrolledToBottom) {
window.scrollTo(0, document.body.scrollHeight);
messagesContainer.scrollTop = messagesContainer.scrollHeight;
}
});
}, 5000);

View File

@ -12,20 +12,20 @@ body {
.container {
max-width: 700px;
margin: 0 auto;
padding: 24px 12px;
padding: 0;
flex: 1;
width: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
height: 100vh;
}
.header {
margin-bottom: 18px;
position: sticky;
top: 0;
padding: 12px;
background: #fff;
padding: 12px 0;
z-index: 100;
border-bottom: 1px solid #eee;
flex-shrink: 0;
}
.header h1 {
@ -48,23 +48,21 @@ body {
font-size: 1em;
}
.source-btn {
background: #222;
color: #fff !important;
padding: 4px 12px;
border-radius: 4px;
text-decoration: none !important;
}
.source-btn:hover {
background: #444;
.chat-container {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
padding: 12px;
}
.messages-container {
margin-bottom: 180px;
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 10px;
padding-bottom: 12px;
}
.message {
@ -100,20 +98,14 @@ body {
}
.message-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #fff;
padding: 12px;
border-top: 1px solid #eee;
box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
z-index: 1000;
flex-shrink: 0;
}
.message-form {
max-width: 700px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 8px;
@ -223,10 +215,14 @@ button:hover {
}
.container {
padding: 12px 8px 0 8px;
padding: 0;
}
.message {
padding: 8px;
}
.chat-container {
padding: 8px;
}
}