Просмотр исходного кода

Добавлена карусель, исправлен logout, изменен шаблон для слайдера

Alec 5 лет назад
Родитель
Сommit
016b763674
15 измененных файлов с 547 добавлено и 117 удалено
  1. 127 0
      assets/css/carousel.css
  2. 163 36
      assets/css/style.css
  3. 135 0
      assets/js/carousel.js
  4. 53 0
      assets/logo.svg
  5. BIN
      data/images/1.jpg
  6. BIN
      data/images/1.png
  7. BIN
      data/images/2.jpg
  8. BIN
      data/images/3.jpg
  9. BIN
      data/images/4.jpg
  10. BIN
      data/images/5.jpg
  11. BIN
      data/images/6.jpg
  12. 1 1
      html/footer.html
  13. 8 17
      html/header.html
  14. 55 63
      html/index.html
  15. 5 0
      main.go

+ 127 - 0
assets/css/carousel.css

@@ -0,0 +1,127 @@
+*, *::before, *::after {
+  margin: 0;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+.carousel-container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.carousel-container .root .carousel {
+  /* border: 2px solid black; */
+  position: relative;
+  overflow: hidden;
+  /* -webkit-box-shadow: 0 0 16px black; */
+          /* box-shadow: 0 0 16px black; */
+}
+
+.carousel-container .root .carousel > .inner {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: nowrap;
+      flex-wrap: nowrap;
+}
+
+.carousel-container .root .carousel > .inner img {
+  width: 100%;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  -webkit-transition: opacity 500ms ease;
+  transition: opacity 500ms ease;
+}
+
+.carousel-container .root .carousel > .inner.loaded img {
+  opacity: 0;
+}
+
+.carousel-container .root .carousel .left, .carousel-container .root .carousel .right {
+  position: absolute;
+  width: 50px;
+  top: 0;
+  bottom: 0;
+  z-index: 10;
+}
+
+.carousel-container .root .carousel .left::after, .carousel-container .root .carousel .right::after {
+  font-size: 40px;
+  font-weight: bold;
+  color: rgba(255, 255, 255, 0.25);
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  z-index: 20;
+}
+
+.carousel-container .root .carousel .left:hover, .carousel-container .root .carousel .right:hover {
+  cursor: pointer;
+}
+
+.carousel-container .root .carousel .left:hover::after, .carousel-container .root .carousel .right:hover::after {
+  color: rgba(255, 255, 255, 0.75);
+}
+
+.carousel-container .root .carousel .left {
+  left: 0;
+}
+
+.carousel-container .root .carousel .left::after {
+  content: "<";
+}
+
+.carousel-container .root .carousel .right {
+  right: 0;
+}
+
+.carousel-container .root .carousel .right::after {
+  content: ">";
+}
+
+.carousel-container .root .dots {
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.carousel-container .root .dots .dot {
+  background-color: black;
+  width: 10px;
+  height: 10px;
+  margin: 10px;
+  border-radius: 50%;
+  position: relative;
+}
+
+.carousel-container .root .dots .dot:hover {
+  cursor: pointer;
+}
+
+.carousel-container .root .dots .dot::after {
+  content: "";
+  border-radius: 50%;
+  position: absolute;
+  border: 2px solid black;
+  top: -4px;
+  left: -4px;
+  right: -4px;
+  bottom: -4px;
+  opacity: 0;
+  -webkit-transition: opacity 500ms ease-in-out;
+  transition: opacity 500ms ease-in-out;
+}
+
+.carousel-container .root .dots .dot.active::after {
+  opacity: 1;
+  -webkit-transition: opacity 500ms ease-in-out;
+  transition: opacity 500ms ease-in-out;
+}
+/*# sourceMappingURL=style.css.map */

+ 163 - 36
assets/css/style.css

@@ -40,34 +40,110 @@ body {
     flex-direction: column;
 }
 
-.logo {
-    width: 80px;
-    height: 80px;
 
-    /* Удалить, если будет установлена картинка */
-    background-color: #00bcd4;
+header {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+header > .site-info {
+  position: relative;
+}
+
+header > .site-info > .beta {
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  z-index: 1;
+}
+
+header > .site-info > .version {
+  font-size: 10px;
+  position: absolute;
+  bottom: 8px;
+  left: 10px;
+  color: #666699;
+  z-index: 1;
+}
+
+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;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+      -ms-flex-pack: center;
+          justify-content: center;
 }
 
-.org-name {
-    font-size: 24px;
-    color: rgb(80, 80, 80);
+header > div > .logo object {
+  width: 273px;
+  height: 144px;
 }
 
-.header {
+header > div > .logo .logo-link-to-main {
+  display: none;
+}
+
+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;
-    justify-content: space-between;
-    align-items: center;
-    padding: 20px 40px;
-    background-color: white;
+	flex-direction: column;
+	justify-content: space-evenly;
+}
+
+header > .header-org-name > .org-type {
+  font-size: 12px;
 }
+
+header > .header-org-name > .org-caption {
+  font-size: 30px;
+  font-weight: 700;
+}
+
+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%;
-    padding: 20px;
-    overflow: auto;
+    overflow: hidden;
     position: relative;
 }
 footer {
@@ -80,27 +156,6 @@ footer {
     align-items: center;
 }
 
-nav {
-	display: flex;
-    justify-content: space-evenly;
-    background-color: #B2EBF2;
-    padding-top: 2px;
-}
-nav > .item > a {
-	text-decoration: none;
-	color: #00838F;
-    font-size: 16px;
-    font-weight: bold;
-    text-transform: uppercase;
-	padding: 10px;
-    display: block;
-    border-bottom: 2px solid transparent;
-}
-nav > .item > a:hover {
-    color: #006064;
-    border-color: #006064;
-}
-
 .body {
     display: grid;
     grid-template-columns: 200px 1fr;
@@ -120,4 +175,76 @@ nav > .item > a:hover {
 
 p {
     margin: 10px 0;
+}
+
+.page {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+}
+.page.active {
+    z-index: 10;
+}
+
+.page > * {
+	width: 40vh;
+}
+.page h2 {
+    color: rgb(99, 99, 99);
+    font-size: 40px;
+}
+.page p {
+    color: rgb(44, 44, 44);
+    font-size: 20px;
+}
+.page button {
+    border: 2px solid #2196F3;
+	border-radius: 10px;
+	width: 50%;
+	padding: 5px;
+	font-size: 20px;
+	font-family: Scada;
+	color: #ffffff;
+	background-color: #2196F3;
+    margin-top: 10px;
+    outline: none;
+    
+    transition: color 200ms ease-in-out, background-color 200ms ease-in-out;
+}
+.page button:hover {
+    color: #2196F3;
+    background-color: #ffffff;
+    cursor: pointer;
+
+    transition: color 200ms ease-in-out, background-color 200ms ease-in-out;
+}
+
+.dots {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    z-index: 20;
+}
+.dots > div {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background-color: rgba(33, 150, 243, 0.35);
+    margin: 10px;
+}
+.dots > div.active {
+    background-color: rgb(33, 150, 243);
+}
+.dots > div:hover:not(.active) {
+    background-color: rgba(33, 150, 243, 0.75);
+    cursor: pointer;
 }

+ 135 - 0
assets/js/carousel.js

@@ -0,0 +1,135 @@
+let carouselWidth, carousel;
+
++function init() {
+	let carouselRoot = document.createElement('div');
+	carouselRoot.classList.add('root');
+
+	carousel = document.querySelector("#Carousel");
+
+	try {
+		carouselWidth = Number(carousel.dataset.width);
+	} catch (err) {
+		console.log("%c ERROR ", "background-color:red;color:white;", err);
+		carouselWidth = 600;
+	}
+
+	carousel.style.width = `${carouselWidth}px`;
+	carousel.parentElement.append(carouselRoot);
+	carouselRoot.append(carousel);
+
+	if (carousel && carousel.children) {
+		let inner = document.createElement('div'),
+			index = 0;
+
+		let images = carousel.querySelectorAll("[data-image]");
+
+		for (let image of images) {
+			let img = document.createElement("img");
+			img.src = image.dataset.image;
+			img.style.width = `${carouselWidth}px`;
+			img.dataset.index = index++;
+			inner.append(img);
+		}
+		inner.classList.add('inner', 'loaded');
+
+		while (carousel.children.length > 0) {
+			carousel.children[0].remove();
+		}
+
+		carousel.append(inner);
+
+		let nextImage = function () {
+			inner.style.transition = `left 200ms ease 0s`;
+			inner.style.left = `-${carouselWidth * 2}px`;
+
+			try {
+				setDots(Number(inner.children[2].dataset.index));
+			} catch (err) {
+				console.log("%c ERROR ", "background-color:red;color:white;", err);
+			}
+
+			setTimeout(function (e, w) {
+				e.style.transition = 'none';
+
+				e.append(e.firstElementChild);
+
+				e.style.left = `-${w}px`;
+			}, 200, inner, carouselWidth);
+		};
+
+		let interval = setInterval(function () {
+			if (inner.clientHeight != 0) {
+				carousel.style.height = `${inner.clientHeight}px`;
+				inner.style.position = 'absolute';
+				inner.style.left = `-${carouselWidth}px`;
+				inner.classList.remove('loaded');
+
+				clearInterval(interval);
+			}
+		}, 100);
+
+		let autoInterval = setInterval(nextImage, 5000);
+
+		// Кнопки переключения
+		let left = document.createElement('div'),
+			right = document.createElement('div');
+
+		left.classList.add('left');
+		right.classList.add('right');
+
+		left.addEventListener('click', function () {
+			inner.style.transition = `left 200ms ease 0s`;
+			inner.style.left = `0px`;
+
+			try {
+				setDots(Number(inner.children[0].dataset.index));
+			} catch (err) {
+				console.log("%c ERROR ", "background-color:red;color:white;", err);
+			}
+
+			setTimeout(function (e, w) {
+				e.style.transition = 'none';
+
+				e.prepend(e.lastElementChild);
+
+				e.style.left = `-${w}px`;
+			}, 200, inner, carouselWidth);
+
+			clearInterval(autoInterval);
+			autoInterval = setInterval(nextImage, 5000);
+		});
+		right.addEventListener('click', function () {
+			nextImage();
+			clearInterval(autoInterval);
+			autoInterval = setInterval(nextImage, 5000);
+		});
+
+		carousel.append(left, right);
+
+		if ("dots" in carousel.dataset && carousel.dataset.dots == "true") {
+			// Навигационные точки
+			// Размер одной точки 30x30px
+			// Если ширина карусели меньше чем КоличествоКартинок * 30, тогда точки не показывать
+			if (images.length * 30 < carouselWidth) {
+				let dots = document.createElement('div');
+				for (let i = 0; i < images.length; i++) {
+					let dot = document.createElement('div');
+					dot.classList.add('dot');
+					dots.append(dot);
+				}
+				dots.classList.add('dots');
+				dots.children[1].classList.add('active');
+				carouselRoot.append(dots);
+			}
+		}
+	}
+}();
+
+function setDots(index) {
+	let activeDots = document.querySelectorAll(".dots > .dot.active");
+	for (let ad of activeDots) {
+		ad.classList.remove('active');
+	}
+	let dots = document.querySelector(".dots");
+	dots.children[index].classList.add("active");
+}

+ 53 - 0
assets/logo.svg

@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 600 335" style="enable-background:new 0 0 600 335;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#BFBFBF;}
+	.st1{fill:#222277;}
+	.st2{fill:url(#SVGID_1_);stroke:#000000;stroke-width:4;stroke-miterlimit:10;}
+	.st3{fill:#FFFFFF;}
+	.st4{fill:none;stroke:#000000;stroke-width:4;stroke-miterlimit:10;}
+	.st5{fill:url(#SVGID_2_);stroke:#000000;stroke-width:4;stroke-miterlimit:10;}
+	.st6{fill:#CC0000;}
+	.st7{fill:#222277;stroke:#000000;stroke-width:4;stroke-miterlimit:10;}
+	.st8{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
+</style>
+<g>
+	<path class="st0" d="M169.6,291.2l146.5-206h206l-157,220.5c0,0-16.3,25.7-47.4,18c-24.8-6.2-26.3-32.5-26.3-32.5H169.6z"/>
+	<path class="st1" d="M108,291.5h183c0,0,5.7,27.7,26,32.5c30.9,7.4,47.4-18,47.4-18s-17.3,24.5-44.9,24.5c-27.8,0-178.3,0-178.3,0
+		s-17-2-25-14.2C107,302.4,108,291.5,108,291.5z"/>
+	
+		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="226.5578" y1="85.6403" x2="270.5114" y2="54.3314" gradientTransform="matrix(1 0 0 -1 0 336)">
+		<stop  offset="4.787234e-02" style="stop-color:#FFFFFF"/>
+		<stop  offset="0.7106" style="stop-color:#FFFFFF"/>
+		<stop  offset="0.7188" style="stop-color:#CE0909"/>
+	</linearGradient>
+	<polyline class="st2" points="208.4,281.3 273.2,281.3 248.9,222.4 	"/>
+	<g>
+		<polygon class="st3" points="184,173.5 248,222 208,280.5 142.5,232 		"/>
+		<polygon class="st4" points="184,173.5 248,222 208,280.5 142.5,232 		"/>
+	</g>
+	
+		<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="485.0468" y1="60.0391" x2="524.3017" y2="115.3818" gradientTransform="matrix(1 0 0 -1 0 336)">
+		<stop  offset="0" style="stop-color:#CC0000"/>
+		<stop  offset="3.082414e-02" style="stop-color:#CC0000"/>
+		<stop  offset="0.2181" style="stop-color:#CC0000"/>
+		<stop  offset="0.2286" style="stop-color:#FFFFFF"/>
+		<stop  offset="0.5384" style="stop-color:#FFFFFF"/>
+		<stop  offset="0.5431" style="stop-color:#CC0000"/>
+	</linearGradient>
+	<path class="st5" d="M590,268l-25,12.5c0,0-21.5-21-45-17.5s-37,17.5-37,17.5l-67-47.2l42.5-59.8L590,268z"/>
+	<g>
+		<polygon class="st6" points="382.5,153 382.5,83.5 316.5,83.5 316.5,280.5 382.5,280.5 522.5,83.5 431,83.5 		"/>
+		<polygon class="st4" points="382.5,153 382.5,83.5 316.5,83.5 316.5,280.5 382.5,280.5 522.5,83.5 431,83.5 		"/>
+	</g>
+	<polygon class="st7" points="157,12 157,83.5 248,83.5 248,177 314.5,83.5 405,83.5 405,12 	"/>
+	<g>
+		<path class="st3" d="M37,83.5h70v69l50-69h90.1c0.4,0,0.6,0.4,0.4,0.7L108,280.5H37V83.5z"/>
+		<path class="st4" d="M37,83.5h70v69l50-69h90.1c0.4,0,0.6,0.4,0.4,0.7L108,280.5H37V83.5z"/>
+	</g>
+	<line class="st8" x1="50" y1="83.5" x2="50" y2="280.5"/>
+	<line class="st8" x1="439.9" y1="199.8" x2="529.1" y2="262.8"/>
+</g>
+</svg>

BIN
data/images/1.jpg


BIN
data/images/1.png


BIN
data/images/2.jpg


BIN
data/images/3.jpg


BIN
data/images/4.jpg


BIN
data/images/5.jpg


BIN
data/images/6.jpg


+ 1 - 1
html/footer.html

@@ -1,5 +1,5 @@
 {{define "footer"}}
 <footer>
-    (c) Все права защищены 2020
+    &copy; Все права защищены 2020
 </footer>
 {{end}}

+ 8 - 17
html/header.html

@@ -1,24 +1,15 @@
 {{define "header"}}
 <header>
-    <div class="header">
+    <div class="site-info">
         <div class="logo">
-            <!-- <img src="" alt="logo"> -->
+            <object id="KtkLogo" type="image/svg+xml" data="/assets/logo.svg"></object>
+            <a href="/" class="logo-link-to-main">ГЛАВНАЯ</a>
         </div>
-        <div class="org-name">
-            Organization name
-        </div>
-        {{if eq .IsLogin true}}
-        <a href="/logout">Выйти</a>
-        {{else}}
-        <a href="/authorization">Авторизация</a>
-        {{end}}
     </div>
-    <nav>
-        <div class="item"><a href="#">Ссылка</a></div>
-        <div class="item"><a href="#">Ссылка</a></div>
-        <div class="item"><a href="#">Ссылка</a></div>
-        <div class="item"><a href="#">Ссылка</a></div>
-        <div class="item"><a href="#">Ссылка</a></div>
-    </nav>
+    <div class="header-org-name">
+        <div class="org-type">Государственное бюджетное профессиональное образовательное учреждение</div>
+        <div class="org-caption">Курганский технологический колледж</div>
+        <div class="org-caption-by">имени Героя Советского Союза Н.Я. Анфиногенова</div>
+    </div>
 </header>
 {{end}}

+ 55 - 63
html/index.html

@@ -3,75 +3,67 @@
 <html lang="en">
 
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="/assets/css/message.css">
-    <link rel="stylesheet" href="/assets/css/style.css">
-    {{if eq .IsAdmin true}}
-    <link rel="stylesheet" href="/assets/css/admin.css">
-    {{end}}
-    <title>{{.Title}}</title>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<link rel="stylesheet" href="/assets/css/message.css">
+	<link rel="stylesheet" href="/assets/css/style.css">
+	<link rel="stylesheet" href="/assets/css/carousel.css">
+	{{if eq .IsAdmin true}}
+	<link rel="stylesheet" href="/assets/css/admin.css">
+	{{end}}
+	<title>{{.Title}}</title>
 </head>
 
 <body>
-    {{template "header" .}}
+	{{template "header" .}}
 
-    <main>
-        <div class="body">
-            <div>
-                <div class="catalog">
-                    <div class="item">категория а</div>
-                    <div class="item">категория б</div>
-                    <div class="item">категория в</div>
-                    <div class="item">категория г</div>
-                    <div class="item">категория д</div>
-                    <div class="item">категория е</div>
-                </div>
-                {{if eq .IsAdmin true}}
-                {{template "admin" .}}
-                {{end}}
-            </div>
-            <div>
-                <p>Какая-то информация... <br></p>
-                <p>Какая-то информация... <br></p>
-                <p>Какая-то информация... <br></p>
-                <p>Какая-то информация... <br></p>
-                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, dolorum, numquam tempora praesentium
-                    voluptas voluptatum et enim a repellendus itaque repudiandae dolores inventore rem distinctio nisi
-                    quidem. Minima, amet! Illo.</p>
-                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore voluptatum repellendus
-                    reprehenderit
-                    quidem officiis accusantium at. Ratione possimus voluptatibus consectetur odit doloremque tempore
-                    ullam
-                    impedit consequuntur nam nesciunt commodi autem unde delectus quidem, id ab vitae ipsam saepe
-                    tenetur
-                    quod. Rerum blanditiis, impedit quaerat ea expedita inventore, nesciunt sint illo ipsa sapiente,
-                    saepe
-                    corrupti minima recusandae labore fuga cumque aspernatur quisquam possimus officiis accusamus ipsam
-                    perferendis? Distinctio ex temporibus rerum, perspiciatis ducimus explicabo saepe. Officia nulla,
-                    reprehenderit illo vitae obcaecati esse nisi numquam distinctio. Numquam magnam iure incidunt
-                    beatae,
-                    nemo repudiandae ratione culpa, quis perspiciatis explicabo quod. Nisi dolore dolores saepe minima
-                    eos,
-                    tempore eius obcaecati quidem, non, dicta ex iusto qui ad eaque natus velit voluptate! Velit
-                    suscipit
-                    officia necessitatibus, molestiae non adipisci mollitia aliquid quisquam doloremque ipsam. Ratione
-                    nisi
-                    atque et. Delectus modi corrupti eum soluta laborum minus, ratione illum doloribus doloremque libero
-                    tenetur harum, asperiores distinctio facere similique. Fugit recusandae beatae eveniet perferendis
-                    enim
-                    error cupiditate aperiam.</p>
-            </div>
-        </div>
-    </main>
+	<main>
 
-    {{template "footer" .}}
+		<!-- <div class="carousel-container">
+			<div data-width="1060" data-dots="false" class="carousel" id="Carousel">
+				<div data-image="images/1.jpg"></div>
+				<div data-image="images/2.jpg"></div>
+				<div data-image="images/3.jpg"></div>
+				<div data-image="images/4.jpg"></div>
+				<div data-image="images/5.jpg"></div>
+				<div data-image="images/6.jpg"></div>
+			</div>
+		</div> -->
 
-    <script src="/assets/js/message.js"></script>
-    <script src="/assets/js/query.js"></script>
-    {{if eq .IsAdmin true}}
-    <script src="/assets/js/admin.js"></script>
-    {{end}}
+		<div class="page active">
+			<img src="images/1.png">
+			<div>
+				<h2>Lorem, ipsum dolor</h2>
+				<p>
+					Lorem ipsum dolor sit, amet consectetur adipisicing elit. Omnis dignissimos dolorem debitis atque
+					ratione?
+				</p>
+				<button>Перейти</button>
+			</div>
+		</div>
+		<div class="page"></div>
+		<div class="page"></div>
+		<div class="page"></div>
+		<div class="page"></div>
+
+		<div class="dots">
+			<div class="active"></div>
+			<div></div>
+			<div></div>
+			<div></div>
+			<div></div>
+		</div>
+
+	</main>
+
+	{{template "footer" .}}
+
+	<script src="/assets/js/message.js"></script>
+	<script src="/assets/js/query.js"></script>
+	<script src="/assets/js/carousel.js"></script>
+	{{if eq .IsAdmin true}}
+	<script src="/assets/js/admin.js"></script>
+	{{end}}
 </body>
 
 </html>

+ 5 - 0
main.go

@@ -5,6 +5,7 @@ import (
 	"fmt"
 
 	"github.com/gin-gonic/contrib/sessions"
+	"github.com/gin-gonic/contrib/static"
 
 	"github.com/gin-gonic/gin"
 
@@ -35,6 +36,9 @@ func main() {
 	// Указываем папку статических файлов
 	router.Static("/assets", cfg.Assets)
 
+	// Указываем путь к различным локальным файлам (картинки, документы, видео и тд). Папка data
+	router.Use(static.Serve("/", static.LocalFile(cfg.Data, false)))
+
 	// Создаем сессию (необходимо для сохранения авторизации на сайте)
 	word := sessions.NewCookieStore([]byte("my-private-key"))
 	router.Use(sessions.Sessions("session", word))
@@ -139,6 +143,7 @@ func logout(c *gin.Context) {
 	role, ok := s.Get("MySecretKey").(string)
 	if ok {
 		s.Delete(role)
+		s.Clear()
 		s.Save()
 	}