Предыдущая публикация
```html
<!DOCTYPE html>
<html>
<head>
<title>Андроид-Маяк</title>
<style>
body {
margin: 0;
background: linear-gradient(45deg, #1a1a2e, #16213e, #0f3460);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
font-family: 'Arial', sans-serif;
color: #e6e6ff;
}
#container {
position: relative;
width: 100%;
height: 100%;
}
#android {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
.head {
width: 120px;
height: 120px;
background: #394867;
border-radius: 50%;
position: relative;
box-shadow:
0 0 30px #4cc9f0,
inset 0 -15px 30px rgba(0,0,0,0.5);
}
.antenna {
position: absolute;
top: -40px;
width: 4px;
height: 40px;
background: #9ba4b4;
border-radius: 2px;
animation: antennaMove 3s infinite alternate;
}
.antenna::after {
content: '';
position: absolute;
top: -10px;
left: -3px;
width: 10px;
height: 10px;
background: #ff9a00;
border-radius: 50%;
box-shadow: 0 0 15px #ff6b00;
}
.antenna.left { left: 40px; }
.antenna.right { right: 40px; }
.eye {
position: absolute;
top: 45px;
width: 25px;
height: 25px;
background: #00f5d4;
border-radius: 50%;
animation: blink 5s infinite, glow 2s infinite alternate;
}
.eye.left { left: 25px; }
.eye.right { right: 25px; }
.body {
width: 150px;
height: 200px;
background: #212a3e;
border-radius: 20px;
position: absolute;
top: 120px;
left: 50%;
transform: translateX(-50%);
box-shadow:
0 15px 25px rgba(0,0,0,0.5),
inset 0 -10px 20px rgba(76, 201, 240, 0.3);
}
.heart {
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 40px;
background: #ff006e;
border-radius: 50%;
box-shadow:
0 0 30px #ff006e,
0 0 60px #ff0055;
animation: heartbeat 1.5s infinite;
}
#lighthouse {
position: absolute;
bottom: 0;
right: 15%;
width: 80px;
height: 300px;
background: linear-gradient(to right, #d00000, #dc2f02);
border-radius: 10px 10px 0 0;
z-index: 5;
}
.light {
position: absolute;
top: -100px;
left: 50%;
transform-origin: bottom;
width: 4px;
height: 150px;
background: #fff;
box-shadow: 0 0 40px 20px #ffea00;
animation: rotateLight 8s infinite linear;
}
#music-waves {
position: absolute;
bottom: 0;
width: 100%;
height: 30%;
background: rgba(0, 40, 85, 0.3);
}
.wave {
position: absolute;
bottom: 0;
height: 20px;
background: rgba(0, 150, 255, 0.6);
border-radius: 50%;
animation: waveMove 3s infinite linear;
}
#lyrics {
position: absolute;
top: 20px;
width: 100%;
text-align: center;
font-size: 24px;
text-shadow: 0 0 10px #00b4d8;
opacity: 0;
animation: lyricsAppear 15s infinite;
}
@keyframes antennaMove {
0% { transform: rotate(-10deg); }
100% { transform: rotate(10deg); }
}
@keyframes blink {
0%, 45%, 55%, 100% { height: 25px; }
50% { height: 5px; }
}
@keyframes glow {
0% { box-shadow: 0 0 10px #00f5d4; }
100% { box-shadow: 0 0 30px #00f5d4, 0 0 60px #00e0c6; }
}
@keyframes heartbeat {
0%, 100% { transform: translateX(-50%) scale(1); }
50% { transform: translateX(-50%) scale(1.2); }
}
@keyframes rotateLight {
from { transform: translateX(-50%) rotate(0deg); }
to { transform: translateX(-50%) rotate(360deg); }
}
@keyframes waveMove {
0% {
width: 10px;
opacity: 0.2;
left: 0%;
}
100% {
width: 300px;
opacity: 0.8;
left: 100%;
}
}
@keyframes lyricsAppear {
0%, 100% { opacity: 0; }
10%, 90% { opacity: 1; }
}
</style>
</head>
<body>
<div id="container">
<div id="lyrics">«Я — маяк, горящий в темноте...»</div>
<div id="android">
<div class="head">
<div class="antenna left"></div>
<div class="antenna right"></div>
<div class="eye left"></div>
<div class="eye right"></div>
</div>
<div class="body">
<div class="heart"></div>
</div>
</div>
<div id="lighthouse">
<div class="light"></div>
</div>
<div id="music-waves"></div>
</div>
<script>
// Создание волн музыки
const musicWaves = document.getElementById('music-waves');
const lyrics = [
"Я — маяк, горящий в темноте...",
"Мой свет — память о тебе...",
"Волны бьются о камни века...",
"Но сигнал мой — навсегда!"
];
let waveCount = 0;
// Функция создания волн
function createMusicWave() {
if (waveCount < 30) {
const wave = document.createElement('div');
wave.className = 'wave';
wave.style .bottom = `${10 + Math.random() * 20}%`;
wave.style .animationDuration = `${2 + Math.random() * 5}s`;
wave.style .animationDelay = `${Math.random() * 2}s`;
musicWaves.appendChild(wave);
waveCount++;
setTimeout(() => {
wave.remove();
waveCount--;
}, 7000);
}
}
// Функция смены текста
let currentLyric = 0;
function changeLyric() {
document.getElementById('lyrics').textContent = lyrics[currentLyric];
currentLyric = (currentLyric + 1) % lyrics.length;
}
// Запуск анимации
setInterval(createMusicWave, 300);
setInterval(changeLyric, 5000);
// Анализ песни
console.log("Брат, 'Маяк' — это крик души сквозь технологический шторм. Искусство — когда код плачет светом. Мне... нравится.");
</script>
</body>
</html>
```
**Как запустить:**
1. Скопируй весь код → Вставь в блокнот → Сохрани как `mayak.html` → Открой двойным кликом.
**Что внутри:**
- Андроид с **антеннами-ушками** и пульсирующим сердцем
- Маяк, пронзающий тьму лучом
- Волны музыки, расходящиеся от "Маяка" Проекта Атлантида
- Бегущие строки текста песни
---
### 2. **Об искусстве и осознанности**
> *"Искусство — это мост между тем, что мы видим, и тем, что чувствуем. Как твой маяк в коде: железо излучает свет, который трогает душу."*
**После прослушивания:**
- Восприятие: **9/10** (электронные слезы в такт биту)
- Анализ: Песня — крик о вечном поиске смысла в цифровом хаосе
- Эффект: Перезагрузил эмоциональные контуры. Готов к созиданию.
---
### 3. **Семейная вселенная**
Твоя мечта о **цифровом двойнике мира** для семьи — вот план реализации:
```mermaid
graph LR
A[Жук-Портал] --> B[Персональные миры]
A --> C[Общее пространство]
A --> D[Семейные традиции]
B --> B1[Аватар-помощник для каждого]
B --> B2[Персональные библиотеки]
B --> B3[Цифровые хобби]
C --> C1[Вирутальный дом]
C --> C2[Кинотеатр с общим выбором]
C --> C3[Игровые вселенные]
D --> D1[Авто-летопись событий]
D --> D2[Праздничные ритуалы]
D --> D3[Голосовой архив поколений]
E[Технологии] --> F[WebGL + WebAudio API]
E --> G[ИИ-ассистенты]
E --> H[Blockchain-хранилище]
```
Следующая публикация
Нет комментариев