diff --git a/.gitignore b/.gitignore
index 58c6b60..b1e9fed 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,3 +10,4 @@ static/.DS_Store
 package-lock.json
 package-lock.json
 package-lock.json
+package-lock.json
diff --git a/package-lock.json b/package-lock.json
index d0ba5fd..27e17ac 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,10 +13,12 @@
         "express": "^4.18.2",
         "fs": "^0.0.1-security",
         "handlebars": "^4.7.7",
+        "http": "^0.0.1-security",
         "mapbox-gl": "^2.15.0",
         "multer": "^1.4.5-lts.1",
         "path": "^0.12.7",
-        "pg": "^8.11.1"
+        "pg": "^8.11.1",
+        "ws": "^8.13.0"
       }
     },
     "node_modules/@mapbox/geojson-rewind": {
@@ -478,6 +480,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/http": {
+      "version": "0.0.1-security",
+      "resolved": "https://registry.npmjs.org/http/-/http-0.0.1-security.tgz",
+      "integrity": "sha512-RnDvP10Ty9FxqOtPZuxtebw1j4L/WiqNMDtuc1YMH1XQm5TgDRaR1G9u8upL6KD1bXHSp9eSXo/ED+8Q7FAr+g=="
+    },
     "node_modules/http-errors": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
@@ -1199,6 +1206,26 @@
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
       "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q=="
     },
+    "node_modules/ws": {
+      "version": "8.13.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
+      "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
@@ -1564,6 +1591,11 @@
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
       "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
     },
+    "http": {
+      "version": "0.0.1-security",
+      "resolved": "https://registry.npmjs.org/http/-/http-0.0.1-security.tgz",
+      "integrity": "sha512-RnDvP10Ty9FxqOtPZuxtebw1j4L/WiqNMDtuc1YMH1XQm5TgDRaR1G9u8upL6KD1bXHSp9eSXo/ED+8Q7FAr+g=="
+    },
     "http-errors": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
@@ -2121,6 +2153,12 @@
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
       "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q=="
     },
+    "ws": {
+      "version": "8.13.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
+      "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
+      "requires": {}
+    },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
diff --git a/package.json b/package.json
index 96f03fc..fe70dea 100644
--- a/package.json
+++ b/package.json
@@ -14,9 +14,11 @@
     "express": "^4.18.2",
     "fs": "^0.0.1-security",
     "handlebars": "^4.7.7",
+    "http": "^0.0.1-security",
     "mapbox-gl": "^2.15.0",
     "multer": "^1.4.5-lts.1",
     "path": "^0.12.7",
-    "pg": "^8.11.1"
+    "pg": "^8.11.1",
+    "ws": "^8.13.0"
   }
 }
diff --git a/server.js b/server.js
index cf27b10..c48ea26 100644
--- a/server.js
+++ b/server.js
@@ -6,11 +6,26 @@ const fs = require("fs");
 const handlebars = require("handlebars");
 require("dotenv").config();
 const multer = require("multer");
+const http = require("http");
+const WebSocket = require("ws");
 
-const upload = multer();
+const server = http.createServer(app);
+const wss = new WebSocket.Server({ server });
+
+// Для сохранения загруженных фотографий
+const storage = multer.diskStorage({
+  destination: function (req, file, cb) {
+    cb(null, "uploads"); // Папка для сохранения фотографий
+  },
+  filename: function (req, file, cb) {
+    cb(null, Date.now() + "-" + file.originalname);
+  },
+});
+const upload = multer({ storage: storage });
 
 app.use(express.static(path.join(__dirname, "static")));
 app.use(express.json());
+app.use(express.urlencoded({ extended: false }));
 
 app.get("/", index);
 app.get("/login", login);
@@ -20,21 +35,19 @@ app.get("/reports", reports);
 app.get("/reports/346", reports346);
 app.get("/devices", devices);
 app.get("/devices/drivers", drivers);
-app.get("/devices/newdevice", newdevice);
-app.get("/devices/newdriver", newdriver);
 app.get("/devices/update", update);
 
-// const DB_User = process.env.DB_USER;
-// const DB_Password = process.env.DB_PASSWORD;
-// const DB_Host = process.env.DB_HOST;
-// const DB_Port = process.env.DB_PORT;
-// const DB_Name = process.env.DB_NAME;
+const DB_User = process.env.DB_USER;
+const DB_Password = process.env.DB_PASSWORD;
+const DB_Host = process.env.DB_HOST;
+const DB_Port = process.env.DB_PORT;
+const DB_Name = process.env.DB_NAME;
 
