lain/text0Nly
1
0
Fork 0
mirror of https://git.sr.ht/~iwakuralain/text0Nly synced 2025-07-27 15:36:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

updated message bar x2

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
main/index.php
View File

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

46
main/styles.css
View File

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