Hugging Face's logo

Spaces:
cob05
/
promptcraft-ui
Running

App Files Community
cob05 commited on
Commit
aca1c27
·
verified ·
1 Parent(s): 4a658ad

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +89 -84
  2. prompts.txt +1 -0
index.html CHANGED
@@ -27,13 +27,14 @@
27
  }
28
  .sidebar {
29
  transition: all 0.3s ease;
 
 
 
30
  }
31
  @media (max-width: 768px) {
32
  .sidebar {
33
  transform: translateX(-100%);
34
- position: fixed;
35
  z-index: 50;
36
- height: 100vh;
37
  top: 0;
38
  left: 0;
39
  }
@@ -45,6 +46,10 @@
45
  border-left: 3px solid #a777e3;
46
  padding-left: 1rem;
47
  }
 
 
 
 
48
  </style>
49
  </head>
50
  <body class="bg-gray-50 font-sans">
@@ -154,7 +159,7 @@
154
  </div>
155
 
156
  <!-- Main Content -->
157
- <div class="md:ml-64 p-4">
158
  <!-- Header -->
159
  <header class="mb-6">
160
  <div class="flex justify-between items-center">
@@ -190,7 +195,7 @@
190
  <i class="far fa-star"></i>
191
  </button>
192
  </div>
193
- <p class="text-gray-600 text-sm mb-4">Generate unique story ideas with characters, settings, and plot twists based on your input parameters.</p>
194
  <div class="flex flex-wrap gap-2 mb-4">
195
  <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">#writing</span>
196
  <span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded-full">#fiction</span>
@@ -407,93 +412,93 @@ Write in a [describe tone] tone with [describe style] style.</textarea>
407
  <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500">
408
  <option>Creative Writing</option>
409
  <option>Programming</option>
410
- <option>Business</option>
411
- <option>Education</option>
412
- <option>Other</option>
413
- </select>
414
- </div>
415
-
416
- <div class="bg-gray-50 p-4 rounded-md mb-6">
417
- <h4 class="text-sm font-medium text-gray-700 mb-2 flex items-center">
418
- <i class="fas fa-robot text-purple-500 mr-2"></i>
419
- AI Suggestions
420
- </h4>
421
- <div class="text-sm text-gray-600 mb-3">
422
- <p>Based on your prompt content, I suggest adding these tags to improve discoverability:</p>
423
- <div class="flex flex-wrap gap-2 mt-2">
424
- <button class="px-2 py-1 bg-gray-200 text-gray-700 text-xs rounded-full hover:bg-gray-300">#storytelling</button>
425
- <button class="px-2 py-1 bg-gray-200 text-gray-700 text-xs rounded-full hover:bg-gray-300">#narrative</button>
426
- <button class="px-2 py-1 bg-gray-200 text-gray-700 text-xs rounded-full hover:bg-gray-300">#character</button>
427
- </div>
428
- </div>
429
- <div class="text-sm text-gray-600">
430
- <p>Consider adding these parameters to make your prompt more flexible:</p>
431
- <ul class="list-disc pl-5 mt-2 space-y-1">
432
- <li>Tone options (e.g., humorous, dark, whimsical)</li>
433
- <li>Length specification (short story, novella, etc.)</li>
434
- <li>Point of view options (first person, third person)</li>
435
- </ul>
436
- </div>
437
- </div>
438
- </div>
439
- <div class="flex justify-end space-x-3 border-t border-gray-200 px-6 py-4">
440
- <button class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">Cancel</button>
441
- <button class="px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700">Save Changes</button>
442
- </div>
443
  </div>
 
 
 
 
 
 
 
 
 
444
  </div>
 
 
 
 
 
445
  </div>
 
 
446
 
447
- <script>
448
- // Toggle mobile menu
449
- document.getElementById('menuToggle').addEventListener('click', function() {
450
- document.getElementById('sidebar').classList.toggle('active');
451
- });
452
 
453
- // Close editor modal
454
- document.getElementById('closeEditor').addEventListener('click', function() {
455
- document.getElementById('editorModal').classList.add('hidden');
456
- });
457
 
458
- // Simulate opening editor when edit button is clicked
459
- document.querySelectorAll('.fa-edit').forEach(button => {
460
- button.addEventListener('click', function() {
461
- document.getElementById('editorModal').classList.remove('hidden');
462
- });
463
- });
464
 
465
- // Toggle favorite star
466
- document.querySelectorAll('.fa-star, .fa-star-o').forEach(star => {
467
- star.addEventListener('click', function(e) {
468
- e.stopPropagation();
469
- if (this.classList.contains('far')) {
470
- this.classList.remove('far');
471
- this.classList.add('fas', 'text-yellow-500');
472
- } else {
473
- this.classList.remove('fas', 'text-yellow-500');
474
- this.classList.add('far');
475
- }
476
- });
477
- });
478
 
479
- // Copy prompt to clipboard
480
- document.querySelectorAll('.fa-copy').forEach(button => {
481
- button.addEventListener('click', function(e) {
482
- e.stopPropagation();
483
- const card = this.closest('.prompt-card');
484
- const title = card.querySelector('h3').textContent;
485
- const content = "This would be the full prompt content in a real app";
486
-
487
- // In a real app, we would copy the actual prompt content
488
- navigator.clipboard.writeText(title + "\n\n" + content).then(() => {
489
- const originalIcon = this.classList.contains('far') ? 'far fa-copy' : 'fas fa-copy';
490
- this.className = 'fas fa-check text-green-500';
491
- setTimeout(() => {
492
- this.className = originalIcon;
493
- }, 2000);
494
- });
495
- });
496
- });
497
- </script>
498
  <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=cob05/promptcraft-ui" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
