feat: Update Docker configuration and enhance AutoUrlManager with copy functionality for example format

frontend/src/AutoUrlManager.jsx

@@ -9,7 +9,9 @@ import {
   IconLoader,
   IconUpload,
   IconDeviceFloppy,
-  IconInfoCircle
+  IconInfoCircle,
+  IconCircleCheck,
+  IconCopy
 } from '@tabler/icons-react';
 
 function AutoUrlManager() {
@@ -119,6 +121,29 @@ function AutoUrlManager() {
     }
   };
 
+  const copyExample = async () => {
+    const text = 'https://test.com/ips.txt 555\nhttps://example.com/blacklist.txt 666';
+    try {
+      if (navigator.clipboard) {
+        await navigator.clipboard.writeText(text);
+      } else {
+        const ta = document.createElement('textarea');
+        ta.value = text;
+        document.body.appendChild(ta);
+        ta.select();
+        document.execCommand('copy');
+        document.body.removeChild(ta);
+      }
+      setMessage('Пример формата скопирован');
+      setMessageType('success');
+      setTimeout(() => setMessage(''), 2000);
+    } catch (e) {
+      setMessage('Не удалось скопировать пример');
+      setMessageType('error');
+      setTimeout(() => setMessage(''), 2000);
+    }
+  };
+
   if (loading) {
     return (
       <div className="d-flex justify-content-center align-items-center" style={{ minHeight: '200px' }}>
@@ -327,22 +352,55 @@ function AutoUrlManager() {
           <h3 className="card-title"><IconInfoCircle className="me-2" />Информация</h3>
         </div>
         <div className="card-body">
-          <div className="row">
+          <div className="row g-4">
             <div className="col-md-6">
-              <h4>Как это работает:</h4>
-              <ul>
-                <li>Добавьте URL-адреса, которые содержат списки IP-адресов</li>
-                <li>Укажите community для каждого URL</li>
-                <li>Нажмите "Загрузить IP-списки" для обработки всех URL</li>
-                <li>IP-адреса будут добавлены в файл bgp_data/ips.txt</li>
+              <h4 className="mb-3">Как это работает</h4>
+              <ul className="list-unstyled m-0">
+                <li className="d-flex align-items-start mb-2">
+                  <span className="text-blue me-2"><IconCircleCheck size={18} /></span>
+                  <span>Добавьте URL-адреса, которые содержат списки IP-адресов</span>
+                </li>
+                <li className="d-flex align-items-start mb-2">
+                  <span className="text-blue me-2"><IconCircleCheck size={18} /></span>
+                  <span>Укажите community для каждого URL (только цифры)</span>
+                </li>
+                <li className="d-flex align-items-start mb-2">
+                  <span className="text-blue me-2"><IconCircleCheck size={18} /></span>
+                  <span>Нажмите «Загрузить IP-списки» для обработки всех URL</span>
+                </li>
+                <li className="d-flex align-items-start">
+                  <span className="text-blue me-2"><IconCircleCheck size={18} /></span>
+                  <span>IP-адреса будут добавлены в файл <code>bgp_data/ips.txt</code></span>
+                </li>
               </ul>
             </div>
             <div className="col-md-6">
-              <h4>Формат файла:</h4>
-              <p>Файл сохраняется в формате:</p>
-              <pre className="bg-light p-2 rounded">
-{`https://test.com/ips.txt 555\nhttps://example.com/blacklist.txt 666`}
-              </pre>
+              <h4 className="mb-3">Формат файла</h4>
+              <div className="card card-sm">
+                <div className="card-header">
+                  <h3 className="card-title">Пример</h3>
+                  <div className="card-actions">
+                    <button className="btn btn-outline-secondary btn-sm" onClick={copyExample}>
+                      <IconCopy className="me-1" />
+                      Копировать
+                    </button>
+                  </div>
+                </div>
+                <div className="card-body">
+                  <pre
+                    className="m-0 p-2 bg-dark text-light rounded"
+                    style={{
+                      fontFamily:
+                        "ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace",
+                      fontSize: '0.875rem',
+                      overflow: 'auto'
+                    }}
+                  >
+                    <code>{`https://test.com/ips.txt 555\nhttps://example.com/blacklist.txt 666`}</code>
+                  </pre>
+                  <div className="text-muted small mt-2">Каждая строка: URL и community через пробел</div>
+                </div>
+              </div>
             </div>
           </div>
         </div>