Шаблон приложения «Карта Leaflet»
Карта OpenStreetMap с определением местоположения и сохранёнными метками. Нужен интернет.
Это шаблон в работе. Функции телефона, такие как камера, вибрация и уведомления, работают в приложении, которое вы соберёте.
Функции телефона, которые использует этот шаблон
Они работают через JavaScript-мост FreeApp, который есть в каждом приложении, собранном в Free HTML to APK. В обычном браузере шаблон тоже работает, просто эти вызовы ничего не делают.
Одиночная вибрация (по умолчанию 50 мс) или шаблон [пауза, вибрация, пауза, вибрация…].
Как шаблон их вызывает
async function locate() {
if (window.FreeApp && !(await FreeApp.requestPermission('location'))) return;
navigator.geolocation.getCurrentPosition(p => {
map.setView([p.coords.latitude, p.coords.longitude], 15);
});
}
Сделайте его своим с помощью ИИ
Скопируйте этот промпт в ChatGPT, Gemini или Claude, замените идею на свою и вставьте ответ обратно в редактор. Он уже объясняет ИИ оболочку приложения и функции телефона.
Показать промпт для ИИ
Build a single-file mobile web app (index.html with inline CSS/JS) for Android WebView.
The app: Leaflet Map — a Leaflet + OpenStreetMap map with a locate-me button and saved pins. OpenStreetMap map with locate me and saved pins. Needs internet.
Requirements:
- Mobile-first, touch-friendly UI (min 44px tap targets), works in portrait, supports light and dark mode.
- Use <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> and pad for env(safe-area-inset-*).
- You may load libraries from a CDN (jsDelivr/unpkg); show a friendly message if the device is offline.
The page runs inside an Android app that injects a native bridge as window.FreeApp. Available APIs:
- FreeApp.requestPermission(name: 'camera' | 'microphone' | 'location' | 'notifications'): Promise<boolean>
- FreeApp.vibrate(ms?: number | number[]): void — one-shot buzz (default 50 ms) or an [off, on, off, on…] pattern
Rules for the bridge:
- Always guard calls with `window.FreeApp &&` (or `if (window.FreeApp) { … }`) and provide a browser fallback so the page also works in a normal browser.
- The bridge may be injected after your script runs: do native setup inside `window.addEventListener('freeappready', …)` and also run it immediately if window.FreeApp already exists.
- Do not use alert/confirm for normal feedback; prefer FreeApp.toast when available.
Return the complete index.html in one code block.
My idea: [DESCRIBE YOUR APP IDEA HERE]Превратите его в Android-приложение
- Нажмите Редактировать и собрать онлайн. Шаблон откроется в онлайн-редакторе.
- Измените текст, цвета и код, затем выберите название приложения, иконку и имя пакета.
- Соберите. Вы получите подписанный APK для установки и AAB для Google Play — бесплатно, без аккаунта и без водяного знака.
✏️ Редактировать и собрать онлайн СКАЧАЙТЕ БЕСПЛАТНО ВGoogle Play
Другие шаблоны в категории «Фреймворки»
React Starter
React 18 + htm с CDN: счётчик и список дел, без этапа сборки. Нужен интернет.
Стартовый Vue
Приложение со списком дел на Vue 3, загружаемое из CDN, с реактивными фильтрами. Нужен интернет.
Лендинг на Tailwind
Лендинг на Tailwind Play CDN с главным блоком, возможностями и тарифами. Нужен интернет.
Панель Bootstrap
Панель администратора на Bootstrap 5 со статистикой, таблицами и вкладками. Нужен интернет.
Список покупок на Alpine
Список покупок на Alpine.js с итогами и категориями. Нужен интернет.
Phaser Jumper
Мини-платформер на Phaser 3 с экранными кнопками управления. Нужен интернет.