DIWHY
/
spatialsystems
mirror of https://github.com/gtitov/spatialsystems.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

features

Browse Source
main
gman 8 months ago
parent cb18d49521
commit 0e72e8a04e
13 changed files with 5244 additions and 5188 deletions
Show Stats Download Patch File Download Diff File

2
contacts.html
Unescape View File

@ -9,7 +9,7 @@
</head> </head>
<body> <body>
<div class="container"> <div class="container nav-container">
<div id="wrap"> <div id="wrap">
<div id="row"> <div id="row">
<div id="logo"> <div id="logo">

10116
fullpage/fullpage.js
View File

File diff suppressed because it is too large Load Diff

BIN
images/city/city-cover.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 MiB

BIN
images/postnet/diagram.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 658 KiB

BIN
images/postnet/konkovo.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 810 KiB

BIN
images/postnet/postnet-cover.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 MiB

BIN
images/postnet/postnet-interface.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
images/postnet/postnet-location.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
images/postnet/zones.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

2
index.html
Unescape View File

@ -9,7 +9,7 @@
</head> </head>
<body> <body>
<div class="container"> <div class="container nav-container">
<div id="wrap"> <div id="wrap">
<div id="row"> <div id="row">
<div id="logo"> <div id="logo">

178
project-post.html
Unescape View File

