357 lines
21 KiB
HTML
357 lines
21 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<link rel="icon" type="image/x-icon" href="/img/favicon.ico">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Rusgram</title>
|
||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400">
|
||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||
<link rel="stylesheet" href="css/hero-slider-style.css">
|
||
<link rel="stylesheet" href="css/magnific-popup.css">
|
||
<link rel="stylesheet" href="css/tooplate-style.css">
|
||
<link rel="stylesheet" href="css/font-awesome.min.css">
|
||
</head>
|
||
<body>
|
||
<!-- Content -->
|
||
<div class="cd-hero">
|
||
<!-- Navigation -->
|
||
<div class="cd-slider-nav">
|
||
<nav class="navbar">
|
||
<div class="tm-navbar-bg">
|
||
<a class="navbar-brand text-uppercase" href="#"><i class="fa fa-gears tm-brand-icon"></i>Rusgram</a>
|
||
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse"
|
||
data-target="#tmNavbar">
|
||
☰
|
||
</button>
|
||
<div class="collapse navbar-toggleable-md text-xs-center text-uppercase tm-navbar" id="tmNavbar">
|
||
<ul class="nav navbar-nav">
|
||
<li class="nav-item active selected">
|
||
<a class="nav-link" href="#0" data-no="1">Галерея<span class="sr-only">(current)</span></a>
|
||
</li>
|
||
<li class="nav-item" hidden></li>
|
||
<li class="nav-item" hidden></li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#0" data-no="4">Новости</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#0" data-no="5">Кабинет</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
</nav>
|
||
</div>
|
||
|
||
<ul class="cd-hero-slider">
|
||
|
||
<!-- Page 1 Gallery One -->
|
||
<li class="selected">
|
||
<div class="cd-full-width">
|
||
<div class="container-fluid js-tm-page-content" data-page-no="1" data-page-type="gallery">
|
||
<div class="tm-img-gallery-container">
|
||
<div class="tm-img-gallery gallery-one">
|
||
<!-- Gallery One pop up connected with JS code below -->
|
||
<div class="tm-img-gallery-info-container">
|
||
<h2 class="tm-text-title tm-gallery-title tm-white"><span
|
||
class="tm-white">Галерея</span></h2>
|
||
<p class="tm-text">На этом прекрасном сайте находится галерея кота-мэра Шерстянкина
|
||
</p>
|
||
</div>
|
||
{% for img in data %}
|
||
<div class="grid-item">
|
||
<figure class="effect-bubba"
|
||
onclick="document.location='/specific.html?img={{img['id']}}'">
|
||
<img src="img/tm-img-{{img['id']}}-tn.jpg" alt="Image">
|
||
<figcaption>
|
||
<h2 class="tm-figure-title">{{ img["name"] }}</h2>
|
||
<p class="tm-figure-description">{{ img["description"] }}</p>
|
||
<a href="img/tm-img-{{img['id']}}.jpg">View more</a>
|
||
</figcaption>
|
||
</figure>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li></li>
|
||
<li></li>
|
||
|
||
<!-- Page 4 About -->
|
||
<li>
|
||
<div class="cd-full-width">
|
||
<div class="container-fluid js-tm-page-content tm-page-width tm-pad-b" data-page-no="4">
|
||
<div class="row tm-white-box-margin-b">
|
||
<div class="col-xs-12">
|
||
<div class="tm-flex">
|
||
<div class="tm-bg-white-translucent text-xs-left tm-textbox tm-textbox-padding">
|
||
<h2 class="tm-text-title">О галерее</h2>
|
||
<p class="tm-text">На этом сайте находится галерея кота-мэра Шерстянкина. Здесь вы
|
||
можете просматривать его фотографии и отправить сообщение мэру через личный
|
||
кабинет.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row tm-white-box-margin-b">
|
||
<div class="col-xs-12">
|
||
<div class="tm-flex">
|
||
<div class="tm-bg-white-translucent text-xs-left tm-textbox tm-2-col-textbox-2 tm-textbox-padding">
|
||
<h2 class="tm-text-title">Поездка в Грузию</h2>
|
||
<p class="tm-text">Скоро мэр отправится в небольшое путешествие в солнечную Грузию!
|
||
Ожидайте множество красивых фотографий гор и хачапури!</p>
|
||
</div>
|
||
<div class="tm-bg-white-translucent text-xs-left tm-textbox tm-2-col-textbox-2 tm-textbox-padding">
|
||
<h2 class="tm-text-title">Зимний отдых</h2>
|
||
<p class="tm-text">Мэр отправляется в поездку на северный полюс! Шуба, валенки,
|
||
санки уже ждут.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-xs-12">
|
||
<div class="tm-flex">
|
||
<div class="tm-bg-white-translucent text-xs-left tm-textbox tm-2-col-textbox-2 tm-textbox-padding">
|
||
<h2 class="tm-text-title">Новый контент</h2>
|
||
<p class="tm-text">В Сочи было очень красиво и жарко! Новые фото с Красной Поляны в
|
||
галерее!</p>
|
||
</div>
|
||
<div class="tm-bg-white-translucent text-xs-left tm-textbox tm-2-col-textbox-2 tm-textbox-padding">
|
||
<h2 class="tm-text-title">Новый редактор</h2>
|
||
<p class="tm-text">У галереи появился новый редактор - собачка Боб. Боб будет
|
||
модерировать комментарии и продвигать сайт.</p>
|
||
</div>
|
||
<div class="tm-bg-white-translucent text-xs-left tm-textbox tm-2-col-textbox-2 tm-textbox-padding">
|
||
<h2 class="tm-text-title">Всем привет!</h2>
|
||
<p class="tm-text">Приветствуем на новом сайте кота-мэра! Здесь будет множество
|
||
красивых фотографий из поездок, море позитива и новости и поездках.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div> <!-- .cd-full-width -->
|
||
</li>
|
||
|
||
<!-- Page 5 Contact Us -->
|
||
<li>
|
||
<div class="cd-full-width">
|
||
<div class="container-fluid js-tm-page-content tm-page-pad" data-page-no="5">
|
||
<div class="tm-contact-page">
|
||
<div class="row">
|
||
<div class="col-xs-12">
|
||
<div class="tm-flex tm-contact-container">
|
||
<div class="tm-bg-white-translucent text-xs-left tm-textbox tm-2-col-textbox-2 tm-textbox-padding tm-textbox-padding-contact">
|
||
<h2 class="tm-contact-info">Личный кабинет</h2>
|
||
<p class="tm-text">Оставь здесь свои персональные данные, чтобы мы их надежно
|
||
хранили у себя и ни с кем не делились</p>
|
||
<!-- contact form -->
|
||
<script>
|
||
function update_personal(){
|
||
var name = document.getElementById('contact_name').value;
|
||
var sname = document.getElementById('contact_secondname').value;
|
||
var email = document.getElementById('contact_email').value;
|
||
$.ajax({
|
||
method: "POST",
|
||
url: "/api/update_personal",
|
||
contentType: "application/json; charset=utf-8",
|
||
data: JSON.stringify({"first_name": name, "second_name": sname, "email": email}),
|
||
success: function(data, textStatus, jQxhr){
|
||
alert("Information is updated");
|
||
},
|
||
error: function( jqXhr, textStatus, errorThrown ){
|
||
alert("Some error occurred");
|
||
}
|
||
});
|
||
}
|
||
function send_msg(){
|
||
var msg = document.getElementById('contact_message').value;
|
||
$.ajax({
|
||
method: "POST",
|
||
url: "/api/send_msg",
|
||
contentType: "application/json; charset=utf-8",
|
||
data: JSON.stringify({"msg": msg}),
|
||
success: function(data, textStatus, jQxhr){
|
||
alert("Message is sent");
|
||
prev_msg = document.getElementById('prev_msg');
|
||
if (prev_msg)
|
||
prev_msg.hidden = true;
|
||
},
|
||
error: function( jqXhr, textStatus, errorThrown ){
|
||
alert("Some error occurred");
|
||
}
|
||
});
|
||
}
|
||
</script>
|
||
<form action="/update_personal" class="tm-contact-form">
|
||
<div class="form-group">
|
||
<input type="text" id="contact_name" name="contact_name"
|
||
class="form-control" placeholder="Имя"
|
||
value="{{user['first_name']}}" required/>
|
||
</div>
|
||
<div class="form-group">
|
||
<input type="text" id="contact_secondname" name="contact_name"
|
||
class="form-control" placeholder="Фамилия"
|
||
value="{{user['second_name']}}" required/>
|
||
</div>
|
||
<div class="form-group">
|
||
<input type="email" id="contact_email" name="contact_email"
|
||
class="form-control" placeholder="Email"
|
||
value="{{user['email']}}" required/>
|
||
</div>
|
||
<button type="button" class="pull-xs-right tm-submit-btn"
|
||
onclick="update_personal()">Обновить
|
||
</button>
|
||
</form>
|
||
</div>
|
||
|
||
<div class="tm-bg-white-translucent text-xs-left tm-textbox tm-2-col-textbox-2 tm-textbox-padding tm-textbox-padding-contact">
|
||
<div class="form-group">
|
||
<textarea id="contact_message" name="contact_message" class="form-control"
|
||
rows="5" placeholder="Сообщение мэру" autocomplete="off"
|
||
required></textarea>
|
||
</div>
|
||
<button type="button" class="pull-xs-right tm-submit-btn" onclick="send_msg()">
|
||
Отправить
|
||
</button>
|
||
<br><br><br><br>
|
||
{% if user["msg"]|length > 0 %}
|
||
<div id="prev_msg">
|
||
<p class="tm-text">Сообщение мэру в обработке:</p>
|
||
<p class="tm-text">{{user["msg"]}}</p>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
<script>
|
||
function logout(){
|
||
document.cookie = "";
|
||
document.location="/login.html";
|
||
}
|
||
</script>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="span4 center-block">
|
||
<button type="button" class="pull-xs-right tm-submit-btn" onclick="logout()">Logout</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div> <!-- .cd-full-width -->
|
||
</li>
|
||
</ul> <!-- .cd-hero-slider -->
|
||
|
||
<footer class="tm-footer">
|
||
<div class="tm-social-icons-container text-xs-center">
|
||
<a href="#" class="tm-social-link"><i class="fa fa-facebook"></i></a>
|
||
<a href="#" class="tm-social-link"><i class="fa fa-google-plus"></i></a>
|
||
<a href="#" class="tm-social-link"><i class="fa fa-twitter"></i></a>
|
||
<a href="#" class="tm-social-link"><i class="fa fa-behance"></i></a>
|
||
<a href="#" class="tm-social-link"><i class="fa fa-linkedin"></i></a>
|
||
</div>
|
||
<p class="tm-copyright-text">Copyright © 2022 Rusgram</p>
|
||
</footer>
|
||
</div> <!-- .cd-hero -->
|
||
<!-- Preloader, https://ihatetomatoes.net/create-custom-preloading-screen/ -->
|
||
<div id="loader-wrapper">
|
||
<div id="loader"></div>
|
||
<div class="loader-section section-left"></div>
|
||
<div class="loader-section section-right"></div>
|
||
</div>
|
||
<!-- load JS files -->
|
||
<script src="js/jquery-1.11.3.min.js"></script> <!-- jQuery (https://jquery.com/download/) -->
|
||
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script>
|
||
<!-- Tether for Bootstrap (http://stackoverflow.com/questions/34567939/how-to-fix-the-error-error-bootstrap-tooltips-require-tether-http-github-h) -->
|
||
<script src="js/bootstrap.min.js"></script> <!-- Bootstrap js (v4-alpha.getbootstrap.com/) -->
|
||
<script src="js/hero-slider-main.js"></script> <!-- Hero slider (https://codyhouse.co/gem/hero-slider/) -->
|
||
<script src="js/jquery.magnific-popup.min.js"></script>
|
||
<!-- Magnific popup (http://dimsemenov.com/plugins/magnific-popup/) -->
|
||
<script>
|
||
function adjustHeightOfPage(pageNo) {
|
||
|
||
var offset = 80;
|
||
var pageContentHeight = 0;
|
||
|
||
var pageType = $('div[data-page-no="' + pageNo + '"]').data("page-type");
|
||
|
||
if( pageType != undefined && pageType == "gallery") {
|
||
pageContentHeight = $(".cd-hero-slider li:nth-of-type(" + pageNo + ") .tm-img-gallery-container").height();
|
||
}
|
||
else {
|
||
pageContentHeight = $(".cd-hero-slider li:nth-of-type(" + pageNo + ") .js-tm-page-content").height() + 20;
|
||
}
|
||
|
||
if($(window).width() >= 992) { offset = 120; }
|
||
else if($(window).width() < 480) { offset = 40; }
|
||
|
||
// Get the page height
|
||
var totalPageHeight = $('.cd-slider-nav').height()
|
||
+ pageContentHeight + offset
|
||
+ $('.tm-footer').height();
|
||
|
||
// Adjust layout based on page height and window height
|
||
if(totalPageHeight > $(window).height())
|
||
{
|
||
$('.cd-hero-slider').addClass('small-screen');
|
||
$('.cd-hero-slider li:nth-of-type(' + pageNo + ')').css("min-height", totalPageHeight + "px");
|
||
}
|
||
else
|
||
{
|
||
$('.cd-hero-slider').removeClass('small-screen');
|
||
$('.cd-hero-slider li:nth-of-type(' + pageNo + ')').css("min-height", "100%");
|
||
}
|
||
}
|
||
|
||
/*
|
||
Everything is loaded including images.
|
||
*/
|
||
$(window).load(function(){
|
||
|
||
adjustHeightOfPage(1); // Adjust page height
|
||
|
||
/* Gallery One pop up
|
||
-----------------------------------------*/
|
||
$('.gallery-one').magnificPopup({
|
||
delegate: 'a', // child items selector, by clicking on it popup will open
|
||
type: 'image',
|
||
gallery:{enabled:true}
|
||
});
|
||
|
||
/* Collapse menu after click
|
||
-----------------------------------------*/
|
||
$('#tmNavbar a').click(function(){
|
||
$('#tmNavbar').collapse('hide');
|
||
|
||
adjustHeightOfPage($(this).data("no")); // Adjust page height
|
||
});
|
||
|
||
/* Browser resized
|
||
-----------------------------------------*/
|
||
$( window ).resize(function() {
|
||
var currentPageNo = $(".cd-hero-slider li.selected .js-tm-page-content").data("page-no");
|
||
|
||
// wait 3 seconds
|
||
setTimeout(function() {
|
||
adjustHeightOfPage( currentPageNo );
|
||
}, 1000);
|
||
|
||
});
|
||
|
||
// Remove preloader (https://ihatetomatoes.net/create-custom-preloading-screen/)
|
||
$('body').addClass('loaded');
|
||
|
||
});
|
||
|
||
</script>
|
||
</body>
|
||
</html> |