Модалки - о проекте; инструкция
This commit is contained in:
parent
6d64ef0191
commit
58cd6f36a4
|
|
@ -18,8 +18,53 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<h1>WikiPoints</h1>
|
<h1 onclick="$('#aboutModal').modal('show');">WikiPoints</h1>
|
||||||
|
<span class="mainMenu">
|
||||||
|
<a onclick="$('#aboutModal').modal('show');" href="#">О проекте</a>
|
||||||
|
|
|
||||||
|
<a onclick="$('#howToUseModal').modal('show');" href="#">Как пользоваться</a>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<?= isset($content) && !empty($content) ? $content : 'No content =(' ?>
|
<?= isset($content) && !empty($content) ? $content : 'No content =(' ?>
|
||||||
|
<div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-labelledby="Информация о проекте" aria-hidden="true">
|
||||||
|
<div class="modal-dialog">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||||
|
<h4 class="modal-title" id="myModalLabel">Информация о проекте WikiPoints.ru</h4>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<p><b>Добрый день!</b></p>
|
||||||
|
<p>Во многих из нас живёт дух путешесвий. Ещё из детства в нашем сознании живут первооткрыватели, великие путешественники, покорители севера и другие герои. Но сейчас всё прозаичнее — земной шар кажется не таким большим, всего за несколько часов можно оказаться на другом краю света. Родной город уже не хранит свои тайны и кажется, что всё давно известно.</p>
|
||||||
|
<p>Для многих может стать открытием то, что совсем рядом есть множество интересных мест, которые стоит посетить, которые так-же загадочны и интересны, как тогда, много лет назад. Замки, родовые имения, руины, религиозные сооружения, музеи, да мало ли ещё целей для поездки с семьёй или друзьями. Попробуйте потратить субботу на осуществление мечты детства — на путешествие.</p>
|
||||||
|
<p>Давайте поможем друг другу! Каждый знает несколько достопримечательностей, которые можно порекомендовать к просмотру. Их совсем не сложно добавить на карту — это занимает пару минут.</p>
|
||||||
|
<p>Цель проекта очень проста — поделиться знаниями, рассказать о родном крае и, конечно, самому найти интересные направления для путешествий.</p>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal fade" id="howToUseModal" tabindex="-1" role="dialog" aria-labelledby="Курс молодого бойца" aria-hidden="true">
|
||||||
|
<div class="modal-dialog">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||||
|
<h4 class="modal-title" id="myModalLabel">Курс молодого бойца</h4>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<p><b>Информация о точках</b></p>
|
||||||
|
<p>На карте вы видите пиктограммы — ими отмечены места, интересные для посещения. При клике на пиктограмму вы увидите небольшое окно с информацией и фотографию объекта. В конце описания есть ссылка на более подробное описание.</p>
|
||||||
|
<br />
|
||||||
|
<p><b>Добавление новой точки</b></p>
|
||||||
|
<p>Добавление точки состоит из ряда простых шагов, а именно: подготовка информации об объекте (описание, ссылка на изображение, подробная статья); поиск нужной точки на карте wikipoints. Теперь вы готовы добавить точку на карту. Нажмите кнопку «Добавить точку» (нижний правый угол), курсор изменится на «+», кликните на нужном месте карты и заполните форму.</p>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -12,7 +12,9 @@ div#map {width: 100%; position: absolute; top: 0; bottom: 50px;}
|
||||||
div.infoCard h3 {text-align: center; margin-top: 0;}
|
div.infoCard h3 {text-align: center; margin-top: 0;}
|
||||||
div.infoCard img {width: 200px; float: left; margin: 0 10px 5px 0;}
|
div.infoCard img {width: 200px; float: left; margin: 0 10px 5px 0;}
|
||||||
div.header {display: block; position: absolute; top: 0; left: 110px; border-radius: 0 0 5px 5px; z-index: 1000; background-color: #FFF; padding: 5px 10px;}
|
div.header {display: block; position: absolute; top: 0; left: 110px; border-radius: 0 0 5px 5px; z-index: 1000; background-color: #FFF; padding: 5px 10px;}
|
||||||
div.header h1 {display: inline; color: #333;}
|
div.header h1 {display: inline; color: #333; cursor: pointer;}
|
||||||
|
div.header span.mainMenu {display: none;}
|
||||||
|
div.header:hover span.mainMenu {display: block;}
|
||||||
div.add {cursor: pointer;}
|
div.add {cursor: pointer;}
|
||||||
|
|
||||||
div#footer {position: absolute; width: 100%; height: 50px; bottom: 0; padding: 12px 10px 0 10px;;}
|
div#footer {position: absolute; width: 100%; height: 50px; bottom: 0; padding: 12px 10px 0 10px;;}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue