JHamidun Device frames
Чистые CSS+SVG рамки. Никаких внешних библиотек.
Что есть в templates/
ios-frame.html— iPhone-style рамка с Dynamic Island, статус-баром (время, сеть, батарея), home-indicator. Размер screen: 390×844 (iPhone 14).android-frame.html— Android-style рамка с notification bar и системными кнопками. Размер: 412×892.macos-window.html— окно macOS с traffic-lights (красный/жёлтый/зелёный) и заголовком.browser-window.html— окно браузера с табами, адресной строкой.
Каждый шаблон — одиночный HTML-файл, который можно либо открыть напрямую и заменить контент внутри .frame-screen, либо через iframe встроить в свой макет.
Использование
Самый простой способ — копируй HTML рамки и заменяй её содержимое своим:
<div class="ios-frame">
<div class="ios-status-bar">...</div>
<div class="ios-screen">
<!-- ВОТ СЮДА твой макет -->
</div>
<div class="ios-home-indicator"></div>
</div>
Важные размеры
- iPhone safe-area: статус-бар 47px сверху, home-indicator 34px снизу. Контент должен дышать в этих границах.
- Android system bars: 24px сверху, 48px снизу для жестовой навигации.
- Хит-таргеты: не меньше 44×44px (iOS) / 48×48dp (Android).
Реалистичность
- В статус-баре пиши осмысленное время — не «9:41» (это шаблон Apple). Пиши «09:24» или другое произвольное.
- Уровень батареи — 60–90%. Не 100% (выглядит фейково) и не 5% (отвлекает).
- Сигнал/wifi — full bars.
- Динамический Island — оставь чёрным, если в твоём прототипе нет активного приложения, требующего его.
Что НЕ нужно делать
- Не рисуй кнопку Home на новых iPhone — её нет с 2017.
- Не рисуй три точки в меню Android Material 3 в местах, где обычно гамбургер.
- Не используй iOS-рамку для Android-макета и наоборот.