@ -5,25 +5,13 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пространственные Системы</title> <title>Пространственные Системы</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="fullpage/fullpage.min.css"> <link rel="stylesheet" href="fullpage/fullpage.min.css">
<script src="fullpage/fullpage.min.js"></script> <script src="fullpage/fullpage.js"></script>
<style> <link rel="stylesheet" href="style.css">
.section {
text-align: center;
font-size: 1em;
font-family: arial;
padding-top: 80px;
@media (max-width: 850px) {
padding-top: 200px;
}
}
</style>
</head> </head>
<body> <body>
<div class="container"> <div class="container nav-container">
<div id="wrap"> <div id="wrap">
<div id="row"> <div id="row">
<div id="logo"> <div id="logo">
@ -39,78 +27,112 @@
</div> </div>
</div> </div>
</div> </div>
<div id="fullpage"> <div class="fullpage">
<div class="section">
<p>Postnet – геоинформационная AutoML система для управления и развития сети постаматов Московский постамат
</p>
</div>
<div class="section">
<p>В настоящее время в столице развивается городская сеть постаматов – Московский постамат. Постаматы сети
размещают не только в различных объектах инфраструктуры, но и прямо внутри подъездов жилых домов. Сейчас
с помощью постаматов можно получать заказы из интернет-магазинов и маркетплейсов, уже скоро будут
доступны и другие сервисы. Для управления сетью постаматов и ее развития наша команда разработала
систему Postnet. </p>
<figure>
<img src="images/postnet/postnet-interface.png" />
<figcaption>Интерфейс системы</figcaption>
</figure>
</div>
<div class="section">
<p>На основе данных о количестве заказов уже работающих постаматов, более пятидесяти факторов городского
пространства и алгоритмов машинного обучения осуществляется прогноз количества заказов во всех
потенциальных точках размещения постаматов (более 100 тыс. локаций по всему городу).</p>
<p>Раз в сутки наша система получает обновленные данные по количеству заказов со всех постаматов. За счет
внедренного автоматизированного машинного обучения, модель проходит дообучение каждые сутки с учетом
обновленных данных, становясь более точной и оставаясь актуальной с течением времени.</p>
<p>Кроме уже имеющихся в системе точек, можно импортировать в нее свои собственные – система в
автоматическом режиме соберет необходимые данные по загруженным точкам, применит модель и выдаст прогноз
по количеству заказов.</p>
</div>
<div class="section">
<figure>
<img src="images/postnet/postnet-location.png" />
<figcaption>Прогнозное месячное количество заказов в локации – 257</figcaption>
</figure>
</div>
<div class="section">
<p>При прогнозировании мы используем сложные модели, позволяющие с одной стороны уловить нелинейные
закономерности между величиной количества заказов в постаматах и множеством влияющих на нее факторов, а
с другой – интерпретировать эту закономерность понятным для пользователя образом.
</p>
<p>
Так, прогноз количества заказов на каждой локации можно разложить на вклады всех задействованных в
модели факторов и лучше понять, какие именно особенности окружающего пространства оказываются наиболее
значимыми, какие повышают количество заказов, а какие, наоборот, понижают
</p>
</div>
<div class="section">
<figure>
<img src="images/postnet/diagram.png" />
<figcaption>Интерпретация прогноза – визуализация вклада различных факторов в прогноз количества заказов
</figcaption>
</figure>
</div>
<div class="section"> <div class="section">
<h1>Section 1</h1> <p>В интерфейсе нашей системы из всего множества представленных локаций пользователь может выбрать любые
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi delectus natus animi, necessitatibus для симуляции размещения в них новых точек сети. В процессе такой симуляции модель автоматически
distinctio praesentium! Eligendi itaque hic aut quo, nesciunt explicabo fugit exercitationem totam пересоберет
eveniet aliquid molestias, tempora possimus.</p> все данные и пересчитает прогнозы на всех локациях уже с учетом, что в выбранных появятся новые
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi delectus natus animi, necessitatibus постаматы.
distinctio praesentium! Eligendi itaque hic aut quo, nesciunt explicabo fugit exercitationem totam </p>
eveniet aliquid molestias, tempora possimus.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi delectus natus animi, necessitatibus <p>В случае, если в реальности в выбранных локациях установка постаматов не была произведена, в системе
distinctio praesentium! Eligendi itaque hic aut quo, nesciunt explicabo fugit exercitationem totam можно
eveniet aliquid molestias, tempora possimus.</p> удалить ранее созданные постаматы и все прогнозы снова будут обновлены с учетом последних изменений. При
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi delectus natus animi, necessitatibus успешной установке постамата, данная локация начнет накапливать данные по количеству заказов и через
distinctio praesentium! Eligendi itaque hic aut quo, nesciunt explicabo fugit exercitationem totam определенное время попадет в обучающую выборку.</p>
eveniet aliquid molestias, tempora possimus.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi delectus natus animi, necessitatibus
distinctio praesentium! Eligendi itaque hic aut quo, nesciunt explicabo fugit exercitationem totam
eveniet aliquid molestias, tempora possimus.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi delectus natus animi, necessitatibus
distinctio praesentium! Eligendi itaque hic aut quo, nesciunt explicabo fugit exercitationem totam
eveniet aliquid molestias, tempora possimus.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi delectus natus animi, necessitatibus
distinctio praesentium! Eligendi itaque hic aut quo, nesciunt explicabo fugit exercitationem totam
eveniet aliquid molestias, tempora possimus.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi delectus natus animi, necessitatibus
distinctio praesentium! Eligendi itaque hic aut quo, nesciunt explicabo fugit exercitationem totam
eveniet aliquid molestias, tempora possimus.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi delectus natus animi, necessitatibus
distinctio praesentium! Eligendi itaque hic aut quo, nesciunt explicabo fugit exercitationem totam
eveniet aliquid molestias, tempora possimus.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi delectus natus animi, necessitatibus
distinctio praesentium! Eligendi itaque hic aut quo, nesciunt explicabo fugit exercitationem totam
eveniet aliquid molestias, tempora possimus.</p>
</div> </div>
<div class="section"> <div class="section">
<h1>Slide 2.2</h1> <figure>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi delectus natus animi, necessitatibus <img src="images/postnet/konkovo.png" />
distinctio praesentium! Eligendi itaque hic aut quo, nesciunt explicabo fugit exercitationem totam <figcaption>Жилые дома и ритейл района Коньково, имеющие прогноз месячного количества заказов более 200
eveniet aliquid molestias, tempora possimus.</p> </figcaption>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi delectus natus animi, necessitatibus </figure>
distinctio praesentium! Eligendi itaque hic aut quo, nesciunt explicabo fugit exercitationem totam
eveniet aliquid molestias, tempora possimus.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi delectus natus animi, necessitatibus
distinctio praesentium! Eligendi itaque hic aut quo, nesciunt explicabo fugit exercitationem totam
eveniet aliquid molestias, tempora possimus.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi delectus natus animi, necessitatibus
distinctio praesentium! Eligendi itaque hic aut quo, nesciunt explicabo fugit exercitationem totam
eveniet aliquid molestias, tempora possimus.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi delectus natus animi, necessitatibus
distinctio praesentium! Eligendi itaque hic aut quo, nesciunt explicabo fugit exercitationem totam
eveniet aliquid molestias, tempora possimus.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi delectus natus animi, necessitatibus
distinctio praesentium! Eligendi itaque hic aut quo, nesciunt explicabo fugit exercitationem totam
eveniet aliquid molestias, tempora possimus.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi delectus natus animi, necessitatibus
distinctio praesentium! Eligendi itaque hic aut quo, nesciunt explicabo fugit exercitationem totam
eveniet aliquid molestias, tempora possimus.</p>
</div> </div>
<div class="section"> <div class="section">
<h2>Section 3</h2> <p>Система оснащена множеством фильтров, упрощающих задачу поиска локаций для размещения новых постаматов. С
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi delectus natus animi, necessitatibus помощью фильтров можно быстро отбирать локации с определенным прогнозным количеством заказов,
distinctio praesentium! Eligendi itaque hic aut quo, nesciunt explicabo fugit exercitationem totam расположенных в определенных районах города и в объектах определенной категории (супермаркет, подъезд
eveniet aliquid molestias, tempora possimus.</p> жилого дома, библиотека и др.).
</p>
<p>Используя расширенные фильтры, можно отбирать локаций в зависимости от их расположения относительно
объектов инфраструктуры, например, точек других сетей постаматов/ПВЗ или имеющих определенную статистику
по окрестности, например, по количеству квартир.</p>
</div>
<div class="section">
<figure>
<img src="images/postnet/zones.png" />
<figcaption>Локации, расположенные на территориях с низкой конкуренцией, но с большим количеством людей
</figcaption>
</figure>
</div>
<div class="section">
<p>Все это делает разработанную систему инновационным и удобным инструментом для управления и развития сети
постаматов Московский постамат. В целом, такое приложение может быть использовано и для любых других
сетей каких-либо коммерческих или социально-экономических объектов, имеющих определенное количество уже
работающих точек.
</p>
<p>Если вам интересна подобная система, напишите нам.</p>
</div> </div>
</div> </div>
<script> <script>
new fullpage('#fullpage', { new fullpage('.fullpage', {
sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
navigation: true, navigation: true,
// you can also use the HTML attribute data-tooltip on each section instead
navigationTooltips: ['First Section', 'Second Section', 'Third Section'],
}); });
</script> </script>

