|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Traffic Master</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Press+Start+2P&family=Rubik+Wet+Paint&family=Silkscreen&family=Tilt+Prism&family=Bungee&family=Lobster&family=Monoton&family=Righteous&family=Staatliches&family=Train+One&family=Wallpoet&family=Zilla+Slab+Highlight:wght@700&display=swap" rel="stylesheet"> |
|
|
<style> |
|
|
body { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
overflow: hidden; |
|
|
transition: all 0.2s ease; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
min-height: 100vh; |
|
|
} |
|
|
|
|
|
.traffic-container { |
|
|
display: flex; |
|
|
flex-direction: row; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
flex-wrap: nowrap; |
|
|
white-space: nowrap; |
|
|
} |
|
|
|
|
|
.traffic-master { |
|
|
display: inline-block; |
|
|
font-size: 6rem; |
|
|
font-weight: bold; |
|
|
transition: all 0.2s ease; |
|
|
text-shadow: 0 0 10px rgba(0,0,0,0.3); |
|
|
padding: 1rem 2rem; |
|
|
border-radius: 1rem; |
|
|
background: rgba(255,255,255,0.1); |
|
|
backdrop-filter: blur(5px); |
|
|
margin: 0 0.5rem; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { transform: scale(1); } |
|
|
50% { transform: scale(1.1); } |
|
|
100% { transform: scale(1); } |
|
|
} |
|
|
|
|
|
@keyframes shake { |
|
|
0%, 100% { transform: translateX(0); } |
|
|
25% { transform: translateX(-5px); } |
|
|
75% { transform: translateX(5px); } |
|
|
} |
|
|
|
|
|
@keyframes jump { |
|
|
0%, 100% { transform: translateY(0); } |
|
|
50% { transform: translateY(-20px); } |
|
|
} |
|
|
|
|
|
@keyframes rotate { |
|
|
0% { transform: rotate(0deg); } |
|
|
100% { transform: rotate(360deg); } |
|
|
} |
|
|
|
|
|
.pulse { animation: pulse 0.5s infinite; } |
|
|
.shake { animation: shake 0.2s infinite; } |
|
|
.jump { animation: jump 0.5s infinite; } |
|
|
.rotate { animation: rotate 2s linear infinite; } |
|
|
|
|
|
.font-1 { font-family: 'Pacifico', cursive; } |
|
|
.font-2 { font-family: 'Press Start 2P', cursive; } |
|
|
.font-3 { font-family: 'Rubik Wet Paint', cursive; } |
|
|
.font-4 { font-family: 'Silkscreen', cursive; } |
|
|
.font-5 { font-family: 'Tilt Prism', cursive; } |
|
|
.font-6 { font-family: 'Bungee', cursive; } |
|
|
.font-7 { font-family: 'Lobster', cursive; } |
|
|
.font-8 { font-family: 'Monoton', cursive; } |
|
|
.font-9 { font-family: 'Righteous', cursive; } |
|
|
.font-10 { font-family: 'Staatliches', cursive; } |
|
|
.font-11 { font-family: 'Train One', cursive; } |
|
|
.font-12 { font-family: 'Wallpoet', cursive; } |
|
|
.font-13 { font-family: 'Zilla Slab Highlight', cursive; } |
|
|
.font-14 { font-family: 'Arial', sans-serif; } |
|
|
.font-15 { font-family: 'Times New Roman', serif; } |
|
|
.font-16 { font-family: 'Courier New', monospace; } |
|
|
.font-17 { font-family: 'Georgia', serif; } |
|
|
.font-18 { font-family: 'Verdana', sans-serif; } |
|
|
.font-19 { font-family: 'Impact', sans-serif; } |
|
|
.font-20 { font-family: 'Comic Sans MS', cursive; } |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="traffic-container"> |
|
|
<div class="traffic-master" id="traffic">Traffic</div> |
|
|
<div class="traffic-master" id="master">Master</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
const trafficElement = document.getElementById('traffic'); |
|
|
const masterElement = document.getElementById('master'); |
|
|
const body = document.body; |
|
|
|
|
|
const colors = [ |
|
|
'#FF5733', '#33FF57', '#3357FF', '#F3FF33', '#FF33F3', |
|
|
'#33FFF3', '#FF8C33', '#8C33FF', '#33FF8C', '#FF338C', |
|
|
'#00FF00', '#FF0000', '#0000FF', '#FFFF00', '#FF00FF', |
|
|
'#00FFFF', '#FFFFFF', '#000000', '#FFA500', '#800080', |
|
|
'#FF6347', '#40E0D0', '#EE82EE', '#F5DEB3', '#9ACD32', |
|
|
'#DA70D6', '#6495ED', '#FFF8DC', '#DC143C', '#00CED1' |
|
|
]; |
|
|
|
|
|
const bgColors = [ |
|
|
'#1A1A2E', '#16213E', '#0F3460', '#533483', '#E94560', |
|
|
'#FFE6E6', '#E4FBFF', '#B8B5FF', '#7868E6', '#F8F5F1', |
|
|
'#F9F9F9', '#394867', '#212A3E', '#9BA4B8', '#F1F6F9', |
|
|
'#14274E', '#394867', '#9BA4B8', '#F1F6F9', '#14274E', |
|
|
'#2C3E50', '#34495E', '#7F8C8D', '#BDC3C7', '#ECF0F1', |
|
|
'#16A085', '#27AE60', '#2980B9', '#8E44AD', '#C0392B' |
|
|
]; |
|
|
|
|
|
const fonts = [ |
|
|
'font-1', 'font-2', 'font-3', 'font-4', 'font-5', |
|
|
'font-6', 'font-7', 'font-8', 'font-9', 'font-10', |
|
|
'font-11', 'font-12', 'font-13', 'font-14', 'font-15', |
|
|
'font-16', 'font-17', 'font-18', 'font-19', 'font-20' |
|
|
]; |
|
|
|
|
|
const effects = [ |
|
|
'', 'pulse', 'shake', 'jump', 'rotate', |
|
|
'underline', 'italic', 'line-through' |
|
|
]; |
|
|
|
|
|
const textStyles = [ |
|
|
'normal', 'uppercase', 'lowercase', 'capitalize' |
|
|
]; |
|
|
|
|
|
function getRandomInt(min, max) { |
|
|
return Math.floor(Math.random() * (max - min + 1)) + min; |
|
|
} |
|
|
|
|
|
function changeStyles(element) { |
|
|
|
|
|
fonts.forEach(font => element.classList.remove(font)); |
|
|
const fontIndex = getRandomInt(0, fonts.length - 1); |
|
|
element.classList.add(fonts[fontIndex]); |
|
|
|
|
|
|
|
|
const colorIndex = getRandomInt(0, colors.length - 1); |
|
|
element.style.color = colors[colorIndex]; |
|
|
|
|
|
|
|
|
const bgIndex = getRandomInt(0, bgColors.length - 1); |
|
|
element.style.backgroundColor = bgColors[bgIndex]; |
|
|
|
|
|
|
|
|
effects.forEach(effect => { |
|
|
if (effect) element.classList.remove(effect); |
|
|
}); |
|
|
const effectIndex = getRandomInt(0, effects.length - 1); |
|
|
if (effects[effectIndex]) { |
|
|
element.classList.add(effects[effectIndex]); |
|
|
} |
|
|
|
|
|
|
|
|
const rotation = getRandomInt(-15, 15); |
|
|
element.style.transform = `rotate(${rotation}deg)`; |
|
|
|
|
|
|
|
|
const size = getRandomInt(4, 8); |
|
|
element.style.fontSize = `${size}rem`; |
|
|
|
|
|
|
|
|
const textStyleIndex = getRandomInt(0, textStyles.length - 1); |
|
|
element.style.textTransform = textStyles[textStyleIndex]; |
|
|
|
|
|
|
|
|
const letterSpacing = getRandomInt(-2, 5); |
|
|
element.style.letterSpacing = `${letterSpacing}px`; |
|
|
|
|
|
|
|
|
const wordSpacing = getRandomInt(-2, 10); |
|
|
element.style.wordSpacing = `${wordSpacing}px`; |
|
|
|
|
|
|
|
|
const opacity = Math.random() * 0.5 + 0.5; |
|
|
element.style.opacity = opacity; |
|
|
|
|
|
|
|
|
if (Math.random() > 0.7) { |
|
|
const borderWidth = getRandomInt(1, 5); |
|
|
const borderColor = colors[getRandomInt(0, colors.length - 1)]; |
|
|
element.style.border = `${borderWidth}px solid ${borderColor}`; |
|
|
} else { |
|
|
element.style.border = 'none'; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
changeStyles(trafficElement); |
|
|
changeStyles(masterElement); |
|
|
|
|
|
|
|
|
setInterval(() => { |
|
|
changeStyles(trafficElement); |
|
|
setTimeout(() => { |
|
|
changeStyles(masterElement); |
|
|
}, 100); |
|
|
}, 200); |
|
|
|
|
|
|
|
|
document.addEventListener('mousemove', (e) => { |
|
|
const x = e.clientX / window.innerWidth; |
|
|
const y = e.clientY / window.innerHeight; |
|
|
|
|
|
trafficElement.style.textShadow = ` |
|
|
${(x - 0.5) * 20}px ${(y - 0.5) * 20}px 10px rgba(0,0,0,0.5) |
|
|
`; |
|
|
|
|
|
masterElement.style.textShadow = ` |
|
|
${(x - 0.5) * -20}px ${(y - 0.5) * -20}px 10px rgba(0,0,0,0.5) |
|
|
`; |
|
|
}); |
|
|
</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=timoon811/pre123" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
