diff --git a/main.js b/main.js
index 2419100..a756d7f 100644
--- a/main.js
+++ b/main.js
@@ -47,7 +47,7 @@ app.use(express.static(path.join(__dirname, 'static')));
 
 
 
-app.get('/', function(request, response) {
+app.get('/x', function(request, response) {
 	if (request.session.loggedin) {
 		// Output username
 		// response.send('Welcome back, ' + request.session.username + '!');
@@ -67,7 +67,7 @@ console.log(request.session.username ,  'open main page');
 app.get('/login', function(request, response) {
 	/// Render login template with any message from query parameters
   console.log('Message:', request.query.message); // Log the message
-    response.render('login', { message: request.query.message || '' });
+  response.render('login', { message: request.query.message || '' });
 
   
 
@@ -107,8 +107,11 @@ app.post('/auth', async function(request, response) {
               // Authenticate the user
               request.session.loggedin = true;
               request.session.username = rows[0].username;
+              request.session.avatar = rows[0].avatar;
               // request.session.username = username;
               // Redirect to home page
+              console.log(rows);
+              
               response.redirect('/');
           } else {
               response.redirect('/login?message=Incorrect Username and/or Password!');
@@ -126,14 +129,24 @@ app.post('/auth', async function(request, response) {
 
 
 // http://localhost:3000/home
-app.get('/home', function(request, response) {
+app.get('/', function(request, response) {
 	// If the user is loggedin
 	if (request.session.loggedin) {
 		// Output username
 		// response.send('Welcome back, ' + request.session.username + '!');
 
+    let avatarSrc = '';
+        if (request.session.avatar) {
+            // Convert BLOB to Base64 if it exists
+            const avatarBase64 = Buffer.from(request.session.avatar).toString('base64');
+            avatarSrc = `data:image/jpeg;base64,${avatarBase64}`; // Adjust MIME type as necessary
+        }
+
     // Render home page with username
-    response.render('home', { username: request.session.username });
+    response.render('home', { 
+      username: request.session.username,
+      avatar: avatarSrc
+     });
 
 	} else {
 		// Not logged in
diff --git a/static/css/navbar.css b/static/css/navbar.css
new file mode 100644
index 0000000..cd34098
--- /dev/null
+++ b/static/css/navbar.css
@@ -0,0 +1,156 @@
+body2 {
+    margin: 0;
+    font-family: Arial, sans-serif;
+    background-color: #f8f9fa; /* Light background */
+    background-color: #4a4e52;
+}
+.navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: transparent;  
+    padding: 4px 20px 0px; /* Padding adjustments */
+    width: auto;
+}
+
+.navbar-brand {
+    display: flex;
+    align-items: center;
+    color: white; /* Set text color to white */
+    font-size: 14px; /* Smaller font size */
+    text-decoration: none; /* Remove underline */
+}
+.navbar-brand img {
+    height: 24px; /* Logo height */
+    margin-right: 10px; /* Space between logo and title */
+}
+.user-photo {
+    width: 24px; /* User photo size */
+    height: 24px;
+    border-radius: 50%; /* Circular photo */
+    cursor: pointer;
+    position: relative; /* To position dropdown */
+}
+
+.user-name { 
+    color: white; font-weight: bold;
+}
+
+img.user-photo:hover {
+    box-shadow: 0px 0px 5px 5px rgb(92 207 255 / 78%);
+}
+
+.dropdown-menu {
+    position: absolute; /* Position it correctly */
+    display: none; /* Hide dropdown by default */
+    /* background-color: #343a40;  */
+    background-color: #1e1e1e;
+    right: 20px; /* Align to the right */
+    min-width: 200px; /* Minimum width */
+    z-index: 1000; /* Ensure it appears above other content */
+    margin-top: 10px; /* Space between photo and menu */
+    border-radius: 5px; /* Rounded corners */
+    padding: 15px; /* Padding for dropdown */
+    /* text-align: center;   */
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
+}
+.dropdown-menu.show {
+    display: block; /* Show when active */
+}
+.dropdown-item {
+    cursor: pointer;
+    padding: 10px;
+    color: white; /* Color for dropdown items */
+    text-decoration: none; /* Remove underline */
+    display: block; /* Block display for easy clicking */
+}
+.dropdown-item:hover {
+    background-color: #495057; /* Hover effect */
+}
+.user-details {
+    margin-bottom: 10px; /* Space below user details */
+    text-align: center;
+}
+.dropdown-divider {
+    height: 1px;
+    background-color: rgba(255, 255, 255, 0.12);
+    margin: 5px 0;
+}
+
+
+ /* city details  */
+
+
+ select#banksList {
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
+}
+
+input#datepicker {
+    width: 70px;
+ 
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px;
+ 
+}
+
+ .select-city {
+    /* position: absolute; */
+    position: relative;
+    width: 300px;
+    display: flex;
+    height: 24px;
+}
+
+
+
+#cityInput {
+    border: 2px solid #ccc;
+    /* Default border */
+    padding: 10px;
+    width: 200px;
+    box-sizing: border-box;
+    height: -webkit-fill-available;
+}
+
+#cityInput.invalid {
+    border-color: red;
+    /* Red border for invalid input */
+}
+
+#cityInput.valid {
+    border-color: green;
+    /* Green border for valid selection */
+}
+
+#cityList {
+    color: black;
+    font-size: smaller;
+    border: 1px solid #ccc;
+    max-height: 150px;
+    overflow-y: auto;
+    display: none;
+    position: absolute;
+    background-color: white;
+    z-index: 1000;
+}
+
+.city-item {
+    padding: 10px;
+    cursor: pointer;
+}
+
+.city-item:hover {
+    background-color: #f0f0f0;
+}
+
+.auto-complete-text {
+    position: absolute;
+    /* float: right; */
+    /* padding-left: 55%; */
+
+    right: 19px;
+    top: 3px;
+    color: green;
+    margin-bottom: 4px;
+}
\ No newline at end of file
diff --git a/static/css/nav.css b/static/css/notification.css
similarity index 53%
rename from static/css/nav.css
rename to static/css/notification.css
index d8ea7d5..dedaf4d 100644
--- a/static/css/nav.css
+++ b/static/css/notification.css
@@ -1,122 +1,5 @@
-/* Navbar styles */
-.logo{
-    display: flex;
-    align-items: center;
- }
-.flex{
-	display:  flex;
-	justify-content: space-between;
-	align-items: center;
-}
-.nav-bar{
-	padding:   3px 10px 0px 20px;
-}
-.nav-bar a{
-	color:  #fff;
-    cursor: pointer;
-}
-.nav-bar .hm{
-	font-size: 20px;
-}
-#m-bar{
-	display: none;
-	font-size: 20px;
-}
-#menu-links ul{
-	margin: 0;
-	padding: 0;
-}
-#menu-links ul li{
-	display: inline-block;
-	margin: 0 35px;
-	list-style-type: none;
-}
-#menu-links a{
-	text-decoration: none;
-	font-weight: 500;
-	font-size: 15px;
-	text-transform: uppercase;
-}
-.nav-btn{
-	padding: 3px 15px;
-	background-color:  #868686;
-	text-decoration: none;
-    color: black;
-	border-radius: 35px;
-}
-.nav-btn:hover{
-	background-color: #6791e0 !important;
-}
-.active{
-	color: #2d6cdf !important;
-}
-#menu-links a:hover{
-	color: #6dabf1 !important;
-}
-@media only screen and (max-width: 1105px){
-	#btn{
-		display: none;
-	}
-	.hidden-title{
-		display: none !important;
-	}
-	.inputHolder {
-		width: -webkit-fill-available !important;
-		 
-	}
-	.btn-remove {
-		right: 15px;
-
-	}
-}
-@media only screen and (max-width: 750px){
-	.nav-bar{
-		display: block;
-		text-align: center;
-		background-color: rgba(0, 0, 0, .4);
-	}
-	#menu-links ul li{
-		display: block;
-		margin: 25px 0;
-	}
-	#btn{
-		display: block;
-	}
-	#m-bar{
-		display: block;
-	}
-	.hidden{
-		display: none !important;
-	}
-	.not-hidden{
-		display: block !important;
-	}
-	.hidden-title{
-		display: block !important;
-	}
-	
-	 
-}
- 
-.bg-tarakan{
-    display: none;
-    position: absolute;
-    max-width: 1140px;
-    width: -webkit-fill-available;
-}
-.show-tarakan{
-    display: block;
-}
-
-
-
-
-
-
-
 /* toast notification */
 
-
 .toast {
 	position: absolute;
 	top: 25px;
@@ -128,6 +11,7 @@
 	overflow: hidden;
 	transform: translateX(calc(100% + 30px));
 	transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);