35
projects.html
Unescape View File

@ -9,7 +9,7 @@
</head> </head>
<body> <body>
<div class="container"> <div class="container nav-container">
<div id="wrap"> <div id="wrap">
<div id="row"> <div id="row">
<div id="logo"> <div id="logo">
@ -27,15 +27,30 @@
</div> </div>
<div id="projects-container"> <div id="projects-container">
<div id="projects-wrap"> <div id="projects-wrap">
<div id="projects-title">Проекты</div>
<div id="projects-content"> <div id="projects-content">
<a class="project-container" href="project-post.html"> <div>
<div class="project-image" style="background-image: url('./images/projects/greenpeace.jpg');"></div> <a class="project-container" href="project-post.html">
<div class="project-title"> <img src="./images/postnet/postnet-cover.png" alt="" srcset="">
<span>Городская инфраструктура<div class="project-arrow"></div></span> <div class="project-title">
</div> <span>Postnet<div class="project-arrow"></div></span>
</a> </div>
<a class="project-container" href="project-post.html"> </a>
<div class="project-text">геоинформационная AutoML система для контроля и развития сети
Московский постамат</div>
</div>
<div>
<a class="project-container" href="project-post.html">
<img src="./images/city/city-cover.png" alt="" srcset="">
<div class="project-title">
<span>Cit<wbr>y modelling<div class="project-arrow">
</div></span>
</div>
</a>
<div class="project-text">геоинформационная ML система для моделирования городского пространства /
цифрового мастер&#8209;планирования</div>
</div>
<!-- <a class="project-container" href="project-post.html">
<div class="project-image" style="background-image: url('./images/projects/agglom.jpg');"></div> <div class="project-image" style="background-image: url('./images/projects/agglom.jpg');"></div>
<div class="project-title"> <div class="project-title">
<span>Аварийность объектов ЖКХ<div class="project-arrow"></div></span> <span>Аварийность объектов ЖКХ<div class="project-arrow"></div></span>
@ -46,7 +61,7 @@
<div class="project-title"> <div class="project-title">
<span>Постаматы<div class="project-arrow"></div></span> <span>Постаматы<div class="project-arrow"></div></span>
</div> </div>
</a> </a> -->
</div> </div>
<!-- <div id="footer-container"> <!-- <div id="footer-container">
<div id="footer-title"> <div id="footer-title">

99
style.css
Unescape View File

