Hugging Face's logo

Spaces:
MarkTheArtist
/
text-visualiser
Running

App Files Community
MarkTheArtist commited on
Commit
f00ccb2
·
verified ·
1 Parent(s): 79826ea

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +259 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Text Visualiser
3
- emoji: 👁
4
- colorFrom: gray
5
- colorTo: green
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: text-visualiser
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: pink
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,259 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Text Specializer</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .gradient-text {
11
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
12
+ -webkit-background-clip: text;
13
+ background-clip: text;
14
+ color: transparent;
15
+ }
16
+
17
+ .neon-text {
18
+ text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6;
19
+ }
20
+
21
+ .vintage-text {
22
+ font-family: 'Times New Roman', serif;
23
+ color: #5c4d3c;
24
+ text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
25
+ letter-spacing: 0.05em;
26
+ }
27
+
28
+ .glitch-effect {
29
+ position: relative;
30
+ }
31
+
32
+ .glitch-effect::before, .glitch-effect::after {
33
+ content: attr(data-text);
34
+ position: absolute;
35
+ top: 0;
36
+ left: 0;
37
+ width: 100%;
38
+ height: 100%;
39
+ }
40
+
41
+ .glitch-effect::before {
42
+ color: #0ff;
43
+ z-index: -1;
44
+ animation: glitch 3s infinite;
45
+ }
46
+
47
+ .glitch-effect::after {
48
+ color: #f0f;
49
+ z-index: -2;
50
+ animation: glitch 2s infinite reverse;
51
+ }
52
+
53
+ @keyframes glitch {
54
+ 0% { transform: translate(0); }
55
+ 20% { transform: translate(-3px, 3px); }
56
+ 40% { transform: translate(-3px, -3px); }
57
+ 60% { transform: translate(3px, 3px); }
58
+ 80% { transform: translate(3px, -3px); }
59
+ 100% { transform: translate(0); }
60
+ }
61
+
62
+ .typewriter {
63
+ overflow: hidden;
64
+ border-right: .15em solid #333;
65
+ white-space: nowrap;
66
+ animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
67
+ }
68
+
69
+ @keyframes typing {
70
+ from { width: 0 }
71
+ to { width: 100% }
72
+ }
73
+
74
+ @keyframes blink-caret {
75
+ from, to { border-color: transparent }
76
+ 50% { border-color: #333; }
77
+ }
78
+ </style>
79
+ </head>
80
+ <body class="bg-gray-100 min-h-screen">
81
+ <div class="container mx-auto px-4 py-8">
82
+ <header class="text-center mb-8">
83
+ <h1 class="text-4xl font-bold gradient-text mb-2">Text Specializer</h1>
84
+ <p class="text-gray-600">Transform your text into something extraordinary!</p>
85
+ </header>
86
+
87
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8">
88
+ <div class="p-6">
89
+ <div class="mb-6">
90
+ <label for="inputText" class="block text-gray-700 font-medium mb-2">Enter your text:</label>
91
+ <textarea id="inputText" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200" placeholder="Type something amazing..."></textarea>
92
+ </div>
93
+
94
+ <div class="mb-6">
95
+ <label class="block text-gray-700 font-medium mb-2">Choose a style:</label>
96
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
97
+ <button onclick="transformText('gradient')" class="style-btn bg-gradient-to-r from-blue-500 to-purple-500 text-white">
98
+ <i class="fas fa-paint-brush mr-2"></i> Gradient
99
+ </button>
100
+ <button onclick="transformText('neon')" class="style-btn bg-gray-800 text-white">
101
+ <i class="fas fa-lightbulb mr-2"></i> Neon
102
+ </button>
103
+ <button onclick="transformText('vintage')" class="style-btn bg-amber-700 text-white">
104
+ <i class="fas fa-scroll mr-2"></i> Vintage
105
+ </button>
106
+ <button onclick="transformText('glitch')" class="style-btn bg-purple-900 text-white">
107
+ <i class="fas fa-bug mr-2"></i> Glitch
108
+ </button>
109
+ <button onclick="transformText('typewriter')" class="style-btn bg-gray-700 text-white">
110
+ <i class="fas fa-keyboard mr-2"></i> Typewriter
111
+ </button>
112
+ <button onclick="transformText('bold')" class="style-btn bg-gray-200 text-gray-800">
113
+ <i class="fas fa-bold mr-2"></i> Bold
114
+ </button>
115
+ <button onclick="transformText('italic')" class="style-btn bg-gray-200 text-gray-800">
116
+ <i class="fas fa-italic mr-2"></i> Italic
117
+ </button>
118
+ <button onclick="transformText('uppercase')" class="style-btn bg-gray-200 text-gray-800">
119
+ <i class="fas fa-text-height mr-2"></i> Uppercase
120
+ </button>
121
+ </div>
122
+ </div>
123
+
124
+ <div class="mb-4">
125
+ <label class="block text-gray-700 font-medium mb-2">Special characters:</label>
126
+ <div class="flex flex-wrap gap-2 mb-4">
127
+ <button onclick="addSymbol('★')" class="symbol-btn">★</button>
128
+ <button onclick="addSymbol('☆')" class="symbol-btn">☆</button>
129
+ <button onclick="addSymbol('✿')" class="symbol-btn">✿</button>
130
+ <button onclick="addSymbol('♥')" class="symbol-btn">♥</button>
131
+ <button onclick="addSymbol('☀')" class="symbol-btn">☀</button>
132
+ <button onclick="addSymbol('☁')" class="symbol-btn">☁</button>
133
+ <button onclick="addSymbol('⚡')" class="symbol-btn">⚡</button>
134
+ <button onclick="addSymbol('❄')" class="symbol-btn">❄</button>
135
+ </div>
136
+ </div>
137
+
138
+ <div class="flex justify-between items-center">
139
+ <div>
140
+ <button onclick="copyToClipboard()" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-200">
141
+ <i class="fas fa-copy mr-2"></i> Copy
142
+ </button>
143
+ <button onclick="clearText()" class="ml-2 px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition duration-200">
144
+ <i class="fas fa-trash-alt mr-2"></i> Clear
145
+ </button>
146
+ </div>
147
+ <div class="text-sm text-gray-500" id="charCount">0 characters</div>
148
+ </div>
149
+ </div>
150
+ </div>
151
+
152
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
153
+ <div class="p-6">
154
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">Your Specialized Text:</h2>
155
+ <div id="outputText" class="min-h-32 p-4 border border-gray-200 rounded-lg bg-gray-50">
156
+ <p class="text-gray-400 italic">Your transformed text will appear here...</p>
157
+ </div>
158
+ </div>
159
+ </div>
160
+ </div>
161
+
162
+ <footer class="text-center py-6 text-gray-500 text-sm">
163
+ <p>Made with <i class="fas fa-heart text-red-500"></i> using HTML, CSS & JavaScript</p>
164
+ </footer>
165
+
166
+ <script>
167
+ const inputText = document.getElementById('inputText');
168
+ const outputText = document.getElementById('outputText');
169
+ const charCount = document.getElementById('charCount');
170
+
171
+ // Update character count
172
+ inputText.addEventListener('input', function() {
173
+ const count = this.value.length;
174
+ charCount.textContent = `${count} character${count !== 1 ? 's' : ''}`;
175
+ });
176
+
177
+ // Text transformation functions
178
+ function transformText(style) {
179
+ const text = inputText.value.trim();
180
+ if (!text) {
181
+ alert('Please enter some text first!');
182
+ return;
183
+ }
184
+
185
+ let transformedText = text;
186
+ let className = '';
187
+
188
+ switch(style) {
189
+ case 'gradient':
190
+ className = 'gradient-text text-2xl font-bold';
191
+ break;
192
+ case 'neon':
193
+ className = 'neon-text text-2xl font-bold text-blue-400';
194
+ break;
195
+ case 'vintage':
196
+ className = 'vintage-text text-xl italic';
197
+ break;
198
+ case 'glitch':
199
+ className = 'glitch-effect text-2xl font-bold relative';
200
+ transformedText = `<span data-text="${text}">${text}</span>`;
201
+ break;
202
+ case 'typewriter':
203
+ className = 'typewriter text-xl font-mono';
204
+ break;
205
+ case 'bold':
206
+ className = 'font-bold';
207
+ break;
208
+ case 'italic':
209
+ className = 'italic';
210
+ break;
211
+ case 'uppercase':
212
+ className = 'uppercase';
213
+ break;
214
+ }
215
+
216
+ outputText.innerHTML = `<p class="${className}">${transformedText}</p>`;
217
+ }
218
+
219
+ // Add special symbol
220
+ function addSymbol(symbol) {
221
+ const currentText = inputText.value;
222
+ const cursorPos = inputText.selectionStart;
223
+ const newText = currentText.substring(0, cursorPos) + symbol + currentText.substring(cursorPos);
224
+ inputText.value = newText;
225
+ inputText.focus();
226
+ inputText.setSelectionRange(cursorPos + symbol.length, cursorPos + symbol.length);
227
+ }
228
+
229
+ // Copy to clipboard
230
+ function copyToClipboard() {
231
+ if (!outputText.textContent.trim() || outputText.textContent.includes('Your transformed text')) {
232
+ alert('Nothing to copy! Transform some text first.');
233
+ return;
234
+ }
235
+
236
+ const range = document.createRange();
237
+ range.selectNode(outputText);
238
+ window.getSelection().removeAllRanges();
239
+ window.getSelection().addRange(range);
240
+ document.execCommand('copy');
241
+ window.getSelection().removeAllRanges();
242
+
243
+ // Show feedback
244
+ const originalText = outputText.innerHTML;
245
+ outputText.innerHTML = '<p class="text-green-500 font-medium">Copied to clipboard!</p>';
246
+ setTimeout(() => {
247
+ outputText.innerHTML = originalText;
248
+ }, 1500);
249
+ }
250
+
251
+ // Clear all text
252
+ function clearText() {
253
+ inputText.value = '';
254
+ outputText.innerHTML = '<p class="text-gray-400 italic">Your transformed text will appear here...</p>';
255
+ charCount.textContent = '0 characters';
256
+ }
257
+ </script>
258
+ <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=MarkTheArtist/text-visualiser" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
259
+ </html>