From 2f7f3772ec8e7c548d4ff77e9f6646c53487a8a6 Mon Sep 17 00:00:00 2001
From: Lain Iwakura <lain@iwakurahome.ru>
Date: Mon, 16 Jun 2025 03:18:02 +0300
Subject: [PATCH] updated message bar x2

---
 main/index.php  | 82 +++++++++++++++++++++++++------------------------
 main/styles.css | 46 +++++++++++++--------------
 2 files changed, 63 insertions(+), 65 deletions(-)

diff --git a/main/index.php b/main/index.php
index 8ae7dfd..1a1ecc7 100644
--- a/main/index.php
+++ b/main/index.php
@@ -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);
diff --git a/main/styles.css b/main/styles.css
index 60a197f..0eed1b0 100644
--- a/main/styles.css
+++ b/main/styles.css
@@ -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;
+    }
 }