Spaces:

0qwpifs
/

anycoder-22e4fe8e

Running

App Files Files Community

0qwpifs commited on 30 days ago

Commit

c9f979e

verified ·

1 Parent(s): 7a92ae0

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +766 -19

index.html CHANGED Viewed

@@ -1,19 +1,766 @@
-<!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="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Roblox Aero Theme - Stylus Preview</title>
+    <link href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Caveat:wght@400;700&display=swap" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        :root {
+            --primary-black: #0a0a0a;
+            --secondary-black: #1a1a1a;
+            --glass-bg: rgba(20, 20, 20, 0.7);
+            --glass-border: rgba(255, 255, 255, 0.1);
+            --accent-yellow: #ffd700;
+            --accent-yellow-hover: #ffed4e;
+            --text-primary: #ffffff;
+            --text-secondary: #b0b0b0;
+            --handwritten: 'Kalam', cursive;
+            --cursive: 'Caveat', cursive;
+        }
+        body {
+            font-family: var(--handwritten);
+            background: var(--primary-black);
+            color: var(--text-primary);
+            min-height: 100vh;
+            background-image:
+                radial-gradient(circle at 20% 50%, rgba(255, 215, 0, 0.1) 0%, transparent 50%),
+                radial-gradient(circle at 80% 80%, rgba(255, 215, 0, 0.05) 0%, transparent 50%),
+                radial-gradient(circle at 40% 20%, rgba(255, 215, 0, 0.08) 0%, transparent 50%);
+            position: relative;
+            overflow-x: hidden;
+        }
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080"><defs><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/><feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.05 0"/></filter></defs><rect width="1920" height="1080" filter="url(%23noise)" opacity="0.4"/></svg>');
+            opacity: 0.03;
+            pointer-events: none;
+            z-index: 1;
+        }
+        .container {
+            position: relative;
+            z-index: 2;
+        }
+        /* Aero Glass Effect */
+        .glass {
+            background: var(--glass-bg);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border: 1px solid var(--glass-border);
+            box-shadow:
+                0 8px 32px rgba(0, 0, 0, 0.3),
+                inset 0 1px 0 rgba(255, 255, 255, 0.1),
+                0 0 40px rgba(255, 215, 0, 0.05);
+        }
+        /* Navigation Bar */
+        nav {
+            position: sticky;
+            top: 0;
+            z-index: 1000;
+            padding: 15px 30px;
+            margin: 10px;
+            border-radius: 20px;
+        }
+        .nav-content {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            max-width: 1400px;
+            margin: 0 auto;
+        }
+        .logo {
+            font-size: 28px;
+            font-weight: 700;
+            color: var(--accent-yellow);
+            text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        .logo:hover {
+            transform: scale(1.05);
+            text-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
+        }
+        .nav-links {
+            display: flex;
+            gap: 30px;
+            list-style: none;
+        }
+        .nav-links a {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            position: relative;
+            padding: 5px 10px;
+        }
+        .nav-links a::after {
+            content: '';
+            position: absolute;
+            bottom: -2px;
+            left: 0;
+            right: 0;
+            height: 2px;
+            background: var(--accent-yellow);
+            transform: scaleX(0);
+            transition: transform 0.3s ease;
+        }
+        .nav-links a:hover::after {
+            transform: scaleX(1);
+        }
+        .search-bar {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            padding: 10px 20px;
+            border-radius: 25px;
+            min-width: 300px;
+        }
+        .search-bar input {
+            background: none;
+            border: none;
+            color: var(--text-primary);
+            font-family: var(--handwritten);
+            font-size: 14px;
+            width: 100%;
+            outline: none;
+        }
+        .search-bar input::placeholder {
+            color: var(--text-secondary);
+        }
+        .search-icon {
+            color: var(--accent-yellow);
+            cursor: pointer;
+            transition: transform 0.3s ease;
+        }
+        .search-icon:hover {
+            transform: scale(1.2);
+        }
+        /* Hero Section */
+        .hero {
+            padding: 40px 30px;
+            margin: 20px;
+            border-radius: 20px;
+            text-align: center;
+        }
+        .hero h1 {
+            font-family: var(--cursive);
+            font-size: 48px;
+            margin-bottom: 20px;
+            background: linear-gradient(135deg, var(--accent-yellow), #fff);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            animation: glow 2s ease-in-out infinite alternate;
+        }
+        @keyframes glow {
+            from { filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.5)); }
+            to { filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.8)); }
+        }
+        .hero p {
+            font-size: 18px;
+            color: var(--text-secondary);
+            margin-bottom: 30px;
+        }
+        .cta-button {
+            display: inline-block;
+            padding: 15px 40px;
+            background: linear-gradient(135deg, var(--accent-yellow), #ffed4e);
+            color: var(--primary-black);
+            border: none;
+            border-radius: 30px;
+            font-family: var(--handwritten);
+            font-size: 18px;
+            font-weight: 700;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
+        }
+        .cta-button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 30px rgba(255, 215, 0, 0.5);
+        }
+        .cta-button:active {
+            transform: translateY(0);
+            box-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
+        }
+        /* Games Grid */
+        .games-section {
+            padding: 40px 30px;
+            margin: 20px;
+            border-radius: 20px;
+        }
+        .section-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 30px;
+        }
+        .section-header h2 {
+            font-family: var(--cursive);
+            font-size: 32px;
+            color: var(--accent-yellow);
+        }
+        .view-all {
+            color: var(--accent-yellow);
+            text-decoration: none;
+            font-size: 16px;
+            transition: all 0.3s ease;
+        }
+        .view-all:hover {
+            transform: translateX(5px);
+        }
+        .games-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+            gap: 20px;
+        }
+        .game-card {
+            border-radius: 15px;
+            padding: 15px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+        .game-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(135deg, transparent, rgba(255, 215, 0, 0.1));
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        .game-card:hover {
+            transform: translateY(-5px);
+            border-color: var(--accent-yellow);
+            box-shadow: 0 10px 40px rgba(255, 215, 0, 0.2);
+        }
+        .game-card:hover::before {
+            opacity: 1;
+        }
+        .game-thumbnail {
+            width: 100%;
+            height: 150px;
+            background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
+            border-radius: 10px;
+            margin-bottom: 15px;
+            position: relative;
+            overflow: hidden;
+        }
+        .game-thumbnail img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            opacity: 0.8;
+        }
+        .game-info h3 {
+            font-size: 18px;
+            margin-bottom: 5px;
+            color: var(--text-primary);
+        }
+        .game-info p {
+            font-size: 14px;
+            color: var(--text-secondary);
+            margin-bottom: 10px;
+        }
+        .game-stats {
+            display: flex;
+            gap: 15px;
+            font-size: 12px;
+            color: var(--accent-yellow);
+        }
+        /* User Profile Section */
+        .profile-section {
+            padding: 40px 30px;
+            margin: 20px;
+            border-radius: 20px;
+        }
+        .profile-card {
+            display: flex;
+            align-items: center;
+            gap: 30px;
+            padding: 30px;
+            border-radius: 15px;
+        }
+        .avatar {
+            width: 120px;
+            height: 120px;
+            border-radius: 50%;
+            background: linear-gradient(135deg, var(--accent-yellow), #ffed4e);
+            padding: 5px;
+            position: relative;
+        }
+        .avatar img {
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            object-fit: cover;
+            background: var(--secondary-black);
+        }
+        .profile-info h3 {
+            font-family: var(--cursive);
+            font-size: 28px;
+            margin-bottom: 10px;
+            color: var(--accent-yellow);
+        }
+        .profile-stats {
+            display: flex;
+            gap: 30px;
+            margin-top: 20px;
+        }
+        .stat-item {
+            text-align: center;
+        }
+        .stat-value {
+            font-size: 24px;
+            font-weight: 700;
+            color: var(--accent-yellow);
+        }
+        .stat-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        /* Buttons */
+        .btn {
+            padding: 10px 25px;
+            border: 1px solid var(--accent-yellow);
+            background: transparent;
+            color: var(--accent-yellow);
+            border-radius: 20px;
+            font-family: var(--handwritten);
+            font-size: 14px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+        .btn::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 0;
+            height: 0;
+            background: var(--accent-yellow);
+            border-radius: 50%;
+            transform: translate(-50%, -50%);
+            transition: width 0.3s ease, height 0.3s ease;
+        }
+        .btn:hover::before {
+            width: 300px;
+            height: 300px;
+        }
+        .btn:hover {
+            color: var(--primary-black);
+            transform: scale(1.05);
+        }
+        .btn span {
+            position: relative;
+            z-index: 1;
+        }
+        /* Footer */
+        footer {
+            padding: 40px 30px;
+            margin: 20px;
+            border-radius: 20px;
+            text-align: center;
+        }
+        .footer-links {
+            display: flex;
+            justify-content: center;
+            gap: 30px;
+            margin-bottom: 20px;
+            list-style: none;
+        }
+        .footer-links a {
+            color: var(--text-secondary);
+            text-decoration: none;
+            transition: color 0.3s ease;
+        }
+        .footer-links a:hover {
+            color: var(--accent-yellow);
+        }
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            .nav-links {
+                display: none;
+            }
+            .search-bar {
+                min-width: auto;
+            }
+            .hero h1 {
+                font-size: 32px;
+            }
+            .games-grid {
+                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+            }
+            .profile-card {
+                flex-direction: column;
+                text-align: center;
+            }
+            .profile-stats {
+                justify-content: center;
+            }
+        }
+        /* Loading Animation */
+        .loading {
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            border: 3px solid var(--glass-border);
+            border-top-color: var(--accent-yellow);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        /* Tooltip */
+        .tooltip {
+            position: relative;
+        }
+        .tooltip::after {
+            content: attr(data-tooltip);
+            position: absolute;
+            bottom: 125%;
+            left: 50%;
+            transform: translateX(-50%);
+            padding: 8px 12px;
+            background: var(--glass-bg);
+            color: var(--accent-yellow);
+            border-radius: 8px;
+            font-size: 12px;
+            white-space: nowrap;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.3s ease;
+            border: 1px solid var(--glass-border);
+        }
+        .tooltip:hover::after {
+            opacity: 1;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <!-- Navigation -->
+        <nav class="glass">
+            <div class="nav-content">
+                <div class="logo">roblox</div>
+                <ul class="nav-links">
+                    <li><a href="#discover">Discover</a></li>
+                    <li><a href="#create">Create</a></li>
+                    <li><a href="#marketplace">Marketplace</a></li>
+                    <li><a href="#robux">Get Robux</a></li>
+                </ul>
+                <div class="search-bar glass">
+                    <span class="search-icon">🔍</span>
+                    <input type="text" placeholder="Искать игры, предметы и многое другое...">
+                </div>
+            </div>
+        </nav>
+        <!-- Hero Section -->
+        <section class="hero glass">
+            <h1>Добро пожаловать в Roblox</h1>
+            <p>Исследуй миллионы игр и создавай свои собственные миры</p>
+            <button class="cta-button" onclick="handlePlay()">Начать игру</button>
+        </section>
+        <!-- Games Section -->
+        <section class="games-section glass">
+            <div class="section-header">
+                <h2>Популярные игры</h2>
+                <a href="#" class="view-all">Смотреть все →</a>
+            </div>
+            <div class="games-grid" id="gamesGrid">
+                <!-- Games will be dynamically added -->
+            </div>
+        </section>
+        <!-- Profile Section -->
+        <section class="profile-section glass">
+            <div class="profile-card">
+                <div class="avatar">
+                    <img src="https://picsum.photos/seed/avatar1/200/200" alt="Avatar">
+                </div>
+                <div class="profile-info">
+                    <h3>ИгровойПрофиль</h3>
+                    <p>Уровень 42 • Онлайн</p>
+                    <div class="profile-stats">
+                        <div class="stat-item">
+                            <div class="stat-value">1.2K</div>
+                            <div class="stat-label">Друзей</div>
+                        </div>
+                        <div class="stat-item">
+                            <div class="stat-value">234</div>
+                            <div class="stat-label">Следующие</div>
+                        </div>
+                        <div class="stat-item">
+                            <div class="stat-value">89</div>
+                            <div class="stat-label">Созданные игры</div>
+                        </div>
+                    </div>
+                    <div style="margin-top: 20px;">
+                        <button class="btn"><span>Редактировать профиль</span></button>
+                        <button class="btn tooltip" data-tooltip="Настройки"><span>⚙️</span></button>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Categories -->
+        <section class="games-section glass">
+            <div class="section-header">
+                <h2>Категории</h2>
+            </div>
+            <div style="display: flex; gap: 15px; flex-wrap: wrap;">
+                <button class="btn"><span>😎 Приключения</span></button>
+                <button class="btn"><span>🏰 RPG</span></button>
+                <button class="btn"><span>🎯 Симуляторы</span></button>
+                <button class="btn"><span>⚔️ Боевые</span></button>
+                <button class="btn"><span>🏃 Спорт</span></button>
+                <button class="btn"><span>🎮 Аркады</span></button>
+                <button class="btn"><span>🎨 Творчество</span></button>
+                <button class="btn"><span>👥 Социальные</span></button>
+            </div>
+        </section>
+        <!-- Footer -->
+        <footer class="glass">
+            <ul class="footer-links">
+                <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>
+            <p style="color: var(--text-secondary); font-size: 14px; margin-top: 10px;">
+                Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" style="color: var(--accent-yellow); text-decoration: none;">anycoder</a>
+            </p>
+        </footer>
+    </div>
+    <script>
+        // Game data
+        const games = [
+            { name: 'Adopt Me!', players: '150K+', image: 'adoptme' },
+            { name: 'Brookhaven', players: '120K+', image: 'brookhaven' },
+            { name: 'Tower of Hell', players: '85K+', image: 'tower' },
+            { name: 'MeepCity', players: '70K+', image: 'meepcity' },
+            { name: 'Royale High', players: '95K+', image: 'royale' },
+            { name: 'Jailbreak', players: '60K+', image: 'jailbreak' }
+        ];
+        // Populate games grid
+        function populateGames() {
+            const gamesGrid = document.getElementById('gamesGrid');
+            games.forEach(game => {
+                const gameCard = document.createElement('div');
+                gameCard.className = 'game-card glass';
+                gameCard.innerHTML = `
+                    <div class="game-thumbnail">
+                        <img src="https://picsum.photos/seed/${game.image}/300/200" alt="${game.name}">
+                    </div>
+                    <div class="game-info">
+                        <h3>${game.name}</h3>
+                        <p>🎮 Игра</p>
+                        <div class="game-stats">
+                            <span>👥 ${game.players}</span>
+                            <span>⭐ 4.8</span>
+                        </div>
+                    </div>
+                `;
+                gameCard.onclick = () => handleGameClick(game.name);
+                gamesGrid.appendChild(gameCard);
+            });
+        }
+        // Handle play button click
+        function handlePlay() {
+            const button = event.target;
+            button.innerHTML = '<span class="loading"></span> Загрузка...';
+            button.disabled = true;
+            setTimeout(() => {
+                button.innerHTML = 'Начать игру';
+                button.disabled = false;
+                showNotification('Готово к игре! 🎮');
+            }, 2000);
+        }
+        // Handle game card click
+        function handleGameClick(gameName) {
+            showNotification(`Запускаем ${gameName}...`);
+        }
+        // Show notification
+        function showNotification(message) {
+            const notification = document.createElement('div');
+            notification.style.cssText = `
+                position: fixed;
+                top: 20px;
+                right: 20px;
+                padding: 15px 25px;
+                background: var(--glass-bg);
+                backdrop-filter: blur(10px);
+                border: 1px solid var(--accent-yellow);
+                border-radius: 10px;
+                color: var(--accent-yellow);
+                font-family: var(--handwritten);
+                z-index: 2000;
+                animation: slideIn 0.3s ease;
+            `;
+            notification.textContent = message;
+            document.body.appendChild(notification);
+            setTimeout(() => {
+                notification.style.animation = 'slideOut 0.3s ease';
+                setTimeout(() => notification.remove(), 300);
+            }, 3000);
+        }
+        // Add animations
+        const style = document.createElement('style');
+        style.textContent = `
+            @keyframes slideIn {
+                from { transform: translateX(100%); opacity: 0; }
+                to { transform: translateX(0); opacity: 1; }
+            }
+            @keyframes slideOut {
+                from { transform: translateX(0); opacity: 1; }
+                to { transform: translateX(100%); opacity: 0; }
+            }
+        `;
+        document.head.appendChild(style);
+        // Initialize
+        document.addEventListener('DOMContentLoaded', () => {
+            populateGames();
+            // Add search functionality
+            document.querySelector('.search-bar input').addEventListener('keypress', (e) => {
+                if (e.key === 'Enter') {
+                    const searchTerm = e.target.value;
+                    if (searchTerm) {
+                        showNotification(`Поиск: "${searchTerm}"`);
+                        e.target.value = '';
+                    }
+                }
+            });
+            // Add smooth scroll
+            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+                anchor.addEventListener('click', function (e) {
+                    e.preventDefault();
+                    const target = document.querySelector(this.getAttribute('href'));
+                    if (target) {
+                        target.scrollIntoView({ behavior: 'smooth' });
+                    }
+                });
+            });
+            // Add interactive hover effects
+            document.querySelectorAll('.game-card').forEach(card => {
+                card.addEventListener('mouseenter', () => {
+                    card.style.transform = 'translateY(-5px) scale(1.02)';
+                });
+                card.addEventListener('mouseleave', () => {
+                    card.style.transform = 'translateY(0) scale(1)';
+                });
+            });
+        });
+        // Add keyboard shortcuts
+        document.addEventListener('keydown', (e) => {
+            // Ctrl/Cmd + K for search focus
+            if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+                e.preventDefault();
+                document.querySelector('.search-bar input').focus();
+            }
+        });
+    </script>
+</body>
+</html>