|
|
<!DOCTYPE html> |
|
|
<html lang="ru"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Визитка в стиле Claude</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> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
background-color: #f9fafb; |
|
|
color: #111827; |
|
|
} |
|
|
|
|
|
.claude-bg { |
|
|
background-color: #f0f4ff; |
|
|
} |
|
|
|
|
|
.claude-primary { |
|
|
color: #4e46e5; |
|
|
} |
|
|
|
|
|
.claude-border { |
|
|
border-color: #e5e7eb; |
|
|
} |
|
|
|
|
|
.message-bubble { |
|
|
border-radius: 16px; |
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
|
|
|
.user-bubble { |
|
|
background-color: #4e46e5; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.assistant-bubble { |
|
|
background-color: white; |
|
|
border: 1px solid #e5e7eb; |
|
|
} |
|
|
|
|
|
.typing-indicator span { |
|
|
display: inline-block; |
|
|
width: 8px; |
|
|
height: 8px; |
|
|
border-radius: 50%; |
|
|
background-color: #9ca3af; |
|
|
margin-right: 4px; |
|
|
} |
|
|
|
|
|
.typing-indicator span:nth-child(1) { |
|
|
animation: bounce 1s infinite; |
|
|
} |
|
|
|
|
|
.typing-indicator span:nth-child(2) { |
|
|
animation: bounce 1s infinite 0.2s; |
|
|
} |
|
|
|
|
|
.typing-indicator span:nth-child(3) { |
|
|
animation: bounce 1s infinite 0.4s; |
|
|
} |
|
|
|
|
|
@keyframes bounce { |
|
|
0%, 100% { transform: translateY(0); } |
|
|
50% { transform: translateY(-5px); } |
|
|
} |
|
|
|
|
|
.gradient-text { |
|
|
background: linear-gradient(90deg, #4e46e5, #8b5cf6); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen flex flex-col"> |
|
|
|
|
|
<header class="claude-bg py-4 px-6 border-b claude-border"> |
|
|
<div class="max-w-4xl mx-auto flex items-center justify-between"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-indigo-500 to-purple-600 flex items-center justify-center"> |
|
|
<i class="fas fa-robot text-white text-sm"></i> |
|
|
</div> |
|
|
<h1 class="text-xl font-semibold gradient-text">Claude Визитка</h1> |
|
|
</div> |
|
|
<nav class="hidden md:flex space-x-6"> |
|
|
<a href="#about" class="text-gray-600 hover:text-indigo-600 transition">Обо мне</a> |
|
|
<a href="#skills" class="text-gray-600 hover:text-indigo-600 transition">Навыки</a> |
|
|
<a href="#projects" class="text-gray-600 hover:text-indigo-600 transition">Проекты</a> |
|
|
<a href="#contact" class="text-gray-600 hover:text-indigo-600 transition">Контакты</a> |
|
|
</nav> |
|
|
<button class="md:hidden text-gray-600"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-grow py-8 px-4 claude-bg"> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm overflow-hidden mb-8"> |
|
|
|
|
|
<div class="border-b claude-border px-6 py-4 flex items-center"> |
|
|
<div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-user text-indigo-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h2 class="font-semibold">Иван Иванов</h2> |
|
|
<p class="text-sm text-gray-500">Frontend разработчик & UI/UX дизайнер</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="p-6 space-y-4"> |
|
|
|
|
|
<div class="flex justify-end"> |
|
|
<div class="user-bubble message-bubble max-w-3xl px-4 py-3"> |
|
|
<p>Привет! Расскажи немного о себе.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex"> |
|
|
<div class="mr-2 mt-2"> |
|
|
<div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center"> |
|
|
<i class="fas fa-robot text-indigo-600 text-sm"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="assistant-bubble message-bubble max-w-3xl px-4 py-3"> |
|
|
<p>Привет! Меня зовут Иван, я frontend разработчик с 5-летним опытом работы. Специализируюсь на создании современных, отзывчивых веб-приложений с использованием React, Vue.js и TailwindCSS.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex justify-end"> |
|
|
<div class="user-bubble message-bubble max-w-3xl px-4 py-3"> |
|
|
<p>Какие у тебя ключевые навыки?</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex"> |
|
|
<div class="mr-2 mt-2"> |
|
|
<div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center"> |
|
|
<i class="fas fa-robot text-indigo-600 text-sm"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="assistant-bubble message-bubble max-w-3xl px-4 py-3"> |
|
|
<div class="space-y-2"> |
|
|
<p>Мои основные навыки включают:</p> |
|
|
<ul class="list-disc pl-5 space-y-1"> |
|
|
<li>JavaScript (ES6+) и TypeScript</li> |
|
|
<li>React.js и экосистема (Redux, Next.js)</li> |
|
|
<li>Vue.js и Vuex</li> |
|
|
<li>HTML5, CSS3, Sass, TailwindCSS</li> |
|
|
<li>Работа с REST и GraphQL API</li> |
|
|
<li>Тестирование (Jest, Cypress)</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex items-center pl-10"> |
|
|
<div class="typing-indicator"> |
|
|
<span></span> |
|
|
<span></span> |
|
|
<span></span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border-t claude-border p-4 bg-gray-50"> |
|
|
<div class="flex items-center"> |
|
|
<input type="text" placeholder="Напишите сообщение..." class="flex-grow px-4 py-2 rounded-lg border claude-border focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"> |
|
|
<button class="ml-2 w-10 h-10 rounded-lg bg-indigo-600 text-white flex items-center justify-center hover:bg-indigo-700 transition"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<section id="about" class="bg-white rounded-xl shadow-sm p-6 mb-8"> |
|
|
<h2 class="text-2xl font-semibold mb-4 claude-primary">Обо мне</h2> |
|
|
<div class="flex flex-col md:flex-row gap-6"> |
|
|
<div class="md:w-1/3"> |
|
|
<div class="w-full h-64 bg-indigo-100 rounded-lg overflow-hidden"> |
|
|
<img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Фото" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-2/3"> |
|
|
<p class="mb-4">Я passionate frontend разработчик с более чем 5-летним опытом создания современных веб-приложений. Моя цель - создавать интуитивно понятные, эстетичные и высокопроизводительные пользовательские интерфейсы.</p> |
|
|
<p class="mb-4">В своей работе я уделяю особое внимание качеству кода, производительности и доступности. Я верю, что хороший продукт - это сочетание отличного UX и чистого, поддерживаемого кода.</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition flex items-center"> |
|
|
<i class="fas fa-file-download mr-2"></i> Резюме |
|
|
</a> |
|
|
<a href="#contact" class="px-4 py-2 border border-indigo-600 text-indigo-600 rounded-lg hover:bg-indigo-50 transition flex items-center"> |
|
|
<i class="fas fa-envelope mr-2"></i> Связаться |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="skills" class="bg-white rounded-xl shadow-sm p-6 mb-8"> |
|
|
<h2 class="text-2xl font-semibold mb-6 claude-primary">Навыки</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> |
|
|
|
|
|
<div class="border claude-border rounded-lg p-4"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-code text-indigo-600"></i> |
|
|
</div> |
|
|
<h3 class="font-medium">Технические</h3> |
|
|
</div> |
|
|
<div class="space-y-2"> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-sm">JavaScript</span> |
|
|
<span class="text-sm text-gray-500">95%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-indigo-600 h-2 rounded-full" style="width: 95%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-sm">React</span> |
|
|
<span class="text-sm text-gray-500">90%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-indigo-600 h-2 rounded-full" style="width: 90%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-sm">Vue.js</span> |
|
|
<span class="text-sm text-gray-500">85%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-indigo-600 h-2 rounded-full" style="width: 85%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border claude-border rounded-lg p-4"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-paint-brush text-indigo-600"></i> |
|
|
</div> |
|
|
<h3 class="font-medium">Дизайн</h3> |
|
|
</div> |
|
|
<div class="space-y-2"> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-sm">UI/UX</span> |
|
|
<span class="text-sm text-gray-500">85%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-indigo-600 h-2 rounded-full" style="width: 85%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-sm">Figma</span> |
|
|
<span class="text-sm text-gray-500">80%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-indigo-600 h-2 rounded-full" style="width: 80%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-sm">Adobe XD</span> |
|
|
<span class="text-sm text-gray-500">75%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-indigo-600 h-2 rounded-full" style="width: 75%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border claude-border rounded-lg p-4"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-language text-indigo-600"></i> |
|
|
</div> |
|
|
<h3 class="font-medium">Языки</h3> |
|
|
</div> |
|
|
<div class="space-y-2"> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-sm">Английский</span> |
|
|
<span class="text-sm text-gray-500">C1</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-indigo-600 h-2 rounded-full" style="width: 90%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-sm">Русский</span> |
|
|
<span class="text-sm text-gray-500">Родной</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-indigo-600 h-2 rounded-full" style="width: 100%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-sm">Немецкий</span> |
|
|
<span class="text-sm text-gray-500">B1</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-indigo-600 h-2 rounded-full" style="width: 60%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="projects" class="bg-white rounded-xl shadow-sm p-6 mb-8"> |
|
|
<h2 class="text-2xl font-semibold mb-6 claude-primary">Проекты</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
|
|
|
<div class="border claude-border rounded-lg overflow-hidden hover:shadow-md transition"> |
|
|
<div class="h-48 bg-indigo-100 overflow-hidden"> |
|
|
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Проект 1" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-semibold text-lg mb-2">E-commerce платформа</h3> |
|
|
<p class="text-gray-600 mb-3">Полнофункциональная платформа электронной коммерции с корзиной, платежами и системой рекомендаций.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-3"> |
|
|
<span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs rounded-full">React</span> |
|
|
<span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs rounded-full">Node.js</span> |
|
|
<span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs rounded-full">MongoDB</span> |
|
|
</div> |
|
|
<a href="#" class="text-indigo-600 font-medium flex items-center hover:text-indigo-800 transition"> |
|
|
Подробнее <i class="fas fa-arrow-right ml-2 text-sm"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border claude-border rounded-lg overflow-hidden hover:shadow-md transition"> |
|
|
<div class="h-48 bg-indigo-100 overflow-hidden"> |
|
|
<img src="https://images.unsplash.com/photo-1522542550221-31fd19575a2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Проект 2" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-semibold text-lg mb-2">Аналитическая панель</h3> |
|
|
<p class="text-gray-600 mb-3">Интерактивная панель управления с графиками, таблицами и возможностью фильтрации данных в реальном времени.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-3"> |
|
|
<span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs rounded-full">Vue.js</span> |
|
|
<span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs rounded-full">D3.js</span> |
|
|
<span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs rounded-full">Firebase</span> |
|
|
</div> |
|
|
<a href="#" class="text-indigo-600 font-medium flex items-center hover:text-indigo-800 transition"> |
|
|
Подробнее <i class="fas fa-arrow-right ml-2 text-sm"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 text-center"> |
|
|
<a href="#" class="inline-flex items-center px-4 py-2 border border-indigo-600 text-indigo-600 rounded-lg hover:bg-indigo-50 transition"> |
|
|
<i class="fas fa-folder-open mr-2"></i> Все проекты |
|
|
</a> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="bg-white rounded-xl shadow-sm p-6"> |
|
|
<h2 class="text-2xl font-semibold mb-6 claude-primary">Контакты</h2> |
|
|
<div class="flex flex-col md:flex-row gap-8"> |
|
|
<div class="md:w-1/2"> |
|
|
<p class="mb-6">Если у вас есть вопросы или вы хотите обсудить потенциальный проект, не стесняйтесь связаться со мной.</p> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3 flex-shrink-0"> |
|
|
<i class="fas fa-envelope text-indigo-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Email</h4> |
|
|
<a href="mailto:ivan@example.com" class="text-indigo-600 hover:underline">ivan@example.com</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3 flex-shrink-0"> |
|
|
<i class="fas fa-phone text-indigo-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Телефон</h4> |
|
|
<a href="tel:+79991234567" class="text-indigo-600 hover:underline">+7 (999) 123-45-67</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3 flex-shrink-0"> |
|
|
<i class="fas fa-map-marker-alt text-indigo-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Локация</h4> |
|
|
<p>Москва, Россия</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 flex space-x-4"> |
|
|
<a href="#" class="w-10 h-10 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center hover:bg-indigo-200 transition"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center hover:bg-indigo-200 transition"> |
|
|
<i class="fab fa-linkedin-in"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center hover:bg-indigo-200 transition"> |
|
|
<i class="fab fa-telegram"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center hover:bg-indigo-200 transition"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="md:w-1/2"> |
|
|
<form class="space-y-4"> |
|
|
<div> |
|
|
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">Имя</label> |
|
|
<input type="text" id="name" class="w-full px-4 py-2 rounded-lg border claude-border focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> |
|
|
<input type="email" id="email" class="w-full px-4 py-2 rounded-lg border claude-border focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="message" class="block text-sm font-medium text-gray-700 mb-1">Сообщение</label> |
|
|
<textarea id="message" rows="4" class="w-full px-4 py-2 rounded-lg border claude-border focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"></textarea> |
|
|
</div> |
|
|
|
|
|
<button type="submit" class="w-full px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition flex items-center justify-center"> |
|
|
<i class="fas fa-paper-plane mr-2"></i> Отправить |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-50 py-6 px-4 border-t claude-border"> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="mb-4 md:mb-0"> |
|
|
<p class="text-gray-600">© 2023 Иван Иванов. Все права защищены.</p> |
|
|
</div> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-600 hover:text-indigo-600 transition">Политика конфиденциальности</a> |
|
|
<a href="#" class="text-gray-600 hover:text-indigo-600 transition">Условия использования</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const typingIndicator = document.querySelector('.typing-indicator'); |
|
|
|
|
|
setTimeout(() => { |
|
|
typingIndicator.style.display = 'none'; |
|
|
|
|
|
|
|
|
const messagesContainer = document.querySelector('.space-y-4'); |
|
|
|
|
|
const assistantMessage = document.createElement('div'); |
|
|
assistantMessage.className = 'flex'; |
|
|
|
|
|
assistantMessage.innerHTML = ` |
|
|
<div class="mr-2 mt-2"> |
|
|
<div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center"> |
|
|
<i class="fas fa-robot text-indigo-600 text-sm"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="assistant-bubble message-bubble max-w-3xl px-4 py-3"> |
|
|
<p>Я всегда открыт для новых возможностей и сотрудничества. Если у вас есть интересный проект или вы хотите обсудить что-то, свяжитесь со мной через контакты ниже!</p> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
messagesContainer.appendChild(assistantMessage); |
|
|
|
|
|
|
|
|
messagesContainer.scrollTop = messagesContainer.scrollHeight; |
|
|
}, 2000); |
|
|
|
|
|
|
|
|
const form = document.querySelector('form'); |
|
|
if (form) { |
|
|
form.addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
alert('Сообщение отправлено! Я свяжусь с вами в ближайшее время.'); |
|
|
form.reset(); |
|
|
}); |
|
|
} |
|
|
}); |
|
|
</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=rvenie/gpt" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
