227 lines
11 KiB
HTML
227 lines
11 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/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" onclick="document.location='/'">Вернуться
|
|
назад<span class="sr-only">(current)</span></a>
|
|
</li>
|
|
<li class="nav-item" hidden></li>
|
|
<li class="nav-item" hidden></li>
|
|
<li class="nav-item" hidden></li>
|
|
<li class="nav-item" hidden></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="container" style="width: 50%">
|
|
<div class="row">
|
|
<div class="span4 center-block">
|
|
<div class="tm-img-gallery-info-container">
|
|
<h2 class="tm-text-title tm-gallery-title tm-white"><span class="tm-white">{{img['name']}}</span>
|
|
</h2>
|
|
<p class="tm-text">{{img['description']}}</p>
|
|
</div>
|
|
<img src="img/tm-img-{{img['id']}}.jpg"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br><br><br><br>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div>
|
|
{% for comment in img["comments"] %}
|
|
<div class="card card-white post">
|
|
<div class="post-heading">
|
|
<div class="float-left image" style="margin: 10px">
|
|
<img src="http://bootdey.com/img/Content/user_1.jpg"
|
|
class="img-circle avatar" alt="User">
|
|
</div>
|
|
<div class="float-left meta">
|
|
<div class="title h5" style="margin: 20px"><b>{{comment[0]}}</b></div>
|
|
</div>
|
|
</div>
|
|
<div class="post-description">
|
|
<p style="color: black; margin: 10px">{{comment[1]}}</p>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
<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>
|
|
<script>
|
|
function post_comment(){
|
|
var msg = document.getElementById('contact_message').value;
|
|
$.ajax({
|
|
method: "POST",
|
|
url: "/api/post_comment",
|
|
contentType: "application/json; charset=utf-8",
|
|
data: JSON.stringify({"img_id": {{img['id']}}, "msg": msg}),
|
|
success: function(data, textStatus, jQxhr){
|
|
location.reload(true);
|
|
},
|
|
error: function( jqXhr, textStatus, errorThrown ){
|
|
alert("Some error occured");
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
<button type="button" class="pull-xs-right tm-submit-btn" onclick="post_comment()">Отправить
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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> |