|
|
<!DOCTYPE html> |
|
|
<html lang="ru"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>NovaVerse | Галактика Возможностей</title> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
:root { |
|
|
--primary: #8a2be2; |
|
|
--primary-dark: #5f1a9b; |
|
|
--primary-light: #b36bff; |
|
|
--secondary: #1e1e2d; |
|
|
--secondary-light: #2a2a3a; |
|
|
--accent: #ff00ff; |
|
|
--text: #e0e0e0; |
|
|
--text-dark: #b0b0b0; |
|
|
--glass-bg: rgba(30, 30, 45, 0.7); |
|
|
--glass-border: rgba(255, 255, 255, 0.1); |
|
|
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
|
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|
|
} |
|
|
|
|
|
body { |
|
|
background: linear-gradient(135deg, var(--secondary), #0a0a1a); |
|
|
color: var(--text); |
|
|
min-height: 100vh; |
|
|
overflow-x: hidden; |
|
|
background-image: |
|
|
radial-gradient(circle at 20% 30%, var(--primary-dark) 0%, transparent 20%), |
|
|
radial-gradient(circle at 80% 70%, var(--accent) 0%, transparent 25%); |
|
|
} |
|
|
|
|
|
|
|
|
.glass { |
|
|
background: var(--glass-bg); |
|
|
backdrop-filter: blur(12px); |
|
|
-webkit-backdrop-filter: blur(12px); |
|
|
border: 1px solid var(--glass-border); |
|
|
box-shadow: var(--glass-shadow); |
|
|
border-radius: 15px; |
|
|
} |
|
|
|
|
|
|
|
|
.container { |
|
|
max-width: 1400px; |
|
|
margin: 0 auto; |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
|
|
|
header { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
padding: 20px 0; |
|
|
margin-bottom: 30px; |
|
|
} |
|
|
|
|
|
.logo { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
font-size: 1.8rem; |
|
|
font-weight: 700; |
|
|
color: var(--text); |
|
|
text-decoration: none; |
|
|
} |
|
|
|
|
|
.logo-icon { |
|
|
color: var(--primary-light); |
|
|
font-size: 2.2rem; |
|
|
} |
|
|
|
|
|
nav ul { |
|
|
display: flex; |
|
|
list-style: none; |
|
|
gap: 25px; |
|
|
} |
|
|
|
|
|
nav ul li a { |
|
|
color: var(--text); |
|
|
text-decoration: none; |
|
|
font-weight: 500; |
|
|
font-size: 1.1rem; |
|
|
transition: all 0.3s ease; |
|
|
position: relative; |
|
|
padding: 5px 10px; |
|
|
border-radius: 8px; |
|
|
} |
|
|
|
|
|
nav ul li a:hover { |
|
|
color: var(--primary-light); |
|
|
background: rgba(138, 43, 226, 0.1); |
|
|
} |
|
|
|
|
|
nav ul li a::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: -3px; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
width: 0; |
|
|
height: 2px; |
|
|
background: var(--primary-light); |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
nav ul li a:hover::after { |
|
|
width: 80%; |
|
|
} |
|
|
|
|
|
.auth-buttons { |
|
|
display: flex; |
|
|
gap: 15px; |
|
|
} |
|
|
|
|
|
.btn { |
|
|
padding: 8px 20px; |
|
|
border-radius: 8px; |
|
|
font-weight: 600; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
border: none; |
|
|
font-size: 1rem; |
|
|
} |
|
|
|
|
|
.btn-primary { |
|
|
background: var(--primary); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.btn-primary:hover { |
|
|
background: var(--primary-dark); |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 5px 15px rgba(138, 43, 226, 0.4); |
|
|
} |
|
|
|
|
|
.btn-outline { |
|
|
background: transparent; |
|
|
border: 1px solid var(--primary); |
|
|
color: var(--primary); |
|
|
} |
|
|
|
|
|
.btn-outline:hover { |
|
|
background: rgba(138, 43, 226, 0.1); |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
|
|
|
.hero { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
text-align: center; |
|
|
padding: 60px 20px; |
|
|
margin-bottom: 50px; |
|
|
} |
|
|
|
|
|
.hero h1 { |
|
|
font-size: 3.5rem; |
|
|
margin-bottom: 20px; |
|
|
background: linear-gradient(to right, var(--primary-light), var(--accent)); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
letter-spacing: 1px; |
|
|
} |
|
|
|
|
|
.hero p { |
|
|
font-size: 1.3rem; |
|
|
max-width: 700px; |
|
|
margin-bottom: 30px; |
|
|
line-height: 1.6; |
|
|
color: var(--text-dark); |
|
|
} |
|
|
|
|
|
.hero-buttons { |
|
|
display: flex; |
|
|
gap: 20px; |
|
|
} |
|
|
|
|
|
.btn-lg { |
|
|
padding: 12px 30px; |
|
|
font-size: 1.1rem; |
|
|
} |
|
|
|
|
|
|
|
|
.features { |
|
|
margin-bottom: 80px; |
|
|
} |
|
|
|
|
|
.section-title { |
|
|
font-size: 2.2rem; |
|
|
text-align: center; |
|
|
margin-bottom: 50px; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.section-title::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: -10px; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
width: 80px; |
|
|
height: 3px; |
|
|
background: linear-gradient(to right, var(--primary-light), var(--accent)); |
|
|
border-radius: 3px; |
|
|
} |
|
|
|
|
|
.features-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
|
|
gap: 30px; |
|
|
} |
|
|
|
|
|
.feature-card { |
|
|
padding: 25px; |
|
|
transition: all 0.3s ease; |
|
|
min-height: 300px; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.feature-card:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4); |
|
|
border: 1px solid rgba(138, 43, 226, 0.3); |
|
|
} |
|
|
|
|
|
.feature-icon { |
|
|
font-size: 2.5rem; |
|
|
margin-bottom: 20px; |
|
|
color: var(--primary-light); |
|
|
} |
|
|
|
|
|
.feature-card h3 { |
|
|
font-size: 1.5rem; |
|
|
margin-bottom: 15px; |
|
|
} |
|
|
|
|
|
.feature-card p { |
|
|
color: var(--text-dark); |
|
|
line-height: 1.6; |
|
|
} |
|
|
|
|
|
|
|
|
.ai-chat-section { |
|
|
margin-bottom: 80px; |
|
|
padding: 30px; |
|
|
} |
|
|
|
|
|
.chat-container { |
|
|
max-width: 900px; |
|
|
margin: 0 auto; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
height: 500px; |
|
|
} |
|
|
|
|
|
.chat-header { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 15px; |
|
|
padding: 15px 20px; |
|
|
border-bottom: 1px solid var(--glass-border); |
|
|
} |
|
|
|
|
|
.ai-avatar { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
border-radius: 50%; |
|
|
background: linear-gradient(to bottom right, var(--primary), var(--accent)); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: 1.2rem; |
|
|
font-weight: bold; |
|
|
} |
|
|
|
|
|
.chat-messages { |
|
|
flex: 1; |
|
|
overflow-y: auto; |
|
|
padding: 20px; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 15px; |
|
|
} |
|
|
|
|
|
.message { |
|
|
max-width: 70%; |
|
|
padding: 12px 16px; |
|
|
border-radius: 15px; |
|
|
line-height: 1.4; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.bot-message { |
|
|
align-self: flex-start; |
|
|
background: var(--secondary-light); |
|
|
border-bottom-left-radius: 5px; |
|
|
} |
|
|
|
|
|
.user-message { |
|
|
align-self: flex-end; |
|
|
background: linear-gradient(to right, var(--primary), var(--primary-dark)); |
|
|
border-bottom-right-radius: 5px; |
|
|
} |
|
|
|
|
|
.message-time { |
|
|
font-size: 0.7rem; |
|
|
color: var(--text-dark); |
|
|
margin-top: 5px; |
|
|
text-align: right; |
|
|
} |
|
|
|
|
|
.chat-input { |
|
|
display: flex; |
|
|
padding: 15px; |
|
|
border-top: 1px solid var(--glass-border); |
|
|
} |
|
|
|
|
|
.chat-input input { |
|
|
flex: 1; |
|
|
padding: 12px 15px; |
|
|
border-radius: 8px; |
|
|
border: none; |
|
|
background: var(--secondary-light); |
|
|
color: var(--text); |
|
|
font-size: 1rem; |
|
|
outline: none; |
|
|
} |
|
|
|
|
|
.chat-input button { |
|
|
margin-left: 10px; |
|
|
padding: 12px 20px; |
|
|
border-radius: 8px; |
|
|
background: var(--primary); |
|
|
color: white; |
|
|
border: none; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.chat-input button:hover { |
|
|
background: var(--primary-dark); |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
|
|
|
.gallery-section { |
|
|
margin-bottom: 80px; |
|
|
} |
|
|
|
|
|
.gallery-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); |
|
|
gap: 20px; |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.gallery-item { |
|
|
border-radius: 15px; |
|
|
overflow: hidden; |
|
|
height: 200px; |
|
|
position: relative; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.gallery-item img { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
object-fit: cover; |
|
|
transition: transform 0.5s ease; |
|
|
} |
|
|
|
|
|
.gallery-item:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4); |
|
|
} |
|
|
|
|
|
.gallery-item:hover img { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
.gallery-overlay { |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); |
|
|
padding: 15px; |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s ease; |
|
|
} |
|
|
|
|
|
.gallery-item:hover .gallery-overlay { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.gallery-overlay h3 { |
|
|
margin-bottom: 5px; |
|
|
font-size: 1.1rem; |
|
|
} |
|
|
|
|
|
.gallery-overlay p { |
|
|
font-size: 0.9rem; |
|
|
color: var(--text-dark); |
|
|
} |
|
|
|
|
|
|
|
|
.newsletter-section { |
|
|
margin-bottom: 80px; |
|
|
padding: 60px 20px; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.newsletter-form { |
|
|
max-width: 600px; |
|
|
margin: 0 auto; |
|
|
display: flex; |
|
|
gap: 10px; |
|
|
margin-top: 30px; |
|
|
} |
|
|
|
|
|
.newsletter-form input { |
|
|
flex: 1; |
|
|
padding: 15px 20px; |
|
|
border-radius: 8px; |
|
|
border: none; |
|
|
background: var(--secondary-light); |
|
|
color: var(--text); |
|
|
font-size: 1rem; |
|
|
outline: none; |
|
|
} |
|
|
|
|
|
|
|
|
footer { |
|
|
padding: 50px 0 30px; |
|
|
border-top: 1px solid var(--glass-border); |
|
|
} |
|
|
|
|
|
.footer-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
|
|
gap: 40px; |
|
|
margin-bottom: 40px; |
|
|
} |
|
|
|
|
|
.footer-col h3 { |
|
|
font-size: 1.3rem; |
|
|
margin-bottom: 20px; |
|
|
color: var(--primary-light); |
|
|
} |
|
|
|
|
|
.footer-col ul { |
|
|
list-style: none; |
|
|
} |
|
|
|
|
|
.footer-col ul li { |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
|
|
|
.footer-col ul li a { |
|
|
color: var(--text-dark); |
|
|
text-decoration: none; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.footer-col ul li a:hover { |
|
|
color: var(--primary-light); |
|
|
padding-left: 5px; |
|
|
} |
|
|
|
|
|
.social-links { |
|
|
display: flex; |
|
|
gap: 15px; |
|
|
} |
|
|
|
|
|
.social-links a { |
|
|
color: var(--text-dark); |
|
|
font-size: 1.3rem; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.social-links a:hover { |
|
|
color: var(--primary-light); |
|
|
transform: translateY(-3px); |
|
|
} |
|
|
|
|
|
.copyright { |
|
|
text-align: center; |
|
|
padding-top: 30px; |
|
|
border-top: 1px solid var(--glass-border); |
|
|
color: var(--text-dark); |
|
|
font-size: 0.9rem; |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes float { |
|
|
0%, 100% { transform: translateY(0); } |
|
|
50% { transform: translateY(-15px); } |
|
|
} |
|
|
|
|
|
.floating { |
|
|
animation: float 6s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 768px) { |
|
|
header { |
|
|
flex-direction: column; |
|
|
gap: 20px; |
|
|
} |
|
|
|
|
|
nav ul { |
|
|
flex-wrap: wrap; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.hero h1 { |
|
|
font-size: 2.5rem; |
|
|
} |
|
|
|
|
|
.hero p { |
|
|
font-size: 1.1rem; |
|
|
} |
|
|
|
|
|
.hero-buttons { |
|
|
flex-direction: column; |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.btn-lg { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.chat-container { |
|
|
height: 400px; |
|
|
} |
|
|
|
|
|
.message { |
|
|
max-width: 85%; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.glow { |
|
|
text-shadow: 0 0 10px rgba(138, 43, 226, 0.7); |
|
|
} |
|
|
|
|
|
.pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { box-shadow: 0 0 0 0 rgba(138, 43, 226, 0.7); } |
|
|
70% { box-shadow: 0 0 0 15px rgba(138, 43, 226, 0); } |
|
|
100% { box-shadow: 0 0 0 0 rgba(138, 43, 226, 0); } |
|
|
} |
|
|
|
|
|
|
|
|
.neon-border { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.neon-border::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
border-radius: inherit; |
|
|
background: linear-gradient(45deg, var(--primary), var(--accent), var(--primary)); |
|
|
background-size: 200% 200%; |
|
|
animation: gradientShift 3s ease infinite; |
|
|
opacity: 0.1; |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
@keyframes gradientShift { |
|
|
0% { background-position: 0% 50%; } |
|
|
50% { background-position: 100% 50%; } |
|
|
100% { background-position: 0% 50%; } |
|
|
} |
|
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
|
width: 8px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-track { |
|
|
background: var(--secondary); |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb { |
|
|
background: var(--primary); |
|
|
border-radius: 10px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb:hover { |
|
|
background: var(--primary-dark); |
|
|
} |
|
|
|
|
|
|
|
|
.parallax-bg { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
z-index: -1; |
|
|
opacity: 0.2; |
|
|
} |
|
|
|
|
|
|
|
|
.card-3d { |
|
|
transform-style: preserve-3d; |
|
|
transition: transform 0.5s ease; |
|
|
} |
|
|
|
|
|
.card-3d:hover { |
|
|
transform: perspective(1000px) rotateY(10deg) rotateX(5deg) translateY(-5px); |
|
|
} |
|
|
|
|
|
|
|
|
.cursor-follower { |
|
|
position: fixed; |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
border-radius: 50%; |
|
|
background: rgba(138, 43, 226, 0.3); |
|
|
pointer-events: none; |
|
|
z-index: 9999; |
|
|
transform: translate(-50%, -50%); |
|
|
transition: all 0.1s ease; |
|
|
} |
|
|
|
|
|
.cursor-dot { |
|
|
position: fixed; |
|
|
width: 8px; |
|
|
height: 8px; |
|
|
border-radius: 50%; |
|
|
background: var(--primary); |
|
|
pointer-events: none; |
|
|
z-index: 9999; |
|
|
transform: translate(-50%, -50%); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<div class="cursor-follower"></div> |
|
|
<div class="cursor-dot"></div> |
|
|
|
|
|
|
|
|
<div class="parallax-bg"> |
|
|
<div style="position: absolute; top: 10%; left: 15%; width: 100px; height: 100px; border-radius: 50%; background: var(--primary); filter: blur(30px);"></div> |
|
|
<div style="position: absolute; bottom: 20%; right: 10%; width: 150px; height: 150px; border-radius: 50%; background: var(--accent); filter: blur(40px);"></div> |
|
|
</div> |
|
|
|
|
|
<div class="container"> |
|
|
|
|
|
<header> |
|
|
<a href="#" class="logo"> |
|
|
<span class="logo-icon"><i class="fas fa-atom"></i></span> |
|
|
<span>NovaVerse</span> |
|
|
</a> |
|
|
|
|
|
<nav> |
|
|
<ul> |
|
|
<li><a href="#">Главная</a></li> |
|
|
<li><a href="#">Функции</a></li> |
|
|
<li><a href="#">Галерея</a></li> |
|
|
<li><a href="#">Команда</a></li> |
|
|
<li><a href="#">Блог</a></li> |
|
|
<li><a href="#">Контакты</a></li> |
|
|
</ul> |
|
|
</nav> |
|
|
|
|
|
<div class="auth-buttons"> |
|
|
<button class="btn btn-outline">Вход</button> |
|
|
<button class="btn btn-primary">Регистрация</button> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="hero glass"> |
|
|
<h1 class="glow">Открой <span class="pulse">новую вселенную</span> возможностей</h1> |
|
|
<p>Исследуйте цифровой космос с нашим инновационным сервисом, где технологии встречаются с креативностью, создавая уникальные впечатления.</p> |
|
|
<div class="hero-buttons"> |
|
|
<button class="btn btn-primary btn-lg">Начать путешествие</button> |
|
|
<button class="btn btn-outline btn-lg">Узнать больше</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="features"> |
|
|
<h2 class="section-title">Наши инновационные функции</h2> |
|
|
|
|
|
<div class="features-grid"> |
|
|
|
|
|
<div class="feature-card glass card-3d"> |
|
|
<div class="feature-icon"> |
|
|
<i class="fas fa-robot floating"></i> |
|
|
</div> |
|
|
<h3>AI-Ассистент</h3> |
|
|
<p>Персональный искусственный интеллект, который помогает в творчестве, анализе данных и автоматизации рутинных задач.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card glass card-3d"> |
|
|
<div class="feature-icon"> |
|
|
<i class="fas fa-vr-cardboard floating"></i> |
|
|
</div> |
|
|
<h3>VR Интеграция</h3> |
|
|
<p>Иммерсивный виртуальный опыт, позволяющий исследовать данные и креативные проекты в трехмерном пространстве.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card glass card-3d"> |
|
|
<div class="feature-icon"> |
|
|
<i class="fas fa-chart-network floating"></i> |
|
|
</div> |
|
|
<h3>Умная аналитика</h3> |
|
|
<p>Мощные алгоритмы анализа данных с визуализацией в реальном времени и предсказательными моделями.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card glass card-3d"> |
|
|
<div class="feature-icon"> |
|
|
<i class="fas fa-lock floating"></i> |
|
|
</div> |
|
|
<h3>Безопасность</h3> |
|
|
<p>Многоуровневая защита данных с криптографией на блокчейне и биометрической аутентификацией.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card glass card-3d"> |
|
|
<div class="feature-icon"> |
|
|
<i class="fas fa-sync-alt floating"></i> |
|
|
</div> |
|
|
<h3>Кроссплатформенность</h3> |
|
|
<p>Полная совместимость между устройствами с мгновенной синхронизацией данных в облаке.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card glass card-3d"> |
|
|
<div class="feature-icon"> |
|
|
<i class="fas fa-puzzle-piece floating"></i> |
|
|
</div> |
|
|
<h3>Модульность</h3> |
|
|
<p>Гибкая система плагинов и интеграций для создания персонализированного рабочего пространства.</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="ai-chat-section glass neon-border"> |
|
|
<h2 class="section-title">Чат с AI Dipsee</h2> |
|
|
|
|
|
<div class="chat-container glass"> |
|
|
<div class="chat-header"> |
|
|
<div class="ai-avatar">AI</div> |
|
|
<h3>Dipsee Assistant</h3> |
|
|
<span style="margin-left: auto; color: var(--primary-light); font-size: 0.8rem;">Online</span> |
|
|
</div> |
|
|
|
|
|
<div class="chat-messages" id="chat-messages"> |
|
|
<div class="message bot-message"> |
|
|
Привет! Я Dipsee — ваш цифровой помощник с искусственным интеллектом. Чем могу помочь? |
|
|
<div class="message-time">Сегодня, 12:00</div> |
|
|
</div> |
|
|
|
|
|
<div class="message user-message"> |
|
|
Привет, Dipsee! Расскажи, что значит твое имя? |
|
|
<div class="message-time">Сегодня, 12:01</div> |
|
|
</div> |
|
|
|
|
|
<div class="message bot-message"> |
|
|
О, это интересно! Dipsee — это аббревиатура от "Digital Intelligent Personal System Enriched with Experience". Я создан, чтобы помогать вам исследовать цифровой мир! |
|
|
<div class="message-time">Сегодня, 12:01</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="chat-input"> |
|
|
<input type="text" id="user-input" placeholder="Напишите сообщение..." autocomplete="off"> |
|
|
<button id="send-btn"><i class="fas fa-paper-plane"></i></button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="gallery-section"> |
|
|
<h2 class="section-title">Наша галерея</h2> |
|
|
|
|
|
<div class="gallery-grid glass"> |
|
|
<div class="gallery-item"> |
|
|
<img src="https://source.unsplash.com/random/600x400?cyberpunk" alt="Project 1"> |
|
|
<div class="gallery-overlay"> |
|
|
<h3>Киберпространство</h3> |
|
|
<p>Исследование цифровых ландшафтов</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="gallery-item"> |
|
|
<img src="https://source.unsplash.com/random/600x400?neon" alt="Project 2"> |
|
|
<div class="gallery-overlay"> |
|
|
<h3>Неоновые мечты</h3> |
|
|
<p>Искусство в цифровую эпоху</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="gallery-item"> |
|
|
<img src="https://source.unsplash.com/random/600x400?future" alt="Project 3"> |
|
|
<div class="gallery-overlay"> |
|
|
<h3>Футуристический дизайн</h3> |
|
|
<p>Видения будущего</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="gallery-item"> |
|
|
<img src="https://source.unsplash.com/random/600x400?tech" alt="Project 4"> |
|
|
<div class="gallery-overlay"> |
|
|
<h3>Технологии завтра</h3> |
|
|
<p>Инновационные решения</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="gallery-item"> |
|
|
<img src="https://source.unsplash.com/random/600x400?virtual" alt="Project 5"> |
|
|
<div class="gallery-overlay"> |
|
|
<h3>Виртуальная реальность</h3> |
|
|
<p>Новые измерения</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="gallery-item"> |
|
|
<img src="https://source.unsplash.com/random/600x400?ai" alt="Project 6"> |
|
|
<div class="gallery-overlay"> |
|
|
<h3>Искусственный интеллект</h3> |
|
|
<p>Машины, которые учатся</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="newsletter-section glass"> |
|
|
<h2 class="section-title">Будьте в курсе</h2> |
|
|
<p>Подпишитесь на нашу рассылку, чтобы первыми узнавать о новых функциях, обновлениях и эксклюзивных предложениях.</p> |
|
|
|
|
|
<form class="newsletter-form"> |
|
|
<input type="email" placeholder="Ваш email" required> |
|
|
<button type="submit" class="btn btn-primary">Подписаться</button> |
|
|
</form> |
|
|
</section> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="container"> |
|
|
<div class="footer-grid glass" style="padding: 30px;"> |
|
|
<div class="footer-col"> |
|
|
<h3>NovaVerse</h3> |
|
|
<p style="color: var(--text-dark); line-height: 1.6; margin-top: 15px;">Исследуйте границы цифрового мира с нашими инновационными решениями и сервисами.</p> |
|
|
<div class="social-links" style="margin-top: 20px;"> |
|
|
<a href="#"><i class="fab fa-telegram"></i></a> |
|
|
<a href="#"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#"><i class="fab fa-discord"></i></a> |
|
|
<a href="#"><i class="fab fa-github"></i></a> |
|
|
<a href="#"><i class="fab fa-instagram"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="footer-col"> |
|
|
<h3>Навигация</h3> |
|
|
<ul> |
|
|
<li><a href="#">Главная</a></li> |
|
|
<li><a href="#">О нас</a></li> |
|
|
<li><a href="#">Функции</a></li> |
|
|
<li><a href="#">Цены</a></li> |
|
|
<li><a href="#">Блог</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="footer-col"> |
|
|
<h3>Поддержка</h3> |
|
|
<ul> |
|
|
<li><a href="#">FAQ</a></li> |
|
|
<li><a href="#">Документация</a></li> |
|
|
<li><a href="#">Сообщество</a></li> |
|
|
<li><a href="#">Статус сервера</a></li> |
|
|
<li><a href="#">Контакты</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="footer-col"> |
|
|
<h3>Юридическая информация</h3> |
|
|
<ul> |
|
|
<li><a href="#">Политика конфиденциальности</a></li> |
|
|
<li><a href="#">Условия использования</a></li> |
|
|
<li><a href="#">Политика возврата</a></li> |
|
|
<li><a href="#">Правовая информация</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="copyright"> |
|
|
<p>© 2023 NovaVerse. Все права защищены. Номер в реестре: VR-7735-42</p> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const cursorFollower = document.querySelector('.cursor-follower'); |
|
|
const cursorDot = document.querySelector('.cursor-dot'); |
|
|
|
|
|
document.addEventListener('mousemove', function(e) { |
|
|
cursorFollower.style.left = e.clientX + 'px'; |
|
|
cursorFollower.style.top = e.clientY + 'px'; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
cursorDot.style.left = e.clientX + 'px'; |
|
|
cursorDot.style.top = e.clientY + 'px'; |
|
|
}, 50); |
|
|
}); |
|
|
|
|
|
|
|
|
const interactiveElements = document.querySelectorAll('a, button, input, .feature-card, .gallery-item'); |
|
|
|
|
|
interactiveElements.forEach(el => { |
|
|
el.addEventListener('mouseenter', () => { |
|
|
cursorFollower.style.transform = 'translate(-50%, -50%) scale(2)'; |
|
|
cursorFollower.style.background = 'rgba(138, 43, 226, 0.5)'; |
|
|
}); |
|
|
|
|
|
el.addEventListener('mouseleave', () => { |
|
|
cursorFollower.style.transform = 'translate(-50%, -50%) scale(1)'; |
|
|
cursorFollower.style.background = 'rgba(138, 43, 226, 0.3)'; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const chatMessages = document.getElementById('chat-messages'); |
|
|
const userInput = document.getElementById('user-input'); |
|
|
const sendBtn = document.getElementById('send-btn'); |
|
|
|
|
|
sendBtn.addEventListener('click', sendMessage); |
|
|
userInput.addEventListener('keypress', function(e) { |
|
|
if (e.key === 'Enter') { |
|
|
sendMessage(); |
|
|
} |
|
|
}); |
|
|
|
|
|
function sendMessage() { |
|
|
const message = userInput.value.trim(); |
|
|
if (message === '') return; |
|
|
|
|
|
|
|
|
addMessage(message, 'user'); |
|
|
userInput.value = ''; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
const botResponses = [ |
|
|
"Интересный вопрос! Я изучу информацию и дам вам подробный ответ.", |
|
|
"Отлично! Хотите, чтобы я рассказал больше на эту тему?", |
|
|
"Согласно моей базе данных, это связано с цифровой революцией и искусственным интеллектом.", |
|
|
"Я могу предложить несколько ресурсов по этой теме. Интересно ли вам?", |
|
|
"Моя нейросеть анализирует ваш запрос, чтобы дать наиболее точный ответ.", |
|
|
"Это одно из моих любимых направлений! Хотите углубиться в детали?", |
|
|
"У меня есть несколько идей по этому поводу. Давайте обсудим!" |
|
|
]; |
|
|
|
|
|
const randomResponse = botResponses[Math.floor(Math.random() * botResponses.length)]; |
|
|
addMessage(randomResponse, 'bot'); |
|
|
}, 1000 + Math.random() * 2000); |
|
|
} |
|
|
|
|
|
function addMessage(text, sender) { |
|
|
const now = new Date(); |
|
|
const timeString = now.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}); |
|
|
|
|
|
const messageDiv = document.createElement('div'); |
|
|
messageDiv.className = `message ${sender}-message`; |
|
|
messageDiv.innerHTML = ` |
|
|
${text} |
|
|
<div class="message-time">Сегодня, ${timeString}</div> |
|
|
`; |
|
|
|
|
|
chatMessages.appendChild(messageDiv); |
|
|
chatMessages.scrollTop = chatMessages.scrollHeight; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
messageDiv.style.opacity = '1'; |
|
|
messageDiv.style.transform = 'translateY(0)'; |
|
|
}, 10); |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('mousemove', function(e) { |
|
|
const parallaxBg = document.querySelector('.parallax-bg'); |
|
|
const x = e.clientX / window.innerWidth; |
|
|
const y = e.clientY / window.innerHeight; |
|
|
|
|
|
parallaxBg.style.transform = `translate(-${x * 50}px, -${y * 50}px)`; |
|
|
}); |
|
|
|
|
|
|
|
|
document.body.style.opacity = '0'; |
|
|
setTimeout(() => { |
|
|
document.body.style.transition = 'opacity 1s ease'; |
|
|
document.body.style.opacity = '1'; |
|
|
}, 100); |
|
|
|
|
|
|
|
|
const cards = document.querySelectorAll('.card-3d'); |
|
|
cards.forEach(card => { |
|
|
card.addEventListener('mousemove', (e) => { |
|
|
const rect = card.getBoundingClientRect(); |
|
|
const x = e.clientX - rect.left; |
|
|
const y = e.clientY - rect.top; |
|
|
const centerX = rect.width / 2; |
|
|
const centerY = rect.height / 2; |
|
|
|
|
|
const rotateY = (x - centerX) / 20; |
|
|
const rotateX = (centerY - y) / 20; |
|
|
|
|
|
card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateZ(20px)`; |
|
|
}); |
|
|
|
|
|
card.addEventListener('mouseleave', () => { |
|
|
card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) translateZ(0)'; |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: absolute; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">This website has been generated by <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body> |
|
|
</html> |
