|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Neon Snake - Ultimate Snake Game</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Orbitron:wght@400;700&display=swap'); |
|
|
|
|
|
:root { |
|
|
--neon-green: #39ff14; |
|
|
--neon-pink: #ff2ced; |
|
|
--neon-blue: #00e5ff; |
|
|
--neon-purple: #9d00ff; |
|
|
--dark-bg: #0f0f1a; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Orbitron', sans-serif; |
|
|
background-color: var(--dark-bg); |
|
|
color: white; |
|
|
overflow: hidden; |
|
|
height: 100vh; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.game-container { |
|
|
position: relative; |
|
|
width: 90vmin; |
|
|
height: 90vmin; |
|
|
max-width: 600px; |
|
|
max-height: 600px; |
|
|
border: 4px solid var(--neon-purple); |
|
|
border-radius: 8px; |
|
|
box-shadow: 0 0 20px var(--neon-purple), |
|
|
inset 0 0 20px var(--neon-purple); |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
#game-canvas { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background-color: rgba(15, 15, 26, 0.8); |
|
|
} |
|
|
|
|
|
.snake-segment { |
|
|
position: absolute; |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
background-color: var(--neon-green); |
|
|
border-radius: 4px; |
|
|
box-shadow: 0 0 10px var(--neon-green); |
|
|
transition: transform 0.1s ease-out; |
|
|
} |
|
|
|
|
|
.snake-head { |
|
|
background-color: var(--neon-blue); |
|
|
box-shadow: 0 0 15px var(--neon-blue); |
|
|
z-index: 10; |
|
|
} |
|
|
|
|
|
.food { |
|
|
position: absolute; |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
background-color: var(--neon-pink); |
|
|
border-radius: 50%; |
|
|
box-shadow: 0 0 15px var(--neon-pink); |
|
|
animation: pulse 1.5s infinite alternate; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { transform: scale(1); opacity: 1; } |
|
|
100% { transform: scale(1.2); opacity: 0.8; } |
|
|
} |
|
|
|
|
|
.score-display { |
|
|
font-family: 'Press Start 2P', cursive; |
|
|
font-size: 1.5rem; |
|
|
color: var(--neon-green); |
|
|
text-shadow: 0 0 10px var(--neon-green); |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.controls { |
|
|
display: flex; |
|
|
gap: 1rem; |
|
|
margin-top: 1rem; |
|
|
} |
|
|
|
|
|
.btn { |
|
|
background: transparent; |
|
|
color: white; |
|
|
border: 2px solid var(--neon-blue); |
|
|
padding: 0.5rem 1rem; |
|
|
border-radius: 4px; |
|
|
font-family: 'Orbitron', sans-serif; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s; |
|
|
box-shadow: 0 0 10px var(--neon-blue); |
|
|
} |
|
|
|
|
|
.btn:hover { |
|
|
background: var(--neon-blue); |
|
|
color: black; |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 0 20px var(--neon-blue); |
|
|
} |
|
|
|
|
|
.modal { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background-color: rgba(0, 0, 0, 0.8); |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
z-index: 100; |
|
|
opacity: 0; |
|
|
pointer-events: none; |
|
|
transition: opacity 0.3s; |
|
|
} |
|
|
|
|
|
.modal.active { |
|
|
opacity: 1; |
|
|
pointer-events: all; |
|
|
} |
|
|
|
|
|
.modal-content { |
|
|
background-color: var(--dark-bg); |
|
|
border: 3px solid var(--neon-purple); |
|
|
border-radius: 8px; |
|
|
padding: 2rem; |
|
|
max-width: 500px; |
|
|
width: 90%; |
|
|
text-align: center; |
|
|
box-shadow: 0 0 30px var(--neon-purple); |
|
|
transform: scale(0.9); |
|
|
transition: transform 0.3s; |
|
|
} |
|
|
|
|
|
.modal.active .modal-content { |
|
|
transform: scale(1); |
|
|
} |
|
|
|
|
|
.modal-title { |
|
|
color: var(--neon-green); |
|
|
font-size: 2rem; |
|
|
margin-bottom: 1rem; |
|
|
text-shadow: 0 0 10px var(--neon-green); |
|
|
} |
|
|
|
|
|
.game-over { |
|
|
color: var(--neon-pink); |
|
|
font-size: 3rem; |
|
|
margin-bottom: 1rem; |
|
|
text-shadow: 0 0 15px var(--neon-pink); |
|
|
animation: blink 0.5s infinite alternate; |
|
|
} |
|
|
|
|
|
@keyframes blink { |
|
|
0% { opacity: 1; } |
|
|
100% { opacity: 0.5; } |
|
|
} |
|
|
|
|
|
.grid-lines { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background-image: |
|
|
linear-gradient(rgba(57, 255, 20, 0.05) 1px, transparent 1px), |
|
|
linear-gradient(90deg, rgba(57, 255, 20, 0.05) 1px, transparent 1px); |
|
|
background-size: 20px 20px; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
.particle { |
|
|
position: absolute; |
|
|
width: 4px; |
|
|
height: 4px; |
|
|
background-color: var(--neon-blue); |
|
|
border-radius: 50%; |
|
|
pointer-events: none; |
|
|
opacity: 0; |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.controls { |
|
|
flex-direction: column; |
|
|
gap: 0.5rem; |
|
|
} |
|
|
|
|
|
.score-display { |
|
|
font-size: 1rem; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="grid-lines"></div> |
|
|
|
|
|
<h1 class="text-4xl mb-4 font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-blue-500"> |
|
|
NEON SNAKE |
|
|
</h1> |
|
|
|
|
|
<div class="score-display"> |
|
|
SCORE: <span id="score">0</span> | HIGH: <span id="high-score">0</span> |
|
|
</div> |
|
|
|
|
|
<div class="game-container"> |
|
|
<canvas id="game-canvas"></canvas> |
|
|
<div id="game-elements"></div> |
|
|
</div> |
|
|
|
|
|
<div class="controls mt-6"> |
|
|
<button id="start-btn" class="btn"> |
|
|
<i class="fas fa-play mr-2"></i> START |
|
|
</button> |
|
|
<button id="pause-btn" class="btn" disabled> |
|
|
<i class="fas fa-pause mr-2"></i> PAUSE |
|
|
</button> |
|
|
<button id="restart-btn" class="btn"> |
|
|
<i class="fas fa-redo mr-2"></i> RESTART |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="modal" id="game-over-modal"> |
|
|
<div class="modal-content"> |
|
|
<div class="game-over">GAME OVER!</div> |
|
|
<h2 class="modal-title">Your Score: <span id="final-score">0</span></h2> |
|
|
<p class="text-white mb-4">Try again to beat your high score!</p> |
|
|
<button id="play-again-btn" class="btn"> |
|
|
<i class="fas fa-gamepad mr-2"></i> PLAY AGAIN |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="absolute bottom-4 right-4 text-xs text-gray-500"> |
|
|
Use arrow keys or swipe to control |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
|
|
|
const canvas = document.getElementById('game-canvas'); |
|
|
const ctx = canvas.getContext('2d'); |
|
|
const gameElements = document.getElementById('game-elements'); |
|
|
const scoreDisplay = document.getElementById('score'); |
|
|
const highScoreDisplay = document.getElementById('high-score'); |
|
|
const finalScoreDisplay = document.getElementById('final-score'); |
|
|
|
|
|
|
|
|
const startBtn = document.getElementById('start-btn'); |
|
|
const pauseBtn = document.getElementById('pause-btn'); |
|
|
const restartBtn = document.getElementById('restart-btn'); |
|
|
const playAgainBtn = document.getElementById('play-again-btn'); |
|
|
|
|
|
|
|
|
const gameOverModal = document.getElementById('game-over-modal'); |
|
|
|
|
|
|
|
|
const gridSize = 20; |
|
|
let canvasSize = Math.min(600, window.innerWidth - 40, window.innerHeight - 200); |
|
|
canvas.width = canvasSize; |
|
|
canvas.height = canvasSize; |
|
|
|
|
|
|
|
|
let snake = []; |
|
|
let food = {}; |
|
|
let direction = 'right'; |
|
|
let nextDirection = 'right'; |
|
|
let gameSpeed = 150; |
|
|
let score = 0; |
|
|
let highScore = localStorage.getItem('snakeHighScore') || 0; |
|
|
let gameInterval; |
|
|
let isPaused = false; |
|
|
let isGameOver = false; |
|
|
let isGameRunning = false; |
|
|
|
|
|
|
|
|
function initGame() { |
|
|
|
|
|
gameElements.innerHTML = ''; |
|
|
|
|
|
|
|
|
snake = [ |
|
|
{x: 5, y: 10}, |
|
|
{x: 4, y: 10}, |
|
|
{x: 3, y: 10} |
|
|
]; |
|
|
|
|
|
|
|
|
direction = 'right'; |
|
|
nextDirection = 'right'; |
|
|
|
|
|
|
|
|
score = 0; |
|
|
scoreDisplay.textContent = score; |
|
|
highScoreDisplay.textContent = highScore; |
|
|
|
|
|
|
|
|
generateFood(); |
|
|
|
|
|
|
|
|
isGameOver = false; |
|
|
isPaused = false; |
|
|
|
|
|
|
|
|
gameOverModal.classList.remove('active'); |
|
|
|
|
|
|
|
|
render(); |
|
|
} |
|
|
|
|
|
|
|
|
function startGame() { |
|
|
if (!isGameRunning) { |
|
|
isGameRunning = true; |
|
|
startBtn.disabled = true; |
|
|
pauseBtn.disabled = false; |
|
|
gameInterval = setInterval(gameLoop, gameSpeed); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function pauseGame() { |
|
|
if (isGameRunning && !isPaused) { |
|
|
isPaused = true; |
|
|
clearInterval(gameInterval); |
|
|
pauseBtn.innerHTML = '<i class="fas fa-play mr-2"></i> RESUME'; |
|
|
} else if (isGameRunning && isPaused) { |
|
|
isPaused = false; |
|
|
gameInterval = setInterval(gameLoop, gameSpeed); |
|
|
pauseBtn.innerHTML = '<i class="fas fa-pause mr-2"></i> PAUSE'; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function gameOver() { |
|
|
isGameOver = true; |
|
|
isGameRunning = false; |
|
|
clearInterval(gameInterval); |
|
|
startBtn.disabled = false; |
|
|
pauseBtn.disabled = true; |
|
|
|
|
|
|
|
|
if (score > highScore) { |
|
|
highScore = score; |
|
|
localStorage.setItem('snakeHighScore', highScore); |
|
|
highScoreDisplay.textContent = highScore; |
|
|
} |
|
|
|
|
|
|
|
|
finalScoreDisplay.textContent = score; |
|
|
gameOverModal.classList.add('active'); |
|
|
|
|
|
|
|
|
createExplosion(snake[0].x * gridSize, snake[0].y * gridSize); |
|
|
} |
|
|
|
|
|
|
|
|
function gameLoop() { |
|
|
if (isPaused || isGameOver) return; |
|
|
|
|
|
|
|
|
direction = nextDirection; |
|
|
|
|
|
|
|
|
const head = {...snake[0]}; |
|
|
|
|
|
switch (direction) { |
|
|
case 'up': |
|
|
head.y -= 1; |
|
|
break; |
|
|
case 'down': |
|
|
head.y += 1; |
|
|
break; |
|
|
case 'left': |
|
|
head.x -= 1; |
|
|
break; |
|
|
case 'right': |
|
|
head.x += 1; |
|
|
break; |
|
|
} |
|
|
|
|
|
|
|
|
if ( |
|
|
head.x < 0 || |
|
|
head.x >= canvas.width / gridSize || |
|
|
head.y < 0 || |
|
|
head.y >= canvas.height / gridSize || |
|
|
snake.some(segment => segment.x === head.x && segment.y === head.y) |
|
|
) { |
|
|
gameOver(); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
snake.unshift(head); |
|
|
|
|
|
|
|
|
if (head.x === food.x && head.y === food.y) { |
|
|
|
|
|
score += 10; |
|
|
scoreDisplay.textContent = score; |
|
|
|
|
|
|
|
|
if (gameSpeed > 50 && score % 50 === 0) { |
|
|
gameSpeed -= 5; |
|
|
clearInterval(gameInterval); |
|
|
gameInterval = setInterval(gameLoop, gameSpeed); |
|
|
} |
|
|
|
|
|
|
|
|
generateFood(); |
|
|
|
|
|
|
|
|
createParticles(food.x * gridSize + gridSize/2, food.y * gridSize + gridSize/2); |
|
|
} else { |
|
|
|
|
|
snake.pop(); |
|
|
} |
|
|
|
|
|
|
|
|
render(); |
|
|
} |
|
|
|
|
|
|
|
|
function generateFood() { |
|
|
let newFood; |
|
|
do { |
|
|
newFood = { |
|
|
x: Math.floor(Math.random() * (canvas.width / gridSize)), |
|
|
y: Math.floor(Math.random() * (canvas.height / gridSize)) |
|
|
}; |
|
|
} while (snake.some(segment => segment.x === newFood.x && segment.y === newFood.y)); |
|
|
|
|
|
food = newFood; |
|
|
|
|
|
|
|
|
const foodElement = document.createElement('div'); |
|
|
foodElement.className = 'food'; |
|
|
foodElement.style.left = `${food.x * gridSize}px`; |
|
|
foodElement.style.top = `${food.y * gridSize}px`; |
|
|
foodElement.style.width = `${gridSize}px`; |
|
|
foodElement.style.height = `${gridSize}px`; |
|
|
foodElement.id = 'food'; |
|
|
gameElements.appendChild(foodElement); |
|
|
} |
|
|
|
|
|
|
|
|
function render() { |
|
|
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height); |
|
|
|
|
|
|
|
|
snake.forEach((segment, index) => { |
|
|
const segmentElement = document.createElement('div'); |
|
|
segmentElement.className = index === 0 ? 'snake-segment snake-head' : 'snake-segment'; |
|
|
segmentElement.style.left = `${segment.x * gridSize}px`; |
|
|
segmentElement.style.top = `${segment.y * gridSize}px`; |
|
|
segmentElement.style.width = `${gridSize}px`; |
|
|
segmentElement.style.height = `${gridSize}px`; |
|
|
segmentElement.id = `segment-${index}`; |
|
|
|
|
|
|
|
|
const existingElement = document.getElementById(`segment-${index}`); |
|
|
if (existingElement) { |
|
|
existingElement.style.left = `${segment.x * gridSize}px`; |
|
|
existingElement.style.top = `${segment.y * gridSize}px`; |
|
|
} else { |
|
|
gameElements.appendChild(segmentElement); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const segmentElements = document.querySelectorAll('.snake-segment'); |
|
|
if (segmentElements.length > snake.length) { |
|
|
for (let i = snake.length; i < segmentElements.length; i++) { |
|
|
segmentElements[i].remove(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const foodElement = document.getElementById('food'); |
|
|
if (foodElement) { |
|
|
foodElement.style.left = `${food.x * gridSize}px`; |
|
|
foodElement.style.top = `${food.y * gridSize}px`; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function createParticles(x, y) { |
|
|
for (let i = 0; i < 15; i++) { |
|
|
const particle = document.createElement('div'); |
|
|
particle.className = 'particle'; |
|
|
particle.style.left = `${x}px`; |
|
|
particle.style.top = `${y}px`; |
|
|
|
|
|
|
|
|
const angle = Math.random() * Math.PI * 2; |
|
|
const speed = Math.random() * 3 + 1; |
|
|
const vx = Math.cos(angle) * speed; |
|
|
const vy = Math.sin(angle) * speed; |
|
|
|
|
|
document.body.appendChild(particle); |
|
|
|
|
|
|
|
|
let opacity = 1; |
|
|
let size = 4; |
|
|
let posX = x; |
|
|
let posY = y; |
|
|
|
|
|
const animate = () => { |
|
|
opacity -= 0.02; |
|
|
size -= 0.1; |
|
|
posX += vx; |
|
|
posY += vy; |
|
|
|
|
|
if (opacity <= 0 || size <= 0) { |
|
|
particle.remove(); |
|
|
return; |
|
|
} |
|
|
|
|
|
particle.style.opacity = opacity; |
|
|
particle.style.width = `${size}px`; |
|
|
particle.style.height = `${size}px`; |
|
|
particle.style.left = `${posX}px`; |
|
|
particle.style.top = `${posY}px`; |
|
|
|
|
|
requestAnimationFrame(animate); |
|
|
}; |
|
|
|
|
|
requestAnimationFrame(animate); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function createExplosion(x, y) { |
|
|
for (let i = 0; i < 30; i++) { |
|
|
const particle = document.createElement('div'); |
|
|
particle.className = 'particle'; |
|
|
particle.style.backgroundColor = i % 2 === 0 ? 'var(--neon-pink)' : 'var(--neon-blue)'; |
|
|
particle.style.left = `${x + gridSize/2}px`; |
|
|
particle.style.top = `${y + gridSize/2}px`; |
|
|
|
|
|
|
|
|
const angle = Math.random() * Math.PI * 2; |
|
|
const speed = Math.random() * 5 + 2; |
|
|
const vx = Math.cos(angle) * speed; |
|
|
const vy = Math.sin(angle) * speed; |
|
|
|
|
|
document.body.appendChild(particle); |
|
|
|
|
|
|
|
|
let opacity = 1; |
|
|
let size = Math.random() * 6 + 2; |
|
|
let posX = x + gridSize/2; |
|
|
let posY = y + gridSize/2; |
|
|
|
|
|
const animate = () => { |
|
|
opacity -= 0.02; |
|
|
size -= 0.1; |
|
|
posX += vx; |
|
|
posY += vy; |
|
|
|
|
|
if (opacity <= 0 || size <= 0) { |
|
|
particle.remove(); |
|
|
return; |
|
|
} |
|
|
|
|
|
particle.style.opacity = opacity; |
|
|
particle.style.width = `${size}px`; |
|
|
particle.style.height = `${size}px`; |
|
|
particle.style.left = `${posX}px`; |
|
|
particle.style.top = `${posY}px`; |
|
|
|
|
|
requestAnimationFrame(animate); |
|
|
}; |
|
|
|
|
|
requestAnimationFrame(animate); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function handleKeyDown(e) { |
|
|
if (!isGameRunning || isPaused) return; |
|
|
|
|
|
switch (e.key) { |
|
|
case 'ArrowUp': |
|
|
if (direction !== 'down') nextDirection = 'up'; |
|
|
break; |
|
|
case 'ArrowDown': |
|
|
if (direction !== 'up') nextDirection = 'down'; |
|
|
break; |
|
|
case 'ArrowLeft': |
|
|
if (direction !== 'right') nextDirection = 'left'; |
|
|
break; |
|
|
case 'ArrowRight': |
|
|
if (direction !== 'left') nextDirection = 'right'; |
|
|
break; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
let touchStartX = 0; |
|
|
let touchStartY = 0; |
|
|
|
|
|
function handleTouchStart(e) { |
|
|
touchStartX = e.touches[0].clientX; |
|
|
touchStartY = e.touches[0].clientY; |
|
|
} |
|
|
|
|
|
function handleTouchEnd(e) { |
|
|
if (!isGameRunning || isPaused) return; |
|
|
|
|
|
const touchEndX = e.changedTouches[0].clientX; |
|
|
const touchEndY = e.changedTouches[0].clientY; |
|
|
|
|
|
const dx = touchEndX - touchStartX; |
|
|
const dy = touchEndY - touchStartY; |
|
|
|
|
|
|
|
|
if (Math.abs(dx) > Math.abs(dy)) { |
|
|
|
|
|
if (dx > 0 && direction !== 'left') { |
|
|
nextDirection = 'right'; |
|
|
} else if (dx < 0 && direction !== 'right') { |
|
|
nextDirection = 'left'; |
|
|
} |
|
|
} else { |
|
|
|
|
|
if (dy > 0 && direction !== 'up') { |
|
|
nextDirection = 'down'; |
|
|
} else if (dy < 0 && direction !== 'down') { |
|
|
nextDirection = 'up'; |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
startBtn.addEventListener('click', startGame); |
|
|
pauseBtn.addEventListener('click', pauseGame); |
|
|
restartBtn.addEventListener('click', initGame); |
|
|
playAgainBtn.addEventListener('click', () => { |
|
|
gameOverModal.classList.remove('active'); |
|
|
initGame(); |
|
|
startGame(); |
|
|
}); |
|
|
|
|
|
document.addEventListener('keydown', handleKeyDown); |
|
|
document.addEventListener('touchstart', handleTouchStart); |
|
|
document.addEventListener('touchend', handleTouchEnd); |
|
|
|
|
|
|
|
|
window.addEventListener('resize', () => { |
|
|
canvasSize = Math.min(600, window.innerWidth - 40, window.innerHeight - 200); |
|
|
canvas.width = canvasSize; |
|
|
canvas.height = canvasSize; |
|
|
render(); |
|
|
}); |
|
|
|
|
|
|
|
|
initGame(); |
|
|
}); |
|
|
</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=engerl/neonsanke" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> |
|
|
</html> |
