Hugging Face's logo

Spaces:
Kingrane
/
convertly
Running

App Files Community
Kingrane commited on
Commit
3f2ae88
·
verified ·
1 Parent(s): ee39fdd

Design a modern, minimalistic, and super user-friendly website called “Convertly” — the ultimate all-in-one file converter. The style is inspired by the Gumroad homepage: clean layout, large bold fonts, lots of white (or light) space, playful but simple vector illustrations, and a few bright accent colors (for example, pink, blue, or any other soft palette). Main Features: Universal Converter: Instantly convert files between dozens of formats: Images: JPG, PNG, GIF, SVG, WEBP, BMP, TIFF, HEIC, ICO, PDF (image to PDF and vice versa), AVIF, etc. Audio: MP3, WAV, OGG, FLAC, AAC, M4A, AMR, WMA, etc. Video: MP4, MOV, AVI, MKV, WEBM, WMV, FLV, GIF (video to GIF and vice versa), etc. Documents: PDF, DOCX, XLSX, PPTX, TXT, RTF, EPUB, MOBI, CSV, etc. Archives: ZIP, RAR, 7Z, TAR, GZ, etc. Other: ICO, CUR, font files (TTF, OTF, WOFF), e-books, and more. Batch conversion: upload and convert multiple files at once. Drag & drop upload, or select from device/cloud. Minimalist Interface: Large, bold headings and buttons. Simple navigation bar at the top (Home, About, FAQ, Contact). Main action area: “Drop your files here or click to upload” Dropdowns to select input and output formats. “Convert” button — big and clear. Progress bar and instant download link after conversion. No ads, no clutter, no distractions. Playful Visuals: Use vector illustrations or icons (like floating coins on Gumroad, but themed around files, arrows, or conversion). Option to switch between light and dark mode. Accent colors for buttons and highlights (choose a palette: e.g., pastel pink, blue, mint, or your own). Extra Tools: Image tools: resize, crop, rotate, compress, change DPI. Audio tools: trim, merge, change bitrate, extract audio from video. Video tools: cut, merge, compress, extract audio, convert to GIF. Document tools: merge PDFs, split PDFs, compress PDFs, extract images from PDF. Accessibility: Works on desktop and mobile. Large, readable fonts. Simple, intuitive flow — even for non-tech users. Privacy: All files are deleted from the server after conversion. No registration required for basic use. Footer: Minimal, with links to privacy policy, terms, and social media. Option to “Suggest a new format/tool”. Visual Style: Clean, white or light background (or soft pastel). Large, bold sans-serif font (like Inter, Gilroy, or similar). Playful, minimal vector illustrations (files, arrows, conversion icons, etc). Bright accent colors for buttons and highlights (choose: pink, blue, mint, or your own). Minimalist navigation bar and footer. Responsive design for all devices. Summary: A super simple, beautiful, and powerful all-in-one file converter website, with a minimalistic and playful design, inspired by Gumroad’s homepage. Everything is clear, fast, and accessible — the perfect tool for anyone who needs to convert files of any type, anytime. - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +211 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Convertly
3
- emoji: 📈
4
- colorFrom: purple
5
- colorTo: pink
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: convertly
3
+ emoji: 🐳
4
+ colorFrom: red
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,211 @@
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>Convertly - Ultimate All-in-One File Converter</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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#4F46E5',
15
+ secondary: '#EC4899',
16
+ accent: '#06B6D4',
17
+ dark: '#1E293B',
18
+ light: '#F8FAFC'
19
+ }
20
+ }
21
+ }
22
+ }
23
+ </script>
24
+ <style>
25
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
26
+
27
+ body {
28
+ font-family: 'Inter', sans-serif;
29
+ background-color: #F8FAFC;
30
+ transition: background-color 0.3s;
31
+ }
32
+
33
+ .dark-mode {
34
+ background-color: #0F172A;
35
+ color: #F1F5F9;
36
+ }
37
+
38
+ .file-drop-area {
39
+ border: 2px dashed #CBD5E1;
40
+ transition: all 0.3s;
41
+ }
42
+
43
+ .file-drop-area:hover, .file-drop-area.drag-over {
44
+ border-color: #4F46E5;
45
+ background-color: #F0F9FF;
46
+ }
47
+
48
+ .dark-mode .file-drop-area {
49
+ border-color: #334155;
50
+ background-color: #1E293B;
51
+ }
52
+
53
+ .dark-mode .file-drop-area:hover, .dark-mode .file-drop-area.drag-over {
54
+ border-color: #818CF8;
55
+ background-color: #1E293B;
56
+ }
57
+
58
+ .tool-card {
59
+ transition: transform 0.3s, box-shadow 0.3s;
60
+ }
61
+
62
+ .tool-card:hover {
63
+ transform: translateY(-5px);
64
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
65
+ }
66
+
67
+ .converter-icon {
68
+ animation: float 6s ease-in-out infinite;
69
+ }
70
+
71
+ .format-icon {
72
+ animation: pulse 2s infinite;
73
+ }
74
+
75
+ @keyframes float {
76
+ 0% { transform: translateY(0px); }
77
+ 50% { transform: translateY(-15px); }
78
+ 100% { transform: translateY(0px); }
79
+ }
80
+
81
+ @keyframes pulse {
82
+ 0% { transform: scale(1); }
83
+ 50% { transform: scale(1.05); }
84
+ 100% { transform: scale(1); }
85
+ }
86
+
87
+ .progress-bar {
88
+ height: 8px;
89
+ border-radius: 4px;
90
+ background-color: #E2E8F0;
91
+ overflow: hidden;
92
+ }
93
+
94
+ .progress-fill {
95
+ height: 100%;
96
+ background: linear-gradient(90deg, #4F46E5, #EC4899);
97
+ transition: width 0.5s ease-in-out;
98
+ }
99
+
100
+ .dark-mode .progress-bar {
101
+ background-color: #334155;
102
+ }
103
+
104
+ .format-badge {
105
+ display: inline-flex;
106
+ align-items: center;
107
+ padding: 4px 12px;
108
+ border-radius: 9999px;
109
+ font-size: 0.75rem;
110
+ font-weight: 500;
111
+ background-color: #E0F2FE;
112
+ color: #0C4A6E;
113
+ }
114
+
115
+ .dark-mode .format-badge {
116
+ background-color: #083344;
117
+ color: #A5F3FC;
118
+ }
119
+
120
+ .format-grid {
121
+ display: grid;
122
+ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
123
+ gap: 12px;
124
+ }
125
+
126
+ @media (max-width: 768px) {
127
+ .format-grid {
128
+ grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
129
+ }
130
+ }
131
+ </style>
132
+ </head>
133
+ <body class="text-slate-800 dark:text-slate-200">
134
+ <!-- Navigation -->
135
+ <nav class="bg-white dark:bg-slate-900 shadow-sm py-4 sticky top-0 z-50">
136
+ <div class="container mx-auto px-4 flex justify-between items-center">
137
+ <div class="flex items-center">
138
+ <div class="bg-primary w-10 h-10 rounded-lg flex items-center justify-center">
139
+ <i class="fas fa-exchange-alt text-white text-xl"></i>
140
+ </div>
141
+ <span class="ml-3 text-2xl font-bold">Convertly</span>
142
+ </div>
143
+
144
+ <div class="hidden md:flex space-x-8">
145
+ <a href="#" class="font-medium hover:text-primary transition">Home</a>
146
+ <a href="#" class="font-medium hover:text-primary transition">About</a>
147
+ <a href="#" class="font-medium hover:text-primary transition">FAQ</a>
148
+ <a href="#" class="font-medium hover:text-primary transition">Contact</a>
149
+ </div>
150
+
151
+ <div class="flex items-center space-x-4">
152
+ <button id="theme-toggle" class="p-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800">
153
+ <i class="fas fa-moon dark:hidden"></i>
154
+ <i class="fas fa-sun hidden dark:block"></i>
155
+ </button>
156
+ <button class="md:hidden">
157
+ <i class="fas fa-bars text-xl"></i>
158
+ </button>
159
+ </div>
160
+ </div>
161
+ </nav>
162
+
163
+ <!-- Hero Section -->
164
+ <section class="py-16 md:py-24">
165
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
166
+ <div class="md:w-1/2 mb-12 md:mb-0">
167
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">Convert <span class="text-primary">any file</span> to any format</h1>
168
+ <p class="text-xl text-slate-600 dark:text-slate-400 mb-8">Super simple, beautiful, and powerful all-in-one file converter. Free, fast, and accessible for everyone.</p>
169
+
170
+ <div class="flex flex-wrap gap-4 mb-8">
171
+ <div class="bg-white dark:bg-slate-800 shadow rounded-lg py-3 px-6 flex items-center">
172
+ <i class="fas fa-bolt text-accent text-2xl mr-3"></i>
173
+ <div>
174
+ <div class="font-bold">Instant Conversion</div>
175
+ <div class="text-sm text-slate-500">No waiting time</div>
176
+ </div>
177
+ </div>
178
+ <div class="bg-white dark:bg-slate-800 shadow rounded-lg py-3 px-6 flex items-center">
179
+ <i class="fas fa-shield-alt text-secondary text-2xl mr-3"></i>
180
+ <div>
181
+ <div class="font-bold">Privacy First</div>
182
+ <div class="text-sm text-slate-500">Files auto-delete</div>
183
+ </div>
184
+ </div>
185
+ </div>
186
+
187
+ <div class="flex space-x-4">
188
+ <button class="bg-primary hover:bg-primary/90 text-white font-bold py-3 px-8 rounded-lg transition transform hover:-translate-y-1">
189
+ Start Converting
190
+ </button>
191
+ <button class="border-2 border-slate-300 dark:border-slate-700 hover:border-primary text-slate-700 dark:text-slate-300 font-bold py-3 px-8 rounded-lg transition">
192
+ Learn More
193
+ </button>
194
+ </div>
195
+ </div>
196
+
197
+ <div class="md:w-1/2 flex justify-center">
198
+ <div class="relative">
199
+ <div class="converter-icon w-64 h-64 bg-gradient-to-br from-primary to-secondary rounded-2xl flex items-center justify-center">
200
+ <i class="fas fa-file-alt text-white text-7xl"></i>
201
+ </div>
202
+ <div class="absolute -top-6 -right-6 w-32 h-32 bg-accent rounded-2xl flex items-center justify-center transform rotate-12">
203
+ <i class="fas fa-image text-white text-4xl"></i>
204
+ </div>
205
+ <div class="absolute -bottom-6 -left-6 w-32 h-32 bg-secondary rounded-2xl flex items-center justify-center transform -rotate-12">
206
+ <i class="fas fa-music text-white text-4xl"></i>
207
+ </div>
208
+ <div class="absolute top-16 -right-20 w-20 h-20 bg-white dark:bg-slate-800 shadow-lg rounded-xl flex items-center justify-center">
209
+
210
+ <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=Kingrane/convertly" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
211
+ </html>