499
  </html>
 
27
  }
28
  .sidebar {
29
  transition: all 0.3s ease;
30
+ height: 100vh;
31
+ position: fixed;
32
+ overflow-y: auto;
33
  }
34
  @media (max-width: 768px) {
35
  .sidebar {
36
  transform: translateX(-100%);
 
37
  z-index: 50;
 
38
  top: 0;
39
  left: 0;
40
  }
 
46
  border-left: 3px solid #a777e3;
47
  padding-left: 1rem;
48
  }
49
+ .main-content {
50
+ min-height: 100vh;
51
+ margin-left: 16rem; /* 64 * 0.25rem = 16rem */
52
+ }
53
  </style>
54
  </head>
55
  <body class="bg-gray-50 font-sans">
 
159
  </div>
160
 
161
  <!-- Main Content -->
162
+ <div class="main-content p-6">
163
  <!-- Header -->
164
  <header class="mb-6">
165
  <div class="flex justify-between items-center">
 
195
  <i class="far fa-star"></i>
196
  </button>
197
  </div>
198
+ <p class="text-gray-600 text-sm mb-4">Generate unique story ideas with characters, settings, and plot twists based your input parameters.</p>
199
  <div class="flex flex-wrap gap-2 mb-4">
200
  <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">#writing</span>
201
  <span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded-full">#fiction</span>
 
412
  <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500">
413
  <option>Creative Writing</option>
414
  <option>Programming</option>
415
+ <option>Business</option>
416
+ <option>Education</option>
417
+ <option>Other</option>
418
+ </select>
419
+ </div>
420
+
421
+ <div class="bg-gray-50 p-4 rounded-md mb-6">
422
+ <h4 class="text-sm font-medium text-gray-700 mb-2 flex items-center">
423
+ <i class="fas fa-robot text-purple-500 mr-2"></i>
424
+ AI Suggestions
425
+ </h4>
426
+ <div class="text-sm text-gray-600 mb-3">
427
+ <p>Based on your prompt content, I suggest adding these tags to improve discoverability:</p>
428
+ <div class="flex flex-wrap gap-2 mt-2">
429
+ <button class="px-2 py-1 bg-gray-200 text-gray-700 text-xs rounded-full hover:bg-gray-300">#storytelling</button>
430
+ <button class="px-2 py-1 bg-gray-200 text-gray-700 text-xs rounded-full hover:bg-gray-300">#narrative</button>
431
+ <button class="px-2 py-1 bg-gray-200 text-gray-700 text-xs rounded-full hover:bg-gray-300">#character</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
432
  </div>
433
+ </div>
434
+ <div class="text-sm text-gray-600">
435
+ <p>Consider adding these parameters to make your prompt more flexible:</p>
436
+ <ul class="list-disc pl-5 mt-2 space-y-1">
437
+ <li>Tone options (e.g., humorous, dark, whimsical)</li>
438
+ <li>Length specification (short story, novella, etc.)</li>
439
+ <li>Point of view options (first person, third person)</li>
440
+ </ul>
441
+ </div>
442
  </div>
443
+ </div>
444
+ <div class="flex justify-end space-x-3 border-t border-gray-200 px-6 py-4">
445
+ <button class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">Cancel</button>
446
+ <button class="px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700">Save Changes</button>
447
+ </div>
448
  </div>
449
+ </div>
450
+ </div>
451
 
452
+ <script>
453
+ // Toggle mobile menu
454
+ document.getElementById('menuToggle').addEventListener('click', function() {
455
+ document.getElementById('sidebar').classList.toggle('active');
456
+ });
457
 
458
+ // Close editor modal
459
+ document.getElementById('closeEditor').addEventListener('click', function() {
460
+ document.getElementById('editorModal').classList.add('hidden');
461
+ });
462
 
463
+ // Simulate opening editor when edit button is clicked
464
+ document.querySelectorAll('.fa-edit').forEach(button => {
465
+ button.addEventListener('click', function() {
466
+ document.getElementById('editorModal').classList.remove('hidden');
467
+ });
468
+ });
469
 
470
+ // Toggle favorite star
471
+ document.querySelectorAll('.fa-star, .fa-star-o').forEach(star => {
472
+ star.addEventListener('click', function(e) {
473
+ e.stopPropagation();
474
+ if (this.classList.contains('far')) {
475
+ this.classList.remove('far');
476
+ this.classList.add('fas', 'text-yellow-500');
477
+ } else {
478
+ this.classList.remove('fas', 'text-yellow-500');
479
+ this.classList.add('far');
480
+ }
481
+ });
482
+ });
483
 
484
+ // Copy prompt to clipboard
485
+ document.querySelectorAll('.fa-copy').forEach(button => {
486
+ button.addEventListener('click', function(e) {
487
+ e.stopPropagation();
488
+ const card = this.closest('.prompt-card');
489
+ const title = card.querySelector('h3').textContent;
490
+ const content = "This would be the full prompt content in a real app";
491
+
492
+ // In a real app, we would copy the actual prompt content
493
+ navigator.clipboard.writeText(title + "\n\n" + content).then(() => {
494
+ const originalIcon = this.classList.contains('far') ? 'far fa-copy' : 'fas fa-copy';
495
+ this.className = 'fas fa-check text-green-500';
496
+ setTimeout(() => {
497
+ this.className = originalIcon;
498
+ }, 2000);
499
+ });
500
+ });
501
+ });
502
+ </script>
503
  <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=cob05/promptcraft-ui" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
504
  </html>
prompts.txt CHANGED
@@ -0,0 +1 @@
 
 
1
+ Please fix the code so that the Prompt Library is at the same height as the sidebar.