| <!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> |
