| <!DOCTYPE html> |
| <html lang="ru"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>РЕСУРС — Инновационная группа</title> |
| <style> |
| html, body { |
| height: 100%; |
| margin: 0; |
| padding: 0; |
| overflow: hidden; |
| background: #0B1750; |
| } |
| body { |
| width: 100vw; |
| height: 100vh; |
| position: relative; |
| } |
| #logo-container { |
| position: absolute; |
| left: 50%; |
| top: 50%; |
| transform: translate(-50%, -50%); |
| z-index: 2; |
| text-align: center; |
| } |
| #logo { |
| width: 400px; |
| max-width: 90vw; |
| height: auto; |
| display: block; |
| margin: 0 auto; |
| } |
| #web-bg { |
| position: fixed; |
| top: 0; left: 0; |
| width: 100vw; |
| height: 100vh; |
| z-index: 1; |
| display: block; |
| } |
| </style> |
| </head> |
| <body> |
| <canvas id="web-bg"></canvas> |
| <div id="logo-container"> |
| <img id="logo" src="http://1.chat-gpt-online.ru/1.png" alt="РЕСУРС — Инновационная группа"> |
| <div style="margin-top: 32px; color: #fff; font-size: 2rem; font-family: Arial, sans-serif; letter-spacing: 1px;"> |
| новый сайт в разработке |
| </div> |
| </div> |
| <script> |
| const POINTS = 300; |
| const LINK_DIST = 120; |
| const SPEED = 0.20; |
| const MOUSE_RADIUS = 50; |
| const ATTRACT_STRENGTH = 0.015; |
| const CHAOS = 0.008; |
| |
| const canvas = document.getElementById('web-bg'); |
| const ctx = canvas.getContext('2d'); |
| let width = window.innerWidth; |
| let height = window.innerHeight; |
| |
| function resize() { |
| width = window.innerWidth; |
| height = window.innerHeight; |
| canvas.width = width; |
| canvas.height = height; |
| } |
| window.addEventListener('resize', resize); |
| resize(); |
| |
| |
| let points = []; |
| for (let i = 0; i < POINTS; i++) { |
| |
| let angle = Math.random() * Math.PI * 2; |
| points.push({ |
| x: Math.random() * width, |
| y: Math.random() * height, |
| vx: Math.cos(angle) * SPEED, |
| vy: Math.sin(angle) * SPEED, |
| angle: angle, |
| angleSpeed: (Math.random() - 0.5) * CHAOS |
| }); |
| } |
| |
| |
| let mouse = { x: null, y: null, active: false }; |
| |
| canvas.addEventListener('mousemove', function(e) { |
| const rect = canvas.getBoundingClientRect(); |
| mouse.x = e.clientX - rect.left; |
| mouse.y = e.clientY - rect.top; |
| mouse.active = true; |
| }); |
| canvas.addEventListener('mouseleave', function() { |
| mouse.active = false; |
| }); |
| |
| function animate() { |
| ctx.clearRect(0, 0, width, height); |
| |
| for (let p of points) { |
| |
| p.angle += p.angleSpeed; |
| |
| p.angleSpeed += (Math.random() - 0.5) * CHAOS * 0.2; |
| p.angleSpeed = Math.max(Math.min(p.angleSpeed, CHAOS), -CHAOS); |
| |
| |
| p.vx += (Math.cos(p.angle) * SPEED - p.vx) * 0.02; |
| p.vy += (Math.sin(p.angle) * SPEED - p.vy) * 0.02; |
| |
| |
| if (mouse.active) { |
| let dx = mouse.x - p.x; |
| let dy = mouse.y - p.y; |
| let dist = Math.sqrt(dx * dx + dy * dy); |
| if (dist < MOUSE_RADIUS) { |
| let force = (1 - dist / MOUSE_RADIUS) * ATTRACT_STRENGTH; |
| p.vx += dx * force; |
| p.vy += dy * force; |
| } |
| } |
| |
| |
| p.vx *= 0.96; |
| p.vy *= 0.96; |
| |
| p.x += p.vx; |
| p.y += p.vy; |
| |
| |
| if (p.x < 0) { p.x = 0; p.vx *= -1; } |
| if (p.x > width) { p.x = width; p.vx *= -1; } |
| if (p.y < 0) { p.y = 0; p.vy *= -1; } |
| if (p.y > height) { p.y = height; p.vy *= -1; } |
| } |
| |
| |
| for (let i = 0; i < POINTS; i++) { |
| for (let j = i + 1; j < POINTS; j++) { |
| let dx = points[i].x - points[j].x; |
| let dy = points[i].y - points[j].y; |
| let dist = Math.sqrt(dx * dx + dy * dy); |
| if (dist < LINK_DIST) { |
| ctx.strokeStyle = `rgba(255,255,255,${1 - dist / LINK_DIST})`; |
| ctx.lineWidth = 1; |
| ctx.beginPath(); |
| ctx.moveTo(points[i].x, points[i].y); |
| ctx.lineTo(points[j].x, points[j].y); |
| ctx.stroke(); |
| } |
| } |
| } |
| |
| |
| for (let p of points) { |
| ctx.beginPath(); |
| ctx.arc(p.x, p.y, 2, 0, 2 * Math.PI); |
| ctx.fillStyle = "#fff"; |
| ctx.fill(); |
| } |
| |
| requestAnimationFrame(animate); |
| } |
| |
| animate(); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=wer32/resource" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
