Add 3 files
Browse files- README.md +7 -5
- index.html +225 -19
- prompts.txt +2 -0
README.md
CHANGED
|
@@ -1,10 +1,12 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
emoji:
|
| 4 |
-
colorFrom:
|
| 5 |
-
colorTo:
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
|
|
|
| 1 |
---
|
| 2 |
+
title: pre123
|
| 3 |
+
emoji: 🐳
|
| 4 |
+
colorFrom: yellow
|
| 5 |
+
colorTo: gray
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite
|
| 10 |
---
|
| 11 |
|
| 12 |
+
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
index.html
CHANGED
|
@@ -1,19 +1,225 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Traffic Master</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<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">
|
| 9 |
+
<style>
|
| 10 |
+
body {
|
| 11 |
+
margin: 0;
|
| 12 |
+
padding: 0;
|
| 13 |
+
overflow: hidden;
|
| 14 |
+
transition: all 0.2s ease;
|
| 15 |
+
display: flex;
|
| 16 |
+
justify-content: center;
|
| 17 |
+
align-items: center;
|
| 18 |
+
min-height: 100vh;
|
| 19 |
+
}
|
| 20 |
+
|
| 21 |
+
.traffic-container {
|
| 22 |
+
display: flex;
|
| 23 |
+
flex-direction: row;
|
| 24 |
+
align-items: center;
|
| 25 |
+
justify-content: center;
|
| 26 |
+
flex-wrap: nowrap;
|
| 27 |
+
white-space: nowrap;
|
| 28 |
+
}
|
| 29 |
+
|
| 30 |
+
.traffic-master {
|
| 31 |
+
display: inline-block;
|
| 32 |
+
font-size: 6rem;
|
| 33 |
+
font-weight: bold;
|
| 34 |
+
transition: all 0.2s ease;
|
| 35 |
+
text-shadow: 0 0 10px rgba(0,0,0,0.3);
|
| 36 |
+
padding: 1rem 2rem;
|
| 37 |
+
border-radius: 1rem;
|
| 38 |
+
background: rgba(255,255,255,0.1);
|
| 39 |
+
backdrop-filter: blur(5px);
|
| 40 |
+
margin: 0 0.5rem;
|
| 41 |
+
}
|
| 42 |
+
|
| 43 |
+
@keyframes pulse {
|
| 44 |
+
0% { transform: scale(1); }
|
| 45 |
+
50% { transform: scale(1.1); }
|
| 46 |
+
100% { transform: scale(1); }
|
| 47 |
+
}
|
| 48 |
+
|
| 49 |
+
@keyframes shake {
|
| 50 |
+
0%, 100% { transform: translateX(0); }
|
| 51 |
+
25% { transform: translateX(-5px); }
|
| 52 |
+
75% { transform: translateX(5px); }
|
| 53 |
+
}
|
| 54 |
+
|
| 55 |
+
@keyframes jump {
|
| 56 |
+
0%, 100% { transform: translateY(0); }
|
| 57 |
+
50% { transform: translateY(-20px); }
|
| 58 |
+
}
|
| 59 |
+
|
| 60 |
+
@keyframes rotate {
|
| 61 |
+
0% { transform: rotate(0deg); }
|
| 62 |
+
100% { transform: rotate(360deg); }
|
| 63 |
+
}
|
| 64 |
+
|
| 65 |
+
.pulse { animation: pulse 0.5s infinite; }
|
| 66 |
+
.shake { animation: shake 0.2s infinite; }
|
| 67 |
+
.jump { animation: jump 0.5s infinite; }
|
| 68 |
+
.rotate { animation: rotate 2s linear infinite; }
|
| 69 |
+
|
| 70 |
+
.font-1 { font-family: 'Pacifico', cursive; }
|
| 71 |
+
.font-2 { font-family: 'Press Start 2P', cursive; }
|
| 72 |
+
.font-3 { font-family: 'Rubik Wet Paint', cursive; }
|
| 73 |
+
.font-4 { font-family: 'Silkscreen', cursive; }
|
| 74 |
+
.font-5 { font-family: 'Tilt Prism', cursive; }
|
| 75 |
+
.font-6 { font-family: 'Bungee', cursive; }
|
| 76 |
+
.font-7 { font-family: 'Lobster', cursive; }
|
| 77 |
+
.font-8 { font-family: 'Monoton', cursive; }
|
| 78 |
+
.font-9 { font-family: 'Righteous', cursive; }
|
| 79 |
+
.font-10 { font-family: 'Staatliches', cursive; }
|
| 80 |
+
.font-11 { font-family: 'Train One', cursive; }
|
| 81 |
+
.font-12 { font-family: 'Wallpoet', cursive; }
|
| 82 |
+
.font-13 { font-family: 'Zilla Slab Highlight', cursive; }
|
| 83 |
+
.font-14 { font-family: 'Arial', sans-serif; }
|
| 84 |
+
.font-15 { font-family: 'Times New Roman', serif; }
|
| 85 |
+
.font-16 { font-family: 'Courier New', monospace; }
|
| 86 |
+
.font-17 { font-family: 'Georgia', serif; }
|
| 87 |
+
.font-18 { font-family: 'Verdana', sans-serif; }
|
| 88 |
+
.font-19 { font-family: 'Impact', sans-serif; }
|
| 89 |
+
.font-20 { font-family: 'Comic Sans MS', cursive; }
|
| 90 |
+
</style>
|
| 91 |
+
</head>
|
| 92 |
+
<body>
|
| 93 |
+
<div class="traffic-container">
|
| 94 |
+
<div class="traffic-master" id="traffic">Traffic</div>
|
| 95 |
+
<div class="traffic-master" id="master">Master</div>
|
| 96 |
+
</div>
|
| 97 |
+
|
| 98 |
+
<script>
|
| 99 |
+
const trafficElement = document.getElementById('traffic');
|
| 100 |
+
const masterElement = document.getElementById('master');
|
| 101 |
+
const body = document.body;
|
| 102 |
+
|
| 103 |
+
const colors = [
|
| 104 |
+
'#FF5733', '#33FF57', '#3357FF', '#F3FF33', '#FF33F3',
|
| 105 |
+
'#33FFF3', '#FF8C33', '#8C33FF', '#33FF8C', '#FF338C',
|
| 106 |
+
'#00FF00', '#FF0000', '#0000FF', '#FFFF00', '#FF00FF',
|
| 107 |
+
'#00FFFF', '#FFFFFF', '#000000', '#FFA500', '#800080',
|
| 108 |
+
'#FF6347', '#40E0D0', '#EE82EE', '#F5DEB3', '#9ACD32',
|
| 109 |
+
'#DA70D6', '#6495ED', '#FFF8DC', '#DC143C', '#00CED1'
|
| 110 |
+
];
|
| 111 |
+
|
| 112 |
+
const bgColors = [
|
| 113 |
+
'#1A1A2E', '#16213E', '#0F3460', '#533483', '#E94560',
|
| 114 |
+
'#FFE6E6', '#E4FBFF', '#B8B5FF', '#7868E6', '#F8F5F1',
|
| 115 |
+
'#F9F9F9', '#394867', '#212A3E', '#9BA4B8', '#F1F6F9',
|
| 116 |
+
'#14274E', '#394867', '#9BA4B8', '#F1F6F9', '#14274E',
|
| 117 |
+
'#2C3E50', '#34495E', '#7F8C8D', '#BDC3C7', '#ECF0F1',
|
| 118 |
+
'#16A085', '#27AE60', '#2980B9', '#8E44AD', '#C0392B'
|
| 119 |
+
];
|
| 120 |
+
|
| 121 |
+
const fonts = [
|
| 122 |
+
'font-1', 'font-2', 'font-3', 'font-4', 'font-5',
|
| 123 |
+
'font-6', 'font-7', 'font-8', 'font-9', 'font-10',
|
| 124 |
+
'font-11', 'font-12', 'font-13', 'font-14', 'font-15',
|
| 125 |
+
'font-16', 'font-17', 'font-18', 'font-19', 'font-20'
|
| 126 |
+
];
|
| 127 |
+
|
| 128 |
+
const effects = [
|
| 129 |
+
'', 'pulse', 'shake', 'jump', 'rotate',
|
| 130 |
+
'underline', 'italic', 'line-through'
|
| 131 |
+
];
|
| 132 |
+
|
| 133 |
+
const textStyles = [
|
| 134 |
+
'normal', 'uppercase', 'lowercase', 'capitalize'
|
| 135 |
+
];
|
| 136 |
+
|
| 137 |
+
function getRandomInt(min, max) {
|
| 138 |
+
return Math.floor(Math.random() * (max - min + 1)) + min;
|
| 139 |
+
}
|
| 140 |
+
|
| 141 |
+
function changeStyles(element) {
|
| 142 |
+
// Change font
|
| 143 |
+
fonts.forEach(font => element.classList.remove(font));
|
| 144 |
+
const fontIndex = getRandomInt(0, fonts.length - 1);
|
| 145 |
+
element.classList.add(fonts[fontIndex]);
|
| 146 |
+
|
| 147 |
+
// Change text color
|
| 148 |
+
const colorIndex = getRandomInt(0, colors.length - 1);
|
| 149 |
+
element.style.color = colors[colorIndex];
|
| 150 |
+
|
| 151 |
+
// Change background color
|
| 152 |
+
const bgIndex = getRandomInt(0, bgColors.length - 1);
|
| 153 |
+
element.style.backgroundColor = bgColors[bgIndex];
|
| 154 |
+
|
| 155 |
+
// Change effects
|
| 156 |
+
effects.forEach(effect => {
|
| 157 |
+
if (effect) element.classList.remove(effect);
|
| 158 |
+
});
|
| 159 |
+
const effectIndex = getRandomInt(0, effects.length - 1);
|
| 160 |
+
if (effects[effectIndex]) {
|
| 161 |
+
element.classList.add(effects[effectIndex]);
|
| 162 |
+
}
|
| 163 |
+
|
| 164 |
+
// Random rotation
|
| 165 |
+
const rotation = getRandomInt(-15, 15);
|
| 166 |
+
element.style.transform = `rotate(${rotation}deg)`;
|
| 167 |
+
|
| 168 |
+
// Random size variation
|
| 169 |
+
const size = getRandomInt(4, 8);
|
| 170 |
+
element.style.fontSize = `${size}rem`;
|
| 171 |
+
|
| 172 |
+
// Random text style
|
| 173 |
+
const textStyleIndex = getRandomInt(0, textStyles.length - 1);
|
| 174 |
+
element.style.textTransform = textStyles[textStyleIndex];
|
| 175 |
+
|
| 176 |
+
// Random letter spacing
|
| 177 |
+
const letterSpacing = getRandomInt(-2, 5);
|
| 178 |
+
element.style.letterSpacing = `${letterSpacing}px`;
|
| 179 |
+
|
| 180 |
+
// Random word spacing
|
| 181 |
+
const wordSpacing = getRandomInt(-2, 10);
|
| 182 |
+
element.style.wordSpacing = `${wordSpacing}px`;
|
| 183 |
+
|
| 184 |
+
// Random opacity
|
| 185 |
+
const opacity = Math.random() * 0.5 + 0.5;
|
| 186 |
+
element.style.opacity = opacity;
|
| 187 |
+
|
| 188 |
+
// Random border
|
| 189 |
+
if (Math.random() > 0.7) {
|
| 190 |
+
const borderWidth = getRandomInt(1, 5);
|
| 191 |
+
const borderColor = colors[getRandomInt(0, colors.length - 1)];
|
| 192 |
+
element.style.border = `${borderWidth}px solid ${borderColor}`;
|
| 193 |
+
} else {
|
| 194 |
+
element.style.border = 'none';
|
| 195 |
+
}
|
| 196 |
+
}
|
| 197 |
+
|
| 198 |
+
// Initial call
|
| 199 |
+
changeStyles(trafficElement);
|
| 200 |
+
changeStyles(masterElement);
|
| 201 |
+
|
| 202 |
+
// Set interval for changes
|
| 203 |
+
setInterval(() => {
|
| 204 |
+
changeStyles(trafficElement);
|
| 205 |
+
setTimeout(() => {
|
| 206 |
+
changeStyles(masterElement);
|
| 207 |
+
}, 100);
|
| 208 |
+
}, 200);
|
| 209 |
+
|
| 210 |
+
// Add mouse move effect
|
| 211 |
+
document.addEventListener('mousemove', (e) => {
|
| 212 |
+
const x = e.clientX / window.innerWidth;
|
| 213 |
+
const y = e.clientY / window.innerHeight;
|
| 214 |
+
|
| 215 |
+
trafficElement.style.textShadow = `
|
| 216 |
+
${(x - 0.5) * 20}px ${(y - 0.5) * 20}px 10px rgba(0,0,0,0.5)
|
| 217 |
+
`;
|
| 218 |
+
|
| 219 |
+
masterElement.style.textShadow = `
|
| 220 |
+
${(x - 0.5) * -20}px ${(y - 0.5) * -20}px 10px rgba(0,0,0,0.5)
|
| 221 |
+
`;
|
| 222 |
+
});
|
| 223 |
+
</script>
|
| 224 |
+
<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>
|
| 225 |
+
</html>
|
prompts.txt
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
|
|
|
|
|
|
|
| 1 |
+
Сделай сайт, с одним блоком без футера и хэдера, где по центру будет слово Traffic Master, которое будет меняться каждые 0.2 секунды в разных шрифтах, цветах, фонах
|
| 2 |
+
Сделай больше вариантов смены и сделай чтобы Traffic Master было в строчку!
|