Spaces:

ttrld
/

voidnest-gameplace

Running

App Files Files Community

ttrld commited on Mar 28, 2025

Commit

53202ed

verified ·

1 Parent(s): 2898083

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +954 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Voidnest Gameplace
-emoji: 🦀
-colorFrom: green
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: voidnest-gameplace
+emoji: 🐳
+colorFrom: blue
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,954 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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>