ai-life-story/index.html

118 lines
9.8 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Моя Жизнь в ИИ — Видео о жизни с помощью искусственного интеллекта</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAF8WlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDI0LTAxLTAxVDAwOjAwOjAwKzAwOjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyNC0wMS0wMVQwMDowMDowMCswMDowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyNC0wMS0wMVQwMDowMDowMCswMDowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowMDAwMDAwMC0wMDAwLTAwMDAtMDAwMC0wMDAwMDAwMDAwMDAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDAwMDAwMDAtMDAwMC0wMDAwLTAwMDAtMDAwMDAwMDAwMDAwIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6MDAwMDAwMDAtMDAwMC0wMDAwLTAwMDAtMDAwMDAwMDAwMDAwIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDowMDAwMDAwMC0wMDAwLTAwMDAtMDAwMC0wMDAwMDAwMDAwMDAiIHN0RXZ0OndoZW49IjIwMjQtMDEtMDFUMDA6MDA6MDArMDA6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4=">
<style>
:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7;--purple:#8B5CF6;--purple-dark:#6D28D9}
*{box-sizing:border-box;margin:0;padding:0}
body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:var(--white)}
.container{max-width:1140px;margin:0 auto;padding:80px 24px}
.hero{background:linear-gradient(135deg,var(--ink) 0%,var(--purple-dark) 100%);color:var(--white);padding:100px 24px}
.hero h1{font-size:56px;font-weight:800;line-height:1.05;margin-bottom:24px}
.hero p{font-size:20px;color:#9aa3b2;max-width:600px;margin-bottom:32px}
.btn{display:inline-block;background:var(--cyan);color:var(--ink);padding:14px 28px;border-radius:8px;font-weight:700;text-decoration:none;transition:transform 0.2s}
.btn:hover{background:#1be5ff;transform:scale(1.05)}
.section{padding:80px 24px}
.section h2{font-size:36px;font-weight:700;margin-bottom:24px;text-align:center}
.section p.lead{font-size:20px;color:var(--gray-500);text-align:center;max-width:700px;margin:0 auto 48px}
.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:32px}
.video-card{background:var(--gray-100);border-radius:16px;overflow:hidden;transition:transform 0.2s}
.video-card:hover{transform:translateY(-8px)}
.video-thumbnail{width:100%;height:200px;background:linear-gradient(135deg,var(--purple) 0%,var(--cyan) 100%);display:flex;align-items:center;justify-content:center;font-size:48px}
.video-card h3{font-size:22px;font-weight:700;padding:20px 20px 10px}
.video-card p{padding:0 20px 20px;color:var(--gray-500)}
.about-card{background:var(--cyan-50);border-radius:16px;padding:40px;max-width:800px;margin:0 auto}
.about-card h3{font-size:22px;font-weight:700;margin-bottom:16px;color:var(--purple-dark)}
.about-card p{margin-bottom:16px;color:var(--gray-500)}
.contact-links{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.contact-links a{background:var(--ink);color:var(--white);padding:12px 24px;border-radius:8px;text-decoration:none;font-weight:600}
.contact-links a:hover{background:var(--purple)}
footer{background:var(--ink);color:var(--gray-500);text-align:center;padding:40px 24px}
@media (max-width:640px){.hero h1{font-size:36px}.section h2{font-size:28px}.container{padding:48px 20px}}
</style>
</head>
<body>
<section class="hero">
<div class="container">
<h1>🎬 Моя Жизнь в ИИ</h1>
<p>Создаю видео-ролики о жизни с помощью искусственного интеллекта. Мои истории оживают благодаря технологиям будущего.</p>
<a class="btn" href="#first-video">Моё первое видео</a>
</div>
</section>
<section id="first-video" class="section">
<div class="container">
<h2>Моё первое видео</h2>
<p class="lead">История о детстве, семье и тёплых воспоминаниях</p>
<div class="about-card" style="background:var(--white);border:2px solid var(--cyan-50)">
<h3>📜 Сценарий: «Детство в деревне»</h3>
<p style="line-height:1.8;color:var(--ink)">
Давай начнём с детства.<br><br>
Я выросла в полной семье: мама, папа, я и мой младший братишка. До моих 11 лет нас было четверо. Потом в нашей семье появился ещё один малыш — младший братишка. Когда он родился, мы все очень радовались его появлению.<br><br>
Я была самой старшей в семье и единственной дочкой. Казалось бы, должна была быть любимицей и избалованной девочкой, но почему-то меня особо не баловали. Наверное, с самого детства от меня ждали самостоятельности и ответственности, потому что я была старшей.<br><br>
А вот младших братьев мы всегда старались окружить заботой и любовью. Когда родился самый младший, мы все его очень еркелетіп, баловали и старались дать ему максимум внимания.<br><br>
Мы росли в деревне. Детство у меня было простым, но по-своему очень тёплым и настоящим. Большая семья, родной дом, родители, братья — именно из этих моментов и складываются мои самые первые воспоминания.
</p>
<div style="margin-top:24px;padding:16px;background:var(--cyan-50);border-radius:8px">
<strong>🎬 Как создать это видео:</strong>
<ol style="margin-top:8px;margin-left:20px;line-height:1.8">
<li>Зайди на <strong>heygen.com</strong></li>
<li>Выбери аватара (девушка)</li>
<li>Разбей текст на 3-4 части по 30 секунд</li>
<li>Вставь текст, выбери русский голос</li>
<li>Скачай видео и соедини в CapCut</li>
</ol>
</div>
</div>
</div>
</section>
<section id="videos" class="section" style="background:var(--gray-100)">
<div class="container">
<h2>Будущие видео</h2>
<p class="lead">Идеи для следующих роликов</p>
<div class="video-grid">
<div class="video-card">
<div class="video-thumbnail">🏠</div>
<h3>Родной дом</h3>
<p>Визуализация деревенского дома из детства</p>
</div>
<div class="video-card">
<div class="video-thumbnail">👨‍👩‍👧‍👦</div>
<h3>Семейное фото</h3>
<p>Воспоминания о семейных моментах</p>
</div>
<div class="video-card">
<div class="video-thumbnail">🌾</div>
<h3>Деревенское лето</h3>
<p>Игры с братьями на улице</p>
</div>
</div>
</div>
</section>
<section class="section" style="background:var(--gray-100)">
<div class="container">
<h2>Обо мне</h2>
<div class="about-card">
<h3>👋 Привет! Я создаю видео-истории с помощью ИИ</h3>
<p>Использую современные нейросети для визуализации своих идей и эмоций. Каждая работа — это эксперимент на стыке технологий и творчества.</p>
<p>Моя цель — показать, что искусственный интеллект может быть инструментом для создания искреннего и личного контента.</p>
<p><strong>Инструменты:</strong> HeyGen, Runway, Pika Labs, CapCut</p>
<p style="margin-top:24px;padding:16px;background:var(--cyan-50);border-radius:8px;">🚀 <strong>Готовлю первое видео о детстве!</strong><br>Скоро на YouTube-канале «Моя Жизнь в ИИ».</p>
</div>
<div class="contact-links">
<a href="#" class="btn" style="margin-top:16px">YouTube — скоро открытие</a>
</div>
</div>
</section>
<footer>
<p>© 2026 AI Life Story. Создано с помощью ИИ и любви к искусству.</p>
</footer>
</body>
</html>