Spaces:
Running
Running
Add 3 files
Browse files- README.md +7 -5
- index.html +205 -19
- prompts.txt +4 -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: preloadertmt
|
| 3 |
+
emoji: 🐳
|
| 4 |
+
colorFrom: green
|
| 5 |
+
colorTo: yellow
|
| 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,205 @@
|
|
| 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>TMT - Awakening Protocol</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
|
| 9 |
+
<style>
|
| 10 |
+
body {
|
| 11 |
+
margin: 0;
|
| 12 |
+
padding: 0;
|
| 13 |
+
overflow: hidden;
|
| 14 |
+
background-color: #000;
|
| 15 |
+
font-family: 'VT323', monospace;
|
| 16 |
+
color: #00FF00;
|
| 17 |
+
}
|
| 18 |
+
|
| 19 |
+
#matrix-preloader {
|
| 20 |
+
position: fixed;
|
| 21 |
+
top: 0;
|
| 22 |
+
left: 0;
|
| 23 |
+
width: 100%;
|
| 24 |
+
height: 100%;
|
| 25 |
+
display: flex;
|
| 26 |
+
flex-direction: column;
|
| 27 |
+
justify-content: center;
|
| 28 |
+
align-items: center;
|
| 29 |
+
z-index: 9999;
|
| 30 |
+
background-color: #000;
|
| 31 |
+
}
|
| 32 |
+
|
| 33 |
+
.terminal-text {
|
| 34 |
+
font-size: 1.5rem;
|
| 35 |
+
line-height: 1.8;
|
| 36 |
+
text-shadow: 0 0 5px #00FF00;
|
| 37 |
+
white-space: pre;
|
| 38 |
+
overflow: hidden;
|
| 39 |
+
margin: 0 auto;
|
| 40 |
+
letter-spacing: 0.1em;
|
| 41 |
+
}
|
| 42 |
+
|
| 43 |
+
.matrix-char {
|
| 44 |
+
position: absolute;
|
| 45 |
+
color: #00FF00;
|
| 46 |
+
font-size: 1rem;
|
| 47 |
+
opacity: 0.8;
|
| 48 |
+
transform: translateY(-100%);
|
| 49 |
+
}
|
| 50 |
+
|
| 51 |
+
.fade-out {
|
| 52 |
+
animation: fadeOut 1s forwards;
|
| 53 |
+
}
|
| 54 |
+
|
| 55 |
+
@keyframes fadeOut {
|
| 56 |
+
to { opacity: 0; }
|
| 57 |
+
}
|
| 58 |
+
|
| 59 |
+
#matrix-rain {
|
| 60 |
+
position: absolute;
|
| 61 |
+
top: 0;
|
| 62 |
+
left: 0;
|
| 63 |
+
width: 100%;
|
| 64 |
+
height: 100%;
|
| 65 |
+
z-index: -1;
|
| 66 |
+
opacity: 0.1;
|
| 67 |
+
}
|
| 68 |
+
|
| 69 |
+
.hidden {
|
| 70 |
+
display: none;
|
| 71 |
+
}
|
| 72 |
+
</style>
|
| 73 |
+
</head>
|
| 74 |
+
<body>
|
| 75 |
+
<div id="matrix-preloader">
|
| 76 |
+
<div id="terminal" class="terminal-text"></div>
|
| 77 |
+
<canvas id="matrix-rain"></canvas>
|
| 78 |
+
</div>
|
| 79 |
+
|
| 80 |
+
<div id="main-content" class="hidden">
|
| 81 |
+
<!-- Your main website content goes here -->
|
| 82 |
+
<div class="min-h-screen bg-black text-green-500 flex items-center justify-center">
|
| 83 |
+
<h1 class="text-4xl font-bold">TMT SYSTEM ONLINE</h1>
|
| 84 |
+
</div>
|
| 85 |
+
</div>
|
| 86 |
+
|
| 87 |
+
<script>
|
| 88 |
+
document.addEventListener('DOMContentLoaded', () => {
|
| 89 |
+
const terminal = document.getElementById('terminal');
|
| 90 |
+
const preloader = document.getElementById('matrix-preloader');
|
| 91 |
+
const matrixRain = document.getElementById('matrix-rain');
|
| 92 |
+
const mainContent = document.getElementById('main-content');
|
| 93 |
+
|
| 94 |
+
// Matrix rain setup
|
| 95 |
+
const canvas = matrixRain;
|
| 96 |
+
const ctx = canvas.getContext('2d');
|
| 97 |
+
|
| 98 |
+
canvas.width = window.innerWidth;
|
| 99 |
+
canvas.height = window.innerHeight;
|
| 100 |
+
|
| 101 |
+
const katakana = '01AF9KΩ∞';
|
| 102 |
+
const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
|
| 103 |
+
const nums = '0123456789';
|
| 104 |
+
|
| 105 |
+
const alphabet = katakana + latin + nums;
|
| 106 |
+
|
| 107 |
+
const fontSize = 16;
|
| 108 |
+
const columns = canvas.width / fontSize;
|
| 109 |
+
|
| 110 |
+
const rainDrops = [];
|
| 111 |
+
|
| 112 |
+
for (let x = 0; x < columns; x++) {
|
| 113 |
+
rainDrops[x] = 1;
|
| 114 |
+
}
|
| 115 |
+
|
| 116 |
+
function drawMatrixRain() {
|
| 117 |
+
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
|
| 118 |
+
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
| 119 |
+
|
| 120 |
+
ctx.fillStyle = '#00FF00';
|
| 121 |
+
ctx.font = fontSize + 'px VT323';
|
| 122 |
+
|
| 123 |
+
for (let i = 0; i < rainDrops.length; i++) {
|
| 124 |
+
const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length));
|
| 125 |
+
ctx.fillText(text, i * fontSize, rainDrops[i] * fontSize);
|
| 126 |
+
|
| 127 |
+
if (rainDrops[i] * fontSize > canvas.height && Math.random() > 0.975) {
|
| 128 |
+
rainDrops[i] = 0;
|
| 129 |
+
}
|
| 130 |
+
rainDrops[i]++;
|
| 131 |
+
}
|
| 132 |
+
}
|
| 133 |
+
|
| 134 |
+
let matrixInterval;
|
| 135 |
+
|
| 136 |
+
function startMatrixRain() {
|
| 137 |
+
matrixInterval = setInterval(drawMatrixRain, 50);
|
| 138 |
+
}
|
| 139 |
+
|
| 140 |
+
function stopMatrixRain() {
|
| 141 |
+
clearInterval(matrixInterval);
|
| 142 |
+
}
|
| 143 |
+
|
| 144 |
+
function typeWriter(text, element, speed, callback) {
|
| 145 |
+
let i = 0;
|
| 146 |
+
|
| 147 |
+
function typing() {
|
| 148 |
+
if (i < text.length) {
|
| 149 |
+
element.innerHTML = text.substring(0, i+1);
|
| 150 |
+
i++;
|
| 151 |
+
setTimeout(typing, speed);
|
| 152 |
+
} else if (callback) {
|
| 153 |
+
callback();
|
| 154 |
+
}
|
| 155 |
+
}
|
| 156 |
+
|
| 157 |
+
typing();
|
| 158 |
+
}
|
| 159 |
+
|
| 160 |
+
// Animation sequence
|
| 161 |
+
setTimeout(() => {
|
| 162 |
+
// First line
|
| 163 |
+
typeWriter('| Wake up, Operator.', terminal, 80, () => {
|
| 164 |
+
setTimeout(() => {
|
| 165 |
+
// Second line
|
| 166 |
+
terminal.innerHTML += '\n';
|
| 167 |
+
typeWriter(terminal.innerHTML + '| The system is unstable.', terminal, 80, () => {
|
| 168 |
+
setTimeout(() => {
|
| 169 |
+
// Third line
|
| 170 |
+
terminal.innerHTML += '\n';
|
| 171 |
+
typeWriter(terminal.innerHTML + '| Initiating flow recovery.', terminal, 80, () => {
|
| 172 |
+
setTimeout(() => {
|
| 173 |
+
// Fourth line
|
| 174 |
+
terminal.innerHTML += '\n';
|
| 175 |
+
typeWriter(terminal.innerHTML + '| TMT Systems Online.', terminal, 100, () => {
|
| 176 |
+
// Start matrix rain
|
| 177 |
+
startMatrixRain();
|
| 178 |
+
|
| 179 |
+
// Fade out after delay
|
| 180 |
+
setTimeout(() => {
|
| 181 |
+
preloader.classList.add('fade-out');
|
| 182 |
+
setTimeout(() => {
|
| 183 |
+
stopMatrixRain();
|
| 184 |
+
preloader.style.display = 'none';
|
| 185 |
+
mainContent.classList.remove('hidden');
|
| 186 |
+
}, 1000);
|
| 187 |
+
}, 1000);
|
| 188 |
+
});
|
| 189 |
+
}, 500);
|
| 190 |
+
});
|
| 191 |
+
}, 500);
|
| 192 |
+
});
|
| 193 |
+
}, 500);
|
| 194 |
+
});
|
| 195 |
+
}, 500);
|
| 196 |
+
|
| 197 |
+
// Handle window resize
|
| 198 |
+
window.addEventListener('resize', () => {
|
| 199 |
+
canvas.width = window.innerWidth;
|
| 200 |
+
canvas.height = window.innerHeight;
|
| 201 |
+
});
|
| 202 |
+
});
|
| 203 |
+
</script>
|
| 204 |
+
<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/preloadertmt" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
|
| 205 |
+
</html>
|
prompts.txt
ADDED
|
@@ -0,0 +1,4 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
Отлично, вижу что тебе нужно ещё более выверенное ТЗ для прелоадера, чтобы он ощущался на 100% как сцена из фильма “Матрица”: – Не просто “черный экран и текст”, – А живой, детализированный, с полным воссозданием атмосферы: бегущие коды, глюки, курсоры, текст “проснись” — всё чётко по канону. Собираю идеальный Промт-ТЗ для реализации прелоадера TMT. ⸻ ✅ FINAL PROMPT: TMT Preloader — “The Matrix Awakening” ⸻ 🎥 ОБЩАЯ ИДЕЯ: Create a cinematic preloader screen inspired by the opening scene of “The Matrix” (1999) for the website of Traffic Monsters Team (TMT). The preloader must fully immerse the user into a dark digital world before they access the main site. ⸻ 🧱 СЦЕНАРИЙ ПОКАДРОВО (ЭТАПЫ): ⸻ 0.0 – 0.5 sec • Full black screen. • Silent background or very faint low-frequency hum. ⸻ 0.5 – 1.0 sec • Single blinking green terminal cursor appears: >_ • Cursor blinks twice. ⸻ 1.0 – 2.5 sec • First line slowly types out letter-by-letter (0.1 sec per symbol): > Wake up, Operator... ⸻ 2.5 – 3.5 sec • Second line appears, typed slower: > The flow has been compromised. ⸻ 3.5 – 4.5 sec • Matrix Code Rain Effect appears faintly in the background: • Vertical streams of green code symbols (0 1 A F 9 K Ω ∞) moving down. • Some streams glitched (characters shift or “melting”). ⸻ 4.5 – 5.0 sec • Strong glitch flash across the screen (brief distortion). • New line typed out dramatically: > TMT System Online ⸻ 5.0 – 5.5 sec • Screen flicker (quick black → green glow → black transition). ⸻ 5.5 – 6.0 sec • Code Collapse Effect: • Matrix code rain speeds up, dissolving upward like getting “sucked into a point.” • Smooth fade transition into the Hero Section. ⸻ 🎨 ВИЗУАЛЬНЫЕ ЭЛЕМЕНТЫ: Элемент Как должно выглядеть Фон Глубокий черный #000000 Основной текст Яркий зеленый #00FF00, эффект CRT терминала Курсор >_ мигающий, классический терминальный Шрифты Monospace (JetBrains Mono / VT323) Эффект кода Живой вертикальный поток символов (разных скоростей и плотности) Глюки Быстрые микро-искажения текста и кода Анимации текста Letter-by-letter печать с задержкой Финальная сцена Взрывной коллапс кода с исчезновением в точку ⸻ 🔥 СЦЕНЫ, КОТОРЫЕ ДОЛЖНО ПЕРЕДАВАТЬ: • Ощущение начала загрузки “системы” • Пробуждение из хаоса • Вызов к действию (“Wake up”) • Появление скрытой силы (TMT) ⸻ 🎵 ЗВУКИ (опционально): Сцена Звук Бегущий код Тихий шелест цифр (очень фоново) Печать текста Лёгкие клики клавиатуры Глюк Быстрая цифровая вибрация Переход в сайт Глухой импульсный “всасывающий” звук ⸻ 📜 ИТОГОВЫЙ ТЕКСТ В ПРЕЛОАДЕРЕ: > Wake up, Operator... > The flow has been compromised. > TMT System Online ⸻ 📌 ОБЯЗАТЕЛЬНО: • Только чёрный + зелёный цвета. • Минимализм и напряжение. • Не перегружать эффектами — всё должно быть плавным, как в фильме “Матрица”. ⸻ ✅ Готово. Это чистейший промт, который ты можешь напрямую отдать дизайнеру/разработчику/AI-генератору. ⸻ Хочешь, я ещё дополнительно предложу скрипт для Canvas/WebGL движка, чтобы сразу правильно оживить кодовый дождь? 🚀 (Можно использовать даже в Webflow/Tilda без потери качества.) Сказать?
|
| 2 |
+
Текст не должен моргать! и еще вот эта "|" после текста где-то большая, а где-то маленькая - исправь!
|
| 3 |
+
✅ PROMPT: TMT Preloader — “Awakening Protocol” (The Matrix Style) ⸻ 🎥 ОБЩАЯ ИДЕЯ: Create a cinematic preloader screen inspired by the opening scene of “The Matrix” (1999) for the website of Traffic Monsters Team (TMT). No blinking text. No repeated cursor flashes. All lines must appear smoothly through typing animation. Each line must start with a green | symbol, same size and style across all lines. ⸻ 🧱 СЦЕНАРИЙ ПОКАДРОВО: ⸻ 0.0 – 0.5 sec • Full black screen. • No sounds or faint low hum. ⸻ 0.5 – 1.0 sec • First line starts typing, character-by-character (no blinking, smooth): | Wake up, Operator. ⸻ 1.0 – 2.0 sec • Second line typed immediately under the first, same style: | The system is unstable. ⸻ 2.0 – 3.0 sec • Third line typed under the second, same formatting: | Initiating flow recovery. ⸻ 3.0 – 4.0 sec • Fourth line typed, slightly slower for emphasis: | TMT Systems Online. ⸻ 4.0 – 5.0 sec • Matrix Code Rain (very faint) appears behind the text: • Vertical green streams of symbols moving slowly from top to bottom. • No aggressive glitching, just slow controlled movement. ⸻ 5.0 – 6.0 sec • Smooth transition: • All text and background fade softly into black. • Then the Hero Section of the site loads. ⸻ 🎨 ВИЗУАЛЬНЫЕ ЭЛЕМЕНТЫ: Элемент Как должно выглядеть Фон Полный чёрный #000000 Текст Зелёный #00FF00, терминальный стиль Шрифт Monospace (JetBrains Mono / VT323) Размер текста Ровный, одинаковый для всех строк Символ ` ` Анимация текста Плавная печать (letter-by-letter) Фон кода Лёгкий живой поток вертикального кода за текстом ⸻ 📜 ТЕКСТЫ В ПРЕЛОАДЕРЕ: | Wake up, Operator. | The system is unstable. | Initiating flow recovery. | TMT Systems Online. ⸻ 📌 ОСОБЫЕ ТРЕБОВАНИЯ: Пункт Описание Нет моргания Текст набирается без эффектов мигания Нет повторений Каждая строка появляется только один раз Чёткая структура Каждый текст начинается с ` Стабильный стиль Все строки одного размера и начертания Плавность Нет резких всплесков или агрессивных глюков
|
| 4 |
+
Почему повтор идет? Убери его - пусть с одного раза пишется текст от начала до конца!
|