admin/wiki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

auto-sync: 2026-05-03 20:10:01

Browse Source
This commit is contained in:
Stream
2026-05-03 20:10:02 +03:00
parent fb889f84ee
commit 316db8e824
2 changed files with 250 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
tasks/enduro-trails/PROJECT.md
View File

@@ -23,6 +23,9 @@
| 📍 **"Разведка"** | Грунтовки вокруг точки |
| 🚧 **"Препятствия"** | Броды, шлагбаумы, болота, ЛЭП |
| 🌐 **"Народные треки"** | Сбор и отображение треков с внешних сервисов |
| 🔍 **"Поиск"** | Поиск населённых пунктов, адресов и объектов как на обычных картах |
| 🌙 **"День/ночь"** | Переключатель темы — светлая/тёмная карта |
| 🎨 **"Эндуро-дизайн"** | Современный агрессивный UI в духе эндуро/оффроад |
## Регионы
@@ -67,7 +70,33 @@
- ✅ Кнопки: 🧭 компас (север/свободный), 📍 геолокация с маркером
- ✅ Попапы с name, surface, tracktype, length_m, mtb_scale
## Ресурсы на регион
## План развития
| Фаза | Что | Статус |
|------|-----|--------|
| Фаза 1 | Прототип — визуализация OSM треков | ✅ Готово |
| Фаза 2 | OSRM роутинг + "Дикий путь" | 🔄 В работе |
| Фаза 3 | SRTM рельеф + уклоны + "Горка" | ⏳ Планируется |
| Фаза 4 | "Красивый маршрут", "Связка", "Разведка" | ⏳ Планируется |
| Фаза 5 | PWA + оффлайн | ⏳ Планируется |
| Фаза 6 | Народные треки — сбор с внешних сервисов | ⏳ Планируется |
### Фаза 6: Народные треки (детали)
Источники для сбора:
- **OSM Traces** — публичные GPS-треки загруженные в OSM, бесплатно, API открытый
- **Wikiloc** — огромная база треков эндуристов/велосипедистов/туристов, есть API
- **Komoot** — активно используется эндуристами и велотуристами
- **Strava** — велосипедисты, бегуны (API платный для массового сбора)
- **4x4travel.ru** — джипперы, форум с GPX-файлами
- **Enduroad.ru** — эндуро-сообщество
- **Garmin Connect** — публичные активности
Реализация:
- Сборщик треков → конвертация в GeoJSON → отдельная таблица `community_tracks` в БД
- Отдельный слой на карте "Народные треки" (другой цвет, можно вкл/выкл)
- Фильтрация по типу активности: мото / велосипед / джип / пеший
- Атрибуты: источник, автор, дата, рейтинг, тип активности
| Компонент | Объём |
|-----------|--------|

220
tasks/flightradar24/cube.html Normal file
View File