+	z-index: 100;
   }
 
   .toast-up{
diff --git a/static/css/options.css b/static/css/options.css
new file mode 100644
index 0000000..9f2fd39
--- /dev/null
+++ b/static/css/options.css
@@ -0,0 +1,170 @@
+.options-box {
+  color: white;
+  background-color: #1e1e1e;
+  border-radius: 10px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
+  padding: 20px;
+  max-width: 400px;
+  /* position: relative; */
+  /* margin: auto; */
+  width: 66%;
+  display: none;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 9999;
+}
+
+.close-btn {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    cursor: pointer;
+    font-size: 20px;
+    color: #ffffff; /* Close button color */
+}
+
+.option-title {
+    margin: 0 0 18px; /* Space below the title */
+    font-size: 20px; /* Title size */
+    text-align: center; /* Center the title */
+}
+
+.form-group {
+    display: flex; /* Flexbox for alignment */
+    align-items: flex-start;
+    justify-content: space-between; /* Space between label and input */
+    align-items: center; /* Vertically align items */
+    /* margin-top: 15px;   */
+}
+.switch-title{
+    padding-top: 10px;
+    margin: 0;
+}
+
+label {
+    flex: 1; /* Takes available space */
+    font-size: 14px; /* Smaller font size for labels */
+}
+
+.options-button {
+    background-color: #3a3a3a; /* Button background */
+    color: #ffffff; /* Button text color */
+    border: none; /* No border */
+    padding: 10px; /* Padding inside buttons */
+    border-radius: 5px; /* Rounded corners */
+    cursor: pointer; /* Pointer cursor on hover */
+    width: 100%; /* Full width buttons */
+    margin-top: 15px; /* Space above buttons */
+    transition: background-color 0.3s; /* Smooth background transition */
+}
+.options-button:hover {
+    background-color: #505050; /* Lighter on hover */
+}
+hr {
+    border: none;
+    height: 1px;
+    background-color: rgba(255, 255, 255, 0.1); /* Light divider */
+    margin:   5px; /* Margin around the divider */
+}
+.centered {
+    text-align: center; /* Center align text in buttons */
+}
+
+/* has  */
+
+label.switch.has-label {
+        display: grid;
+    grid-template-areas: "col-1 col-2 ";
+    grid-gap: 1px;
+    align-items: center;
+    justify-content: space-between;
+  }
+  label.switch.has-label .off {
+    color: rgba(255, 255, 255 );
+    grid-area: col-1;
+    transition: var(--transition);
+  }
+  label.switch.has-label .on {
+    color: rgba(0, 0, 0, 0.3);
+    grid-area: col-3;
+    transition: var(--transition);
+  }
+  label.switch.has-label .track {
+    grid-area: col-2;
+  }
+  label.switch.has-label input[type=checkbox]:checked ~ .on {
+    color: rgb(255, 255, 255);
+  }
+  label.switch.has-label input[type=checkbox]:checked ~ .off {
+    color: rgb(255 253 253 / 47%);
+  }
+
+
+ 
+/* Main Component Styles */
+label.switch {
+    text-align: -webkit-right;
+    /* padding-bottom: 10px; */
+    --switch-size: 40px;
+    --thumb-gap: 4px;
+    --thumb-size: calc(var(--switch-size) * 0.55 - var(--thumb-gap));
+    --thumb-active-offset: calc(var(--switch-size) / 2);
+    --track-radius: calc(var(--switch-size) / 1.6666);
+    --thumb-color: #fff;
+    --track-color: rgba(146, 146, 146, 0.479);
+    --accent-color: #2f57d4;
+    --transition: 200ms ease;
+  }
+  label.switch .track {
+    width: var(--switch-size);
+    height: calc(var(--switch-size) / 1.6666);
+    background: var(--track-color);
+    border-radius: var(--track-radius);
+    border-radius: calc(var(--track-radius) / 2);
+    display: flex;
+    align-items: center;
+    box-shadow: inset 0px 0px 4px -2px rgba(0, 0, 0, 0.129);
+    transition: 250ms ease;
+  }
+  label.switch .thumb {
+    display: inline-block;
+    background: var(--thumb-color);
+    width: var(--thumb-size);
+    height: var(--thumb-size);
+    border-radius: 50%;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.17);
+    transform: translateX(var(--thumb-gap));
+    transition: transform 250ms ease-in-out;
+  }
+  label.switch input[type=checkbox] {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+  }
+  label.switch input[type=checkbox]:checked + .track {
+    background: var(--accent-color);
+  }
+  label.switch input[type=checkbox]:checked + .track .thumb {
+    transform: translateX(var(--thumb-active-offset));
+  }
+  label.switch input[type=checkbox]:focus + .track {
+    box-shadow: inset 0px 0px 4px 1px rgba(0, 0, 0, 0.09);
+  }
+
+
+  .addedButtonsContainer{
+    display: flex;
+    padding: 8px;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+  }
+
+.group-options-title{
+  margin: 9px 0px;
+    color: #818193a6;
+    font-size: 13px;
+    font-family: monospace;
+}
\ No newline at end of file
diff --git a/static/css/style.css b/static/css/style.css
index 489029c..57d9bac 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1,14 +1,15 @@
-html{
-	/* background: url(https://i.ibb.co/njV5xJS/background.jpg) no-repeat center center fixed;
+html {
+  /* background: url(https://i.ibb.co/njV5xJS/background.jpg) no-repeat center center fixed;
   	background-size: cover;
   	height: 100%; */
 }
 
 body {
   font-family: 'Rubik', sans-serif;
-	/* margin:0; */
-    max-width: 1140px;
-	margin: 0 auto;
+  /* margin:0; */
+  max-width: 1140px;
+  margin: 0 auto;
+  overflow: hidden;
 
   /* background-color: rgb(71, 71, 71); */
   /* background: linear-gradient(135deg, #7d7e7d 0%, #0e0e0e 100%);
@@ -19,9 +20,10 @@ body {
   margin: auto;
 }
 
-.maparea{
+.maparea {
   margin: auto;
 }
+
 .buttons {
   display: flex;
   justify-content: space-around;
@@ -65,20 +67,22 @@ body {
   /* padding: 10px; */
   /* text-align: center; */
 }
-.modelselect{
-   border-radius: 20px;
-   font-size: large;  
-   padding: 10px 0px;
+
+.modelselect {
+  border-radius: 20px;
+  font-size: large;
+  padding: 10px 0px;
   /* padding: 10px; */
   text-align: center;
   align-self: center;
 }
-.modelselect option{
+
+.modelselect option {
   text-align: center;
   overflow: hidden;
 
 }
- 
+
 
 .form-control {
   width: 183px;
@@ -129,19 +133,20 @@ body {
   font-size: small;
 
 }
-.btn-remove{
+
+.btn-remove {
   cursor: pointer;
-      /* border-radius: 15px; */
-      color: red;
-      /* border-color: red; */
-      /* border-width: 2px; */
-      position: absolute;
-      margin-top: 5px !important;
-      z-index: 5;
-      padding: 5px;
-      font-size: x-large;
-      background: transparent;
-      border-style: none;
+  /* border-radius: 15px; */
+  color: red;
+  /* border-color: red; */
+  /* border-width: 2px; */
+  position: absolute;
+  margin-top: 5px !important;
+  z-index: 5;
+  padding: 5px;
+  font-size: x-large;
+  background: transparent;
+  border-style: none;
 }
 
 .clean {
@@ -192,7 +197,7 @@ td {
   left: 77px;
 }
 
-.visible-table{
+.visible-table {
   display: none !important;
 }
 
@@ -278,58 +283,27 @@ footer {
 }
 
 
-.bold{
+.bold {
   font-weight: bold;
   color: darkred;
 }
 
-.not-show{
+.not-show {
   display: none !important;
 }
 
-#history{
+#history {
   display: flex;
-    justify-content: center;
+  justify-content: center;
 }
 
-.copy-text{
+.copy-text {
   margin: 15px;
-    padding: 10px;
+  padding: 10px;
 }
 
+    
 
-.options-icon {
-  cursor: pointer;
-}
-
-.options-box {
-  width: 66%;
-  display: none;
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  padding-right: 20px;
-    padding-bottom: 20px;
-    padding-left: 20px;
-  background-color: white;
-  border: 1px solid #ccc;
-  border-radius: 5px;
-  z-index: 9999;
-  background: rgb(229 229 229 / 94%);
-}
-.options-box input {
-  padding: 5px;
-  border-radius: 7px;
-  margin: 2px;
-}
-
-.close-btn {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  cursor: pointer;
-}
 
 .additionalInfo {
   background-color: yellow;
@@ -345,7 +319,8 @@ footer {
   border-radius: 5px;
   cursor: pointer;
 }
-.centered{
+
+/* .centered {
   margin-left: 36%;
   margin-top: 5px;
   margin-right: 5px;
@@ -355,10 +330,74 @@ footer {
   padding-right: 20px;
   padding-bottom: 3px;
   padding-left: 20px;
-}
+} */
 
-.additionalButtonsContainer{
+.additionalButtonsContainer {
   display: flex;
   justify-content: center;
-    gap: 10px;
-}
\ No newline at end of file
+  gap: 10px;
+}
+
+
+.blinking {
+  animation: blink 0.5s infinite;
+  /* border-radius: 5px; */
+}
+
+@keyframes blink {
+
+  /* 0%   {border: white solid 5px; }
+  100% {border: red solid 5px; } */
+  0% {
+    box-shadow: 0px 0px 0px 5px white inset;
+  }
+
+  100% {
+    box-shadow: 0px 0px 0px 5px red inset;
+  }
+}
+
+.blinking2 {
+  animation: blink-animation 1s infinite;
+}
+
+@keyframes blink-animation {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+
+
+@media only screen and (max-width: 1105px){
+	.inputHolder {
+		width: -webkit-fill-available !important; 
+	}
+	.btn-remove {
+		right: 15px;
+	}
+}
+ 
+ 
+.bg-tarakan{
+    display: none;
+    position: absolute;
+    max-width: 1140px;
+    width: -webkit-fill-available;
+}
+.show-tarakan{
+    display: block;
+}
+
+
+
+
+
diff --git a/static/images/logo.png b/static/images/logo.png
deleted file mode 100644
index 085d471..0000000
Binary files a/static/images/logo.png and /dev/null differ
diff --git a/static/images/profiles/ahmed.jpg b/static/images/profiles/ahmed.jpg
new file mode 100644
index 0000000..3563898
Binary files /dev/null and b/static/images/profiles/ahmed.jpg differ
diff --git a/static/index2.html b/static/index2.html
index 079512a..73d073c 100644
--- a/static/index2.html
+++ b/static/index2.html
@@ -21,7 +21,9 @@
     <title>Pax S90</title>
 
     <link rel="stylesheet" href="/css/style.css">
-    <link rel="stylesheet" href="/css/nav.css">
+    <link rel="stylesheet" href="/css/notification.css">
+    <link rel="stylesheet" href="/css/navbar.css">
+    <link rel="stylesheet" href="/css/options.css">
 
     <script src="js/jquery-3.5.1.min.js"></script>
     <script src="js/jquery.maphilight.min.js"></script>
@@ -29,6 +31,7 @@
 
     <script src="https://kit.fontawesome.com/e8e55b4ad4.js" crossorigin="anonymous"></script>
     <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
+    <script src="js/navbar.js"></script>
 </head>
 
 <body>
@@ -40,7 +43,6 @@
 
             </div>
 
-
             <div class="message">
                 <span class="text text-1">Success</span>
                 <span class="text text-2">Your changes has been saved</span>
@@ -48,41 +50,41 @@
         </div>
         <i class="fa-solid fa-xmark close"></i>
 
-        <!-- Remove 'active' class, this is just to show in Codepen thumbnail -->
         <div class="progress"></div>
     </div>
 
     <!-- <button class="buttonTest">Show Toast</button> -->
 
-    <div class="nav-bar flex">
-        <div class="first-holder flex">
-            <a class="logo"> <img src="/images/sv-org-logo.png" height="20"> СЕРВИС-ВОЛГА </a>
-            <a href="#" id="m-bar"><i class="fas fa-bars hm"></i></a>
+
+    <nav class="navbar">
+        <div class="navbar-brand" href="/">
+            <img src="/images/sv-org-logo.png" alt="Site Logo">
+            <span>СЕРВИС-ВОЛГА</span> <!-- Title as a span for styling -->
         </div>
+        <div class="dropdown">
+            <img src="/images/profiles/ahmed.jpg" alt="User Photo" class="user-photo" onclick="toggleDropdown(event)">
+            <div class="dropdown-menu" id="dropdownMenu">
+                <div class="user-details">
+                    <img src="/images/profiles/ahmed.jpg" alt="User Photo" class="user-photo"
+                        style="width: 60px; height: 60px;"> <!-- Larger photo in dropdown -->
+                    <div style="color: white; font-weight: bold;"><%= username %></div> <!-- Username -->
+                </div>
+                <a class="dropdown-item" href="#"><i class="fa-solid fa-user"></i>&nbsp Profile</a>
+                <a class="dropdown-item" onclick="toggleOptionsBox()" href="#"><i class="fa-solid fa-gear"></i>&nbsp
+                    Settings</a>
+                <a class="dropdown-item" href="check-serials.html"><i class="fa-solid fa-list-check"></i>&nbsp Check
+                    Serials</a>
+                <a class="dropdown-item" href="http://192.168.1.6:2150/"><i class="fa-solid fa-upload"></i>&nbsp Upload
+                    xlsx</a>
+                <a id="showStorage" class="dropdown-item">
+                    <div id="history-lable"><i class="fa-solid fa-floppy-disk"></i>&nbsp Show History</div>
+                </a>
 
-        <div id="menu-links" class="hidden">
-            <ul>
-                <li><a onClick="window.location.reload();" class=" "><i class="fa-solid fa-arrows-rotate"></i> <span
-                            class="hidden-title"> Refresh</span>
-                    </a> </li>
-                <li><a href="check-serials.html"> <i class="fa-solid fa-list-check"></i><span class="hidden-title">
-                            Check Serials</span> </a></li>
-                <li><a href="http://192.168.1.6:2150/" target="_blank" rel="noopener noreferrer"> <i
-                            class="fa-solid fa-upload"></i> <span class="hidden-title"> Upload</span></a></li>
-                <li><a class="options-icon" onclick="toggleOptionsBox()" href="#"><i class="fa-solid fa-gear"> <span
-                                class="hidden-title"> Options</span></i></a>
-                </li>
-                <li>
-
-                </li>
-
-            </ul>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#"><i class="fa-solid fa-right-from-bracket"></i>&nbsp Logout</a>
+            </div>
         </div>
-
-        <a id="showStorage" class="nav-btn hidden show">
-            <div id="history-lable"><i class="fa-solid fa-floppy-disk"></i> Show History</div>
-        </a>
-    </div>
+    </nav>
 
     <div class="beta"><textarea id="titleInput" class="inputHolder" placeholder="" rows="" cols="" name=""
             form=""> </textarea>
@@ -94,36 +96,36 @@
 
 
     <div class="buttons">
-        
-            <select name="model" id="selectmodel" class="serialform modelselect" placeholder="Model">
-                <option value="S90">S90</option>
-                <option value="S80">S80</option>
-                <option value="SP30">SP30</option>
-                <option value="S200">S200</option>
-                <option value="S300">S300</option>
-                <option value="S920">S920</option>
-                <option value="S900">S900</option>
-                <option value="A920">A920</option>
-                <option value="A930">A930</option>
-                <option value="D200">D200</option>
-                <option value="D230">D230</option>  
-                <option value="IM20">IM20</option>  
 
-                <option value="V240m">V240m</option>
-                <option value="V200t">V200t</option>
-                <option value="V205c">V205c</option>
-                <option value="V520">V520</option>
-                <option value="VX675">VX675</option>
-                <option value="VX680">VX680</option>
-                <option value="VX805">VX805</option>
-                <option value="VX820">VX820</option>
-                <option value="VX840">VX840</option>
-    
-                <option value="P400">P400</option>
-                <option value="PP1000se">PP1000se</option>
-              
-            </select>
-            <div> 
+        <select name="model" id="selectmodel" class="serialform modelselect" placeholder="Model">
+            <option value="S90">S90</option>
+            <option value="S80">S80</option>
+            <option value="SP30">SP30</option>
+            <option value="S200">S200</option>
+            <option value="S300">S300</option>
+            <option value="S920">S920</option>
+            <option value="S900">S900</option>
+            <option value="A920">A920</option>
+            <option value="A930">A930</option>
+            <option value="D200">D200</option>
+            <option value="D230">D230</option>
+            <option value="IM20">IM20</option>
+
+            <option value="V240m">V240m</option>
+            <option value="V200t">V200t</option>
+            <option value="V205c">V205c</option>
+            <option value="V520">V520</option>
+            <option value="VX675">VX675</option>
+            <option value="VX680">VX680</option>
+            <option value="VX805">VX805</option>
+            <option value="VX820">VX820</option>
+            <option value="VX840">VX840</option>
+
+            <option value="P400">P400</option>
+            <option value="PP1000se">PP1000se</option>
+
+        </select>
+        <div>
             <form action="" id="SerialNumber" class="serialform">
                 <!-- <span>SerialNumber: </span> -->
                 <input type="text" id="serial" class="form-control" placeholder="serial number">
@@ -391,65 +393,125 @@
 
         <!-- OPTION TAG -->
         <div id="options-box" class="options-box">
+            <!-- <span class="close-btn">&times;</span> -->
             <div class="close-btn" onclick="closeOptionsBox()">✖</div>
-            <h2>Options</h2>
-            <label for="background-color">Background Color:</label>
-            <input type="color" id="background-color" onchange="changeBackgroundColor()">
-            <!-- <br>
-            <label for="font-size">Font Size (px):</label>
-            <input type="number" id="font-size" min="10" max="50" onchange="changeFontSize()"> -->
+            <h2 class="option-title">Options</h2>
 
-            <br>
-            <hr>
-            <label for="toggleCheckbox">Последние записи ... Скрыть? </label>
-            <input type="checkbox" id="toggleCheckbox" onchange="toggleTableVisibility()">
-            <br>
-            <label for="font-size">Максимальное количество последних записей :</label>
-            <input type="number" id="last-record-setting" min="1" max="9" placeholder="2"
-                onchange="changeLastRecords()">
-
-
-            <br>
+            <div class="form-group">
+                <label for="background-color">Background Color:</label>
+                <input type="color" id="background-color" onchange="changeBackgroundColor()">
+            </div>
 
             <hr>
-            <label for="toggleWaitingCheckbox">Скрыть кнопки (в ожидание запасных частей) ?</label>
-            <input type="checkbox" id="toggleWaitingCheckbox" onchange="toggleWaitingVisibility()">
-            <br>
-            <label for="newButtonInput">В ожидание :</label>
-            <input type="text" id="newButtonInput" placeholder="В ожидании крышки принтера">
-            <br>
-            <button onclick="addButton()" class="additionalInfo centered">Добавить новую кнопку</button>
-            <div id="settingButtonsContainer"> </div>
-            <br>
+
+            <div class="form-group">
+                <p class="group-options-title">Таилица последних записей</p>
+            </div>
+            <div class="form-group">
+                <label for="toggleCheckbox" class="switch has-label">
+                    <input type="checkbox" name="toggleCheckbox" id="toggleCheckbox"
+                        onchange="toggleTableVisibility()" />
+                    <span class="track"><span class="thumb"></span></span>
+                    <span class="off">Скрыть Последние записи?</span>
+                </label>
+            </div>
+            <div class="form-group">
+                <label for="font-size">Максимальное количество последних записей :</label>
+                <input type="number" id="last-record-setting" min="1" max="9" placeholder="2"
+                    onchange="changeLastRecords()">
+            </div>
 
             <hr>
-            <label for="toggleFixesCheckbox">Скрыть кнопки (доб. неисправность) ?</label>
-            <input type="checkbox" id="toggleFixesCheckbox" onchange="toggleFixesVisibility()">
-            <br>
-            <label for="new2ButtonInput">Заявленная неисправность :</label>
 
-            <input type="text" id="new2ButtonInput" placeholder="неисправность">
-            <br>
-            <!-- Additional input for button note -->
-            <label for="new2ButtonNote">Произведенная работа :</label>
-            <input type="text" id="new2ButtonNote" placeholder="Произведенная работа">
-            <br>
-            <button onclick="add2Button()" class="additional2buttons centered">Добавить новую кнопку</button>
-            <div id="setting2ButtonsContainer"> </div>
+            <div class="form-group">
+                <p class="group-options-title">option в ожидание</p>
+            </div>
+            <div class="form-group">
+                <label for="toggleWaitingCheckbox" class="switch has-label">
+                    <input type="checkbox" name="toggleWaitingCheckbox" id="toggleWaitingCheckbox"
+                        onchange="toggleWaitingVisibility()" />
+                    <span class="track"><span class="thumb"></span></span>
+                    <span class="off">Скрыть кнопки (в ожидание запасных частей) ?</span>
+                </label>
+            </div>
+            <div class="form-group">
+                <label for="newButtonInput">Текст В ожидание :</label>
+                <input type="text" id="newButtonInput" placeholder="В ожидании крышки принтера">
+            </div>
+            <div class="form-group">
+                <button onclick="addButton()" class=" options-button">Добавить новую кнопку</button>
+
+            </div>
+            <div class="addedButtonsContainer" id="settingButtonsContainer"> </div>
+
             <hr>
-            <label for="toggleNotificationCheckbox">Уведомлени вверх ?</label>
-            <input type="checkbox" id="toggleNotificationCheckbox" onchange="toggleNotificationUP()">
-            <br>
-            <label for="togglePoliteCheckbox">Polite notification ?</label>
-            <input type="checkbox" id="togglePoliteCheckbox" onchange="toggleNotificationPolite()">
-            <br>
-            <br>
-            <br>
-            <button class="centered" onclick="saveSettings()">Save Settings</button>
-            <button onclick="clearSettings()">Clear Settings</button>
+
+            <div class="form-group">
+                <p class="group-options-title">option неисправность</p>
+            </div>
+            <div class="form-group">
+                <label for="toggleFixesCheckbox" class="switch has-label">
+                    <input type="checkbox" name="toggleFixesCheckbox" id="toggleFixesCheckbox"
+                        onchange="toggleFixesVisibility()" />
+                    <span class="track"><span class="thumb"></span></span>
+                    <span class="off">Скрыть кнопки (доб. неисправность) ?</span>
+                </label>
+            </div>
+            <div class="form-group">
+                <label for="new2ButtonInput">Заявленная неисправность :</label>
+
+                <input type="text" id="new2ButtonInput" placeholder="Произведенная работа">
+            </div>
+            <div class="form-group">
+                <label for="new2ButtonNote">Произведенная работа :</label>
+                <input type="text" id="new2ButtonNote" placeholder="Произведенная работа">
+            </div>
+            <div class="form-group">
+                <button onclick="add2Button()" class="options-button">Добавить новую кнопку</button>
+            </div>
+            <div class="addedButtonsContainer" id="setting2ButtonsContainer"> </div>
+
+            <hr>
+
+            <div class="form-group">
+                <p class="group-options-title">Notifications</p>
+            </div>
+            <div class="form-group">
+                <label for="toggleNotificationCheckbox" class="switch has-label">
+                    <input type="checkbox" name="toggleNotificationCheckbox" id="toggleNotificationCheckbox"
+                        onchange="toggleNotificationUP()" />
+                    <span class="track"><span class="thumb"></span></span>
+                    <span class="off">Уведомлени вверх ?</span>
+                </label>
+            </div>
+            <div class="form-group">
+                <label for="togglePoliteCheckbox" class="switch has-label">
+                    <input type="checkbox" name="togglePoliteCheckbox" id="togglePoliteCheckbox"
+                        onchange="toggleNotificationPolite()" />
+                    <span class="track"><span class="thumb"></span></span>
+                    <span class="off">Polite notification ?</span>
+                    <!-- <span class="on">ON</span> -->
+                </label>
+            </div>
+
+            <hr>
+            <div class="form-group">
+                <p class="group-options-title">Warning</p>
+            </div>
+            <div class="form-group">
+                <label for="enableBlinkingCheckbox" class="switch has-label">
+                    <input type="checkbox" name="enableBlinkingCheckbox" id="enableBlinkingCheckbox"
+                        onchange="toggleBlinking()" />
+                    <span class="track"><span class="thumb"></span></span>
+                    <span class="off">Blink selected problem?</span>
+                    <!-- <span class="on">ON</span> -->
+                </label>
+            </div>
 
 
+            <button class="options-button" onclick="clearSettings()">Clear Settings</button>
 
+            <button class="options-button" onclick="saveSettings()">Save Options</button>
         </div>
 
 
diff --git a/static/js/citydetails.js b/static/js/citydetails.js
new file mode 100644
index 0000000..5d05eaf
--- /dev/null
+++ b/static/js/citydetails.js
@@ -0,0 +1,153 @@
+document.addEventListener("DOMContentLoaded", function () {
+    loadCityDetails()
+});
+
+
+$(function () {
+    $('#datepicker').datepicker({
+        closeText: "Закрыть",
+        prevText: "Пред",
+        nextText: "След",
+        currentText: "Сегодня",
+        monthNames: ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь",
+            "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"],
+        monthNamesShort: ["Янв", "Фев", "Мар", "Апр", "Май", "Июн",
+            "Июл", "Авг", "Сен", "Окт", "Ноя", "Дек"],
+        dayNames: ["воскресенье", "понедельник", "вторник", "среда", "четверг", "пятница", "суббота"],
+        dayNamesShort: ["вск", "пнд", "втр", "срд", "чтв", "птн", "сбт"],
+        dayNamesMin: ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"],
+        weekHeader: "Нед",
+        dateFormat: "dd.mm.yy",
+        firstDay: 1,
+        isRTL: false,
+        showMonthAfterYear: false,
+        yearSuffix: ""
+    });
+
+    $('#datepicker').datepicker('setDate', new Date());
+});
+ 
+const cities = [
+    "Абаза", "Абакан", "Абдулино", "Абинск", "Агидель", "Агрыз", "Адыгейск", "Азнакаево", "Азов", "Ак-Довурак", "Аксай", "Алагир", "Алапаевск", "Алатырь", "Алдан", "Алейск", "Александров", "Александровск", "Александровск-Сахалинский", "Алексеевка", "Алексин", "Алзамай", "Алупка", "Алушта", "Альметьевск", "Амурск", "Анадырь", "Анапа", "Ангарск", "Андреаполь", "Анжеро-Судженск", "Анива", "Апатиты", "Апрелевка", "Апшеронск", "Арамиль", "Аргун", "Ардатов", "Ардон", "Арзамас", "Аркадак", "Армавир", "Армянск", "Арсеньев", "Арск", "Артём", "Артёмовск", "Артёмовский", "Архангельск", "Асбест", "Асино", "Астрахань", "Аткарск", "Ахтубинск", "Ачинск", "Аша", "Бабаево", "Бабушкин", "Бавлы", "Багратионовск", "Байкальск", "Баймак", "Бакал", "Баксан", "Балабаново", "Балаково", "Балахна", "Балашиха", "Балашов", "Балей", "Балтийск", "Барабинск", "Барнаул", "Барыш", "Батайск", "Бахчисарай", "Бежецк", "Белая Калитва", "Белая Холуница", "Белгород", "Белебей", "Белёв", "Белинский", "Белово", "Белогорск", "Белогорск", "Белозерск", "Белокуриха", "Беломорск", "Белоозёрский", "Белорецк", "Белореченск", "Белоусово", "Белоярский", "Белый", "Бердск", "Березники", "Берёзовский", "Берёзовский", "Беслан", "Бийск", "Бикин", "Билибино", "Биробиджан", "Бирск", "Бирюсинск", "Бирюч", "Благовещенск", "Благовещенск", "Благодарный", "Бобров", "Богданович", "Богородицк", "Богородск", "Боготол", "Богучар", "Бодайбо", "Бокситогорск", "Болгар", "Бологое", "Болотное", "Болохово", "Болхов", "Большой Камень", "Бор", "Борзя", "Борисоглебск", "Боровичи", "Боровск", "Бородино", "Братск", "Бронницы", "Брянск", "Бугульма", "Бугуруслан", "Будённовск", "Бузулук", "Буинск", "Буй", "Буйнакск", "Бутурлиновка", "Валдай", "Валуйки", "Велиж", "Великие Луки", "Великий Новгород", "Великий Устюг", "Вельск", "Венёв", "Верещагино", "Верея", "Верхнеуральск", "Верхний Тагил", "Верхний Уфалей", "Верхняя Пышма", "Верхняя Салда", "Верхняя Тура", "Верхотурье", "Верхоянск", "Весьегонск", "Ветлуга", "Видное", "Вилюйск", "Вилючинск", "Вихоревка", "Вичуга", "Владивосток", "Владикавказ", "Владимир", "Волгоград", "Волгодонск", "Волгореченск", "Волжск", "Волжский", "Вологда", "Володарск", "Волоколамск", "Волосово", "Волхов", "Волчанск", "Вольск", "Воркута", "Воронеж", "Ворсма", "Воскресенск", "Воткинск", "Всеволожск", "Вуктыл", "Выборг", "Выкса", "Высоковск", "Высоцк", "Вытегра", "Вышний Волочёк", "Вяземский", "Вязники", "Вязьма", "Вятские Поляны", "Гаврилов Посад", "Гаврилов-Ям", "Гагарин", "Гаджиево", "Гай", "Галич", "Гатчина", "Гвардейск", "Гдов", "Геленджик", "Георгиевск", "Глазов", "Голицыно", "Горбатов", "Горно-Алтайск", "Горнозаводск", "Горняк", "Городец", "Городище", "Городовиковск", "Гороховец", "Горячий Ключ", "Грайворон", "Гремячинск", "Грозный", "Грязи", "Грязовец", "Губаха", "Губкин", "Губкинский", "Гудермес", "Гуково", "Гулькевичи", "Гурьевск", "Гурьевск", "Гусев", "Гусиноозёрск", "Гусь-Хрустальный", "Давлеканово", "Дагестанские Огни", "Далматово", "Дальнегорск", "Дальнереченск", "Данилов", "Данков", "Дегтярск", "Дедовск", "Демидов", "Дербент", "Десногорск", "Джанкой", "Дзержинск", "Дзержинский", "Дивногорск", "Дигора", "Димитровград", "Дмитриев", "Дмитров", "Дмитровск", "Дно", "Добрянка", "Долгопрудный", "Долинск", "Домодедово", "Донецк", "Донской", "Дорогобуж", "Дрезна", "Дубна", "Дубовка", "Дудинка", "Духовщина", "Дюртюли", "Дятьково", "Евпатория", "Егорьевск", "Ейск", "Екатеринбург", "Елабуга", "Елец", "Елизово", "Ельня", "Еманжелинск", "Емва", "Енисейск", "Ермолино", "Ершов", "Ессентуки", "Ефремов", "Железноводск", "Железногорск", "Железногорск", "Железногорск-Илимский", "Жердевка", "Жигулёвск", "Жиздра", "Жирновск", "Жуков", "Жуковка", "Жуковский", "Завитинск", "Заводоуковск", "Заволжск", "Заволжье", "Задонск", "Заинск", "Закаменск", "Заозёрный", "Заозёрск", "Западная Двина", "Заполярный", "Зарайск", "Заречный", "Заречный", "Заринск", "Звенигово", "Звенигород", "Зверево", "Зеленогорск", "Зеленоградск", "Зеленодольск", "Зеленокумск", "Зерноград", "Зея", "Зима", "Златоуст", "Злынка", "Змеиногорск", "Знаменск", "Зубцов", "Зуевка", "Ивангород", "Иваново", "Ивантеевка", "Ивдель", "Игарка", "Ижевск", "Избербаш", "Изобильный", "Иланский", "Инза", "Иннополис", "Инсар", "Инта", "Ипатово", "Ирбит", "Иркутск", "Исилькуль", "Искитим", "Истра", "Ишим", "Ишимбай", "Йошкар-Ола", "Кадников", "Казань", "Калач", "Калач-на-Дону", "Калачинск", "Калининград", "Калининск", "Калтан", "Калуга", "Калязин", "Камбарка", "Каменка", "Каменногорск", "Каменск-Уральский", "Каменск-Шахтинский", "Камень-на-Оби", "Камешково", "Камызяк", "Камышин", "Камышлов", "Канаш", "Кандалакша", "Канск", "Карабаново", "Карабаш", "Карабулак", "Карасук", "Карачаевск", "Карачев", "Каргат", "Каргополь", "Карпинск", "Карталы", "Касимов", "Касли", "Каспийск", "Катав-Ивановск", "Катайск", "Качканар", "Кашин", "Кашира", "Кедровый", "Кемерово", "Кемь", "Керчь", "Кизел", "Кизилюрт", "Кизляр", "Кимовск", "Кимры", "Кингисепп", "Кинель", "Кинешма", "Киреевск", "Киренск", "Киржач", "Кириллов", "Кириши", "Киров", "Киров", "Кировград", "Кирово-Чепецк", "Кировск", "Кировск", "Кирс", "Кирсанов", "Киселёвск", "Кисловодск", "Клин", "Клинцы", "Княгинино", "Ковдор", "Ковров", "Ковылкино", "Когалым", "Кодинск", "Козельск", "Козловка", "Козьмодемьянск", "Кола", "Кологрив", "Коломна", "Колпашево", "Кольчугино", "Коммунар", "Комсомольск", "Комсомольск-на-Амуре", "Конаково", "Кондопога", "Кондрово", "Константиновск", "Копейск", "Кораблино", "Кореновск", "Коркино", "Королёв", "Короча", "Корсаков", "Коряжма", "Костерёво", "Костомукша", "Кострома", "Котельники", "Котельниково", "Котельнич", "Котлас", "Котово", "Котовск", "Кохма", "Красавино", "Красноармейск", "Красноармейск", "Красновишерск", "Красногорск", "Краснодар", "Краснозаводск", "Краснознаменск", "Краснознаменск", "Краснокаменск", "Краснокамск", "Красноперекопск", "Краснослободск", "Краснослободск", "Краснотурьинск", "Красноуральск", "Красноуфимск", "Красноярск", "Красный Кут", "Красный Сулин", "Красный Холм", "Кремёнки", "Кропоткин", "Крымск", "Кстово", "Кубинка", "Кувандык", "Кувшиново", "Кудрово", "Кудымкар", "Кузнецк", "Куйбышев", "Кукмор", "Кулебаки", "Кумертау", "Кунгур", "Купино", "Курган", "Курганинск", "Курильск", "Курлово", "Куровское", "Курск", "Куртамыш", "Курчалой", "Курчатов", "Куса", "Кушва", "Кызыл", "Кыштым", "Кяхта", "Лабинск", "Лабытнанги", "Лагань", "Ладушкин", "Лаишево", "Лакинск", "Лангепас", "Лахденпохья", "Лебедянь", "Лениногорск", "Ленинск", "Ленинск-Кузнецкий", "Ленск", "Лермонтов", "Лесной", "Лесозаводск", "Лесосибирск", "Ливны", "Ликино-Дулёво", "Липецк", "Липки", "Лиски", "Лихославль", "Лобня", "Лодейное Поле", "Лосино-Петровский", "Луга", "Луза", "Лукоянов", "Луховицы", "Лысково", "Лысьва", "Лыткарино", "Льгов", "Любань", "Люберцы", "Любим", "Людиново", "Лянтор", "Магадан", "Магас", "Магнитогорск", "Майкоп", "Майский", "Макаров", "Макарьев", "Макушино", "Малая Вишера", "Малгобек", "Малмыж", "Малоархангельск", "Малоярославец", "Мамадыш", "Мамоново", "Мантурово", "Мариинск", "Мариинский Посад", "Маркс", "Махачкала", "Мглин", "Мегион", "Медвежьегорск", "Медногорск", "Медынь", "Межгорье", "Междуреченск", "Мезень", "Меленки", "Мелеуз", "Менделеевск", "Мензелинск", "Мещовск", "Миасс", "Микунь", "Миллерово", "Минеральные Воды", "Минусинск", "Миньяр", "Мирный", "Мирный", "Михайлов", "Михайловка", "Михайловск", "Михайловск", "Мичуринск", "Могоча", "Можайск", "Можга", "Моздок", "Мончегорск", "Морозовск", "Моршанск", "Мосальск", "Москва", "Муравленко", "Мураши", "Мурино", "Мурманск", "Муром", "Мценск", "Мыски", "Мытищи", "Мышкин", "Набережные Челны", "Навашино", "Наволоки", "Надым", "Назарово", "Назрань", "Называевск", "Нальчик", "Нариманов", "Наро-Фоминск", "Нарткала", "Нарьян-Мар", "Находка", "Невель", "Невельск", "Невинномысск", "Невьянск", "Нелидово", "Неман", "Нерехта", "Нерчинск", "Нерюнгри", "Нестеров", "Нефтегорск", "Нефтекамск", "Нефтекумск", "Нефтеюганск", "Нея", "Нижневартовск", "Нижнекамск", "Нижнеудинск", "Нижние Серги", "Нижний Ломов", "Нижний Новгород", "Нижний Тагил", "Нижняя Салда", "Нижняя Тура", "Николаевск", "Николаевск-на-Амуре", "Никольск", "Никольск", "Никольское", "Новая Ладога", "Новая Ляля", "Новоалександровск", "Новоалтайск", "Новоаннинский", "Нововоронеж", "Новодвинск", "Новозыбков", "Новокубанск", "Новокузнецк", "Новокуйбышевск", "Новомичуринск", "Новомосковск", "Новопавловск", "Новоржев", "Новороссийск", "Новосибирск", "Новосиль", "Новосокольники", "Новотроицк", "Новоузенск", "Новоульяновск", "Новоуральск", "Новохопёрск", "Новочебоксарск", "Новочеркасск", "Новошахтинск", "Новый Оскол", "Новый Уренгой", "Ногинск", "Нолинск", "Норильск", "Ноябрьск", "Нурлат", "Нытва", "Нюрба", "Нягань", "Нязепетровск", "Няндома", "Облучье", "Обнинск", "Обоянь", "Обь", "Одинцово", "Озёрск", "Озёрск", "Озёры", "Октябрьск", "Октябрьский", "Окуловка", "Олёкминск", "Оленегорск", "Олонец", "Омск", "Омутнинск", "Онега", "Опочка", "Орёл", "Оренбург", "Орехово-Зуево", "Орлов", "Орск", "Оса", "Осинники", "Осташков", "Остров", "Островной", "Острогожск", "Отрадное", "Отрадный", "Оха", "Оханск", "Очёр", "Павлово", "Павловск", "Павловский Посад", "Палласовка", "Партизанск", "Певек", "Пенза", "Первомайск", "Первоуральск", "Перевоз", "Пересвет", "Переславль-Залесский", "Пермь", "Пестово", "Петров Вал", "Петровск", "Петровск-Забайкальский", "Петрозаводск", "Петропавловск-Камчатский", "Петухово", "Петушки", "Печора", "Печоры", "Пикалёво", "Пионерский", "Питкяранта", "Плавск", "Пласт", "Плёс", "Поворино", "Подольск", "Подпорожье", "Покачи", "Покров", "Покровск", "Полевской", "Полесск", "Полысаево", "Полярные Зори", "Полярный", "Поронайск", "Порхов", "Похвистнево", "Почеп", "Починок", "Пошехонье", "Правдинск", "Приволжск", "Приморск", "Приморск", "Приморско-Ахтарск", "Приозерск", "Прокопьевск", "Пролетарск", "Протвино", "Прохладный", "Псков", "Пугачёв", "Пудож", "Пустошка", "Пучеж", "Пушкино", "Пущино", "Пыталово", "Пыть-Ях", "Пятигорск", "Радужный", "Радужный", "Райчихинск", "Раменское", "Рассказово", "Ревда", "Реж", "Реутов", "Ржев", "Родники", "Рославль", "Россошь", "Ростов", "Ростов-на-Дону", "Рошаль", "Ртищево", "Рубцовск", "Рудня", "Руза", "Рузаевка", "Рыбинск", "Рыбное", "Рыльск", "Ряжск", "Рязань", "Саки", "Салават", "Салаир", "Салехард", "Сальск", "Самара", "Санкт-Петербург", "Саранск", "Сарапул", "Саратов", "Саров", "Сасово", "Сатка", "Сафоново", "Саяногорск", "Саянск", "Светлогорск", "Светлоград", "Светлый", "Светогорск", "Свирск", "Свободный", "Себеж", "Севастополь", "Северо-Курильск", "Северобайкальск", "Северодвинск", "Североморск", "Североуральск", "Северск", "Севск", "Сегежа", "Сельцо", "Семёнов", "Семикаракорск", "Семилуки", "Сенгилей", "Серафимович", "Сергач", "Сергиев Посад", "Сердобск", "Серов", "Серпухов", "Сертолово", "Сибай", "Сим", "Симферополь", "Сковородино", "Скопин", "Славгород", "Славск", "Славянск-на-Кубани", "Сланцы", "Слободской", "Слюдянка", "Смоленск", "Снежинск", "Снежногорск", "Собинка", "Советск", "Советск", "Советск", "Советская Гавань", "Советский", "Сокол", "Солигалич", "Соликамск", "Солнечногорск", "Соль-Илецк", "Сольвычегодск", "Сольцы", "Сорочинск", "Сорск", "Сортавала", "Сосенский", "Сосновка", "Сосновоборск", "Сосновый Бор", "Сосногорск", "Сочи", "Спас-Деменск", "Спас-Клепики", "Спасск", "Спасск-Дальний", "Спасск-Рязанский", "Среднеколымск", "Среднеуральск", "Сретенск", "Ставрополь", "Старая Купавна", "Старая Русса", "Старица", "Стародуб", "Старый Крым", "Старый Оскол", "Стерлитамак", "Стрежевой", "Строитель", "Струнино", "Ступино", "Суворов", "Судак", "Суджа", "Судогда", "Суздаль", "Сунжа", "Суоярви", "Сураж", "Сургут", "Суровикино", "Сурск", "Сусуман", "Сухиничи", "Сухой Лог", "Сызрань", "Сыктывкар", "Сысерть", "Сычёвка", "Сясьстрой", "Тавда", "Таганрог", "Тайга", "Тайшет", "Талдом", "Талица", "Тамбов", "Тара", "Тарко-Сале", "Таруса", "Татарск", "Таштагол", "Тверь", "Теберда", "Тейково", "Темников", "Темрюк", "Терек", "Тетюши", "Тимашёвск", "Тихвин", "Тихорецк", "Тобольск", "Тогучин", "Тольятти", "Томари", "Томмот", "Томск", "Топки", "Торжок", "Торопец", "Тосно", "Тотьма", "Трёхгорный", "Троицк", "Трубчевск", "Туапсе", "Туймазы", "Тула", "Тулун", "Туран", "Туринск", "Тутаев", "Тында", "Тырныауз", "Тюкалинск", "Тюмень", "Уварово", "Углегорск", "Углич", "Удачный", "Удомля", "Ужур", "Узловая", "Улан-Удэ", "Ульяновск", "Унеча", "Урай", "Урень", "Уржум", "Урус-Мартан", "Урюпинск", "Усинск", "Усмань", "Усолье", "Усолье-Сибирское", "Уссурийск", "Усть-Джегута", "Усть-Илимск", "Усть-Катав", "Усть-Кут", "Усть-Лабинск", "Устюжна", "Уфа", "Ухта", "Учалы", "Уяр", "Фатеж", "Феодосия", "Фокино", "Фокино", "Фролово", "Фрязино", "Фурманов", "Хабаровск", "Хадыженск", "Ханты-Мансийск", "Харабали", "Харовск", "Хасавюрт", "Хвалынск", "Хилок", "Химки", "Холм", "Холмск", "Хотьково", "Цивильск", "Цимлянск", "Циолковский", "Чадан", "Чайковский", "Чапаевск", "Чаплыгин", "Чебаркуль", "Чебоксары", "Чегем", "Чекалин", "Челябинск", "Чердынь", "Черемхово", "Черепаново", "Череповец", "Черкесск", "Чёрмоз", "Черноголовка", "Черногорск", "Чернушка", "Черняховск", "Чехов", "Чистополь", "Чита", "Чкаловск", "Чудово", "Чулым", "Чусовой", "Чухлома", "Шагонар", "Шадринск", "Шали", "Шарыпово", "Шарья", "Шатура", "Шахты", "Шахунья", "Шацк", "Шебекино", "Шелехов", "Шенкурск", "Шилка", "Шимановск", "Шиханы", "Шлиссельбург", "Шумерля", "Шумиха", "Шуя", "Щёкино", "Щёлкино", "Щёлково", "Щигры", "Щучье", "Электрогорск", "Электросталь", "Электроугли", "Элиста", "Энгельс", "Эртиль", "Югорск", "Южа", "Южно-Сахалинск", "Южно-Сухокумск", "Южноуральск", "Юрга", "Юрьев-Польский", "Юрьевец", "Юрюзань", "Юхнов", "Ядрин", "Якутск", "Ялта", "Ялуторовск", "Янаул", "Яранск", "Яровое", "Ярославль", "Ярцево", "Ясногорск", "Ясный", "Яхрома"
+];
+
+let currentSelection = null; // To store the currently selected city
+
+function filterCities() {
+    const input = document.getElementById("cityInput");
+    const cityList = document.getElementById("cityList");
+    const autocompleteText = document.getElementById("autocompleteText");
+    cityList.innerHTML = "";
+
+    if (input.value.length === 0) {
+        cityList.style.display = 'none';
+        input.classList.remove('valid', 'invalid');
+        currentSelection = null; // Reset current selection
+        autocompleteText.innerText = ''; // Clear autocomplete text
+        return;
+    }
+
+    const filteredCities = cities.filter(city => city.toLowerCase().startsWith(input.value.toLowerCase()));
+
+    if (filteredCities.length > 0) {
+        // Remove the first letter from the matching city and set it as autocomplete text
+        const matchCity = filteredCities[0];
+        autocompleteText.innerText = matchCity;
+        // autocompleteText.innerText = matchCity.slice(1); // remove the first letter
+        currentSelection = matchCity; // Update current selection
+
+        // Move the cursor to the second position (after the first letter)
+        // setTimeout(() => {
+        //     input.setSelectionRange(1, 1); // Move cursor to the second position
+        // }, 0);
+
+        filteredCities.forEach(city => {
+            const div = document.createElement("div");
+            div.textContent = city;
+            div.classList.add("city-item");
+            div.onclick = () => selectCity(city);
+            cityList.appendChild(div);
+        });
+        cityList.style.display = 'block';
+        input.classList.remove('invalid'); // Remove invalid class if there are matches
+    } else {
+        cityList.style.display = 'none';
+        input.classList.add('invalid'); // Add invalid class if no matches
+        currentSelection = null; // Reset current selection
+        autocompleteText.innerText = ''; // Clear autocomplete text if no matches
+    }
+
+    
+
+}
+
+function selectCity(city) {
+    const input = document.getElementById("cityInput");
+    input.value = city;
+    input.classList.add('valid'); // Add valid class when a city is selected
+    input.classList.remove('invalid'); // Remove invalid class
+    currentSelection = city; // Update current selection
+    document.getElementById("cityList").style.display = 'none'; // Hide the list
+    document.getElementById("autocompleteText").innerText = ''; // Clear autocomplete text
+    getCityDetails()
+}
+
+// When clicking outside, select the current city if valid
+window.onclick = function (event) {
+    const input = document.getElementById("cityInput");
+    if (!event.target.matches('#cityInput') && !event.target.matches('#cityList, #cityList *')) {
+        if (currentSelection) {
+            selectCity(currentSelection); // Select current city if available
+            
+        }
+        document.getElementById("cityList").style.display = 'none'; // Hide the list
+    }
+}
+
+function getCityDetails() {
+    const bankSelect = document.getElementById("banksList");
+    const selectedBank = bankSelect.options[bankSelect.selectedIndex].value; // Get selected bank
+    const cityInput = document.getElementById("cityInput").value; // Get city input
+    const datepickerInput = document.getElementById("datepicker").value; // Get date from datepicker
+    saveCityDetails(selectedBank,cityInput,datepickerInput);
+    // Concatenate the details into the cityDetails variable
+    const cityDetails = `${selectedBank} ${cityInput} ${datepickerInput}`.trim(); // Trim to remove any extra spaces
+    console.log(cityDetails); // For debugging
+    return cityDetails; // Return the cityDetails string for further use
+}
+
+function saveCityDetails(selectedBank,cityInput,datepickerInput) {
+    var citydetails = {
+        selectedBank,
+        cityInput,
+        datepickerInput
+    };
+    console.log('citydetails object is ', citydetails);
+    localStorage.setItem("citydetails", JSON.stringify(citydetails));
+}
+
+function loadCityDetails() {
+    var citydetails = JSON.parse(localStorage.getItem("citydetails"));
+    console.log('citydetails is ', citydetails);
+
+    if (citydetails) {
+        if (citydetails.selectedBank) {
+            // Change the bank selection
+        const bankSelect = document.getElementById("banksList");
+        bankSelect.value = citydetails.selectedBank; // Set selected bank
+ 
+        }
+        if (citydetails.cityInput) {
+            // Change the city input value
+    const cityInput = document.getElementById("cityInput");
+    cityInput.value = сitydetails.cityInput; // Set city input
+        }
+ 
+        if (citydetails.datepickerInput) {
+              // Change the datepicker input value
+    const datepickerInput = document.getElementById("datepicker");
+    datepickerInput.value = citydetails.datepickerInput; // Set datepicker input
+        }
+  
+    }
+}
\ No newline at end of file
diff --git a/static/js/diag.js b/static/js/diag.js
index 48c93fa..e89713f 100644
--- a/static/js/diag.js
+++ b/static/js/diag.js
@@ -56,7 +56,7 @@ const models = {
 
 manualSelectModel = false; // manual select model   
 
-
+let cityDetails = ''
 let lastThreeRecords = [];
 
 let tempDetails = []
@@ -67,6 +67,7 @@ let isSerialHolderEmpty = true;
 let copiedTitle = '';
 
 let polite = true;
+let enableBlinking = true;
 
 $(function () {
     $('.maparea').maphilight({
@@ -77,42 +78,72 @@ $(function () {
     });
 });
 
+let intervalIds = {}; // Object to store interval IDs
+
+// External function to start blinking an element
+function startBlinking(id) {
+    const element = $(`#${id}`);
+    const data = element.data('maphilight') || {};
+    
+    if (intervalIds[id]) {
+        clearInterval(intervalIds[id]);
+    }
+
+    let isRed = true; // Track current color state
+
+    intervalIds[id] = setInterval(() => {
+        const currentColor = isRed ? 'ff0000' : '00ff00';
+        element.data('maphilight', {
+            ...data,
+            strokeColor: currentColor
+        }).trigger('alwaysOn.maphilight');
+        isRed = !isRed; // Toggle color state
+    }, 500);
+}
+// External function to stop blinking an element
+function stopBlinking(id) {
+    if (intervalIds[id]) {
+        clearInterval(intervalIds[id]);
+        delete intervalIds[id]; // Remove the interval ID from the object
+    }
+}
+
+// Click event handler for the map areas
 $("#map area").click(function () {
-    // var data = $(this).attr("maphilight");
-    // const data = $(this).mouseout().data('maphilight') || {};
     const data = $(this).data('maphilight') || {};
     data.alwaysOn = !data.alwaysOn;
-    // console.log(data);
+
     $(this).trigger('alwaysOn.maphilight');
+
     const id = $(this).attr("id");
     const gid = $(this).attr("gid");
-    // console.log(id +" is id");
-    // console.log('this issss:');
-    // console.log(this);
 
     if (isSerialHolderEmpty) {
         $('#searchText').text('Empty!')
-        // alert("Курва!!!  \n  Я пердолни, где серийный номер?");
-        showNotification('random', 'Где серийный номер?!' , 'danger')
+        showNotification('random', 'Где серийный номер?!', 'danger')
         return;
     }
 
     if (data.alwaysOn) {
-        tempDetails.push(details[gid])
+        tempDetails.push(details[gid]);
         console.log('tempDetails is: ', tempDetails);
-    }
-    else {
-        // tempDetails[gid] = false
+
+        // Start blinking the selected element
+        if (enableBlinking) {
+        startBlinking(id);
+        }
+    } else {
         console.log('else temp: ', tempDetails[gid]);
         console.log('else details: ', details[gid]);
-        var filteredArray = tempDetails.filter(e => e !== details[gid])
-        console.log('filteredArray is: ', filteredArray);
-        tempDetails = filteredArray
+        tempDetails = tempDetails.filter(e => e !== details[gid]);
+        console.log('filteredArray is: ', tempDetails);
 
+        // Stop blinking the deselected element
+        stopBlinking(id);
     }
-    checkDetails()
+
+    checkDetails();
     console.log('my tempDetails are: ', tempDetails);
-    // console.log('my chnages are: ', tempDetails);
 });
 
 $("#Tarakan").click(function () {
@@ -201,6 +232,7 @@ checkDetails = () => {
 }
 
 
+
 $('#copyText').click(function () {
     if (isSerialHolderEmpty) {
         if (copiedTitle) {
@@ -245,15 +277,19 @@ $('#copyText').click(function () {
 
     saveToLocalStorage();
 
-    // var problem = Object.keys(tempDetails)[0]
-    // checkModel(($("#serial").val()), models)
+    const userName = document.getElementById("userName").innerText;
+    console.log("userName ", userName);
+     
+    
+    const CityDetails = getCityDetails();
 
     const newDataUpload = {
         'Модель': tempModel,
         'Сер.номер': tempSerial,
         'Заявленная неисправность': tempDetails[problem][1],
         'Произведенная работа': makePlusList(tempDetails).toString(),
-        'filename': new Date().toLocaleTimeString()
+        'filename': CityDetails + ' ' + userName  ,
+        'timestamp': new Date().toLocaleTimeString()
     };
     console.log(newDataUpload);
 
@@ -421,6 +457,12 @@ $('#reset').on('click', () => {
 const cleanAll = () => {
     manualSelectModel = false;
     document.getElementById("serial").focus();
+
+    for (let id in intervalIds) {
+        clearInterval(intervalIds[id]);
+    }
+    intervalIds = {}; // Reset the interval IDs object
+    
     $("#serial").select();
 
     tempSerial = {}
@@ -487,6 +529,8 @@ SerialNumber.addEventListener("submit", (e) => {
         tempSerial = keyboardLayoutSwitch(serial.value)
         $("#serial").val(tempSerial);
         checkModel(tempSerial, models)
+        console.log('tempSerial, models', tempSerial, models);
+        
 
          fetchData(keyboardLayoutSwitch(serial.value), 'search2').then(data => {      
              console.log(data); // The response body
@@ -593,6 +637,7 @@ function addRowWithoutHeaders(arr, table) {
 
 $("#selectmodel").change(function () {
     manualSelectModel = true;
+    $("#selectmodel").removeClass("blinking");
     tempModel = document.getElementById("selectmodel").value;
     // checkModel(tempSerial, tempModel);
     checkDetails()
@@ -602,6 +647,8 @@ $("#selectmodel").change(function () {
 
 const checkModel = (serial, models) => {
     // serial.includes("3K"); // true
+    console.log('func checkModel');
+    
 
     if (manualSelectModel) {
         tempModel = document.getElementById("selectmodel").value;
@@ -618,19 +665,34 @@ const checkModel = (serial, models) => {
                 // if (serial.indexOf(element[length])!=-1) { // search in any part of string
                 if (serial.startsWith(element[length])) {
                     console.log('found serial match: ' + key);
+                    $("#selectmodel").val(key);
                     // tempModel = key
                     // console.log('list   length is ', listSerialLength);
                     // console.log('Serial length is ', serial.length);
                     if (listSerialLength == serial.length) {
                         tempModel = key
+                        $("#selectmodel").removeClass("blinking");
+                        return;
                     }else if (listSerialLength == '0'){
                         tempModel = key
+                        $("#selectmodel").removeClass("blinking");
+                        return;
                     } else {
+                        $("#selectmodel").addClass("blinking");
                         tempModel = 'ERROR'
                         showNotification('random', 'Не удалось определить модель', 'danger')
                     }
                 }
+                 
             }
+             if (tempModel == 'ERROR'){
+                $("#selectmodel").addClass("blinking");
+                    tempModel = 'ERROR'
+                    showNotification('random', 'Не удалось определить модель', 'danger')
+             }
+             
+
+
         }
     }
 }
@@ -643,21 +705,6 @@ $(document).ready(function () {
 });
 
 
-let toggle = document.getElementById('m-bar')
-
-let holder = document.getElementById('menu-links')
-let btn = document.getElementById('btn')
-
-toggle.addEventListener('click', () => {
-    if (holder.className === "hidden") {
-        holder.className = "not-hidden"
-        btn.className = "not-hidden"
-    } else {
-        holder.className = "hidden"
-        btn.className = "hidden"
-    }
-})
-
 
 let history = document.getElementById('showStorage')
 const historyLable = document.getElementById('history')
@@ -666,11 +713,11 @@ const iconSave = '<i class="fa-solid fa-floppy-disk"></i>'
 history.addEventListener('click', () => {
     if (historyLable.className === "show") {
         historyLable.className = "not-show"
-        historybtn.innerHTML = iconSave + " Show History"
+        historybtn.innerHTML = iconSave + "&nbsp  Show History"
         // btn.className = "not-hidden"
     } else {
         historyLable.className = "show"
-        historybtn.innerHTML = iconSave + " Hide History"
+        historybtn.innerHTML = iconSave + "&nbsp  Hide History"
 
     }
 })
@@ -772,4 +819,5 @@ function showNotification(msgTextTitle, msgTextContent, icon) {
     timer2 = setTimeout(() => {
         progress.classList.remove("active");
     }, 5300);
-}
\ No newline at end of file
+}
+
diff --git a/static/js/navbar.js b/static/js/navbar.js
new file mode 100644
index 0000000..9b47879
--- /dev/null
+++ b/static/js/navbar.js
@@ -0,0 +1,18 @@
+// Function to toggle the dropdown visibility
+function toggleDropdown(event) {
+    const dropdown = document.getElementById('dropdownMenu');
+    dropdown.classList.toggle('show'); // Toggle 'show' class
+}
+
+// Close the dropdown if clicked outside
+window.onclick = function(event) {
+    if (!event.target.matches('.user-photo')) {
+        const dropdowns = document.getElementsByClassName("dropdown-menu");
+        for (let i = 0; i < dropdowns.length; i++) {
+            const openDropdown = dropdowns[i];
+            if (openDropdown.classList.contains('show')) {
+                openDropdown.classList.remove('show');
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/static/js/options.js b/static/js/options.js
index 6428f17..dc09089 100644
--- a/static/js/options.js
+++ b/static/js/options.js
@@ -23,6 +23,8 @@ function changeFontSize() {
 function changeLastRecords() {
     const last = document.getElementById("last-record-setting").value;
     lastThreeRecordslength = last;
+    console.log('last recored setted to' , lastThreeRecordslength);
+    
 }
 
 function toggleTableVisibility() {
@@ -36,6 +38,8 @@ function toggleTableVisibility() {
         tableList.classList.remove("visible-table");
         // tableList.classList.add("hide");
     }
+    console.log("toggleTableVisibility toggeled "  );
+    
 }
 
 function toggleWaitingVisibility() {
@@ -87,6 +91,18 @@ function toggleNotificationPolite() {
     }
 }
 
+function toggleBlinking() {
+    var checkbox = document.getElementById("enableBlinkingCheckbox");
+
+    if (checkbox.checked) {
+        enableBlinking = true
+    } else {
+        enableBlinking = false 
+    }
+    console.log('enableBlinking is toggled ', enableBlinking);
+}
+
+ 
 
 function saveSettings() {
     var backgroundColor = document.getElementById("background-color").value;
@@ -97,6 +113,7 @@ function saveSettings() {
     var notificationUP = document.getElementById("toggleNotificationCheckbox").checked;
     var lastRecord = document.getElementById("last-record-setting").value;
     var polite = document.getElementById("togglePoliteCheckbox").checked;
+    var enableBlinking = document.getElementById("enableBlinkingCheckbox").checked;
 
     var settings = {
         backgroundColor: backgroundColor,
@@ -106,7 +123,8 @@ function saveSettings() {
         toggleWaitingCheckbox: toggleWaitingCheckbox,
         toggleFixesCheckbox: toggleFixesCheckbox,
         notificationUP: notificationUP,
-        polite: polite
+        polite: polite,
+        enableBlinking: enableBlinking
     };
     console.log('settings is object as ', settings);
 
@@ -132,7 +150,11 @@ function loadSettings() {
             document.getElementById("font-size").value = settings.fontSize;
         }
 
-        document.getElementById("background-color").value = settings.backgroundColor;
+        // if (settings.hasOwnProperty("backgroundColor")) {
+        //     document.getElementById("background-color").value = settings.backgroundColor;
+             
+        // }
+         
         
 
         if (settings.lastRecord) {
@@ -161,6 +183,12 @@ function loadSettings() {
             document.getElementById("togglePoliteCheckbox").checked = settings.polite;
             toggleNotificationPolite(); // Call the function to apply visibility based on checkbox state
         }
+        if (settings.hasOwnProperty("enableBlinking")) {
+            document.getElementById("enableBlinkingCheckbox").checked = settings.enableBlinking;
+            toggleBlinking(); // Call the function to apply visibility based on checkbox state
+            console.log('blinknig is ' , settings.enableBlinking);
+            
+        }
     }
 }
 
diff --git a/views/home.ejs b/views/home.ejs
index baea860..0e4bbd0 100644
--- a/views/home.ejs
+++ b/views/home.ejs
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -20,7 +21,9 @@
     <title>Pax S90</title>
 
     <link rel="stylesheet" href="/css/style.css">
-    <link rel="stylesheet" href="/css/nav.css">
+    <link rel="stylesheet" href="/css/notification.css">
+    <link rel="stylesheet" href="/css/navbar.css">
+    <link rel="stylesheet" href="/css/options.css">
 
     <script src="js/jquery-3.5.1.min.js"></script>
     <script src="js/jquery.maphilight.min.js"></script>
@@ -28,6 +31,12 @@
 
     <script src="https://kit.fontawesome.com/e8e55b4ad4.js" crossorigin="anonymous"></script>
     <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
+    <script src="js/navbar.js"></script>
+    <script src="js/citydetails.js"></script>
+
+    <link rel="stylesheet" href="https://code.jquery.com/ui/1.14.0/themes/base/jquery-ui.min.css">
+    <!-- <script src="https://code.jquery.com/jquery-3.7.1.js"></script> -->
+    <script src="https://code.jquery.com/ui/1.14.0/jquery-ui.min.js"></script>
 </head>
 
 <body>
@@ -39,7 +48,6 @@
 
             </div>
 
-
             <div class="message">
                 <span class="text text-1">Success</span>
                 <span class="text text-2">Your changes has been saved</span>
@@ -47,46 +55,56 @@
         </div>
         <i class="fa-solid fa-xmark close"></i>
 
-        <!-- Remove 'active' class, this is just to show in Codepen thumbnail -->
         <div class="progress"></div>
     </div>
 
     <!-- <button class="buttonTest">Show Toast</button> -->
 
-    <div class="nav-bar flex">
-        <div class="first-holder flex">
-            <a class="logo"> <img src="/images/sv-org-logo.png" height="20"> СЕРВИС-ВОЛГА </a>
-            <a href="#" id="m-bar"><i class="fas fa-bars hm"></i></a>
-            
+
+    <nav class="navbar">
+        <div class="navbar-brand" href="/">
+            <img src="/images/sv-org-logo.png" alt="Site Logo">
+            <span>СЕРВИС-ВОЛГА</span> <!-- Title as a span for styling -->
         </div>
 
-        <div id="menu-links" class="hidden">
-            <ul>
-                
-                
-                <li><a onClick="window.location.reload();" class=" "><i class="fa-solid fa-arrows-rotate"></i> <span
-                            class="hidden-title"> Refresh</span>
-                    </a> </li>
-                <li><a href="check-serials.html"> <i class="fa-solid fa-list-check"></i><span class="hidden-title">
-                            Check Serials</span> </a></li>
-                <li><a href="http://192.168.1.6:2150/" target="_blank" rel="noopener noreferrer"> <i
-                            class="fa-solid fa-upload"></i> <span class="hidden-title"> Upload</span></a></li>
-                <li><a class="options-icon" onclick="toggleOptionsBox()" href="#"><i class="fa-solid fa-gear"> <span
-                                class="hidden-title"> Options</span></i></a>
-                </li>
-                <li><a href="">Welcome <%= username %> </a>
- 
-                </li>
-                <!-- <li><a href="/home">Home</a></li> -->
-                <li><a href="/logout">Logout</a></li>
-            </ul>
-             
+        <div class="select-city">
+            <select name="banks" id="banksList" class="bank-list" placeholder="Banks" onchange="getCityDetails()">
+                <option value="Сбербанк" selected="selected">Сбербанк</option>
+                <option value="Алфабанк">Алфабанк</option>
+                <option value="Стандарт">Стандарт</option>
+            </select>
+            <div class="city-selection">
+                <div id="autocompleteText" class="auto-complete-text"></div>
+                <input type="text" id="cityInput" placeholder="Type a city..." onkeyup="filterCities()""   autocomplete="off">
+                <div id="cityList"></div>
+            </div>
+            <input type="text" id="datepicker" autocomplete="off" onchange="getCityDetails()">
         </div>
 
-        <a id="showStorage" class="nav-btn hidden show">
-            <div id="history-lable"><i class="fa-solid fa-floppy-disk"></i> Show History</div>
-        </a>
-    </div>
+        <div class="dropdown">
+            <img  src="<%= avatar %>" alt="User Photo" class="user-photo" onclick="toggleDropdown(event)">
+            <div class="dropdown-menu" id="dropdownMenu">
+                <div class="user-details">
+                    <img src="<%= avatar %>" alt="User Photo" class="user-photo"
+                        style="width: 60px; height: 60px;"> <!-- Larger photo in dropdown -->
+                    <div id="userName" class="user-name" ><%= username %></div> <!-- Username -->
+                </div>
+                <a class="dropdown-item" href="#"><i class="fa-solid fa-user"></i>&nbsp Profile</a>
+                <a class="dropdown-item" onclick="toggleOptionsBox()" href="#"><i class="fa-solid fa-gear"></i>&nbsp
+                    Settings</a>
+                <a class="dropdown-item" href="check-serials.html"><i class="fa-solid fa-list-check"></i>&nbsp Check
+                    Serials</a>
+                <a class="dropdown-item" href="http://192.168.1.6:2150/"><i class="fa-solid fa-upload"></i>&nbsp Upload
+                    xlsx</a>
+                <a id="showStorage" class="dropdown-item">
+                    <div id="history-lable"><i class="fa-solid fa-floppy-disk"></i>&nbsp Show History</div>
+                </a>
+
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="/logout"><i class="fa-solid fa-right-from-bracket"></i>&nbsp Logout</a>
+            </div>
+        </div>
+    </nav>
 
     <div class="beta"><textarea id="titleInput" class="inputHolder" placeholder="" rows="" cols="" name=""
             form=""> </textarea>
@@ -98,36 +116,36 @@
 
 
     <div class="buttons">
-        
-            <select name="model" id="selectmodel" class="serialform modelselect" placeholder="Model">
-                <option value="S90">S90</option>
-                <option value="S80">S80</option>
-                <option value="SP30">SP30</option>
-                <option value="S200">S200</option>
-                <option value="S300">S300</option>
-                <option value="S920">S920</option>
-                <option value="S900">S900</option>
-                <option value="A920">A920</option>
-                <option value="A930">A930</option>
-                <option value="D200">D200</option>
-                <option value="D230">D230</option>  
-                <option value="IM20">IM20</option>  
 
-                <option value="V240m">V240m</option>
-                <option value="V200t">V200t</option>
-                <option value="V205c">V205c</option>
-                <option value="V520">V520</option>
-                <option value="VX675">VX675</option>
-                <option value="VX680">VX680</option>
-                <option value="VX805">VX805</option>
-                <option value="VX820">VX820</option>
-                <option value="VX840">VX840</option>
-    
-                <option value="P400">P400</option>
-                <option value="PP1000se">PP1000se</option>
-              
-            </select>
-            <div> 
+        <select name="model" id="selectmodel" class="serialform modelselect" placeholder="Model">
+            <option value="S90">S90</option>
+            <option value="S80">S80</option>
+            <option value="SP30">SP30</option>
+            <option value="S200">S200</option>
+            <option value="S300">S300</option>
+            <option value="S920">S920</option>
+            <option value="S900">S900</option>
+            <option value="A920">A920</option>
+            <option value="A930">A930</option>
+            <option value="D200">D200</option>
+            <option value="D230">D230</option>
+            <option value="IM20">IM20</option>
+
+            <option value="V240m">V240m</option>
+            <option value="V200t">V200t</option>
+            <option value="V205c">V205c</option>
+            <option value="V520">V520</option>
+            <option value="VX675">VX675</option>
+            <option value="VX680">VX680</option>
+            <option value="VX805">VX805</option>
+            <option value="VX820">VX820</option>
+            <option value="VX840">VX840</option>
+
+            <option value="P400">P400</option>
+            <option value="PP1000se">PP1000se</option>
+
+        </select>
+        <div>
             <form action="" id="SerialNumber" class="serialform">
                 <!-- <span>SerialNumber: </span> -->
                 <input type="text" id="serial" class="form-control" placeholder="serial number">
@@ -395,65 +413,125 @@
 
         <!-- OPTION TAG -->
         <div id="options-box" class="options-box">
+            <!-- <span class="close-btn">&times;</span> -->
             <div class="close-btn" onclick="closeOptionsBox()">✖</div>
-            <h2>Options</h2>
-            <label for="background-color">Background Color:</label>
-            <input type="color" id="background-color" onchange="changeBackgroundColor()">
-            <!-- <br>
-            <label for="font-size">Font Size (px):</label>
-            <input type="number" id="font-size" min="10" max="50" onchange="changeFontSize()"> -->
+            <h2 class="option-title">Options</h2>
 
-            <br>
-            <hr>
-            <label for="toggleCheckbox">Последние записи ... Скрыть? </label>
-            <input type="checkbox" id="toggleCheckbox" onchange="toggleTableVisibility()">
-            <br>
-            <label for="font-size">Максимальное количество последних записей :</label>
-            <input type="number" id="last-record-setting" min="1" max="9" placeholder="2"
-                onchange="changeLastRecords()">
-
-
-            <br>
+            <div class="form-group">
+                <label for="background-color">Background Color:</label>
+                <input type="color" id="background-color" onchange="changeBackgroundColor()">
+            </div>
 
             <hr>
-            <label for="toggleWaitingCheckbox">Скрыть кнопки (в ожидание запасных частей) ?</label>
-            <input type="checkbox" id="toggleWaitingCheckbox" onchange="toggleWaitingVisibility()">
-            <br>
-            <label for="newButtonInput">В ожидание :</label>
-            <input type="text" id="newButtonInput" placeholder="В ожидании крышки принтера">
-            <br>
-            <button onclick="addButton()" class="additionalInfo centered">Добавить новую кнопку</button>
-            <div id="settingButtonsContainer"> </div>
-            <br>
+
+            <div class="form-group">
+                <p class="group-options-title">Таилица последних записей</p>
+            </div>
+            <div class="form-group">
+                <label for="toggleCheckbox" class="switch has-label">
+                    <input type="checkbox" name="toggleCheckbox" id="toggleCheckbox"
+                        onchange="toggleTableVisibility()" />
+                    <span class="track"><span class="thumb"></span></span>
+                    <span class="off">Скрыть Последние записи?</span>
+                </label>
+            </div>
+            <div class="form-group">
+                <label for="font-size">Максимальное количество последних записей :</label>
+                <input type="number" id="last-record-setting" min="1" max="9" placeholder="2"
+                    onchange="changeLastRecords()">
+            </div>
 
             <hr>
-            <label for="toggleFixesCheckbox">Скрыть кнопки (доб. неисправность) ?</label>
-            <input type="checkbox" id="toggleFixesCheckbox" onchange="toggleFixesVisibility()">
-            <br>
-            <label for="new2ButtonInput">Заявленная неисправность :</label>
 
-            <input type="text" id="new2ButtonInput" placeholder="неисправность">
-            <br>
-            <!-- Additional input for button note -->
-            <label for="new2ButtonNote">Произведенная работа :</label>
-            <input type="text" id="new2ButtonNote" placeholder="Произведенная работа">
-            <br>
-            <button onclick="add2Button()" class="additional2buttons centered">Добавить новую кнопку</button>
-            <div id="setting2ButtonsContainer"> </div>
+            <div class="form-group">
+                <p class="group-options-title">option в ожидание</p>
+            </div>
+            <div class="form-group">
+                <label for="toggleWaitingCheckbox" class="switch has-label">
+                    <input type="checkbox" name="toggleWaitingCheckbox" id="toggleWaitingCheckbox"
+                        onchange="toggleWaitingVisibility()" />
+                    <span class="track"><span class="thumb"></span></span>
+                    <span class="off">Скрыть кнопки (в ожидание запасных частей) ?</span>
+                </label>
+            </div>
+            <div class="form-group">
+                <label for="newButtonInput">Текст В ожидание :</label>
+                <input type="text" id="newButtonInput" placeholder="В ожидании крышки принтера">
+            </div>
+            <div class="form-group">
+                <button onclick="addButton()" class=" options-button">Добавить новую кнопку</button>
+
+            </div>
+            <div class="addedButtonsContainer" id="settingButtonsContainer"> </div>
+
             <hr>
-            <label for="toggleNotificationCheckbox">Уведомлени вверх ?</label>
-            <input type="checkbox" id="toggleNotificationCheckbox" onchange="toggleNotificationUP()">
-            <br>
-            <label for="togglePoliteCheckbox">Polite notification ?</label>
-            <input type="checkbox" id="togglePoliteCheckbox" onchange="toggleNotificationPolite()">
-            <br>
-            <br>
-            <br>
-            <button class="centered" onclick="saveSettings()">Save Settings</button>
-            <button onclick="clearSettings()">Clear Settings</button>
+
+            <div class="form-group">
+                <p class="group-options-title">option неисправность</p>
+            </div>
+            <div class="form-group">
+                <label for="toggleFixesCheckbox" class="switch has-label">
+                    <input type="checkbox" name="toggleFixesCheckbox" id="toggleFixesCheckbox"
+                        onchange="toggleFixesVisibility()" />
+                    <span class="track"><span class="thumb"></span></span>
+                    <span class="off">Скрыть кнопки (доб. неисправность) ?</span>
+                </label>
+            </div>
+            <div class="form-group">
+                <label for="new2ButtonInput">Заявленная неисправность :</label>
+
+                <input type="text" id="new2ButtonInput" placeholder="Произведенная работа">
+            </div>
+            <div class="form-group">
+                <label for="new2ButtonNote">Произведенная работа :</label>
+                <input type="text" id="new2ButtonNote" placeholder="Произведенная работа">
+            </div>
+            <div class="form-group">
+                <button onclick="add2Button()" class="options-button">Добавить новую кнопку</button>
+            </div>
+            <div class="addedButtonsContainer" id="setting2ButtonsContainer"> </div>
+
+            <hr>
+
+            <div class="form-group">
+                <p class="group-options-title">Notifications</p>
+            </div>
+            <div class="form-group">
+                <label for="toggleNotificationCheckbox" class="switch has-label">
+                    <input type="checkbox" name="toggleNotificationCheckbox" id="toggleNotificationCheckbox"
+                        onchange="toggleNotificationUP()" />
+                    <span class="track"><span class="thumb"></span></span>
+                    <span class="off">Уведомлени вверх ?</span>
+                </label>
+            </div>
+            <div class="form-group">
+                <label for="togglePoliteCheckbox" class="switch has-label">
+                    <input type="checkbox" name="togglePoliteCheckbox" id="togglePoliteCheckbox"
+                        onchange="toggleNotificationPolite()" />
+                    <span class="track"><span class="thumb"></span></span>
+                    <span class="off">Polite notification ?</span>
+                    <!-- <span class="on">ON</span> -->
+                </label>
+            </div>
+
+            <hr>
+            <div class="form-group">
+                <p class="group-options-title">Warning</p>
+            </div>
+            <div class="form-group">
+                <label for="enableBlinkingCheckbox" class="switch has-label">
+                    <input type="checkbox" name="enableBlinkingCheckbox" id="enableBlinkingCheckbox"
+                        onchange="toggleBlinking()" />
+                    <span class="track"><span class="thumb"></span></span>
+                    <span class="off">Blink selected problem?</span>
+                    <!-- <span class="on">ON</span> -->
+                </label>
+            </div>
 
 
+            <button class="options-button" onclick="clearSettings()">Clear Settings</button>
 
+            <button class="options-button" onclick="saveSettings()">Save Options</button>
         </div>
 
 
@@ -469,4 +547,4 @@
 <script src="js/russiankeys.js"></script>
 <script src="js/diag.js"></script>
 
-</html>
+</html>
\ No newline at end of file