jrrade commited on
Commit
7bf8a51
·
verified ·
1 Parent(s): 03214d4

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +429 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Sell Phd Thesis
3
- emoji: 🌍
4
- colorFrom: red
5
- colorTo: indigo
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: sell-phd-thesis
3
+ emoji: 🐳
4
+ colorFrom: gray
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,429 @@
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>ScholarSell | Market Your PhD Thesis</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
+ .academic-gradient {
11
+ background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
12
+ }
13
+ .thesis-card {
14
+ transform-style: preserve-3d;
15
+ transition: all 0.3s ease;
16
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
17
+ }
18
+ .thesis-card:hover {
19
+ transform: translateY(-5px);
20
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
21
+ }
22
+ .page-flip {
23
+ animation: pageFlip 8s infinite alternate;
24
+ transform-style: preserve-3d;
25
+ }
26
+ @keyframes pageFlip {
27
+ 0% { transform: rotateY(0deg); }
28
+ 50% { transform: rotateY(15deg); }
29
+ 100% { transform: rotateY(0deg); }
30
+ }
31
+ .highlight-box {
32
+ position: relative;
33
+ }
34
+ .highlight-box::before {
35
+ content: '';
36
+ position: absolute;
37
+ top: 0;
38
+ left: 0;
39
+ right: 0;
40
+ bottom: 0;
41
+ border: 2px solid #3b82f6;
42
+ border-radius: 0.5rem;
43
+ pointer-events: none;
44
+ animation: pulseBorder 2s infinite;
45
+ }
46
+ @keyframes pulseBorder {
47
+ 0% { opacity: 0.3; }
48
+ 50% { opacity: 1; }
49
+ 100% { opacity: 0.3; }
50
+ }
51
+ </style>
52
+ </head>
53
+ <body class="bg-gray-50">
54
+ <!-- Header -->
55
+ <header class="academic-gradient text-white">
56
+ <div class="container mx-auto px-6 py-12">
57
+ <div class="flex flex-col md:flex-row items-center justify-between">
58
+ <div class="md:w-1/2 mb-8 md:mb-0">
59
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">Monetize Your Academic Work</h1>
60
+ <p class="text-xl text-blue-100 mb-6">Turn your PhD thesis into a revenue stream while advancing knowledge in your field.</p>
61
+ <div class="flex space-x-4">
62
+ <button class="bg-white text-blue-800 hover:bg-blue-100 font-bold py-3 px-6 rounded-full">
63
+ <i class="fas fa-rocket mr-2"></i> List Your Thesis
64
+ </button>
65
+ <button class="border-2 border-white text-white hover:bg-blue-700 font-bold py-3 px-6 rounded-full">
66
+ <i class="fas fa-book-open mr-2"></i> Browse Marketplace
67
+ </button>
68
+ </div>
69
+ </div>
70
+ <div class="md:w-1/2 flex justify-center">
71
+ <div class="relative w-64 h-80">
72
+ <div class="absolute inset-0 bg-white rounded-lg shadow-lg page-flip">
73
+ <div class="h-full flex flex-col p-6">
74
+ <div class="flex-1 bg-blue-50 rounded-t-lg p-4">
75
+ <h3 class="text-blue-800 font-bold text-center">PhD Thesis</h3>
76
+ <div class="h-32 bg-white mt-4 rounded p-2 text-xs text-gray-700">
77
+ <p class="mb-1">Abstract: This dissertation examines...</p>
78
+ <p class="mb-1">Methodology: Quantitative analysis...</p>
79
+ <p>Findings: Significant correlation...</p>
80
+ </div>
81
+ </div>
82
+ <div class="bg-blue-100 rounded-b-lg p-4">
83
+ <div class="flex justify-between items-center">
84
+ <span class="text-blue-800 font-bold">$49.99</span>
85
+ <button class="bg-blue-600 text-white text-xs py-1 px-2 rounded">
86
+ <i class="fas fa-cart-plus"></i>
87
+ </button>
88
+ </div>
89
+ </div>
90
+ </div>
91
+ </div>
92
+ </div>
93
+ </div>
94
+ </div>
95
+ </div>
96
+ </header>
97
+
98
+ <!-- Value Proposition -->
99
+ <section class="py-16 bg-white">
100
+ <div class="container mx-auto px-6">
101
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Why Sell Your PhD Thesis With Us?</h2>
102
+ <div class="grid md:grid-cols-3 gap-8">
103
+ <div class="bg-gray-50 p-8 rounded-lg hover:shadow-lg transition-shadow">
104
+ <div class="text-blue-600 text-4xl mb-4">
105
+ <i class="fas fa-hand-holding-usd"></i>
106
+ </div>
107
+ <h3 class="text-xl font-bold mb-3 text-gray-800">Earn Royalties</h3>
108
+ <p class="text-gray-600">Receive 70% of all sales, paid monthly. Your academic work continues to generate income long after graduation.</p>
109
+ </div>
110
+ <div class="bg-gray-50 p-8 rounded-lg hover:shadow-lg transition-shadow">
111
+ <div class="text-blue-600 text-4xl mb-4">
112
+ <i class="fas fa-chart-line"></i>
113
+ </div>
114
+ <h3 class="text-xl font-bold mb-3 text-gray-800">Increase Visibility</h3>
115
+ <p class="text-gray-600">Our platform puts your research in front of thousands of academics, professionals, and students worldwide.</p>
116
+ </div>
117
+ <div class="bg-gray-50 p-8 rounded-lg hover:shadow-lg transition-shadow">
118
+ <div class="text-blue-600 text-4xl mb-4">
119
+ <i class="fas fa-shield-alt"></i>
120
+ </div>
121
+ <h3 class="text-xl font-bold mb-3 text-gray-800">Copyright Protection</h3>
122
+ <p class="text-gray-600">We use blockchain technology to protect your intellectual property and track all usage of your work.</p>
123
+ </div>
124
+ </div>
125
+ </div>
126
+ </section>
127
+
128
+ <!-- Thesis Listing Form -->
129
+ <section class="py-16 bg-gray-100">
130
+ <div class="container mx-auto px-6">
131
+ <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden">
132
+ <div class="md:flex">
133
+ <div class="md:w-1/3 bg-blue-800 p-8 text-white">
134
+ <h2 class="text-2xl font-bold mb-4">List Your Thesis</h2>
135
+ <p class="mb-6">Complete this form to start earning from your research today.</p>
136
+ <div class="flex items-center mb-4">
137
+ <div class="mr-4 text-2xl">
138
+ <i class="fas fa-lock"></i>
139
+ </div>
140
+ <div>
141
+ <h4 class="font-bold">Secure Submission</h4>
142
+ <p class="text-sm text-blue-200">All data is encrypted</p>
143
+ </div>
144
+ </div>
145
+ <div class="flex items-center">
146
+ <div class="mr-4 text-2xl">
147
+ <i class="fas fa-clock"></i>
148
+ </div>
149
+ <div>
150
+ <h4 class="font-bold">Quick Process</h4>
151
+ <p class="text-sm text-blue-200">Approval within 48 hours</p>
152
+ </div>
153
+ </div>
154
+ </div>
155
+ <div class="md:w-2/3 p-8">
156
+ <form id="thesisForm">
157
+ <div class="mb-6">
158
+ <label class="block text-gray-700 font-bold mb-2" for="title">Thesis Title</label>
159
+ <input class="w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
160
+ id="title" type="text" placeholder="e.g. 'Quantum Effects in Nanostructures'">
161
+ </div>
162
+
163
+ <div class="grid md:grid-cols-2 gap-6 mb-6">
164
+ <div>
165
+ <label class="block text-gray-700 font-bold mb-2" for="discipline">Discipline</label>
166
+ <select class="w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" id="discipline">
167
+ <option value="">Select your field</option>
168
+ <option value="physical-sciences">Physical Sciences</option>
169
+ <option value="life-sciences">Life Sciences</option>
170
+ <option value="engineering">Engineering</option>
171
+ <option value="social-sciences">Social Sciences</option>
172
+ <option value="humanities">Humanities</option>
173
+ </select>
174
+ </div>
175
+ <div>
176
+ <label class="block text-gray-700 font-bold mb-2" for="price">Price (USD)</label>
177
+ <input class="w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
178
+ id="price" type="number" min="9.99" max="999" step="0.01" placeholder="49.99">
179
+ </div>
180
+ </div>
181
+
182
+ <div class="mb-6">
183
+ <label class="block text-gray-700 font-bold mb-2" for="abstract">Abstract (Max 300 words)</label>
184
+ <textarea class="w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 h-32"
185
+ id="abstract" placeholder="Brief summary of your research..."></textarea>
186
+ </div>
187
+
188
+ <div class="mb-6">
189
+ <label class="block text-gray-700 font-bold mb-2">Upload PDF</label>
190
+ <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center highlight-box">
191
+ <div class="text-blue-500 text-4xl mb-2">
192
+ <i class="fas fa-cloud-upload-alt"></i>
193
+ </div>
194
+ <p class="text-gray-600">Drag & drop your thesis PDF here or click to browse</p>
195
+ <input type="file" class="hidden" id="thesisFile" accept=".pdf">
196
+ </div>
197
+ </div>
198
+
199
+ <div class="flex items-center mb-6">
200
+ <input class="mr-2" type="checkbox" id="agreement" required>
201
+ <label class="text-gray-700" for="agreement">
202
+ I confirm that I hold the copyright to this work and agree to the
203
+ <a href="#" class="text-blue-600 hover:underline">Terms of Service</a>
204
+ </label>
205
+ </div>
206
+
207
+ <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300" type="submit">
208
+ <i class="fas fa-paper-plane mr-2"></i> Submit Thesis
209
+ </button>
210
+ </form>
211
+ </div>
212
+ </div>
213
+ </div>
214
+ </div>
215
+ </section>
216
+
217
+ <!-- Success Stories -->
218
+ <section class="py-16 bg-white">
219
+ <div class="container mx-auto px-6">
220
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Success Stories</h2>
221
+ <div class="grid md:grid-cols-2 gap-8">
222
+ <div class="bg-gray-50 p-8 rounded-lg">
223
+ <div class="flex items-start mb-4">
224
+ <img class="w-16 h-16 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Dr. Sarah Chen">
225
+ <div>
226
+ <h3 class="text-xl font-bold text-gray-800">Dr. Sarah Chen</h3>
227
+ <p class="text-blue-600">Materials Science, Stanford University</p>
228
+ </div>
229
+ </div>
230
+ <p class="text-gray-600 mb-4">"I've earned over $8,000 from my thesis on nanomaterials. It's been downloaded by researchers in 23 countries!"</p>
231
+ <div class="flex items-center text-yellow-400">
232
+ <i class="fas fa-star"></i>
233
+ <i class="fas fa-star"></i>
234
+ <i class="fas fa-star"></i>
235
+ <i class="fas fa-star"></i>
236
+ <i class="fas fa-star"></i>
237
+ <span class="ml-2 text-gray-600">128 purchases</span>
238
+ </div>
239
+ </div>
240
+ <div class="bg-gray-50 p-8 rounded-lg">
241
+ <div class="flex items-start mb-4">
242
+ <img class="w-16 h-16 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Dr. James Oluwande">
243
+ <div>
244
+ <h3 class="text-xl font-bold text-gray-800">Dr. James Oluwande</h3>
245
+ <p class="text-blue-600">Economics, London School of Economics</p>
246
+ </div>
247
+ </div>
248
+ <p class="text-gray-600 mb-4">"My thesis on behavioral economics has been cited in 3 books and I receive monthly royalty payments."</p>
249
+ <div class="flex items-center text-yellow-400">
250
+ <i class="fas fa-star"></i>
251
+ <i class="fas fa-star"></i>
252
+ <i class="fas fa-star"></i>
253
+ <i class="fas fa-star"></i>
254
+ <i class="fas fa-star-half-alt"></i>
255
+ <span class="ml-2 text-gray-600">94 purchases</span>
256
+ </div>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ </section>
261
+
262
+ <!-- FAQ -->
263
+ <section class="py-16 bg-gray-100">
264
+ <div class="container mx-auto px-6 max-w-4xl">
265
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Frequently Asked Questions</h2>
266
+ <div class="space-y-4">
267
+ <div class="bg-white p-6 rounded-lg shadow">
268
+ <button class="flex justify-between items-center w-full text-left font-bold text-gray-800" onclick="toggleFAQ(1)">
269
+ <span>How does copyright work when I sell my thesis?</span>
270
+ <i class="fas fa-chevron-down transition-transform" id="faqIcon1"></i>
271
+ </button>
272
+ <div class="mt-3 text-gray-600 hidden" id="faqContent1">
273
+ <p>You retain full copyright of your work. By listing on our platform, you grant us a non-exclusive license to distribute your thesis. Purchasers receive a license to read and cite your work, but cannot redistribute it.</p>
274
+ </div>
275
+ </div>
276
+ <div class="bg-white p-6 rounded-lg shadow">
277
+ <button class="flex justify-between items-center w-full text-left font-bold text-gray-800" onclick="toggleFAQ(2)">
278
+ <span>What formats can I upload my thesis in?</span>
279
+ <i class="fas fa-chevron-down transition-transform" id="faqIcon2"></i>
280
+ </button>
281
+ <div class="mt-3 text-gray-600 hidden" id="faqContent2">
282
+ <p>We accept PDF, Word (.docx), and LaTeX source files. PDF is preferred as it maintains formatting across devices. If you upload source files, we'll compile them into a PDF for distribution.</p>
283
+ </div>
284
+ </div>
285
+ <div class="bg-white p-6 rounded-lg shadow">
286
+ <button class="flex justify-between items-center w-full text-left font-bold text-gray-800" onclick="toggleFAQ(3)">
287
+ <span>How are payments processed?</span>
288
+ <i class="fas fa-chevron-down transition-transform" id="faqIcon3"></i>
289
+ </button>
290
+ <div class="mt-3 text-gray-600 hidden" id="faqContent3">
291
+ <p>We process payments monthly via PayPal, direct bank transfer, or cryptocurrency. You'll receive a detailed statement showing all downloads and earnings. Minimum payout is $50.</p>
292
+ </div>
293
+ </div>
294
+ <div class="bg-white p-6 rounded-lg shadow">
295
+ <button class="flex justify-between items-center w-full text-left font-bold text-gray-800" onclick="toggleFAQ(4)">
296
+ <span>Can I update my thesis after publishing?</span>
297
+ <i class="fas fa-chevron-down transition-transform" id="faqIcon4"></i>
298
+ </button>
299
+ <div class="mt-3 text-gray-600 hidden" id="faqContent4">
300
+ <p>Yes! You can upload revised versions at any time. Previous purchasers will receive free access to updates. We maintain version history so researchers can cite specific editions.</p>
301
+ </div>
302
+ </div>
303
+ </div>
304
+ </div>
305
+ </section>
306
+
307
+ <!-- Call to Action -->
308
+ <section class="py-16 academic-gradient text-white">
309
+ <div class="container mx-auto px-6 text-center">
310
+ <h2 class="text-3xl font-bold mb-6">Ready to Monetize Your Research?</h2>
311
+ <p class="text-xl text-blue-100 mb-8 max-w-2xl mx-auto">Join hundreds of PhDs who are earning from their academic work while contributing to global knowledge.</p>
312
+ <button class="bg-white text-blue-800 hover:bg-blue-100 font-bold py-3 px-8 rounded-full text-lg">
313
+ <i class="fas fa-user-graduate mr-2"></i> Create Scholar Account
314
+ </button>
315
+ </div>
316
+ </section>
317
+
318
+ <!-- Footer -->
319
+ <footer class="bg-gray-900 text-white py-12">
320
+ <div class="container mx-auto px-6">
321
+ <div class="grid md:grid-cols-4 gap-8">
322
+ <div>
323
+ <h3 class="text-xl font-bold mb-4">ScholarSell</h3>
324
+ <p class="text-gray-400">Empowering academics to monetize their research while advancing human knowledge.</p>
325
+ </div>
326
+ <div>
327
+ <h4 class="font-bold mb-4">Quick Links</h4>
328
+ <ul class="space-y-2">
329
+ <li><a href="#" class="text-gray-400 hover:text-white">Browse Theses</a></li>
330
+ <li><a href="#" class="text-gray-400 hover:text-white">Sell Your Thesis</a></li>
331
+ <li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li>
332
+ <li><a href="#" class="text-gray-400 hover:text-white">Success Stories</a></li>
333
+ </ul>
334
+ </div>
335
+ <div>
336
+ <h4 class="font-bold mb-4">Support</h4>
337
+ <ul class="space-y-2">
338
+ <li><a href="#" class="text-gray-400 hover:text-white">Help Center</a></li>
339
+ <li><a href="#" class="text-gray-400 hover:text-white">Copyright FAQ</a></li>
340
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li>
341
+ <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li>
342
+ </ul>
343
+ </div>
344
+ <div>
345
+ <h4 class="font-bold mb-4">Connect</h4>
346
+ <div class="flex space-x-4 mb-4">
347
+ <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-twitter"></i></a>
348
+ <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-linkedin"></i></a>
349
+ <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-researchgate"></i></a>
350
+ <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-orcid"></i></a>
351
+ </div>
352
+ <p class="text-gray-400">Subscribe to our academic newsletter</p>
353
+ <div class="mt-2 flex">
354
+ <input class="px-4 py-2 rounded-l-lg text-gray-800 w-full" type="email" placeholder="Your email">
355
+ <button class="bg-blue-600 hover:bg-blue-700 px-4 rounded-r-lg">
356
+ <i class="fas fa-paper-plane"></i>
357
+ </button>
358
+ </div>
359
+ </div>
360
+ </div>
361
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
362
+ <p>© 2023 ScholarSell. All rights reserved. Academic marketplace for PhD theses and dissertations.</p>
363
+ </div>
364
+ </div>
365
+ </footer>
366
+
367
+ <script>
368
+ // Toggle FAQ items
369
+ function toggleFAQ(num) {
370
+ const content = document.getElementById(`faqContent${num}`);
371
+ const icon = document.getElementById(`faqIcon${num}`);
372
+
373
+ if (content.classList.contains('hidden')) {
374
+ content.classList.remove('hidden');
375
+ icon.classList.add('rotate-180');
376
+ } else {
377
+ content.classList.add('hidden');
378
+ icon.classList.remove('rotate-180');
379
+ }
380
+ }
381
+
382
+ // Form submission
383
+ document.getElementById('thesisForm').addEventListener('submit', function(e) {
384
+ e.preventDefault();
385
+ alert('Thank you for submitting your thesis! Our academic team will review it within 48 hours.');
386
+ this.reset();
387
+ });
388
+
389
+ // File upload interaction
390
+ const fileInput = document.getElementById('thesisFile');
391
+ const uploadBox = document.querySelector('.highlight-box');
392
+
393
+ uploadBox.addEventListener('click', () => fileInput.click());
394
+
395
+ fileInput.addEventListener('change', function() {
396
+ if (this.files.length > 0) {
397
+ uploadBox.innerHTML = `
398
+ <div class="text-green-500 text-4xl mb-2">
399
+ <i class="fas fa-check-circle"></i>
400
+ </div>
401
+ <p class="text-gray-600">${this.files[0].name}</p>
402
+ <p class="text-sm text-gray-500">${(this.files[0].size / 1024 / 1024).toFixed(2)} MB</p>
403
+ `;
404
+ }
405
+ });
406
+
407
+ // Drag and drop for file upload
408
+ uploadBox.addEventListener('dragover', (e) => {
409
+ e.preventDefault();
410
+ uploadBox.classList.add('border-blue-500', 'bg-blue-50');
411
+ });
412
+
413
+ uploadBox.addEventListener('dragleave', () => {
414
+ uploadBox.classList.remove('border-blue-500', 'bg-blue-50');
415
+ });
416
+
417
+ uploadBox.addEventListener('drop', (e) => {
418
+ e.preventDefault();
419
+ uploadBox.classList.remove('border-blue-500', 'bg-blue-50');
420
+
421
+ if (e.dataTransfer.files.length > 0) {
422
+ fileInput.files = e.dataTransfer.files;
423
+ const event = new Event('change');
424
+ fileInput.dispatchEvent(event);
425
+ }
426
+ });
427
+ </script>
428
+ <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=jrrade/sell-phd-thesis" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
429
+ </html>