Hugging Face's logo

Spaces:
Wavetype
/
spacemakerrrrr
Running

App Files Community
Wavetype commited on
Commit
20fcd5e
·
verified ·
1 Parent(s): ae5bdb1

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +135 -18
index.html CHANGED
@@ -1,19 +1,136 @@
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 Formatter & Auto-Indenter</title>
7
+ <style>
8
+ body {
9
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
10
+ line-height: 1.6;
11
+ max-width: 800px;
12
+ margin: 0 auto;
13
+ padding: 20px;
14
+ background-color: #f4f4f9;
15
+ }
16
+ .container {
17
+ background: white;
18
+ padding: 30px;
19
+ border-radius: 8px;
20
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
21
+ }
22
+ h1 {
23
+ color: #333;
24
+ margin-top: 0;
25
+ }
26
+ textarea {
27
+ width: 100%;
28
+ height: 300px;
29
+ padding: 15px;
30
+ border: 1px solid #ddd;
31
+ border-radius: 4px;
32
+ font-size: 16px;
33
+ box-sizing: border-box;
34
+ resize: vertical;
35
+ margin-bottom: 20px;
36
+ }
37
+ .controls {
38
+ display: flex;
39
+ gap: 10px;
40
+ flex-wrap: wrap;
41
+ }
42
+ button {
43
+ padding: 10px 20px;
44
+ font-size: 16px;
45
+ cursor: pointer;
46
+ border: none;
47
+ border-radius: 4px;
48
+ transition: background 0.2s;
49
+ }
50
+ .btn-primary {
51
+ background-color: #007bff;
52
+ color: white;
53
+ }
54
+ .btn-primary:hover {
55
+ background-color: #0056b3;
56
+ }
57
+ .btn-secondary {
58
+ background-color: #6c757d;
59
+ color: white;
60
+ }
61
+ .btn-secondary:hover {
62
+ background-color: #5a6268;
63
+ }
64
+ .stats {
65
+ margin-top: 10px;
66
+ font-size: 0.9em;
67
+ color: #666;
68
+ }
69
+ </style>
70
+ </head>
71
+ <body>
72
+
73
+ <div class="container">
74
+ <h1>Text Auto-Indenter</h1>
75
+ <p>Paste your messy text below. This tool removes non-standard characters and adds a 4-space indentation to every paragraph.</p>
76
+
77
+ <textarea id="inputText" placeholder="Paste messy text here..."></textarea>
78
+
79
+ <div class="controls">
80
+ <button class="btn-primary" onclick="formatText()">Format Text</button>
81
+ <button class="btn-secondary" onclick="copyText()">Copy Result</button>
82
+ <button class="btn-secondary" style="background-color: #dc3545;" onclick="clearText()">Clear</button>
83
+ </div>
84
+
85
+ <div class="stats" id="stats"></div>
86
+ </div>
87
+
88
+ <script>
89
+ function formatText() {
90
+ const textArea = document.getElementById('inputText');
91
+ let text = textArea.value;
92
+
93
+ if (!text.trim()) return;
94
+
95
+ // 1. Remove "random" characters often found in PDF/Web copy-pastes
96
+ // Keeps standard alphanumeric, basic punctuation, and whitespace
97
+ // Matches: letters, numbers, basic punctuation, and symbols like $%&
98
+ text = text.replace(/[^\x20-\x7E\t\n\r\u201C\u201D\u2018\u2019\u2013\u2014]/g, '');
99
+
100
+ // 2. Normalize line breaks (handle CRLF and multiple empty lines)
101
+ text = text.replace(/\r\n/g, "\n");
102
+
103
+ // 3. Split into paragraphs, trim whitespace from each, and filter out empty ones
104
+ let paragraphs = text.split(/\n+/);
105
+
106
+ // 4. Rebuild text with indentation
107
+ const indentedText = paragraphs
108
+ .map(para => para.trim())
109
+ .filter(para => para.length > 0)
110
+ .map(para => " " + para) // Adds 4 spaces
111
+ .join("\n\n");
112
+
113
+ textArea.value = indentedText;
114
+ updateStats(indentedText);
115
+ }
116
+
117
+ function copyText() {
118
+ const textArea = document.getElementById('inputText');
119
+ textArea.select();
120
+ document.execCommand('copy');
121
+ alert("Text copied to clipboard!");
122
+ }
123
+
124
+ function clearText() {
125
+ document.getElementById('inputText').value = '';
126
+ document.getElementById('stats').innerText = '';
127
+ }
128
+
129
+ function updateStats(text) {
130
+ const words = text.trim() ? text.trim().split(/\s+/).length : 0;
131
+ document.getElementById('stats').innerText = `Words: ${words} | Characters: ${text.length}`;
132
+ }
133
+ </script>
134
+
135
+ </body>
136
  </html>