mobile-iphone / index.html
Phoenixoni's picture
Add 2 files
773c686 verified
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iPhone Экран</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
body {
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
animation: fadeIn 0.5s ease-in;
}
.iphone-frame {
position: relative;
width: 375px;
height: 812px;
background: #000;
border-radius: 60px;
border: 12px solid #1a1a1a;
overflow: hidden;
box-shadow: 0 0 0 4px #333, 0 30px 60px rgba(0,0,0,0.5);
}
.screen {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, #6bb1ff, #0066ff);
overflow: hidden;
}
.notch {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 150px;
height: 35px;
background: #000;
border-bottom-left-radius: 18px;
border-bottom-right-radius: 18px;
z-index: 10;
}
.status-bar {
position: absolute;
top: 10px;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
padding: 0 25px;
color: white;
font-size: 14px;
font-weight: 600;
z-index: 5;
}
.time {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.app-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
padding: 80px 25px 25px;
}
.app-icon {
display: flex;
flex-direction: column;
align-items: center;
color: white;
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
cursor: pointer;
transition: transform 0.2s;
}
.app-icon:active {
transform: scale(0.9);
}
.app-icon-circle {
width: 60px;
height: 60px;
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 5px;
background: rgba(255,255,255,0.1);
backdrop-filter: blur(10px);
}
.app-name {
font-size: 12px;
text-align: center;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.dock {
position: absolute;
bottom: 100px;
left: 25px;
right: 25px;
height: 80px;
background: rgba(255,255,255,0.1);
backdrop-filter: blur(20px);
border-radius: 25px;
display: flex;
justify-content: space-around;
align-items: center;
padding: 0 15px;
}
.dock-icon {
width: 60px;
height: 60px;
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
color: white;
cursor: pointer;
transition: transform 0.2s;
}
.dock-icon:active {
transform: scale(0.9);
}
.home-indicator {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 5px;
background: white;
border-radius: 3px;
opacity: 0.8;
}
.app-screen {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: white;
z-index: 20;
display: none;
overflow: hidden;
}
.app-header {
height: 44px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 15px;
background: #f8f8f8;
border-bottom: 1px solid #e5e5e5;
}
.app-title {
font-weight: 600;
font-size: 17px;
}
.app-content {
height: calc(100% - 44px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.control-center {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(255,255,255,0.8);
backdrop-filter: blur(20px);
border-top-left-radius: 25px;
border-top-right-radius: 25px;
padding: 20px;
z-index: 30;
transform: translateY(100%);
transition: transform 0.3s ease-out;
}
.control-center.show {
transform: translateY(0);
}
.cc-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.cc-tile {
background: rgba(255,255,255,0.7);
border-radius: 12px;
height: 60px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
}
.cc-tile:active {
opacity: 0.7;
}
.cc-tile i {
font-size: 24px;
margin-bottom: 5px;
}
.cc-tile span {
font-size: 10px;
font-weight: 500;
}
.cc-slider {
margin-top: 20px;
background: rgba(255,255,255,0.7);
border-radius: 12px;
padding: 15px;
}
.slider-container {
display: flex;
align-items: center;
}
.slider-container i {
font-size: 20px;
margin-right: 10px;
}
.slider {
flex: 1;
height: 4px;
background: #ccc;
border-radius: 2px;
position: relative;
}
.slider-thumb {
position: absolute;
width: 16px;
height: 16px;
background: white;
border-radius: 50%;
top: -6px;
left: 70%;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.notification-center {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255,255,255,0.8);
backdrop-filter: blur(20px);
z-index: 30;
transform: translateY(-100%);
transition: transform 0.3s ease-out;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.notification-center.show {
transform: translateY(0);
}
.notification {
background: white;
border-radius: 12px;
margin: 10px;
padding: 12px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.notification-header {
display: flex;
justify-content: space-between;
margin-bottom: 5px;
}
.notification-app {
font-weight: 600;
font-size: 14px;
}
.notification-time {
font-size: 12px;
color: #8e8e93;
}
.notification-content {
font-size: 14px;
}
.swipe-down-area {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 40px;
z-index: 5;
}
.swipe-up-area {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 40px;
z-index: 5;
}
</style>
</head>
<body>
<div class="iphone-frame">
<div class="screen">
<div class="notch"></div>
<div class="status-bar">
<div>9:41</div>
<div class="time" id="iphone-time">14:25</div>
<div>
<i class="fas fa-signal"></i>
<i class="fas fa-wifi ml-1"></i>
<i class="fas fa-battery-full ml-1"></i>
</div>
</div>
<div class="app-grid">
<!-- Первый ряд -->
<div class="app-icon" onclick="openApp('phone')">
<div class="app-icon-circle" style="background: linear-gradient(to bottom, #4CD964, #2AC940);">
<i class="fas fa-phone" style="color: white;"></i>
</div>
<div class="app-name">Телефон</div>
</div>
<div class="app-icon" onclick="openApp('safari')">
<div class="app-icon-circle" style="background: linear-gradient(to bottom, #1DA1F2, #1A91DA);">
<i class="fas fa-globe" style="color: white;"></i>
</div>
<div class="app-name">Safari</div>
</div>
<div class="app-icon" onclick="openApp('messages')">
<div class="app-icon-circle" style="background: linear-gradient(to bottom, #32C759, #2DBE50);">
<i class="fas fa-comment" style="color: white;"></i>
</div>
<div class="app-name">Сообщения</div>
</div>
<div class="app-icon" onclick="openApp('music')">
<div class="app-icon-circle" style="background: linear-gradient(to bottom, #FF2D55, #FF375F);">
<i class="fas fa-music" style="color: white;"></i>
</div>
<div class="app-name">Музыка</div>
</div>
<!-- Второй ряд -->
<div class="app-icon" onclick="openApp('mail')">
<div class="app-icon-circle" style="background: linear-gradient(to bottom, #007AFF, #0A84FF);">
<i class="fas fa-envelope" style="color: white;"></i>
</div>
<div class="app-name">Почта</div>
</div>
<div class="app-icon" onclick="openApp('calendar')">
<div class="app-icon-circle" style="background: linear-gradient(to bottom, #5856D6, #5E5CE6);">
<i class="fas fa-calendar" style="color: white;"></i>
</div>
<div class="app-name">Календарь</div>
</div>
<div class="app-icon" onclick="openApp('photos')">
<div class="app-icon-circle" style="background: linear-gradient(to bottom, #FF9500, #FF9F0A);">
<i class="fas fa-camera" style="color: white;"></i>
</div>
<div class="app-name">Фото</div>
</div>
<div class="app-icon" onclick="openApp('camera')">
<div class="app-icon-circle" style="background: linear-gradient(to bottom, #FF375F, #FF2D55);">
<i class="fas fa-camera-retro" style="color: white;"></i>
</div>
<div class="app-name">Камера</div>
</div>
<!-- Третий ряд -->
<div class="app-icon" onclick="openApp('maps')">
<div class="app-icon-circle" style="background: linear-gradient(to bottom, #34C759, #30D158);">
<i class="fas fa-map" style="color: white;"></i>
</div>
<div class="app-name">Карты</div>
</div>
<div class="app-icon" onclick="openApp('weather')">
<div class="app-icon-circle" style="background: linear-gradient(to bottom, #32ADE6, #0A84FF);">
<i class="fas fa-cloud-sun" style="color: white;"></i>
</div>
<div class="app-name">Погода</div>
</div>
<div class="app-icon" onclick="openApp('notes')">
<div class="app-icon-circle" style="background: linear-gradient(to bottom, #FFCC00, #FFD60A);">
<i class="fas fa-sticky-note" style="color: white;"></i>
</div>
<div class="app-name">Заметки</div>
</div>
<div class="app-icon" onclick="openApp('reminders')">
<div class="app-icon-circle" style="background: linear-gradient(to bottom, #5E5CE6, #5856D6);">
<i class="fas fa-list-check" style="color: white;"></i>
</div>
<div class="app-name">Напоминания</div>
</div>
<!-- Четвертый ряд -->
<div class="app-icon" onclick="openApp('settings')">
<div class="app-icon-circle" style="background: linear-gradient(to bottom, #8E8E93, #7C7C80);">
<i class="fas fa-gear" style="color: white;"></i>
</div>
<div class="app-name">Настройки</div>
</div>
<div class="app-icon" onclick="openApp('appstore')">
<div class="app-icon-circle" style="background: linear-gradient(to bottom, #0A84FF, #007AFF);">
<i class="fas fa-shopping-bag" style="color: white;"></i>
</div>
<div class="app-name">App Store</div>
</div>
<div class="app-icon" onclick="openApp('wallet')">
<div class="app-icon-circle" style="background: linear-gradient(to bottom, #5856D6, #5E5CE6);">
<i class="fas fa-wallet" style="color: white;"></i>
</div>
<div class="app-name">Wallet</div>
</div>
<div class="app-icon" onclick="openApp('health')">
<div class="app-icon-circle" style="background: linear-gradient(to bottom, #FF375F, #FF2D55);">
<i class="fas fa-heart-pulse" style="color: white;"></i>
</div>
<div class="app-name">Здоровье</div>
</div>
</div>
<div class="dock">
<div class="dock-icon" onclick="openApp('phone')">
<i class="fas fa-phone" style="color: white; font-size: 24px;"></i>
</div>
<div class="dock-icon" onclick="openApp('safari')">
<i class="fas fa-globe" style="color: white; font-size: 24px;"></i>
</div>
<div class="dock-icon" onclick="openApp('messages')">
<i class="fas fa-comment" style="color: white; font-size: 24px;"></i>
</div>
<div class="dock-icon" onclick="openApp('music')">
<i class="fas fa-music" style="color: white; font-size: 24px;"></i>
</div>
</div>
<div class="home-indicator"></div>
<!-- Область для свайпа вниз (Control Center) -->
<div class="swipe-down-area" id="swipe-down-area"></div>
<!-- Область для свайпа вверх (Notification Center) -->
<div class="swipe-up-area" id="swipe-up-area"></div>
</div>
<!-- Control Center -->
<div class="control-center" id="control-center">
<div class="cc-grid">
<div class="cc-tile" onclick="toggleAirplaneMode()">
<i class="fas fa-plane"></i>
<span>Авиарежим</span>
</div>
<div class="cc-tile" onclick="toggleWifi()">
<i class="fas fa-wifi"></i>
<span>Wi-Fi</span>
</div>
<div class="cc-tile" onclick="toggleBluetooth()">
<i class="fas fa-bluetooth"></i>
<span>Bluetooth</span>
</div>
<div class="cc-tile" onclick="toggleFlashlight()">
<i class="fas fa-lightbulb"></i>
<span>Фонарик</span>
</div>
<div class="cc-tile" onclick="toggleRotationLock()">
<i class="fas fa-lock"></i>
<span>Блокир.</span>
</div>
<div class="cc-tile" onclick="openSettings('display')">
<i class="fas fa-moon"></i>
<span>Темный режим</span>
</div>
<div class="cc-tile" onclick="openSettings('battery')">
<i class="fas fa-battery-three-quarters"></i>
<span>Экономия</span>
</div>
<div class="cc-tile" onclick="openSettings('wifi')">
<i class="fas fa-wifi"></i>
<span>Сеть</span>
</div>
</div>
<div class="cc-slider">
<div class="slider-container">
<i class="fas fa-sun"></i>
<div class="slider">
<div class="slider-thumb"></div>
</div>
</div>
</div>
<div class="text-center mt-4">
<button class="px-4 py-2 bg-gray-200 rounded-full" onclick="hideControlCenter()">Закрыть</button>
</div>
</div>
<!-- Notification Center -->
<div class="notification-center" id="notification-center">
<div class="text-center py-4 font-medium">Сегодня</div>
<div class="notification">
<div class="notification-header">
<div class="notification-app">Сообщения</div>
<div class="notification-time">10:30</div>
</div>
<div class="notification-content">Новое сообщение от Алексея: "Привет, как дела?"</div>
</div>
<div class="notification">
<div class="notification-header">
<div class="notification-app">Почта</div>
<div class="notification-time">09:45</div>
</div>
<div class="notification-content">Новое письмо: "Ваш заказ был отправлен"</div>
</div>
<div class="notification">
<div class="notification-header">
<div class="notification-app">Напоминания</div>
<div class="notification-time">08:15</div>
</div>
<div class="notification-content">Запланировано: "Встреча в 14:00"</div>
</div>
<div class="text-center py-4">
<button class="px-4 py-2 bg-gray-200 rounded-full" onclick="hideNotificationCenter()">Закрыть</button>
</div>
</div>
<!-- Экран приложения -->
<div class="app-screen" id="phone-app">
<div class="app-header">
<div class="app-title">Телефон</div>
<div onclick="closeApp('phone')">
<i class="fas fa-chevron-down"></i>
</div>
</div>
<div class="app-content">
<div class="p-4">
<div class="text-center text-gray-500 mt-10">Избранные контакты</div>
<div class="mt-4">
<div class="flex items-center p-3 border-b">
<div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white mr-3">И</div>
<div>
<div class="font-medium">Иван Петров</div>
<div class="text-gray-500 text-sm">мобильный</div>
</div>
</div>
<div class="flex items-center p-3 border-b">
<div class="w-10 h-10 rounded-full bg-green-500 flex items-center justify-center text-white mr-3">А</div>
<div>
<div class="font-medium">Алексей Смирнов</div>
<div class="text-gray-500 text-sm">рабочий</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="app-screen" id="safari-app">
<div class="app-header">
<div class="app-title">Safari</div>
<div onclick="closeApp('safari')">
<i class="fas fa-chevron-down"></i>
</div>
</div>
<div class="app-content">
<div class="p-4">
<div class="text-center">
<img src="https://www.apple.com/ac/globalnav/7/ru_RU/images/be15095f-5a20-57d0-ad14-cf4c638e223a/globalnav_apple_image__b5er5ngrzxqq_large.svg" alt="Apple" class="h-10 mx-auto mb-4">
<div class="relative">
<input type="text" class="w-full p-2 pl-8 bg-gray-100 rounded-full" placeholder="Поиск или введите название сайта">
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
</div>
</div>
</div>
</div>
</div>
<div class="app-screen" id="messages-app">
<div class="app-header">
<div class="app-title">Сообщения</div>
<div onclick="closeApp('messages')">
<i class="fas fa-chevron-down"></i>
</div>
</div>
<div class="app-content">
<div class="p-2">
<div class="flex items-center p-3 border-b">
<div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white mr-3">И</div>
<div>
<div class="font-medium">Иван Петров</div>
<div class="text-gray-500 text-sm">Привет, как дела?</div>
</div>
<div class="ml-auto text-gray-500 text-sm">10:30</div>
</div>
<div class="flex items-center p-3 border-b">
<div class="w-10 h-10 rounded-full bg-green-500 flex items-center justify-center text-white mr-3">А</div>
<div>
<div class="font-medium">Алексей Смирнов</div>
<div class="text-gray-500 text-sm">Встречаемся в 14:00</div>
</div>
<div class="ml-auto text-gray-500 text-sm">09:45</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Обновление времени
function updateTime() {
const now = new Date();
const timeElement = document.getElementById('iphone-time');
const hours = now.getHours().toString().padStart(2, '0');
const minutes = now.getMinutes().toString().padStart(2, '0');
timeElement.textContent = `${hours}:${minutes}`;
}
setInterval(updateTime, 1000);
updateTime();
// Управление приложениями
function openApp(appName) {
document.getElementById(`${appName}-app`).style.display = 'block';
}
function closeApp(appName) {
document.getElementById(`${appName}-app`).style.display = 'none';
}
// Control Center
const swipeDownArea = document.getElementById('swipe-down-area');
const controlCenter = document.getElementById('control-center');
swipeDownArea.addEventListener('click', function() {
controlCenter.classList.add('show');
});
function hideControlCenter() {
controlCenter.classList.remove('show');
}
function toggleAirplaneMode() {
alert('Авиарежим переключен');
}
function toggleWifi() {
alert('Wi-Fi переключен');
}
function toggleBluetooth() {
alert('Bluetooth переключен');
}
function toggleFlashlight() {
alert('Фонарик переключен');
}
function toggleRotationLock() {
alert('Блокировка вращения переключена');
}
// Notification Center
const swipeUpArea = document.getElementById('swipe-up-area');
const notificationCenter = document.getElementById('notification-center');
swipeUpArea.addEventListener('click', function() {
notificationCenter.classList.add('show');
});
function hideNotificationCenter() {
notificationCenter.classList.remove('show');
}
// Настройки
function openSettings(section) {
alert(`Открыты настройки: ${section}`);
}
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Phoenixoni/mobile-iphone" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>