Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>VoidNest — Вселенная Игр</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --deep-purple: #1a0526; | |
| --dark-purple: #2a0a40; | |
| --medium-purple: #4a148c; | |
| --vibrant-purple: #7b2cbf; | |
| --light-purple: #9c4dff; | |
| --neon-purple: #c77dff; | |
| --text-light: #e0aaff; | |
| --text-lighter: #f3d9ff; | |
| --accent-glow: 0 0 10px rgba(156, 77, 255, 0.7); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background-color: var(--deep-purple); | |
| color: var(--text-light); | |
| background-image: url('https://images.unsplash.com/photo-1542831371-29b0f74f9713?q=80&w=2070&auto=format&fit=crop'); | |
| background-size: cover; | |
| background-attachment: fixed; | |
| background-position: center; | |
| background-blend-mode: overlay; | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| body::before { | |
| content: ''; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: radial-gradient(ellipse at center, rgba(123,44,191,0.2) 0%, rgba(26,5,38,0.9) 70%); | |
| z-index: -1; | |
| } | |
| .container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 20px 0; | |
| border-bottom: 1px solid rgba(156, 77, 255, 0.3); | |
| margin-bottom: 30px; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| } | |
| .logo-icon { | |
| font-size: 2.5rem; | |
| color: var(--neon-purple); | |
| text-shadow: var(--accent-glow); | |
| animation: pulse 2s infinite alternate; | |
| } | |
| .logo-text { | |
| font-size: 1.8rem; | |
| font-weight: 700; | |
| background: linear-gradient(90deg, var(--neon-purple), var(--light-purple)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| } | |
| .server-ip { | |
| background-color: rgba(26, 5, 38, 0.7); | |
| border: 1px solid var(--vibrant-purple); | |
| padding: 10px 15px; | |
| border-radius: 30px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| box-shadow: var(--accent-glow); | |
| } | |
| .server-ip:hover { | |
| background-color: rgba(123, 44, 191, 0.3); | |
| transform: translateY(-2px); | |
| } | |
| .server-ip i { | |
| color: var(--light-purple); | |
| } | |
| .server-ip span { | |
| font-family: 'Courier New', monospace; | |
| font-weight: bold; | |
| color: var(--neon-purple); | |
| } | |
| nav { | |
| display: flex; | |
| gap: 20px; | |
| } | |
| .nav-link { | |
| color: var(--text-light); | |
| text-decoration: none; | |
| padding: 10px 15px; | |
| border-radius: 5px; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .nav-link::before { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: var(--neon-purple); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::before { | |
| width: 100%; | |
| } | |
| .nav-link:hover { | |
| color: var(--neon-purple); | |
| } | |
| .nav-link.active { | |
| background-color: rgba(123, 44, 191, 0.3); | |
| color: var(--neon-purple); | |
| } | |
| .nav-link.active::before { | |
| width: 100%; | |
| } | |
| main { | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| gap: 30px; | |
| } | |
| .section-title { | |
| font-size: 1.5rem; | |
| margin-bottom: 20px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| color: var(--neon-purple); | |
| } | |
| .section-title i { | |
| font-size: 1.8rem; | |
| } | |
| .games-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 20px; | |
| margin-bottom: 40px; | |
| } | |
| .game-card { | |
| background: linear-gradient(135deg, rgba(42, 10, 64, 0.7), rgba(26, 5, 38, 0.9)); | |
| border-radius: 10px; | |
| overflow: hidden; | |
| border: 1px solid rgba(123, 44, 191, 0.3); | |
| transition: all 0.3s ease; | |
| position: relative; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); | |
| } | |
| .game-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(123, 44, 191, 0.4); | |
| border-color: var(--vibrant-purple); | |
| } | |
| .game-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(135deg, rgba(123, 44, 191, 0.1), transparent); | |
| z-index: 1; | |
| } | |
| .game-image { | |
| width: 100%; | |
| height: 160px; | |
| object-fit: cover; | |
| border-bottom: 1px solid rgba(123, 44, 191, 0.3); | |
| } | |
| .game-info { | |
| padding: 15px; | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .game-title { | |
| font-size: 1.2rem; | |
| margin-bottom: 8px; | |
| color: var(--neon-purple); | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| .game-category { | |
| font-size: 0.8rem; | |
| background-color: rgba(123, 44, 191, 0.3); | |
| padding: 3px 8px; | |
| border-radius: 15px; | |
| color: var(--text-light); | |
| } | |
| .game-description { | |
| font-size: 0.9rem; | |
| margin-bottom: 15px; | |
| line-height: 1.4; | |
| color: var(--text-lighter); | |
| } | |
| .game-stats { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 0.8rem; | |
| color: var(--text-light); | |
| } | |
| .game-players, .game-rating { | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| } | |
| .game-players i, .game-rating i { | |
| color: var(--light-purple); | |
| } | |
| .play-btn { | |
| display: block; | |
| width: 100%; | |
| padding: 10px; | |
| background: linear-gradient(90deg, var(--vibrant-purple), var(--light-purple)); | |
| color: white; | |
| border: none; | |
| border-radius: 5px; | |
| margin-top: 10px; | |
| cursor: pointer; | |
| font-weight: bold; | |
| text-transform: uppercase; | |
| font-size: 0.9rem; | |
| letter-spacing: 1px; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .play-btn::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); | |
| transition: all 0.5s ease; | |
| } | |
| .play-btn:hover::before { | |
| left: 100%; | |
| } | |
| .play-btn:hover { | |
| box-shadow: 0 0 15px var(--light-purple); | |
| } | |
| .featured-game { | |
| grid-column: 1 / -1; | |
| display: grid; | |
| grid-template-columns: 2fr 1fr; | |
| gap: 20px; | |
| background: linear-gradient(135deg, rgba(42, 10, 64, 0.8), rgba(26, 5, 38, 0.95)); | |
| border-radius: 15px; | |
| overflow: hidden; | |
| border: 1px solid var(--vibrant-purple); | |
| box-shadow: 0 10px 30px rgba(123, 44, 191, 0.3); | |
| } | |
| .featured-image { | |
| width: 100%; | |
| height: 300px; | |
| object-fit: cover; | |
| } | |
| .featured-content { | |
| padding: 25px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| } | |
| .featured-title { | |
| font-size: 1.8rem; | |
| color: var(--neon-purple); | |
| margin-bottom: 15px; | |
| } | |
| .featured-description { | |
| margin-bottom: 20px; | |
| line-height: 1.5; | |
| color: var(--text-lighter); | |
| } | |
| .featured-stats { | |
| display: flex; | |
| gap: 20px; | |
| margin-bottom: 20px; | |
| } | |
| .stat-item { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| background-color: rgba(123, 44, 191, 0.2); | |
| padding: 10px; | |
| border-radius: 8px; | |
| min-width: 80px; | |
| } | |
| .stat-value { | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| color: var(--neon-purple); | |
| } | |
| .stat-label { | |
| font-size: 0.8rem; | |
| color: var(--text-lighter); | |
| } | |
| .random-btn { | |
| background: linear-gradient(90deg, var(--medium-purple), var(--vibrant-purple)); | |
| color: white; | |
| border: none; | |
| padding: 12px 25px; | |
| border-radius: 30px; | |
| font-weight: bold; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin: 30px auto; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .random-btn:hover { | |
| box-shadow: 0 0 20px var(--light-purple), 0 0 40px var(--light-purple); | |
| } | |
| .random-btn::before { | |
| content: ''; | |
| position: absolute; | |
| top: -10px; | |
| left: -10px; | |
| right: -10px; | |
| bottom: -10px; | |
| background: linear-gradient(45deg, transparent, var(--light-purple), transparent); | |
| animation: lightning 3s infinite linear; | |
| z-index: -1; | |
| opacity: 0.5; | |
| } | |
| .account-panel { | |
| position: fixed; | |
| top: 50%; | |
| right: 0; | |
| transform: translateY(-50%); | |
| background: linear-gradient(90deg, rgba(26, 5, 38, 0.8), rgba(42, 10, 64, 0.9)); | |
| padding: 20px; | |
| border-top-left-radius: 15px; | |
| border-bottom-left-radius: 15px; | |
| box-shadow: -5px 5px 15px rgba(0, 0, 0, 0.3); | |
| z-index: 100; | |
| width: 300px; | |
| display: none; | |
| border-left: 3px solid var(--vibrant-purple); | |
| } | |
| .account-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| margin-bottom: 20px; | |
| padding-bottom: 15px; | |
| border-bottom: 1px solid rgba(156, 77, 255, 0.3); | |
| } | |
| .account-avatar { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| background-color: var(--vibrant-purple); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-size: 1.5rem; | |
| } | |
| .account-name { | |
| font-size: 1.1rem; | |
| color: var(--neon-purple); | |
| } | |
| .account-stats { | |
| margin-bottom: 20px; | |
| } | |
| .stat-row { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 10px; | |
| } | |
| .stat-name { | |
| color: var(--text-lighter); | |
| } | |
| .stat-value { | |
| color: var(--neon-purple); | |
| } | |
| .achievements { | |
| margin-top: 20px; | |
| } | |
| .achievement-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 10px; | |
| } | |
| .achievement-item { | |
| width: 100%; | |
| aspect-ratio: 1; | |
| background-color: rgba(123, 44, 191, 0.2); | |
| border-radius: 5px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--neon-purple); | |
| transition: all 0.3s ease; | |
| } | |
| .achievement-item:hover { | |
| background-color: rgba(123, 44, 191, 0.5); | |
| transform: scale(1.1); | |
| } | |
| footer { | |
| text-align: center; | |
| padding: 30px 0; | |
| margin-top: 50px; | |
| border-top: 1px solid rgba(156, 77, 255, 0.3); | |
| color: var(--text-lighter); | |
| font-size: 0.9rem; | |
| } | |
| .social-links { | |
| display: flex; | |
| justify-content: center; | |
| gap: 20px; | |
| margin-top: 20px; | |
| } | |
| .social-link { | |
| color: var(--text-light); | |
| font-size: 1.5rem; | |
| transition: all 0.3s ease; | |
| } | |
| .social-link:hover { | |
| color: var(--neon-purple); | |
| transform: translateY(-3px); | |
| } | |
| /* Animations */ | |
| @keyframes pulse { | |
| 0% { | |
| opacity: 0.8; | |
| text-shadow: 0 0 5px var(--light-purple); | |
| } | |
| 100% { | |
| opacity: 1; | |
| text-shadow: 0 0 15px var(--neon-purple); | |
| } | |
| } | |
| @keyframes lightning { | |
| 0% { | |
| transform: translateX(-100%) translateY(100%) rotate(45deg); | |
| } | |
| 10% { | |
| transform: translateX(100%) translateY(-100%) rotate(45deg); | |
| } | |
| 100% { | |
| transform: translateX(100%) translateY(-100%) rotate(45deg); | |
| } | |
| } | |
| /* Particles */ | |
| .particles { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| pointer-events: none; | |
| z-index: -1; | |
| } | |
| .particle { | |
| position: absolute; | |
| background-color: var(--neon-purple); | |
| border-radius: 50%; | |
| opacity: 0.3; | |
| animation: float linear infinite; | |
| } | |
| @keyframes float { | |
| 0% { | |
| transform: translateY(0) rotate(0deg); | |
| opacity: 0.3; | |
| } | |
| 50% { | |
| opacity: 0.1; | |
| } | |
| 100% { | |
| transform: translateY(-100vh) rotate(360deg); | |
| opacity: 0.3; | |
| } | |
| } | |
| /* Tooltip */ | |
| .tooltip { | |
| position: relative; | |
| } | |
| .tooltip::after { | |
| content: attr(data-tooltip); | |
| position: absolute; | |
| bottom: 125%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background-color: rgba(26, 5, 38, 0.9); | |
| color: var(--text-light); | |
| padding: 8px 12px; | |
| border-radius: 5px; | |
| font-size: 0.8rem; | |
| white-space: nowrap; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.3s ease; | |
| border: 1px solid var(--vibrant-purple); | |
| z-index: 100; | |
| } | |
| .tooltip:hover::after { | |
| opacity: 1; | |
| visibility: visible; | |
| bottom: 100%; | |
| } | |
| /* Responsive */ | |
| @media (max-width: 1200px) { | |
| .games-grid { | |
| grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); | |
| } | |
| } | |
| @media (max-width: 992px) { | |
| .featured-game { | |
| grid-template-columns: 1fr; | |
| } | |
| .featured-image { | |
| height: 200px; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| header { | |
| flex-direction: column; | |
| gap: 20px; | |
| } | |
| nav { | |
| width: 100%; | |
| justify-content: center; | |
| } | |
| .section-title { | |
| font-size: 1.3rem; | |
| } | |
| } | |
| @media (max-width: 576px) { | |
| .games-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .server-ip { | |
| padding: 8px 12px; | |
| font-size: 0.9rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="particles" id="particles"></div> | |
| <div class="container"> | |
| <header> | |
| <div class="logo"> | |
| <div class="logo-icon"><i class="fas fa-gamepad"></i></div> | |
| <div class="logo-text">VoidNest</div> | |
| </div> | |
| <div class="server-ip tooltip" data-tooltip="Нажмите, чтобы скопировать IP"> | |
| <i class="fas fa-server"></i> | |
| <span>play.vladgod.org</span> | |
| </div> | |
| <nav> | |
| <a href="#" class="nav-link active"><i class="fas fa-home"></i> Главная</a> | |
| <a href="#" class="nav-link"><i class="fas fa-fire"></i> Популярное</a> | |
| <a href="#" class="nav-link"><i class="fas fa-trophy"></i> Достижения</a> | |
| <a href="#" class="nav-link"><i class="fas fa-user-friends"></i> Сообщество</a> | |
| </nav> | |
| </header> | |
| <main> | |
| <div class="featured-game"> | |
| <img src="https://images.unsplash.com/photo-1627855437693-dcc7b0f5ab35?q=80&w=2071&auto=format&fit=crop" alt="Featured Game" class="featured-image"> | |
| <div class="featured-content"> | |
| <h2 class="featured-title">Nexus Royale — Сезон 4</h2> | |
| <p class="featured-description">Баттл-роял на 50 игроков с фиолетовым вихрем. Используйте уникальные способности Края, чтобы стать последним выжившим.</p> | |
| <div class="featured-stats"> | |
| <div class="stat-item"> | |
| <div class="stat-value">1,243</div> | |
| <div class="stat-label">Онлайн</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-value">4.8</div> | |
| <div class="stat-label">Рейтинг</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-value">56k</div> | |
| <div class="stat-label">Матчей</div> | |
| </div> | |
| </div> | |
| <button class="play-btn"><i class="fas fa-play"></i> Играть сейчас</button> | |
| </div> | |
| </div> | |
| <h2 class="section-title"><i class="fas fa-crown"></i> Minecraft Мини-игры</h2> | |
| <div class="games-grid"> | |
| <div class="game-card"> | |
| <img src="https://images.unsplash.com/photo-1587573089734-599851b0c1bc?q=80&w=2070&auto=format&fit=crop" alt="Obsidian Parkour" class="game-image"> | |
| <div class="game-info"> | |
| <div class="game-title">Obsidian Parkoor <span class="game-category">Экстрим</span></div> | |
| <p class="game-description">200+ уровней экстремального паркура на черных блоках с неоново-фиолетовыми платформами.</p> | |
| <div class="game-stats"> | |
| <div class="game-players"><i class="fas fa-users"></i> 892 онлайн</div> | |
| <div class="game-rating"><i class="fas fa-star"></i> 4.7</div> | |
| </div> | |
| <button class="play-btn tooltip" data-tooltip="Требуется Minecraft 1.16+"><i class="fas fa-play"></i> Играть</button> | |
| </div> | |
| </div> | |
| <div class="game-card"> | |
| <img src="https://images.unsplash.com/photo-1560258018-c7db7645254e?q=80&w=1932&auto=format&fit=crop" alt="Void Puzzle" class="game-image"> | |
| <div class="game-info"> | |
| <div class="game-title">Void Puzzle <span class="game-category">Головоломка</span></div> | |
| <p class="game-description">Квестовые карты с загадками. Манипулируйте гравитацией с помощью фиолетовых кристаллов.</p> | |
| <div class="game-stats"> | |
| <div class="game-players"><i class="fas fa-users"></i> 534 онлайн</div> | |
| <div class="game-rating"><i class="fas fa-star"></i> 4.9</div> | |
| </div> | |
| <button class="play-btn tooltip" data-tooltip="Требуется Minecraft 1.16+"><i class="fas fa-play"></i> Играть</button> | |
| </div> | |
| </div> | |
| <div class="game-card"> | |
| <img src="https://images.unsplash.com/photo-1607513746994-51f730a44832?q=80&w=1974&auto=format&fit=crop" alt="Ender Clash" class="game-image"> | |
| <div class="game-info"> | |
| <div class="game-title">Ender Clash <span class="game-category">PvP</span></div> | |
| <p class="game-description">Сражения 1x1 с лазерами Края. Каждое убийство создает взрыв фиолетовых частиц.</p> | |
| <div class="game-stats"> | |
| <div class="game-players"><i class="fas fa-users"></i> 1,287 онлайн</div> | |
| <div class="game-rating"><i class="fas fa-star"></i> 4.6</div> | |
| </div> | |
| <button class="play-btn tooltip" data-tooltip="Требуется Minecraft 1.16+"><i class="fas fa-play"></i> Играть</button> | |
| </div> | |
| </div> | |
| </div> | |
| <h2 class="section-title"><i class="fas fa-desktop"></i> Браузерные игры</h2> | |
| <div class="games-grid"> | |
| <div class="game-card"> | |
| <img src="https://images.unsplash.com/photo-1612287230202-1ff1d85d1bdf?q=80&w=1931&auto=format&fit=crop" alt="Serpent.exe" class="game-image"> | |
| <div class="game-info"> | |
| <div class="game-title">Serpent.exe <span class="game-category">Классика</span></div> | |
| <p class="game-description">Змейка с "глючной" графикой. Каждые 50 очков экран искажается, а змейка ускоряется.</p> | |
| <div class="game-stats"> | |
| <div class="game-players"><i class="fas fa-users"></i> 429 онлайн</div> | |
| <div class="game-rating"><i class="fas fa-star"></i> 4.3</div> | |
| </div> | |
| <button class="play-btn"><i class="fas fa-play"></i> Играть</button> | |
| </div> | |
| </div> | |
| <div class="game-card"> | |
| <img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?q=80&w=2070&auto=format&fit=crop" alt="Tetris Void" class="game-image"> | |
| <div class="game-info"> | |
| <div class="game-title">Tetris Void <span class="game-category">Головоломка</span></div> | |
| <p class="game-description">Тетрис с фиолетовой бездной. Специальный блок "Фиолетовая дыра" уничтожает все линии.</p> | |
| <div class="game-stats"> | |
| <div class="game-players"><i class="fas fa-users"></i> 876 онлайн</div> | |
| <div class="game-rating"><i class="fas fa-star"></i> 4.5</div> | |
| </div> | |
| <button class="play-btn"><i class="fas fa-play"></i> Играть</button> | |
| </div> | |
| </div> | |
| <div class="game-card"> | |
| <img src="https://images.unsplash.com/photo-1534972195531-d756b9bfa9f2?q=80&w=2070&auto=format&fit=crop" alt="Neon Pong" class="game-image"> | |
| <div class="game-info"> | |
| <div class="game-title">Neon Pong <span class="game-category">Аркада</span></div> | |
| <p class="game-description">Арканоид с "живыми" кирпичами. При разрушении блок превращается в фиолетовый взрыв.</p> | |
| <div class="game-stats"> | |
| <div class="game-players"><i class="fas fa-users"></i> 721 онлайн</div> | |
| <div class="game-rating"><i class="fas fa-star"></i> 4.4</div> | |
| </div> | |
| <button class="play-btn"><i class="fas fa-play"></i> Играть</button> | |
| </div> | |
| </div> | |
| <div class="game-card"> | |
| <img src="https://images.unsplash.com/photo-1542751371-adc38448a05e?q=80&w=2070&auto=format&fit=crop" alt="Nexus Platformer" class="game-image"> | |
| <div class="game-info"> | |
| <div class="game-title">Nexus Platformer <span class="game-category">Платформер</span></div> | |
| <p class="game-description">Чёрно-фиолетовый 2D-платформер с 30 уровнями. Играйте за пиксельного мага в плаще.</p> | |
| <div class="game-stats"> | |
| <div class="game-players"><i class="fas fa-users"></i> 512 онлайн</div> | |
| <div class="game-rating"><i class="fas fa-star"></i> 4.7</div> | |
| </div> | |
| <button class="play-btn"><i class="fas fa-play"></i> Играть</button> | |
| </div> | |
| </div> | |
| <div class="game-card"> | |
| <img src="https://images.unsplash.com/photo-1560258018-c7db7645254e?q=80&w=1932&auto=format&fit=crop" alt="Doom Pixel" class="game-image"> | |
| <div class="game-info"> | |
| <div class="game-title">Doom Pixel <span class="game-category">Шутер</span></div> | |
| <p class="game-description">2D-шутер с блочными тенями. Оружие стреляет фиолетовыми импульсами.</p> | |
| <div class="game-stats"> | |
| <div class="game-players"><i class="fas fa-users"></i> 843 онлайн</div> | |
| <div class="game-rating"><i class="fas fa-star"></i> 4.2</div> | |
| </div> | |
| <button class="play-btn"><i class="fas fa-play"></i> Играть</button> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="random-btn" id="randomGameBtn"> | |
| <i class="fas fa-random"></i> Случайная игра | |
| </button> | |
| </main> | |
| </div> | |
| <div class="account-panel" id="accountPanel"> | |
| <div class="account-header"> | |
| <div class="account-avatar"><i class="fas fa-user"></i></div> | |
| <div class="account-name">Гость</div> | |
| </div> | |
| <div class="account-stats"> | |
| <div class="stat-row"> | |
| <div class="stat-name">Уровень</div> | |
| <div class="stat-value">1</div> | |
| </div> | |
| <div class="stat-row"> | |
| <div class="stat-name">Опыт</div> | |
| <div class="stat-value">0 / 100</div> | |
| </div> | |
| <div class="stat-row"> | |
| <div class="stat-name">Кристаллы</div> | |
| <div class="stat-value">0 <i class="fas fa-gem" style="color: var(--neon-purple);"></i></div> | |
| </div> | |
| </div> | |
| <div class="achievements"> | |
| <h3>Достижения</h3> | |
| <div class="achievement-grid"> | |
| <div class="achievement-item tooltip" data-tooltip="Первая игра"><i class="fas fa-gamepad"></i></div> | |
| <div class="achievement-item tooltip" data-tooltip="Гурман экстрима"><i class="fas fa-running"></i></div> | |
| <div class="achievement-item tooltip" data-tooltip="Командный игрок"><i class="fas fa-users"></i></div> | |
| <div class="achievement-item tooltip" data-tooltip="Одержимый"><i class="fas fa-clock"></i></div> | |
| <div class="achievement-item tooltip" data-tooltip="Эксперт PvP"><i class="fas fa-swords"></i></div> | |
| <div class="achievement-item tooltip" data-tooltip="Преодоление"><i class="fas fa-trophy"></i></div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer> | |
| <p>VoidNest — Вселенная игр в темно-фиолетовых тонах</p> | |
| <p>© 2023 Все права защищены. IP сервера: play.vladgod.org</p> | |
| <div class="social-links"> | |
| <a href="#" class="social-link tooltip" data-tooltip="Discord"><i class="fab fa-discord"></i></a> | |
| <a href="#" class="social-link tooltip" data-tooltip="VK"><i class="fab fa-vk"></i></a> | |
| <a href="#" class="social-link tooltip" data-tooltip="Telegram"><i class="fab fa-telegram"></i></a> | |
| <a href="#" class="social-link tooltip" data-tooltip="YouTube"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| </footer> | |
| <script> | |
| // Create particles | |
| function createParticles() { | |
| const particlesContainer = document.getElementById('particles'); | |
| const particleCount = 30; | |
| for (let i = 0; i < particleCount; i++) { | |
| const particle = document.createElement('div'); | |
| particle.classList.add('particle'); | |
| const size = Math.random() * 5 + 2; | |
| const posX = Math.random() * 100; | |
| const posY = Math.random() * 100 + 100; | |
| const duration = Math.random() * 20 + 10; | |
| const delay = Math.random() * 5; | |
| particle.style.width = `${size}px`; | |
| particle.style.height = `${size}px`; | |
| particle.style.left = `${posX}%`; | |
| particle.style.top = `${posY}%`; | |
| particle.style.animationDuration = `${duration}s`; | |
| particle.style.animationDelay = `-${delay}s`; | |
| particlesContainer.appendChild(particle); | |
| } | |
| } | |
| // Random game button | |
| function setupRandomGameButton() { | |
| const randomBtn = document.getElementById('randomGameBtn'); | |
| const gameBtns = document.querySelectorAll('.play-btn'); | |
| randomBtn.addEventListener('click', () => { | |
| // Lightning effect | |
| randomBtn.style.boxShadow = '0 0 30px var(--light-purple), 0 0 60px var(--light-purple)'; | |
| setTimeout(() => { | |
| randomBtn.style.boxShadow = ''; | |
| }, 300); | |
| // Random game selection | |
| const randomIndex = Math.floor(Math.random() * gameBtns.length); | |
| const randomGame = gameBtns[randomIndex]; | |
| // Highlight selected game | |
| randomGame.parentElement.parentElement.style.transform = 'scale(1.05)'; | |
| randomGame.parentElement.parentElement.style.boxShadow = '0 0 30px var(--vibrant-purple)'; | |
| setTimeout(() => { | |
| randomGame.parentElement.parentElement.style.transform = ''; | |
| randomGame.parentElement.parentElement.style.boxShadow = ''; | |
| }, 2000); | |
| }); | |
| } | |
| // Server IP copy functionality | |
| function setupServerIPButton() { | |
| const serverIP = document.querySelector('.server-ip'); | |
| serverIP.addEventListener('click', () => { | |
| const ip = 'play.vladgod.org'; | |
| navigator.clipboard.writeText(ip).then(() => { | |
| const originalText = serverIP.innerHTML; | |
| serverIP.innerHTML = '<i class="fas fa-check"></i> Скопировано!'; | |
| setTimeout(() => { | |
| serverIP.innerHTML = originalText; | |
| }, 2000); | |
| }); | |
| }); | |
| } | |
| // Account panel toggle | |
| function setupAccountPanel() { | |
| const accountPanel = document.getElementById('accountPanel'); | |
| setTimeout(() => { | |
| accountPanel.style.display = 'block'; | |
| }, 1000); | |
| } | |
| // Initialize all functions when DOM is loaded | |
| document.addEventListener('DOMContentLoaded', () => { | |
| createParticles(); | |
| setupRandomGameButton(); | |
| setupServerIPButton(); | |
| setupAccountPanel(); | |
| }); | |
| </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> |