174 lines
6.1 KiB
HTML
174 lines
6.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Apple Style — Будущее здесь</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<!-- Announcement Bar -->
|
||
<div id="announcementBar" class="announcement-bar"></div>
|
||
|
||
<!-- Navigation -->
|
||
<nav class="nav" id="nav">
|
||
<div class="nav-container">
|
||
<a href="/" class="logo"></a>
|
||
<div class="nav-links">
|
||
<a href="#products">Продукты</a>
|
||
<a href="#features">Возможности</a>
|
||
<a href="#vision">Vision</a>
|
||
<a href="admin.html" class="admin-link">Админка</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Hero Section -->
|
||
<section class="hero" id="hero">
|
||
<div class="hero-bg" id="heroBg"></div>
|
||
<div class="hero-overlay"></div>
|
||
<div class="hero-content">
|
||
<h1 id="heroTitle" class="hero-title"></h1>
|
||
<p id="heroSubtitle" class="hero-subtitle"></p>
|
||
<div class="hero-cta">
|
||
<a href="#products" class="btn btn-primary">Смотреть продукты</a>
|
||
<a href="#vision" class="btn btn-secondary">Узнать больше</a>
|
||
</div>
|
||
</div>
|
||
<div class="scroll-indicator">
|
||
<div class="mouse">
|
||
<div class="wheel"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Product Showcase (Apple-style scroll) -->
|
||
<section class="product-showcase" id="products">
|
||
<div class="showcase-intro">
|
||
<h2 class="showcase-title">Выберите свой путь</h2>
|
||
<p class="showcase-subtitle">Инновации в каждой детали</p>
|
||
</div>
|
||
<div class="products-container" id="productsContainer">
|
||
<!-- Products will be loaded here -->
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Features Section with Parallax -->
|
||
<section class="features" id="features">
|
||
<div class="features-bg" id="featuresBg"></div>
|
||
<div class="features-overlay"></div>
|
||
<div class="features-content">
|
||
<h2 class="section-title reveal">Технологии будущего</h2>
|
||
<div class="features-grid">
|
||
<div class="feature-card reveal">
|
||
<div class="feature-icon">🚀</div>
|
||
<h3>Производительность</h3>
|
||
<p>Чипы M-серии меняют правила игры</p>
|
||
</div>
|
||
<div class="feature-card reveal">
|
||
<div class="feature-icon">🔒</div>
|
||
<h3>Безопасность</h3>
|
||
<p>Защита данных на аппаратном уровне</p>
|
||
</div>
|
||
<div class="feature-card reveal">
|
||
<div class="feature-icon">🌱</div>
|
||
<h3>Экология</h3>
|
||
<p>Углеродная нейтральность к 2030</p>
|
||
</div>
|
||
<div class="feature-card reveal">
|
||
<div class="feature-icon">🤖</div>
|
||
<h3>ИИ</h3>
|
||
<p>Apple Intelligence в каждом устройстве</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Vision Section -->
|
||
<section class="vision" id="vision">
|
||
<div class="vision-content">
|
||
<h2 class="vision-title reveal">Vision Pro</h2>
|
||
<p class="vision-subtitle reveal">Эра пространственных вычислений наступила</p>
|
||
<div class="vision-features reveal">
|
||
<div class="vision-feature">
|
||
<span class="vision-feature-icon">👁️</span>
|
||
<div>
|
||
<h4>eyeSight</h4>
|
||
<p>Оставайтесь на связи с окружающими</p>
|
||
</div>
|
||
</div>
|
||
<div class="vision-feature">
|
||
<span class="vision-feature-icon">🎭</span>
|
||
<div>
|
||
<h4>visionOS</h4>
|
||
<p>Интуитивный пространственный интерфейс</p>
|
||
</div>
|
||
</div>
|
||
<div class="vision-feature">
|
||
<span class="vision-feature-icon">🎬</span>
|
||
<div>
|
||
<h4>Immersion</h4>
|
||
<p>Погружение как в кинотеатре</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="vision-image reveal">
|
||
<img src="https://picsum.photos/1200/800?random=50" alt="Vision Pro">
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Big Image Scroll Section -->
|
||
<section class="scroll-gallery" id="gallery">
|
||
<div class="gallery-item" id="galleryItem1">
|
||
<img src="https://picsum.photos/1920/1080?random=60" alt="">
|
||
<div class="gallery-caption">
|
||
<h3>Дизайн</h3>
|
||
<p>Каждая линия имеет значение</p>
|
||
</div>
|
||
</div>
|
||
<div class="gallery-item" id="galleryItem2">
|
||
<img src="https://picsum.photos/1920/1080?random=61" alt="">
|
||
<div class="gallery-caption">
|
||
<h3>Инновации</h3>
|
||
<p>Технологии, которые вдохновляют</p>
|
||
</div>
|
||
</div>
|
||
<div class="gallery-item" id="galleryItem3">
|
||
<img src="https://picsum.photos/1920/1080?random=62" alt="">
|
||
<div class="gallery-caption">
|
||
<h3>Будущее</h3>
|
||
<p>Создаём завтрашний день сегодня</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA Section -->
|
||
<section class="cta-section">
|
||
<h2 class="cta-title reveal">Готовы к будущему?</h2>
|
||
<p class="cta-subtitle reveal">Откройте для себя мир инноваций уже сегодня</p>
|
||
<div class="cta-buttons reveal">
|
||
<a href="#products" class="btn btn-primary">Выбрать устройство</a>
|
||
<a href="#" class="btn btn-secondary">Связаться с нами</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer>
|
||
<div class="footer-content">
|
||
<div class="footer-links">
|
||
<a href="#">О компании</a>
|
||
<a href="#">Карьера</a>
|
||
<a href="#">Инвесторам</a>
|
||
<a href="#">Новости</a>
|
||
<a href="#">Конфиденциальность</a>
|
||
<a href="#">Контакты</a>
|
||
</div>
|
||
<p class="copyright">© 2026 Apple Style Demo. Все права защищены.</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|