Spaces:

oncoming
/

datacatcher

Running

App Files Files Community

oncoming commited on Mar 29, 2025

Commit

af5cac8

verified ·

1 Parent(s): 69e3ee7

Add 2 files

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +554 -19

README.md CHANGED Viewed

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

 ---
+title: datacatcher
+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,554 @@
-<!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>Данные о пользователях - Темная тема</title>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto:wght@300;400;700&display=swap');
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Roboto', sans-serif;
+            overflow: hidden;
+            background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
+            color: #e6f7ff;
+            height: 100vh;
+            position: relative;
+        }
+        #gameContainer {
+            position: relative;
+            width: 100%;
+            height: 100%;
+        }
+        /* Темный фон с тонкими звездами */
+        #chainBackground {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-image:
+                radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px),
+                radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px),
+                radial-gradient(circle, rgba(255,255,255,0.15) 1px, transparent 1px);
+            background-size: 100px 100px, 150px 150px, 200px 200px;
+            z-index: 1;
+            pointer-events: none;
+        }
+        #header {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            padding: 10px;
+            background: linear-gradient(90deg, rgba(0, 40, 83, 0.9), rgba(9, 48, 90, 0.9));
+            z-index: 10;
+            text-align: center;
+            font-family: 'Orbitron', sans-serif;
+            border-bottom: 2px solid #1e88e5;
+            height: 80px;
+            color: white;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+        }
+        #header h1 {
+            text-shadow: 0 0 10px rgba(30, 136, 229, 0.7);
+            margin-bottom: 5px;
+        }
+        #scoreBoard {
+            display: flex;
+            justify-content: space-around;
+            margin-top: 5px;
+            color: #e6f7ff;
+            font-size: 14px;
+        }
+        .cube-source {
+            position: absolute;
+            top: 100px;
+            display: flex;
+            width: 100%;
+            justify-content: space-evenly;
+            z-index: 2;
+        }
+        .source-company {
+            width: 90px;
+            height: 30px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 10px;
+            font-weight: bold;
+            color: #fff;
+            background: linear-gradient(135deg, #1a237e, #283593);
+            border-radius: 5px;
+            border: 1px solid rgba(41, 98, 255, 0.3);
+            box-shadow: 0 2px 15px rgba(26, 35, 126, 0.4);
+            padding: 2px;
+            text-align: center;
+            transition: all 0.3s;
+            text-shadow: 0 1px 2px rgba(0,0,0,0.3);
+        }
+        .source-company:hover {
+            transform: scale(1.1);
+            box-shadow: 0 0 15px rgba(63, 81, 181, 0.7);
+        }
+        .falling-data {
+            position: absolute;
+            width: 30px;
+            height: 30px;
+            border-radius: 5px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 10px;
+            font-weight: bold;
+            color: white;
+            z-index: 3;
+            transition: background 0.3s;
+            top: 140px;
+            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);
+            text-shadow: 0 1px 2px rgba(0,0,0,0.3);
+            border: 1px solid rgba(255,255,255,0.1);
+        }
+        #platform {
+            position: absolute;
+            width: 120px;
+            height: 20px;
+            background: linear-gradient(90deg, #1e88e5, #64b5f6);
+            border-radius: 10px;
+            bottom: 30px;
+            left: 50%;
+            transform: translateX(-50%);
+            z-index: 5;
+            box-shadow: 0 4px 20px rgba(30, 136, 229, 0.5);
+            transition: all 0.5s;
+        }
+        #platform::after {
+            content: 'DataNova';
+            position: absolute;
+            bottom: -20px;
+            left: 0;
+            width: 100%;
+            text-align: center;
+            font-size: 12px;
+            font-weight: bold;
+            color: #64b5f6;
+            text-shadow: 0 0 5px rgba(100, 181, 246, 0.7);
+        }
+        #levelUpEffect {
+            position: absolute;
+            width: 0;
+            height: 0;
+            border-radius: 50%;
+            background: radial-gradient(circle, rgba(30,136,229,0.8) 0%, rgba(30,136,229,0) 70%);
+            z-index: 4;
+            pointer-events: none;
+            opacity: 0;
+        }
+        #levelUpMessage {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 28px;
+            font-weight: bold;
+            color: #64b5f6;
+            opacity: 0;
+            z-index: 20;
+            pointer-events: none;
+            text-shadow: 0 0 10px rgba(100, 181, 246, 0.7);
+            font-family: 'Orbitron', sans-serif;
+        }
+        #gameOver {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: radial-gradient(circle, rgba(0,40,83,0.95), rgba(9,48,90,0.95));
+            display: none;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            z-index: 30;
+            color: white;
+        }
+        #gameOver h2 {
+            font-size: 32px;
+            margin-bottom: 20px;
+            font-family: 'Orbitron', sans-serif;
+            text-shadow: 0 0 10px rgba(30, 136, 229, 0.7);
+        }
+        #gameOver p {
+            font-size: 18px;
+            margin-bottom: 10px;
+            color: #bbdefb;
+        }
+        #restartButton {
+            margin-top: 30px;
+            padding: 12px 25px;
+            background: linear-gradient(135deg, #1e88e5, #1976d2);
+            color: white;
+            border: none;
+            border-radius: 25px;
+            font-size: 18px;
+            cursor: pointer;
+            transition: all 0.3s;
+            box-shadow: 0 4px 15px rgba(30, 136, 229, 0.4);
+            font-family: 'Orbitron', sans-serif;
+        }
+        #restartButton:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 8px 20px rgba(30, 136, 229, 0.6);
+        }
+        .particle {
+            position: absolute;
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            pointer-events: none;
+            z-index: 4;
+            box-shadow: 0 0 10px rgba(100, 181, 246, 0.8);
+        }
+        /* Эффект неонового свечения при наведении */
+        .source-company,
+        #restartButton,
+        #platform {
+            transition: all 0.3s ease;
+        }
+        .source-company:hover,
+        #restartButton:hover {
+            filter: drop-shadow(0 0 5px currentColor);
+        }
+    </style>
+</head>
+<body>
+    <div id="gameContainer">
+        <div id="chainBackground"></div>
+        <div id="header">
+            <h1>Данные о пользователях</h1>
+            <div id="scoreBoard">
+                <div>Уровень: <span id="levelDisplay">1</span></div>
+                <div>Данные: <span id="scoreDisplay">0</span>/<span id="nextLevelDisplay">5</span></div>
+            </div>
+        </div>
+        <div class="cube-source">
+            <div class="source-company">ГазпромБанк</div>
+            <div class="source-company">ГазпромНефть</div>
+            <div class="source-company">МРГ</div>
+            <div class="source-company">Premier</div>
+            <div class="source-company">Rutube</div>
+            <div class="source-company">Матч</div>
+            <div class="source-company">ГазпромБонус</div>
+        </div>
+        <div id="platform"></div>
+        <div id="levelUpEffect"></div>
+        <div id="levelUpMessage">Уровень повышен!</div>
+        <div id="gameOver">
+            <h2>Игра окончена!</h2>
+            <p>Вы достигли уровня: <span id="finalLevel">1</span></p>
+            <p>Всего собрано данных: <span id="finalScore">0</span></p>
+            <button id="restartButton">Играть снова</button>
+        </div>
+    </div>
+    <script>
+        // Game state
+        const state = {
+            score: 0,
+            level: 1,
+            nextLevelScore: 5,
+            gameOver: false,
+            companyColors: {
+                'ГазпромБанк': '#43a047',
+                'ГазпромНефть': '#1e88e5',
+                'МРГ': '#8e24aa',
+                'Premier': '#e53935',
+                'Rutube': '#fb8c00',
+                'Матч': '#00acc1',
+                'ГазпромБонус': '#fdd835'
+            },
+            platformSpeeds: {
+                1: 5,
+                2: 7,
+                3: 9,
+                4: 11,
+                5: 13,
+                6: 15,
+                7: 17
+            },
+            platformWidths: {
+                1: 120,
+                2: 140,
+                3: 160,
+                4: 180,
+                5: 200,
+                6: 220,
+                7: 240
+            },
+            platformColors: {
+                1: ['#1e88e5', '#64b5f6'],
+                2: ['#5c6bc0', '#9fa8da'],
+                3: ['#00897b', '#4db6ac'],
+                4: ['#ff8f00', '#ffb74d'],
+                5: ['#6a1b9a', '#ab47bc'],
+                6: ['#d32f2f', '#ef5350'],
+                7: ['#00838f', '#80deea']
+            }
+        };
+        // DOM elements
+        const gameContainer = document.getElementById('gameContainer');
+        const platform = document.getElementById('platform');
+        const scoreDisplay = document.getElementById('scoreDisplay');
+        const levelDisplay = document.getElementById('levelDisplay');
+        const nextLevelDisplay = document.getElementById('nextLevelDisplay');
+        const levelUpEffect = document.getElementById('levelUpEffect');
+        const levelUpMessage = document.getElementById('levelUpMessage');
+        const gameOverScreen = document.getElementById('gameOver');
+        const finalLevel = document.getElementById('finalLevel');
+        const finalScore = document.getElementById('finalScore');
+        const restartButton = document.getElementById('restartButton');
+        // Initialize game
+        function initGame() {
+            state.score = 0;
+            state.level = 1;
+            state.nextLevelScore = 5;
+            state.gameOver = false;
+            gameOverScreen.style.display = 'none';
+            updateScore();
+            document.querySelectorAll('.falling-data').forEach(el => el.remove());
+            updatePlatform();
+            if (state.gameLoop) {
+                clearInterval(state.gameLoop);
+            }
+            if (state.dataGenerator) {
+                clearInterval(state.dataGenerator);
+            }
+            state.dataGenerator = setInterval(generateData, 1500);
+            state.gameLoop = setInterval(updateGame, 16);
+        }
+        function generateData() {
+            if (state.gameOver) return;
+            const companies = Object.keys(state.companyColors);
+            const randomCompany = companies[Math.floor(Math.random() * companies.length)];
+            const dataCube = document.createElement('div');
+            dataCube.className = 'falling-data';
+            dataCube.textContent = randomCompany.substring(0, 3);
+            dataCube.style.backgroundColor = state.companyColors[randomCompany];
+            const maxLeft = gameContainer.clientWidth - 30;
+            const leftPos = Math.floor(Math.random() * maxLeft);
+            dataCube.style.left = `${leftPos}px`;
+            dataCube.dataset.company = randomCompany;
+            dataCube.dataset.speed = (2 + Math.random() * 2 + state.level * 0.5).toFixed(2);
+            gameContainer.appendChild(dataCube);
+        }
+        function updateGame() {
+            if (state.gameOver) return;
+            const dataCubes = document.querySelectorAll('.falling-data');
+            dataCubes.forEach(cube => {
+                const currentTop = parseFloat(cube.style.top) || 140;
+                const speed = parseFloat(cube.dataset.speed);
+                const newTop = currentTop + speed;
+                cube.style.top = `${newTop}px`;
+                if (checkCollision(cube)) {
+                    handleDataCapture(cube);
+                }
+                if (newTop > gameContainer.clientHeight) {
+                    handleMissedData(cube);
+                }
+            });
+            if (state.mouseX !== undefined) {
+                const containerRect = gameContainer.getBoundingClientRect();
+                let platformLeft = state.mouseX - containerRect.left - platform.clientWidth / 2;
+                platformLeft = Math.max(0, Math.min(platformLeft, containerRect.width - platform.clientWidth));
+                platform.style.left = `${platformLeft}px`;
+            }
+        }
+        function checkCollision(cube) {
+            const cubeRect = cube.getBoundingClientRect();
+            const platformRect = platform.getBoundingClientRect();
+            return cubeRect.bottom >= platformRect.top &&
+                   cubeRect.right >= platformRect.left &&
+                   cubeRect.left <= platformRect.right &&
+                   cubeRect.top <= platformRect.bottom;
+        }
+        function handleDataCapture(cube) {
+            state.score += 1;
+            updateScore();
+            createParticles(cube);
+            if (state.score >= state.nextLevelScore) {
+                levelUp();
+            }
+            cube.remove();
+        }
+        function handleMissedData(cube) {
+            cube.remove();
+        }
+        function updateScore() {
+            scoreDisplay.textContent = state.score;
+            levelDisplay.textContent = state.level;
+            nextLevelDisplay.textContent = state.nextLevelScore;
+        }
+        function levelUp() {
+            state.level += 1;
+            // Установка новых значений для получения следующего уровня: 5, 10, 15 и т.д.
+            state.nextLevelScore = state.level * 5;
+            updatePlatform();
+            showLevelUpEffect();
+            updateScore();
+        }
+        function updatePlatform() {
+            platform.style.width = `${state.platformWidths[Math.min(state.level, 7)]}px`;
+            platform.style.background = `linear-gradient(90deg, ${state.platformColors[Math.min(state.level, 7)][0]}, ${state.platformColors[Math.min(state.level, 7)][1]})`;
+            platform.style.boxShadow = `0 4px 20px ${state.platformColors[Math.min(state.level, 7)][0]}80`;
+        }
+        function showLevelUpEffect() {
+            const platformRect = platform.getBoundingClientRect();
+            levelUpEffect.style.left = `${platformRect.left}px`;
+            levelUpEffect.style.top = `${platformRect.top}px`;
+            levelUpEffect.style.width = `${platformRect.width * 2}px`;
+            levelUpEffect.style.height = `${platformRect.height * 10}px`;
+            levelUpEffect.style.opacity = '1';
+            levelUpEffect.style.transform = 'translate(-50%, -50%)';
+            levelUpEffect.style.background = `radial-gradient(circle, ${state.platformColors[Math.min(state.level, 7)][0]}80 0%, ${state.platformColors[Math.min(state.level, 7)][0]}00 70%)`;
+            levelUpMessage.style.opacity = '1';
+            levelUpMessage.style.color = state.platformColors[Math.min(state.level, 7)][1];
+            levelUpMessage.style.textShadow = `0 0 15px ${state.platformColors[Math.min(state.level, 7)][1]}`;
+            setTimeout(() => {
+                levelUpEffect.style.transition = 'all 0.5s ease-out';
+                levelUpEffect.style.opacity = '0';
+                levelUpEffect.style.width = '0';
+                levelUpEffect.style.height = '0';
+                levelUpMessage.style.transition = 'opacity 0.5s ease-out';
+                levelUpMessage.style.opacity = '0';
+                setTimeout(() => {
+                    levelUpEffect.style.transition = 'none';
+                    levelUpMessage.style.transition = 'none';
+                }, 500);
+            }, 1000);
+        }
+        function createParticles(cube) {
+            const cubeRect = cube.getBoundingClientRect();
+            const color = cube.style.backgroundColor;
+            for (let i = 0; i < 15; i++) {
+                const particle = document.createElement('div');
+                particle.className = 'particle';
+                particle.style.backgroundColor = color;
+                particle.style.left = `${cubeRect.left + cubeRect.width / 2}px`;
+                particle.style.top = `${cubeRect.top + cubeRect.height / 2}px`;
+                particle.style.boxShadow = `0 0 15px ${color}`;
+                document.body.appendChild(particle);
+                const angle = Math.random() * Math.PI * 2;
+                const speed = 2 + Math.random() * 3;
+                const vx = Math.cos(angle) * speed;
+                const vy = Math.sin(angle) * speed;
+                let posX = cubeRect.left + cubeRect.width / 2;
+                let posY = cubeRect.top + cubeRect.height / 2;
+                const animateParticle = () => {
+                    posX += vx;
+                    posY += vy;
+                    particle.style.left = `${posX}px`;
+                    particle.style.top = `${posY}px`;
+                    particle.style.opacity = parseFloat(particle.style.opacity || 1) - 0.02;
+                    if (parseFloat(particle.style.opacity || 1) > 0) {
+                        requestAnimationFrame(animateParticle);
+                    } else {
+                        particle.remove();
+                    }
+                };
+                requestAnimationFrame(animateParticle);
+            }
+        }
+        function gameOver() {
+            state.gameOver = true;
+            clearInterval(state.gameLoop);
+            clearInterval(state.dataGenerator);
+            finalLevel.textContent = state.level;
+            finalScore.textContent = state.score;
+            gameOverScreen.style.display = 'flex';
+        }
+        function handleMouseMove(e) {
+            state.mouseX = e.clientX;
+        }
+        gameContainer.addEventListener('mousemove', handleMouseMove);
+        restartButton.addEventListener('click', initGame);
+        initGame();
+    </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>