Bot commit: Добавлен файл templates/main.html
This commit is contained in:
parent
5998ed0437
commit
65d58ed9b0
120
templates/main.html
Normal file
120
templates/main.html
Normal file
@ -0,0 +1,120 @@
|
||||
{% macro section() -%}
|
||||
<main class="c_coxdg">
|
||||
<div class="c_2ozmq">
|
||||
<h1 class="c_jz6k0">Сервис Автопостинга</h1>
|
||||
<p class="c_6wvwc">Сервис создан для художников, скульпторов, искусствоведов, журналистов, галеристов, музеев и
|
||||
разных выставочных пространств с возможностью выложить пост картины, скульптуры, новостей, анонсов выставок
|
||||
или любую другую информацию, разместив сразу в нескольких Ваших социальных сетях интернета,
|
||||
арт-маркетплейсах и сообществах партнёров сервиса одним нажатием!</p>
|
||||
<div class="c_zod37">
|
||||
<a class="c_kc6kk" href="/about"><span class="c_ifykb">Узнать больше</span></a>
|
||||
<button class="c_16ji5" id="openModalButtonVideo" style="padding: unset;"> <span
|
||||
class="c_ifykb">Видео-презентация</span> </button>
|
||||
</div>
|
||||
</div>
|
||||
<picture class="c_qa0pb"><img crossorigin="anonymous" fetchpriority="high" class="c_qa0pb" src="/static/painter.svg"></picture>
|
||||
</main>
|
||||
<div id="modalVideo" class="modal" style="display: none;">
|
||||
<span class="close" onclick="videocloseModalButton()" style="z-index: 2;">×</span>
|
||||
<div style="width: 100%;height: 100%; position: absolute; " onclick="videocloseModalButton()"></div>
|
||||
<iframe id="modalVideoFrame" width="853" height="480" allow="autoplay; encrypted-media; fullscreen; picture-in-picture;" frameborder="0" allowfullscreen style="height: 100%;position: absolute;left: 0;transition: none;min-width: 100%;object-fit: scale-down;"></iframe>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.getElementById('openModalButtonVideo').addEventListener('click', function() {
|
||||
const modalVideoFrame = document.getElementById('modalVideoFrame');
|
||||
const modal = document.getElementById('modalVideo');
|
||||
modalVideoFrame.src = 'https://vk.com/video_ext.php?oid=-213856894&id=456239020&hd=2';
|
||||
modal.style.display = 'flex';
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
function videocloseModalButton() {
|
||||
document.getElementById('modalVideo').style.display = 'none';
|
||||
}
|
||||
</script>
|
||||
{%- endmacro %}
|
||||
|
||||
{% macro style() -%}
|
||||
<style type="text/css">
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: #fff;
|
||||
margin: 15% auto;
|
||||
padding: 20px;
|
||||
border: 1px solid #888;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.close {
|
||||
color: #aaa;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 400px; /* adjust height as needed */
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 901px) {
|
||||
.c_jz6k0 { color: #000; font-family: Inter; font-size: 65px; font-style: normal; font-weight: 700; line-height: normal; }
|
||||
.c_6wvwc { width: 540px; align-self: stretch; color: #000; font-family: Inter; font-size: 20px; font-style: normal; font-weight: 400; line-height: normal; }
|
||||
.c_ifykb { text-wrap: nowrap; color: #FFF; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
|
||||
.c_kc6kk { display: flex; width: 166px; height: 51px; padding: 19px 33px; justify-content: center; align-items: center; border-radius: 5px; background: #5F1798; }
|
||||
.c_16ji5 { display: flex; width: 166px; height: 51px; padding: 19px 33px; justify-content: center; align-items: center; border-radius: 5px; background: #5F1798; }
|
||||
.c_zod37 { display: flex; align-items: flex-start; gap: 20px; }
|
||||
.c_2ozmq { display: flex; width: 540px; flex-direction: column; align-items: flex-start; gap: 20px; flex-shrink: 0; }
|
||||
.c_qa0pb { width: 430px; height: 430px; flex-shrink: 0; }
|
||||
.c_coxdg { display: flex; box-sizing: unset; justify-content: center; align-items: center; height: 660px; gap: 150px; background: rgba(95, 23, 152, 0.02); }
|
||||
}
|
||||
|
||||
@media (min-width: 700px) and (max-width: 900px) {
|
||||
.c_jz6k0 { align-self: stretch; color: #000; font-family: Inter; font-size: 65px; font-style: normal; font-weight: 700; line-height: normal; }
|
||||
.c_6wvwc { width: 700px; align-self: stretch; color: #000; font-family: Inter; font-size: 20px; font-style: normal; font-weight: 400; line-height: normal; }
|
||||
.c_ifykb { text-wrap: nowrap; color: #FFF; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
|
||||
.c_kc6kk { display: flex; width: 166px; height: 51px; padding: 19px 33px; justify-content: center; align-items: center; border-radius: 5px; background: #5F1798; }
|
||||
.c_16ji5 { display: flex; width: 166px; height: 51px; padding: 19px 33px; justify-content: center; align-items: center; border-radius: 5px; background: #5F1798; }
|
||||
.c_zod37 { display: flex; align-items: flex-start; gap: 20px; }
|
||||
.c_2ozmq { display: flex; width: 800px;min-width: 500px; padding: 0 50px; flex-direction: column; align-items: flex-start; gap: 20px; flex-shrink: 0; }
|
||||
.c_qa0pb { width: 430px; height: 430px; flex-shrink: 0; }
|
||||
.c_coxdg { height: 1050px;display: flex; box-sizing: unset; justify-content: center; align-items: center; align-content: center; gap: 50px 0; flex-wrap: wrap; background: rgba(95, 23, 152, 0.02); }
|
||||
}
|
||||
|
||||
@media (max-width: 699px) {
|
||||
.c_jz6k0 { height: 78px; align-self: stretch; color: #000; font-family: Inter; font-size: 32px; font-style: normal; font-weight: 700; line-height: normal; }
|
||||
.c_6wvwc { width: 330px; height: 240px; align-self: stretch; color: #000; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; }
|
||||
.c_ifykb { text-wrap: nowrap; color: #FFF; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
|
||||
.c_kc6kk { display: flex; width: 145px; height: 51px; padding: 19px 33px; justify-content: center; align-items: center; border-radius: 5px; background: #5F1798; }
|
||||
.c_16ji5 { display: flex; width: 166px; height: 51px; padding: 19px 33px; justify-content: center; align-items: center; border-radius: 5px; background: #5F1798; }
|
||||
.c_zod37 { display: flex; justify-content: center; align-items: flex-start; gap: 20px; }
|
||||
.c_2ozmq { display: flex; width: 375px; padding: 0 20px; flex-direction: column; align-items: flex-start; gap: 20px; flex-shrink: 0; }
|
||||
.c_qa0pb { width: 375px; height: 295px; flex-shrink: 0; max-width: 100%;}
|
||||
.c_coxdg { height: 850px; display: flex; box-sizing: unset; justify-content: center; align-items: center; align-content: center; gap: 50px 0; flex-wrap: wrap; background: rgba(95, 23, 152, 0.02); }
|
||||
}</style>
|
||||
{%- endmacro %}
|
||||
Loading…
Reference in New Issue
Block a user