klintorg_site/templates/new_layout.html
2021-10-23 18:08:16 +03:00

371 lines
16 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="yandex-verification" content="8ba3940ada64923a" />
<meta name="google-site-verification" content="D_8sVdIKQn8tZo-oZ6qhf2hbkjeyKmFTqwo2u1siSfw" />
<!-- Yandex.Metrika counter -->
<script type="text/javascript" >
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(86042102, "init", {
clickmap:true,
trackLinks:true,
accurateTrackBounce:true
});
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/86042102" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.6.1/font/bootstrap-icons.css">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/carousel.css') }}" />
<link rel="icon" href="{{ url_for('static', filename='images/klintorg_logo.png')}}" type="image/png" />
{% if title %}
<title>Klintorg - {{ title }}</title>
{% else %}
<title>Klintorg</title>
{% endif %}
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#"><h4>klintorg.ru</h4></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
{% for m in menu %}
<li class="nav-item"><a href="{{ m.url }}" class="nav-link {{ m.active }}">{{ m.name }}</a></li>
{% endfor %}
</ul>
<span class="navbar-text">
Комплекс улуг для Вашего бизнеса.
</span>
</div>
</div>
</nav>
<br/>
<br/>
<!-- <div class="container"> -->
<!-- <div id="myCarousel" class="carousel slide" data-bs-ride="carousel"> -->
<!-- <div class="carousel-indicators"> -->
<!-- <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" -->
<!-- aria-label="Slide 1"></button> -->
<!-- <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button> -->
<!-- <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button> -->
<!-- </div> -->
<!-- <div class="carousel-inner"> -->
<!-- <div class="carousel-item active img-fluid"> -->
<!-- <\!-- <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" -\-> -->
<!-- <\!-- aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"> -\-> -->
<!-- <\!-- <rect width="100%" height="100%" fill="#777" /> -\-> -->
<!-- <\!-- </svg> -\-> -->
<!-- <img src="{{ url_for('static', filename='images/astral_2.png') }}" class="d-block w-100" alt="Получите ЭЦП уже сегодня!"> -->
<!-- <div class="container"> -->
<!-- <div class="carousel-caption text-start"> -->
<!-- <h1>Электронная подпись.</h1> -->
<!-- <p>Электронная подпись это аналог собственноручной подписи и печати на документе бумажного формата.</p> -->
<!-- <p><a class="btn btn-lg btn-primary" href="/">Тарифы</a></p> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- <div class="carousel-item"> -->
<!-- <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" -->
<!-- aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"> -->
<!-- <rect width="100%" height="100%" fill="#777" /> -->
<!-- </svg> -->
<!-- <div class="container"> -->
<!-- <div class="carousel-caption"> -->
<!-- <h1>Another example headline.</h1> -->
<!-- <p>Some representative placeholder content for the second slide of the carousel.</p> -->
<!-- <p><a class="btn btn-lg btn-primary" href="#">Learn more</a></p> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- <div class="carousel-item"> -->
<!-- <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" -->
<!-- aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"> -->
<!-- <rect width="100%" height="100%" fill="#777" /> -->
<!-- </svg> -->
<!-- <div class="container"> -->
<!-- <div class="carousel-caption text-end"> -->
<!-- <h1>One more for good measure.</h1> -->
<!-- <p>Some representative placeholder content for the third slide of this carousel.</p> -->
<!-- <p><a class="btn btn-lg btn-primary" href="#">Browse gallery</a></p> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev"> -->
<!-- <span class="carousel-control-prev-icon" aria-hidden="true"></span> -->
<!-- <span class="visually-hidden">Previous</span> -->
<!-- </button> -->
<!-- <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next"> -->
<!-- <span class="carousel-control-next-icon" aria-hidden="true"></span> -->
<!-- <span class="visually-hidden">Next</span> -->
<!-- </button> -->
<!-- </div> -->
<!-- </div> -->
<!-- <div class="container"> -->
<!-- {% block content %}{% endblock %} -->
<!-- </div> -->
<!-- <div class="container"> -->
<!-- <div class="card text-center"> -->
<!-- <div class="card-header"> -->
<!-- Featured -->
<!-- </div> -->
<!-- <div class="card-body"> -->
<!-- <h5 class="card-title">Special title treatment</h5> -->
<!-- <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> -->
<!-- <a href="#" class="btn btn-primary">Go somewhere</a> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- {% for m in menu %} -->
<!-- <li class="nav-item"><a href="{{ m.url }}" class="nav-link {{ m.active }}">{{ m.name }}</a></li> -->
<!-- {% endfor %} -->
<!-- <div class="container"> -->
<!-- <h1>Все виды ЭЦП в Клину и Клинском районе</h1> -->
<!-- </div> -->
<div class="container">
<div class="card text-center bg-info bg-opacity-10">
<div class="card-header">
klintorg.ru - официальный представитель Астрал-ЭТ в Клину
</div>
<div class="card-body">
<h5 class="card-title">Электронная подпись для любых задач</h5>
<p class="card-text">Электронная подпись для участия в торгах, работы на государственных порталах и электронного документооборота</p>
<!-- <a href="#" class="btn btn-primary">Go somewhere</a> -->
</div>
<div class="card-footer text-muted">
<!-- 2 days ago -->
</div>
</div>
</div>
<br/>
<br/>
<br/>
<div class="container d-flex justify-content-center">
<h3>Тарифы и цены</h3>
</div>
<div class="container d-flex justify-content-center">
<p>Гибкая тарифная сетка позволит выбрать тот тариф, который оптимален именно для Вас</p>
</div>
<br/>
<!-- {% for prod in product %} -->
<!-- <div class="container"> -->
<!-- <div class="card w-100 shadow-sm"> -->
<!-- <div class="card-body"> -->
<!-- <h3 class="card-title" style="color: #376798;">{{ prod.name }}</h3> -->
<!-- <p class="card-text">{{ prod.description }}</p> -->
<!-- <p class="card-text" style="font-size: 24px; font-weight: bold;">{{ prod.price }} &#x20bd;</p> -->
<!-- <\!-- <a href="#" class="btn btn-outline-primary btn-lg">Заказать</a> -\-> -->
<!-- <\!-- Button trigger modal -\-> -->
<!-- <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"> -->
<!-- Заказать -->
<!-- </button> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- <br/> -->
<!-- {% endfor %} -->
{% for prod in product %}
<div class="container">
<div class="card mb-3 shadow-sm">
<div class="row g-0">
<div class="col-md-8">
<div class="card-body">
<h3 class="card-title" style="color: #376798;">{{ prod.name }}</h3>
<p class="card-text">{{ prod.description }}</p>
<p class="card-text" style="font-size: 24px; font-weight: bold;">{{ prod.price }} &#x20bd;</p>
<!-- <a href="#" class="btn btn-outline-primary btn-lg">Заказать</a> -->
<!-- Button trigger modal -->
<button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Заказать
</button>
</div>
</div>
<div class="col-md-4">
<img src="{{ url_for('static', filename=prod.img) }}" class="img-fluid rounded-start" alt="prod.alt">
</div>
</div>
</div>
</div>
<br/>
{% endfor %}
<!-- <div class="container"> -->
<!-- <div class="card mb-3"> -->
<!-- <div class="row g-0"> -->
<!-- <div class="col-md-8"> -->
<!-- <div class="card-body"> -->
<!-- <h5 class="card-title">Card title</h5> -->
<!-- <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> -->
<!-- <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> -->
<!-- </div> -->
<!-- </div> -->
<!-- <div class="col-md-4"> -->
<!-- <img src="{{ url_for('static', filename='images/astral_2.png') }}" class="img-fluid rounded-start" alt="..."> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Позвоните нам прямо сейчас!</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<a href="tel:+79096861756"><i class="bi bi-telephone"></i> +7(909)686-17-56</a>
<br/>
<br/>
<a href="https://wa.me/79096861756"><i class="bi bi-whatsapp"></i> Написать в Whatsapp</a>
<br/>
<br/>
<a href="tg://resolve?domain=@TanyaPetrovaa"><i class="bi bi-telegram"></i> Написать в Telegram</a>
<br/>
<br/>
<p>Ваш персональный менеджер Татьяна!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<!-- <button type="button" class="btn btn-primary">Save changes</button> -->
</div>
</div>
</div>
</div>
<footer class="bg-light text-center text-lg-start">
<!-- Grid container -->
<div class="container p-4">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-6 col-md-12 mb-4 mb-md-0">
<h5 class="text-uppercase">Наш адрес</h5>
<p>
141602, г.Клин, Ленинградское ш., д. 8А
</p>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-6 col-md-12 mb-4 mb-md-0">
<h5 class="text-uppercase">Контакты</h5>
<p>
<a href="tel:+79096861756"><i class="bi bi-telephone"></i> +7(909)686-17-56</a>
<br/>
<br/>
<a href="https://wa.me/79096861756"><i class="bi bi-whatsapp"></i> Написать в Whatsapp</a>
<br/>
<br/>
<a href="tg://resolve?domain=@TanyaPetrovaa"><i class="bi bi-telegram"></i> Написать в Telegram</a>
<br/>
<br/>
<a href="mailto:manager@klintorg.ru"><i class="bi bi-envelope"></i> manager@klintorg.ru</a>
</p>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!-- Grid container -->
<!-- Copyright -->
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
© 2021 Copyright:
<a class="text-dark" href="http://klintorg.ru">klintorg.ru</a>
</div>
<!-- Copyright -->
</footer>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script>var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
}) </script>
<script>var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})</script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
<style>
.carousel-caption{
color: lightgreen;
}
.carousel-inner > .carousel-item > img {
width:50%;
height:100%;
}
a {text-decoration: none; color: #212121;}
a:hover {text-decoration: none; color: #red;}
</style>
</html>