beartrack-mobile/www/main.html

233 lines
14 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.

<div class="container">
<div class="row">
<div class="col-12">
<div id="nalychevo" class="card visota-kartozrki border border-0 rounded-3" style="overflow: hidden">
<a href="/nalychevo">
<div class="card-body">
<div class="card-zagolovok">
<h5 class="card-title">НАЛЫЧЕВО</h5>
<h6 class="card-podzagolovok">природный парк</h6>
</div>
</div>
</a>
</div>
<div id="south-camchatskiy" class="card visota-kartozrki border border-0 rounded-3" style="overflow: hidden">
<div class="card-body">
<div class="card-zagolovok">
<h5 class="card-title text-uppercase">Южно-Камчатский</h5>
<h6 class="card-podzagolovok">природный парк</h6>
</div>
</div>
</div>
<div id="bistrinskiy" class="card visota-kartozrki border border-0 rounded-3" style="overflow: hidden">
<div class="card-body">
<div class="card-zagolovok">
<h5 class="card-title text-uppercase">Быстринский</h5>
<h6 class="card-podzagolovok">природный парк</h6>
</div>
</div>
</div>
<div id="kluchevskoy" class="card visota-kartozrki border border-0 rounded-3" style="overflow: hidden">
<div class="card-body">
<div class="card-zagolovok">
<h5 class="card-title text-uppercase">Ключевской</h5>
<h6 class="card-podzagolovok">природный парк</h6>
</div>
</div>
</div>
<div id="viluchenskiy" class="card visota-kartozrki border border-0 rounded-3" style="overflow: hidden">
<div class="card-body">
<div class="card-zagolovok">
<h5 class="card-title text-uppercase">Вилюченский</h5>
<h6 class="card-podzagolovok">природный парк</h6>
</div>
</div>
</div>
<div id="koly-river" class="card visota-kartozrki border border-0 rounded-3" style="overflow: hidden">
<div class="card-body">
<div class="card-zagolovok">
<h5 class="card-title text-uppercase">Река Коль</h5>
<h6 class="card-podzagolovok">Лососевый заказник</h6>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
<div class="container">
<div class="row">
<div class="col">
<div class="row">
<div class="col">
<p class="m-0 p-0 fs-4">Текстовое поле "Описание"</p>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-body d-flex" style="height: 150px">
<p class="m-auto">Тут будет картинка и текст</p>
</div>
<div class="card-footer">
<a id="start-tracking" class="btn btn-outline-secondary float-end" href="/map"><i class="bi bi-tag"></i></a>
</div>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col">
<p class="m-0 p-0 fs-4">Походы выходного дня</p>
</div>
</div>
<div class="row">
<div class="col m-0 p-1">
<nav class="nav scrollable-nav">
<div class="card bg-warning-subtle m-2" style="width: 250px; height: 100px;">
<div class="card-body d-flex align-items-center justify-content-center">
<div class="text-center" style="max-width: 80%; max-height: 80%; overflow: hidden;">
<p class="m-0" style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">
Это супер длинный текст который я специально написал для проверки работы системы. Если вдруг что-то пойдет не так, то я точно об этом узнаю!
Надеюсь что проблем не возникнет и мне не придется делать совершенно ненужных телодвижений.
</p>
</div>
</div>
</div>
<div class="card bg-danger-subtle m-2" style="width: 250px; height: 100px;">
<div class="card-body d-flex align-items-center justify-content-center">
<div class="text-center" style="max-width: 80%; max-height: 80%; overflow: hidden;">
<p class="m-0" style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">
Это супер длинный текст который я специально написал для проверки работы системы. Если вдруг что-то пойдет не так, то я точно об этом узнаю!
Надеюсь что проблем не возникнет и мне не придется делать совершенно ненужных телодвижений.
</p>
</div>
</div>
</div>
<div class="card bg-secondary-subtle m-2" style="width: 250px; height: 100px;">
<div class="card-body d-flex align-items-center justify-content-center">
<div class="text-center" style="max-width: 80%; max-height: 80%; overflow: hidden;">
<p class="m-0" style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">
Это супер длинный текст который я специально написал для проверки работы системы. Если вдруг что-то пойдет не так, то я точно об этом узнаю!
Надеюсь что проблем не возникнет и мне не придется делать совершенно ненужных телодвижений.
</p>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="row mt-3">
<div class="col">
<p class="m-0 p-0 fs-4">Походы</p>
</div>
</div>
<div class="row">
<div class="col m-0 p-1">
<nav class="nav scrollable-nav">
<div class="card bg-warning-subtle m-2" style="width: 250px; height: 100px;">
<div class="card-body d-flex align-items-center justify-content-center">
<div class="text-center" style="max-width: 80%; max-height: 80%; overflow: hidden;">
<p class="m-0" style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">
Это супер длинный текст который я специально написал для проверки работы системы. Если вдруг что-то пойдет не так, то я точно об этом узнаю!
Надеюсь что проблем не возникнет и мне не придется делать совершенно ненужных телодвижений.
</p>
</div>
</div>
</div>
<div class="card bg-danger-subtle m-2" style="width: 250px; height: 100px;">
<div class="card-body d-flex align-items-center justify-content-center">
<div class="text-center" style="max-width: 80%; max-height: 80%; overflow: hidden;">
<p class="m-0" style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">
Это супер длинный текст который я специально написал для проверки работы системы. Если вдруг что-то пойдет не так, то я точно об этом узнаю!
Надеюсь что проблем не возникнет и мне не придется делать совершенно ненужных телодвижений.
</p>
</div>
</div>
</div>
<div class="card bg-secondary-subtle m-2" style="width: 250px; height: 100px;">
<div class="card-body d-flex align-items-center justify-content-center">
<div class="text-center" style="max-width: 80%; max-height: 80%; overflow: hidden;">
<p class="m-0" style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">
Это супер длинный текст который я специально написал для проверки работы системы. Если вдруг что-то пойдет не так, то я точно об этом узнаю!
Надеюсь что проблем не возникнет и мне не придется делать совершенно ненужных телодвижений.
</p>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="row mt-3">
<div class="col">
<p class="m-0 p-0 fs-4">Вело походы</p>
</div>
</div>
<div class="row">
<div class="col m-0 p-1">
<nav class="nav scrollable-nav">
<div class="card bg-warning-subtle m-2" style="width: 250px; height: 100px;">
<div class="card-body d-flex align-items-center justify-content-center">
<div class="text-center" style="max-width: 80%; max-height: 80%; overflow: hidden;">
<p class="m-0" style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">
Это супер длинный текст который я специально написал для проверки работы системы. Если вдруг что-то пойдет не так, то я точно об этом узнаю!
Надеюсь что проблем не возникнет и мне не придется делать совершенно ненужных телодвижений.
</p>
</div>
</div>
</div>
<div class="card bg-danger-subtle m-2" style="width: 250px; height: 100px;">
<div class="card-body d-flex align-items-center justify-content-center">
<div class="text-center" style="max-width: 80%; max-height: 80%; overflow: hidden;">
<p class="m-0" style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">
Это супер длинный текст который я специально написал для проверки работы системы. Если вдруг что-то пойдет не так, то я точно об этом узнаю!
Надеюсь что проблем не возникнет и мне не придется делать совершенно ненужных телодвижений.
</p>
</div>
</div>
</div>
<div class="card bg-secondary-subtle m-2" style="width: 250px; height: 100px;">
<div class="card-body d-flex align-items-center justify-content-center">
<div class="text-center" style="max-width: 80%; max-height: 80%; overflow: hidden;">
<p class="m-0" style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">
Это супер длинный текст который я специально написал для проверки работы системы. Если вдруг что-то пойдет не так, то я точно об этом узнаю!
Надеюсь что проблем не возникнет и мне не придется делать совершенно ненужных телодвижений.
</p>
</div>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>-->