Изменение шапки. Добавлено переключение страниц.

assets/css/style.css

@@ -69,10 +69,8 @@ header > .site-info > .version {
 }
 
 header > div > .logo {
-  background-image: linear-gradient(0deg, #b2b2cb 0%, white 25%, white 75%, #b2b2cb 100%);
   height: 100%;
   width: 295px;
-  border: 1px solid white;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -88,7 +86,7 @@ header > div > .logo {
 }
 
 header > div > .logo object {
-  width: 273px;
+  width: 150px;
   height: 144px;
 }
 
@@ -97,26 +95,23 @@ header > div > .logo .logo-link-to-main {
 }
 
 header > .header-org-name {
-  background-color: #666699;
-  border: 1px solid white;
-  border-left: 0;
-  text-shadow: 2px 2px 2px #222277;
-  font-family: Arial, Helvetica, sans-serif;
-  color: white;
-  text-align: center;
-  padding: 5px;
-    flex-grow: 1;
-    display: flex;
+    border-left: 0;
+	text-shadow: 1px 1px 4px #d6d6d6;
+	color: #5a5a5a;
+	text-align: center;
+	padding: 5px;
+	flex-grow: 1;
+	display: flex;
 	flex-direction: column;
 	justify-content: space-evenly;
 }
 
 header > .header-org-name > .org-type {
-  font-size: 12px;
+  font-size: 14px;
 }
 
 header > .header-org-name > .org-caption {
-  font-size: 30px;
+  font-size: 35px;
   font-weight: 700;
 }
 
@@ -124,33 +119,22 @@ header > .header-org-name > .org-caption-by {
   font-size: 20px;
 }
 
-header >  .header-org-mission {
-  background-color: #cc0000;
-  border: 1px solid white;
-  border-top: 0;
-  border-left: 0;
-  text-align: center;
-  font-size: 16px;
-  color: white;
-  text-shadow: 1px 1px 2px black;
-  font-family: Arial, Helvetica, sans-serif;
-  padding: 5px;
-}
-
 header {
     flex-shrink: 0;
 }
 main {
     background-color: white;
-    height: 100%;
-    overflow: hidden;
-    position: relative;
+	height: 100%;
+	overflow: hidden;
+	position: relative;
+	border-radius: 20px;
+	box-shadow: 0 0 16px #e8e8e8;
+	margin-top: 10px;
 }
 footer {
-    background-color: rgb(70, 70, 70);
     height: 40px;
     flex-shrink: 0;
-    color: rgb(230, 230, 230);
+    color: rgb(70, 70, 70);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -183,13 +167,14 @@ p {
 	left: 0;
 	right: 0;
 	bottom: 0;
-	display: flex;
+	display: none;
 	flex-direction: row;
 	justify-content: center;
-	align-items: center;
+    align-items: center;
 }
 .page.active {
     z-index: 10;
+    display: flex;
 }
 
 .page > * {
@@ -201,14 +186,14 @@ p {
 }
 .page p {
     color: rgb(44, 44, 44);
-    font-size: 20px;
+    font-size: 18px;
 }
 .page button {
     border: 2px solid #2196F3;
 	border-radius: 10px;
 	width: 50%;
 	padding: 5px;
-	font-size: 20px;
+	font-size: 16px;
 	font-family: Scada;
 	color: #ffffff;
 	background-color: #2196F3;

assets/js/script.js

@@ -0,0 +1,21 @@
+let dots = document.querySelectorAll(".dots > div");
+
+for (let d of dots) {
+	d.onclick = function (event) {
+		if (this.dataset && this.dataset.page) {
+			let switchPage = document.querySelector(this.dataset.page);
+			if (switchPage) {
+				if (!this.classList.contains("active") && !switchPage.classList.contains("active")) {
+					let active = document.querySelector(".dots > .active");
+					let activePage = document.querySelector(".page.active");
+					if (active && activePage) {
+						active.classList.remove("active");
+						activePage.classList.remove("active");
+					}
+				}
+				this.classList.add("active");
+				switchPage.classList.add("active");
+			}
+		}
+	};
+}

html/index.html

@@ -30,7 +30,7 @@
 			</div>
 		</div> -->
 
-		<div class="page active">
+		<div id="Page1" class="page active">
 			<img src="images/1.png">
 			<div>
 				<h2>Lorem, ipsum dolor</h2>
@@ -41,17 +41,54 @@
 				<button>Перейти</button>
 			</div>
 		</div>
-		<div class="page"></div>
-		<div class="page"></div>
-		<div class="page"></div>
-		<div class="page"></div>
+		<div id="Page2" class="page">
+			<img src="images/2.png">
+			<div>
+				<h2>Lorem ipsum dolor sit.</h2>
+				<p>
+					Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolores!
+				</p>
+				<button>Перейти</button>
+			</div>
+		</div>
+		<div id="Page3" class="page">
+			<img src="images/3.png">
+			<div>
+				<h2>Lorem ipsum dolor sit amet.</h2>
+				<p>
+					Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore debitis dolores dolor voluptatibus
+					et.
+				</p>
+				<button>Перейти</button>
+			</div>
+		</div>
+		<div id="Page4" class="page">
+			<img src="images/4.png">
+			<div>
+				<h2>Lorem, ipsum dolor</h2>
+				<p>
+					Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita, accusantium doloremque.
+				</p>
+				<button>Перейти</button>
+			</div>
+		</div>
+		<div id="Page5" class="page">
+			<img src="images/5.png">
+			<div>
+				<h2>Lorem ipsum dolor sit amet.</h2>
+				<p>
+					Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloremque sequi impedit quisquam!
+				</p>
+				<button>Перейти</button>
+			</div>
+		</div>
 
 		<div class="dots">
-			<div class="active"></div>
-			<div></div>
-			<div></div>
-			<div></div>
-			<div></div>
+			<div data-page="#Page1" class="active"></div>
+			<div data-page="#Page2"></div>
+			<div data-page="#Page3"></div>
+			<div data-page="#Page4"></div>
+			<div data-page="#Page5"></div>
 		</div>
 
 	</main>
@@ -64,6 +101,7 @@
 	{{if eq .IsAdmin true}}
 	<script src="/assets/js/admin.js"></script>
 	{{end}}
+	<script src="/assets/js/script.js"></script>
 </body>
 
 </html>

main.go

@@ -47,6 +47,7 @@ func main() {
 	router.NoRoute(notFound)
 
 	router.GET("/", index)
+	router.GET("/page/:page", indexPage)
 	router.GET("/authorization", authorization)
 	router.POST("/login", login)
 	router.GET("/logout", logout)
@@ -58,6 +59,30 @@ func notFound(c *gin.Context) {
 	c.HTML(404, "404", gin.H{})
 }
 
+func indexPage(c *gin.Context) {
+	page := c.Param("page")
+
+	s := sessions.Default(c)
+
+	admin := false
+	isLogin := false
+
+	role, ok := s.Get("MySecretKey").(string)
+	if ok {
+		if role == "admin" {
+			admin = true
+		}
+		isLogin = true
+	}
+
+	c.HTML(200, "index", gin.H{
+		"Title":   "Мой сайт",
+		"IsAdmin": admin,
+		"IsLogin": isLogin,
+		"Page":    page,
+	})
+}
+
 func index(c *gin.Context) {
 	s := sessions.Default(c)
 
@@ -76,6 +101,7 @@ func index(c *gin.Context) {
 		"Title":   "Мой сайт",
 		"IsAdmin": admin,
 		"IsLogin": isLogin,
+		"Page":    "main",
 	})
 }