https://pastein.ru/t/hMD
Загрузка данных
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>JARVIS AI | Ассистент для OC</title>
<!-- Google Fonts и современный шрифт -->
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700&display=swap" rel="stylesheet">
<!-- Font Awesome 6 free (иконки) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background: #0a0c10;
color: #eef2ff;
overflow-x: hidden;
scroll-behavior: smooth;
}
/* Анимированный градиентный фон для акцентов */
:root {
--glass-bg: rgba(20, 25, 35, 0.75);
--jarvis-glow: #00d4ff;
--jarvis-dark: #0b1120;
--card-border: rgba(0, 212, 255, 0.25);
}
/* Кастомный скролл */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: #1a1f2b;
}
::-webkit-scrollbar-thumb {
background: #00d4ff;
border-radius: 10px;
}
/* Навигация (фиксированная) */
.nav-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
backdrop-filter: blur(12px);
background: rgba(10, 12, 18, 0.7);
border-bottom: 1px solid rgba(0, 212, 255, 0.3);
z-index: 1000;
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.logo {
display: flex;
align-items: center;
gap: 12px;
font-weight: 700;
font-size: 1.6rem;
letter-spacing: -0.5px;
}
.logo i {
color: #00d4ff;
font-size: 1.9rem;
filter: drop-shadow(0 0 6px #00d4ff);
}
.logo span {
background: linear-gradient(135deg, #fff, #00d4ff);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
.nav-links {
display: flex;
gap: 2rem;
}
.nav-links a {
color: #ccd6f6;
text-decoration: none;
font-weight: 500;
transition: 0.2s;
font-size: 1rem;
padding: 0.4rem 0;
border-bottom: 2px solid transparent;
}
.nav-links a:hover, .nav-links a.active {
color: #00d4ff;
border-bottom-color: #00d4ff;
}
/* секции */
section {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 6rem 2rem 4rem;
position: relative;
}
.container {
max-width: 1300px;
width: 100%;
margin: 0 auto;
}
/* Hero секция */
.hero {
text-align: center;
background: radial-gradient(circle at 10% 30%, #0f172a, #03050b);
}
.hero h1 {
font-size: 3.8rem;
font-weight: 800;
margin-bottom: 1rem;
background: linear-gradient(135deg, #ffffff, #00d4ff, #2dd4bf);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
.hero p {
font-size: 1.2rem;
max-width: 700px;
margin: 1rem auto;
color: #b9c7e6;
}
.jarvis-badge {
display: inline-block;
margin-top: 2rem;
background: rgba(0, 212, 255, 0.1);
border: 1px solid #00d4ff;
border-radius: 60px;
padding: 0.75rem 1.8rem;
backdrop-filter: blur(4px);
font-weight: 600;
}
.jarvis-badge i {
margin-right: 8px;
}
/* карточки фич */
.features-grid {
display: flex;
flex-wrap: wrap;
gap: 2rem;
justify-content: center;
margin-top: 3rem;
}
.feat-card {
background: var(--glass-bg);
backdrop-filter: blur(10px);
border-radius: 2rem;
padding: 1.5rem 2rem;
width: 260px;
text-align: center;
border: 1px solid rgba(0, 212, 255, 0.3);
transition: 0.25s;
}
.feat-card i {
font-size: 2.5rem;
color: #00d4ff;
margin-bottom: 1rem;
}
.feat-card h3 {
margin-bottom: 0.6rem;
}
.feat-card:hover {
transform: translateY(-5px);
border-color: #00d4ff;
box-shadow: 0 10px 20px -8px rgba(0,212,255,0.2);
}
/* вторая секция - слайдер (Jarvis демо) */
.slider-section {
background: #0a0f1a;
}
.section-title {
text-align: center;
font-size: 2.4rem;
margin-bottom: 2.5rem;
font-weight: 600;
}
.section-title span {
color: #00d4ff;
}
.slider-container {
position: relative;
max-width: 900px;
margin: 0 auto;
overflow: hidden;
border-radius: 2rem;
background: #0e1422;
box-shadow: 0 20px 35px -10px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,212,255,0.2);
}
.slider-wrapper {
display: flex;
transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}
.slide {
min-width: 100%;
padding: 2rem 2.5rem;
background: linear-gradient(145deg, #0f172f, #090e1a);
}
.slide-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1rem;
}
.slide i {
font-size: 3.5rem;
color: #00d4ff;
}
.slide h3 {
font-size: 1.8rem;
}
.slide p {
font-size: 1rem;
max-width: 500px;
color: #b9c7e6;
}
.slide .cmd {
background: #00000055;
padding: 0.6rem 1.2rem;
border-radius: 2rem;
font-family: monospace;
font-size: 1rem;
border-left: 3px solid #00d4ff;
}
.slider-buttons {
display: flex;
justify-content: center;
gap: 1rem;
margin-top: 1.5rem;
}
.slider-btn {
background: #1a2335;
border: none;
color: white;
font-size: 1.4rem;
padding: 0.6rem 1.2rem;
border-radius: 3rem;
cursor: pointer;
transition: 0.2s;
width: 50px;
backdrop-filter: blur(4px);
}
.slider-btn:hover {
background: #00d4ff;
color: #0a0c10;
transform: scale(1.03);
}
.dots {
display: flex;
justify-content: center;
margin-top: 1.2rem;
gap: 12px;
}
.dot {
width: 10px;
height: 10px;
background: #334155;
border-radius: 10px;
cursor: pointer;
transition: 0.2s;
}
.dot.active {
background: #00d4ff;
width: 26px;
}
/* третья секция - совместимость OC */
.compat-section {
background: radial-gradient(ellipse at 80% 20%, #0b1120, #03050b);
}
.os-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2rem;
margin: 2rem 0;
}
.os-card {
background: rgba(18, 25, 45, 0.7);
backdrop-filter: blur(8px);
border-radius: 1.8rem;
padding: 1.8rem;
width: 200px;
text-align: center;
border: 1px solid rgba(0,212,255,0.25);
transition: all 0.2s;
}
.os-card i {
font-size: 3rem;
margin-bottom: 0.8rem;
color: #00d4ff;
}
.os-card h4 {
font-size: 1.4rem;
}
.os-card p {
font-size: 0.85rem;
color: #8e9bc2;
}
.footer-message {
text-align: center;
margin-top: 3rem;
font-size: 0.9rem;
border-top: 1px dashed #1e2a4a;
padding-top: 1.5rem;
}
@media (max-width: 700px) {
.nav-bar {
flex-direction: column;
padding: 0.8rem;
}
.hero h1 {
font-size: 2.2rem;
}
.slide {
padding: 1.5rem;
}
.section-title {
font-size: 1.8rem;
}
}
button {
background: none;
border: none;
}
.voice-cmd {
margin-top: 1rem;
font-size: 0.8rem;
opacity: 0.7;
}
</style>
</head>
<body>
<nav class="nav-bar">
<div class="logo">
<i class="fas fa-microchip"></i>
<span>JARVIS<span style="color:white">.AI</span></span>
</div>
<div class="nav-links">
<a href="#hero" class="nav-link active">Главная</a>
<a href="#slider" class="nav-link">Возможности</a>
<a href="#os" class="nav-link">Совместимость</a>
</div>
</nav>
<!-- Секция 1: Hero + представление Jarvis -->
<section id="hero" class="hero">
<div class="container">
<h1>J.A.R.V.I.S <br> для твоей OC</h1>
<p>Интеллектуальный ИИ-ассистент нового поколения. Глубокая интеграция с операционной системой, голосовое управление, аналитика и контроль — всё в едином интерфейсе.</p>
<div class="jarvis-badge">
<i class="fas fa-circle-nodes"></i> Активный режим · Версия 4.0
</div>
<div class="features-grid">
<div class="feat-card"><i class="fas fa-brain"></i><h3>Нейросеть на борту</h3><p>Локальный AI для команд и прогнозов</p></div>
<div class="feat-card"><i class="fas fa-microphone-alt"></i><h3>Голосовой интерфейс</h3><p>Управляй системой как Тони Старк</p></div>
<div class="feat-card"><i class="fas fa-shield-alt"></i><h3>Кибербезопасность</h3><p>Защита данных на уровне ядра</p></div>
</div>
</div>
</section>
<!-- Секция 2: Слайдер (интерактивный скрипт JS) демонстрация команд / возможностей -->
<section id="slider" class="slider-section">
<div class="container">
<div class="section-title">Jarvis <span>интерфейс</span> · голосовые модули</div>
<div class="slider-container">
<div class="slider-wrapper" id="sliderWrapper">
<div class="slide">
<div class="slide-content">
<i class="fas fa-microphone-alt"></i>
<h3>Голосовое управление</h3>
<p>Активируйте Jarvis командой "Hey Jarvis" или голосовым триггером. Ассистент распознаёт естественную речь и выполняет задачи.</p>
<div class="cmd">"Jarvis, запусти браузер"</div>
</div>
</div>
<div class="slide">
<div class="slide-content">
<i class="fas fa-chart-line"></i>
<h3>Системный мониторинг</h3>
<p>Отслеживайте загрузку CPU, RAM, температуру и активные процессы в реальном времени через виджет Jarvis.</p>
<div class="cmd">"Jarvis, статус системы"</div>
</div>
</div>
<div class="slide">
<div class="slide-content">
<i class="fas fa-robot"></i>
<h3>Автоматизация задач</h3>
<p>Создавайте макросы, управляйте файлами, ставьте напоминания и контролируйте IoT-устройства прямо из OC.</p>
<div class="cmd">"Расписание на завтра, Jarvis"</div>
</div>
</div>
<div class="slide">
<div class="slide-content">
<i class="fas fa-code-branch"></i>
<h3>Режим разработчика</h3>
<p>API для приложений, поддержка скриптов Python/JS на ходу, интеграция с терминалом ОС.</p>
<div class="cmd">"Jarvis, выполнить скрипт update.py"</div>
</div>
</div>
</div>
<div class="slider-buttons">
<button class="slider-btn" id="prevSlide"><i class="fas fa-chevron-left"></i></button>
<button class="slider-btn" id="nextSlide"><i class="fas fa-chevron-right"></i></button>
</div>
<div class="dots" id="dotsContainer"></div>
<div class="voice-cmd"><i class="fas fa-head-side-vr"></i> Интерактивный слайдер — демонстрация ключевых фич Jarvis AI</div>
</div>
</div>
</section>
<!-- Секция 3: Совместимость с OC -->
<section id="os" class="compat-section">
<div class="container">
<div class="section-title">Работает на <span>любой OC</span></div>
<div class="os-grid">
<div class="os-card"><i class="fab fa-windows"></i><h4>Windows 10/11</h4><p>Нативная интеграция с PowerShell и Win32</p></div>
<div class="os-card"><i class="fab fa-apple"></i><h4>macOS</h4><p>Экосистема Apple, Siri Shortcuts + Jarvis Core</p></div>
<div class="os-card"><i class="fab fa-linux"></i><h4>Linux</h4><p>Поддержка всех дистрибутивов, ядро 5.0+</p></div>
<div class="os-card"><i class="fas fa-mobile-alt"></i><h4>Android / iOS</h4><p>Удалённый доступ через приложение</p></div>
</div>
<div style="text-align:center; margin-top:1rem;">
<p style="font-size:1.1rem"><i class="fas fa-plug"></i> Глубокая интеграция через Jarvis Bridge — безопасное соединение с ядром ОС</p>
</div>
<div class="footer-message">
<i class="far fa-copyright"></i> Прототип AI - Jarvis для персональных компьютеров. Интерфейс ассистента нового поколения.
</div>
</div>
</section>
<script>
// ---- JAVASCRIPT: Слайдер с полной навигацией, автопрокрутка (опционально) и dots ----
(function() {
const sliderWrapper = document.getElementById('sliderWrapper');
const slides = document.querySelectorAll('.slide');
const prevBtn = document.getElementById('prevSlide');
const nextBtn = document.getElementById('nextSlide');
const dotsContainer = document.getElementById('dotsContainer');
let currentIndex = 0;
const totalSlides = slides.length;
let autoInterval = null;
const AUTO_DELAY = 6000; // 6 секунд автоматическая смена (как современный UI)
// Создание точек (dots)
function createDots() {
dotsContainer.innerHTML = '';
for (let i = 0; i < totalSlides; i++) {
const dot = document.createElement('div');
dot.classList.add('dot');
if (i === currentIndex) dot.classList.add('active');
dot.addEventListener('click', () => {
goToSlide(i);
resetAutoPlay();
});
dotsContainer.appendChild(dot);
}
}
// Обновление активной точки
function updateDots() {
const dots = document.querySelectorAll('.dot');
dots.forEach((dot, idx) => {
if (idx === currentIndex) dot.classList.add('active');
else dot.classList.remove('active');
});
}
// Плавный переход к слайду
function goToSlide(index) {
if (index < 0) index = 0;
if (index >= totalSlides) index = totalSlides - 1;
currentIndex = index;
const offset = -currentIndex * 100;
sliderWrapper.style.transform = `translateX(${offset}%)`;
updateDots();
}
function nextSlide() {
if (currentIndex + 1 < totalSlides) {
goToSlide(currentIndex + 1);
} else {
goToSlide(0); // цикл
}
}
function prevSlide() {
if (currentIndex - 1 >= 0) {
goToSlide(currentIndex - 1);
} else {
goToSlide(totalSlides - 1);
}
}
// Автовоспроизведение (можно добавить, но не навязчиво)
function startAutoPlay() {
if (autoInterval) clearInterval(autoInterval);
autoInterval = setInterval(() => {
nextSlide();
}, AUTO_DELAY);
}
function resetAutoPlay() {
if (autoInterval) {
clearInterval(autoInterval);
startAutoPlay();
}
}
function stopAutoPlay() {
if (autoInterval) {
clearInterval(autoInterval);
autoInterval = null;
}
}
// Инициализация событий и автоплея
function initSlider() {
createDots();
goToSlide(0);
// Добавляем обработчики кнопок
if (prevBtn) prevBtn.addEventListener('click', () => { prevSlide(); resetAutoPlay(); });
if (nextBtn) nextBtn.addEventListener('click', () => { nextSlide(); resetAutoPlay(); });
// Автоплей НО только если пользователь не наводит мышь на слайдер — сделаем деликатный автоплей с паузой при ховере
startAutoPlay();
const container = document.querySelector('.slider-container');
if (container) {
container.addEventListener('mouseenter', () => {
stopAutoPlay();
});
container.addEventListener('mouseleave', () => {
startAutoPlay();
});
}
// Также остановка автоплея при касании на мобильных (touch)
container.addEventListener('touchstart', () => {
stopAutoPlay();
setTimeout(() => {
startAutoPlay();
}, 8000);
});
}
// Запуск слайдера после загрузки DOM
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initSlider);
} else {
initSlider();
}
})();
// ---- Активная навигация при скролле, подсветка ссылок ----
const sections = document.querySelectorAll('section');
const navLinks = document.querySelectorAll('.nav-link');
function setActiveLink() {
let current = '';
const scrollPos = window.scrollY + 150; // смещение для активации
sections.forEach(section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (scrollPos >= sectionTop && scrollPos < sectionTop + sectionHeight) {
current = section.getAttribute('id');
}
});
navLinks.forEach(link => {
link.c