@@ -0,0 +1,220 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Rotating Cube</title>
<style>
:root {
--perspective: 800px;
--cube-size: 200px;
--speed: 8s;
--direction: 1;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: #1a1a1a;
color: #e0e0e0;
font-family: 'Segoe UI', Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
overflow: hidden;
}
.scene {
perspective: var(--perspective);
display: flex;
align-items: center;
justify-content: center;
height: var(--cube-size);
margin-bottom: 50px;
}
.cube {
width: var(--cube-size);
height: var(--cube-size);
position: relative;
transform-style: preserve-3d;
}
.cube.is-rotating {
animation: rotateCube var(--speed) linear infinite;
}
.is-paused { animation-play-state: paused !important; }
@keyframes rotateCube {
0% { transform: rotateX(0) rotateY(0) rotateZ(0); }
100% {
transform:
rotateX(calc(360deg * var(--direction) * var(--axisX-mult, 1)))
rotateY(calc(360deg * var(--direction) * var(--axisY-mult, 1)))
rotateZ(calc(360deg * var(--direction) * 0.5 * var(--axisZ-mult, 0)));
}
}
.cube-face {
position: absolute;
width: var(--cube-size);
height: var(--cube-size);
border: 2px solid rgba(255, 255, 255, 0.2);
display: flex; align-items: center; justify-content: center;
font-size: 24px; font-weight: bold; color: #fff; opacity: 0.85;
}
.face-front { transform: rotateY(0deg) translateZ(calc(var(--cube-size) / 2)); background: rgba(52,152,219,0.7); }
.face-back { transform: rotateY(180deg) translateZ(calc(var(--cube-size) / 2)); background: rgba(142,68,173,0.7); }
.face-left { transform: rotateY(-90deg) translateZ(calc(var(--cube-size) / 2)); background: rgba(39,174,96,0.7); }
.face-right { transform: rotateY(90deg) translateZ(calc(var(--cube-size) / 2)); background: rgba(243,156,18,0.7); }
.face-top { transform: rotateX(90deg) translateZ(calc(var(--cube-size) / 2)); background: rgba(231,76,60,0.7); }
.face-bottom { transform: rotateX(-90deg) translateZ(calc(var(--cube-size) / 2)); background: rgba(127,140,141,0.7); }
.controls {
background: rgba(255,255,255,0.08);
border-radius: 12px; padding: 24px;
display: flex; flex-direction: column; gap: 16px;
width: 320px;
border: 1px solid rgba(255,255,255,0.1);
box-shadow: 0 4px 30px rgba(0,0,0,0.1);
}
.control-group { display: flex; flex-direction: column; gap: 4px; }
.control-label {
font-size: 14px; color: #a0a0a0;
display: flex; justify-content: space-between;
}
.control-value { color: #4fc3f7; font-weight: bold; }
.button-group { display: flex; gap: 12px; justify-content: center; }
button {
background: #2c3e50; color: #ecf0f1;
border: none; padding: 8px 16px; border-radius: 6px;
cursor: pointer; display: flex; align-items: center;
gap: 6px; transition: all 0.2s; font-size: 14px;
}
button:hover { background: #34495e; }
button.primary { background: #2980b9; }
button.primary:hover { background: #3498db; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-icon { font-size: 18px; }
input[type="range"] {
width: 100%; -webkit-appearance: none;
height: 6px; background: #2c3e50; border-radius: 3px; outline: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; width: 18px; height: 18px;
background: #4fc3f7; border-radius: 50%; cursor: pointer;
}
.checkbox-group { display: flex; align-items: center; gap: 12px; padding: 4px 0; }
.checkbox-group label { font-size: 14px; }
input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: #4fc3f7; }
.axis-toggles { display: flex; gap: 12px; }
@media (max-width: 500px) {
.controls { width: 90%; padding: 16px; }
:root { --cube-size: 150px; }
}
</style>
</head>
<body>
<div class="scene">
<div class="cube is-rotating" id="cube">
<div class="cube-face face-front">Front</div>
<div class="cube-face face-back">Back</div>
<div class="cube-face face-left">Left</div>
<div class="cube-face face-right">Right</div>
<div class="cube-face face-top">Top</div>
<div class="cube-face face-bottom">Bottom</div>
</div>
</div>
<div class="controls">
<div class="button-group">
<button id="playPauseBtn" class="primary">
<span class="btn-icon" id="playPauseIcon">⏸️</span>
<span id="playPauseText">Pause</span>
</button>
<button id="restartBtn"><span class="btn-icon">🚀</span>Restart</button>
</div>
<div class="control-group">
<div class="control-label">Speed</div>
<input type="range" id="speedSlider" min="1" max="20" value="8" step="0.5">
<span class="control-value" id="speedValue">8.0s</span>
</div>
<div class="control-group">
<div class="control-label">Perspective</div>
<input type="range" id="perspectiveSlider" min="400" max="1600" value="800" step="50">
<span class="control-value" id="perspectiveValue">800px</span>
</div>
<div class="checkbox-group">
<input type="checkbox" id="reverseCheckbox">
<label for="reverseCheckbox">Reverse direction</label>
</div>
<div class="axis-toggles">
<div class="checkbox-group"><input type="checkbox" id="axisX" checked><label for="axisX">X</label></div>
<div class="checkbox-group"><input type="checkbox" id="axisY" checked><label for="axisY">Y</label></div>
<div class="checkbox-group"><input type="checkbox" id="axisZ"><label for="axisZ">Z</label></div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const cube = document.getElementById('cube');
const root = document.documentElement;
const playPauseBtn = document.getElementById('playPauseBtn');
const restartBtn = document.getElementById('restartBtn');
const playPauseIcon = document.getElementById('playPauseIcon');
const playPauseText = document.getElementById('playPauseText');
const speedSlider = document.getElementById('speedSlider');
const speedValue = document.getElementById('speedValue');
const perspectiveSlider = document.getElementById('perspectiveSlider');
const perspectiveValue = document.getElementById('perspectiveValue');
const reverseCheckbox = document.getElementById('reverseCheckbox');
const axisX = document.getElementById('axisX');
const axisY = document.getElementById('axisY');
const axisZ = document.getElementById('axisZ');
let isPlaying = true;
function updateAnimation() {
reverseCheckbox.checked
? root.style.setProperty('--direction', '-1')
: root.style.setProperty('--direction', '1');
root.style.setProperty('--axisX-mult', axisX.checked ? '1' : '0');
root.style.setProperty('--axisY-mult', axisY.checked ? '1' : '0');
root.style.setProperty('--axisZ-mult', axisZ.checked ? '1' : '0');
cube.classList.remove('is-rotating');
void cube.offsetWidth;
cube.classList.add('is-rotating');
if (!isPlaying) cube.classList.add('is-paused');
}
playPauseBtn.addEventListener('click', () => {
isPlaying = !isPlaying;
isPlaying
? (cube.classList.remove('is-paused'), playPauseIcon.textContent = '⏸️', playPauseText.textContent = 'Pause')
: (cube.classList.add('is-paused'), playPauseIcon.textContent = '▶️', playPauseText.textContent = 'Play');
playPauseBtn.classList.toggle('primary', isPlaying);
});
restartBtn.addEventListener('click', () => {
cube.classList.remove('is-rotating', 'is-paused');
void cube.offsetWidth;
cube.classList.add('is-rotating');
if (!isPlaying) cube.classList.add('is-paused');
});
speedSlider.addEventListener('input', () => {
const val = speedSlider.value;
root.style.setProperty('--speed', `${val}s`);
speedValue.textContent = `${parseFloat(val).toFixed(1)}s`;
});
perspectiveSlider.addEventListener('input', () => {
const val = perspectiveSlider.value;
root.style.setProperty('--perspective', `${val}px`);
perspectiveValue.textContent = `${val}px`;
});
reverseCheckbox.addEventListener('change', updateAnimation);
axisX.addEventListener('change', updateAnimation);
axisY.addEventListener('change', updateAnimation);
axisZ.addEventListener('change', updateAnimation);
updateAnimation();
});
</script>
</body>
</html>