Hugging Face's logo

Spaces:
SoftDisquiet
/
fast-simple-txt
Running

App Files Community
fast-simple-txt
File size: 7,334 Bytes 
fcb260f
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text File Saver</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #6b73ff 0%, #000dff 100%);
        }
        .file-input-label:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }
        textarea {
            min-height: 200px;
        }
        @media (max-width: 640px) {
            textarea {
                min-height: 150px;
            }
        }
    </style>
</head>
<body class="gradient-bg min-h-screen flex items-center justify-center p-4">
    <div class="w-full max-w-2xl bg-white rounded-xl shadow-2xl overflow-hidden">
        <!-- Header -->
        <div class="bg-indigo-600 text-white p-6">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-2xl font-bold">Text File Saver</h1>
                    <p class="text-indigo-100">Save your content to a .txt file</p>
                </div>
                <div class="text-4xl text-indigo-300">
                    <i class="fas fa-file-alt"></i>
                </div>
            </div>
        </div>
        
        <!-- Main Content -->
        <div class="p-6">
            <!-- File Name Input -->
            <div class="mb-6">
                <label for="filename" class="block text-gray-700 font-medium mb-2">File Name</label>
                <div class="relative">
                    <input type="text" id="filename" placeholder="my-document" 
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                    <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-gray-500">
                        .txt
                    </div>
                </div>
            </div>
            
            <!-- Content Textarea -->
            <div class="mb-6">
                <label for="content" class="block text-gray-700 font-medium mb-2">Content</label>
                <textarea id="content" 
                          class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" 
                          placeholder="Type or paste your content here..."></textarea>
            </div>
            
            <!-- Buttons -->
            <div class="flex flex-col sm:flex-row gap-4">
                <button id="saveBtn" 
                        class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-6 rounded-lg transition duration-200 flex items-center justify-center gap-2">
                    <i class="fas fa-save"></i> Save to File
                </button>
                <button id="clearBtn" 
                        class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-3 px-6 rounded-lg transition duration-200 flex items-center justify-center gap-2">
                    <i class="fas fa-trash-alt"></i> Clear
                </button>
            </div>
            
            <!-- Status Message -->
            <div id="status" class="mt-6 hidden p-4 rounded-lg"></div>
        </div>
        
        <!-- Footer -->
        <div class="bg-gray-50 px-6 py-4 text-center text-gray-500 text-sm">
            <p>Your data remains private - files are saved directly to your device</p>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const filenameInput = document.getElementById('filename');
            const contentInput = document.getElementById('content');
            const saveBtn = document.getElementById('saveBtn');
            const clearBtn = document.getElementById('clearBtn');
            const statusDiv = document.getElementById('status');
            
            // Save to file function
            saveBtn.addEventListener('click', function() {
                const filename = filenameInput.value.trim() || 'untitled';
                const content = contentInput.value;
                
                if (!content) {
                    showStatus('Please enter some content to save', 'error');
                    return;
                }
                
                // Create a Blob with the content
                const blob = new Blob([content], { type: 'text/plain' });
                
                // Create a download link
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = `${filename}.txt`;
                
                // Trigger the download
                document.body.appendChild(a);
                a.click();
                
                // Clean up
                setTimeout(() => {
                    document.body.removeChild(a);
                    URL.revokeObjectURL(url);
                }, 100);
                
                showStatus('File saved successfully!', 'success');
            });
            
            // Clear inputs
            clearBtn.addEventListener('click', function() {
                filenameInput.value = '';
                contentInput.value = '';
                hideStatus();
            });
            
            // Show status message
            function showStatus(message, type) {
                statusDiv.textContent = message;
                statusDiv.className = `mt-6 p-4 rounded-lg ${type === 'error' ? 'bg-red-100 text-red-800' : 'bg-green-100 text-green-800'}`;
                statusDiv.classList.remove('hidden');
                
                // Auto-hide after 5 seconds
                setTimeout(hideStatus, 5000);
            }
            
            // Hide status message
            function hideStatus() {
                statusDiv.classList.add('hidden');
            }
            
            // Add animation to buttons on click
            [saveBtn, clearBtn].forEach(btn => {
                btn.addEventListener('click', function() {
                    this.classList.add('transform', 'scale-95');
                    setTimeout(() => {
                        this.classList.remove('transform', 'scale-95');
                    }, 150);
                });
            });
        });
    </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=SoftDisquiet/fast-simple-txt" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>