Spaces:
Running
Running
| <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> |