@ -6,6 +6,7 @@
--accent-text-color: rgb(227, 178, 179); --accent-text-color: rgb(227, 178, 179);
--font-size: 30px; --font-size: 30px;
--padding: 30px; --padding: 30px;
--header-height: 80px;
} }
/* Font Face */ /* Font Face */
@ -42,13 +43,19 @@ html {
} }
} }
.nav-container {
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
#wrap { #wrap {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
width: 100%; width: 100%;
height: 80px; height: var(--header-height);
border-bottom: 1px solid #cccccc; /* border-bottom: 1px solid #cccccc; */
@media (max-width: 850px) { @media (max-width: 850px) {
flex-direction: column; flex-direction: column;
@ -77,7 +84,7 @@ html {
text-decoration: none; text-decoration: none;
color: #e4e4e4; color: #e4e4e4;
@media (min-width: 850px) { @media (min-width: 851px) {
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
@ -169,7 +176,7 @@ html {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: calc(100vw - 60px); width: calc(100vw - 60px);
min-height: calc(80vh - 80px); min-height: calc(100vh - var(--header-height));
box-sizing: border-box; box-sizing: border-box;
padding: 60px 0 50px 0; padding: 60px 0 50px 0;
@ -216,7 +223,8 @@ html {
position: relative; position: relative;
justify-content: space-between; justify-content: space-between;
width: calc(100vw - 60px); width: calc(100vw - 60px);
min-height: inherit; min-height: calc(100vh - var(--header-height));
/* min-height: inherit; */
box-sizing: border-box; box-sizing: border-box;
padding: 50px 0; padding: 50px 0;
@ -259,7 +267,6 @@ html {
.block-title { .block-title {
max-width: 200px; max-width: 200px;
min-height: 80px;
line-height: 40px; line-height: 40px;
font-size: 28px; font-size: 28px;
text-transform: uppercase; text-transform: uppercase;
@ -298,7 +305,7 @@ html {
position: relative; position: relative;
justify-content: space-between; justify-content: space-between;
width: calc(100vw - 60px); width: calc(100vw - 60px);
min-height: calc(100vh - 80px); min-height: calc(100vh - var(--header-height));
border-top: 1px solid #CCCCCC; border-top: 1px solid #CCCCCC;
box-sizing: border-box; box-sizing: border-box;
padding: 50px 0; padding: 50px 0;
@ -450,36 +457,22 @@ html {
.project-container { .project-container {
display: block; display: block;
position: relative; position: relative;
width: calc(33% - 15px); width: 100%;
height: auto; height: auto;
margin-bottom: 30px;
cursor: pointer; cursor: pointer;
overflow: hidden; overflow: hidden;
text-decoration: none; text-decoration: none;
}
@media (max-width: 1100px) { .project-container img {
width: calc(50% - 15px); object-fit: cover;
} width: 100%;
min-height: 300px;
@media (max-width: 850px) { transition: scale 0.5s;
width: 100%;
:before {
background-blend-mode: normal;
}
}
} }
.project-image { .project-container:hover img {
content: ""; scale: 1.1;
display: block;
padding-top: 100%;
transition: background-color 0.3s;
background-position: center;
background-repeat: no-repeat;
background-blend-mode: luminosity;
background-size: cover;
cursor: pointer;
} }
.project-title .project-arrow { .project-title .project-arrow {
@ -490,12 +483,7 @@ html {
background: url("./svg/Arrow_to_bottom.svg") no-repeat center; background: url("./svg/Arrow_to_bottom.svg") no-repeat center;
background-size: contain; background-size: contain;
transform: rotate(-90deg); transform: rotate(-90deg);
transition: transform 0.5s; transition: transform 0.3s;
}
.project-container:hover .project-title {
backdrop-filter: brightness(0.4);
} }
.project-container:hover .project-arrow { .project-container:hover .project-arrow {
@ -505,14 +493,12 @@ html {
.project-title { .project-title {
display: flex; display: flex;
position: absolute; position: absolute;
top: 50%; bottom: 0;
/* left: 50%; */
/* transform: translate(-50%, -50%); */
width: 100%; width: 100%;
backdrop-filter: brightness(0.2); background-color: rgba(0, 0, 0, 0.8);
font-size: 30px; font-size: 30px;
line-height: 37px; line-height: 37px;
transition: backdrop-filter 0.5s; transition: background-color 0.3s;
height: 3em; height: 3em;
@ -525,6 +511,10 @@ html {
cursor: pointer; cursor: pointer;
} }
.project-container:hover .project-title {
background-color: rgba(0, 0, 0, 0.9);
}
.project-title span { .project-title span {
display: flex; display: flex;
margin: 1em; margin: 1em;
@ -537,6 +527,7 @@ html {
font-size: 28px; font-size: 28px;
line-height: 37px; line-height: 37px;
color: #aaaaaa; color: #aaaaaa;
margin-bottom: 1em;
} }
/* Contacts */ /* Contacts */
@ -627,4 +618,30 @@ html {
} }
cursor: pointer; cursor: pointer;
}
.section {
padding: 80px 60px;
text-align: left;
font-family: 'GOST', monospace;
color: var(--primary-text-color);
background: var(--primary-color);
@media (max-width: 850px) {
padding: 220px 60px 30px 30px;
}
}
.section img {
width: 100%
}
.section figure {
@media (max-width: 850px) {
margin: 0;
}
}
.section figcaption {
font-size: 18px;
} }
Write Preview
Loading…
Cancel
Save