Hugging Face's logo

Spaces:
opendev-labs
/
inkfluence-pro-dashboard
Running

App Files Community
opendev-labs commited on
Commit
cfc2758
·
verified ·
1 Parent(s): 614b5d2

please craete a ebook generators dsashboard simple

Browse files
Files changed (2) hide show
  1. ebook-generator.html +119 -0
  2. style.css +8 -0
ebook-generator.html ADDED
@@ -0,0 +1,119 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>InkScribe | eBook Generator</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ </head>
12
+ <body class="bg-secondary-600 text-gray-100 min-h-screen">
13
+ <custom-navbar></custom-navbar>
14
+
15
+ <main class="container mx-auto px-4 py-8">
16
+ <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
17
+ <custom-sidebar></custom-sidebar>
18
+
19
+ <div class="lg:col-span-3 space-y-6">
20
+ <section class="bg-secondary-500 rounded-xl p-6 shadow-lg">
21
+ <h2 class="text-2xl font-bold text-primary-500 mb-6">
22
+ <i data-feather="book-open" class="mr-2"></i>
23
+ eBook Generator
24
+ </h2>
25
+
26
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
27
+ <!-- Book Details -->
28
+ <div class="space-y-4">
29
+ <div>
30
+ <label class="block text-gray-300 mb-2">Book Title</label>
31
+ <input type="text" class="w-full bg-secondary-400 border border-secondary-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500">
32
+ </div>
33
+
34
+ <div>
35
+ <label class="block text-gray-300 mb-2">Description</label>
36
+ <textarea class="w-full bg-secondary-400 border border-secondary-300 rounded-lg px-4 py-2 h-32 focus:outline-none focus:ring-2 focus:ring-primary-500"></textarea>
37
+ </div>
38
+
39
+ <div>
40
+ <label class="block text-gray-300 mb-2">Genre</label>
41
+ <select class="w-full bg-secondary-400 border border-secondary-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500">
42
+ <option>Fiction</option>
43
+ <option>Non-Fiction</option>
44
+ <option>Fantasy</option>
45
+ <option>Mystery</option>
46
+ <option>Romance</option>
47
+ <option>Sci-Fi</option>
48
+ </select>
49
+ </div>
50
+ </div>
51
+
52
+ <!-- Cover & Options -->
53
+ <div class="space-y-4">
54
+ <div class="flex flex-col items-center">
55
+ <div class="w-48 h-64 bg-secondary-400 rounded-lg mb-4 flex items-center justify-center cursor-pointer hover:border-primary-500 hover:border-2 transition">
56
+ <div class="text-center">
57
+ <i data-feather="image" class="w-8 h-8 mx-auto text-gray-500"></i>
58
+ <p class="text-sm text-gray-400">Upload Cover</p>
59
+ </div>
60
+ </div>
61
+ <input type="file" class="hidden" accept="image/*">
62
+ </div>
63
+
64
+ <div class="grid grid-cols-2 gap-4">
65
+ <button class="bg-secondary-400 hover:bg-secondary-300 text-white px-4 py-2 rounded-lg transition flex items-center justify-center">
66
+ <i data-feather="file-text" class="mr-2"></i>
67
+ Import Text
68
+ </button>
69
+ <button class="bg-secondary-400 hover:bg-secondary-300 text-white px-4 py-2 rounded-lg transition flex items-center justify-center">
70
+ <i data-feather="upload" class="mr-2"></i>
71
+ Upload Doc
72
+ </button>
73
+ </div>
74
+ </div>
75
+ </div>
76
+
77
+ <div class="mt-8">
78
+ <h3 class="text-xl font-semibold mb-4">Content Editor</h3>
79
+ <div class="bg-secondary-400 rounded-lg p-4 min-h-64">
80
+ <div class="toolbar flex space-x-2 mb-4">
81
+ <button class="p-2 rounded hover:bg-secondary-300">
82
+ <i data-feather="bold"></i>
83
+ </button>
84
+ <button class="p-2 rounded hover:bg-secondary-300">
85
+ <i data-feather="italic"></i>
86
+ </button>
87
+ <button class="p-2 rounded hover:bg-secondary-300">
88
+ <i data-feather="underline"></i>
89
+ </button>
90
+ <button class="p-2 rounded hover:bg-secondary-300">
91
+ <i data-feather="align-left"></i>
92
+ </button>
93
+ <button class="p-2 rounded hover:bg-secondary-300">
94
+ <i data-feather="list"></i>
95
+ </button>
96
+ </div>
97
+ <div contenteditable="true" class="bg-secondary-500 rounded p-4 min-h-48 focus:outline-none" placeholder="Write your content here..."></div>
98
+ </div>
99
+ </div>
100
+
101
+ <div class="flex justify-end mt-6 space-x-4">
102
+ <button class="bg-secondary-400 hover:bg-secondary-300 px-6 py-2 rounded-lg transition">
103
+ Save Draft
104
+ </button>
105
+ <button class="bg-primary-500 hover:bg-primary-600 px-6 py-2 rounded-lg transition flex items-center">
106
+ <i data-feather="book" class="mr-2"></i>
107
+ Generate eBook
108
+ </button>
109
+ </div>
110
+ </section>
111
+ </div>
112
+ </div>
113
+ </main>
114
+
115
+ <script src="components/navbar.js"></script>
116
+ <script src="components/sidebar.js"></script>
117
+ <script>feather.replace();</script>
118
+ </body>
119
+ </html>
style.css CHANGED
@@ -35,6 +35,14 @@ h1, h2, h3, h4, h5, h6 {
35
  transform: translateY(-5px);
36
  border-color: rgba(239, 68, 68, 0.5);
37
  }
 
 
 
 
 
 
 
 
38
  /* Custom scrollbar */
39
  ::-webkit-scrollbar {
40
  width: 8px;
 
35
  transform: translateY(-5px);
36
  border-color: rgba(239, 68, 68, 0.5);
37
  }
38
+ /* Editor styles */
39
+ [contenteditable="true"]:empty:before {
40
+ content: attr(placeholder);
41
+ color: #6b7280;
42
+ pointer-events: none;
43
+ display: block;
44
+ }
45
+
46
  /* Custom scrollbar */
47
  ::-webkit-scrollbar {
48
  width: 8px;