updated messages bar

main/index.php

@@ -102,7 +102,7 @@ try {
         </div>
 
         <?php if (!empty($error)): ?>
-            <div class="error" style="color:red; margin-bottom:10px;"> <?= htmlspecialchars($error) ?> </div>
+            <div class="error"><?= htmlspecialchars($error) ?></div>
         <?php endif; ?>
 
         <div class="messages-container" id="messages">
@@ -121,25 +121,29 @@ try {
                     <?php if (!empty($_SESSION['is_moderator'])): ?>
                         <form method="get" style="display:inline">
                             <input type="hidden" name="delete" value="<?= $msg['id'] ?>">
-                            <button type="submit" style="color:#a00; background:none; border:none; cursor:pointer;">удалить</button>
+                            <button type="submit" class="delete-btn">удалить</button>
                         </form>
                     <?php endif; ?>
                 </div>
             <?php endforeach; ?>
         </div>
+    </div>
 
-        <div class="form-container">
-            <form method="post">
+    <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>
-                <textarea name="signature" placeholder="PGP signature (optional)"></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>
-                <button type="submit">Send Message</button>
-            </form>
-        </div>
+                <button type="submit" class="send-btn">Send</button>
+            </div>
+        </form>
     </div>
 
     <script>

main/styles.css

@@ -4,6 +4,7 @@ body {
     padding: 0;
     background: #fff;
     color: #222;
+    padding-bottom: 200px;
 }
 
 .container {
@@ -17,6 +18,12 @@ body {
 
 .header {
     margin-bottom: 18px;
+    position: sticky;
+    top: 0;
+    background: #fff;
+    padding: 12px 0;
+    z-index: 100;
+    border-bottom: 1px solid #eee;
 }
 
 .header h1 {
@@ -27,10 +34,13 @@ body {
 
 .header-buttons {
     margin-bottom: 8px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: center;
 }
 
 .header-buttons a {
-    margin-right: 16px;
     color: #222;
     text-decoration: underline;
     font-size: 1em;
@@ -60,6 +70,9 @@ body {
     display: flex;
     flex-direction: column;
     gap: 2px;
+    padding: 12px;
+    border-radius: 8px;
+    background: #f8f9fa;
 }
 
 .username {
@@ -85,37 +98,133 @@ body {
     margin-top: 2px;
 }
 
-.form-container {
-    margin-top: 12px;
-    padding-top: 12px;
+.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);
+}
+
+.message-form {
+    max-width: 700px;
+    margin: 0 auto;
     display: flex;
     flex-direction: column;
     gap: 8px;
 }
 
+.message-inputs {
+    display: flex;
+    gap: 8px;
+}
+
+.message-inputs input[type="text"] {
+    width: 150px;
+    flex-shrink: 0;
+}
+
+.message-inputs textarea {
+    flex: 1;
+    min-height: 40px;
+    resize: none;
+}
+
+.message-options {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.signature-input {
+    flex: 1;
+    min-height: 40px;
+    resize: none;
+}
+
 input[type="text"], textarea {
-    width: 100%;
     font-size: 1em;
-    padding: 6px;
-    margin-bottom: 4px;
-    border: 1px solid #ccc;
+    padding: 8px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
     box-sizing: border-box;
 }
 
 button {
-    width: fit-content;
     font-size: 1em;
-    padding: 6px 16px;
-    background: #fff;
-    color: #222;
-    border: 1px solid #ccc;
+    padding: 8px 16px;
+    background: #222;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
     cursor: pointer;
 }
 
+button:hover {
+    background: #444;
+}
+
 .checkbox-wrapper {
     display: flex;
     align-items: center;
     gap: 6px;
 }
 
+.delete-btn {
+    background: none;
+    color: #dc3545;
+    padding: 0;
+    font-size: 0.9em;
+}
+
+.delete-btn:hover {
+    background: none;
+    text-decoration: underline;
+}
+
+.error {
+    color: #dc3545;
+    margin-bottom: 10px;
+    padding: 8px;
+    background: #fff;
+    border-radius: 4px;
+    border: 1px solid #dc3545;
+}
+
 .api-info, .api-info pre, .modal, .modal-content, .close { display: none !important; }
+
+@media (max-width: 600px) {
+    .message-inputs {
+        flex-direction: column;
+    }
+    
+    .message-inputs input[type="text"] {
+        width: 100%;
+    }
+    
+    .message-options {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    
+    .signature-input {
+        width: 100%;
+    }
+    
+    .header-buttons {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    
+    .container {
+        padding: 12px 8px 0 8px;
+    }
+    
+    .message {
+        padding: 8px;
+    }
+}