https://pastein.ru/t/kcJ
Загрузка данных
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Island — Taxi Platform</title>
<style>
/* БАЗОВЫЕ НАСТРОЙКИ И ПЕРЕМЕННЫЕ */
:root {
--bg-color: #030712;
--text-color: #f3f4f6;
--text-muted: #9ca3af;
/* ЖЕЛТЫЙ (TAXI) ЦВЕТ КАК ОСНОВНОЙ */
--primary: #f59e0b; /* Насыщенный желтый/янтарный */
--primary-hover: #d97706; /* Темно-желтый при наведении */
--purple: #a855f7;
--amber: #f59e0b;
--emerald: #10b981;
--island-bg: #000000;
--island-border: rgba(255, 255, 255, 0.14);
--card-bg: rgba(17, 24, 39, 0.6);
--card-border: rgba(255, 255, 255, 0.05);
}
/* Плавный скролл по всей странице */
html {
scroll-behavior: smooth;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
overflow-x: hidden;
position: relative;
padding-top: 110px; /* Отступ под фиксированный сверху Dynamic Island */
}
/* ДЕКОРАТИВНЫЕ СВЕЧЕНИЯ НА ФОНЕ */
.glow-container {
position: fixed;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 0;
}
.glow-1 {
position: absolute;
top: -150px;
left: 50%;
transform: translateX(-50%);
width: 800px;
height: 650px;
background: radial-gradient(circle, rgba(245, 158, 11, 0.12) 0%, rgba(0,0,0,0) 70%);
border-radius: 50%;
}
/* ИНТЕРАКТИВНАЯ ЗОНА ОСТРОВА (ФИКСИРОВАННАЯ СВЕРХУ) */
.island-fixed-box {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
pointer-events: none; /* Пропускает клики сквозь контейнер */
}
/* КОРПУС DYNAMIC ISLAND */
.dynamic-island {
pointer-events: auto; /* Возвращаем клики самому острову */
background-color: var(--island-bg);
border: 1px solid var(--island-border);
border-radius: 30px;
width: 160px;
height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
cursor: pointer;
user-select: none;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.9), 0 0 30px rgba(245, 158, 11, 0.15);
overflow: hidden;
touch-action: none;
/* Оптимизация для 60fps анимации */
will-change: width, height, transform, border-radius, box-shadow;
transition:
width 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.1),
height 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.1),
border-radius 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.1),
transform 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.1),
box-shadow 0.3s ease,
border-color 0.3s ease;
}
.dynamic-island:hover {
box-shadow: 0 0 25px rgba(245, 158, 11, 0.3);
border-color: rgba(245, 158, 11, 0.5);
}
/* АНИМАЦИЯ КОНТЕНТА ВНУТРИ */
.island-content {
width: 100%;
height: 100%;
display: flex;
align-items: center;
opacity: 0;
will-change: opacity;
transition: opacity 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}
.island-content.active {
opacity: 1;
}
.hidden {
display: none !important;
}
/* 1. Компактное состояние (Taxi) */
.compact-layout {
justify-content: space-between;
}
.indicator {
width: 10px;
height: 10px;
background-color: var(--primary); /* Ярко-желтый индикатор */
border-radius: 50%;
box-shadow: 0 0 8px var(--primary);
animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.25); opacity: 0.5; }
}
.compact-text {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.05em;
color: var(--primary); /* Taxi горит желтым */
}
/* Общие стили развернутых режимов */
.expanded-layout {
flex-direction: column;
justify-content: flex-start;
padding-top: 12px;
padding-bottom: 12px;
height: 100%;
}
.island-header {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
padding-bottom: 8px;
margin-bottom: 12px;
}
.badge {
font-size: 10px;
font-weight: 800;
padding: 3px 8px;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.badge-ad {
background-color: rgba(245, 158, 11, 0.15);
color: var(--amber);
border: 1px solid rgba(245, 158, 11, 0.3);
}
.badge-buy {
background-color: rgba(245, 158, 11, 0.15);
color: var(--primary);
border: 1px solid rgba(245, 158, 11, 0.3);
display: inline-flex;
align-items: center;
gap: 4px;
}
.header-subtitle {
font-size: 11px;
color: var(--text-muted);
font-weight: 500;
}
.close-btn {
background: none;
border: none;
cursor: pointer;
color: var(--text-muted);
display: flex;
align-items: center;
justify-content: center;
padding: 4px;
border-radius: 50%;
transition: background 0.2s, color 0.2s;
}
.close-btn:hover {
background-color: rgba(255, 255, 255, 0.1);
color: #fff;
}
/* Полоска свайпа */
.swipe-handle {
width: 36px;
height: 4px;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 2px;
position: absolute;
bottom: 6px;
left: 50%;
transform: translateX(-50%);
pointer-events: none;
}
/* 2. Контент рекламы */
.ad-body {
display: flex;
gap: 12px;
width: 100%;
align-items: flex-start;
}
.ad-logo {
width: 44px;
height: 44px;
border-radius: 10px;
background: linear-gradient(135deg, var(--primary) 0%, var(--purple) 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
flex-shrink: 0;
}
.ad-info {
flex-grow: 1;
min-width: 0;
text-align: left;
}
.ad-title {
font-size: 13px;
font-weight: 800;
color: #ffffff;
margin-bottom: 2px;
}
.ad-desc {
font-size: 11px;
color: var(--text-muted);
line-height: 1.3;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.ad-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
width: 100%;
margin-top: 12px;
}
/* Кнопки */
.btn-sm {
padding: 6px 12px;
font-size: 11px;
font-weight: 700;
border-radius: 8px;
text-decoration: none;
cursor: pointer;
transition: all 0.2s;
border: none;
display: inline-flex;
align-items: center;
gap: 4px;
}
.btn-outline {
background-color: rgba(255, 255, 255, 0.05);
color: #e5e7eb;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.btn-outline:hover {
background-color: rgba(255, 255, 255, 0.1);
color: #ffffff;
}
.btn-primary {
background-color: var(--primary); /* Желтая кнопка */
color: #000; /* Черный текст для контраста */
font-weight: 800;
}
.btn-primary:hover {
background-color: var(--primary-hover);
transform: translateY(-1px);
}
/* 3. Контент покупки рекламы */
.buy-desc {
font-size: 12px;
color: #d1d5db;
text-align: left;
width: 100%;
margin-bottom: 10px;
line-height: 1.4;
}
.price-badge {
color: var(--primary);
font-weight: 800;
}
.progress-container {
width: 100%;
background-color: rgba(255, 255, 255, 0.06);
padding: 10px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.03);
margin-bottom: 12px;
}
.progress-header {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(--text-muted);
margin-bottom: 6px;
}
.progress-bar {
width: 100%;
height: 6px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 10px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--primary) 0%, var(--purple) 100%);
width: 75%;
border-radius: 10px;
}
/* Кнопки в форме покупки */
.buy-actions-grid {
display: grid;
grid-template-cols: 1fr 1fr;
gap: 8px;
width: 100%;
}
.btn-buy-yellow {
padding: 10px;
font-size: 11px;
font-weight: 800;
border-radius: 10px;
background-color: var(--primary);
color: #000;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
transition: background 0.2s, transform 0.2s;
}
.btn-buy-yellow:hover {
background-color: var(--primary-hover);
transform: translateY(-1px);
}
.btn-buy-gradient {
padding: 10px;
font-size: 11px;
font-weight: 800;
border-radius: 10px;
background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
color: #fff;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
transition: opacity 0.2s, transform 0.2s;
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}
.btn-buy-gradient:hover {
opacity: 0.95;
transform: translateY(-1px);
}
/* ПОДПИСЬ ПОД ОСТРОВОМ */
.tip-text {
font-size: 10px;
color: var(--primary);
background-color: rgba(245, 158, 11, 0.08);
border: 1px solid rgba(245, 158, 11, 0.15);
padding: 5px 12px;
border-radius: 30px;
text-align: center;
display: inline-flex;
align-items: center;
gap: 4px;
opacity: 0.8;
pointer-events: auto;
}
/* КНОПКИ БЫСТРОГО УПРАВЛЕНИЯ */
.controls {
display: flex;
gap: 8px;
pointer-events: auto;
}
.control-btn {
background-color: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
color: var(--text-muted);
padding: 6px 12px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.control-btn:hover {
background-color: rgba(255, 255, 255, 0.08);
color: white;
border-color: rgba(255, 255, 255, 0.2);
}
/* ГЛАВНЫЙ БЛОК НА СТРАНИЦЕ */
main {
width: 100%;
max-width: 600px;
padding: 40px 20px;
text-align: center;
z-index: 10;
}
.hero-title {
font-size: 28px;
font-weight: 900;
line-height: 1.2;
background: linear-gradient(to bottom, #ffffff 50%, #a1a1aa 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 12px;
}
.hero-desc {
font-size: 14px;
color: var(--text-muted);
line-height: 1.5;
margin-bottom: 24px;
}
/* СЕКЦИЯ ВСЕЙ РЕКЛАМЫ (КУДА СКРОЛЛИТ ОСТРОВ) */
.ads-section {
width: 100%;
max-width: 600px;
padding: 40px 20px 80px 20px;
z-index: 10;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
}
.section-title {
font-size: 18px;
font-weight: 800;
color: #fff;
display: flex;
align-items: center;
gap: 8px;
}
.ads-grid {
display: flex;
flex-direction: column;
gap: 16px;
}
/* Рекламные карточки */
.ad-card {
background-color: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 20px;
padding: 20px;
display: flex;
gap: 16px;
text-align: left;
transition: transform 0.3s ease, border-color 0.3s ease;
backdrop-filter: blur(10px);
}
.ad-card:hover {
transform: translateY(-2px);
border-color: rgba(255, 255, 255, 0.1);
}
.card-logo-box {
width: 50px;
height: 50px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
flex-shrink: 0;
}
.logo-1 { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.logo-2 { background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%); }
.logo-3 { background: linear-gradient(135deg, #a855f7 0%, #ef4444 100%); }
.card-content {
flex-grow: 1;
}
.card-badge {
display: inline-block;
font-size: 9px;
font-weight: 800;
color: var(--amber);
background-color: rgba(245, 158, 11, 0.1);
border: 1px solid rgba(245, 158, 11, 0.2);
padding: 2px 6px;
border-radius: 4px;
text-transform: uppercase;
margin-bottom: 6px;
}
.card-title {
font-size: 15px;
font-weight: 700;
color: #fff;
margin-bottom: 4px;
}
.card-desc {
font-size: 12px;
color: var(--text-muted);
line-height: 1.5;
margin-bottom: 12px;
}
.card-btn {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 700;
color: #f59e0b;
text-decoration: none;
transition: color 0.2s;
}
.card-btn:hover {
color: #fff;
}
/* МОДАЛЬНОЕ ОКНО */
.modal-overlay {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(12px);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.modal-overlay.active {
opacity: 1;
pointer-events: auto;
}
.modal-card {
background-color: #080c14;
border: 1px solid #1f2937;
width: 100%;
max-width: 400px;
border-radius: 28px;
padding: 24px;
position: relative;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
transform: scale(0.95);
transition: transform 0.3s ease;
}
.modal-overlay.active .modal-card {
transform: scale(1);
}
.modal-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.modal-title {
font-size: 18px;
font-weight: 800;
color: #fff;
}
.modal-subtitle {
font-size: 12px;
color: var(--text-muted);
margin-top: 2px;
}
.form-group {
margin-bottom: 14px;
}
.form-label {
display: block;
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.form-input {
width: 100%;
background-color: #111827;
border: 1px solid #1f2937;
border-radius: 10px;
padding: 10px 14px;
font-size: 13px;
color: #fff;
outline: none;
transition: border-color 0.2s;
}
.form-input:focus {
border-color: var(--primary);
}
textarea.form-input {
height: 70px;
resize: none;
}
/* УСПЕХ ФОРМЫ */
.success-box {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 20px 0;
}
.success-title {
font-size: 16px;
font-weight: 800;
color: var(--emerald);
margin-top: 12px;
margin-bottom: 6px;
}
/* ВСПОМОГАТЕЛЬНЫЙ КЛАСС ДЛЯ ИКОНОК */
.icon {
display: inline-block;
width: 1em;
height: 1em;
stroke-width: 2;
stroke: currentColor;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
vertical-align: middle;
}
</style>
</head>
<body>
<!-- ДЕКОРАТИВНЫЙ ФОН -->
<div class="glow-container">
<div class="glow-1"></div>
</div>
<!-- ИНТЕРАКТИВНАЯ ЗОНА ОСТРОВА (ФИКСИРОВАННАЯ СВЕРХУ) -->
<div class="island-fixed-box">
<!-- Остров -->
<div id="dynamicIsland" class="dynamic-island">
<!-- 1. Компактное состояние (Taxi) -->
<div id="islandCompact" class="island-content compact-layout active">
<div class="indicator"></div>
<span class="compact-text">Taxi</span>
<svg class="icon" style="color: var(--amber); width: 14px; height: 14px;" viewBox="0 0 24 24"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/></svg>
</div>
<!-- 2. Развернутый режим: РЕКЛАМА -->
<div id="islandAd" class="island-content expanded-layout hidden">
<div class="island-header">
<div style="display: flex; align-items: center; gap: 8px;">
<span class="badge badge-ad">Реклама</span>
<!-- Заменено "Спонсор" на "Такси Тульский" -->
<span class="header-subtitle">Такси Тульский</span>
</div>
<button onclick="minimizeIsland(event)" class="close-btn">
<svg class="icon" style="width: 14px; height: 14px;" viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12"/></svg>
</button>
</div>
<div class="ad-body">
<div class="ad-logo">
<svg class="icon" style="width: 22px; height: 22px;" viewBox="0 0 24 24"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.71.71-1.5 0-2.25-.75-.75-1.5-.75-2.25 0Z"/><path d="m12 15-3-3m1.5-1.5L21 3s-9 0-13 4c-3 3-3.5 7.5-3.5 7.5s4.5-.5 7.5-3.5c4-4 4-13 4-13Z"/></svg>
</div>
<div class="ad-info">
<h4 class="ad-title">Размещение вашей рекламы</h4>
<p class="ad-desc">Привлеките тысячи новых клиентов с помощью интерактивного промо-виджета.</p>
</div>
</div>
<div class="ad-actions">
<!-- Полностью жёлтая кнопка «Реклама ⬇» со стрелочкой вниз -->
<button onclick="scrollToAds(event)" class="btn-sm btn-yellow">
Реклама
<svg class="icon" style="width: 11px; height: 11px; stroke: currentColor; stroke-width: 2.5;" viewBox="0 0 24 24"><path d="M12 5v14M19 12l-7 7-7-7"/></svg>
</button>
<!-- Кнопка «Купить рекламу» в премиальном градиенте -->
<button onclick="openFormModal(event)" class="btn-sm btn-gradient">Купить рекламу</button>
</div>
<div class="swipe-handle"></div>
</div>
<!-- 3. Развернутый режим: КУПИТЬ РЕКЛАМУ -->
<div id="islandBuy" class="island-content expanded-layout hidden">
<div class="island-header">
<span class="badge badge-buy">
<svg class="icon" style="width: 12px; height: 12px;" viewBox="0 0 24 24"><path d="m18 8-6 4V4L6 8H2v8h4l6 4v-8l6 4V8Z"/><path d="M22 12c0-3.3-1.8-6-4-6M18 18c2.2 0 4-2.7 4-6"/></svg>
Купить рекламу
</span>
<button onclick="minimizeIsland(event)" class="close-btn">
<svg class="icon" style="width: 14px; height: 14px;" viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12"/></svg>
</button>
</div>
<p class="buy-desc">Разместите свой бренд перед <span class="price-badge">100k+</span> аудиторией.</p>
<div class="progress-container">
<div class="progress-header">
<span>Заполнение slots за сегодня</span>
<span style="font-weight: 700; color: var(--emerald);">75%</span>
</div>
<div class="progress-bar">
<div class="progress-fill"></div>
</div>
</div>
<div class="buy-actions-grid">
<!-- Полностью жёлтая кнопка «Реклама ⬇» со стрелочкой вниз -->
<button onclick="scrollToAds(event)" class="btn-buy-yellow">
Реклама
<svg class="icon" style="width: 11px; height: 11px; stroke: currentColor; stroke-width: 2.5;" viewBox="0 0 24 24"><path d="M12 5v14M19 12l-7 7-7-7"/></svg>
</button>
<!-- Кнопка «Заказать» в премиальном градиенте -->
<button onclick="openFormModal(event)" class="btn-buy-gradient">
Заказать
<svg class="icon" style="width: 12px; height: 12px;" viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</button>
</div>
<div class="swipe-handle"></div>
</div>
</div>
<!-- ИНСТРУКЦИЯ ПОД ОСТРОВОМ -->
<div class="tip-text">
<span>Свайпните остров вверх или используйте пульт</span>
</div>
<!-- МИНИ-ПУЛЬТ ДЛЯ ДЕМОНСТРАЦИИ -->
<div class="controls">
<button onclick="expandToAd()" class="control-btn">Реклама</button>
<button onclick="expandToBuy()" class="control-btn">Купить рекламу</button>
<button onclick="minimizeIsland()" class="control-btn">Свернуть</button>
</div>
</div>
<!-- ГЛАВНЫЙ ГЕРОЙ-БЛОК -->
<main>
<h1 class="hero-title">Умный Dynamic Island</h1>
<p class="hero-desc">
Интерактивный виджет, который плавно расширяется при взаимодействии. Нажмите на кнопки «Реклама» или «Купить рекламу» в Dynamic Island, чтобы увидеть плавные переходы и воспользоваться навигацией.
</p>
</main>
<!-- СЕКЦИЯ ВСЕЙ РЕКЛАМЫ (СЮДА СКРОЛЛИТ КНОПКА «РЕКЛАМА ВНИЗ») -->
<section id="adsSection" class="ads-section">
<div class="section-header">
<h2 class="section-title">
<svg class="icon" style="color: var(--amber); width: 20px; height: 20px;" viewBox="0 0 24 24"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/></svg>
Все рекламные объявления
</h2>
<span style="font-size: 11px; color: var(--text-muted);">Обновлено только что</span>
</div>
<div class="ads-grid">
<!-- Карточка 1 -->
<div class="ad-card">
<div class="card-logo-box logo-1">
<svg class="icon" style="width: 24px; height: 24px;" viewBox="0 0 24 24"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.71.71-1.5 0-2.25-.75-.75-1.5-.75-2.25 0Z"/><path d="m12 15-3-3m1.5-1.5L21 3s-9 0-13 4c-3 3-3.5 7.5-3.5 7.5s4.5-.5 7.5-3.5c4-4 4-13 4-13Z"/></svg>
</div>
<div class="card-content">
<!-- Заменено "Спонсор" на "Такси Тульский" -->
<span class="card-badge">Такси Тульский</span>
<h3 class="card-title">Taxi Плюс</h3>
<p class="card-desc">Быстрые и комфортные поездки по городу. Скидка 15% на первый заказ по промокоду ISLAND.</p>
<a href="#" class="card-btn">
Открыть сайт
<svg class="icon" style="width: 12px; height: 12px;" viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</a>
</div>
</div>
<!-- Карточка 2 -->
<div class="ad-card">
<div class="card-logo-box logo-2">
<svg class="icon" style="width: 24px; height: 24px;" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10zM9 11l2 2 4-4"/></svg>
</div>
<div class="card-content">
<span class="card-badge" style="color: #6366f1; background-color: rgba(99,102,241,0.1); border-color: rgba(99,102,241,0.2);">Безопасность</span>
<h3 class="card-title">CloudLock VPN</h3>
<p class="card-desc">Защита корпоративного трафика и мгновенное шифрование соединений без потери скорости по протоколу WireGuard.</p>
<a href="#" class="card-btn" style="color: #6366f1;">
Узнать больше
<svg class="icon" style="width: 12px; height: 12px;" viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</a>
</div>
</div>
<!-- Карточка 3 -->
<div class="ad-card">
<div class="card-logo-box logo-3">
<svg class="icon" style="width: 24px; height: 24px;" viewBox="0 0 24 24"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
</div>
<div class="card-content">
<span class="card-badge" style="color: var(--emerald); background-color: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.2);">Финансы</span>
<h3 class="card-title">PayFlow Pro</h3>
<p class="card-desc">Платежный шлюз без скрытых комиссий. Принимайте международные платежи и автоматизируйте инвойсы.</p>
<a href="#" class="card-btn" style="color: var(--emerald);">
Подключить демо
<svg class="icon" style="width: 12px; height: 12px;" viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</a>
</div>
</div>
</div>
</section>
<!-- МОДАЛЬНОЕ ОКНО ФОРМЫ -->
<div id="modalOverlay" class="modal-overlay">
<div class="modal-card">
<!-- Кнопка закрытия -->
<button onclick="closeFormModal()" class="close-btn" style="position: absolute; top: 18px; right: 18px;">
<svg class="icon" style="width: 18px; height: 18px;" viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12"/></svg>
</button>
<!-- Содержимое формы -->
<div id="modalContent">
<div class="modal-header">
<div style="width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background-color: rgba(245, 158, 11, 0.1); color: var(--primary); border: 1px solid rgba(245, 158, 11, 0.2); margin-bottom: 0;">
<svg class="icon" style="width: 20px; height: 20px;" viewBox="0 0 24 24"><path d="m18 8-6 4V4L6 8H2v8h4l6 4v-8l6 4V8Z"/></svg>
</div>
<div>
<h3 class="modal-title">Купить рекламу</h3>
<p class="modal-subtitle">Заполните поля для подачи заявки</p>
</div>
</div>
<form id="adForm" onsubmit="submitForm(event)">
<div class="form-group">
<label class="form-label">Бренд / Ваше Имя</label>
<input required type="text" placeholder="НейроСеть X" class="form-input">
</div>
<div class="form-group">
<label class="form-label">Telegram или Email</label>
<input required type="text" placeholder="@my_telegram" class="form-input">
</div>
<div class="form-group">
<label class="form-label">Ссылка на ваш сайт</label>
<input required type="url" placeholder="https://example.com" class="form-input">
</div>
<div class="form-group">
<label class="form-label">Слоган рекламы</label>
<textarea required maxlength="100" placeholder="Что показать пользователям в Dynamic Island?" class="form-input"></textarea>
</div>
<button type="submit" class="btn-buy-gradient" style="margin-top: 10px; width: 100%;">
Отправить заявку
</button>
</form>
</div>
<!-- Успешная отправка -->
<div id="modalSuccess" class="success-box hidden">
<svg class="icon" style="width: 48px; height: 48px; color: var(--emerald);" viewBox="0 0 24 24"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="M22 4 12 14.01l-3-3"/></svg>
<h4 class="success-title">Заявка принята!</h4>
<p style="text-align: center; font-size: 12px; color: var(--text-muted); line-height: 1.5;">Свяжемся с вами в Telegram в течение 10 минут.</p>
</div>
</div>
</div>
<!-- СКРИПТ АНИМАЦИИ И УПРАВЛЕНИЯ -->
<script>
const island = document.getElementById('dynamicIsland');
const compactMode = document.getElementById('islandCompact');
const adMode = document.getElementById('islandAd');
const buyMode = document.getElementById('islandBuy');
const modalOverlay = document.getElementById('modalOverlay');
const adForm = document.getElementById('adForm');
const modalSuccess = document.getElementById('modalSuccess');
const modalContent = document.getElementById('modalContent');
let currentMode = 'compact';
// Клик непосредственно на Dynamic Island
island.addEventListener('click', () => {
if (currentMode === 'compact') {
expandToAd();
}
});
// Скролл вниз к списку рекламы
function scrollToAds(event) {
if (event) {
event.stopPropagation();
event.preventDefault();
}
// Сворачиваем остров перед скроллом для красоты и аккуратности
minimizeIsland();
// Плавно перемещаем страницу к секции рекламы
const adsSection = document.getElementById('adsSection');
adsSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
// Свернуть в компактную пилюлю
function minimizeIsland(event) {
if (event) event.stopPropagation();
fadeCurrentContent(() => {
island.style.width = '160px';
island.style.height = '40px';
island.style.borderRadius = '30px';
setTimeout(() => {
compactMode.classList.remove('hidden');
setTimeout(() => compactMode.classList.add('active'), 40);
currentMode = 'compact';
}, 120);
});
}
// Показать рекламу
function expandToAd(event) {
if (event) event.stopPropagation();
if (currentMode === 'ad') return;
fadeCurrentContent(() => {
const isMobile = window.innerWidth < 480;
island.style.width = isMobile ? '320px' : '380px';
island.style.height = '165px';
island.style.borderRadius = '24px';
setTimeout(() => {
adMode.classList.remove('hidden');
setTimeout(() => adMode.classList.add('active'), 40);
currentMode = 'ad';
}, 120);
});
}
// Показать режим "Купить рекламу"
function expandToBuy() {
if (currentMode === 'buy') return;
fadeCurrentContent(() => {
const isMobile = window.innerWidth < 480;
island.style.width = isMobile ? '320px' : '380px';
island.style.height = '230px';
island.style.borderRadius = '28px';
setTimeout(() => {
buyMode.classList.remove('hidden');
setTimeout(() => buyMode.classList.add('active'), 40);
currentMode = 'buy';
}, 120);
});
}
// Плавно скрываем текущий активный слой
function fadeCurrentContent(callback) {
const activeContent = document.querySelector('.island-content.active');
if (activeContent) {
activeContent.classList.remove('active');
setTimeout(() => {
activeContent.classList.add('hidden');
if (callback) callback();
}, 120);
} else {
if (callback) callback();
}
}
// РАБОТА С МОДАЛЬНЫМ ОКНОМ
function openFormModal(event) {
if (event) event.stopPropagation();
modalOverlay.classList.add('active');
}
function closeFormModal() {
modalOverlay.classList.remove('active');
setTimeout(() => {
adForm.reset();
modalContent.classList.remove('hidden');
modalSuccess.classList.add('hidden');
}, 300);
}
// Отправка формы заявки
function submitForm(event) {
event.preventDefault();
modalContent.classList.add('hidden');
modalSuccess.classList.remove('hidden');
// Авто-закрытие и сворачивание
setTimeout(() => {
closeFormModal();
minimizeIsland();
}, 2500);
}
// Закрытие при клике по фону
modalOverlay.addEventListener('click', (e) => {
if (e.target === modalOverlay) {
closeFormModal();
}
});
// ==========================================
// ЛОГИКА СВАЙПА ВВЕРХ ДЛЯ ЗАКРЫТИЯ (TOUCH & MOUSE)
// ==========================================
let startY = 0;
let currentY = 0;
let isDragging = false;
// --- Touch ---
island.addEventListener('touchstart', (e) => {
if (currentMode === 'compact') return;
startY = e.touches[0].clientY;
currentY = startY;
isDragging = true;
island.style.transition = 'none';
}, { passive: true });
island.addEventListener('touchmove', (e) => {
if (!isDragging) return;
currentY = e.touches[0].clientY;
const diffY = currentY - startY;
if (diffY < 0) {
const lift = Math.max(diffY * 0.45, -55);
const scale = 1 + lift / 700;
island.style.transform = `translateY(${lift}px) scale(${scale})`;
}
}, { passive: true });
island.addEventListener('touchend', () => {
if (!isDragging) return;
isDragging = false;
island.style.transition = '';
const diffY = currentY - startY;
if (diffY < -40) {
island.style.transform = 'translateY(-25px) scaleY(0.7) scaleX(0.95)';
setTimeout(() => {
island.style.transform = '';
minimizeIsland();
}, 100);
} else {
island.style.transform = '';
}
startY = 0;
currentY = 0;
});
// --- Mouse ---
island.addEventListener('mousedown', (e) => {
if (currentMode === 'compact') return;
startY = e.clientY;
currentY = startY;
isDragging = true;
island.style.transition = 'none';
});
window.addEventListener('mousemove', (e) => {
if (!isDragging) return;
currentY = e.clientY;
const diffY = currentY - startY;
if (diffY < 0) {
const lift = Math.max(diffY * 0.45, -55);
const scale = 1 + lift / 700;
island.style.transform = `translateY(${lift}px) scale(${scale})`;
}
});
window.addEventListener('mouseup', () => {
if (!isDragging) return;
isDragging = false;
island.style.transition = '';
const diffY = currentY - startY;
if (diffY < -40) {
island.style.transform = 'translateY(-25px) scaleY(0.7) scaleX(0.95)';
setTimeout(() => {
island.style.transform = '';
minimizeIsland();
}, 100);
} else {
island.style.transform = '';
}
startY = 0;
currentY = 0;
});
</script>
</body>
</html>