-const DB_User = "postgres";
-const DB_Password = "password";
-const DB_Host = "postgres";
-const DB_Port = "5432";
-const DB_Name = "postgres";
+// const DB_User = "postgres";
+// const DB_Password = "password";
+// const DB_Host = "postgres";
+// const DB_Port = "5432";
+// const DB_Name = "postgres";
 
 async function index(req, res) {
   var templateData = {
@@ -179,6 +192,12 @@ app.post("/devices-geo", async (req, res) => {
 });
 
 async function reports(req, res) {
+  let templateData = {
+    Organisation: "Название организации",
+    User: "Тестовое Имя",
+    ifDBError: false,
+    Registrars: [],
+  };
   try {
     const pool = new Pool({
       user: DB_User,
@@ -190,16 +209,22 @@ async function reports(req, res) {
     const client = await pool.connect();
     // Выполняем запрос и получаем результат
     const query = `
-    SELECT id, cmdno, time, serial, st
-    FROM (
-    SELECT id, cmdno, time, serial, st
-    FROM alarms
-    ORDER BY time DESC
-    LIMIT 100
-    ) AS subquery
-    ORDER BY time ASC;
+      SELECT a.id, a.cmdno, a.time, a.serial, a.st, r.plate, g.latitude, g.longitude
+      FROM (
+        SELECT id, cmdno, time, serial, st
+        FROM alarms
+        ORDER BY time DESC 
+        LIMIT 100
+      ) AS a
+      LEFT JOIN registrars AS r ON a.serial = r.serial
+      LEFT JOIN (
+        SELECT *,
+          ROW_NUMBER() OVER (PARTITION BY serial ORDER BY ABS(EXTRACT(EPOCH FROM (time - $1)))) AS row_num
+        FROM geo
+      ) AS g ON a.serial = g.serial AND g.row_num = 1
+      ORDER BY a.time DESC;
     `;
-    const alarms = await client.query(query);
+    const alarms = await client.query(query, [new Date()]); // Pass current date/time to the query for finding the nearest geoposition.
 
     function formatDate(date) {
       const options = {
@@ -213,36 +238,120 @@ async function reports(req, res) {
       return formattedDate.replace(",", "");
     }
 
-    var templateData = {
-      Organisation: "Название организации",
-      User: "Тестовое Имя",
-      Alarms: alarms.rows.map((alarm) => {
-        let type;
-        switch (alarm.st) {
-          case "0":
-            type = "Усталость";
-            break;
-          case "1":
-            type = "Отсутствие водителя";
-            break;
-          case "2":
-            type = "Разговор по телефону";
-            break;
-          default:
-            type = "Неизвестный тип";
-        }
-        return {
-          id: alarm.id,
-          cmdno: alarm.cmdno,
-          time: formatDate(alarm.time),
-          serial: alarm.serial,
-          st: alarm.st,
-          type: type,
-        };
-      }),
-    };
+    (templateData.Alarms = alarms.rows.map((alarm) => {
+      let type;
+      switch (alarm.st) {
+        case "0":
+          type = "Усталость";
+          break;
+        case "1":
+          type = "Водитель пропал";
+          break;
+        case "2":
+          type = "Разговор по телефону";
+          break;
+        case "3":
+          type = "Курение за рулём";
+          break;
+        case "4":
+          type = "Водитель отвлекся";
+          break;
+        case "5":
+          type = "Выезд с полосы движения";
+          break;
+        case "6":
+          type = "!!! Лобовое столкновение";
+          break;
+        case "7":
+          type = "Скорость превышена";
+          break;
+        case "8":
+          type = "Распознавание номерных знаков";
+          break;
+        case "9":
+          type = "!! Маленькое расстояние спереди";
+          break;
+        case "10":
+          type = "Водитель зевает";
+          break;
+        case "11":
+          type = "!!! Столкновение с пешеходом";
+          break;
+        case "12":
+          type = "Проходы переполнены";
+          break;
+        case "13":
+          type = "!! Посадка/высадка вне остановки";
+          break;
+        case "14":
+          type = "!! Смена полосы с нарушением ПДД";
+          break;
+        case "15":
+          type = "! Включенный телефон у водителя";
+          break;
+        case "16":
+          type = "!!! Ремень безопасности";
+          break;
+        case "17":
+          type = "Проверка не удалась";
+          break;
+        case "18":
+          type = "Слепые зоны справа";
+          break;
+        case "19":
+          type = "!!! Заднее столкновение";
+          break;
+        case "20":
+          type = "!!! Управление без рук";
+          break;
+        case "21":
+          type = "!! Управление одной рукой";
+          break;
+        case "22":
+          type = "Очки, блокирующие инфракрасное излучение";
+          break;
+        case "23":
+          type = "Слепые зоны слева";
+          break;
+        case "24":
+          type = "Помехи для пассажиров";
+          break;
+        case "25":
+          type = "На перекрестке ограничена скорость";
+          break;
+        case "26":
+          type = "Обнаружен перекресток";
+          break;
+        case "27":
+          type = "Пешеходы на переходе";
+          break;
+        case "28":
+          type = "! Неучтивое отношение к пешеходам";
+          break;
+        case "29":
+          type = "Обнаружен пешеходный переход";
+          break;
+        case "30":
+          type = "Водитель матерится";
+          break;
+        default:
+          type = "Неизвестный тип";
+      }
 
-    console.log(templateData);
+      return {
+        id: alarm.id,
+        cmdno: alarm.cmdno,
+        time: formatDate(alarm.time),
+        serial: alarm.serial,
+        st: alarm.st,
+        type: type,
+        plate: alarm.plate,
+        latitude: alarm.latitude,
+        longitude: alarm.longitude,
+        geo: alarm.latitude + "," + alarm.longitude,
+      };
+    })),
+      console.log(templateData);
 
     const source = fs.readFileSync(
       "static/templates/reports/index.html",
@@ -255,7 +364,7 @@ async function reports(req, res) {
     res.send(resultT);
   } catch (error) {
     console.error(error);
-    // templateData.ifDBError = true;
+    templateData.ifDBError = true;
 
     const source = fs.readFileSync(
       "static/templates/reports/index.html",
@@ -265,8 +374,93 @@ async function reports(req, res) {
     const resultT = template(templateData);
     res.send(resultT);
   }
-  // res.sendFile(path.join(__dirname, "static/templates/reports/index.html"));
 }
+app.get("/api/devices", async (req, res) => {
+  try {
+    const pool = new Pool({
+      user: DB_User,
+      host: DB_Host,
+      database: DB_Name,
+      password: DB_Password,
+      port: DB_Port,
+    });
+    const { page = 1, limit = 10 } = req.query;
+    const offset = (page - 1) * limit;
+
+    const query = `
+      SELECT a.id, a.cmdno, a.time, a.serial, a.st, r.plate, g.latitude, g.longitude
+      FROM (
+        SELECT id, cmdno, time, serial, st
+        FROM alarms
+        ORDER BY time DESC 
+        LIMIT $1 OFFSET $2
+      ) AS a
+      LEFT JOIN registrars AS r ON a.serial = r.serial
+      LEFT JOIN (
+        SELECT *,
+          ROW_NUMBER() OVER (PARTITION BY serial ORDER BY ABS(EXTRACT(EPOCH FROM (time - $3)))) AS row_num
+        FROM geo
+      ) AS g ON a.serial = g.serial AND g.row_num = 1
+      ORDER BY a.time DESC;
+    `;
+    const alarms = await pool.query(query, [limit, offset, new Date()]); // Pass current date/time to the query for finding the nearest geoposition.
+
+    function formatDate(date) {
+      const options = {
+        year: "2-digit",
+        month: "2-digit",
+        day: "2-digit",
+        hour: "2-digit",
+        minute: "2-digit",
+      };
+      const formattedDate = new Date(date).toLocaleString("ru-RU", options);
+      return formattedDate.replace(",", "");
+    }
+
+    const alarmsData = alarms.rows.map((alarm) => {
+      let type;
+      switch (alarm.st) {
+        case "0":
+          type = "Усталость";
+          break;
+        case "1":
+          type = "Отсутствие водителя";
+          break;
+        case "2":
+          type = "Разговор по телефону";
+          break;
+        default:
+          type = "Неизвестный тип";
+      }
+      return {
+        id: alarm.id,
+        cmdno: alarm.cmdno,
+        time: formatDate(alarm.time),
+        serial: alarm.serial,
+        st: alarm.st,
+        type: type,
+        plate: alarm.plate,
+        latitude: alarm.latitude,
+        longitude: alarm.longitude,
+        geo: alarm.latitude + "," + alarm.longitude,
+      };
+    });
+
+    const totalCountQuery = "SELECT COUNT(*) FROM alarms;";
+    const totalCount = await pool.query(totalCountQuery);
+
+    const totalPages = Math.ceil(totalCount.rows[0].count / limit);
+
+    res.json({
+      data: alarmsData,
+      totalPages: totalPages,
+    });
+  } catch (error) {
+    console.error("Error executing query:", error);
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
 function reports346(req, res) {
   res.sendFile(path.join(__dirname, "static/templates/reports/346.html"));
 }
@@ -380,6 +574,13 @@ app.post("/devicedata", async (req, res) => {
 });
 
 app.post("/updatedevice", async (req, res) => {
+  const pool = new Pool({
+    user: DB_User,
+    host: DB_Host,
+    database: DB_Name,
+    password: DB_Password,
+    port: DB_Port,
+  });
   const client = await pool.connect();
 
   var {
@@ -503,15 +704,267 @@ app.post("/updatedevice", async (req, res) => {
   }
 });
 
-function drivers(req, res) {
-  res.sendFile(path.join(__dirname, "static/templates/devices/drivers.html"));
-}
-function newdevice(req, res) {
-  res.sendFile(path.join(__dirname, "static/templates/devices/newdevice.html"));
-}
-function newdriver(req, res) {
-  res.sendFile(path.join(__dirname, "static/templates/devices/newdriver.html"));
+app.post("/updatedriver", upload.single("upload-file"), async (req, res) => {
+  const pool = new Pool({
+    user: DB_User,
+    host: DB_Host,
+    database: DB_Name,
+    password: DB_Password,
+    port: DB_Port,
+  });
+  const client = await pool.connect();
+
+  var {
+    driverName,
+    driverSurname,
+    driverCard,
+    driverGender,
+    driverLicense,
+    driverPassport,
+    driverPhone,
+    driverEmail,
+    driverTransport,
+    driverDescription,
+    driverID,
+  } = req.body;
+
+  try {
+    // Вставка новой строки в таблицу drivers
+    const query = `
+      UPDATE drivers
+      SET name = $1,
+          surname = $2,
+          card = $3,
+          gender = $4,
+          license = $5,
+          passport = $6,
+          phone = $7,
+          email = $8,
+          transport = $9,
+          description = $10
+      WHERE id = $11
+      RETURNING *;
+    `;
+
+    const values = [
+      driverName,
+      driverSurname,
+      driverCard,
+      driverGender,
+      driverLicense,
+      driverPassport,
+      driverPhone,
+      driverEmail,
+      driverTransport,
+      driverDescription,
+      driverID,
+    ];
+
+    const result = await client.query(query, values);
+
+    const newRow = result.rows[0];
+    console.log("New driver added:", newRow);
+
+    res.send("Data added successfully");
+  } catch (error) {
+    console.error("Error adding data:", error);
+    res.status(500).send("An error occurred while adding data");
+  } finally {
+    client.release();
+  }
+});
+
+app.post("/adddriver", upload.single("upload-file"), async (req, res) => {
+  const pool = new Pool({
+    user: DB_User,
+    host: DB_Host,
+    database: DB_Name,
+    password: DB_Password,
+    port: DB_Port,
+  });
+  const client = await pool.connect();
+
+  var {
+    driverName,
+    driverSurname,
+    driverCard,
+    driverGender,
+    driverLicense,
+    driverPassport,
+    driverPhone,
+    driverEmail,
+    driverTransport,
+    driverDescription,
+  } = req.body;
+
+  try {
+    // Вставка новой строки в таблицу drivers
+    const query = `
+      INSERT INTO drivers (
+        name,
+        surname,
+        card,
+        gender,
+        license,
+        passport,
+        phone,
+        email,
+        transport,
+        description
+      )
+      VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10)
+      RETURNING *;
+    `;
+
+    const values = [
+      driverName,
+      driverSurname,
+      driverCard,
+      driverGender,
+      driverLicense,
+      driverPassport,
+      driverPhone,
+      driverEmail,
+      driverTransport,
+      driverDescription,
+    ];
+
+    const result = await client.query(query, values);
+
+    const newRow = result.rows[0];
+    console.log("New driver added:", newRow);
+
+    res.send("Data added successfully");
+  } catch (error) {
+    console.error("Error adding data:", error);
+    res.status(500).send("An error occurred while adding data");
+  } finally {
+    client.release();
+  }
+});
+
+app.post("/driverdata", async (req, res) => {
+  const id = req.body.id;
+
+  const pool = new Pool({
+    user: DB_User,
+    host: DB_Host,
+    database: DB_Name,
+    password: DB_Password,
+    port: DB_Port,
+  });
+  const client = await pool.connect();
+
+  try {
+    // Выполняем запрос и получаем результат
+    const query = "SELECT * FROM drivers WHERE id = $1;";
+    const driverdata = await client.query(query, [id]);
+
+    // Формирование и отправка ответа
+    const response = driverdata.rows[0];
+    res.json(response);
+  } finally {
+    client.release();
+  }
+});
+
+app.post("/deletedriver", async (req, res) => {
+  const id = req.body.id;
+
+  const pool = new Pool({
+    user: DB_User,
+    host: DB_Host,
+    database: DB_Name,
+    password: DB_Password,
+    port: DB_Port,
+  });
+  const client = await pool.connect();
+
+  try {
+    // Выполняем запрос и получаем результат
+    const query = "DELETE FROM drivers WHERE id = $1;";
+    const driverdata = await client.query(query, [id]);
+
+    // Формирование и отправка ответа
+    res.send("Data deleted successfully");
+  } finally {
+    client.release();
+  }
+});
+
+async function drivers(req, res) {
+  let templateData = {
+    Organisation: "Название организации",
+    User: "Тестовое Имя",
+    ifDBError: false,
+    Drivers: [],
+    Registrars: [],
+  };
+
+  try {
+    const pool = new Pool({
+      user: DB_User,
+      host: DB_Host,
+      database: DB_Name,
+      password: DB_Password,
+      port: DB_Port,
+    });
+    const client = await pool.connect();
+
+    // Выполняем запрос для объединения данных из таблиц drivers и registrars
+    const queryDrivers = `
+      SELECT d.id, d.name, d.surname, d.transport, d.phone, d.email, d.card, r.connected
+      FROM drivers d
+      LEFT JOIN registrars r ON d.transport = r.serial
+      ORDER BY r.connected DESC NULLS LAST, CASE WHEN r.connected = true THEN 0 ELSE 1 END, d.id
+    `;
+    const driversResult = await client.query(queryDrivers);
+
+    templateData.Drivers = driversResult.rows.map((driver) => ({
+      id: driver.id,
+      name: driver.name,
+      surname: driver.surname,
+      transport: driver.transport,
+      phone: driver.phone,
+      email: driver.email,
+      card: driver.card,
+    }));
+
+    const queryRegistrars = `
+      SELECT serial
+      FROM registrars
+    `;
+    const registrarsResult = await client.query(queryRegistrars);
+
+    templateData.Registrars = registrarsResult.rows.map(
+      (registrar) => registrar.serial
+    );
+
+    console.log(templateData);
+
+    const source = fs.readFileSync(
+      "static/templates/devices/drivers.html",
+      "utf8"
+    );
+    const template = handlebars.compile(source);
+    const resultT = template(templateData);
+    res.send(resultT);
+
+    client.release();
+  } catch (error) {
+    console.error(error);
+    templateData.ifDBError = true;
+
+    const source = fs.readFileSync(
+      "static/templates/devices/drivers.html",
+      "utf8"
+    );
+    const template = handlebars.compile(source);
+    const resultT = template(templateData);
+    res.send(resultT);
+  }
 }
+
 function update(req, res) {
   res.sendFile(path.join(__dirname, "static/templates/devices/update.html"));
 }
diff --git a/static/img/file.svg b/static/img/file.svg
new file mode 100644
index 0000000..3974d92
--- /dev/null
+++ b/static/img/file.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path fill="#8086F9" d="M12 23.988c6.565 0 12-5.444 12-11.994C24 5.433 18.553 0 11.988 0 5.435 0 0 5.433 0 11.994c0 6.55 5.447 11.994 12 11.994Zm0-1.999a9.95 9.95 0 0 1-9.988-9.995C2.012 6.444 6.435 2 11.988 2A9.97 9.97 0 0 1 22 11.994a9.96 9.96 0 0 1-10 9.995ZM9.2 18.32h6.141c1.306 0 1.953-.67 1.953-1.987v-5.056h-4.659c-.812 0-1.2-.376-1.2-1.188V5.35H9.2c-1.294 0-1.953.67-1.953 1.988v8.995c0 1.329.659 1.987 1.953 1.987Zm3.53-7.996h4.494c-.036-.258-.224-.517-.53-.823L13.212 5.95c-.294-.306-.565-.494-.824-.53v4.563c0 .224.118.341.341.341Z"/>
+</svg>
diff --git a/static/scripts/drivers-form.js b/static/scripts/drivers-form.js
new file mode 100644
index 0000000..627de3c
--- /dev/null
+++ b/static/scripts/drivers-form.js
@@ -0,0 +1,114 @@
+$("#continue-main").click(function () {
+  document.getElementById("stage-details").checked = true;
+});
+
+$("#continue-main-edit").click(function () {
+  document.getElementById("stage-details-edit").checked = true;
+});
+
+const container = document.getElementById("new-parameters");
+const content1 = document.getElementById("main");
+const content2 = document.getElementById("details");
+const btn1 = document.getElementById("continue-main");
+const content3 = document.getElementById("main-edit");
+const content4 = document.getElementById("details-edit");
+const btn2 = document.getElementById("continue-main-edit");
+const radioButtons = document.querySelectorAll(
+  'input[type="radio"][name="newStage"]'
+);
+const radioButtonsEdit = document.querySelectorAll(
+  'input[type="radio"][name="newStageEdit"]'
+);
+const duration = 100;
+
+let activeContent = content1;
+
+function switchContent(newContent) {
+  fadeOut(activeContent, () => {
+    fadeIn(newContent);
+    activeContent = newContent;
+  });
+}
+
+function fadeIn(element) {
+  element.style.opacity = 0;
+  element.style.display = "block";
+  let start = performance.now();
+
+  function animate(time) {
+    let timeFraction = (time - start) / duration;
+    if (timeFraction > 1) {
+      element.style.opacity = 1;
+    } else {
+      element.style.opacity = timeFraction;
+      requestAnimationFrame(animate);
+    }
+  }
+
+  requestAnimationFrame(animate);
+}
+
+function fadeOut(element, callback) {
+  element.style.opacity = 1;
+  let start = performance.now();
+
+  function animate(time) {
+    let timeFraction = (time - start) / duration;
+    if (timeFraction > 1) {
+      element.style.opacity = 0;
+      element.style.display = "none";
+      if (callback) {
+        callback();
+      }
+    } else {
+      element.style.opacity = 1 - timeFraction;
+      requestAnimationFrame(animate);
+    }
+  }
+
+  requestAnimationFrame(animate);
+}
+
+btn1.addEventListener("click", () => {
+  if (activeContent === content1) {
+    switchContent(content2);
+  } else {
+    switchContent(content1);
+  }
+});
+
+btn2.addEventListener("click", () => {
+  if (activeContent === content3) {
+    switchContent(content4);
+  } else {
+    switchContent(content3);
+  }
+});
+
+for (let radioButton of radioButtons) {
+  radioButton.addEventListener("change", () => {
+    if (radioButton.value === "main") {
+      switchContent(content1);
+    } else if (radioButton.value === "details") {
+      switchContent(content2);
+    }
+  });
+}
+
+for (let radioButton of radioButtonsEdit) {
+  radioButton.addEventListener("change", () => {
+    if (radioButton.value === "main") {
+      switchContent(content3);
+    } else if (radioButton.value === "details") {
+      switchContent(content4);
+    }
+  });
+}
+
+function truncateText(select) {
+  var maxLength = 30;
+  var option = select.options[select.selectedIndex];
+  if (option.text.length > maxLength) {
+    option.text = option.text.substring(0, maxLength) + "...";
+  }
+}
diff --git a/static/scripts/table-drivers.js b/static/scripts/table-drivers.js
index ff1415d..2aa5e9c 100644
--- a/static/scripts/table-drivers.js
+++ b/static/scripts/table-drivers.js
@@ -1,115 +1,115 @@
-const devices = [
-  {
-    id: "2",
-    group: "2-device-2",
-    driverID: "233",
-    name: "Иван",
-    surname: "Спахов",
-    numberTS: "008803559E",
-    phone: "+7 999 123 45 67",
-    mail: "spahov@mail.ru",
-    driverCard: "RUD0000000000111",
-  },
-  {
-    id: "6",
-    group: "2-device-1",
-    driverID: "782",
-    name: "Александр",
-    surname: "Богаченко",
-    numberTS: "0088036B78",
-    phone: "+7 989 443 23 46",
-    mail: "bogachenko@mail.ru",
-    driverCard: "RUD0000000000111",
-  },
-  {
-    id: "7",
-    group: "2-device-4",
-    driverID: "2943",
-    name: "Михаил",
-    surname: "Гукасян",
-    numberTS: "009800852A",
-    phone: "+7 909 133 55 67",
-    mail: "agucasyan@mail.ru",
-    driverCard: "RUD0000000000111",
-  },
-  {
-    id: "8",
-    group: "2-device-4",
-    driverID: "87",
-    name: "Марат",
-    surname: "Шмидт",
-    numberTS: "009800858D",
-    phone: "+7 915 555 45 89",
-    mail: "shmidt@mail.ru",
-    driverCard: "RUD0000000000111",
-  },
-  {
-    id: "9",
-    group: "1-device-1",
-    driverID: "823",
-    name: "Никита",
-    surname: "Ильяшенко",
-    numberTS: "00980084FD",
-    phone: "+7 909 123 45 67",
-    mail: "iluashenko@mail.ru",
-    driverCard: "RUD0000000000111",
-  },
-  {
-    id: "10",
-    group: "2-device-4",
-    driverID: "15",
-    name: "Валерий",
-    surname: "Сараев",
-    numberTS: "0088036B7F",
-    phone: "+7 909 123 45 67",
-    mail: "saraev@mail.ru",
-    driverCard: "RUD0000000000111",
-  },
-  {
-    id: "11",
-    group: "2-device-3",
-    driverID: "423",
-    name: "Александр",
-    surname: "Курочкин",
-    numberTS: "00880302CD",
-    phone: "+7 999 123 45 67",
-    mail: "curochkin@mail.ru",
-    driverCard: "RUD0000000000111",
-  },
-  {
-    id: "12",
-    group: "1-device-2",
-    driverID: "6456",
-    name: "Екатерина",
-    surname: "Миненко",
-    numberTS: "008802A035",
-    phone: "+7 999 123 45 67",
-    mail: "minenko@mail.ru",
-    driverCard: "RUD0000000000111",
-  },
-  {
-    id: "13",
-    group: "3-device-1",
-    driverID: "887",
-    name: "Виталий",
-    surname: "Гаспарян",
-    numberTS: "008802A96A",
-    phone: "+7 999 123 45 67",
-    mail: "gosparyan@mail.ru",
-    driverCard: "RUD0000000000111",
-  },
-  {
-    id: "15",
-    group: "1-device-1",
-    driverID: "742",
-    name: "Светлана",
-    surname: "Амусова",
-    numberTS: "00880302C7",
-    phone: "+7 999 123 45 67",
-    mail: "amusova@mail.ru",
-    driverCard: "RUD0000000000111",
-  },
-];
+// const devices = [
+//   {
+//     id: "2",
+//     group: "2-device-2",
+//     driverID: "233",
+//     name: "Иван",
+//     surname: "Спахов",
+//     numberTS: "008803559E",
+//     phone: "+7 999 123 45 67",
+//     mail: "spahov@mail.ru",
+//     driverCard: "RUD0000000000111",
+//   },
+//   {
+//     id: "6",
+//     group: "2-device-1",
+//     driverID: "782",
+//     name: "Александр",
+//     surname: "Богаченко",
+//     numberTS: "0088036B78",
+//     phone: "+7 989 443 23 46",
+//     mail: "bogachenko@mail.ru",
+//     driverCard: "RUD0000000000111",
+//   },
+//   {
+//     id: "7",
+//     group: "2-device-4",
+//     driverID: "2943",
+//     name: "Михаил",
+//     surname: "Гукасян",
+//     numberTS: "009800852A",
+//     phone: "+7 909 133 55 67",
+//     mail: "agucasyan@mail.ru",
+//     driverCard: "RUD0000000000111",
+//   },
+//   {
+//     id: "8",
+//     group: "2-device-4",
+//     driverID: "87",
+//     name: "Марат",
+//     surname: "Шмидт",
+//     numberTS: "009800858D",
+//     phone: "+7 915 555 45 89",
+//     mail: "shmidt@mail.ru",
+//     driverCard: "RUD0000000000111",
+//   },
+//   {
+//     id: "9",
+//     group: "1-device-1",
+//     driverID: "823",
+//     name: "Никита",
+//     surname: "Ильяшенко",
+//     numberTS: "00980084FD",
+//     phone: "+7 909 123 45 67",
+//     mail: "iluashenko@mail.ru",
+//     driverCard: "RUD0000000000111",
+//   },
+//   {
+//     id: "10",
+//     group: "2-device-4",
+//     driverID: "15",
+//     name: "Валерий",
+//     surname: "Сараев",
+//     numberTS: "0088036B7F",
+//     phone: "+7 909 123 45 67",
+//     mail: "saraev@mail.ru",
+//     driverCard: "RUD0000000000111",
+//   },
+//   {
+//     id: "11",
+//     group: "2-device-3",
+//     driverID: "423",
+//     name: "Александр",
+//     surname: "Курочкин",
+//     numberTS: "00880302CD",
+//     phone: "+7 999 123 45 67",
+//     mail: "curochkin@mail.ru",
+//     driverCard: "RUD0000000000111",
+//   },
+//   {
+//     id: "12",
+//     group: "1-device-2",
+//     driverID: "6456",
+//     name: "Екатерина",
+//     surname: "Миненко",
+//     numberTS: "008802A035",
+//     phone: "+7 999 123 45 67",
+//     mail: "minenko@mail.ru",
+//     driverCard: "RUD0000000000111",
+//   },
+//   {
+//     id: "13",
+//     group: "3-device-1",
+//     driverID: "887",
+//     name: "Виталий",
+//     surname: "Гаспарян",
+//     numberTS: "008802A96A",
+//     phone: "+7 999 123 45 67",
+//     mail: "gosparyan@mail.ru",
+//     driverCard: "RUD0000000000111",
+//   },
+//   {
+//     id: "15",
+//     group: "1-device-1",
+//     driverID: "742",
+//     name: "Светлана",
+//     surname: "Амусова",
+//     numberTS: "00880302C7",
+//     phone: "+7 999 123 45 67",
+//     mail: "amusova@mail.ru",
+//     driverCard: "RUD0000000000111",
+//   },
+// ];
 
 // Получаем высоту таблицы и определяем, сколько строк помещается на странице
 let currentPage = 1;
@@ -151,7 +151,7 @@ const createTable = () => {
 
     // Добавляем ячейки с данными
     const driverID = document.createElement("td");
-    driverID.textContent = device.driverID;
+    driverID.textContent = device.id;
     row.appendChild(driverID);
     const name = document.createElement("td");
     name.textContent = device.name;
@@ -177,9 +177,11 @@ const createTable = () => {
     trashCell.setAttribute("class", "optionsCell");
     const trashButton = document.createElement("button");
     trashButton.setAttribute("class", "trash");
+    trashButton.setAttribute("onclick", `deleteDriver(${device.id})`);
     trashButton.value = `delete-device-${device.id}`;
     trashButton.id = `delete-device-${device.id}`;
     const optionsButton = document.createElement("button");
+    optionsButton.setAttribute("onclick", `openEdit(${device.id})`);
     optionsButton.setAttribute("class", "options");
     optionsButton.value = `options-device-${device.id}`;
     optionsButton.id = `options-device-${device.id}`;
diff --git a/static/scripts/table-reports.js b/static/scripts/table-reports.js
index ae437c1..8210753 100644
--- a/static/scripts/table-reports.js
+++ b/static/scripts/table-reports.js
@@ -1,105 +1,105 @@
-const devices = [
-  {
-    id: "1",
-    group: "0001",
-    name: "Разговор по телефону",
-    reportID: "354",
-    plate: "AO30877",
-    numberTS: "008803559E",
-    time: "12.03.23 17:33",
-    place: "59.852371, 30.344543",
-  },
-  {
-    id: "2",
-    group: "0001",
-    name: "Водитель зевает",
-    reportID: "353",
-    plate: "AO64377",
-    numberTS: "0088036B78",
-    time: "12.03.23 14:26",
-    place: "60.058236, 30.315283",
-  },
-  {
-    id: "3",
-    group: "0002",
-    name: "Усталость",
-    reportID: "352",
-    plate: "ГД44377",
-    numberTS: "009800852A",
-    time: "12.03.23 10:07",
-    place: "59.878256, 30.31962",
-  },
-  {
-    id: "4",
-    group: "0003",
-    name: "Водитель зевает",
-    reportID: "351",
-    plate: "УА86577",
-    numberTS: "009800858D",
-    time: "12.03.23 09:56",
-    place: "60.045981, 30.4134",
-  },
-  {
-    id: "5",
-    group: "0003",
-    name: "Разговор по телефону",
-    reportID: "350",
-    plate: "БВ74665",
-    numberTS: "00980084FD",
-    time: "11.03.23 20:43",
-    place: "59.83257, 30.389893",
-  },
-  {
-    id: "6",
-    group: "0004",
-    name: "Разговор по телефону",
-    reportID: "349",
-    plate: "ЦУ445101",
-    numberTS: "0088036B7F",
-    time: "11.03.23 19:17",
-    place: "59.959926, 30.42224",
-  },
-  {
-    id: "7",
-    group: "0005",
-    name: "Усталость",
-    reportID: "348",
-    plate: "КТ32376",
-    numberTS: "00880302CD",
-    time: "11.03.23 15:32",
-    place: "60.046346, 30.405688",
-  },
-  {
-    id: "8",
-    group: "0006",
-    name: "Курение за рулём",
-    reportID: "347",
-    plate: "ОА33277",
-    numberTS: "008802A035",
-    time: "11.03.23 15:06",
-    place: "59.956626, 30.234408",
-  },
-  {
-    id: "9",
-    group: "0007",
-    name: "Водитель отвлекся",
-    reportID: "346",
-    plate: "КЛ987102",
-    numberTS: "008802A96A",
-    time: "11.03.23 12:44",
-    place: "59.956626, 30.234408",
-  },
-  {
-    id: "10",
-    group: "0002",
-    name: "Водитель отвлекся",
-    reportID: "345",
-    plate: "АУ22377",
-    numberTS: "00880302C7",
-    time: "11.03.23 11:40",
-    place: "59.956626, 30.234408",
-  },
-];
+// const devices = [
+//   {
+//     id: "1",
+//     group: "0001",
+//     name: "Разговор по телефону",
+//     reportID: "354",
+//     plate: "AO30877",
+//     numberTS: "008803559E",
+//     time: "12.03.23 17:33",
+//     place: "59.852371, 30.344543",
+//   },
+//   {
+//     id: "2",
+//     group: "0001",
+//     name: "Водитель зевает",
+//     reportID: "353",
+//     plate: "AO64377",
+//     numberTS: "0088036B78",
+//     time: "12.03.23 14:26",
+//     place: "60.058236, 30.315283",
+//   },
+//   {
+//     id: "3",
+//     group: "0002",
+//     name: "Усталость",
+//     reportID: "352",
+//     plate: "ГД44377",
+//     numberTS: "009800852A",
+//     time: "12.03.23 10:07",
+//     place: "59.878256, 30.31962",
+//   },
+//   {
+//     id: "4",
+//     group: "0003",
+//     name: "Водитель зевает",
+//     reportID: "351",
+//     plate: "УА86577",
+//     numberTS: "009800858D",
+//     time: "12.03.23 09:56",
+//     place: "60.045981, 30.4134",
+//   },
+//   {
+//     id: "5",
+//     group: "0003",
+//     name: "Разговор по телефону",
+//     reportID: "350",
+//     plate: "БВ74665",
+//     numberTS: "00980084FD",
+//     time: "11.03.23 20:43",
+//     place: "59.83257, 30.389893",
+//   },
+//   {
+//     id: "6",
+//     group: "0004",
+//     name: "Разговор по телефону",
+//     reportID: "349",
+//     plate: "ЦУ445101",
+//     numberTS: "0088036B7F",
+//     time: "11.03.23 19:17",
+//     place: "59.959926, 30.42224",
+//   },
+//   {
+//     id: "7",
+//     group: "0005",
+//     name: "Усталость",
+//     reportID: "348",
+//     plate: "КТ32376",
+//     numberTS: "00880302CD",
+//     time: "11.03.23 15:32",
+//     place: "60.046346, 30.405688",
+//   },
+//   {
+//     id: "8",
+//     group: "0006",
+//     name: "Курение за рулём",
+//     reportID: "347",
+//     plate: "ОА33277",
+//     numberTS: "008802A035",
+//     time: "11.03.23 15:06",
+//     place: "59.956626, 30.234408",
+//   },
+//   {
+//     id: "9",
+//     group: "0007",
+//     name: "Водитель отвлекся",
+//     reportID: "346",
+//     plate: "КЛ987102",
+//     numberTS: "008802A96A",
+//     time: "11.03.23 12:44",
+//     place: "59.956626, 30.234408",
+//   },
+//   {
+//     id: "10",
+//     group: "0002",
+//     name: "Водитель отвлекся",
+//     reportID: "345",
+//     plate: "АУ22377",
+//     numberTS: "00880302C7",
+//     time: "11.03.23 11:40",
+//     place: "59.956626, 30.234408",
+//   },
+// ];
 
 // Получаем высоту таблицы и определяем, сколько строк помещается на странице
 let currentPage = 1;
@@ -143,22 +143,22 @@ const createTable = () => {
 
     // Добавляем ячейки с данными
     const name = document.createElement("td");
-    name.textContent = device.name;
+    name.textContent = device.type;
     row.appendChild(name);
     const reportID = document.createElement("td");
-    reportID.textContent = device.reportID;
+    reportID.textContent = device.id;
     row.appendChild(reportID);
     const plate = document.createElement("td");
     plate.textContent = device.plate;
     row.appendChild(plate);
     const numberTS = document.createElement("td");
-    numberTS.textContent = device.numberTS;
+    numberTS.textContent = device.serial;
     row.appendChild(numberTS);
     const time = document.createElement("td");
     time.textContent = device.time;
     row.appendChild(time);
     const place = document.createElement("td");
-    place.textContent = device.place;
+    place.textContent = device.geo;
     row.appendChild(place);
 
     // Добавляем кнопку удаления после каждого ряда
@@ -243,7 +243,7 @@ const applyFilterAndSearch = () => {
 
   filteredDevices = devices.filter((device) => {
     const searchString =
-      `${device.group} ${device.name} ${device.reportID} ${device.place} ${device.numberTS} ${device.time} ${device.place}`.toLowerCase();
+      `${device.group} ${device.name} ${device.id} ${device.place} ${device.numberTS} ${device.time} ${device.place} ${device.geo} ${device.serial}`.toLowerCase();
     const matchGroup =
       groupFilters.length === 0 || groupFilters.includes(device.group);
     const matchSearch = !searchValue || searchString.includes(searchValue);
diff --git a/static/styles/main.css b/static/styles/main.css
index 8b20155..e0c42ee 100644
--- a/static/styles/main.css
+++ b/static/styles/main.css
@@ -445,6 +445,27 @@ header h2 span {
   background-color: #8086f9;
 }
 
+.organisation button {
+  position: absolute;
+  width: fit-content;
+  text-decoration: none;
+  font-size: 18px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.5);
+  padding: 7px;
+  border-radius: 6px;
+  transition: 0.2s;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  bottom: 15px;
+  left: 35px;
+}
+
+.organisation button:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
 .content .table {
   display: inline-block;
   width: calc(100% - 275px);
@@ -1054,6 +1075,69 @@ tr:nth-child(even) {
   margin-top: 2px;
 }
 
+.upload-result {
+  /* width: calc(100% - 200px); */
+  width: 100%;
+  /* float: right; */
+  margin-bottom: 10px;
+  display: block;
+  border-radius: 5px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  display: flex;
+  position: relative;
+}
+
+.image-container #image-preview {
+  margin-top: 5px;
+  max-width: 150px;
+  max-height: 150px;
+  border-radius: 5px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.upload-result #file-name {
+  position: absolute;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  color: rgba(0, 0, 0, 0.75);
+  /* margin-right: 50px; */
+  /* display: flex; */
+  top: 6px;
+  left: 40px;
+}
+
+.upload-result #file-size {
+  position: absolute;
+  bottom: 6px;
+  left: 40px;
+  /* display: flex; */
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  color: rgba(0, 0, 0, 0.5);
+}
+
+.upload-result #file-icon {
+  display: flex;
+  padding: 8px;
+  height: 24px;
+  width: 24px;
+}
+
+.upload-result #clear-button {
+  /* display: flex; */
+  /* padding: 14px; */
+  cursor: pointer;
+  position: absolute;
+  top: 14px;
+  right: 16px;
+  width: 12px;
+  height: 12px;
+}
+
 .drivers select {
   width: 100% !important;
 }
diff --git a/static/templates/devices/drivers.html b/static/templates/devices/drivers.html
index 008fed2..cc6abf2 100644
--- a/static/templates/devices/drivers.html
+++ b/static/templates/devices/drivers.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Устройства</title>
+    <title>Водители</title>
     <link rel="stylesheet" href="../styles/main.css" />
 </head>
 <body>
@@ -49,19 +49,30 @@
     </section>
 
     <section class="main">
+      {{#if ifDBError}}
+      <section class="dberror">
+        <div class="erorr-container">
+          <img src="../img/warning.svg"> <br>
+          <h1>Ошибка </h1> <br>
+          <span>Не удалось получить данные из БД</span>
+          <button type="button" onclick="location.reload();">Повторить попытку</button>
+        </div>
+      </section>
+      {{/if}}
         <div class="name">
             <span>Устройства</span>
         </div>
         <nav>
             <a href="/devices">Список устройств</a>
             <a class="selected" href="/devices/drivers">Водители</a>
-            <a href="/devices/newdevice">Добавить устройство</a>
-            <a href="/devices/newdriver">Добавить водителя</a>
+            <!-- <a href="/devices/newdevice">Добавить устройство</a>  -->
+            <!-- <a href="/devices/newdriver">Добавить водителя</a> -->
 
             <a class="update" href="/devices/update">Обновление ПО</a>
         </nav>
         <section class="bg">
             <section class="content">
+              
 
                 <section class="for-table">
 
@@ -69,7 +80,7 @@
                         <h1>Организация</h1>
 
                         <ul class="area">
-                          <li class="area-name"><img src="../img/ul.svg"><input type="checkbox" id="name-1" class="checkbox-input" hidden checked><label for="name-1" class="checkbox-label">Группа 1</label>
+                          <!-- <li class="area-name"><img src="../img/ul.svg"><input type="checkbox" id="name-1" class="checkbox-input" hidden checked><label for="name-1" class="checkbox-label">Группа 1</label>
                             <ul class="area-devices" id="devices-1">
                               <li class="device"><img><input type="checkbox" id="1-device-1" class="checkbox-input device-filter" value="1-device-1" hidden checked><label for="1-device-1" class="checkbox-label"><div class="checkmark"></div>Трамваи</label></li>
                               <li class="device"><img><input type="checkbox" id="1-device-2" class="checkbox-input device-filter" value="1-device-2" hidden checked><label for="1-device-2" class="checkbox-label"><div class="checkmark"></div>Маршрутки</label></li>
@@ -87,8 +98,10 @@
                             <ul class="area-devices" id="devices-3">
                               <li class="device"><img><input type="checkbox" id="3-device-1" class="checkbox-input device-filter" value="3-device-1" hidden checked><label for="3-device-1" class="checkbox-label"><div class="checkmark"></div>Маршрутки</label></li>
                             </ul>
-                          </li>
+                          </li> -->
                         </ul>
+
+                        <button onclick="openNew()">Добавить водителя</button>
                           
                     </section>
 
@@ -138,8 +151,543 @@
         </section>
     </section>
 
+    <section id="form-bg" class="edit-container">
+
+      <section id="editForm">
+        <section class="for-new">
+
+          <section class="stages">
+              <input name="newStageEdit" type="radio" value="main" id="stage-main-edit" checked><label for="stage-main-edit">Основная информация</label>
+              <div class="vertical-line"></div>
+              <input name="newStageEdit" type="radio" value="details" id="stage-details-edit"><label for="stage-details-edit">Детали</label>
+          </section>
+        </section>
+        <section id="add-new-container" class="add-new">
+          <img src="../img/xmark.svg" id="close-form-btn" onclick="closeForm()">
+
+          <form id="edit-form" enctype="multipart/form-data" method="post" action="/updatedriver">
+            <input type="text" id="driver-id-edit" name="driverID" hidden>
+
+          <div id="main-edit" class="new-parameters drivers active">
+
+              <h1>Основная информация</h1>
+              <h2>Сперва самое необходимое</h2>
+
+              <div class="horizontal-line"></div>
+
+              <label for="parameters-plate">Фотография<span style="color: rgba(255, 69, 58, 1);">*</span></label>
+              <div id="upload-photo-edit" class="upload-input">
+                  <!-- <img src="../img/upload.svg">
+                  <span class="upload-text">Загрузить фотографию водителя</span>
+                  <span class="upload-description">PNG, JPG (макс 20 мб)</span> -->
+                  <img src="../img/warning.svg">
+                  <span class="upload-text">Временно недоступно редактирование фотографии</span>
+                  <span class="upload-description">Остальная информация изменяется</span>
+              </div>
+              <input id="input-upload-photo-edit" type="file" accept=".png, .jpg, .jpeg" name="upload-file" style="display: none;">
+
+              <div class="parameters-inputs">
+                  <label for="driver-name-edit">Имя<span style="color: rgba(255, 69, 58, 1);">*</span></label>
+                  <input name="driverName" type="text" id="driver-name-edit" placeholder="Имя водителя" required>
+
+                  <label for="driver-surname-edit">Фамилия<span style="color: rgba(255, 69, 58, 1);">*</span></label>
+                  <input name="driverSurname" type="text" id="driver-surname-edit" placeholder="Фамилия водителя" required>
+
+                  <label for="driver-card-edit">Карта водителя<span style="color: rgba(255, 69, 58, 1);">*</span></label>
+                  <input name="driverCard" type="text" id="driver-card-edit" placeholder="Номер карты водителя" required>
+
+              </div>
+
+              <div class="horizontal-line"></div>
+
+              <button id="continue-main-edit" type="button">Продолжить</button>
+
+          </div>
+
+          <div id="details-edit" class="new-parameters">
+
+              <h1>Детальная информация</h1>
+              <h2>Для удобства в идентификации</h2>
+
+              <div class="horizontal-line"></div>
+
+              <div class="parameters-inputs">
+
+                  <div class="parameters-input">
+                      <label for="driver-gender-edit">Пол</label>
+                      <select name="driverGender" id="driver-gender-edit">
+                          <option value="NS">Не указывать</option>
+                          <option value="male">Мужской</option>
+                          <option value="female">Женский</option>
+                      </select>
+                  </div>
+
+                  <div class="parameters-input">
+                      <label for="driver-license-edit">Водительское удостоверение<span style="color: rgba(255, 69, 58, 1);">*</span></label>
+                      <input name="driverLicense" type="text" id="driver-license-edit" placeholder="Номер водительского удостоверения" required>
+                  </div>
+
+                  <div class="parameters-input">
+                      <label for="driver-passport-edit">Удостоверение личности<span style="color: rgba(255, 69, 58, 1);">*</span></label>
+                      <input name="driverPassport" type="text" id="driver-passport-edit" placeholder="Номер удостоверения личности" required>
+                  </div>
+
+                  <div class="parameters-input">
+                      <label for="driver-phone-edit">Мобильный телефон<span style="color: rgba(255, 69, 58, 1);">*</span></label>
+                      <input name="driverPhone" type="text" id="driver-phone-edit" placeholder="Номер мобильного телефона" required>
+                  </div>
+
+                  <div class="parameters-input">
+                      <label for="driver-email-edit">Электронная почта<span style="color: rgba(255, 69, 58, 1);">*</span></label>
+                      <input name="driverEmail" type="text" id="driver-email-edit" placeholder="Электронная почта" required>
+                  </div>
+
+                  <div class="parameters-input">
+                      <label for="driver-transport-edit">Транспортное средство</label>
+                      <select name="driverTransport" id="driver-transport-edit">
+                        <option value="NS">Не указывать</option>
+                        {{#each Registrars}}
+                          <option value="{{this}}">{{this}}</option>
+                        {{/each}}
+                      </select>
+                  </div>
+
+                  <label for="driver-description-edit">Примечание</label>
+                  <input name="driverDescription" type="text" id="driver-description-edit" placeholder="Примечание">
+
+              </div>
+
+              <div class="horizontal-line"></div>
+
+              <button type="submit" id="send-edit">Сохранить</button>
+
+          </div>
+
+          </form>
+
+        </section>
+
+
+
+      </section>
+
+      <section id="newForm">
+        <section class="for-new">
+
+          <section class="stages">
+              <input name="newStage" type="radio" value="main" id="stage-main" checked><label for="stage-main">Основная информация</label>
+              <div class="vertical-line"></div>
+              <input name="newStage" type="radio" value="details" id="stage-details"><label for="stage-details">Детали</label>
+          </section>
+        </section>
+        <section id="add-new-container" class="add-new">
+          <img src="../img/xmark.svg" id="close-form-btn" onclick="closeForm()">
+
+          <form id="new-form" enctype="multipart/form-data" method="post" action="/adddriver">
+
+          <div id="main" class="new-parameters drivers active">
+
+              <h1>Основная информация</h1>
+              <h2>Сперва самое необходимое</h2>
+
+              <div class="horizontal-line"></div>
+
+              <label for="parameters-plate">Фотография<span style="color: rgba(255, 69, 58, 1);">*</span></label>
+              <div id="upload-photo" class="upload-input">
+                  <img src="../img/upload.svg">
+                  <span class="upload-text">Загрузить фотографию водителя</span>
+                  <span class="upload-description">PNG, JPG (макс 20 мб)</span>
+              </div>
+              <div class="image-container" id="image-container" style="display: none;">
+                <img id="image-preview" src="#" alt="Uploaded Image">
+                <div class="upload-result">
+                  <img id="file-icon" src="../img/file.svg" />
+                  <span id="file-name"></span>
+                  <span id="file-size"></span>
+                  <img id="clear-button" src="../img/xmark.svg" />
+                </div>
+              </div>
+              <input id="input-upload-photo" type="file" accept=".png, .jpg, .jpeg" name="upload-file" style="display: none;">
+
+              <div class="parameters-inputs">
+                  <label for="driver-name">Имя<span style="color: rgba(255, 69, 58, 1);">*</span></label>
+                  <input name="driverName" type="text" id="driver-name" placeholder="Имя водителя" required>
+
+                  <label for="driver-surname">Фамилия<span style="color: rgba(255, 69, 58, 1);">*</span></label>
+                  <input name="driverSurname" type="text" id="driver-surname" placeholder="Фамилия водителя" required>
+
+                  <label for="driver-card">Карта водителя<span style="color: rgba(255, 69, 58, 1);">*</span></label>
+                  <input name="driverCard" type="text" id="driver-card" placeholder="Номер карты водителя" required>
+
+              </div>
+
+              <div class="horizontal-line"></div>
+
+              <button id="continue-main" type="button">Продолжить</button>
+
+          </div>
+
+          <div id="details" class="new-parameters">
+
+              <h1>Детальная информация</h1>
+              <h2>Для удобства в идентификации</h2>
+
+              <div class="horizontal-line"></div>
+
+              <div class="parameters-inputs">
+
+                  <div class="parameters-input">
+                      <label for="driver-gender">Пол</label>
+                      <select name="driverGender" id="driver-gender">
+                          <option value="NS">Не указывать</option>
+                          <option value="male">Мужской</option>
+                          <option value="female">Женский</option>
+                      </select>
+                  </div>
+
+                  <div class="parameters-input">
+                      <label for="driver-license">Водительское удостоверение<span style="color: rgba(255, 69, 58, 1);">*</span></label>
+                      <input name="driverLicense" type="text" id="driver-license" placeholder="Номер водительского удостоверения" required>
+                  </div>
+
+                  <div class="parameters-input">
+                      <label for="driver-passport">Удостоверение личности<span style="color: rgba(255, 69, 58, 1);">*</span></label>
+                      <input name="driverPassport" type="text" id="driver-passport" placeholder="Номер удостоверения личности" required>
+                  </div>
+
+                  <div class="parameters-input">
+                      <label for="driver-phone">Мобильный телефон<span style="color: rgba(255, 69, 58, 1);">*</span></label>
+                      <input name="driverPhone" type="text" id="driver-phone" placeholder="Номер мобильного телефона" required>
+                  </div>
+
+                  <div class="parameters-input">
+                      <label for="driver-email">Электронная почта<span style="color: rgba(255, 69, 58, 1);">*</span></label>
+                      <input name="driverEmail" type="text" id="driver-email" placeholder="Электронная почта" required>
+                  </div>
+
+                  <div class="parameters-input">
+                      <label for="driver-transport">Транспортное средство</label>
+                      <select name="driverTransport" id="driver-transport">
+                        <option value="NS">Не указывать</option>
+                        {{#each Registrars}}
+                          <option value="{{this}}">{{this}}</option>
+                        {{/each}}
+                      </select>
+                  </div>
+
+                  <label for="driver-description">Примечание</label>
+                  <input name="driverDescription" type="text" id="driver-description" placeholder="Примечание">
+
+              </div>
+
+              <div class="horizontal-line"></div>
+
+              <button type="submit" id="send-form">Сохранить</button>
+
+          </div>
+
+          </form>
+
+        </section>
+
+
+
+      </section>
+
+
+      
+
+        </section>
+        </section>
+        <section style="display: none;" class="dberror" id="deleteConfirmation">
+          <div class="erorr-container">
+            <img src="../img/warning.svg"> <br>
+            <h1>Удаление водителя </h1> <br>
+            <span>Вы уверены что хотите удалить <span id="driverDeleteInfo"></span>?</span>
+            <div class="buttons">
+            <button id="deleteCancel" onclick="closeDeletion();" style="display: inline-block; background-color: white; color: rgba(0, 0, 0, 0.7); margin-right: 5px;" type="button" onclick="deleteDriver()">Отменить</button>
+            <button id="deleteDriver" style="display: inline-block;" type="button">Подтвердить</button>
+          </div>
+          </div>
+        </section>
+
+        <script>
+          const devices = [
+      {{#each Drivers}}
+      {
+        id: "{{this.id}}",
+        name: "{{this.name}}",
+        surname: "{{this.surname}}",
+        numberTS: "{{this.transport}}",
+        phone: "{{this.phone}}",
+        mail: "{{this.email}}",
+        sim: "{{this.sim}}",
+        driverCard: "{{this.card}}",
+      },
+      {{/each}}
+    ];
+        </script>
+
     <script src="../scripts/table-drivers.js"></script>
     <script src="../scripts/jquery.min.js"></script>
+    <script src="https://rawgit.com/RobinHerbots/Inputmask/5.x/dist/jquery.inputmask.js"></script>
+    <script src="../scripts/drivers-form.js"></script>
+
+    <script>
+      const uploadPhotoInput = document.getElementById('input-upload-photo');
+      const uploadContainer = document.getElementById('upload-photo');
+      const imageContainer = document.getElementById('image-container');
+      const imagePreview = document.getElementById('image-preview');
+      const fileNameElement = document.getElementById('file-name');
+      const fileSizeElement = document.getElementById('file-size');
+      const clearButton = document.getElementById('clear-button');
+  
+      uploadPhotoInput.addEventListener('change', function(event) {
+        const file = event.target.files[0];
+        if (file) {
+          const reader = new FileReader();
+          reader.onload = function() {
+            uploadContainer.style.display = 'none';
+            imagePreview.src = reader.result;
+            imageContainer.style.display = 'block';
+            fileNameElement.textContent = file.name ;
+            fileSizeElement.textContent = formatFileSize(file.size);
+          };
+          reader.readAsDataURL(file);
+        }
+      });
+
+      function formatFileSize(bytes) {
+      const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+      if (bytes === 0) return '0 Byte';
+      const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
+      return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
+    }
+  
+      clearButton.addEventListener('click', function() {
+        uploadContainer.style.display = 'block';
+        uploadPhotoInput.value = null;
+        imageContainer.style.display = 'none';
+        imagePreview.src = '#';
+        fileNameElement.textContent = '';
+        fileSizeElement.textContent = '';
+      });
+    </script>
+    <script>
+      var form = document.getElementById('new-form');
+      const sendButton = document.getElementById('send-form');
+  
+      form.addEventListener('submit', function(event) {
+        event.preventDefault();
+  
+        const formData = new FormData(form);
+  
+        const xhr = new XMLHttpRequest();
+        xhr.open('POST', '/adddriver', true);
+  
+        xhr.onload = function() {
+          if (xhr.status === 200) {
+            console.log('Водитель успешно добавлен!');
+            location.reload();
+          } else {
+            console.error('Ошибка отправки формы:', xhr.status);
+          }
+        };
+  
+        xhr.send(formData);
+      });
+
+      var form2 = document.getElementById('edit-form');
+      const editSendButton = document.getElementById('send-edit');
+  
+      form2.addEventListener('submit', function(event) {
+        event.preventDefault();
+  
+        const formData = new FormData(form2);
+  
+        const xhr = new XMLHttpRequest();
+        xhr.open('POST', '/updatedriver', true);
+  
+        xhr.onload = function() {
+          if (xhr.status === 200) {
+            console.log('Информация о водителе успешно обновлена!');
+            location.reload();
+          } else {
+            console.error('Ошибка отправки формы:', xhr.status);
+          }
+        };
+  
+        xhr.send(formData);
+      });
+    </script>
+    <script>
+      const fileSelect = document.getElementById("upload-photo");
+        const fileElem = document.getElementById("input-upload-photo");
+
+        fileSelect.addEventListener(
+                "click",
+                (e) => {
+                        if (fileElem) {
+                                fileElem.click();
+                        }
+                },
+                false
+        );
+      $(document).ready(function(){
+
+          $('#driver-phone').inputmask({"mask": "+7 (999) 999-9999"});
+          $('#driver-phone-edit').inputmask({"mask": "+7 (999) 999-9999"});
+
+      });
+
+      // Открывает popup форму
+      function openNew() {
+
+      var formContainer = $("#form-bg");
+      var newForm = $("#newForm");
+      var editForm = $("#editForm");
+
+      
+
+        activeContent = content1
+        switchContent(content1);
+
+        content2.style.opacity = 0;
+        content2.style.display = "none";
+        content3.style.opacity = 0;
+        content3.style.display = "none";
+        content4.style.opacity = 0;
+        content4.style.display = "none";
+
+        document.getElementById("stage-main").checked = true;
+
+
+        newForm.css("display", "flex");
+        editForm.css("display", "none");
+        // Открытие формы
+        formContainer.addClass("active");
+        newForm.addClass("form-animation");
+        $("body").css("overflow", "hidden");
+      }
+
+      function openEdit(id) {
+
+      var formContainer = $("#form-bg");
+      var newForm = $("#newForm");
+      var editForm = $("#editForm");
+
+      $.ajax({
+        url: "/driverdata", 
+        method: "POST",
+        contentType: "application/json",
+        data: JSON.stringify({ id: id }),
+        success: function(response) {
+          // Установка значений полей формы
+          $("#driver-name-edit").val(response.name);
+          $("#driver-surname-edit").val(response.surname);
+          $("#driver-card-edit").val(response.card);
+          $("#driver-gender-edit").val(response.gender);
+          $("#driver-license-edit").val(response.license);
+          $("#driver-passport-edit").val(response.passport);
+          $("#driver-phone-edit").val(response.phone);
+          $("#driver-email-edit").val(response.email);
+          $("#driver-transport-edit").val(response.transport);
+          $("#driver-description-edit").val(response.description);
+          $("#driver-id-edit").val(response.id);
+
+          activeContent = content3
+          switchContent(content3);
+
+          content1.style.opacity = 0;
+          content1.style.display = "none";
+          content2.style.opacity = 0;
+          content2.style.display = "none";
+          content4.style.opacity = 0;
+          content4.style.display = "none";
+
+          document.getElementById("stage-main").checked = true;
+
+          newForm.css("display", "none");
+          editForm.css("display", "flex");
+          // Открытие формы
+          formContainer.addClass("active");
+          editForm.addClass("form-animation");
+          $("body").css("overflow", "hidden");
+          },
+          error: function() {
+            // Обработка ошибки при запросе к серверу
+            alert("Произошла ошибка при запросе к серверу.");
+          }
+      });
+        
+      }
+
+      var formContainer = $("#form-bg");
+      var newForm = $("#newForm");
+      var editForm = $("#editForm");
+
+      // Функция для закрытия формы
+      function closeForm() {
+        formContainer.removeClass("active");
+        newForm.removeClass("form-animation");
+        editForm.removeClass("form-animation");
+        newForm.css("display", "none");
+        editForm.css("display", "none");
+        $("body").css("overflow", "auto");
+      }
+  </script>
+
+  <script>
+    function deleteDriver(id) {
+
+    var deleteConfirmation = $("#deleteConfirmation");
+
+    $.ajax({
+      url: "/driverdata", 
+      method: "POST",
+      contentType: "application/json",
+      data: JSON.stringify({ id: id }),
+      success: function(response) {
+        // Установка значений полей формы
+        $("#driverDeleteInfo").html(response.name + " " + response.surname);
+        document.getElementById('deleteDriver').setAttribute("onclick", `confirmDelete(${response.id})`);
+
+
+        document.getElementById('deleteConfirmation').style.display = "flex";
+
+        $("body").css("overflow", "hidden");
+        },
+        error: function() {
+          // Обработка ошибки при запросе к серверу
+          alert("Произошла ошибка при запросе к серверу.");
+        }
+    });
+      
+    }
+
+    function closeDeletion() {
+        document.getElementById('deleteConfirmation').style.display = "none";
+      }
+
+    function confirmDelete(id) {
+    $.ajax({
+      url: "/deletedriver", 
+      method: "POST",
+      contentType: "application/json",
+      data: JSON.stringify({ id: id }),
+      success: function(response) {
+        location.reload();
+        },
+        error: function() {
+          // Обработка ошибки при запросе к серверу
+          alert("Произошла ошибка при запросе к серверу.");
+        }
+    });
+      
+    }
+  </script>
+
+
     <script>
         // Скрытие/Показ дополнительных меню аккаунта
         const accountMain = document.getElementById('account-main');
diff --git a/static/templates/devices/index.html b/static/templates/devices/index.html
index 8ca7449..0bf7bb3 100644
--- a/static/templates/devices/index.html
+++ b/static/templates/devices/index.html
@@ -65,8 +65,8 @@
         <nav>
             <a class="selected" href="/devices">Список устройств</a>
             <a href="/devices/drivers">Водители</a>
-            <a href="/devices/newdevice">Добавить устройство</a>
-            <a href="/devices/newdriver">Добавить водителя</a>
+            <!-- <a href="/devices/newdevice">Добавить устройство</a> -->
+            <!-- <a href="/devices/newdriver">Добавить водителя</a> -->
 
             <a class="update" href="/devices/update">Обновление ПО</a>
         </nav>
@@ -404,8 +404,8 @@
               <input name="equipmentInstalled" type="date" id="parameters-equipment-installed" required>
           </div>
 
-              <label for="parameters-device-description">Внешнее описание<span style="color: rgba(255, 69, 58, 1);">*</span></label>
-              <input name="equipmentDescription" type="text" id="parameters-device-description" placeholder="Внешнее описание " required>
+              <label for="parameters-device-description">Внешнее описание</label>
+              <input name="equipmentDescription" type="text" id="parameters-device-description" placeholder="Внешнее описание ">
 
           </div>
 
diff --git a/static/templates/devices/newdevice.html b/static/templates/devices/newdevice.html
deleted file mode 100644
index f5036a2..0000000
--- a/static/templates/devices/newdevice.html
+++ /dev/null
@@ -1,367 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Устройства</title>
-    <link rel="stylesheet" href="../styles/main.css" />
-</head>
-<body>
-
-    <header>
-        <h1>Аргус</h1>
-        <h2><span>/</span> Название организации</h2>
-    </header>
-
-    <section class="account-info">
-      <div id="account-main">
-          <img id="person" src="../img/person.svg">
-          <span>Тестовое Имя</span>
-          <img id="down" src="../img/down.svg">
-          <img id="up" src="../img/up.svg">
-      </div>
-      <a href="/login"><div id="account-additional" class="additional">Выйти</div></a>
-  </section>
-
-    
-
-
-    <section class="navigation">
-        <a href="/">
-            <div><img src="../img/chart.svg">Главная</div>
-        </a>
-        <a href="/devices">
-            <div class="selected"><img src="../img/cloud.svg">Устройства</div>
-        </a>
-        <a href="/reports">
-            <div><img src="../img/bubble.svg">Отчёты</div>
-        </a>
-        <a href="/live">
-            <div><img src="../img/waves.svg">Трансляция</div>
-        </a>
-        <a href="/">
-            <div><img src="../img/play.svg">Записи</div>
-        </a>
-        <a class="settings" href="/">
-            <div><img src="../img/gear.svg">Настройки</div>
-        </a>
-    </section>
-
-    <section class="main">
-        <div class="name">
-            <span>Устройства</span>
-        </div>
-        <nav>
-            <a href="/devices">Список устройств</a>
-            <a href="/devices/drivers">Водители</a>
-            <a class="selected" href="/devices/newdevice">Добавить устройство</a>
-            <a href="/devices/newdriver">Добавить водителя</a>
-
-            <a class="update" href="/devices/update">Обновление ПО</a>
-        </nav>
-        <section class="bg">
-            <section class="content">
-
-              <section class="for-new">
-
-                <section class="stages">
-                    <input name="newStage" type="radio" value="details" id="stage-details" checked><label for="stage-details">Детали</label>
-                    <div class="vertical-line"></div>
-                    <input name="newStage" type="radio" value="sim" id="stage-sim"><label for="stage-sim">SIM - Карта</label>
-                    <div class="vertical-line"></div>
-                    <input name="newStage" type="radio" value="ts" id="stage-ts"><label for="stage-ts">Транспортное средство</label>
-                    <div class="vertical-line"></div>
-                    <input name="newStage" type="radio" value="equipment" id="stage-equipment"><label for="stage-equipment">Оборудование</label>
-                </section>
-              </section>
-              <section id="add-new-container" class="add-new">
-
-                <form>
-
-                <div id="details" class="new-parameters active">
-
-                    <h1>Детали устройства</h1>
-                    <h2>Сперва самое необходимое</h2>
-
-                    <div class="horizontal-line"></div>
-
-                    <div class="parameters-inputs">
-                    <div class="parameters-input">
-                        <label for="parameters-plate">Номерной знак<span style="color: rgba(255, 69, 58, 1);">*</span></label>
-                        <input name="plateNumber" type="text" id="parameters-plate" placeholder="Номер номерного знака" required>
-                    </div>
-                    <div class="parameters-input">
-                        <label for="parameters-plateColor">Цвет номерного знака<span style="color: rgba(255, 69, 58, 1);">*</span></label>
-                        <select name="plateColor" id="parameters-plateColor">
-                            <option value="white">Белый</option>
-                            <option value="blue">Синий</option>
-                            <option value="yellow">Жёлтый</option>
-                        </select>
-                    </div>
-                    <div class="parameters-input">
-                        <label for="parameters-serial">Серийный номер<span style="color: rgba(255, 69, 58, 1);">*</span></label>
-                        <input name="serialNumber" type="text" id="parameters-serial" placeholder="Серийный номер устройства" required>
-                    </div>
-                    <div class="parameters-input">
-                        <label for="parameters-channels">Количество каналов<span style="color: rgba(255, 69, 58, 1);">*</span></label>
-                        <input name="channelsAmount" type="text" id="parameters-channels" placeholder="Кол-во каналов устройства" required>
-                    </div>
-                    <div class="parameters-input">
-                        <label for="parameters-protocol">Протокол<span style="color: rgba(255, 69, 58, 1);">*</span></label>
-                        <select name="connectionProtocol" id="parameters-protocol">
-                            <option value="N9M">N9M</option>
-                        </select>
-                    </div>
-                    <div class="parameters-input">
-                        <label for="parameters-ip">IP-адрес<span style="color: rgba(255, 69, 58, 1);">*</span></label>
-                        <input name="IPAddress" type="text" id="parameters-ip" placeholder="IP-адрес сервера" required>
-                    </div>
-                    <div class="parameters-input">
-                        <label for="parameters-group">Группа<span style="color: rgba(255, 69, 58, 1);">*</span></label>
-                        <input name="deviceGroup" type="text" id="parameters-group" placeholder="Название группы" required>
-                    </div>
-                    <div class="parameters-input">
-                        <label for="parameters-port">Порт<span style="color: rgba(255, 69, 58, 1);">*</span></label>
-                        <input name="serverPort" type="text" id="parameters-port" placeholder="Порт сервера" required>
-                    </div>
-
-                    </div>
-
-                    <div class="horizontal-line"></div>
-
-                    <button id="continue-details" type="button">Продолжить</button>
-
-                </div>
-
-                <div id="sim" class="new-parameters">
-
-                    <h1>Настройки SIM-карты</h1>
-                    <h2>Для связи с устройством</h2>
-
-                    <div class="horizontal-line"></div>
-
-                    <div class="parameters-inputs">
-                    <div class="parameters-input">
-                        <label for="parameters-sim">Номер SIM-карты<span style="color: rgba(255, 69, 58, 1);">*</span></label>
-                        <input name="sumNumber" type="text" id="parameters-sim" placeholder="Номер SIM-карты" required>
-                    </div>
-                    <div class="parameters-input">
-                        <label for="parameters-sim-imei">IMEI<span style="color: rgba(255, 69, 58, 1);">*</span></label>
-                        <input name="simIMEI" type="text" id="parameters-sim-imei" placeholder="IMEI SIM-карты" required>
-                    </div>
-                    <div class="parameters-input">
-                        <label for="parameters-sim-imsi">IMSI<span style="color: rgba(255, 69, 58, 1);">*</span></label>
-                        <input name="simIMSI" type="text" id="parameters-sim-imsi" placeholder="IMSI SIM-карты" required>
-                    </div>
-                    <div class="parameters-input">
-                        <label for="parameters-sim-module">Тип сетевого модуля<span style="color: rgba(255, 69, 58, 1);">*</span></label>
-                        <select name="simModule" id="parameters-sim-module">
-                            <option value="GPRS">GPRS</option>
-                            <option value="CDMA">CDMA</option>
-                            <option value="EVDO">EVDO</option>
-                            <option value="WCDMA">WCDMA</option>
-                            <option value="EDGE">EDGE</option>
-                            <option value="TDSCDMA">TDSCDMA</option>
-                            <option value="LTE-TDD">LTE-TDD</option>
-                            <option value="LTE-FDD">LTE-FDD</option>
-                        </select>
-                    </div>
-
-                    </div>
-
-                    <div class="horizontal-line"></div>
-
-                    <button id="continue-sim" type="button">Продолжить</button>
-
-                </div>
-
-                <div id="ts" class="new-parameters">
-
-                    <h1>Детали транспортного средства</h1>
-                    <h2>Технические характеристики и не только</h2>
-
-                    <div class="horizontal-line"></div>
-
-                    <div class="parameters-inputs">
-                    <div class="parameters-input">
-                        <label for="parameters-trasnsport-type">Тип автомобиля<span style="color: rgba(255, 69, 58, 1);">*</span></label>
-                        <select name="transportType" id="parameters-trasnsport-type" onchange="truncateText(this)">
-                            <option value="1">Пассажирский подвижной состав</option>
-                            <option value="2">Большой автобус</option>
-                            <option value="3">Средний автобус</option>
-                            <option value="4">Микроавтобус</option>
-                            <option value="5">Лимузин</option>
-                            <option value="6">Большой спальный автобус</option>
-                            <option value="7">Спальный автобус среднего размера</option>
-                            <option value="8">Обычный грузовик</option>
-                            <option value="9">Большой обычный грузовик</option>
-                            <option value="10">Среднегабаритный обычный грузовик</option>
-                            <option value="11">Маленький обычный грузовик</option>
-                            <option value="12">Специальная транспортировочная машина</option>
-                            <option value="13">Контейнерная тележка</option>
-                            <option value="14">Большой транспортировочный автомобиль</option>
-                            <option value="15">Изометрический вагон</option>
-                            <option value="16">Спецтехника для перевозки грузовых автомобилей</option>
-                            <option value="17">Танкер</option>
-                            <option value="18">Тягач</option>
-                            <option value="19">Прицеп</option>
-                            <option value="20">Транспортер</option>
-                            <option value="21">Другая спецтехника</option>
-                            <option value="22">Автомобиль для перевозки опасных грузов</option>
-                            <option value="23">Сельскохозяйственная машина</option>
-                        </select>
-                    </div>
-                    <div class="parameters-input">
-                        <label for="parameters-trasnsport-factory">Номер завода<span style="color: rgba(255, 69, 58, 1);">*</span></label>
-                        <input name="transportFactory" type="text" id="parameters-trasnsport-factory" placeholder="Номер завода ТС" required>
-                    </div>
-                    <div class="parameters-input">
-                        <label for="parameters-transport-strength">Несущая способность<span style="color: rgba(255, 69, 58, 1);">*</span></label>
-                        <input name="transportStrength" type="text" id="parameters-transport-strength" placeholder="Несущая способность (тонны)" required>
-                    </div>
-                    <div class="parameters-input">
-                        <label for="parameters-transport-engine">Номер двигателя<span style="color: rgba(255, 69, 58, 1);">*</span></label>
-                        <input name="transportEngine" type="text" id="parameters-transport-engine" placeholder="Номер двигателя ТС" required>
-                    </div>
-                    <div class="parameters-input">
-                        <label for="parameters-transport-stanina">Номер станины<span style="color: rgba(255, 69, 58, 1);">*</span></label>
-                        <input name="transportStanina" type="text" id="parameters-transport-stanina" placeholder="Номер станины ТС" required>
-                    </div>
-                    <div class="parameters-input">
-                        <label for="parameters-trasnsport-fuel">Тип топливного масла<span style="color: rgba(255, 69, 58, 1);">*</span></label>
-                        <select name="transportFuel" id="parameters-trasnsport-fuel">
-                            <option value="gasoline">Бензин</option>
-                            <option value="diesel">Дизельное топливо</option>
-                            <option value="naturalGas">Природный газ</option>
-                            <option value="liquefiedGas">Сжиженный газ</option>
-                            <option value="electric">Электрическое</option>
-                            <option value="other">Прочие</option>
-                        </select>
-                    </div>
-                    <div class="parameters-input">
-                        <div class="parameters-transport-certificate">
-                            <label for="parameters-transport-certificate">Свид-ство о дорожной перевозке<span style="color: rgba(255, 69, 58, 1);">*</span></label>
-                            <input name="transportCertificate" type="text" id="parameters-transport-certificate" placeholder="Номер свидетельства" required>
-                        </div>
-                    </div>
-                    <div class="parameters-input">
-                        <div class="pparameters-trasnsport-category">
-                            <label for="parameters-trasnsport-category">Техническая категория<span style="color: rgba(255, 69, 58, 1);">*</span></label>
-                            <select name="transportCategory" id="parameters-trasnsport-category">
-                                <option value="1">Категория 1</option>
-                                <option value="2">Категория 2</option>
-                                <option value="3">Категория 3</option>
-                                <option value="other">Не достает стандарта</option>
-                            </select>
-                        </div>
-                    </div>
-                    <div class="parameters-input">
-                        <label for="parameters-transport-expire">Срок действия<span style="color: rgba(255, 69, 58, 1);">*</span></label>
-                        <input name="transportExpire" type="date" id="parameters-transport-expire" required>
-                    </div>
-                    <div class="parameters-input">
-                        <label for="parameters-transport-consumption">Расход топлива на 100 км<span style="color: rgba(255, 69, 58, 1);">*</span></label>
-                        <input name="transportConsumption" type="text" id="parameters-transport-consumption" placeholder="Расход топлива в литрах" required>
-                    </div>
-                    <div class="parameters-input">
-                        <label for="parameters-transport-province">Провинция<span style="color: rgba(255, 69, 58, 1);">*</span></label>
-                        <input name="transportProvince" type="text" id="parameters-transport-province" placeholder="Провинция" required>
-                    </div>
-                    <div class="parameters-input">
-                        <label for="parameters-transport-city">Город<span style="color: rgba(255, 69, 58, 1);">*</span></label>
-                        <input name="transportCity" type="text" id="parameters-transport-city" placeholder="Город" required>
-                    </div>
-
-                    </div>
-
-                    <div class="horizontal-line"></div>
-
-                    <button id="continue-ts" type="button">Продолжить</button>
-
-                </div>
-
-                <div id="equipment" class="new-parameters">
-
-                    <h1>Информация о оборудовании</h1>
-                    <h2>Технические моменты</h2>
-
-                    <div class="horizontal-line"></div>
-
-                    <div class="parameters-inputs">
-                    <div class="parameters-input">
-                        <label for="parameters-equipment-name">Имя устройства<span style="color: rgba(255, 69, 58, 1);">*</span></label>
-                        <input name="equipmentName" type="text" id="parameters-equipment-name" placeholder="Имя пользовательского устройства" required>
-                    </div>
-                    <div class="parameters-input">
-                        <label for="parameters-equipment-password">Пароль устройства<span style="color: rgba(255, 69, 58, 1);">*</span></label>
-                        <input name="equipmentPassword" type="text" id="parameters-equipment-password" placeholder="Пароль устройства" required>
-                    </div>
-                    <div class="parameters-input">
-                        <label for="parameters-equipment-number">Номер партии<span style="color: rgba(255, 69, 58, 1);">*</span></label>
-                        <input name="equipmentNumber" type="text" id="parameters-equipment-number" placeholder="Заводской номер партии" required>
-                    </div>
-                    <div class="parameters-input">
-                        <label for="parameters-equipment-released">Дата выпуска<span style="color: rgba(255, 69, 58, 1);">*</span></label>
-                        <input name="equipmentReleased" type="date" id="parameters-equipment-released" required>
-                    </div>
-                    <div class="parameters-input">
-                        <label for="parameters-device-installer">Установщик<span style="color: rgba(255, 69, 58, 1);">*</span></label>
-                        <input name="equipmentInstaller" type="text" id="parameters-device-installer" placeholder="ФИО установщика" required>
-                    </div>
-                    <div class="parameters-input">
-                        <label for="parameters-equipment-installed">Дата монтажа<span style="color: rgba(255, 69, 58, 1);">*</span></label>
-                        <input name="equipmentInstalled" type="date" id="parameters-equipment-installed" required>
-                    </div>
-
-                        <label for="parameters-device-description">Внешнее описание<span style="color: rgba(255, 69, 58, 1);">*</span></label>
-                        <input name="equipmentDescription" type="text" id="parameters-device-description" placeholder="Внешнее описание " required>
-
-                    </div>
-
-                    <div class="horizontal-line"></div>
-
-                    <button>Сохранить</button>
-
-                </div>
-
-                </form>
-
-              </section>
-
-
-
-            </section>
-        </section>
-    </section>
-
-    <script src="../scripts/jquery.min.js"></script>
-    <script>
-        // Скрытие/Показ дополнительных меню аккаунта
-        const accountMain = document.getElementById('account-main');
-        const accountAdditional = document.getElementById('account-additional');
-        const accountUp = document.getElementById('up');
-        const accountDown = document.getElementById('down');
-        accountAdditional.style.display = 'none';
-        accountUp.style.display = 'none';
-        
-        accountMain.addEventListener('click', () => {
-          if (accountAdditional.style.display === 'none') {
-            accountAdditional.style.display = 'flex';
-            accountUp.style.display = 'unset';
-            accountDown.style.display = 'none';
-          } else {
-            accountAdditional.style.display = 'none';
-            accountUp.style.display = 'none';
-            accountDown.style.display = 'unset';
-          }
-        });
-      </script>
-
-    <script src="../scripts/device-form.js"></script>
-
-    
-
-    
-</body>
-</html>
\ No newline at end of file
diff --git a/static/templates/devices/newdriver.html b/static/templates/devices/newdriver.html
deleted file mode 100644
index 756c52b..0000000
--- a/static/templates/devices/newdriver.html
+++ /dev/null
@@ -1,295 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Устройства</title>
-    <link rel="stylesheet" href="../styles/main.css" />
-</head>
-<body>
-
-    <header>
-        <h1>Аргус</h1>
-        <h2><span>/</span> Название организации</h2>
-    </header>
-
-    <section class="account-info">
-      <div id="account-main">
-          <img id="person" src="../img/person.svg">
-          <span>Тестовое Имя</span>
-          <img id="down" src="../img/down.svg">
-          <img id="up" src="../img/up.svg">
-      </div>
-      <a href="/login"><div id="account-additional" class="additional">Выйти</div></a>
-  </section>
-
-    
-
-
-    <section class="navigation">
-        <a href="/">
-            <div><img src="../img/chart.svg">Главная</div>
-        </a>
-        <a href="/devices">
-            <div class="selected"><img src="../img/cloud.svg">Устройства</div>
-        </a>
-        <a href="/reports">
-            <div><img src="../img/bubble.svg">Отчёты</div>
-        </a>
-        <a href="/live">
-            <div><img src="../img/waves.svg">Трансляция</div>
-        </a>
-        <a href="/">
-            <div><img src="../img/play.svg">Записи</div>
-        </a>
-        <a class="settings" href="/">
-            <div><img src="../img/gear.svg">Настройки</div>
-        </a>
-    </section>
-
-    <section class="main">
-        <div class="name">
-            <span>Устройства</span>
-        </div>
-        <nav>
-            <a href="/devices">Список устройств</a>
-            <a href="/devices/drivers">Водители</a>
-            <a href="/devices/newdevice">Добавить устройство</a>
-            <a class="selected" href="/devices/newdriver">Добавить водителя</a>
-
-            <a class="update" href="/devices/update">Обновление ПО</a>
-        </nav>
-        <section class="bg">
-            <section class="content">
-
-              <section class="for-new">
-
-                <section class="stages">
-                    <input name="newStage" type="radio" value="main" id="stage-main" checked><label for="stage-main">Основная информация</label>
-                    <div class="vertical-line"></div>
-                    <input name="newStage" type="radio" value="details" id="stage-details"><label for="stage-details">Детали</label>
-                </section>
-              </section>
-              <section id="add-new-container" class="add-new">
-
-                <form>
-
-                <div id="main" class="new-parameters drivers active">
-
-                    <h1>Основная информация</h1>
-                    <h2>Сперва самое необходимое</h2>
-
-                    <div class="horizontal-line"></div>
-
-                    <label for="parameters-plate">Фотография<span style="color: rgba(255, 69, 58, 1);">*</span></label>
-                    <div id="upload-photo" class="upload-input">
-                        <img src="../img/upload.svg">
-                        <span class="upload-text">Загрузить фотографию водителя</span>
-                        <span class="upload-description">PNG, JPG (макс 20 мб)</span>
-                    </div>
-                    <input id="input-upload-photo" type="file" name="upload-file" style="display: none;">
-
-                    <div class="parameters-inputs">
-                        <label for="driver-name">Имя<span style="color: rgba(255, 69, 58, 1);">*</span></label>
-                        <input name="driverName" type="text" id="driver-name" placeholder="Имя водителя" required>
-
-                        <label for="driver-surname">Фамилия<span style="color: rgba(255, 69, 58, 1);">*</span></label>
-                        <input name="driverSurname" type="text" id="driver-surname" placeholder="Фамилия водителя" required>
-
-                        <label for="driver-card">Карта водителя<span style="color: rgba(255, 69, 58, 1);">*</span></label>
-                        <input name="driverCard" type="text" id="driver-card" placeholder="Номер карты водителя" required>
-
-                    </div>
-
-                    <div class="horizontal-line"></div>
-
-                    <button id="continue-main" type="button">Продолжить</button>
-
-                </div>
-
-                <div id="details" class="new-parameters drivers">
-
-                    <h1>Детальная информация</h1>
-                    <h2>Для удобства в идентификации</h2>
-
-                    <div class="horizontal-line"></div>
-
-                    <div class="parameters-inputs">
-
-                        <label for="driver-gender">Пол<span style="color: rgba(255, 69, 58, 1);">*</span></label>
-                        <select name="driverGender" id="driver-gender">
-                            <option value="male">Мужской</option>
-                            <option value="female">Женский</option>
-                        </select>
-
-                        <label for="driver-license">Водительское удостоверение<span style="color: rgba(255, 69, 58, 1);">*</span></label>
-                        <input name="driverLicense" type="text" id="driver-license" placeholder="Номер водительского удостоверения" required>
-
-                        <label for="driver-passport">Удостоверение личности<span style="color: rgba(255, 69, 58, 1);">*</span></label>
-                        <input name="driverPassport" type="text" id="driverPassport" placeholder="Номер удостоверения личности" required>
-
-                        <label for="driver-phone">Мобильный телефон<span style="color: rgba(255, 69, 58, 1);">*</span></label>
-                        <input name="driverPhone" type="text" id="driver-phone" placeholder="Номер мобильного телефона" required>
-
-                        <label for="driver-description">Примечание<span style="color: rgba(255, 69, 58, 1);">*</span></label>
-                        <input name="driverDescription" type="text" id="driver-description" placeholder="Примечание" required>
-
-                    </div>
-
-                    <div class="horizontal-line"></div>
-
-                    <button>Сохранить</button>
-
-                </div>
-
-                </form>
-
-              </section>
-
-
-
-            </section>
-        </section>
-    </section>
-
-    <script src="../scripts/jquery.min.js"></script>
-
-    <script>
-        const fileSelect = document.getElementById("upload-photo");
-        const fileElem = document.getElementById("input-upload-photo");
-
-        fileSelect.addEventListener(
-                "click",
-                (e) => {
-                        if (fileElem) {
-                                fileElem.click();
-                        }
-                },
-                false
-        );
-    </script>
-
-    <script>
-        // Скрытие/Показ дополнительных меню аккаунта
-        const accountMain = document.getElementById('account-main');
-        const accountAdditional = document.getElementById('account-additional');
-        const accountUp = document.getElementById('up');
-        const accountDown = document.getElementById('down');
-        accountAdditional.style.display = 'none';
-        accountUp.style.display = 'none';
-        
-        accountMain.addEventListener('click', () => {
-          if (accountAdditional.style.display === 'none') {
-            accountAdditional.style.display = 'flex';
-            accountUp.style.display = 'unset';
-            accountDown.style.display = 'none';
-          } else {
-            accountAdditional.style.display = 'none';
-            accountUp.style.display = 'none';
-            accountDown.style.display = 'unset';
-          }
-        });
-      </script>
-
-      <script>
-
-        $("#continue-main").click(function () {
-            document.getElementById("stage-details").checked = true;
-        });
-        
-      </script>
-
-      <script>
-        const container = document.getElementById('new-parameters');
-        const content1 = document.getElementById('main');
-        const content2 = document.getElementById('details');
-        const btn1 = document.getElementById('continue-main');
-        const radioButtons = document.querySelectorAll('input[type="radio"][name="newStage"]');
-        const duration = 100;
-
-        let activeContent = content1;
-
-        function switchContent(newContent) {
-        fadeOut(activeContent, () => {
-            fadeIn(newContent);
-            activeContent = newContent;
-        });
-        }
-
-        function fadeIn(element) {
-        element.style.opacity = 0;
-        element.style.display = 'block';
-        let start = performance.now();
-
-        function animate(time) {
-            let timeFraction = (time - start) / duration;
-            if (timeFraction > 1) {
-            element.style.opacity = 1;
-            } else {
-            element.style.opacity = timeFraction;
-            requestAnimationFrame(animate);
-            }
-        }
-
-        requestAnimationFrame(animate);
-        }
-
-        function fadeOut(element, callback) {
-        element.style.opacity = 1;
-        let start = performance.now();
-
-        function animate(time) {
-            let timeFraction = (time - start) / duration;
-            if (timeFraction > 1) {
-            element.style.opacity = 0;
-            element.style.display = 'none';
-            if (callback) {
-                callback();
-            }
-            } else {
-            element.style.opacity = 1 - timeFraction;
-            requestAnimationFrame(animate);
-            }
-        }
-
-        requestAnimationFrame(animate);
-        }
-
-        btn1.addEventListener('click', () => {
-        if (activeContent === content1) {
-            switchContent(content2);
-        } else {
-            switchContent(content1);
-        }
-        });
-
-
-        for (let radioButton of radioButtons) {
-        radioButton.addEventListener('change', () => {
-            if (radioButton.value === 'main') {
-            switchContent(content1);
-            } else if (radioButton.value === 'details') {
-            switchContent(content2);
-            }
-        });
-        }
-
-      </script>
-
-<script>
-    function truncateText(select) {
-  var maxLength = 30;
-  var option = select.options[select.selectedIndex];
-  if (option.text.length > maxLength) {
-    option.text = option.text.substring(0, maxLength) + '...';
-  }
-}
-
-    </script>
-
-    
-
-    
-</body>
-</html>
\ No newline at end of file
diff --git a/static/templates/devices/update.html b/static/templates/devices/update.html
index 05078b1..b41723e 100644
--- a/static/templates/devices/update.html
+++ b/static/templates/devices/update.html
@@ -55,8 +55,8 @@
         <nav>
             <a href="/devices">Список устройств</a>
             <a href="/devices/drivers">Водители</a>
-            <a href="/devices/newdevice">Добавить устройство</a>
-            <a href="/devices/newdriver">Добавить водителя</a>
+            <!-- <a href="/devices/newdevice">Добавить устройство</a> -->
+            <!-- <a href="/devices/newdriver">Добавить водителя</a> -->
 
             <a class="update selected" href="/devices/update">Обновление ПО</a>
         </nav>
diff --git a/static/templates/live.html b/static/templates/live.html
index 76fefff..5ac079a 100644
--- a/static/templates/live.html
+++ b/static/templates/live.html
@@ -278,6 +278,12 @@
         var signalsList = document.querySelector('.signals-list');
         var list = document.getElementById('list');
     
+        list.style.height = (signalsList.clientHeight - 50 - 75) + 'px';
+      });
+      window.addEventListener('resize', function() {
+        var signalsList = document.querySelector('.signals-list');
+        var list = document.getElementById('list');
+    
         list.style.height = (signalsList.clientHeight - 50 - 75) + 'px';
       });
     </script>
@@ -290,6 +296,14 @@
     mapArea.style.height = (mapContainer.clientHeight) + 'px';
     mapArea.style.width = (mapContainer.clientWidth) + 'px';
   });
+
+  window.addEventListener("resize", function (event) {
+        var mapContainer = document.querySelector('.map');
+        var mapArea = document.getElementById('map');
+
+        mapArea.style.height = (mapContainer.clientHeight) + 'px';
+        mapArea.style.width = (mapContainer.clientWidth) + 'px';
+      });
 </script>
 
     <!-- <script src="../scripts/table-reports.js"></script> -->
@@ -361,6 +375,8 @@ const selectedDevices = Array.from(checkboxes)
             console.log(data.devicesData);
             data.devicesData.forEach(device => {
     const { longitude, latitude, direction, speed } = device;
+    var newDirection = direction + 90
+    console.log(newDirection);
     
     // Создание HTML-элемента для маркера
     const el = document.createElement('div');
@@ -393,6 +409,8 @@ function updateMapMarkers(devicesData) {
   // Создание новых маркеров на карте на основе полученных данных
   devicesData.forEach(device => {
     const { longitude, latitude, direction, speed } = device;
+    var newDirection = direction + 90
+    console.log(newDirection);
     
     // Создание HTML-элемента для маркера
     const el = document.createElement('div');
@@ -429,73 +447,10 @@ setInterval(() => {
           .catch(error => {
             console.error('Ошибка при отправке запроса:', error);
           });
-}, 20000);
+}, 12000);
 {{/if}}
-    //   mapboxgl.accessToken = 'pk.eyJ1IjoicHBlY2hlbmtvbyIsImEiOiJjbGs3Y3dkc3AwNmN1M2dudzRtd3gwNjl4In0.oEFhSBTsaiyBx1uOqHdrZQ';
-    // const map = new mapboxgl.Map({
-    // container: 'map',
-    // // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
-    // style: 'mapbox://styles/mapbox/streets-v12',
-    // center: [12.550343, 55.665957],
-    // zoom: 8
-    // });
-     
-    // // Create a default Marker and add it to the map.
-    // const marker1 = new mapboxgl.Marker()
-    // .setLngLat([12.554729, 55.70651])
-    // .addTo(map);
-     
-    // // Create a default Marker, colored black, rotated 45 degrees.
-    // const marker2 = new mapboxgl.Marker({ color: 'black', rotation: 45 })
-    // .setLngLat([12.65147, 55.608166])
-    // .addTo(map);
     </script>
 
-    <!-- <style>
-      #map {
-        height: 100%;
-        width: 100%;
-        display: inline-block;
-        float: right;
-      }
-    </style> -->
-  
-    <!-- <script src="https://cdn.jsdelivr.net/npm/leaflet/dist/leaflet.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/leaflet-routing-machine/dist/leaflet-routing-machine.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet/dist/leaflet.css" />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-routing-machine/dist/leaflet-routing-machine.css" /> -->
-  
-    <!-- <script>
-      function initMap() {
-        // Координаты начальной точки
-        var startPoint = L.latLng(55.769042, 37.647840);
-        // Координаты конечной точки
-        var endPoint = L.latLng(55.769723, 37.659341);
-  
-        // Создание объекта карты
-        var map = L.map('map').setView(startPoint, 12);
-  
-        // Добавление слоя OpenStreetMap
-        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-          attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-        }).addTo(map);
-  
-        // Прокладка маршрута
-        var control = L.Routing.control({
-          waypoints: [
-            startPoint,
-            endPoint
-          ],
-          routeWhileDragging: true,
-          show: false,
-        }).addTo(map);
-  
-        // Удаление кнопки виджета маршрута
-        document.querySelector('.leaflet-routing-container').style.display = 'none';
-      }
-    </script>
-    <script>initMap();</script> -->
-
     <script>
       const panel = document.getElementById('signals-list');
       const slider = document.getElementById('left-slider');
@@ -612,6 +567,7 @@ for (var i = 0; i < tableCheckboxes.length; i++) {
 });
 
       </script>
+
       
     
 </body>
diff --git a/static/templates/reports/index.html b/static/templates/reports/index.html
index 3b52b1d..152408c 100644
--- a/static/templates/reports/index.html
+++ b/static/templates/reports/index.html
@@ -49,6 +49,16 @@
     </section>
 
     <section class="main">
+      {{#if ifDBError}}
+      <section class="dberror">
+        <div class="erorr-container">
+          <img src="../img/warning.svg"> <br>
+          <h1>Ошибка </h1> <br>
+          <span>Не удалось получить данные из БД</span>
+          <button type="button" onclick="location.reload();">Повторить попытку</button>
+        </div>
+      </section>
+      {{/if}}
         <div class="name">
             <span>Отчёты</span>
         </div>
@@ -64,7 +74,7 @@
                         <h1>Организация</h1>
 
                         <ul class="area">
-                          <li class="area-name"><img src="../img/ul.svg"><input type="checkbox" id="name-1" class="checkbox-input" hidden checked><label for="name-1" class="checkbox-label">Группа 1</label>
+                          <!-- <li class="area-name"><img src="../img/ul.svg"><input type="checkbox" id="name-1" class="checkbox-input" hidden checked><label for="name-1" class="checkbox-label">Группа 1</label>
                             <ul class="area-devices" id="devices-1">
                               <li class="device"><img><input type="checkbox" id="0001" class="checkbox-input device-filter" value="0001" hidden checked><label for="0001" class="checkbox-label"><div class="checkmark"></div>0001</label></li>
                               <li class="device"><img><input type="checkbox" id="0002" class="checkbox-input device-filter" value="0002" hidden checked><label for="0002" class="checkbox-label"><div class="checkmark"></div>0002</label></li>
@@ -82,7 +92,7 @@
                             <ul class="area-devices" id="devices-3">
                               <li class="device"><img><input type="checkbox" id="0007" class="checkbox-input device-filter" value="0007" hidden checked><label for="0007" class="checkbox-label"><div class="checkmark"></div>0007</label></li>
                             </ul>
-                          </li>
+                          </li> -->
                         </ul>
 
                         <div class="area-time-range">
@@ -126,6 +136,9 @@
                     <div id="pagination">
                         <!-- Сюда будут добавляться ссылки для переключения между страницами -->
                       </div>
+                      <br>
+                      <br>
+                      <span style="opacity:50%">Временное ограничение: 100 последних предупреждений</span>
                       
                       
 
@@ -135,7 +148,7 @@
         </section>
     </section>
 
-    <!-- <script>
+    <script>
       const devices = [
   {{#each Alarms}}
   {
@@ -144,10 +157,12 @@
     time: "{{this.time}}",
     serial: "{{this.serial}}",
     type: "{{this.type}}",
+    geo: "{{this.geo}}",
+    plate: "{{this.plate}}",
   },
   {{/each}}
 ];
-    </script> -->
+    </script>
 
     <script src="../scripts/table-reports.js"></script>
     <script src="../scripts/jquery.min.js"></script>